josh/dashy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 Adds configurable CSS variables to the Minimal view

Browse Source
This commit is contained in:
Alicia Sykes
2021-08-14 19:12:00 +01:00
parent 166bc3965d
commit a18b723484
6 changed files with 115 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/styles/color-palette.scss
View File

@@ -35,54 +35,74 @@
* all variables are optional, since they inherit initial values from above*
* Using specific variables makes overriding for custom themes really easy */
--heading-text-color: var(--primary);
// Nav-bar links
--nav-link-text-color: var(--primary);
--nav-link-background-color: #607d8b33;
--nav-link-text-color-hover: var(--primary);
--nav-link-background-color-hover: #607d8b33;
--nav-link-border-color: transparent;
--nav-link-border-color-hover: var(--primary);
// Link items and sections
--item-text-color: var(--primary);
--item-text-color-hover: var(--item-text-color);
--item-group-outer-background: var(--primary);
--item-group-heading-text-color: var(--item-group-background);
--item-group-heading-text-color-hover: var(--background);
// Settings and config
--settings-background: var(--background);
--settings-text-color: var(--primary);
--search-container-background: var(--background-darker);
--search-field-background: var(--background);
--search-label-color: var(--settings-text-color);
--footer-text-color: var(--medium-grey);
--footer-text-color-link: var(--primary);
--footer-background: var(--background-darker);
--welcome-popup-background: var(--background-darker);
--welcome-popup-text-color: var(--primary);
--config-code-background: #fff;
--config-code-color: var(--background);
--config-settings-color: var(--primary);
--config-settings-background: var(--background-darker);
--toast-background: var(--primary);
--toast-color: var(--background);
--code-editor-color: var(--black);
--code-editor-background: var(--white);
// Search bar (on homepage)
--search-container-background: var(--background-darker);
--search-field-background: var(--background);
--search-label-color: var(--settings-text-color);
// Page footer
--footer-text-color: var(--medium-grey);
--footer-text-color-link: var(--primary);
--footer-background: var(--background-darker);
// Right-click context menu
--context-menu-background: var(--background);
--context-menu-color: var(--primary);
--context-menu-secondary-color: var(--background-darker);
// Workspace view
--side-bar-background: var(--background-darker);
--side-bar-background-lighter: var(--background);
--side-bar-color: var(--primary);
// Minimal view
--minimal-view-background-color: var(--background);
--minimal-view-title-color: var(--primary);
--minimal-view-settings-color: var(--primary);
--minimal-view-section-heading-color: var(--primary);
--minimal-view-section-heading-background: var(--background-darker);
--minimal-view-search-background: var(--background-darker);
--minimal-view-search-color: var(--primary);
--minimal-view-group-color: var(--primary);
--minimal-view-group-background: var(--background-darker);
// Login page
--login-form-color: var(--primary);
--login-form-background: var(--background);
--login-form-background-secondary: var(--background-darker);
// About page
--about-page-color: var(--white);
--about-page-background: var(--background);
--about-page-accent: var(--primary);
// Webpage colors, highlight, scrollbar
--scroll-bar-color: var(--primary);
--scroll-bar-background: var(--background-darker);
--highlight-color: var(--background);
--highlight-background: var(--primary);
// Misc components
--loading-screen-color: var(--primary);
--loading-screen-background: var(--background);
--login-form-color: var(--primary);
--login-form-background: var(--background);
--login-form-background-secondary: var(--background-darker);
--about-page-color: var(--white);
--about-page-background: var(--background);
--about-page-accent: var(--primary);
--side-bar-background: var(--background-darker);
--side-bar-background-lighter: var(--background);
--side-bar-color: var(--primary);
--status-check-tooltip-background: var(--background-darker);
--status-check-tooltip-color: var(--primary);
--code-editor-color: var(--black);
--code-editor-background: var(--white);
--context-menu-background: var(--background);
--context-menu-color: var(--primary);
--context-menu-secondary-color: var(--background-darker);
--welcome-popup-background: var(--background-darker);
--welcome-popup-text-color: var(--primary);
--toast-background: var(--primary);
--toast-color: var(--background);
}

51
src/styles/color-themes.scss
View File

@@ -481,7 +481,7 @@ html[data-theme='material'], html[data-theme='material-dark'] {
html[data-theme='material'] {
--primary: #363636;
--background: #f5f5f5;
--background: #eee;
--background-darker: #5c90eb;
--item-group-outer-background: none;
--item-group-shadow: none;
@@ -501,7 +501,7 @@ html[data-theme='material'] {
--config-settings-background: #f5f5f5;
--config-settings-color: #473f3f;
--heading-text-color: #fff;
--curve-factor: 4px;
--curve-factor: 3px;
--curve-factor-navbar: 8px;
--search-container-background: #4285f4;
--welcome-popup-text-color: #f5f5f5;
@@ -510,6 +510,30 @@ html[data-theme='material'] {
--context-menu-secondary-color: #f5f5f5;
--transparent-white-50: #00000080;
--minimal-view-background-color: var(--background);
--minimal-view-title-color: var(--background-darker);
--minimal-view-settings-color: var(--primary);
--minimal-view-section-heading-color: var(--primary);
--minimal-view-section-heading-background: #f6f6f6;
--minimal-view-search-background: #fff;
--minimal-view-search-color: var(--primary);
--minimal-view-group-color: var(--primary);
--minimal-view-group-background: #fff;
.minimal-section-inner.selected, div.minimal-section-heading {
border: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.title-and-search form input {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
div.minimal-section-heading.selected {
background: #5c90eb;
}
div.minimal-section-inner {
background: #ffffff80;
}
div.jsoneditor div.jsoneditor-menu {
background: #5c90eb !important;
}
@@ -585,6 +609,25 @@ html[data-theme='material-dark'] {
// --login-form-color: #131a1f;
--login-form-background-secondary: #131a1f;
// --minimal-view-background-color: var(--background);
// --minimal-view-title-color: var(--primary);
// --minimal-view-settings-color: var(--primary);
--minimal-view-section-heading-color: #131a1f;
--minimal-view-section-heading-background: var(--background);
--minimal-view-search-background: #131a1f;
// --minimal-view-search-color: var(--primary);
// --minimal-view-group-color: var(--primary);
--minimal-view-group-background: #131a1f;
div.minimal-section-heading h3, div.minimal-section-heading.selected h3 {
color: #d5d5d5;
}
div.minimal-section-heading, .minimal-section-inner.selected, input.minimal-search {
box-shadow: 2px 2px 4px #000000, 0 1px 3px #000000cc;
border-color: #131a1f80;
}
&::-webkit-scrollbar-thumb {
border-left: 1px solid #131a1f;
}
@@ -812,6 +855,10 @@ html[data-theme="oblivion-scotch"] {
border: 1px solid #313d4f;
box-shadow: 0 1px 5px #0c0d0e;
}
.minimal-home div.item-group-container, input.minimal-search {
box-shadow: 0 1px 6px #00000099, 0 1px 1px #000000cc;
}
}
html[data-theme="oblivion-blue"] {