diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss index 6b352ece..48e63002 100644 --- a/src/styles/color-themes.scss +++ b/src/styles/color-themes.scss @@ -318,7 +318,7 @@ html[data-theme='minimal-light'], html[data-theme='minimal-dark'], html[data-the } label.lbl-toggle h3 { - font-size: 1.8rem; + font-size: 1.5rem; } .tile-title span.text { font-size: 1.1rem; @@ -861,6 +861,81 @@ html[data-theme="oblivion-scotch"] { } } +html[data-theme="dashy-docs"] { + --primary: #f5f6f7; + --background: #202020; + --background-darker: #121212; + --item-group-background: none; + --item-group-outer-background: #121212; + --item-group-heading-text-color: var(--background); + --item-group-heading-text-color-hover: var(--background); + --item-background: var(--background); + --item-background-hover: var(--background); + --item-text-color: var(--primary); + --minimal-view-section-heading-color: var(--background); + --item-group-padding: 0; + --curve-factor: 3px; + --curve-factor-navbar: 6px; + --item-shadow: 4px 4px 6px #00000080, -2px -2px 4px rgb(0 0 0 / 40%); + --item-group-shadow: 0px 3px 2px #222222, 0px 0px 2px #3e3e3e; + --font-headings: 'PTMono', 'Courier New', monospace; + + footer { + box-shadow: 0 -3px 4px #010101; + } + + section.settings-outer form input { + box-shadow: 1px 2px 4px #0b0b0b; + } + + @mixin make-colors($first, $second) { + background: $first; box-shadow: 0 4px $second; + &:hover { box-shadow: 0 2px $second; } + } + + // Section headings, nav bar items and minimal tabs + div.collapsable:nth-child(1n) label.lbl-toggle, + .minimal-section-heading:nth-child(1n), + a.nav-item:nth-child(1n) { + @include make-colors(#db78fc, #b83ddd); + } + div.collapsable:nth-child(2n) label.lbl-toggle, + .minimal-section-heading:nth-child(2n), + a.nav-item:nth-child(2n) { + @include make-colors(#5c85f7, #3d48dd); + } + div.collapsable:nth-child(3n) label.lbl-toggle, + .minimal-section-heading:nth-child(3n), + a.nav-item:nth-child(3n) { + @include make-colors(#41ef90, #1e9554); + } + div.collapsable:nth-child(4n) label.lbl-toggle, + .minimal-section-heading:nth-child(4n), + a.nav-item:nth-child(4n) { + @include make-colors(#dcff5a, #ceb73f); + } + + // Section items + div.collapsable:nth-child(1n) { .item-wrapper:hover { .item {box-shadow: 0 2px 3px #db78fc; .tile-title { color: #db78fc; } } } } + div.collapsable:nth-child(2n) { .item-wrapper:hover { .item { box-shadow: 0 2px 3px #5c85f7; .tile-title { color: #5c85f7; } } } } + div.collapsable:nth-child(3n) { .item-wrapper:hover { .item { box-shadow: 0 2px 3px #41ef90; .tile-title { color: #41ef90; } } } } + div.collapsable:nth-child(4n) { .item-wrapper:hover { .item { box-shadow: 0 2px 3px #dcff5a; .tile-title { color: #dcff5a; } } } } + + + a.nav-item, a.nav-item:hover, a.nav-item.router-link-active { + border: none; + color: var(--background); + font-weight: bold; + } + + .minimal-section-heading { + border: none !important; + &.selected { + background: var(--primary) !important; + } + } +} + html[data-theme="oblivion-blue"] { --primary: #82a5f3; } diff --git a/src/utils/defaults.js b/src/utils/defaults.js index 080a43f8..a1896251 100644 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -60,6 +60,7 @@ module.exports = { 'vaporware', 'high-contrast-dark', 'high-contrast-light', + 'dashy-docs', ], /* Which structural components should be visible by default */ visibleComponents: {