xi-conversations

commit

dd45f3426e5267f5a514a225b2464a97fd4bc240

parent

b93ddeedebf1c4f0cd434e129c3cd7a4bd43bc0f

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2022-01-16 21:35

use CSS variables

Diffstat

5 files changed, 29 insertions, 16 deletions

diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss

@@ -7,13 +7,13 @@
    7     7 	padding: 0.2em;
    8     8 
    9     9 	&:hover {
   10    -1 		border-color: ThreeDShadow;
   11    -1 		background-color: ButtonHighlight;
   -1    10 		border-color: var(--border);
   -1    11 		background-color: var(--button-highlight);
   12    12 		transition: background-color 0.3s, border-color 0.3s;
   13    13 	}
   14    14 
   15    15 	&:active {
   16    16 		background-color: transparent;
   17    -1 		box-shadow: 0 0 0.5em ThreeDShadow inset;
   -1    17 		box-shadow: 0 0 0.5em var(--border) inset;
   18    18 	}
   19    19 }

diff --git a/src/scss/components/_conversation.scss b/src/scss/components/_conversation.scss

@@ -1,7 +1,7 @@
    1     1 body {
    2     2 	display: grid;
    3     3 	grid-template-rows: min-content 1fr;
    4    -1 	background: Window;
   -1     4 	background: var(--bg-tint);
    5     5 	height: 100vh;
    6     6 	margin: 0;
    7     7 	padding: 0;
@@ -9,9 +9,9 @@ body {
    9     9 
   10    10 .conversation__header {
   11    11 	padding: 1em;
   12    -1 	background-color: Menu;
   13    -1 	color: MenuText;
   14    -1 	border-bottom: 1px solid ThreeDShadow;
   -1    12 	background-color: var(--bg);
   -1    13 	color: var(--fg);
   -1    14 	border-bottom: 1px solid var(--border);
   15    15 }
   16    16 
   17    17 .conversation__main {

diff --git a/src/scss/components/_dropdown.scss b/src/scss/components/_dropdown.scss

@@ -4,11 +4,11 @@
    4     4 	top: 2em;
    5     5 	right: 0;
    6     6 	z-index: 1;
    7    -1 	background-color: -moz-Field;
    8    -1 	color: -moz-FieldText;
   -1     7 	background-color: var(--dropdown-bg);
   -1     8 	color: var(--dropdown-fg);
    9     9 	min-width: 15em;
   10    10 	border-radius: 0.4em;
   11    -1 	border: 1px solid ThreeDShadow;
   -1    11 	border: 1px solid var(--border);
   12    12 	overflow: hidden;
   13    13 
   14    14 	&.is-expanded {
@@ -28,11 +28,11 @@
   28    28 	cursor: pointer;
   29    29 
   30    30 	&:nth-child(2n) {
   31    -1 		background-color: -moz-OddTreeRow;
   -1    31 		background-color: var(--odd);
   32    32 	}
   33    33 
   34    34 	&:hover {
   35    -1 		background-color: -moz-CellHighlight;
   36    -1 		color: -moz-CellHighlightText;
   -1    35 		background-color: var(--highlight-bg);
   -1    36 		color: var(--highlight-fg);
   37    37 	}
   38    38 }

diff --git a/src/scss/components/_message.scss b/src/scss/components/_message.scss

@@ -1,10 +1,10 @@
    1     1 .message {
    2     2 	max-width: 70em;
    3     3 	margin: 0 auto 2px;
    4    -1 	background-color: Menu;
    5    -1 	color: MenuText;
   -1     4 	background-color: var(--bg);
   -1     5 	color: var(--fg);
    6     6 	margin-bottom: 0.5em;
    7    -1 	border: 1px solid ThreeDShadow;
   -1     7 	border: 1px solid var(--border);
    8     8 
    9     9 	.message__details,
   10    10 	.message__recipients {

diff --git a/src/scss/style.scss b/src/scss/style.scss

@@ -1,3 +1,16 @@
   -1     1 :root {
   -1     2 	--border: ThreeDShadow;
   -1     3 	--button-highlight: ButtonHighlight;
   -1     4 	--bg-tint: Window;
   -1     5 	--bg: Menu;
   -1     6 	--fg: MenuText;
   -1     7 	--dropdown-bg: -moz-Field;
   -1     8 	--dropdown-fg: -moz-FieldText;
   -1     9 	--odd: -moz-OddTreeRow;
   -1    10 	--highlight-bg: -moz-CellHighlight;
   -1    11 	--highlight-fg: -moz-CellHighlightText;
   -1    12 }
   -1    13 
    1    14 @import 'components/alert';
    2    15 @import 'components/attachments';
    3    16 @import 'components/button';