Compare revisions

Eliot Berriot · c4ace75a · c4ace75a · c4ace75a · c4ace75a · c4ace75a
--- a/front/public/index.html
+++ b/front/public/index.html
@@ -9,7 +9,7 @@
  <title>Funkwhale</title>
 </head>

-<body>
+<body class="theme-dark">
  <noscript>
    <strong>We're sorry but Funkwhale doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>

--- a/front/src/components/Footer.vue
+++ b/front/src/components/Footer.vue
@@ -79,13 +79,3 @@ export default {
  }
 }
 </script>
-<style scoped>
-footer p {
-  color: grey;
-}
-
-footer#footer div.item:hover {
-  color: rgba(0, 0, 0, 0.87);
-}
-
-</style>
--- a/front/src/components/notifications/NotificationRow.vue
+++ b/front/src/components/notifications/NotificationRow.vue
@@ -126,7 +126,4 @@ export default {
 .read > span {
  cursor: pointer;
 }
-.disabled-row {
-  color: rgba(40, 40, 40, 0.3);
-}
 </style>
--- a/front/src/components/playlists/Card.vue
+++ b/front/src/components/playlists/Card.vue
@@ -59,12 +59,10 @@ export default {

 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style>
-
 .playlist.card .header .ellipsis.vertical.large.grey {
  font-size: 1.2em;
  margin-right: 0;
 }
-
 </style>
 <style scoped>
 .card .header {
@@ -72,8 +70,7 @@ export default {
 }

 .attached.button {
-  background-color: rgb(243, 244, 245);
-  background-size: 25% ;
+  background-size: 25%;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: 0 0, 33.33% 0, 66.67% 0, 100% 0;
@@ -82,5 +79,4 @@ export default {
  font-size: 4em;
  box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset !important;
 }
-
 </style>
--- a/front/src/style/_main.scss
+++ b/front/src/style/_main.scss
@@ -10,6 +10,10 @@
  Import this file into your LESS project to use Semantic UI without build tools
 */

+// Those semantic-ui-css/*.scss don't exist in the package, but we create them
+// via scripts/link-scss-files.sh on postinstall, so we can include theme
+// under a class namespace
+
 /* Global */
 @import "~semantic-ui-css/components/reset.css";
 // we use our custom site css here to avoid loading google font
@@ -90,6 +94,7 @@ body {
  -moz-osx-font-smoothing: grayscale;
 }

+
 .instance-chooser {
  margin-top: 2em;
 }
@@ -120,14 +125,10 @@ body {
  margin-left: 0;
  margin-right: 0;
  border: none;
-  box-shadow: inset 0px -2px 0px 0px rgba(34, 36, 38, 0.15);
  .ui.item {
    border: none;
    border-bottom-style: none;
    margin-bottom: 0px;
-    &.active {
-      box-shadow: inset 0px -2px 0px 0px #000;
-    }
  }
  @include media(">tablet") {
    padding: 0 2.5rem;
@@ -142,7 +143,6 @@ body {
  @include media(">widedesktop") {
    left: $widedesktop-sidebar-width;
  }
-  background-color: white;
  .item {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
@@ -202,9 +202,6 @@ body {
  }
 }

-.discrete {
-  color: rgba(0, 0, 0, 0.87);
-}
 .link {
  cursor: pointer;
 }
@@ -326,3 +323,7 @@ td.align.right {
    margin-left: 1em;
  }
 }
+
+
+@import "./themes/_light.scss";
+@import "./themes/_dark.scss";
--- a/front/src/style/themes/_dark.scss
+++ b/front/src/style/themes/_dark.scss
+$background-color: rgb(43, 58, 66);
+$button-hover-color: rgb(33, 48, 56);
+$light-background-color: rgb(51, 71, 82);
+$input-background-color: rgb(189, 211, 222);
+$loading-background-color: rgba(43, 58, 66, 0.9);
+$text-color: rgb(223, 235, 240);
+$discrete-text-color: rgba(223, 235, 240, 0.904);
+$border-color: rgb(63, 88, 102);
+$light-shadow-color: rgba(223, 235, 240, 0.15);
+$shadow-color: rgba(63, 102, 97, 0.95);
+$box-shadow: 0px 1px 3px 0px rgba(63, 88, 102, 0.95), 0px 0px 0px 1px rgba(63, 88, 102, 0.98);
+$link-color: rgb(255, 144, 0);
+
+.theme-dark {
+  background-color: $background-color;
+
+  .ui.form textarea, .ui.form select, .ui.selection.dropdown, .ui.dropdown.selected, .ui.dropdown .menu .selected.item, .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] {
+    background-color: $input-background-color;
+    &::placeholder {
+      color: $light-background-color;
+
+    }
+  }
+  .ui.dropdown .menu .item:hover {
+    background-color: $light-background-color;
+    color: $text-color;
+
+  }
+  .main.pusher > .ui.secondary.menu {
+    background-color: $background-color;
+    box-shadow: inset 0px -2px 0px 0px $light-background-color;
+    .ui.item {
+      color: $text-color;
+      &.active {
+        box-shadow: inset 0px -2px 0px 0px $shadow-color;
+      }
+    }
+  }
+  .ui.modal {
+    > .header, > .content, > .actions {
+      background-color: $background-color;
+    }
+    > .header {
+      border-bottom: 1px solid $border-color;
+    }
+
+    > .actions {
+      border-top: 1px solid $border-color;
+    }
+  }
+  main, .main, footer, .modal {
+
+    .ui.menu {
+      background-color: $light-background-color;
+      .item {
+
+        color: $text-color;
+      }
+    }
+    .ui.secondary.menu .dropdown.item:hover, .ui.secondary.menu .link.item:hover, .ui.secondary.menu a.item:hover {
+      background: $background-color;
+      color: $text-color;
+    }
+    .header, .ui.form .field > label, .sub.header {
+      color: $text-color;
+    }
+    .ui.attached.header {
+      background-color: transparent;
+    }
+    .ui.toggle.checkbox input:checked ~ .box, .ui.toggle.checkbox input:checked ~ label {
+      color: $text-color !important;
+    }
+    .ui.toggle.checkbox .box::before, .ui.toggle.checkbox label::before {
+      background-color: $light-background-color;
+    }
+    a:not(.ui):not(.discrete) {
+      color: $link-color;
+    }
+    .ui.segment:not(.basic) {
+      background-color: $light-background-color;
+    }
+    .ui.list, .ui.dropdown {
+      .item, div.item, a.item, .button.item {
+        background-color: $background-color;
+        color: $discrete-text-color;
+      }
+      .selected.item:not(:hover) {
+        color: $background-color;
+      }
+    }
+    .ui.divided.items > .item:not(:first-child) {
+      border-top: 1px solid $border-color;
+    }
+    .ui.items {
+      .extra {
+        color: $discrete-text-color;
+      }
+    }
+    label, .toggle label {
+      color: $text-color !important;
+    }
+    &, .main.pusher, .ui.vertical.segment {
+      color: $text-color;
+      background-color: $background-color;
+    }
+
+    .discrete {
+      color: $discrete-text-color;
+    }
+
+    .ui.table thead th, .ui.table {
+      color: $text-color;
+    }
+    .ui.divider:not(.vertical):not(.horizontal) {
+      border-top: 1px solid $border-color;
+      border-bottom: 1px solid $border-color;
+    }
+    .ui.cards > .card, .ui.card {
+      color: $text-color;
+      background-color: $background-color;
+      box-shadow: $box-shadow;
+      .content, .header, .description {
+        color: $text-color;
+      }
+      .extra, .meta {
+        color: $discrete-text-color;
+      }
+    }
+    .playlist.card {
+      .attached.button {
+        background-color: $light-background-color;
+      }
+    }
+
+    // buttons
+    [class='ui button ui button'], [class='ui button'], [class='ui icon button'], [class='ui fluid button'], [class='ui cancel button'] {
+      background-color: $light-background-color;
+      color: $text-color;
+      &:hover {
+        background-color: $button-hover-color;
+
+      }
+    }
+    .ui.buttons > .ui.button:not(.basic):not(.inverted), .ui.buttons:not(.basic):not(.inverted) > .button {
+      box-shadow: 0px 0px 0px 1px $light-shadow-color inset;
+
+    }
+    .ui.basic.buttons:not(:hover):not(.green):not(.orange):not(.yellow):not(.red) .button, .ui.basic.button {
+      box-shadow: 0px 0px 0px 1px $text-color inset;
+      &:not(:hover):not(.green):not(.orange):not(.yellow):not(.red) {
+        color: $text-color !important;
+      }
+    }
+    .ui.basic.buttons .button, .ui.basic.button {
+      &:hover {
+        color: $text-color !important;
+      }
+
+    }
+    .ui.basic.buttons:not(.green):not(.orange):not(.yellow):not(.red) .button:hover, .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):hover, .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):active, .ui.basic.button:not(.green):not(.orange):not(.yellow):not(.red):focus {
+      color: $background-color !important;
+    }
+    // loading /dimmers
+    .ui.loading.form::before {
+      background-color: $loading-background-color;
+    }
+    .ui.inverted.dimmer {
+      background-color: $loading-background-color;
+    }
+    // table
+    .ui.basic.table tbody tr, .ui.table tr td {
+      border-bottom: 1px solid $border-color;
+    }
+    .ui.table thead th {
+      border-bottom: 1px solid $border-color;
+    }
+    .ui.table {
+      &:not(.basic) {
+        &, thead th {
+          background-color: $light-background-color;
+        }
+      }
+    }
+  }
+  .ui.link.list.list a.item:hover, .ui.link.list.list .item a:not(.ui):not(.button):hover {
+    color: $link-color;
+  }
+}
--- a/front/src/style/themes/_light.scss
+++ b/front/src/style/themes/_light.scss
+
+
+.theme-light {
+
+  .main.pusher > .ui.secondary.menu {
+    box-shadow: inset 0px -2px 0px 0px rgba(34, 36, 38, 0.15);
+    background-color: white;
+    .ui.item {
+      &.active {
+        box-shadow: inset 0px -2px 0px 0px #000;
+      }
+    }
+  }
+
+  .discrete {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .playlist.card {
+    .attached.button {
+      background-color: rgb(243, 244, 245);
+    }
+  }
+
+  .disabled-row {
+    color: rgba(40, 40, 40, 0.3);
+  }
+  footer p {
+    color: grey;
+  }
+
+  footer#footer div.item:hover {
+    color: rgba(0, 0, 0, 0.87);
+  }
+
+}
No results found