diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss index 990c296e..747f0458 100644 --- a/src/styles/color-themes.scss +++ b/src/styles/color-themes.scss @@ -26,6 +26,7 @@ html[data-theme='thebe'] { html[data-theme='dracula'] { --font-headings: 'Allerta Stencil', sans-serif; + --primary: #6272a4; --background: #44475a; --background-darker: #282a36; --item-group-background: #282a36; @@ -34,7 +35,7 @@ html[data-theme='dracula'] { --item-shadow: none; --item-hover-shadow: none; --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(2n) { background: #50fa7b; .item { border: 1px solid #50fa7b; color: #50fa7b; }} .collapsable:nth-child(3n) { background: #ffb86c; .item { border: 1px solid #ffb86c; color: #ffb86c; }} diff --git a/src/styles/dimensions.scss b/src/styles/dimensions.scss index cf02ad51..bdfc2c77 100644 --- a/src/styles/dimensions.scss +++ b/src/styles/dimensions.scss @@ -4,6 +4,7 @@ --outline-color: none; --curve-factor: 5px; // Border radius for most components --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 /* Basic Page Components */ diff --git a/src/styles/global-styles.scss b/src/styles/global-styles.scss index 2a83e105..64d4bd0e 100644 --- a/src/styles/global-styles.scss +++ b/src/styles/global-styles.scss @@ -13,3 +13,32 @@ html { 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; +} \ No newline at end of file diff --git a/src/styles/style-helpers.scss b/src/styles/style-helpers.scss index 2aafd339..d5db94b0 100644 --- a/src/styles/style-helpers.scss +++ b/src/styles/style-helpers.scss @@ -37,21 +37,3 @@ .horizontal-center { margin: 0 auto; } .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; -}