Dark mode

pointercrate-core-pages/static/css/core.css

@@ -164,6 +164,57 @@
   background: #5ba324;
 }
 
+/* dark mode */
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #292929;
+    color: #e6e6e6;
+  }
+
+  .fade {
+    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
+    border: 1px #6d6d6d dashed;
+  }
+
+  /* color modifying styles */
+
+  .blue {
+    background-color: #0A95E6;
+    color: white;
+  }
+
+  .white {
+    background-color: #353434;
+    color: #FFFFFF;
+  }
+
+  .white.hover:not(.disabled):not([disabled]):hover,
+  .white.active {
+    background-color: #474747;
+    color: #fff;
+  }
+
+  .white.hover:not(.disabled):not([disabled]):active {
+    background-color: #383838;
+    color: #f0eeee;
+  }
+
+  .red {
+    background: #fc426d;
+    color: white;
+  }
+
+  .red.hover:not(.disabled):not([disabled]):hover,
+  .red.active {
+    background: #e22b56;
+  }
+
+  .red.hover:not(.disabled):not([disabled]):active,
+  .red.active {
+    background: #c7274c;
+  }
+}
+
 /* size modifying styles */
 
 .large {

pointercrate-core-pages/static/css/icon.css

@@ -168,4 +168,19 @@ i.fa.hover:hover {
  Flag styles, taken from https://github.com/lipis/flag-icon-css
  */
 
-.flag-icon-background{background-size:contain;background-position:50%;background-repeat:no-repeat}.flag-icon{background-size:contain;background-position:50%;background-repeat:no-repeat;position:relative;display:inline-block;width:1.33333333em;line-height:1em}.flag-icon:before{content:'\00a0'}
+.flag-icon-background{background-size:contain;background-position:50%;background-repeat:no-repeat}.flag-icon{background-size:contain;background-position:50%;background-repeat:no-repeat;position:relative;display:inline-block;width:1.33333333em;line-height:1em}.flag-icon:before{content:'\00a0'}
+
+/* dark mode */
+@media (prefers-color-scheme: dark) {
+  .arrow:before, .arrow:after, .hamburger span, .plus:before, .plus:after {
+    background-color: #e6e6e6 !important;
+  }
+
+  .arrow.hover {
+    opacity: 1;
+  }
+
+  .arrow.hover:hover {
+    opacity: 0.5 !important;
+  }
+}

pointercrate-core-pages/static/css/main.css

@@ -47,3 +47,10 @@ input {
   height: calc(90px + 0.6em); /* fixed header height*/
   margin-top: calc(-90px - 0.6em); /* negative fixed header height */
 }
+
+/* dark mode */
+@media (prefers-color-scheme: dark) {
+  body {
+    color: #444446;
+  }
+}

pointercrate-core-pages/static/css/nav.css

@@ -236,3 +236,10 @@ footer * {
     flex-wrap: wrap;
   }
 }
+
+/* dark mode */
+@media (prefers-color-scheme: dark) {
+  header nav {
+    background: #353434;
+  }
+}

pointercrate-core-pages/static/css/ui.css

@@ -738,3 +738,104 @@ ul.selection-list li {
 .tab-active {
   color: #0881c6;
 }
+
+/* dark mode */
+@media (prefers-color-scheme: dark) {
+  body {
+    scrollbar-color: #363636 #525252;
+  }
+
+  /* Link styles */
+
+  a.link {
+    color: #B3B3FF;
+  }
+
+  /* Misc element styles */
+
+  a {
+    color: #f0f0f0;
+  }
+
+  input, textarea {
+    color: #e6e6e6 !important;
+  }
+
+  /* Flex layout classes */
+
+  .overlay {
+    background-color: rgba(37, 37, 37, 0.8);
+  }
+
+  .dialog {
+    background-color: #353434;
+  }
+
+  /* Panel styles */
+
+  .panel {
+    background: #353434;
+  }
+
+  /* When the checkbox is checked, add a blue background */
+  .cb-container input:checked ~ .checkmark {
+    background-color: #0A95E6;
+  }
+
+  /* Dropdown selection menu thingy styles */
+
+  .dropdown-menu .menu {
+    background: #353434;
+    box-shadow: 0px 8px 10px #4e4e4e, -10px 8px 15px #4e4e4e, 10px 8px 15px #4e4e4e;
+  }
+
+  .dropdown-menu > div {
+    border-bottom: 1px dotted #e6e6e6;
+  }
+
+  .dropdown-menu div:focus-within {
+    box-shadow: 0 0 10px 5px #6d6d6d;
+  }
+
+  /*
+   * Tooltip stuff
+   */
+
+  .tooltip .tooltiptext {
+    border: 3px solid #696969;
+    background: #353434;
+  }
+
+  /* (Under)lines */
+  .underlined {
+    border-bottom: 1px solid #e6e6e6;
+  }
+
+  .leftlined {
+    border-left: 1px solid #e6e6e6;
+  }
+
+  .rightlined {
+    border-right: 1px solid #e6e6e6;
+  }
+
+  .overlined {
+    border-top: 1px solid #e6e6e6;
+  }
+
+  .menu .underlined  {
+    border-bottom: 1px solid #525252;
+  }
+
+  .menu ul {
+    background-color: #353434;
+  }
+
+  ul.selection-list {
+    border: 1px solid #999;
+  }
+
+  #claimed-records-info span {
+    color: #444446;
+  }
+}

pointercrate-demonlist-pages/src/account/list_integration.rs

@@ -135,7 +135,7 @@
                             h2.pad.underlined {
                                 "Your claimed player's records"
                             }
-                            p {
+                            p #claimed-records-info {
                                 "A list of your claimed player's records, including all under consideration and rejected records and all submissions. Use this to track the status of your submissions. Clicking on a record will pull up any public notes a list mod left on the given record. The background color of each record tells you whether the record is "
                                 span  style = "background-color: #E9FAE3" { "Approved"  } ", "
                                 span style = "background-color: #F7F7E0" { "Unchecked" } ", "

pointercrate-demonlist-pages/static/css/demonlist.css

@@ -216,3 +216,18 @@ tr:nth-child(even) {
 .ct-series-a .ct-point {
   stroke: #0881c6;
 }
+
+/* dark mode */
+@media (prefers-color-scheme: dark) {
+  .dropdown {
+    background: #353434;
+  }
+
+  tr {
+    background: #4f4f4f;
+  }
+
+  tr:nth-child(even) {
+    background: #3d3b3b;
+  }
+}

pointercrate-demonlist-pages/static/css/statsviewer.css

@@ -53,4 +53,15 @@
 
 .tooltip:hover .tooltiptext {
     opacity: 1 !important;
+}
+
+/* dark mode */
+@media (prefers-color-scheme: dark) {
+    #stats-viewer-pagination li i {
+        color: #e6e6e6;
+    }
+
+    #world-map-wrapper:after {
+        box-shadow: inset 0 -10px 23px 22px #292929;
+    }
 }

pointercrate-user-pages/static/css/account.css

@@ -45,3 +45,11 @@ form {
   padding: 15px;
   border-bottom: 1px lightgray dashed;
 }
+
+/* dark mode */
+@media (prefers-color-scheme: dark) {
+  .tab-active {
+    background-color: #474747;
+    color: #fff;
+  }
+}