D3vugu-components/static/css/d3c-theme-base.css

173 lines
3.9 KiB
CSS
Raw Normal View History

:root, .d3c-color-layer-0 {
--d3c-color-background: white;
--d3c-color-text: black;
--d3c-color-border: #b7b7b7;
/*The following special colors are meant for backgrounds and must contrast well with --d3c-color-text.*/
--d3c-color-hovered: #dadada; /*Elements being hovered by the input cursor.*/
--d3c-color-focused: #b7b7b7; /*Elements being "pre" selected and can receive keyboard events.*/
--d3c-color-activated: #b7b7b7; /*Elements being actively pressed or interacted with.*/
--d3c-color-highlighted: #b7b7b7; /*Elements being highlighted for any other reason, like a selected or active element. But not due to user interaction.*/
/*The following special colors are meant for text and lines and must contrast well with --d3c-color-background.*/
/*Elements should only use the colors sparingly, otherwise it would cause too much visual clutter.*/
--d3c-color-accent: #0071b7; /*General accent color.*/
--d3c-color-shadow: rgba(0, 0, 0, 0.2);
}
.d3c-color-layer-1 {
--d3c-color-background: #e8e8e8;
--d3c-color-text: black;
--d3c-color-border: #b7b7b7;
--d3c-color-hovered: #dadada;
--d3c-color-focused: #b7b7b7;
--d3c-color-activated: #b7b7b7;
--d3c-color-highlighted: #b7b7b7;
--d3c-color-accent: #0071b7;
}
.d3c-color-layer-2 {
--d3c-color-background: #cfcfcf;
--d3c-color-text: black;
--d3c-color-border: #b7b7b7;
--d3c-color-hovered: #dadada;
--d3c-color-focused: #b7b7b7;
--d3c-color-activated: #b7b7b7;
--d3c-color-highlighted: #b7b7b7;
--d3c-color-accent: #0071b7;
}
.d3c-color-accent {
--d3c-color-background: #0063a1;
--d3c-color-text: white;
--d3c-color-border: #004671;
--d3c-color-hovered: #005285;
--d3c-color-focused: #004671;
--d3c-color-activated: #004671;
--d3c-color-highlighted: #004671;
--d3c-color-accent: #98c3ff;
}
.d3c-color-success {
--d3c-color-background: #178500;
--d3c-color-text: white;
--d3c-color-border: #116700;
--d3c-color-hovered: #147600;
--d3c-color-focused: #116700;
--d3c-color-activated: #116700;
--d3c-color-highlighted: #116700;
--d3c-color-accent: #006aff;
}
.d3c-color-success-faded {
--d3c-color-background: #bef8b2;
--d3c-color-text: black;
--d3c-color-border: #a3d599;
--d3c-color-hovered: #aee4a3;
--d3c-color-focused: #a3d599;
--d3c-color-activated: #a3d599;
--d3c-color-highlighted: #a3d599;
--d3c-color-accent: #0071b7;
}
.d3c-color-attention {
--d3c-color-background: #0063a1;
--d3c-color-text: white;
--d3c-color-border: #004671;
--d3c-color-hovered: #005285;
--d3c-color-focused: #004671;
--d3c-color-activated: #004671;
--d3c-color-highlighted: #004671;
--d3c-color-accent: #006aff;
}
.d3c-color-attention-faded {
--d3c-color-background: #bbe5ff;
--d3c-color-text: black;
--d3c-color-border: #a1c5dc;
--d3c-color-hovered: #abd3eb;
--d3c-color-focused: #a1c5dc;
--d3c-color-activated: #a1c5dc;
--d3c-color-highlighted: #a1c5dc;
--d3c-color-accent: #0071b7;
}
.d3c-color-caution {
--d3c-color-background: #ab9900;
--d3c-color-text: white;
--d3c-color-border: #7a6d00;
--d3c-color-hovered: #988900;
--d3c-color-focused: #7a6d00;
--d3c-color-activated: #7a6d00;
--d3c-color-highlighted: #7a6d00;
--d3c-color-accent: #006aff;
}
.d3c-color-caution-faded {
--d3c-color-background: #fcf197;
--d3c-color-text: black;
--d3c-color-border: #dbd184;
--d3c-color-hovered: #ebe08d;
--d3c-color-focused: #dbd184;
--d3c-color-activated: #dbd184;
--d3c-color-highlighted: #dbd184;
--d3c-color-accent: #0071b7;
}
.d3c-color-critical {
--d3c-color-background: #bc0000;
--d3c-color-text: white;
--d3c-color-border: #930000;
--d3c-color-hovered: #a70000;
--d3c-color-focused: #930000;
--d3c-color-activated: #930000;
--d3c-color-highlighted: #930000;
--d3c-color-accent: #006aff;
}
.d3c-color-critical-faded {
--d3c-color-background: #fed3d3;
--d3c-color-text: black;
--d3c-color-border: #d9b4b4;
--d3c-color-hovered: #e9c0c0;
--d3c-color-focused: #d9b4b4;
--d3c-color-activated: #d9b4b4;
--d3c-color-highlighted: #d9b4b4;
--d3c-color-accent: #0071b7;
}