From dc08d3c06ee0c80610dc1f7023ead1d7e701f1c0 Mon Sep 17 00:00:00 2001
From: efelon <efelon@winklerfamilie.eu>
Date: Thu, 21 Nov 2019 14:09:34 +0100
Subject: [PATCH] Divided the custom css into several files

It is more obvious what is supported.
---
 customstyles.css    | 377 --------------------------------------------
 dark_contacts.css   |  40 +++++
 dark_mail.css       |  96 +++++++++++
 dark_settings.css   |  86 ++++++++++
 dark_sieve.css      |  33 ++++
 dark_styles.css     |  88 +++++++++++
 dark_tasks.css      |  46 ++++++
 includes/links.html |   7 +-
 8 files changed, 395 insertions(+), 378 deletions(-)
 delete mode 100644 customstyles.css
 create mode 100644 dark_contacts.css
 create mode 100644 dark_mail.css
 create mode 100644 dark_settings.css
 create mode 100644 dark_sieve.css
 create mode 100644 dark_styles.css
 create mode 100644 dark_tasks.css

diff --git a/customstyles.css b/customstyles.css
deleted file mode 100644
index f8a3d65..0000000
--- a/customstyles.css
+++ /dev/null
@@ -1,377 +0,0 @@
-body {
-	background-color: #222222;
-  color: #eee;
-}
-
-/* Mobile view buttion */
-#topline button {
-  background-color: #333;
-}
-
-textarea,
-input,
-select {
-  color: #eee;
-  background-color: #333;
-  border: 1px solid #888;
-}
-
-.listsearchbox {
-  background-color: #333;
-}
-
-/* About dialog */
-.ui-dialog .ui-dialog-content, 
-.ui-dialog .ui-widget-content {
-  color: #eee;
-  background: #333;
-  box-shadow: none;
-}
-
-.ui-dialog .ui-dialog-buttonpane,
-.ui-dialog .ui-dialog-titlebar {
-  color: #eee;
-  background-color: #444;
-}
-.records-table thead tr th{
-  color: #eee;
-  background-color: #444;
-  border-color: #555;
-}
-.records-table tbody tr td{
-  background-color: #333;
-  border-color: #555;
-}
-/* eof About dialog */
-
-/* Toolbar */
-.toolbar a.button {
-  opacity: 1;
-  color: #eee;
-}
-
-.toolbar a.button.disabled {
-  opacity: .5;
-}
-
-.searchbox input,
-a.menuselector,
-#quicksearchbar input {
-  color: #eee;
-	background-color: #333;
-	border-color: #999;
-}
-
-a.menuselector .handle {
-  color: #eee;
-}
-/* oef Toolbar */
-
-/* Mail compose */
-#compose-contacts #directorylist {
-  border-bottom: 1px solid #888;
-}
-
-#composeheaders {
-  background-color: #333;
-  border-color: #888;
-}
-
-#compose-attachments .hint,
-#compose-attachments {
-  color: #eee;
-  background-color: #333;
-}
-/* eof Mail compose */
-
-/* Folder list */
-.folderlist li.mailbox.inbox.selected > a,
-.folderlist li.mailbox ul li.selected > a {
-  color: #333;
-  background-color: #aaa;
-}
-
-.folderlist li.mailbox ul li a {
-  color:#eee;
-}
-
-.folderlist li.mailbox ul, /* group border */
-.folderlist li.mailbox a {
-  color: #eee;
-  background-color: #333;
-  border-color: #555;
-}
-
-ul.listing li {
-  border-color: #555;
-}
-
-.uibox .listbutton,
-.uibox .boxfooter {
-  background-color: #333;
-  border-color: #555;
-}
-/* eof Folder list */
-
-/* Message List */
-.widescreen #messagelistheader,
-#messagelistfooter {
-  background-color: #333;
-  color: #eee;
-  border-color: #555;
-}
-
-/* List elements */
-.pagejumper,
-.widescreen #messagelistcontainer,
-.messagelist td.subject,
-.messagelist td.flags{
-  background-color: #333;
-  color: #eee;
-  border-color: #555;
-}
-
-.widescreen .messagelist td.subject span.date,
-.widescreen .messagelist td.subject span.fromto {
-  color: #aaa;
-}
-.messagelist tr td.subject a {
-  color: #eee;
-}
-/* eof List elements */
-/* eof Message List */
-
-/* Message composition */
-body.iframe {
-  color: #eee;
-  background-color: #333;
-  border-color: #555;
-}
-
-.moreheaderstoggle,
-#messageheader,
-#composeheader,
-#all-headers,
-#headers-source {
-  background-color: #333;
-  color: #ccc;
-  border-color: #555;
-}
-
-.headers-table td, 
-.headers-table td.header a {
-  color: #ccc;
-}
-/* eof Message composition */
-
-/* Settings */
-#settings-tabs .listitem a {
-  color: #eee;
-}
-
-#settings-sections .selected a {
-  color: #333;
-  background-color: #aaa;
-}
-
-
-#settings-tabs .listitem {
-  background-color: #333;
-  border-color: #555;
-}
-/* eof Settings */
-
-/* Settings Section */
-.uibox {
-  background-color: #333;
-  border-color: #555 !important;
-}
-
-.uibox .boxtitle {
-  color: #eee;
-  background-color: #444;
-}
-
-#subscription-table li.root {
-  background-color: #333;
-}
-
-#identities-table .selected td,
-#filtersetslist .selected td,
-#filterslist .selected td,
-#responses-table .selected td,
-#sections-table .selected td {
-  color: #333 !important;
-  background-color: #aaa;
-}
-
-#identities-table td,
-#responses-table td,
-#filtersetslist td,
-#filterslist td,
-.listbox,
-.uibox td.section {
-  color: #eee !important;
-  background-color: #333;
-  border-color: #555;
-}
-
-#identities-table tr.selected td {
-  color: #333;
-  background-color: #aaa;
-}
-/* eof Settings Section */
-
-/* Settings modification area*/
-table.propform td.title {
-  color: #eee;
-}
-
-body.iframe .boxtitle,
-body.iframe .footerleft.floating {
-  color: #eee;
-  background-color: #444;
-  border-color: #555;
-}
-ul.proplist li,
-table.propform td {
-  color: #eee;
-  background-color: #333;
-  border-color: #555;
-  border-width: 1px;
-}
-
-.footerleft {
-  background-color: #444;
-  padding: 8px;
-}
-
-/* Plugin: sieve manager */
-div.actionrow:hover,
-div.rulerow:hover {
-  background-color: #444;
-}
-
-div.actionrow,
-div.rulerow {
-  color: #888;
-  background-color: #333;
-  border: 1px solid #555;
-}
-
-.listarea {
-  border-color: #555;
-}
-
-td.rowtargets span {
-  color: #aaa;
-  /*background-color: #333;*/
-}
-
-#filter-form .listelement input { /* Filter definition text input */
-  background-color: #333 !important;
-}
-
-label,
-span.label,
-#filter-form label {
-  color: #aaa;
-}
-/* eof Plugin: sieve manager */
-/* eof Settings modifications area */
-
-/* Spellcheck */
-.googie_edit_layer {
-  background-color: #333 !important;
-}
-
-.googie_link {
-  color: #ff5252 !important;
-}
-/* eof Spellcheck */
-
-/* Plugin: Contacts */
-#contacts-table tr.selected td,
-#directorylist .selected > a {
-  color: #333;
-  background-color: #aaa;
-}
-
-#contacts-table tr td,
-#directorylist a {
-  color: #eee;
-  background-color: #333;
-  border-color: #555;
-}
-
-#contacttabs li.ui-tabs-active a {
-  color: #333;
-  background-color: #aaa;
-  font-weight: bold;
-}
-
-#contacttabs li,
-#contacttabs a {
-  color: #888;
-  background-color: #333;
-  border: 1px solid #555;
-}
-
-#contacttabs fieldset {
-  color: #eee;
-  background-color: #333;
-  padding-top: 4px;
-}
-
-#contacttabs fieldset legend {
-  color: #eee;
-  background-color: #444;
-  border-color: #555;
-}
-/* eof Plugin: Contacts */
-
-/* Plugin: Tasks */
-#tasklists li.selected span.listname, 
-#tasklists li.selected {
-  color: #333 !important;
-  background-color: #aaa;
-}
-
-#tasklists li span.listname, 
-#tasklists li {
-  color: #eee !important;
-  background-color: #333;
-}
-
-#taskedit ul.tagedit-list,
-#taskedit li,
-#taskedit a {
-  color: #eee;
-  background-color: #333;
-  border: 1px solid #555;
-}
-
-#taskedit li.ui-tabs-active a {
-  color: #333;
-  background-color: #aaa;
-  font-weight: bold;
-}
-
-#taskedit li a.tagedit-close {
-  border: 0px;
-}
-
-li.tagedit-listelement,
-#taskedit input {
-  color: #eee !important;
-  background: #333 !important;
-}
-
-#taskshow {
-  color: #eee !important;
-}
-
-.tagcloud li{
-  color: #eee;
-}
-/* eof Plugin: Tasks */
diff --git a/dark_contacts.css b/dark_contacts.css
new file mode 100644
index 0000000..a524897
--- /dev/null
+++ b/dark_contacts.css
@@ -0,0 +1,40 @@
+/* 
+ * Plugin: Contacts
+ */
+#contacts-table tr.selected td,
+#directorylist .selected > a {
+  color: #333;
+  background-color: #aaa;
+}
+
+#contacts-table tr td,
+#directorylist a {
+  color: #eee;
+  background-color: #333;
+  border-color: #555;
+}
+
+#contacttabs li.ui-tabs-active a {
+  color: #333;
+  background-color: #aaa;
+  font-weight: bold;
+}
+
+#contacttabs li,
+#contacttabs a {
+  color: #888;
+  background-color: #333;
+  border: 1px solid #555;
+}
+
+#contacttabs fieldset {
+  color: #eee;
+  background-color: #333;
+  padding-top: 4px;
+}
+
+#contacttabs fieldset legend {
+  color: #eee;
+  background-color: #444;
+  border-color: #555;
+}
diff --git a/dark_mail.css b/dark_mail.css
new file mode 100644
index 0000000..805e1fa
--- /dev/null
+++ b/dark_mail.css
@@ -0,0 +1,96 @@
+/* Mail compose */
+#compose-contacts #directorylist {
+  border-bottom: 1px solid #888;
+}
+
+#composeheaders {
+  background-color: #333;
+  border-color: #888;
+}
+
+#compose-attachments .hint,
+#compose-attachments {
+  color: #eee;
+  background-color: #333;
+}
+/* eof Mail compose */
+
+/* Folder list */
+.folderlist li.mailbox.inbox.selected > a,
+.folderlist li.mailbox ul li.selected > a {
+  color: #333;
+  background-color: #aaa;
+}
+
+.folderlist li.mailbox ul li a {
+  color:#eee;
+}
+
+.folderlist li.mailbox ul, /* group border */
+.folderlist li.mailbox a {
+  color: #eee;
+  background-color: #333;
+  border-color: #555;
+}
+
+ul.listing li {
+  border-color: #555;
+}
+
+.uibox .listbutton,
+.uibox .boxfooter {
+  background-color: #333;
+  border-color: #555;
+}
+/* eof Folder list */
+
+/* Message List */
+.widescreen #messagelistheader,
+#messagelistfooter {
+  background-color: #333;
+  color: #eee;
+  border-color: #555;
+}
+
+/* List elements */
+.pagejumper,
+.widescreen #messagelistcontainer,
+.messagelist td.subject,
+.messagelist td.flags{
+  background-color: #333;
+  color: #eee;
+  border-color: #555;
+}
+
+.widescreen .messagelist td.subject span.date,
+.widescreen .messagelist td.subject span.fromto {
+  color: #aaa;
+}
+.messagelist tr td.subject a {
+  color: #eee;
+}
+/* eof List elements */
+/* eof Message List */
+
+/* Message composition */
+body.iframe {
+  color: #eee;
+  background-color: #333;
+  border-color: #555;
+}
+
+.moreheaderstoggle,
+#messageheader,
+#composeheader,
+#all-headers,
+#headers-source {
+  background-color: #333;
+  color: #ccc;
+  border-color: #555;
+}
+
+.headers-table td, 
+.headers-table td.header a {
+  color: #ccc;
+}
+/* eof Message composition */
diff --git a/dark_settings.css b/dark_settings.css
new file mode 100644
index 0000000..937a736
--- /dev/null
+++ b/dark_settings.css
@@ -0,0 +1,86 @@
+/*
+ * General color definition: see dark_styles.css
+ */
+
+/* Settings */
+#settings-tabs .listitem a {
+  color: #eee;
+}
+
+#settings-sections .selected a {
+  color: #333;
+  background-color: #aaa;
+}
+
+
+#settings-tabs .listitem {
+  background-color: #333;
+  border-color: #555;
+}
+/* eof Settings */
+
+/* Settings Section */
+.uibox {
+  background-color: #333;
+  border-color: #555 !important;
+}
+
+.uibox .boxtitle {
+  color: #eee;
+  background-color: #444;
+}
+
+#subscription-table li.root {
+  background-color: #333;
+}
+
+#identities-table .selected td,
+#filtersetslist .selected td,
+#filterslist .selected td,
+#responses-table .selected td,
+#sections-table .selected td {
+  color: #333 !important;
+  background-color: #aaa;
+}
+
+#identities-table td,
+#responses-table td,
+#filtersetslist td,
+#filterslist td,
+.listbox,
+.uibox td.section {
+  color: #eee !important;
+  background-color: #333;
+  border-color: #555;
+}
+
+#identities-table tr.selected td {
+  color: #333;
+  background-color: #aaa;
+}
+/* eof Settings Section */
+
+/* Settings modification area*/
+table.propform td.title {
+  color: #eee;
+}
+
+body.iframe .boxtitle,
+body.iframe .footerleft.floating {
+  color: #eee;
+  background-color: #444;
+  border-color: #555;
+}
+ul.proplist li,
+table.propform td {
+  color: #eee;
+  background-color: #333;
+  border-color: #555;
+  border-width: 1px;
+}
+
+.footerleft {
+  background-color: #444;
+  padding: 8px;
+}
+/* eof Settings modifications area */
diff --git a/dark_sieve.css b/dark_sieve.css
new file mode 100644
index 0000000..41afb56
--- /dev/null
+++ b/dark_sieve.css
@@ -0,0 +1,33 @@
+/* 
+ * Plugin: Sieve Manager (settings)
+ */
+div.actionrow:hover,
+div.rulerow:hover {
+  background-color: #444;
+}
+
+div.actionrow,
+div.rulerow {
+  color: #888;
+  background-color: #333;
+  border: 1px solid #555;
+}
+
+.listarea {
+  border-color: #555;
+}
+
+td.rowtargets span {
+  color: #aaa;
+  /*background-color: #333;*/
+}
+
+#filter-form .listelement input { /* Filter definition text input */
+  background-color: #333 !important;
+}
+
+label,
+span.label,
+#filter-form label {
+  color: #aaa;
+}
diff --git a/dark_styles.css b/dark_styles.css
new file mode 100644
index 0000000..47c1a1c
--- /dev/null
+++ b/dark_styles.css
@@ -0,0 +1,88 @@
+/* 
+ * Colors
+ *
+ * Body background: #222
+ * App  background: #333
+ * Font color: #eee
+ * Font color darker: #aaa
+ * Border color: #555
+ * Header/Footer background: #444
+ * Section selected/focused/... #aaa
+ */
+body {
+	background-color: #222;
+  color: #eee;
+}
+
+/* Mobile view buttion */
+#topline button {
+  background-color: #333;
+}
+
+textarea,
+input,
+select {
+  color: #eee;
+  background-color: #333;
+  border: 1px solid #888;
+}
+
+.listsearchbox {
+  background-color: #333;
+}
+
+/* About dialog */
+.ui-dialog .ui-dialog-content, 
+.ui-dialog .ui-widget-content {
+  color: #eee;
+  background: #333;
+  box-shadow: none;
+}
+
+.ui-dialog .ui-dialog-buttonpane,
+.ui-dialog .ui-dialog-titlebar {
+  color: #eee;
+  background-color: #444;
+}
+.records-table thead tr th{
+  color: #eee;
+  background-color: #444;
+  border-color: #555;
+}
+.records-table tbody tr td{
+  background-color: #333;
+  border-color: #555;
+}
+/* eof About dialog */
+
+/* Toolbar */
+.toolbar a.button {
+  opacity: 1;
+  color: #eee;
+}
+
+.toolbar a.button.disabled {
+  opacity: .5;
+}
+
+.searchbox input,
+a.menuselector,
+#quicksearchbar input {
+  color: #eee;
+	background-color: #333;
+	border-color: #888;
+}
+
+a.menuselector .handle {
+  color: #eee;
+}
+
+/* Spellcheck */
+.googie_edit_layer {
+  background-color: #333 !important;
+}
+
+.googie_link {
+  color: #ff5252 !important;
+}
+/* eof Spellcheck */
diff --git a/dark_tasks.css b/dark_tasks.css
new file mode 100644
index 0000000..00e8c79
--- /dev/null
+++ b/dark_tasks.css
@@ -0,0 +1,46 @@
+/* 
+ * Plugin: Tasks
+ */
+#tasklists li.selected span.listname, 
+#tasklists li.selected {
+  color: #333 !important;
+  background-color: #aaa;
+}
+
+#tasklists li span.listname, 
+#tasklists li {
+  color: #eee !important;
+  background-color: #333;
+}
+
+#taskedit ul.tagedit-list,
+#taskedit li,
+#taskedit a {
+  color: #eee;
+  background-color: #333;
+  border: 1px solid #555;
+}
+
+#taskedit li.ui-tabs-active a {
+  color: #333;
+  background-color: #aaa;
+  font-weight: bold;
+}
+
+#taskedit li a.tagedit-close {
+  border: 0px;
+}
+
+li.tagedit-listelement,
+#taskedit input {
+  color: #eee !important;
+  background: #333 !important;
+}
+
+#taskshow {
+  color: #eee !important;
+}
+
+.tagcloud li{
+  color: #eee;
+}
diff --git a/includes/links.html b/includes/links.html
index 478080f..67affd5 100644
--- a/includes/links.html
+++ b/includes/links.html
@@ -1,2 +1,7 @@
 <roundcube:include file="/includes/links.html" skinPath="skins/larry" />
-<link rel="stylesheet" type="text/css" href="/customstyles.css" />
+<link rel="stylesheet" type="text/css" href="/dark_styles.css" />
+<link rel="stylesheet" type="text/css" href="/dark_settings.css" />
+<link rel="stylesheet" type="text/css" href="/dark_mail.css" />
+<link rel="stylesheet" type="text/css" href="/dark_sieve.css" />
+<link rel="stylesheet" type="text/css" href="/dark_contacts.css" />
+<link rel="stylesheet" type="text/css" href="/dark_tasks.css" />