mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-10-13 15:28:05 +01:00
93 lines
2.6 KiB
Plaintext
93 lines
2.6 KiB
Plaintext
@import "../../less/Common/Constants";
|
|
:root {
|
|
// Light theme variables
|
|
--colorNeutralBackground1: @BaseLight;
|
|
--colorNeutralBackground2: @BaseLow;
|
|
--colorNeutralBackground3: @BaseMediumLow;
|
|
--colorNeutralForeground1: @BaseHigh;
|
|
--colorNeutralForeground2: @BaseMediumHigh;
|
|
--colorNeutralForeground3: @BaseMedium;
|
|
--colorNeutralStroke1: @BaseMedium;
|
|
--colorCompoundBrandStroke1: @SelectionColor;
|
|
--colorBrandForeground1: @LinkColor;
|
|
--colorPaletteRedForeground1: @ErrorColor;
|
|
--overlayBackground: rgba(0, 0, 0, 0.4);
|
|
--colorBrandBackground: @SelectionColor;
|
|
--colorBrandBackgroundHover: @AccentMediumHigh;
|
|
--colorBrandBackgroundPressed: @AccentMedium;
|
|
--colorNeutralForegroundOnBrand: @BaseLight;
|
|
}
|
|
|
|
// Dark theme variables
|
|
body.isDarkMode {
|
|
--colorNeutralBackground1: #1e1e1e;
|
|
--colorNeutralBackground2: #2d2d2d;
|
|
--colorNeutralBackground3: #404040;
|
|
--colorNeutralForeground1: #ffffff;
|
|
--colorNeutralForeground2: #d2d2d2;
|
|
--colorNeutralForeground3: #a0a0a0;
|
|
--colorNeutralStroke1: #484848;
|
|
--colorCompoundBrandStroke1: #4db6e8;
|
|
--colorBrandForeground1: #4db6e8;
|
|
--colorPaletteRedForeground1: #f25d5d;
|
|
--overlayBackground: rgba(0, 0, 0, 0.4);
|
|
--colorBrandBackground: #0078d4;
|
|
--colorBrandBackgroundHover: #106ebe;
|
|
--colorBrandBackgroundPressed: #005a9e;
|
|
--colorNeutralForegroundOnBrand: #ffffff;
|
|
}
|
|
|
|
// Theme Mixins
|
|
.theme-background() {
|
|
background-color: var(--colorNeutralBackground1, @BaseLight);
|
|
color: var(--colorNeutralForeground1, @BaseHigh);
|
|
}
|
|
|
|
.theme-surface() {
|
|
background-color: var(--colorNeutralBackground2, @BaseLow);
|
|
color: var(--colorNeutralForeground1, @BaseHigh);
|
|
}
|
|
|
|
.theme-border() {
|
|
border-color: var(--colorNeutralStroke1, @BaseMedium);
|
|
}
|
|
|
|
.theme-input() {
|
|
background-color: var(--colorNeutralBackground2, @BaseLow);
|
|
color: var(--colorNeutralForeground1, @BaseHigh);
|
|
border: 1px solid var(--colorNeutralStroke1, @BaseMedium);
|
|
|
|
&::placeholder {
|
|
color: var(--colorNeutralForeground3, @BaseMedium);
|
|
}
|
|
|
|
&:focus,
|
|
&:focus-within {
|
|
border-color: var(--colorCompoundBrandStroke1, @SelectionColor);
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
:global {
|
|
.ms-TextField {
|
|
.ms-TextField-fieldGroup {
|
|
&:focus-within {
|
|
border-color: var(--colorCompoundBrandStroke1, @SelectionColor) ;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.theme-panel() {
|
|
.theme-background();
|
|
.theme-border();
|
|
}
|
|
|
|
:global {
|
|
.ms-Fabric--isFocusVisible .ms-Button:focus::after,
|
|
.ms-Fabric--isFocusVisible .ms-TextField:focus::after,
|
|
.ms-Fabric--isFocusVisible *[data-is-focusable="true"]:focus::after {
|
|
border-color: var(--colorCompoundBrandStroke1, @SelectionColor) ;
|
|
}
|
|
}
|