David Vogel
114a7d893c
- Add input field and general data binding - Rename SymbolSlot to IconSlot - Remove d3c-color-accent - Update icons page - Add input example page - Update button to support highlighting - Update navigation entry to support highlighting - Add d3c-button-only-icon to button and let sidebar use that - Use d3c-button-transparent in sidebar - Add focus indicator to buttons - Rename CSS color variables and change definition of some - Let pagination use input:Button - Add some padding to the inline code component
142 lines
3.7 KiB
CSS
142 lines
3.7 KiB
CSS
: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. This has mostly nothing to do with 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-hovered: #1c6491; /*Elements being hovered by the input cursor.*/
|
|
--d3c-color-accent-focused: #0071b7; /*Elements being "pre" selected and can receive keyboard events.*/
|
|
--d3c-color-accent-activated: #0071b7; /*Elements being actively pressed or interacted with.*/
|
|
--d3c-color-accent-highlighted: #0071b7; /*Elements being highlighted for any other reason. This has mostly nothing to do with user interaction.*/
|
|
|
|
--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-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-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-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-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-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-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-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-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-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;
|
|
}
|