Browse Source

Support for dark theme

Filip Š 4 years ago
parent
commit
aec987d64c
4 changed files with 224 additions and 1 deletions
  1. 1 0
      content.json
  2. 113 0
      css/all.css
  3. 109 0
      css/dark.css
  4. 1 1
      index.html

+ 1 - 0
content.json

@@ -1,6 +1,7 @@
 {
  "address": "1MaiL5gfBM1cyb4a8e3iiL8L5gXmoAJu27",
  "background-color": "#FFF",
+ "background-color-dark": "#0D0E10",
  "cloneable": true,
  "description": "End-to-end encrypted messaging",
  "domain": "Mail.ZeroNetwork.bit",

+ 113 - 0
css/all.css

@@ -213,6 +213,119 @@ h5, h6 { font-weight: normal; color: #999 }
 }
 
 
+/* ---- data/1MaiL5gfBM1cyb4a8e3iiL8L5gXmoAJu27/css/dark.css ---- */
+
+
+.theme-dark {
+    background-color: #0D0E10;
+}
+
+.theme-dark .center {
+    background-color: #16181C;
+    border-right: 1px solid #0D0E10;
+}
+
+.theme-dark .right {
+    background-color: #16181C;
+}
+
+.theme-dark .minimized .titlebar {
+    background-color: #16181C !important;
+    color: #CDD1D5 !important;
+    border-top: 1px solid #0D0E10 !important;
+}
+
+.theme-dark .MessageList .Message {
+    background-color: #16181C;
+    border-top: 1px solid #0D0E10;
+}
+
+.theme-dark .MessageList .Message:hover {
+    background-color: #252627;
+}
+
+.theme-dark .MessageList .Message.active, .theme-dark .MessageList .Message.selected {
+    background-color: #2E3031 !important;
+    border-bottom: 1px solid #0D0E10 !important;
+    border-top: 1px solid #0D0E10 !important;
+}
+
+.theme-dark .MessageShow .Message .tools .icon {
+    -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%) ;
+    opacity: 0.5;
+}
+
+.theme-dark .MessageShow .Message .body {
+    color: #E1E1E1;
+}
+
+.theme-dark .MessageShow .body pre, .theme-dark .MessageShow .body code {
+    background-color: #0D0E10;
+    border-color: #0A0A0A;
+    color: #D3D3D3;
+}
+
+.theme-dark .empty {
+    color: #747474 !important;
+}
+
+.theme-dark .subject {
+    color: #E1E1E1 !important;
+    background-color: transparent;
+}
+
+.theme-dark .from, .theme-dark .to {
+    color: #C0C0C0 !important;
+    background-color: transparent;
+}
+
+.theme-dark .preview {
+    color: #A3A3A3 !important;
+}
+
+.theme-dark a {
+    color: #83EFFF;
+}
+
+.theme-dark .StartScreen .term {
+    color: white;
+}
+
+.theme-dark .button-submit {
+    color: #333333;
+}
+
+.theme-dark .MessageCreate {
+    -webkit-box-shadow: 0px -11px 50px -6px #303030;
+    -moz-box-shadow: 0px -11px 50px -6px #303030;
+    -o-box-shadow: 0px -11px 50px -6px #303030;
+    -ms-box-shadow: 0px -11px 50px -6px #303030;
+    -webkit-box-shadow: 0px -11px 50px -6px #303030; -moz-box-shadow: 0px -11px 50px -6px #303030; -o-box-shadow: 0px -11px 50px -6px #303030; -ms-box-shadow: 0px -11px 50px -6px #303030; box-shadow: 0px -11px 50px -6px #303030 ;
+    background-color: #16181C;
+}
+
+.theme-dark .MessageCreate .label-to {
+    color: #C0C0C0;
+}
+
+.theme-dark .MessageCreate textarea {
+    color: #E1E1E1;
+    background-color: transparent;
+}
+
+.theme-dark .MessageCreate input, .theme-dark .MessageCreate textarea {
+    border-bottom: 1px solid #484848;
+}
+
+.theme-dark .MessageCreate input:focus, .theme-dark .MessageCreate textarea:focus {
+    border-color: #6B6B6B;
+    -webkit-transition: none;
+    -moz-transition: none;
+    -o-transition: none;
+    -ms-transition: none;
+    transition: none;
+}
+
 
 /* ---- data/1MaiL5gfBM1cyb4a8e3iiL8L5gXmoAJu27/css/fonts.css ---- */
 

+ 109 - 0
css/dark.css

@@ -0,0 +1,109 @@
+.theme-dark {
+    background-color: #0D0E10;
+}
+
+.theme-dark .center {
+    background-color: #16181C;
+    border-right: 1px solid #0D0E10;
+}
+
+.theme-dark .right {
+    background-color: #16181C;
+}
+
+.theme-dark .minimized .titlebar {
+    background-color: #16181C !important;
+    color: #CDD1D5 !important;
+    border-top: 1px solid #0D0E10 !important;
+}
+
+.theme-dark .MessageList .Message {
+    background-color: #16181C;
+    border-top: 1px solid #0D0E10;
+}
+
+.theme-dark .MessageList .Message:hover {
+    background-color: #252627;
+}
+
+.theme-dark .MessageList .Message.active, .theme-dark .MessageList .Message.selected {
+    background-color: #2E3031 !important;
+    border-bottom: 1px solid #0D0E10 !important;
+    border-top: 1px solid #0D0E10 !important;
+}
+
+.theme-dark .MessageShow .Message .tools .icon {
+    filter: invert(100%);
+    opacity: 0.5;
+}
+
+.theme-dark .MessageShow .Message .body {
+    color: #E1E1E1;
+}
+
+.theme-dark .MessageShow .body pre, .theme-dark .MessageShow .body code {
+    background-color: #0D0E10;
+    border-color: #0A0A0A;
+    color: #D3D3D3;
+}
+
+.theme-dark .empty {
+    color: #747474 !important;
+}
+
+.theme-dark .subject {
+    color: #E1E1E1 !important;
+    background-color: transparent;
+}
+
+.theme-dark .from, .theme-dark .to {
+    color: #C0C0C0 !important;
+    background-color: transparent;
+}
+
+.theme-dark .preview {
+    color: #A3A3A3 !important;
+}
+
+.theme-dark a {
+    color: #83EFFF;
+}
+
+.theme-dark .StartScreen .term {
+    color: white;
+}
+
+.theme-dark .button-submit {
+    color: #333333;
+}
+
+.theme-dark .MessageCreate {
+    -webkit-box-shadow: 0px -11px 50px -6px #303030;
+    -moz-box-shadow: 0px -11px 50px -6px #303030;
+    -o-box-shadow: 0px -11px 50px -6px #303030;
+    -ms-box-shadow: 0px -11px 50px -6px #303030;
+    box-shadow: 0px -11px 50px -6px #303030;
+    background-color: #16181C;
+}
+
+.theme-dark .MessageCreate .label-to {
+    color: #C0C0C0;
+}
+
+.theme-dark .MessageCreate textarea {
+    color: #E1E1E1;
+    background-color: transparent;
+}
+
+.theme-dark .MessageCreate input, .theme-dark .MessageCreate textarea {
+    border-bottom: 1px solid #484848;
+}
+
+.theme-dark .MessageCreate input:focus, .theme-dark .MessageCreate textarea:focus {
+    border-color: #6B6B6B;
+    -webkit-transition: none;
+    -moz-transition: none;
+    -o-transition: none;
+    -ms-transition: none;
+    transition: none;
+}

+ 1 - 1
index.html

@@ -9,7 +9,7 @@
  <base href="" target="_top" id="base">
  <script>base.href = document.location.href.replace("/media", "").replace("index.html", "").replace(/[&?]wrapper=False/, "").replace(/[&?]wrapper_nonce=[A-Za-z0-9]+/, "")</script>
 </head>
-<body>
+<body class="{themeclass}">
 
 <div id="banner" style="display: none">
 __________                     _____         .__.__   ​