xi-conversations

commit

7326f7e41f58f64eb6dc03459ae6642813229448

parent

dfa269255faa026cb04e6ea1d138855bed10ae68

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2022-10-15 16:30

ditch sass, include CSS directly

Diffstat

11 files changed, 263 insertions, 292 deletions

diff --git a/.gitignore b/.gitignore

@@ -1,4 +1,3 @@
    1     1 /_*
    2     2 node_modules
    3    -1 content/style.css
    4     3 content/main.js

diff --git a/Makefile b/Makefile

@@ -1,7 +1,4 @@
    1    -1 all: content/style.css content/main.js content/material-icons.svg
    2    -1 
    3    -1 content/style.css: src/scss/style.scss src/scss/*.scss src/scss/components/*.scss
    4    -1 	npx sass $< $@
   -1     1 all: content/main.js content/material-icons.svg
    5     2 
    6     3 content/main.js: src/js/main.js src/js/*.js node_modules
    7     4 	npx browserify $< -o $@

diff --git a/content/style.css b/content/style.css

@@ -0,0 +1,262 @@
   -1     1 :root {
   -1     2 	--bg-tint: Window;
   -1     3 	--bg: Menu;
   -1     4 	--fg: MenuText;
   -1     5 	--border: ThreeDShadow;
   -1     6 	--odd: -moz-OddTreeRow;
   -1     7 	--highlight-bg: -moz-CellHighlight;
   -1     8 	--highlight-fg: -moz-CellHighlightText;
   -1     9 }
   -1    10 
   -1    11 @media (prefers-color-scheme: dark) {
   -1    12 	:root {
   -1    13 		--bg-tint: #000;
   -1    14 		--bg: #111;
   -1    15 		--fg: #fff;
   -1    16 		--border: #222;
   -1    17 		--odd: #222;
   -1    18 		--highlight-bg: #555;
   -1    19 		--highlight-fg: #fff;
   -1    20 	}
   -1    21 }
   -1    22 
   -1    23 body {
   -1    24 	display: grid;
   -1    25 	grid-template-rows: min-content 1fr;
   -1    26 	background: var(--bg-tint);
   -1    27 	height: 100vh;
   -1    28 	margin: 0;
   -1    29 	padding: 0;
   -1    30 }
   -1    31 
   -1    32 .button {
   -1    33 	font-size: inherit;
   -1    34 	border: 1px solid transparent;
   -1    35 	background: none;
   -1    36 	cursor: pointer;
   -1    37 	border-radius: 2px;
   -1    38 	padding: 0.2em;
   -1    39 	color: inherit;
   -1    40 }
   -1    41 .button:hover {
   -1    42 	background-color: var(--highlight-bg);
   -1    43 	color: var(--highlight-fg);
   -1    44 	border-color: var(--border);
   -1    45 	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
   -1    46 }
   -1    47 .button:active {
   -1    48 	background-color: transparent;
   -1    49 	box-shadow: 0 0 0.5em var(--border) inset;
   -1    50 }
   -1    51 
   -1    52 .icon {
   -1    53 	display: inline-block;
   -1    54 	fill: currentColor;
   -1    55 	height: 1.5em;
   -1    56 	vertical-align: -0.4em;
   -1    57 }
   -1    58 
   -1    59 .alert {
   -1    60 	background-color: #d9edf7;
   -1    61 	color: black;
   -1    62 	padding: 0.5em;
   -1    63 }
   -1    64 .alert .icon {
   -1    65 	font-size: 200%;
   -1    66 	vertical-align: middle;
   -1    67 }
   -1    68 .alert--success {
   -1    69 	background-color: #dff0d8;
   -1    70 }
   -1    71 .alert--warning {
   -1    72 	background-color: #fcf8e3;
   -1    73 }
   -1    74 .alert--error {
   -1    75 	background-color: #f2dede;
   -1    76 }
   -1    77 
   -1    78 .conversation__header {
   -1    79 	padding: 1em;
   -1    80 	background-color: var(--bg);
   -1    81 	color: var(--fg);
   -1    82 	border-bottom: 1px solid var(--border);
   -1    83 }
   -1    84 
   -1    85 .conversation__main {
   -1    86 	overflow-y: scroll;
   -1    87 	padding: 0.5em;
   -1    88 }
   -1    89 
   -1    90 .conversation__subject {
   -1    91 	font-size: inherit;
   -1    92 	margin: 0;
   -1    93 }
   -1    94 
   -1    95 .dropdown {
   -1    96 	display: none;
   -1    97 	position: absolute;
   -1    98 	top: 2em;
   -1    99 	right: 0;
   -1   100 	z-index: 1;
   -1   101 	background-color: var(--bg);
   -1   102 	color: var(--fg);
   -1   103 	min-width: 15em;
   -1   104 	border-radius: 0.4em;
   -1   105 	border: 1px solid var(--border);
   -1   106 	overflow: hidden;
   -1   107 }
   -1   108 .dropdown.is-expanded {
   -1   109 	display: block;
   -1   110 }
   -1   111 .dropdown-item {
   -1   112 	border: 0;
   -1   113 	background: none;
   -1   114 	color: inherit;
   -1   115 	display: block;
   -1   116 	min-width: 100%;
   -1   117 	font-size: inherit;
   -1   118 	text-align: left;
   -1   119 	padding: 0.2em 0.3em;
   -1   120 	white-space: nowrap;
   -1   121 	cursor: pointer;
   -1   122 }
   -1   123 .dropdown-item:nth-child(2n) {
   -1   124 	background-color: var(--odd);
   -1   125 }
   -1   126 .dropdown-item:hover {
   -1   127 	background-color: var(--highlight-bg);
   -1   128 	color: var(--highlight-fg);
   -1   129 }
   -1   130 
   -1   131 .message {
   -1   132 	max-width: 70em;
   -1   133 	margin: 0 auto 2px;
   -1   134 	background-color: var(--bg);
   -1   135 	color: var(--fg);
   -1   136 	margin-bottom: 0.5em;
   -1   137 	border: 1px solid var(--border);
   -1   138 }
   -1   139 .message .message__details,
   -1   140 .message .message__recipients {
   -1   141 	display: none;
   -1   142 }
   -1   143 .message.is-expanded .message__details,
   -1   144 .message.is-expanded .message__recipients {
   -1   145 	display: block;
   -1   146 }
   -1   147 .message.is-expanded .message__summary {
   -1   148 	display: none;
   -1   149 }
   -1   150 
   -1   151 .message__body {
   -1   152 	padding: 0.5em;
   -1   153 	margin: 0;
   -1   154 	line-height: 1.4;
   -1   155 	white-space: pre-wrap;
   -1   156 	overflow: auto;
   -1   157 }
   -1   158 .message__body summary {
   -1   159 	font-size: 80%;
   -1   160 	cursor: pointer;
   -1   161 }
   -1   162 .message__body blockquote {
   -1   163 	margin: 0;
   -1   164 	padding: 0.4ex 1ex;
   -1   165 	border-inline-start: 2px solid rgb(114, 159, 207); /* Sky Blue 1 */
   -1   166 }
   -1   167 .message__body blockquote blockquote {
   -1   168 	border-inline-start-color: rgb(173, 127, 168); /* Plum 1 */
   -1   169 }
   -1   170 .message__body blockquote blockquote blockquote {
   -1   171 	border-inline-start-color: rgb(138, 226, 52); /* Chameleon 1 */
   -1   172 }
   -1   173 .message__body blockquote blockquote blockquote blockquote {
   -1   174 	border-inline-start-color: rgb(252, 175, 62); /* Orange 1 */
   -1   175 }
   -1   176 .message__body blockquote blockquote blockquote blockquote blockquote {
   -1   177 	border-inline-start-color: rgb(233, 185, 110); /* Chocolate 1 */
   -1   178 }
   -1   179 .message__body .moz-signature {
   -1   180 	opacity: 0.6;
   -1   181 }
   -1   182 
   -1   183 .message__header,
   -1   184 .message__footer {
   -1   185 	padding: 0.5em;
   -1   186 }
   -1   187 
   -1   188 .message__header {
   -1   189 	display: flex;
   -1   190 	flex-direction: row;
   -1   191 	align-items: center;
   -1   192 }
   -1   193 .message__header > * {
   -1   194 	flex: 0 0 auto;
   -1   195 }
   -1   196 .message__header > .message__summary,
   -1   197 .message__header > .message__recipients {
   -1   198 	flex: 1 1 auto;
   -1   199 }
   -1   200 .message__header > .message__summary {
   -1   201 	white-space: nowrap;
   -1   202 	text-overflow: ellipsis;
   -1   203 	overflow: hidden;
   -1   204 }
   -1   205 
   -1   206 .message__summary {
   -1   207 	opacity: 0.5;
   -1   208 }
   -1   209 
   -1   210 .message__author {
   -1   211 	margin-right: 0.5em;
   -1   212 	text-decoration: none;
   -1   213 }
   -1   214 
   -1   215 .message__recipients a {
   -1   216 	color: inherit;
   -1   217 	text-decoration: none;
   -1   218 }
   -1   219 .message__recipients a:not(:last-child)::after {
   -1   220 	content: ", ";
   -1   221 }
   -1   222 
   -1   223 .message__recipients__cc,
   -1   224 .message__recipients__bcc {
   -1   225 	opacity: 0.5;
   -1   226 }
   -1   227 
   -1   228 .message__recipients__cc::before {
   -1   229 	content: "cc:";
   -1   230 }
   -1   231 
   -1   232 .message__recipients__bcc::before {
   -1   233 	content: "bcc:";
   -1   234 }
   -1   235 
   -1   236 .message__actions {
   -1   237 	position: relative;
   -1   238 }
   -1   239 
   -1   240 .attachments {
   -1   241 	margin: 0;
   -1   242 	padding: 0;
   -1   243 }
   -1   244 .attachments li {
   -1   245 	display: block;
   -1   246 }
   -1   247 .attachment {
   -1   248 	color: inherit;
   -1   249 	text-decoration: none;
   -1   250 	padding: 0.1em;
   -1   251 	border-radius: 2px;
   -1   252 }
   -1   253 
   -1   254 .star {
   -1   255 	border: 0;
   -1   256 	background: none;
   -1   257 	color: inherit;
   -1   258 	padding: 0;
   -1   259 }
   -1   260 .star.is-active {
   -1   261 	color: #fcb040;
   -1   262 }

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

@@ -1,22 +0,0 @@
    1    -1 .alert {
    2    -1 	background-color: #d9edf7;
    3    -1 	color: black;
    4    -1 	padding: 0.5em;
    5    -1 
    6    -1 	.icon {
    7    -1 		font-size: 200%;
    8    -1 		vertical-align: middle;
    9    -1 	}
   10    -1 }
   11    -1 
   12    -1 .alert--success {
   13    -1 	background-color: #dff0d8;
   14    -1 }
   15    -1 
   16    -1 .alert--warning {
   17    -1 	background-color: #fcf8e3;
   18    -1 }
   19    -1 
   20    -1 .alert--error {
   21    -1 	background-color: #f2dede;
   22    -1 }

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

@@ -1,15 +0,0 @@
    1    -1 .attachments {
    2    -1 	margin: 0;
    3    -1 	padding: 0;
    4    -1 
    5    -1 	li {
    6    -1 		display: block;
    7    -1 	}
    8    -1 }
    9    -1 
   10    -1 .attachment {
   11    -1 	color: inherit;
   12    -1 	text-decoration: none;
   13    -1 	padding: 0.1em;
   14    -1 	border-radius: 2px;
   15    -1 }

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

@@ -1,21 +0,0 @@
    1    -1 .button {
    2    -1 	font-size: inherit;
    3    -1 	border: 1px solid transparent;
    4    -1 	background: none;
    5    -1 	cursor: pointer;
    6    -1 	border-radius: 2px;
    7    -1 	padding: 0.2em;
    8    -1 	color: inherit;
    9    -1 
   10    -1 	&:hover {
   11    -1 		background-color: var(--highlight-bg);
   12    -1 		color: var(--highlight-fg);
   13    -1 		border-color: var(--border);
   14    -1 		transition: background-color 0.3s, color 0.3s, border-color 0.3s;
   15    -1 	}
   16    -1 
   17    -1 	&:active {
   18    -1 		background-color: transparent;
   19    -1 		box-shadow: 0 0 0.5em var(--border) inset;
   20    -1 	}
   21    -1 }

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

@@ -1,25 +0,0 @@
    1    -1 body {
    2    -1 	display: grid;
    3    -1 	grid-template-rows: min-content 1fr;
    4    -1 	background: var(--bg-tint);
    5    -1 	height: 100vh;
    6    -1 	margin: 0;
    7    -1 	padding: 0;
    8    -1 }
    9    -1 
   10    -1 .conversation__header {
   11    -1 	padding: 1em;
   12    -1 	background-color: var(--bg);
   13    -1 	color: var(--fg);
   14    -1 	border-bottom: 1px solid var(--border);
   15    -1 }
   16    -1 
   17    -1 .conversation__main {
   18    -1 	overflow-y: scroll;
   19    -1 	padding: 0.5em;
   20    -1 }
   21    -1 
   22    -1 .conversation__subject {
   23    -1 	font-size: inherit;
   24    -1 	margin: 0;
   25    -1 }

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

@@ -1,39 +0,0 @@
    1    -1 .dropdown {
    2    -1 	display: none;
    3    -1 	position: absolute;
    4    -1 	top: 2em;
    5    -1 	right: 0;
    6    -1 	z-index: 1;
    7    -1 	background-color: var(--bg);
    8    -1 	color: var(--fg);
    9    -1 	min-width: 15em;
   10    -1 	border-radius: 0.4em;
   11    -1 	border: 1px solid var(--border);
   12    -1 	overflow: hidden;
   13    -1 
   14    -1 	&.is-expanded {
   15    -1 		display: block;
   16    -1 	}
   17    -1 }
   18    -1 
   19    -1 .dropdown-item {
   20    -1 	border: 0;
   21    -1 	background: none;
   22    -1 	color: inherit;
   23    -1 	display: block;
   24    -1 	min-width: 100%;
   25    -1 	font-size: inherit;
   26    -1 	text-align: left;
   27    -1 	padding: 0.2em 0.3em;
   28    -1 	white-space: nowrap;
   29    -1 	cursor: pointer;
   30    -1 
   31    -1 	&:nth-child(2n) {
   32    -1 		background-color: var(--odd);
   33    -1 	}
   34    -1 
   35    -1 	&:hover {
   36    -1 		background-color: var(--highlight-bg);
   37    -1 		color: var(--highlight-fg);
   38    -1 	}
   39    -1 }

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

@@ -1,6 +0,0 @@
    1    -1 .icon {
    2    -1 	display: inline-block;
    3    -1 	fill: currentColor;
    4    -1 	height: 1.5em;
    5    -1 	vertical-align: -.4em;
    6    -1 }

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

@@ -1,130 +0,0 @@
    1    -1 .message {
    2    -1 	max-width: 70em;
    3    -1 	margin: 0 auto 2px;
    4    -1 	background-color: var(--bg);
    5    -1 	color: var(--fg);
    6    -1 	margin-bottom: 0.5em;
    7    -1 	border: 1px solid var(--border);
    8    -1 
    9    -1 	.message__details,
   10    -1 	.message__recipients {
   11    -1 		display: none;
   12    -1 	}
   13    -1 
   14    -1 	&.is-expanded {
   15    -1 		.message__details,
   16    -1 		.message__recipients {
   17    -1 			display: block;
   18    -1 		}
   19    -1 
   20    -1 		.message__summary {
   21    -1 			display: none;
   22    -1 		}
   23    -1 	}
   24    -1 }
   25    -1 
   26    -1 .message__body {
   27    -1 	padding: 0.5em;
   28    -1 	margin: 0;
   29    -1 	line-height: 1.4;
   30    -1 	white-space: pre-wrap;
   31    -1 	overflow: auto;
   32    -1 
   33    -1 	summary {
   34    -1 		font-size: 80%;
   35    -1 		cursor: pointer;
   36    -1 	}
   37    -1 
   38    -1 	blockquote {
   39    -1 		margin: 0;
   40    -1 		padding: 0.4ex 1ex;
   41    -1 		border-inline-start: 2px solid rgb(114, 159, 207); /* Sky Blue 1 */
   42    -1 
   43    -1 		blockquote {
   44    -1 			border-inline-start-color: rgb(173, 127, 168); /* Plum 1 */
   45    -1 		}
   46    -1 		blockquote blockquote {
   47    -1 			border-inline-start-color: rgb(138, 226, 52); /* Chameleon 1 */
   48    -1 		}
   49    -1 		blockquote blockquote blockquote {
   50    -1 			border-inline-start-color: rgb(252, 175, 62); /* Orange 1 */
   51    -1 		}
   52    -1 		blockquote blockquote blockquote blockquote {
   53    -1 			border-inline-start-color: rgb(233, 185, 110); /* Chocolate 1 */
   54    -1 		}
   55    -1 	}
   56    -1 
   57    -1 	.moz-signature {
   58    -1 		opacity: 0.6;
   59    -1 	}
   60    -1 }
   61    -1 
   62    -1 .message__header,
   63    -1 .message__footer {
   64    -1 	padding: 0.5em;
   65    -1 }
   66    -1 
   67    -1 .message__header {
   68    -1 	display: flex;
   69    -1 	flex-direction: row;
   70    -1 	align-items: center;
   71    -1 
   72    -1 	> * {
   73    -1 		flex: 0 0 auto;
   74    -1 	}
   75    -1 
   76    -1 	> .message__summary,
   77    -1 	> .message__recipients {
   78    -1 		flex: 1 1 auto;
   79    -1 	}
   80    -1 
   81    -1 	> .message__summary {
   82    -1 		white-space: nowrap;
   83    -1 		text-overflow: ellipsis;
   84    -1 		overflow: hidden;
   85    -1 	}
   86    -1 }
   87    -1 
   88    -1 .message__summary {
   89    -1 	opacity: 0.5;
   90    -1 }
   91    -1 
   92    -1 .message__author {
   93    -1 	margin-right: 0.5em;
   94    -1 	text-decoration: none;
   95    -1 }
   96    -1 
   97    -1 .message__recipients {
   98    -1 	a {
   99    -1 		color: inherit;
  100    -1 		text-decoration: none;
  101    -1 	}
  102    -1 	a:not(:last-child)::after {
  103    -1 		content: ", ";
  104    -1 	}
  105    -1 }
  106    -1 .message__recipients__cc,
  107    -1 .message__recipients__bcc {
  108    -1 	opacity: 0.5;
  109    -1 }
  110    -1 .message__recipients__cc::before {
  111    -1 	content: "cc:"
  112    -1 }
  113    -1 .message__recipients__bcc::before {
  114    -1 	content: "bcc:"
  115    -1 }
  116    -1 
  117    -1 .message__actions {
  118    -1 	position: relative;
  119    -1 }
  120    -1 
  121    -1 .star {
  122    -1 	border: 0;
  123    -1 	background: none;
  124    -1 	color: inherit;
  125    -1 	padding: 0;
  126    -1 }
  127    -1 
  128    -1 .star.is-active {
  129    -1 	color: #fcb040;
  130    -1 }

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

@@ -1,29 +0,0 @@
    1    -1 :root {
    2    -1 	--bg-tint: Window;
    3    -1 	--bg: Menu;
    4    -1 	--fg: MenuText;
    5    -1 	--border: ThreeDShadow;
    6    -1 	--odd: -moz-OddTreeRow;
    7    -1 	--highlight-bg: -moz-CellHighlight;
    8    -1 	--highlight-fg: -moz-CellHighlightText;
    9    -1 }
   10    -1 
   11    -1 @media (prefers-color-scheme: dark) {
   12    -1 	:root {
   13    -1 		--bg-tint: #000;
   14    -1 		--bg: #111;
   15    -1 		--fg: #fff;
   16    -1 		--border: #222;
   17    -1 		--odd: #222;
   18    -1 		--highlight-bg: #555;
   19    -1 		--highlight-fg: #fff;
   20    -1 	}
   21    -1 }
   22    -1 
   23    -1 @import 'components/alert';
   24    -1 @import 'components/attachments';
   25    -1 @import 'components/button';
   26    -1 @import 'components/conversation';
   27    -1 @import 'components/dropdown';
   28    -1 @import 'components/icon';
   29    -1 @import 'components/message';