Merge pull request #38 from pavlovcik/fix/styles

Fix/styles
ubiquity · Mar 22, 2024 · 475ceb0 · 475ceb0
2 parents e2a6bc0 + c654b86
commit 475ceb0
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -94,8 +94,8 @@
     margin: 4px;
     filter: blur(4px);
     display: block;
-    border-color: var(--border-color);
-    box-shadow: inset 0 0 24px #00bfff10;
+    /* border-color: var(--border-color); */
+    /* box-shadow: inset 0 0 24px #00bfff10; */
   }
   #issues-container > div.selected,
   #issues-container > div.selected .info,
@@ -405,9 +405,7 @@
   #issues-container img[src] {
     opacity: 1;
   }
-  background {
-    background-color: var(--dark-background);
-  }
+
   background,
   background #grid {
     width: 100%;
@@ -495,7 +493,7 @@
     /* flex-wrap: wrap; */
     pointer-events: none;
     /* overflow: hidden; */
-    /* width: calc(100vw - 14px); */
+    width: calc(100vw - 14px);
   }
   .preview * {
     pointer-events: none;
@@ -555,7 +553,7 @@
     padding: 16px;
     max-height: calc(100vh - (80px));
     max-height: calc(100vh - (242px));
-    border-color: var(--border-color);
+    /* border-color: var(--border-color); */
   }
   .preview-content {
     width: 100%;

diff --git a/static/style/special.css b/static/style/special.css
@@ -1,20 +1,24 @@
 :root {
-  --dark-background: #000410;
-  --dark-background-half: #00041080;
-  --light-background: #f0f0f0;
-  --light-background-half: #f0f0f080;
+  --dark-background: #000210;
+  --dark-background-half: #00021080;
+  --light-background: #f8f8f8;
+  --light-background-half: #f8f8f880;
 }
 
 @media (prefers-color-scheme: dark) {
+  background {
+    background-color: var(--dark-background);
+  }
   html,
   #issues-container > div,
   .preview {
     background-color: var(--dark-background);
     border-color: var(--border-color);
     border-color: #80808020;
   }
+  #issues-container > div,
   .preview > .preview-content {
-    box-shadow: inset 0 0 24px #00bfff18;
+    box-shadow: inset 0 0 24px #0080ff08;
   }
 
   .toolbar.ready {
@@ -25,11 +29,22 @@
     /* border-width: 0; */
     animation: highlight-dark-mode 1s ease-in-out infinite alternate;
   }
+  .grid-loaded #bottom-bar {
+    background-color: var(--dark-background-half);
+  }
 }
 
 @media (prefers-color-scheme: light) {
+  #issues-container > div,
+  .preview > .preview-content {
+    box-shadow: inset 0 0 24px #00000008;
+  }
+  background {
+    /* background-color: var(--light-background); */
+  }
   #grid {
-    opacity: 0.25;
+    /* opacity: 0.25; */
+    filter: invert(1);
   }
   #issues-container > div,
   .preview {
@@ -38,6 +53,9 @@
   .toolbar.ready {
     background-color: var(--light-background-half);
   }
+  .grid-loaded #bottom-bar {
+    background-color: var(--light-background-half);
+  }
   body.preview-active button#github-login-button.highlight {
     animation: highlight-light-mode 1s ease-in-out infinite alternate;
   }

diff --git a/static/style/style.css b/static/style/style.css
@@ -94,8 +94,8 @@
     margin: 4px;
     filter: blur(4px);
     display: block;
-    border-color: var(--border-color);
-    box-shadow: inset 0 0 24px #00bfff10;
+    /* border-color: var(--border-color); */
+    /* box-shadow: inset 0 0 24px #00bfff10; */
   }
   #issues-container > div.selected,
   #issues-container > div.selected .info,
@@ -405,9 +405,7 @@
   #issues-container img[src] {
     opacity: 1;
   }
-  background {
-    background-color: var(--dark-background);
-  }
+
   background,
   background #grid {
     width: 100%;
@@ -495,7 +493,7 @@
     /* flex-wrap: wrap; */
     pointer-events: none;
     /* overflow: hidden; */
-    /* width: calc(100vw - 14px); */
+    width: calc(100vw - 14px);
   }
   .preview * {
     pointer-events: none;
@@ -555,7 +553,7 @@
     padding: 16px;
     max-height: calc(100vh - (80px));
     max-height: calc(100vh - (242px));
-    border-color: var(--border-color);
+    /* border-color: var(--border-color); */
   }
   .preview-content {
     width: 100%;