New theming system

.gitlab-ci.yml

@@ -108,7 +108,7 @@ flake8:
   variables:
     GIT_STRATEGY: fetch
   before_script:
-    - pip install flake8
+    - pip install 'flake8<3.7'
   script:
     - flake8 -v api
   cache:

CONTRIBUTING.rst

@@ -704,6 +704,21 @@ Views: you can find some readable views tests in file: ``api/tests/users/test_vi
 Contributing to the front-end
 -----------------------------
 
+Styles and themes
+^^^^^^^^^^^^^^^^^
+
+Our UI framework is Fomantic UI (https://fomantic-ui.com/), and Funkwhale's custom styles are written in SCSS. All the styles are configured in ``front/src/styles/_main.scss``,
+including imporing of Fomantic UI styles and components.
+
+We're applying several changes on top of the Fomantic CSS files, before they are imported:
+
+1. Many hardcoded color values are replaced by CSS vars: e.g ``color: orange`` is replaced by ``color: var(--vibrant-color)``. This makes theming way easier.
+2. Unused components variations and icons are stripped from the source files, in order to reduce the final size of our CSS files
+
+This changes are applied automatically when running ``yarn install``, through a ``postinstall`` hook. Internally, ``front/scripts/fix-fomantic-css.py`` is called
+and handle both kind of modifications. Please refer to this script if you need to use new icons to the project, or restore some components variations that
+were stripped in order to use them.
+
 Running tests
 ^^^^^^^^^^^^^
 

api/funkwhale_api/static/css/project.css

-/* These styles are generated from project.scss. */
-
-.alert-debug {
-  color: black;
-  background-color: white;
-  border-color: #d6e9c6;
-}
-
-.alert-error {
-  color: #b94a48;
-  background-color: #f2dede;
-  border-color: #eed3d7;
-}
-
-/* This is a fix for the bootstrap4 alpha release */
-@media (max-width: 47.9em) {
-  .navbar-nav .nav-item {
-    float: none;
-    width: 100%;
-    display: inline-block;
-  }
-
-  .navbar-nav .nav-item + .nav-item {
-    margin-left: 0;
-  }
-
-  .nav.navbar-nav.pull-right {
-    float: none !important;
-  }
-}
-
-/* Display django-debug-toolbar.
-   See https://github.com/django-debug-toolbar/django-debug-toolbar/issues/742
-   and https://github.com/pydanny/cookiecutter-django/issues/317
-*/
-[hidden][style="display: block;"] {
-  display: block !important;
-}
\ No newline at end of file

api/funkwhale_api/static/js/project.js

-/* Project specific Javascript goes here. */

api/funkwhale_api/static/sass/project.scss

-// project specific CSS goes here
-
-// Alert colors
-
-$white: #fff;
-$mint-green: #d6e9c6;
-$black: #000;
-$pink: #f2dede;
-$dark-pink: #eed3d7;
-$red: #b94a48;
-
-// bootstrap alert CSS, translated to the django-standard levels of
-// debug, info, success, warning, error
-
-.alert-debug {
-  background-color: $white;
-  border-color: $mint-green;
-  color: $black;
-}
-
-.alert-error {
-  background-color: $pink;
-  border-color: $dark-pink;
-  color: $red;
-}
-
-// This is a fix for the bootstrap4 alpha release
-
-@media (max-width: 47.9em) {
-  .navbar-nav .nav-item {
-    display: inline-block;
-    float: none;
-    width: 100%;
-  }
-
-  .navbar-nav .nav-item + .nav-item {
-    margin-left: 0;
-  }
-
-  .nav.navbar-nav.pull-right {
-    float: none !important;
-  }
-}
-
-// Display django-debug-toolbar.
-// See https://github.com/django-debug-toolbar/django-debug-toolbar/issues/742
-// and https://github.com/pydanny/cookiecutter-django/issues/317
-
-[hidden][style="display: block;"] {
-  display: block !important;
-}

front/package.json

@@ -10,7 +10,9 @@
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
     "i18n-compile": "scripts/i18n-compile.sh",
-    "i18n-extract": "scripts/i18n-extract.sh"
+    "i18n-extract": "scripts/i18n-extract.sh",
+    "fix-fomantic-css": "scripts/fix-fomantic-css.sh",
+    "postinstall": "yarn run fix-fomantic-css"
   },
   "dependencies": {
     "axios": "^0.18.0",
@@ -25,6 +27,7 @@
     "qs": "^6.7.0",
     "register-service-worker": "^1.6.2",
     "sanitize-html": "^1.20.1",
+    "sass": "^1.26.5",
     "showdown": "^1.8.6",
     "text-clipper": "^1.3.0",
     "vue": "^2.6.10",
@@ -54,7 +57,6 @@
     "glob-all": "^3.1.0",
     "mocha": "^5.2.0",
     "moxios": "^0.4.0",
-    "node-sass": "^4.9.3",
     "preload-webpack-plugin": "^3.0.0-beta.4",
     "purgecss-webpack-plugin": "^1.6.0",
     "sass-loader": "^8.0.2",

front/public/index.html

@@ -30,7 +30,7 @@
     #orange-square {
       width: 56px;
       height: 56px;
-      background-color: #f2711c
+      background-color: #f2711c;
     }
     #fake-content {
       height: 100vh;

front/scripts/fix-fomantic-css.sh

+#!/bin/bash -eux
+
+find node_modules/fomantic-ui-css/components -name "*.min.css" -delete
+mkdir -p node_modules/fomantic-ui-css/tweaked
+echo 'Removing google font…'
+sed -i '/@import url(/d' node_modules/fomantic-ui-css/components/site.css
+echo "Replacing hardcoded values by CSS vars…"
+scripts/fix-fomantic-css.py node_modules/fomantic-ui-css node_modules/fomantic-ui-css/tweaked

front/src/App.vue

@@ -444,194 +444,4 @@ export default {
 <style lang="scss">
 @import "style/_main";
 
-.ui.bottom-player {
-  z-index: 999999;
-  width: 100%;
-  width: 100vw;
-  .ui.top.attached.progress {
-    top: 0;
-  }
-}
-.dimmed {
-  .ui.bottom-player {
-    @include media("<desktop") {
-      z-index: 0;
-    }
-  }
-}
-#app.queue-focused {
-  .queue-not-focused {
-    @include media("<desktop") {
-      display: none;
-    }
-  }
-}
-.when-queue-focused {
-  .group {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 1.1em;
-    > * {
-      margin-left: 0.5em;
-    }
-  }
-  @include media("<desktop") {
-    width: 100%;
-    justify-content: space-between !important;
-  }
-}
-#app:not(.queue-focused) {
-  .when-queue-focused {
-    @include media("<desktop") {
-      display: none;
-    }
-  }
-}
-.ui.bottom-player > .segment.fixed-controls {
-  width: 100%;
-  width: 100vw;
-  border-radius: 0;
-  padding: 0em;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  margin: 0;
-  z-index: 1001;
-  height: $bottom-player-height;
-  .controls-row {
-    height: $bottom-player-height;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    @include media(">desktop") {
-      padding: 0 1em;
-      justify-content: space-around;
-    }
-  }
-  cursor: pointer;
-  .indicating.progress {
-    overflow: hidden;
-  }
-
-  .ui.progress .bar {
-    transition: none;
-  }
-
-  .ui.progress .buffer.bar {
-    position: absolute;
-  }
-
-  @keyframes MOVE-BG {
-    from {
-      transform: translateX(0px);
-    }
-    to {
-      transform: translateX(46px);
-    }
-  }
-  .discrete.link {
-    color: inherit;
-  }
-  .indicating.progress .bar {
-    left: -46px;
-    width: 200% !important;
-    color: grey;
-    background: repeating-linear-gradient(
-      -55deg,
-      grey 1px,
-      grey 10px,
-      transparent 10px,
-      transparent 20px
-    ) !important;
-
-    animation-name: MOVE-BG;
-    animation-duration: 2s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-  }
-  .ui.progress:not([data-percent]):not(.indeterminate)
-    .bar.position:not(.buffer) {
-    background: #ff851b;
-    min-width: 0;
-  }
-
-  .track-controls {
-    display: flex;
-    align-items: center;
-    justify-content: start;
-    flex-grow: 1;
-    .image {
-      padding: 0.5em;
-      width: auto;
-      margin-right: 0.5em;
-      > img {
-        max-height: 3.7em;
-        max-width: 4.7em;
-      }
-    }
-  }
-  .controls {
-    min-width: 8em;
-    font-size: 1.1em;
-    @include media(">desktop") {
-      &:not(.fluid) {
-        width: 20%;
-      }
-      &.queue-controls {
-        width: 32.5%;
-      }
-      &.progress-controls {
-        width: 10%;
-      }
-      &.player-controls {
-        width: 15%;
-      }
-    }
-    &.small, .small {
-      @include media(">desktop") {
-        font-size: 0.9em;
-      }
-    }
-    .icon {
-      font-size: 1.1em;
-    }
-    .icon.large {
-      font-size: 1.4em;
-    }
-    &:not(.track-controls) {
-      @include media(">desktop") {
-        line-height: 1em;
-      }
-      justify-content: center;
-      align-items: center;
-      &.align-right {
-        justify-content: flex-end;
-      }
-      &.align-left {
-        justify-content: flex-start;
-      }
-      > * {
-        padding: 0.5em;
-      }
-    }
-    &.player-controls {
-      .icon {
-        margin: 0;
-      }
-    }
-
-  }
-}
-.queue-enter-active, .queue-leave-active {
-  transition: all 0.2s ease-in-out;
-  .current-track, .queue-column {
-    opacity: 0;
-  }
-}
-.queue-enter, .queue-leave-to {
-  transform: translateY(100vh);
-  opacity: 0;
-}
 </style>

front/src/components/About.vue

 <template>
-  <main class="main pusher">
+  <main class="main pusher page-about">
     <section :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
       <div class="segment-content">
         <h1 class="ui center aligned large header">
@@ -173,22 +173,22 @@
                   <translate translate-context="Content/Home/Header">Statistics</translate>
                 </h3>
                 <p>
-                  <i class="user grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.users.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.users" translate-plural="%{ count } active users">%{ count } active user</translate>
+                  <i class="user really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.users.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.users" translate-plural="%{ count } active users">%{ count } active user</translate>
                 </p>
                 <p>
-                  <i class="music grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale)}" :translate-n="parseInt(stats.hours)" translate-plural="%{ count } hours of music">%{ count } hour of music</translate>
+                  <i class="music really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale)}" :translate-n="parseInt(stats.hours)" translate-plural="%{ count } hours of music">%{ count } hour of music</translate>
                 </p>
                 <p v-if="stats.artists">
-                  <i class="users grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.artists.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.artists" translate-plural="%{ count } artists">%{ count } artists</translate>
+                  <i class="users really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.artists.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.artists" translate-plural="%{ count } artists">%{ count } artists</translate>
                 </p>
                 <p v-if="stats.albums">
-                  <i class="headphones grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.albums.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.albums" translate-plural="%{ count } albums">%{ count } albums</translate>
+                  <i class="headphones really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.albums.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.albums" translate-plural="%{ count } albums">%{ count } albums</translate>
                 </p>
                 <p v-if="stats.tracks">
-                  <i class="file grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.tracks.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.tracks" translate-plural="%{ count } tracks">%{ count } tracks</translate>
+                  <i class="file really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.tracks.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.tracks" translate-plural="%{ count } tracks">%{ count } tracks</translate>
                 </p>
                 <p v-if="stats.listenings">
-                  <i class="play grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.listenings.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.listenings" translate-plural="%{ count } listenings">%{ count } listenings</translate>
+                  <i class="play really discrete icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.listenings.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.listenings" translate-plural="%{ count } listenings">%{ count } listenings</translate>
                 </p>
               </template>
             </div>
@@ -285,38 +285,3 @@ export default {
   }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-
-.ui.list .list.icon {
-  padding: 0;
-}
-
-h1.header, h1 .sub.header {
-  text-shadow: 0 2px 0 rgba(0,0,0,.8);
-  color: #fff !important;
-}
-h1.ui.header {
-  font-size: 3em;
-}
-h1.ui.header .sub.header {
-  font-size: 0.8em;
-}
-.main.pusher {
-  margin-top: 0;
-  min-height: 10em;
-}
-section.segment.head {
-  padding: 8em 3em;
-  background: linear-gradient(90deg, rgba(40,88,125,1) 0%, rgba(64,130,180,1) 100%);
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-#pod {
-  font-size: 110%;
-  display: block;
-}
-</style>

front/src/components/Footer.vue

@@ -9,16 +9,16 @@
           <h4 v-else class="ui header ellipsis">
             <span v-translate="{instanceUrl: instanceHostname}" translate-context="Footer/About/Title">About %{instanceUrl}</span>
           </h4>
-          <div class="ui link list">
-            <router-link class="item" to="/about">
+          <div class="ui list">
+            <router-link class="link item" to="/about">
               <translate translate-context="Footer/About/List item.Link">About page</translate>
             </router-link>
-              <a v-if="version" class="item" href="https://docs.funkwhale.audio/changelog.html" target="_blank">
+              <a v-if="version" class="link item" href="https://docs.funkwhale.audio/changelog.html" target="_blank">
                 <translate translate-context="Footer/*/List item" :translate-params="{version: version}" >Version %{version}</translate>
               </a>
-            <div role="button" class="item" @click="$emit('show:set-instance-modal')" >
+            <a role="button" class="link item" @click.prevent="$emit('show:set-instance-modal')" >
               <translate translate-context="Footer/*/List item.Link">Use another instance</translate>
-            </div>
+            </a>
           </div>
           <div class="ui form">
             <div class="ui field">
@@ -31,10 +31,10 @@
         </section>
         <section class="four wide column">
           <h4 v-translate class="ui header" translate-context="Footer/*/Title">Using Funkwhale</h4>
-          <div class="ui link list">
-            <a href="https://docs.funkwhale.audio" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link/Short, Noun">Documentation</translate></a>
-            <a href="https://funkwhale.audio/apps" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Mobile and desktop apps</translate></a>
-            <div role="button" class="item" @click="$emit('show:shortcuts-modal')"><translate translate-context="*/*/*/Noun">Keyboard shortcuts</translate></div>
+          <div class="ui list">
+            <a href="https://docs.funkwhale.audio" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link/Short, Noun">Documentation</translate></a>
+            <a href="https://funkwhale.audio/apps" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Mobile and desktop apps</translate></a>
+            <a role="button" class="link item" @click.prevent="$emit('show:shortcuts-modal')"><translate translate-context="*/*/*/Noun">Keyboard shortcuts</translate></a>
           </div>
           <div class="ui form">
             <div class="ui field">
@@ -47,18 +47,18 @@
         </section>
         <section class="four wide column">
           <h4 v-translate translate-context="Footer/*/Link" class="ui header">Getting help</h4>
-          <div class="ui link list">
-            <a href="https://governance.funkwhale.audio/g/kQgxNq15/funkwhale" class="item" target="_blank"><translate translate-context="Footer/*/Listitem.Link">Support forum</translate></a>
-            <a href="https://riot.im/app/#/room/#funkwhale-troubleshooting:matrix.org" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Chat room</translate></a>
-            <a href="https://dev.funkwhale.audio/funkwhale/funkwhale/issues" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Issue tracker</translate></a>
+          <div class="ui list">
+            <a href="https://governance.funkwhale.audio/g/kQgxNq15/funkwhale" class="link item" target="_blank"><translate translate-context="Footer/*/Listitem.Link">Support forum</translate></a>
+            <a href="https://riot.im/app/#/room/#funkwhale-troubleshooting:matrix.org" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Chat room</translate></a>
+            <a href="https://dev.funkwhale.audio/funkwhale/funkwhale/issues" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Issue tracker</translate></a>
           </div>
         </section>
         <section class="four wide column">
           <h4 v-translate class="ui header" translate-context="Footer/*/Title/Short">About Funkwhale</h4>
-          <div class="ui link list">
-            <a href="https://funkwhale.audio" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Official website</translate></a>
-            <a href="https://contribute.funkwhale.audio" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Contribute</translate></a>
-            <a href="https://dev.funkwhale.audio/funkwhale/funkwhale" class="item" target="_blank"><translate translate-context="Footer/*/List item.Link">Source code</translate></a>
+          <div class="ui list">
+            <a href="https://funkwhale.audio" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Official website</translate></a>
+            <a href="https://contribute.funkwhale.audio" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Contribute</translate></a>
+            <a href="https://dev.funkwhale.audio/funkwhale/funkwhale" class="link item" target="_blank"><translate translate-context="Footer/*/List item.Link">Source code</translate></a>
           </div>
           <div class="ui hidden divider"></div>
           <p>

front/src/components/Home.vue

 <template>
-  <main class="main pusher" v-title="labels.title">
+  <main class="main pusher page-home" v-title="labels.title">
     <section :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
       <div class="segment-content">
         <h1 class="ui center aligned large header">
@@ -32,7 +32,7 @@
                   <div v-if="truncatedDescription" class="ui hidden divider"></div>
                   <div class="ui relaxed list">
                     <div class="item" v-if="truncatedDescription">
-                      <i class="arrow right grey icon"></i>
+                      <i class="arrow right icon"></i>
                       <div class="content">
                         <router-link class="ui link" :to="{name: 'about'}">
                           <translate translate-context="Content/Home/Link">Learn more</translate>
@@ -40,7 +40,7 @@
                       </div>
                     </div>
                     <div class="item" v-if="rules">
-                      <i class="book open grey icon"></i>
+                      <i class="book open icon"></i>
                       <div class="content">
                         <router-link class="ui link" v-if="rules" :to="{name: 'about', hash: '#rules'}">
                           <translate translate-context="Content/Home/Link">Server rules</translate>
@@ -56,10 +56,10 @@
                     <translate translate-context="Content/Home/Header">Statistics</translate>
                   </h3>
                   <p>
-                    <i class="user grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.users.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.users" translate-plural="%{ count } active users">%{ count } active user</translate>
+                    <i class="user icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: stats.users.toLocaleString($store.state.ui.momentLocale) }" :translate-n="stats.users" translate-plural="%{ count } active users">%{ count } active user</translate>
                   </p>
                   <p>
-                    <i class="music grey icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale)}" :translate-n="parseInt(stats.hours)" translate-plural="%{ count } hours of music">%{ count } hour of music</translate>
+                    <i class="music icon"></i><translate translate-context="Content/Home/Stat" :translate-params="{count: parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale)}" :translate-n="parseInt(stats.hours)" translate-plural="%{ count } hours of music">%{ count } hour of music</translate>
                   </p>
 
                 </template>
@@ -67,7 +67,7 @@
                   <h3 class="sub header">
                     <translate translate-context="Content/Home/Header/Name">Contact</translate>
                   </h3>
-                  <i class="at grey icon"></i>
+                  <i class="at icon"></i>
                   <a :href="`mailto:${contactEmail}`">{{ contactEmail }}</a>
                 </template>
 
@@ -98,7 +98,7 @@
           <h3 class="header">
             <translate translate-context="Head/Login/Title">Log In</translate>
           </h3>
-          <login-form button-classes="basic green" :show-signup="false"></login-form>
+          <login-form button-classes="basic success" :show-signup="false"></login-form>
           <div class="ui hidden clearing divider"></div>
         </div>
         <div class="four wide column">
@@ -112,7 +112,7 @@
             <p v-if="defaultUploadQuota">
               <translate translate-context="Content/Home/Paragraph" :translate-params="{quota: humanSize(defaultUploadQuota * 1000 * 1000)}">Users on this pod also get %{ quota } of free storage to upload their own content!</translate>
             </p>
-            <signup-form button-classes="basic green" :show-login="false"></signup-form>
+            <signup-form button-classes="basic success" :show-login="false"></signup-form>
           </template>
           <div v-else>
             <p translate-context="Content/Home/Paragraph">Registrations are closed on this pod. You can signup on another pod using the link below.</p>
@@ -288,39 +288,3 @@ export default {
 
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import "../style/vendor/media";
-
-.ui.list .list.icon {
-  padding: 0;
-}
-
-h1.header, h1 .sub.header {
-  text-shadow: 1px 1px 2px rgba(0,0,0,.8);
-  color: #fff !important;
-}
-h1.ui.header {
-  @include media(">tablet") {
-    font-size: 3em;
-  }
-}
-h1.ui.header .sub.header {
-  font-size: 0.8em;
-}
-.main.pusher {
-  margin-top: 0;
-  min-height: 10em;
-}
-section.segment.head {
-  padding: 8em 3em;
-  background: linear-gradient(90deg, rgba(40,88,125,1) 0%, rgba(64,130,180,1) 100%);
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-#pod {
-  font-size: 110%;
-  display: block;
-}
-</style>

front/src/components/PageNotFound.vue

@@ -36,7 +36,3 @@ export default {
   }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

front/src/components/Pagination.vue

 <template>
-  <div v-if='maxPage > 1' class="ui pagination menu" role="navigation" :aria-label="labels.pagination">
+  <div v-if='maxPage > 1' class="ui pagination menu component-pagination" role="navigation" :aria-label="labels.pagination">
     <a href
       :disabled="current - 1 < 1"
       @click.prevent.stop="selectPage(current - 1)"
@@ -95,10 +95,3 @@ export default {
   }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-.ui.pagination.menu .item {
-  cursor: pointer;
-}
-</style>

front/src/components/Queue.vue

 <template>
-  <section class="main with-background" :aria-label="labels.queue">
+  <section class="main with-background component-queue" :aria-label="labels.queue">
     <div :class="['ui vertical stripe queue segment', playerFocused ? 'player-focused' : '']">
       <div class="ui fluid container">
         <div class="ui stackable grid" id="queue-grid">
@@ -55,7 +55,7 @@
                   <div class="progress-area" v-if="currentTrack && !errored">
                     <div
                       ref="progress"
-                      :class="['ui', 'small', 'orange', {'indicating': isLoadingAudio}, 'progress']"
+                      :class="['ui', 'small', 'vibrant', {'indicating': isLoadingAudio}, 'progress']"
                       @click="touchProgress">
                       <div class="buffer bar" :data-percent="bufferProgress" :style="{ 'width': bufferProgress + '%' }"></div>
                       <div class="position bar" :data-percent="progress" :style="{ 'width': progress + '%' }"></div>
@@ -64,7 +64,7 @@
                   <div class="progress-area" v-else>
                     <div
                       ref="progress"
-                      :class="['ui', 'small', 'orange', 'progress']">
+                      :class="['ui', 'small', 'vibrant', 'progress']">
                       <div class="buffer bar"></div>
                       <div class="position bar"></div>
                     </div>
@@ -124,7 +124,7 @@
               </template>
             </div>
           </div>
-          <div class="ui sixteen wide mobile ten wide computer column queue-column">
+          <div class="ui ten wide column queue-column">
             <div class="ui basic clearing fixed-header segment">
               <h2 class="ui header">
                 <div class="content">
@@ -155,7 +155,7 @@
                   :key="index"
                   :class="['queue-item', {'active': index === queue.currentIndex}]">
                   <td class="handle">
-                    <i class="grip lines grey icon"></i>
+                    <i class="grip lines icon"></i>
                   </td>
                   <td class="image-cell" @click="$store.dispatch('queue/currentIndex', index)">
                     <img class="ui mini image" v-if="track.album && track.album.cover && track.album.cover.original" :src="$store.getters['instance/absoluteUrl'](track.album.cover.square_crop)">
@@ -374,204 +374,3 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-@import "../style/vendor/media";
-
-.main {
-  position: absolute;
-  min-height: 100vh;
-  width: 100vw;
-  z-index: 1000;
-  padding-bottom: 3em;
-}
-.main > .button {
-  position: fixed;
-  top: 1em;
-  right: 1em;
-  z-index: 9999999;
-  @include media("<desktop") {
-    display: none;
-  }
-}
-.queue.segment:not(.player-focused) {
-  #player {
-    @include media("<desktop") {
-      height: 0;
-      display: none;
-    }
-  }
-}
-.queue.segment #player {
-  padding: 0em;
-  > * {
-    padding: 0.5em;
-  }
-}
-.player-focused .grid > .ui.queue-column {
-  @include media("<desktop") {
-    display: none;
-  }
-}
-.queue-column {
-  overflow-y: auto;
-}
-.queue-column .table {
-  margin-top: 4em !important;
-  margin-bottom: 4rem;
-}
-.ui.table > tbody > tr > td.controls {
-  text-align: right;
-}
-.ui.table > tbody > tr > td {
-  border: none;
-}
-td:first-child {
-  padding-left: 1em !important;
-}
-td:last-child {
-  padding-right: 1em !important;
-}
-.image-cell {
-  width: 4em;
-}
-.queue.segment {
-  @include media("<desktop") {
-    padding: 0;
-  }
-  > .container {
-    margin: 0 !important;
-  }
-}
-.handle {
-  @include media("<desktop") {
-    display: none;
-  }
-}
-.duration-cell {
-  @include media("<tablet") {
-    display: none;
-  }
-}
-.fixed-header {
-  position: fixed;
-  right: 0;
-  left: 0;
-  top: 0;
-  z-index: 9;
-  @include media("<desktop") {
-    padding: 1em;
-  }
-  @include media(">desktop") {
-    right: 1em;
-    left: 38%;
-  }
-  .header .content {
-    display: block;
-  }
-}
-.current-track #player {
-  font-size: 1.8em;
-  padding: 1em;
-  text-align: center;
-  display: flex;
-  position: fixed;
-  height: 100vh;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  bottom: 0;
-  top: 0;
-  width: 32%;
-  @include media("<desktop") {
-    padding: 0.5em;
-    font-size: 1.5em;
-    width: 100%;
-    width: 100vw;
-    left: 0;
-    right: 0;
-    > .image {
-      max-height: 50vh;
-    }
-  }
-  > *:not(.image) {
-    width: 100%;
-  }
-  h1 {
-    margin: 0;
-    min-height: auto;
-  }
-}
-.progress-area {
-  overflow: hidden;
-}
-.progress-wrapper, .warning.message {
-  max-width: 25em;
-  margin: 0 auto;
-}
-.ui.progress .buffer.bar {
-  position: absolute;
-  background-color: rgba(255, 255, 255, 0.15);
-}
-.ui.progress:not([data-percent]):not(.indeterminate)
-  .bar.position:not(.buffer) {
-  background: #ff851b;
-}
-
-.indicating.progress .bar {
-  left: -46px;
-  width: 200% !important;
-  color: grey;
-  background: repeating-linear-gradient(
-    -55deg,
-    grey 1px,
-    grey 10px,
-    transparent 10px,
-    transparent 20px
-  ) !important;
-
-  animation-name: MOVE-BG;
-  animation-duration: 2s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-}
-.ui.progress {
-  margin: 0.5rem 0;
-}
-.timer {
-  font-size: 0.7em;
-}
-.progress {
-  cursor: pointer;
-  .bar {
-    min-width: 0 !important;
-  }
-}
-
-.player-controls {
-  .control:not(:first-child) {
-    margin-left: 1em;
-  }
-  .icon {
-    font-size: 1.1em;
-  }
-}
-
-.handle {
-  cursor: grab;
-}
-.sortable-chosen {
-  cursor: grabbing;
-}
-.queue-item.sortable-ghost {
-  td {
-    border-top: 3px dashed rgba(0, 0, 0, 0.15) !important;
-    border-bottom: 3px dashed rgba(0, 0, 0, 0.15) !important;
-    &:first-child {
-      border-left: 3px dashed rgba(0, 0, 0, 0.15) !important;
-    }
-    &:last-child {
-      border-right: 3px dashed rgba(0, 0, 0, 0.15) !important;
-    }
-  }
-}
-</style>

front/src/components/SetInstanceModal.vue

@@ -142,6 +142,3 @@ export default {
   },
 }
 </script>
-
-<style scoped>
-</style>

front/src/components/ShortcutsModal.vue

@@ -157,7 +157,3 @@ export default {
   }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>