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

Adds more themes, adds ability to hide unneeded components

Browse Source
This commit is contained in:
Alicia Sykes
2021-04-16 14:29:19 +01:00
parent 7f3e8dd818
commit c5f630849f
12 changed files with 116 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,15 @@
:root {
/* Basic*/
--background: #0b1021;
--background-darker: #05070e;
--primary: #5cabca;
--primary: #5cabca; // Main accent color
--background: #0b1021; // Page background
--background-darker: #05070e; // Used for navigation bar, footer and fills
/* Modified Colors */
--item-group-background: #0b1021cc;
--medium-grey: #5e6474;
--item-background: #607d8b33;
--item-background-hover: #607d8b4d;
/* Semi-Transparent Black*/
--transparent-70: #000000b3;
@@ -16,21 +18,24 @@
/* Other Variables */
--outline-color: none;
--curve-factor: 5px;
--curve-factor-navbar: 16px;
--dimming-factor: 0.8;
--curve-factor: 5px; // Border radius for most components
--curve-factor-navbar: 16px; // Border radius for header
--dimming-factor: 0.8; // Opacity for semi-transparent components
/* Settings for specific components */
--item-group-padding: 5px;
--item-group-padding: 5px; // Determines width of item-group outline
--item-shadow: 1px 1px 2px #130f23;
--item-group-shadow: var(--item-shadow);
--item-hover-shadow: 1px 2px 4px #373737;
--item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
--item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
--item-group-shadow: var(--item-shadow);
--item-background: #607d8b33;
--item-background-hover: #607d8b4d;
--settings-text-color: var(--primary);
/* Specific components, using variables allows them to be overridden individually */
--item-text-color: var(--primary);
--item-group-outer-background: var(--primary);
--item-group-heading-text-color: var(--item-group-background);
--item-group-heading-text-color-hover: var(--background);
--settings-background: var(--background);
--settings-text-color: var(--primary);
--search-container-background: var(--background-darker);
}

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

@@ -1,26 +1,3 @@
html[data-theme='nord'] {
--primary: #D8DEE9;
--background: #3B4252;
--background-darker: #2E3440;
--item-background: #434C5E;
--item-background-hover: #4C566A;
.collapsable:nth-child(1n) { background: #BF616A; }
.collapsable:nth-child(2n) { background: #D08770; }
.collapsable:nth-child(3n) { background: #EBCB8B; }
.collapsable:nth-child(4n) { background: #A3BE8C; }
}
html[data-theme='nord-frost'] {
--primary: #D8DEE9;
--background: #3B4252;
--background-darker: #2E3440;
--item-background: #434C5E;
--item-background-hover: #4C566A;
.collapsable:nth-child(1n) { background: #8FBCBB; }
.collapsable:nth-child(2n) { background: #88C0D0; }
.collapsable:nth-child(3n) { background: #81A1C1; }
.collapsable:nth-child(4n) { background: #5E81AC; }
}
html[data-theme='callisto'] {
--background: #141b33;
@@ -117,6 +94,30 @@ html[data-theme='high-contrast-dark'] {
--curve-factor: 0px;
}
html[data-theme='nord'] {
--primary: #D8DEE9;
--background: #3B4252;
--background-darker: #2E3440;
--item-background: #434C5E;
--item-background-hover: #4C566A;
.collapsable:nth-child(1n) { background: #BF616A; }
.collapsable:nth-child(2n) { background: #D08770; }
.collapsable:nth-child(3n) { background: #EBCB8B; }
.collapsable:nth-child(4n) { background: #A3BE8C; }
}
html[data-theme='nord-frost'] {
--primary: #D8DEE9;
--background: #3B4252;
--background-darker: #2E3440;
--item-background: #434C5E;
--item-background-hover: #4C566A;
.collapsable:nth-child(1n) { background: #8FBCBB; }
.collapsable:nth-child(2n) { background: #88C0D0; }
.collapsable:nth-child(3n) { background: #81A1C1; }
.collapsable:nth-child(4n) { background: #5E81AC; }
}
html[data-theme='material'] {
--primary: #29B6F6;
--settings-text-color: #01579b;
@@ -135,4 +136,30 @@ html[data-theme='material'] {
--item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
--item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
--item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
}
html[data-theme='colorful'] {
--primary: #e8eae1;
--background: #0b1021;
--item-background: #05070e;
--item-background-hover: #0b1021;
--item-group-background: transparent;
--item-group-outer-background: #05070e;
--item-group-heading-text-color: #e8eae1;
--item-group-heading-text-color-hover: #fff;
.item:nth-child(1n) { color: #eb5cad; border: 1px solid #eb5cad; }
.item:nth-child(2n) { color: #985ceb; border: 1px solid #985ceb; }
.item:nth-child(3n) { color: #5c90eb; border: 1px solid #5c90eb; }
.item:nth-child(4n) { color: #5cdfeb; border: 1px solid #5cdfeb; }
.item:nth-child(5n) { color: #5ceb8d; border: 1px solid #5ceb8d; }
.item:nth-child(6n) { color: #afeb5c; border: 1px solid #afeb5c; }
.item:nth-child(7n) { color: #ebb75c; border: 1px solid #ebb75c; }
.item:nth-child(8n) { color: #eb615c; border: 1px solid #eb615c; }
.item:hover, .item:focus {
opacity: 0.85;
outline: none;
background: currentColor;
span { color: #05070e; }
svg path { fill: #05070e; }
}
}