selfhosted
/
dashy
mirror of https://github.com/lissy93/dashy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

💄 Creates configurable CSS variables for new config editor

This commit is contained in:
Alicia Sykes 2021-10-18 22:14:02 +01:00
parent 03906130c7
commit 8a4f4373c1
5 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/InteractiveEditor/EditItem.vue
View File

@ -216,8 +216,8 @@ export default {
.edit-item-inner {
padding: 1rem;
background: var(--config-settings-background);
color: var(--config-settings-color);
background: var(--interactive-editor-background);
color: var(--interactive-editor-color);
height: 100%;
overflow-y: auto;
@extend .svg-button;
@ -238,7 +238,7 @@ export default {
display: flex;
padding: 0.5rem 0.25rem;
&:not(:last-child) {
border-bottom: 1px dotted var(--config-settings-color);
border-bottom: 1px dotted var(--interactive-editor-color);
}
.input-container, .select-container {
width: 100%;
@ -259,14 +259,14 @@ export default {
align-items: center;
cursor: pointer;
text-align: center;
border: 1px solid var(--config-settings-color);
border: 1px solid var(--interactive-editor-color);
border-radius: var(--curve-factor);
&:hover {
background: var(--config-settings-color);
color: var(--config-settings-background);
background: var(--interactive-editor-color);
color: var(--interactive-editor-background);
svg {
background: var(--config-settings-color);
path { fill: var(--config-settings-background); }
background: var(--interactive-editor-color);
path { fill: var(--interactive-editor-background); }
}
}
svg {
@ -280,9 +280,9 @@ export default {
.input-container input.input-field,
.radio-container div.radio-wrapper,
.form-dropdown div.vs__dropdown-toggle {
color: var(--config-settings-color);
background: var(--config-settings-background);
border-color: var(--config-settings-color);
color: var(--interactive-editor-color);
background: var(--interactive-editor-background);
border-color: var(--interactive-editor-color);
}
}
</style>

8
src/components/InteractiveEditor/EditModeSaveMenu.vue
View File

@ -102,8 +102,8 @@ div.edit-mode-bottom-banner {
bottom: 0;
width: 100%;
padding: 0.25rem 0;
border-top: 2px solid var(--primary);
background: var(--background-darker);
border-top: 2px solid var(--interactive-editor-color);
background: var(--interactive-editor-background-darker);
box-shadow: 0 -5px 7px var(--transparent-50);
grid-template-columns: 45% 10% 45%;
@include laptop-up { grid-template-columns: 40% 20% 40%; }
@ -117,7 +117,7 @@ div.edit-mode-bottom-banner {
/* Section sub-titles */
p.section-sub-title {
margin: 0;
color: var(--primary);
color: var(--interactive-editor-color);
font-weight: bold;
cursor: default;
}
@ -125,7 +125,7 @@ div.edit-mode-bottom-banner {
&.intro-container {
p.edit-mode-intro {
margin: 0;
color: var(--primary);
color: var(--interactive-editor-color);
cursor: default;
}
}

4
src/components/InteractiveEditor/EditModeTopBanner.vue
View File

@ -9,12 +9,12 @@ div.edit-mode-top-banner {
width: 100%;
text-align: center;
padding: 0.2rem 0;
background: var(--primary);
background: var(--interactive-editor-color);
opacity: var(--dimming-factor);
span {
font-size: 1rem;
font-weight: bold;
color: var(--background);
color: var(--interactive-editor-background);
}
}
</style>

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

@ -57,6 +57,9 @@
--config-settings-background: var(--background-darker);
--code-editor-color: var(--black);
--code-editor-background: var(--white);
--interactive-editor-color: var(--primary);
--interactive-editor-background: var(--background);
--interactive-editor-background-darker: var(--background-darker);
// Search bar (on homepage)
--search-container-background: var(--background-darker);
--search-field-background: var(--background);

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

@ -217,6 +217,9 @@ html[data-theme='material-original'] {
--item-group-heading-text-color-hover: #01579b;
--config-settings-background: #01579b;
--config-settings-color: #fff;
--interactive-editor-background: #01579b;
--interactive-editor-color: #fff;
--interactive-editor-background-darker: #29B6F6;
--heading-text-color: #fff;
--status-check-tooltip-background: #f2f2f2;
--status-check-tooltip-color: #01579b;
@ -263,6 +266,9 @@ html[data-theme='material-dark-original'] {
--welcome-popup-text-color: var(--primary);
--config-settings-background: #131a1f;
--config-settings-color: #41e2ed;
--interactive-editor-color: #41e2ed;
--interactive-editor-background: #131a1f;
--interactive-editor-background-darker: #092b3a;
--scroll-bar-color: #08B0BB;
--scroll-bar-background: #131a1f;
--status-check-tooltip-background: #131a1f;
@ -514,6 +520,9 @@ html[data-theme='material'] {
--config-code-color: #363636;
--config-settings-background: #f5f5f5;
--config-settings-color: #473f3f;
--interactive-editor-color: #473f3f;
--interactive-editor-background: #f5f5f5;
--interactive-editor-background-darker: #fff;
--heading-text-color: #fff;
--curve-factor: 3px;
--curve-factor-navbar: 8px;
@ -622,13 +631,16 @@ html[data-theme='material-dark'] {
--description-tooltip-color: #e0e0e0;
--curve-factor: 2px;
--curve-factor-navbar: 0;
--side-bar-background: #131a1f;
--welcome-popup-background: #131a1f;
--welcome-popup-text-color: var(--primary);
--config-settings-background: #131a1f;
--config-settings-color: #41e2ed;
--interactive-editor-background: #131a1f;
--interactive-editor-background-darker: #131a1f;
--interactive-editor-color: #41e2ed;
--scroll-bar-color: #08B0BB;
--scroll-bar-background: #131a1f;
// --login-form-color: #131a1f;
@ -929,6 +941,9 @@ html[data-theme='glow'], html[data-theme=glow-colorful] {
--nav-link-border-color-hover: var(--blue);
--config-settings-background: var(--blue);
--config-settings-color: var(--pink);
--interactive-editor-background: var(--blue);
--interactive-editor-background-darker: var(--blue);
--interactive-editor-color: var(--pink);
--search-label-color: var(--blue);
--item-group-background: var(--blue);
--item-text-color: var(--pale);