diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue index 8dba7106..67199e03 100644 --- a/src/components/Configuration/ConfigContainer.vue +++ b/src/components/Configuration/ConfigContainer.vue @@ -271,6 +271,7 @@ a.hyperlink-wrapper { border-radius: var(--curve-factor); text-align: left; opacity: var(--dimming-factor); + color: var(--config-settings-color); background: var(--config-settings-background); p.sub-title { font-weight: bold; diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss index 56a6645c..740b41a1 100644 --- a/src/styles/color-palette.scss +++ b/src/styles/color-palette.scss @@ -1,3 +1,4 @@ +@import '@/styles/media-queries.scss'; :root { /* Basic*/ diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss index 447e587f..79cf4188 100644 --- a/src/styles/color-themes.scss +++ b/src/styles/color-themes.scss @@ -182,6 +182,11 @@ html[data-theme='material-dark'] { --welcome-popup-text-color: var(--primary); --config-settings-background: #131a1f; --config-settings-color: #41e2ed; + --scroll-bar-color: #08B0BB; + --scroll-bar-background: #131a1f; + &::-webkit-scrollbar-thumb { + border-left: 1px solid #131a1f; + } } html[data-theme='colorful'] { @@ -211,3 +216,113 @@ html[data-theme='colorful'] { i.fas, i.fab, i.far, i.fal, i.fad { color: #05070e; } } } + +html[data-theme='minimal-light'], html[data-theme='minimal-dark'] { + .item-group-container:not(.item-size-small):not(.orientation-vertical) { + display: flex; + flex-direction: column; + .there-are-items { + display: grid; + grid-template-columns: repeat(5, 1fr); + @include phone { grid-template-columns: repeat(2, 1fr); } + @include tablet { grid-template-columns: repeat(4, 1fr); } + @include laptop { grid-template-columns: repeat(6, 1fr); } + @include monitor { grid-template-columns: repeat(8, 1fr); } + @include big-screen { grid-template-columns: repeat(10, 1fr); } + @include big-screen-up { grid-template-columns: repeat(12, 1fr); } + } + .collapsable { + border-bottom: 1px dashed #ffffff38; + border-radius: 0; + } + } + + label.lbl-toggle h3 { + font-size: 1.8rem; + } + .tile-title span.text { + font-size: 1.2rem; + font-weight: bold; + } + + header { + padding: 0.1rem 0.5rem; + .page-titles{ + h1 { + font-size: 1.25rem; + } + span.subtitle { + font-size: 0.8rem; + + } + } + .nav .nav-item { + padding: 0.2rem 0.4rem; + box-shadow: none; + } + } + +} + +html[data-theme='minimal-light'] { + --primary: #a5a5a5; + --background: #ffffff; + --background-darker: #14171e; + --item-group-outer-background: none; + --item-group-shadow: none; + --item-group-background: none; + --item-background: none; + --item-background-hover: #f2f2f2; + --item-shadow: none; + --item-hover-shadow: none; + --item-text-color: #101931; + --item-group-heading-text-color-hover: #101931; + --settings-text-color: #101931; + --config-code-color: #101931; + --nav-link-background-color: none; + --search-container-background: #fff; + --curve-factor: 4px; + --curve-factor-navbar: 8px; + + section.filter-container { + background: #fff; + border-bottom: 1px dashed #00000038; + input#filter-tiles { + border: 1px solid #101931; + } + } +} + +html[data-theme='minimal-dark'] { + --primary: #a5a5a5; + --background: #14171e; + --background-darker: #000; + --item-group-outer-background: none; + --item-group-shadow: none; + --item-group-background: none; + --item-background: none; + --item-background-hover: #14171e; + --item-shadow: none; + --item-hover-shadow: none; + --item-text-color: #fff; + --item-group-heading-text-color-hover: #fff; + --settings-text-color: #fff; + --config-code-color: #fff; + --nav-link-background-color: none; + --search-container-background: #14171e; + --curve-factor: 4px; + --curve-factor-navbar: 8px; + + label.lbl-toggle h3 { + font-size: 1.8rem; + color: #fff; + } + + section.filter-container { + background: #14171e; + border-bottom: 1px dashed #ffffff38; + input#filter-tiles { + border: 1px solid #fff; + } + } +} \ No newline at end of file diff --git a/src/utils/defaults.js b/src/utils/defaults.js index fc627c4b..e159aebf 100644 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -28,8 +28,10 @@ module.exports = { 'raspberry-jam', 'tiger', 'colorful', - 'high-contrast-light', + 'minimal-dark', + 'minimal-light', 'high-contrast-dark', + 'high-contrast-light', ], visibleComponents: { pageTitle: true,