mirror of https://github.com/Lissy93/dashy.git
🎨 Refactor of stylesheets, making way for new changes
This commit is contained in:
parent
01af5fb5b4
commit
77bf770c02
|
@ -26,6 +26,7 @@ html[data-theme='thebe'] {
|
||||||
|
|
||||||
html[data-theme='dracula'] {
|
html[data-theme='dracula'] {
|
||||||
--font-headings: 'Allerta Stencil', sans-serif;
|
--font-headings: 'Allerta Stencil', sans-serif;
|
||||||
|
--primary: #6272a4;
|
||||||
--background: #44475a;
|
--background: #44475a;
|
||||||
--background-darker: #282a36;
|
--background-darker: #282a36;
|
||||||
--item-group-background: #282a36;
|
--item-group-background: #282a36;
|
||||||
|
@ -34,7 +35,7 @@ html[data-theme='dracula'] {
|
||||||
--item-shadow: none;
|
--item-shadow: none;
|
||||||
--item-hover-shadow: none;
|
--item-hover-shadow: none;
|
||||||
--settings-text-color: #98ace9;
|
--settings-text-color: #98ace9;
|
||||||
--primary: #6272a4;
|
--config-settings-color: #98ace9;
|
||||||
.collapsable:nth-child(1n) { background: #8be9fd; .item { border: 1px solid #8be9fd; color: #8be9fd; }}
|
.collapsable:nth-child(1n) { background: #8be9fd; .item { border: 1px solid #8be9fd; color: #8be9fd; }}
|
||||||
.collapsable:nth-child(2n) { background: #50fa7b; .item { border: 1px solid #50fa7b; color: #50fa7b; }}
|
.collapsable:nth-child(2n) { background: #50fa7b; .item { border: 1px solid #50fa7b; color: #50fa7b; }}
|
||||||
.collapsable:nth-child(3n) { background: #ffb86c; .item { border: 1px solid #ffb86c; color: #ffb86c; }}
|
.collapsable:nth-child(3n) { background: #ffb86c; .item { border: 1px solid #ffb86c; color: #ffb86c; }}
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
--outline-color: none;
|
--outline-color: none;
|
||||||
--curve-factor: 5px; // Border radius for most components
|
--curve-factor: 5px; // Border radius for most components
|
||||||
--curve-factor-navbar: 16px; // Border radius for header
|
--curve-factor-navbar: 16px; // Border radius for header
|
||||||
|
--curve-factor-small: 2px; // Subtle border radius for util components
|
||||||
--dimming-factor: 0.7; // Opacity for semi-transparent components
|
--dimming-factor: 0.7; // Opacity for semi-transparent components
|
||||||
|
|
||||||
/* Basic Page Components */
|
/* Basic Page Components */
|
||||||
|
|
|
@ -13,3 +13,32 @@ html {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Overriding styles for the modal component */
|
||||||
|
.vm--modal, .dashy-modal {
|
||||||
|
box-shadow: 0 40px 70px -2px hsl(0deg 0% 0% / 60%), 1px 1px 6px var(--primary) !important;
|
||||||
|
min-width: 300px;
|
||||||
|
min-height: 500px;
|
||||||
|
}
|
||||||
|
.vm--overlay {
|
||||||
|
background: #00000080;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Overiding styles for the global toast component */
|
||||||
|
.toast-message {
|
||||||
|
background: var(--toast-background) !important;
|
||||||
|
color: var(--toast-color) !important;
|
||||||
|
border: 1px solid var(--toast-color) !important;
|
||||||
|
border-radius: var(--curve-factor) !important;
|
||||||
|
font-size: 1.25rem !important;
|
||||||
|
}
|
||||||
|
.toast-error {
|
||||||
|
background: var(--danger) !important;
|
||||||
|
color: var(--white) !important;
|
||||||
|
font-size: 1.25rem !important;
|
||||||
|
}
|
||||||
|
.toast-success {
|
||||||
|
background: var(--success) !important;
|
||||||
|
color: var(--white) !important;
|
||||||
|
font-size: 1.25rem !important;
|
||||||
|
}
|
|
@ -37,21 +37,3 @@
|
||||||
.horizontal-center { margin: 0 auto; }
|
.horizontal-center { margin: 0 auto; }
|
||||||
.border-box { box-sizing: border-box; }
|
.border-box { box-sizing: border-box; }
|
||||||
|
|
||||||
/* Overiding styles for the global toast component */
|
|
||||||
.toast-message {
|
|
||||||
background: var(--toast-background) !important;
|
|
||||||
color: var(--toast-color) !important;
|
|
||||||
border: 1px solid var(--toast-color) !important;
|
|
||||||
border-radius: var(--curve-factor) !important;
|
|
||||||
font-size: 1.25rem !important;
|
|
||||||
}
|
|
||||||
.toast-error {
|
|
||||||
background: var(--danger) !important;
|
|
||||||
color: var(--white) !important;
|
|
||||||
font-size: 1.25rem !important;
|
|
||||||
}
|
|
||||||
.toast-success {
|
|
||||||
background: var(--success) !important;
|
|
||||||
color: var(--white) !important;
|
|
||||||
font-size: 1.25rem !important;
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue