From a18b723484703a9dd959c0700afebd9c1ebbe681 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sat, 14 Aug 2021 19:12:00 +0100 Subject: [PATCH] :lipstick: Adds configurable CSS variables to the Minimal view --- src/components/MinimalView/MinimalHeading.vue | 12 ++-- src/components/MinimalView/MinimalSearch.vue | 22 +++--- src/components/MinimalView/MinimalSection.vue | 4 +- src/styles/color-palette.scss | 70 ++++++++++++------- src/styles/color-themes.scss | 51 +++++++++++++- src/views/Minimal.vue | 8 +-- 6 files changed, 115 insertions(+), 52 deletions(-) diff --git a/src/components/MinimalView/MinimalHeading.vue b/src/components/MinimalView/MinimalHeading.vue index 8a3f36c9..5b99c9f2 100644 --- a/src/components/MinimalView/MinimalHeading.vue +++ b/src/components/MinimalView/MinimalHeading.vue @@ -30,19 +30,19 @@ export default { div.minimal-section-heading { cursor: pointer; padding: 0.5rem 0.25rem; - border-radius: var(--curve-factor); - border: 1px solid var(--primary); + margin-bottom: 0; + background: var(--minimal-view-section-heading-background); + border: 1px solid var(--minimal-view-section-heading-color); border-bottom: none; border-radius: var(--curve-factor) var(--curve-factor) 0 0; - margin-bottom: 0; h3 { margin: 0; - color: var(--primary); + color: var(--minimal-view-section-heading-color); } &.selected { - background: var(--primary); + background: var(--minimal-view-section-heading-color); h3 { - color: var(--item-group-heading-text-color); + color: var(--minimal-view-section-heading-background); } } } diff --git a/src/components/MinimalView/MinimalSearch.vue b/src/components/MinimalView/MinimalSearch.vue index 511cb37e..d0df763e 100644 --- a/src/components/MinimalView/MinimalSearch.vue +++ b/src/components/MinimalView/MinimalSearch.vue @@ -4,6 +4,7 @@ id="filter-tiles" v-model="input" ref="filter" + class="minimal-search" :placeholder="$t('search.search-placeholder')" v-on:input="userIsTypingSomething" @keydown.esc="clearFilterInput" /> @@ -84,12 +85,6 @@ export default { form { display: flex; align-items: center; - label { - display: inline; - color: var(--search-label-color); - margin: 0.5rem; - display: inline; - } input { display: inline-block; width: 80%; @@ -100,17 +95,17 @@ export default { outline: none; border: 1px solid var(--outline-color); border-radius: var(--curve-factor); - background: var(--background-darker); - color: var(--settings-text-color); + background: var(--minimal-view-search-background); + color: var(--minimal-view-search-color); &:focus { - border-color: var(--settings-text-color); + border-color: var(--minimal-view-search-color); opacity: var(--dimming-factor); } } .clear-search { //position: absolute; - color: var(--settings-text-color); - padding: 0 0.4rem; + color: var(--minimal-view-search-color); + padding: 0.15rem 0.5rem 0.2rem 0.5rem; font-style: normal; font-size: 1rem; opacity: var(--dimming-factor); @@ -118,12 +113,13 @@ export default { cursor: pointer; right: 0.5rem; top: 1rem; - border: 1px solid var(--settings-text-color); + border: 1px solid var(--minimal-view-search-color); font-size: 1rem; margin: 0.5rem; &:hover { opacity: 1; - background: var(--background-darker); + color: var(--minimal-view-search-background); + background: var(--minimal-view-search-color); } } } diff --git a/src/components/MinimalView/MinimalSection.vue b/src/components/MinimalView/MinimalSection.vue index 9fb55b82..b20112ec 100644 --- a/src/components/MinimalView/MinimalSection.vue +++ b/src/components/MinimalView/MinimalSection.vue @@ -93,7 +93,7 @@ export default { display: flex; flex-wrap: wrap; flex-direction: column; - background: var(--item-group-background); + background: var(--minimal-view-group-background); border-radius: 0 0 var(--curve-factor) var(--curve-factor); .section-items { display: grid; @@ -105,7 +105,7 @@ export default { @include big-screen-up { grid-template-columns: repeat(6, 1fr); } } &.selected { - border: 1px solid var(--primary); + border: 1px solid var(--minimal-view-group-color); grid-column-start: span var(--col-count, 3); } &.show-all { diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss index 7b0f0497..caa860fa 100644 --- a/src/styles/color-palette.scss +++ b/src/styles/color-palette.scss @@ -35,54 +35,74 @@ * all variables are optional, since they inherit initial values from above* * Using specific variables makes overriding for custom themes really easy */ --heading-text-color: var(--primary); + // Nav-bar links --nav-link-text-color: var(--primary); --nav-link-background-color: #607d8b33; --nav-link-text-color-hover: var(--primary); --nav-link-background-color-hover: #607d8b33; --nav-link-border-color: transparent; --nav-link-border-color-hover: var(--primary); + // Link items and sections --item-text-color: var(--primary); --item-text-color-hover: var(--item-text-color); --item-group-outer-background: var(--primary); --item-group-heading-text-color: var(--item-group-background); --item-group-heading-text-color-hover: var(--background); + // Settings and config --settings-background: var(--background); --settings-text-color: var(--primary); - --search-container-background: var(--background-darker); - --search-field-background: var(--background); - --search-label-color: var(--settings-text-color); - --footer-text-color: var(--medium-grey); - --footer-text-color-link: var(--primary); - --footer-background: var(--background-darker); - --welcome-popup-background: var(--background-darker); - --welcome-popup-text-color: var(--primary); --config-code-background: #fff; --config-code-color: var(--background); --config-settings-color: var(--primary); --config-settings-background: var(--background-darker); - --toast-background: var(--primary); - --toast-color: var(--background); + --code-editor-color: var(--black); + --code-editor-background: var(--white); + // Search bar (on homepage) + --search-container-background: var(--background-darker); + --search-field-background: var(--background); + --search-label-color: var(--settings-text-color); + // Page footer + --footer-text-color: var(--medium-grey); + --footer-text-color-link: var(--primary); + --footer-background: var(--background-darker); + // Right-click context menu + --context-menu-background: var(--background); + --context-menu-color: var(--primary); + --context-menu-secondary-color: var(--background-darker); + // Workspace view + --side-bar-background: var(--background-darker); + --side-bar-background-lighter: var(--background); + --side-bar-color: var(--primary); + // Minimal view + --minimal-view-background-color: var(--background); + --minimal-view-title-color: var(--primary); + --minimal-view-settings-color: var(--primary); + --minimal-view-section-heading-color: var(--primary); + --minimal-view-section-heading-background: var(--background-darker); + --minimal-view-search-background: var(--background-darker); + --minimal-view-search-color: var(--primary); + --minimal-view-group-color: var(--primary); + --minimal-view-group-background: var(--background-darker); + // Login page + --login-form-color: var(--primary); + --login-form-background: var(--background); + --login-form-background-secondary: var(--background-darker); + // About page + --about-page-color: var(--white); + --about-page-background: var(--background); + --about-page-accent: var(--primary); + // Webpage colors, highlight, scrollbar --scroll-bar-color: var(--primary); --scroll-bar-background: var(--background-darker); --highlight-color: var(--background); --highlight-background: var(--primary); + // Misc components --loading-screen-color: var(--primary); --loading-screen-background: var(--background); - --login-form-color: var(--primary); - --login-form-background: var(--background); - --login-form-background-secondary: var(--background-darker); - --about-page-color: var(--white); - --about-page-background: var(--background); - --about-page-accent: var(--primary); - --side-bar-background: var(--background-darker); - --side-bar-background-lighter: var(--background); - --side-bar-color: var(--primary); --status-check-tooltip-background: var(--background-darker); --status-check-tooltip-color: var(--primary); - --code-editor-color: var(--black); - --code-editor-background: var(--white); - - --context-menu-background: var(--background); - --context-menu-color: var(--primary); - --context-menu-secondary-color: var(--background-darker); + --welcome-popup-background: var(--background-darker); + --welcome-popup-text-color: var(--primary); + --toast-background: var(--primary); + --toast-color: var(--background); } diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss index b395e0ef..6b352ece 100644 --- a/src/styles/color-themes.scss +++ b/src/styles/color-themes.scss @@ -481,7 +481,7 @@ html[data-theme='material'], html[data-theme='material-dark'] { html[data-theme='material'] { --primary: #363636; - --background: #f5f5f5; + --background: #eee; --background-darker: #5c90eb; --item-group-outer-background: none; --item-group-shadow: none; @@ -501,7 +501,7 @@ html[data-theme='material'] { --config-settings-background: #f5f5f5; --config-settings-color: #473f3f; --heading-text-color: #fff; - --curve-factor: 4px; + --curve-factor: 3px; --curve-factor-navbar: 8px; --search-container-background: #4285f4; --welcome-popup-text-color: #f5f5f5; @@ -510,6 +510,30 @@ html[data-theme='material'] { --context-menu-secondary-color: #f5f5f5; --transparent-white-50: #00000080; + --minimal-view-background-color: var(--background); + --minimal-view-title-color: var(--background-darker); + --minimal-view-settings-color: var(--primary); + --minimal-view-section-heading-color: var(--primary); + --minimal-view-section-heading-background: #f6f6f6; + --minimal-view-search-background: #fff; + --minimal-view-search-color: var(--primary); + --minimal-view-group-color: var(--primary); + --minimal-view-group-background: #fff; + + .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); + } + .title-and-search form input { + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + } + div.minimal-section-heading.selected { + background: #5c90eb; + } + div.minimal-section-inner { + background: #ffffff80; + } + div.jsoneditor div.jsoneditor-menu { background: #5c90eb !important; } @@ -585,6 +609,25 @@ html[data-theme='material-dark'] { // --login-form-color: #131a1f; --login-form-background-secondary: #131a1f; + // --minimal-view-background-color: var(--background); + // --minimal-view-title-color: var(--primary); + // --minimal-view-settings-color: var(--primary); + --minimal-view-section-heading-color: #131a1f; + --minimal-view-section-heading-background: var(--background); + --minimal-view-search-background: #131a1f; + // --minimal-view-search-color: var(--primary); + // --minimal-view-group-color: var(--primary); + --minimal-view-group-background: #131a1f; + + div.minimal-section-heading h3, div.minimal-section-heading.selected h3 { + color: #d5d5d5; + } + div.minimal-section-heading, .minimal-section-inner.selected, input.minimal-search { + box-shadow: 2px 2px 4px #000000, 0 1px 3px #000000cc; + border-color: #131a1f80; + } + + &::-webkit-scrollbar-thumb { border-left: 1px solid #131a1f; } @@ -812,6 +855,10 @@ html[data-theme="oblivion-scotch"] { border: 1px solid #313d4f; box-shadow: 0 1px 5px #0c0d0e; } + + .minimal-home div.item-group-container, input.minimal-search { + box-shadow: 0 1px 6px #00000099, 0 1px 1px #000000cc; + } } html[data-theme="oblivion-blue"] { diff --git a/src/views/Minimal.vue b/src/views/Minimal.vue index f6b16eb1..33769010 100644 --- a/src/views/Minimal.vue +++ b/src/views/Minimal.vue @@ -211,13 +211,13 @@ export default { min-height: calc(99vh - var(--footer-height)); width: 90%; max-width: 1000px; - background: var(--background); + background: var(--minimal-view-background-color); } .title-and-search { text-align: center; h1 { - color: var(--heading-text-color); + color: var(--minimal-view-title-color); margin: 0; font-size: 3rem; } @@ -253,7 +253,7 @@ export default { .no-data { font-size: 2rem; - color: var(--background); + color: var(--minimal-view-background-color); background: #ffffffeb; width: fit-content; margin: 2rem auto; @@ -267,7 +267,7 @@ export default { right: 1rem; display: flex; .home-page-icon { - color: var(--primary); + color: var(--minimal-view-settings-color); width: 1.5rem; height: 1.5rem; @extend .svg-button;