mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git
synced 2025-08-09 13:17:46 +02:00
fix:#53 updated toast colors
This commit is contained in:
@@ -41,10 +41,7 @@ $colors: (
|
|||||||
$shade000: rgba(255, 255, 255, 0.87) !default; //text color
|
$shade000: rgba(255, 255, 255, 0.87) !default; //text color
|
||||||
$shade100: rgba(255, 255, 255, 0.6) !default; //text secondary color
|
$shade100: rgba(255, 255, 255, 0.6) !default; //text secondary color
|
||||||
$shade500: #6b7280 !default;
|
$shade500: #6b7280 !default;
|
||||||
$shade600: map-get(
|
$shade600: map-get($colors, "htwk-grau-140") !default; //input bg, border, divider
|
||||||
$colors,
|
|
||||||
"htwk-grau-140"
|
|
||||||
) !default; //input bg, border, divider
|
|
||||||
$shade700: map-get($colors, "htwk-grau") !default; //menu bg
|
$shade700: map-get($colors, "htwk-grau") !default; //menu bg
|
||||||
$shade800: map-get($colors, "htwk-grau") !default; //elevated surface
|
$shade800: map-get($colors, "htwk-grau") !default; //elevated surface
|
||||||
$shade900: rgba(map-get($colors, "htwk-schwarz"), 1) !default; //ground surface
|
$shade900: rgba(map-get($colors, "htwk-schwarz"), 1) !default; //ground surface
|
||||||
@@ -52,32 +49,15 @@ $shade900: rgba(map-get($colors, "htwk-schwarz"), 1) !default; //ground surface
|
|||||||
$hoverBg: rgba(255, 255, 255, 0.03) !default;
|
$hoverBg: rgba(255, 255, 255, 0.03) !default;
|
||||||
|
|
||||||
//global
|
//global
|
||||||
$fontFamily:
|
$fontFamily: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
|
||||||
"Source Sans Pro",
|
|
||||||
-apple-system,
|
|
||||||
BlinkMacSystemFont,
|
|
||||||
Segoe UI,
|
|
||||||
Roboto,
|
|
||||||
Arial,
|
|
||||||
sans-serif,
|
|
||||||
Apple Color Emoji,
|
|
||||||
Segoe UI Emoji,
|
|
||||||
Segoe UI Symbol !default;
|
|
||||||
$fontSize: 1rem !default;
|
$fontSize: 1rem !default;
|
||||||
$fontWeight: normal !default;
|
$fontWeight: normal !default;
|
||||||
$textColor: $shade000 !default;
|
$textColor: $shade000 !default;
|
||||||
$textSecondaryColor: $shade100 !default;
|
$textSecondaryColor: $shade100 !default;
|
||||||
$borderRadius: 6px !default;
|
$borderRadius: 6px !default;
|
||||||
$transitionDuration: 0.2s !default;
|
$transitionDuration: 0.2s !default;
|
||||||
$formElementTransition:
|
$formElementTransition: background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
|
||||||
background-color $transitionDuration,
|
$actionIconTransition: background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
|
||||||
color $transitionDuration,
|
|
||||||
border-color $transitionDuration,
|
|
||||||
box-shadow $transitionDuration !default;
|
|
||||||
$actionIconTransition:
|
|
||||||
background-color $transitionDuration,
|
|
||||||
color $transitionDuration,
|
|
||||||
box-shadow $transitionDuration !default;
|
|
||||||
$listItemTransition: box-shadow $transitionDuration !default;
|
$listItemTransition: box-shadow $transitionDuration !default;
|
||||||
$primeIconFontSize: 1rem !default;
|
$primeIconFontSize: 1rem !default;
|
||||||
$divider: 1px solid $shade600 !default;
|
$divider: 1px solid $shade600 !default;
|
||||||
@@ -155,10 +135,8 @@ $inputListHeaderBorder: 1px solid $shade600 !default;
|
|||||||
$inputOverlayBg: $inputListBg !default;
|
$inputOverlayBg: $inputListBg !default;
|
||||||
$inputOverlayHeaderBg: $inputListHeaderBg !default;
|
$inputOverlayHeaderBg: $inputListHeaderBg !default;
|
||||||
$inputOverlayBorder: 1px solid $shade600 !default;
|
$inputOverlayBorder: 1px solid $shade600 !default;
|
||||||
$inputOverlayShadow:
|
$inputOverlayShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
|
||||||
0 2px 4px -1px rgba(0, 0, 0, 0.2),
|
0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
|
||||||
0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
|
||||||
0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
|
|
||||||
|
|
||||||
//password
|
//password
|
||||||
$passwordMeterBg: $shade600 !default;
|
$passwordMeterBg: $shade600 !default;
|
||||||
@@ -179,10 +157,8 @@ $buttonHoverBorderColor: $primaryLightColor !default;
|
|||||||
$buttonActiveBg: $primaryLighterColor !default;
|
$buttonActiveBg: $primaryLighterColor !default;
|
||||||
$buttonTextActiveColor: $primaryTextColor !default;
|
$buttonTextActiveColor: $primaryTextColor !default;
|
||||||
$buttonActiveBorderColor: $primaryLighterColor !default;
|
$buttonActiveBorderColor: $primaryLighterColor !default;
|
||||||
$raisedButtonShadow:
|
$raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||||
0px 3px 1px -2px rgba(0, 0, 0, 0.2),
|
0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
|
||||||
0px 2px 2px 0px rgba(0, 0, 0, 0.14),
|
|
||||||
0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
|
|
||||||
$roundedButtonBorderRadius: 2rem !default;
|
$roundedButtonBorderRadius: 2rem !default;
|
||||||
|
|
||||||
$textButtonHoverBgOpacity: 0.04 !default;
|
$textButtonHoverBgOpacity: 0.04 !default;
|
||||||
@@ -213,8 +189,7 @@ $infoButtonHoverBorderColor: map-get($colors, "htwk-cyan") !default;
|
|||||||
$infoButtonActiveBg: map-get($colors, "htwk-cyan") !default;
|
$infoButtonActiveBg: map-get($colors, "htwk-cyan") !default;
|
||||||
$infoButtonTextActiveColor: $infoButtonTextColor !default;
|
$infoButtonTextActiveColor: $infoButtonTextColor !default;
|
||||||
$infoButtonActiveBorderColor: map-get($colors, "htwk-cyan") !default;
|
$infoButtonActiveBorderColor: map-get($colors, "htwk-cyan") !default;
|
||||||
$infoButtonFocusShadow: 0 0 0 1px
|
$infoButtonFocusShadow: 0 0 0 1px scale-color($infoButtonHoverBg, $lightness: 30%) !default;
|
||||||
scale-color($infoButtonHoverBg, $lightness: 30%) !default;
|
|
||||||
|
|
||||||
$successButtonBg: map-get($colors, "htwk-gruen") !default;
|
$successButtonBg: map-get($colors, "htwk-gruen") !default;
|
||||||
$successButtonTextColor: #052e16 !default;
|
$successButtonTextColor: #052e16 !default;
|
||||||
@@ -233,16 +208,10 @@ $warningButtonTextColor: #493c08 !default;
|
|||||||
$warningButtonBorder: 1px solid map-get($colors, "htwk-yellow") !default;
|
$warningButtonBorder: 1px solid map-get($colors, "htwk-yellow") !default;
|
||||||
$warningButtonHoverBg: scale-color($warningButtonBg, $lightness: 30%) !default;
|
$warningButtonHoverBg: scale-color($warningButtonBg, $lightness: 30%) !default;
|
||||||
$warningButtonTextHoverColor: $warningButtonTextColor !default;
|
$warningButtonTextHoverColor: $warningButtonTextColor !default;
|
||||||
$warningButtonHoverBorderColor: scale-color(
|
$warningButtonHoverBorderColor: scale-color($warningButtonBg, $lightness: 10%) !default;
|
||||||
$warningButtonBg,
|
|
||||||
$lightness: 10%
|
|
||||||
) !default;
|
|
||||||
$warningButtonActiveBg: scale-color($warningButtonBg, $lightness: 30%) !default;
|
$warningButtonActiveBg: scale-color($warningButtonBg, $lightness: 30%) !default;
|
||||||
$warningButtonTextActiveColor: $warningButtonTextColor !default;
|
$warningButtonTextActiveColor: $warningButtonTextColor !default;
|
||||||
$warningButtonActiveBorderColor: scale-color(
|
$warningButtonActiveBorderColor: scale-color($warningButtonBg, $lightness: 30%) !default;
|
||||||
$warningButtonBg,
|
|
||||||
$lightness: 30%
|
|
||||||
) !default;
|
|
||||||
$warningButtonFocusShadow: 0 0 0 1px
|
$warningButtonFocusShadow: 0 0 0 1px
|
||||||
scale-color($warningButtonBg, $lightness: 30%) !default;
|
scale-color($warningButtonBg, $lightness: 30%) !default;
|
||||||
|
|
||||||
@@ -509,9 +478,7 @@ $cardSubTitleFontWeight: 100 !default;
|
|||||||
$cardSubTitleColor: $shade100 !default;
|
$cardSubTitleColor: $shade100 !default;
|
||||||
$cardContentPadding: 1.25rem 0 !default;
|
$cardContentPadding: 1.25rem 0 !default;
|
||||||
$cardFooterPadding: 1.25rem 0 0 0 !default;
|
$cardFooterPadding: 1.25rem 0 0 0 !default;
|
||||||
$cardShadow:
|
$cardShadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
|
||||||
0 2px 1px -1px rgba(0, 0, 0, 0.2),
|
|
||||||
0 1px 1px 0 rgba(0, 0, 0, 0.14),
|
|
||||||
0 1px 3px 0 rgba(0, 0, 0, 0.12) !default;
|
0 1px 3px 0 rgba(0, 0, 0, 0.12) !default;
|
||||||
|
|
||||||
//editor
|
//editor
|
||||||
@@ -649,21 +616,21 @@ $toastTitleFontWeight: 0 !default;
|
|||||||
$toastDetailMargin: $inlineSpacing 0 0 0 !default;
|
$toastDetailMargin: $inlineSpacing 0 0 0 !default;
|
||||||
|
|
||||||
//severities
|
//severities
|
||||||
$infoMessageBg: rgba(59, 130, 246, 0.2) !default;
|
$infoMessageBg: rgba(59, 130, 246, 0.7) !default;
|
||||||
$infoMessageBorder: solid #3b82f6 !default;
|
$infoMessageBorder: solid #3b82f6 !default;
|
||||||
$infoMessageTextColor: #93c5fd !default;
|
$infoMessageTextColor: #b9d7ff !default;
|
||||||
$infoMessageIconColor: #93c5fd !default;
|
$infoMessageIconColor: #93c5fd !default;
|
||||||
$successMessageBg: rgba(16, 185, 129, 0.2) !default;
|
$successMessageBg: rgba(16, 185, 129, 0.7) !default;
|
||||||
$successMessageBorder: solid #10b981 !default;
|
$successMessageBorder: solid #10b981 !default;
|
||||||
$successMessageTextColor: #6ee7b7 !default;
|
$successMessageTextColor: #8aecc6 !default;
|
||||||
$successMessageIconColor: #6ee7b7 !default;
|
$successMessageIconColor: #6ee7b7 !default;
|
||||||
$warningMessageBg: rgba(234, 179, 8, 0.2) !default;
|
$warningMessageBg: rgba(234, 179, 8, 0.7) !default;
|
||||||
$warningMessageBorder: solid #eab308 !default;
|
$warningMessageBorder: solid #eab308 !default;
|
||||||
$warningMessageTextColor: #fde047 !default;
|
$warningMessageTextColor: #ffea84 !default;
|
||||||
$warningMessageIconColor: #fde047 !default;
|
$warningMessageIconColor: #fde047 !default;
|
||||||
$errorMessageBg: rgba(239, 68, 68, 0.2) !default;
|
$errorMessageBg: rgba(239, 68, 68, 0.7) !default;
|
||||||
$errorMessageBorder: solid #ef4444 !default;
|
$errorMessageBorder: solid #ef4444 !default;
|
||||||
$errorMessageTextColor: #fca5a5 !default;
|
$errorMessageTextColor: #ffe9e9 !default;
|
||||||
$errorMessageIconColor: #fca5a5 !default;
|
$errorMessageIconColor: #fca5a5 !default;
|
||||||
$secondaryMessageBg: $secondaryButtonBg !default;
|
$secondaryMessageBg: $secondaryButtonBg !default;
|
||||||
$secondaryMessageBorder: solid $secondaryButtonBg !default;
|
$secondaryMessageBorder: solid $secondaryButtonBg !default;
|
||||||
@@ -677,10 +644,8 @@ $contrastMessageIconColor: $contrastButtonTextColor !default;
|
|||||||
//overlays
|
//overlays
|
||||||
$overlayContentBorder: 1px solid $shade600 !default;
|
$overlayContentBorder: 1px solid $shade600 !default;
|
||||||
$overlayContentBg: $panelContentBg !default;
|
$overlayContentBg: $panelContentBg !default;
|
||||||
$overlayContainerShadow:
|
$overlayContainerShadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
|
||||||
0px 11px 15px -7px rgba(0, 0, 0, 0.2),
|
0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12) !default;
|
||||||
0px 24px 38px 3px rgba(0, 0, 0, 0.14),
|
|
||||||
0px 9px 46px 8px rgba(0, 0, 0, 0.12) !default;
|
|
||||||
|
|
||||||
//dialog
|
//dialog
|
||||||
$dialogHeaderBg: $shade800 !default;
|
$dialogHeaderBg: $shade800 !default;
|
||||||
@@ -754,10 +719,8 @@ $submenuHeaderBorderRadius: 0 !default;
|
|||||||
$submenuHeaderFontWeight: 0 !default;
|
$submenuHeaderFontWeight: 0 !default;
|
||||||
$overlayMenuBg: $menuBg !default;
|
$overlayMenuBg: $menuBg !default;
|
||||||
$overlayMenuBorder: 1px solid $shade600 !default;
|
$overlayMenuBorder: 1px solid $shade600 !default;
|
||||||
$overlayMenuShadow:
|
$overlayMenuShadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
|
||||||
0 2px 4px -1px rgba(0, 0, 0, 0.2),
|
0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
|
||||||
0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
|
||||||
0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
|
|
||||||
$verticalMenuPadding: 0.25rem 0 !default;
|
$verticalMenuPadding: 0.25rem 0 !default;
|
||||||
$menuSeparatorMargin: 0.25rem 0 !default;
|
$menuSeparatorMargin: 0.25rem 0 !default;
|
||||||
|
|
||||||
@@ -924,23 +887,10 @@ $imagePreviewActionIconFontSize: 1.5rem !default;
|
|||||||
$imagePreviewActionIconBorderRadius: 50% !default;
|
$imagePreviewActionIconBorderRadius: 50% !default;
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
font-family:
|
font-family: "Twemoji Country Flags", "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||||
"Twemoji Country Flags",
|
|
||||||
"Source Sans Pro",
|
|
||||||
-apple-system,
|
|
||||||
BlinkMacSystemFont,
|
|
||||||
Segoe UI,
|
|
||||||
Roboto,
|
|
||||||
Arial,
|
|
||||||
sans-serif,
|
|
||||||
Apple Color Emoji,
|
|
||||||
Segoe UI Emoji,
|
|
||||||
Segoe UI Symbol;
|
|
||||||
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
||||||
font-variation-settings: normal;
|
font-variation-settings: normal;
|
||||||
--font-family: "Twemoji Country Flags", "Source Sans Pro", -apple-system,
|
--font-family: "Twemoji Country Flags", "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||||
BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji,
|
|
||||||
Segoe UI Emoji, Segoe UI Symbol;
|
|
||||||
--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
||||||
--surface-a: #{$shade800};
|
--surface-a: #{$shade800};
|
||||||
--surface-b: #{$shade900};
|
--surface-b: #{$shade900};
|
||||||
|
Reference in New Issue
Block a user