💄 Material dark original, improved variable inheritance

This commit is contained in:
Alicia Sykes 2021-10-30 23:55:52 +01:00
parent c7fc62534a
commit e39b14a16d
1 changed files with 26 additions and 24 deletions

View File

@ -239,21 +239,23 @@ html[data-theme='material-original'] {
html[data-theme='material-dark-original'] { html[data-theme='material-dark-original'] {
--primary: #08B0BB; --primary: #08B0BB;
--settings-text-color: #08B0BB;
--background: #39434C; --background: #39434C;
--background-darker: #08B0BB; --background-darker: var(--primary);
--material-dark: #131a1f;
--material-light: #41e2ed;
--settings-text-color: var(--primary);
--settings-background: #092b3a; --settings-background: #092b3a;
--item-group-background: #333C43; --item-group-background: #333C43;
--item-background: #414B55; --item-background: #414B55;
--item-background-hover: #414B55; --item-background-hover: #414B55;
--settings-background: #131a1f; --settings-background: var(--material-dark);
--search-container-background: #131a1f; --search-container-background: var(--material-dark);
--search-field-background: #39434c; --search-field-background: var(--background);
--heading-text-color: #131a1f; --heading-text-color: var(--material-dark);
--nav-link-text-color: #08B0BB; --nav-link-text-color: var(--primary);
--nav-link-background-color: #131a1f; --nav-link-background-color: var(--material-dark);
--nav-link-text-color-hover: #08B0BB; --nav-link-text-color-hover: var(--primary);
--nav-link-background-color-hover: #131a1fc7; --nav-link-background-color-hover: var(--material-dark);
--nav-link-border-color-hover: transparent; --nav-link-border-color-hover: transparent;
--curve-factor: 2px; --curve-factor: 2px;
--curve-factor-navbar: 0; --curve-factor-navbar: 0;
@ -262,25 +264,25 @@ html[data-theme='material-dark-original'] {
--item-hover-shadow: 4px 4px 3px #00000082, 0 1px 10px #00000040; --item-hover-shadow: 4px 4px 3px #00000082, 0 1px 10px #00000040;
--item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65); --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); --item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
--welcome-popup-background: #131a1f; --welcome-popup-background: var(--material-dark);
--welcome-popup-text-color: var(--primary); --welcome-popup-text-color: var(--primary);
--config-settings-background: #131a1f; --config-settings-background: var(--material-dark);
--config-settings-color: #41e2ed; --config-settings-color: var(--material-light);
--interactive-editor-color: #41e2ed; --interactive-editor-color: var(--material-light);
--interactive-editor-background: #131a1f; --interactive-editor-background: var(--material-dark);
--interactive-editor-background-darker: #092b3a; --interactive-editor-background-darker: var(--material-dark);
--scroll-bar-color: #08B0BB; --scroll-bar-color: var(--primary);
--scroll-bar-background: #131a1f; --scroll-bar-background: var(--material-dark);
--status-check-tooltip-background: #131a1f; --status-check-tooltip-background: var(--material-dark);
--status-check-tooltip-color: #08B0BB; --status-check-tooltip-color: var(--primary);
--description-tooltip-background: #131a1f; --description-tooltip-background: var(--material-dark);
--description-tooltip-color: #08B0BB; --description-tooltip-color: var(--primary);
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
border-left: 1px solid #131a1f; border-left: 1px solid var(--material-dark);
} }
div.context-menu { div.context-menu {
border: none; border: none;
background: #131a1f; background: var(--material-dark);
ul li:hover { ul li:hover {
background: #333c43; background: #333c43;
} }