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

🎨 Improved cross-theme widget styling and options

Browse Source
This commit is contained in:
Alicia Sykes
2022-01-22 20:46:34 +00:00
parent c3b6d2b0e0
commit 407384de63
5 changed files with 68 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -90,6 +90,7 @@
--side-bar-color: var(--primary);
--side-bar-item-background: var(--side-bar-background);
--side-bar-item-color: var(--side-bar-color);
--workspace-web-content-background: var(--background);
// Minimal view
--minimal-view-background-color: var(--background);
--minimal-view-title-color: var(--primary);

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

@@ -237,6 +237,10 @@ html[data-theme='material-original'] {
--context-menu-background: var(--white);
--context-menu-secondary-color: var(--white);
--widget-text-color: var(--black);
--minimal-view-section-heading-background: var(--white);
--minimal-view-search-background: var(--white);
--minimal-view-search-color: var(--background-darker);
--minimal-view-group-background: #e3e3e3;
div.context-menu ul li:hover {
background: var(--primary);
color: var(--white);
@@ -244,16 +248,17 @@ html[data-theme='material-original'] {
.widget-base {
background: #f5f5f5;
box-shadow: var(--item-shadow);
padding: 0.25rem;
padding: 0.5rem;
margin: 0.25rem 0;
}
.minimal-widget-wrap .widget-base { box-shadow: none; border: none; }
}
html[data-theme='material-dark-original'] {
--primary: #08B0BB;
--background: #39434C;
--background-darker: var(--primary);
--material-dark: #131a1f;
--material-dark: #1b252c;
--material-light: #41e2ed;
--settings-text-color: var(--primary);
--settings-background: #092b3a;
@@ -290,6 +295,10 @@ html[data-theme='material-dark-original'] {
--description-tooltip-background: var(--material-dark);
--description-tooltip-color: var(--primary);
--widget-text-color: var(--white);
--minimal-view-section-heading-background: var(--material-dark);
--minimal-view-search-background: var(--material-dark);
--minimal-view-search-color: var(--background-darker);
--minimal-view-group-background: var(--material-dark);
&::-webkit-scrollbar-thumb {
border-left: 1px solid var(--material-dark);
}
@@ -300,6 +309,10 @@ html[data-theme='material-dark-original'] {
background: #333c43;
}
}
div.minimal-section-heading, .minimal-section-inner.selected, input.minimal-search {
box-shadow: 2px 2px 4px #000000, 0 1px 3px #000000cc;
}
.minimal-section-inner.selected { border-top: none; }
}
html[data-theme='colorful'] {
@@ -382,6 +395,12 @@ html[data-theme='minimal-light'], html[data-theme='minimal-dark'], html[data-the
border-bottom: 1px dashed #ffffff38;
border-radius: 0;
}
.widget-base {
background: var(--background-darker);
padding: 1rem 0.5rem;
margin: 0.5rem 0;
}
.minimal-widget-wrap .widget-base { box-shadow: none; border: none; }
}
html[data-theme='material'], html[data-theme='material-dark'] {
@@ -565,6 +584,8 @@ html[data-theme='material'] {
--minimal-view-group-color: var(--primary);
--minimal-view-group-background: var(--white);
--widget-background-color: var(--background);
.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);
@@ -606,9 +627,10 @@ html[data-theme='material'] {
.widget-base {
background: #f5f5f5;
box-shadow: var(--item-shadow);
padding: 0.25rem;
padding: 0.5rem;
margin: 0.25rem 0;
}
.minimal-widget-wrap .widget-base { box-shadow: none; }
}
html[data-theme='material-dark'] {
@@ -677,7 +699,8 @@ html[data-theme='material-dark'] {
// --minimal-view-group-color: var(--primary);
--minimal-view-group-background: #131a1f;
--context-menu-secondary-color: #131a1f;
--widget-accent-color: #131a1fbf;
div.minimal-section-heading h3, div.minimal-section-heading.selected h3 {
color: #d5d5d5;
}
@@ -699,8 +722,9 @@ html[data-theme='material-dark'] {
background: var(--item-background);
box-shadow: var(--item-shadow);
margin: 0.25rem 0;
padding: 0.25rem;
padding: 0.5rem;
}
.minimal-widget-wrap .widget-base { box-shadow: none; }
}
html[data-theme='minimal-light'] {
@@ -731,6 +755,7 @@ html[data-theme='minimal-light'] {
--about-page-color: var(--background-darker);
--context-menu-color: var(--background-darker);
--context-menu-secondary-color: var(--primary);
--widget-text-color: #4e4e4e;
section.filter-container {
background: var(--white);
border-bottom: 1px dashed #00000038;
@@ -738,6 +763,9 @@ html[data-theme='minimal-light'] {
border: 1px solid var(--background-darker);
}
}
.widget-base {
background: #f2f2f2;
}
}
html[data-theme='minimal-dark'] {
@@ -804,6 +832,7 @@ html[data-theme='vaporware'] {
--description-tooltip-background: var(--background);
--heading-text-color: var(--background);
--search-label-color: var(--background);
--widget-accent-color: #1d194f;
div.item-group-container {
gap: 0.3rem;
@@ -859,6 +888,11 @@ html[data-theme='vaporware'] {
background: none;
}
}
.widget-base {
background: var(--background);
padding: 1rem 0.5rem;
margin: 0.5rem 0;
}
}
html[data-theme='glow'], html[data-theme=glow-colorful] {
@@ -1004,11 +1038,17 @@ html[data-theme="oblivion-scotch"] {
div.item-wrapper a.item {
border: 1px solid #313d4f;
}
section.filter-container form input#filter-tiles {
section.filter-container form input#filter-tiles, .widget-base {
border: 1px solid #313d4f;
box-shadow: 0 1px 5px #0c0d0e;
}
.widget-base {
background: var(--item-background);
box-shadow: var(--item-shadow);
padding: 0.5rem;
margin: 1rem 0;
}
.minimal-widget-wrap .widget-base { box-shadow: none; border: none; }
.minimal-home div.item-group-container, input.minimal-search {
box-shadow: 0 1px 6px #00000099, 0 1px 1px #000000cc;
}
@@ -1226,6 +1266,8 @@ html[data-theme="color-block"] {
--curve-factor: 4px;
--curve-factor-navbar: 8px;
--widget-text-color: var(--white);
// Style overrides
label.lbl-toggle h3 { font-size: 1.3rem; font-weight: bold; }
.content-inner { border-top: 1px dashed var(--primary); }
@@ -1241,6 +1283,11 @@ html[data-theme="color-block"] {
box-shadow: var(--item-hover-shadow);
}
}
.widget-base {
background: var(--background-darker);
padding: 1rem 0.5rem;
margin: 0.5rem 0;
}
}
html[data-theme="one-dark"] {
@@ -1311,6 +1358,7 @@ html[data-theme="one-dark"] {
padding: 0.5rem;
margin: 1rem 0;
}
.minimal-widget-wrap .widget-base { box-shadow: none; border: none; }
}