New theming system

front/src/components/Sidebar.vue

@@ -1,8 +1,8 @@
 <template>
-<aside :class="['ui', 'vertical', 'left', 'visible', 'wide', {'collapsed': isCollapsed}, 'sidebar',]">
+<aside :class="['ui', 'vertical', 'left', 'visible', 'wide', {'collapsed': isCollapsed}, 'sidebar', 'component-sidebar']">
   <header class="ui basic segment header-wrapper">
     <router-link :title="'Funkwhale'" :to="{name: logoUrl}">
-      <i class="logo bordered inverted orange big icon">
+      <i class="logo bordered inverted vibrant big icon">
         <logo class="logo"></logo>
       </i>
     </router-link>
@@ -88,7 +88,7 @@
 
         <span
           @click="isCollapsed = !isCollapsed"
-          :class="['ui', 'basic', 'big', {'orange': !isCollapsed}, 'inverted icon', 'collapse', 'button']">
+          :class="['ui', 'basic', 'big', {'vibrant': !isCollapsed}, 'inverted icon', 'collapse', 'button']">
             <i class="sidebar icon"></i></span>
       </div>
     </nav>
@@ -343,239 +343,3 @@ export default {
   }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import "../style/vendor/media";
-
-$sidebar-color: #2D2F33;
-
-.sidebar {
-  background: $sidebar-color;
-  z-index: 1;
-  @include media(">desktop") {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    padding-bottom: 4em;
-  }
-  > nav {
-    flex-grow: 1;
-    overflow-y: auto;
-  }
-  @include media(">desktop") {
-    .menu .item.collapse-button-wrapper {
-      padding: 0;
-    }
-    .collapse.button {
-      display: none !important;
-    }
-  }
-  @include media("<=desktop") {
-    position: static !important;
-    width: 100% !important;
-    &.collapsed {
-      .player-wrapper,
-      .search,
-      .signup.segment,
-      nav.secondary {
-        display: none;
-      }
-    }
-  }
-
-  > div {
-    margin: 0;
-    background-color: $sidebar-color;
-  }
-  .menu.vertical {
-    background: $sidebar-color;
-  }
-}
-
-.ui.vertical.menu {
-  .item .item {
-    font-size: 1em;
-    > i.icon {
-      float: none;
-      margin: 0 0.5em 0 0;
-    }
-    &:not(.active) {
-      // color: rgba(255, 255, 255, 0.75);
-    }
-  }
-  .item.active {
-    border-right: 5px solid #F2711C;
-    border-radius: 0 !important;
-    background-color: rgba(255, 255, 255, 0.15) !important;
-  }
-  .item.collapsed {
-    &:not(:focus) > .menu {
-      display: none;
-    }
-    .header {
-      margin-bottom: 0;
-    }
-  }
-  .collaspable.item .header {
-    cursor: pointer;
-  }
-}
-.ui.secondary.menu {
-  margin-left: 0;
-  margin-right: 0;
-}
-.tabs {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  justify-content: space-between;
-  @include media("<=desktop") {
-    max-height: 500px;
-  }
-}
-.ui.tab.active {
-  display: flex;
-}
-.tab[data-tab="queue"] {
-  flex-direction: column;
-  tr {
-    cursor: pointer;
-  }
-  td:nth-child(2) {
-    width: 55px;
-  }
-}
-.item .header .angle.icon {
-  float: right;
-  margin: 0;
-}
-.tab[data-tab="library"] {
-  flex-direction: column;
-  flex: 1 1 auto;
-  > .menu {
-    flex: 1;
-    flex-grow: 1;
-  }
-  > .player-wrapper {
-    width: 100%;
-  }
-}
-.sidebar .segment {
-  margin: 0;
-  border-radius: 0;
-}
-
-.ui.menu .item.inline.admin-dropdown.dropdown > .menu {
-  left: 0;
-  right: auto;
-}
-.ui.segment.header-wrapper {
-  padding: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 4em;
-  nav {
-    > .item, > .menu > .item > .item {
-      &:hover {
-        background-color: transparent;
-      }
-    }
-  }
-}
-
-nav.top.title-menu {
-  flex-grow: 1;
-  .item {
-    font-size: 1.5em;
-  }
-}
-
-.logo {
-  cursor: pointer;
-  display: inline-block;
-  margin: 0px;
-}
-
-.collapsed .search-wrapper {
-  @include media("<desktop") {
-    padding: 0;
-  }
-}
-.ui.search {
-  display: flex;
-}
-.ui.message.black {
-  background: $sidebar-color;
-}
-
-.ui.mini.image {
-  width: 100%;
-}
-nav.top {
-  align-items: self-end;
-  padding: 0.5em 0;
-  > .item, > .right.menu > .item {
-    // color: rgba(255, 255, 255, 0.9) !important;
-    font-size: 1.2em;
-    &:hover, > .dropdown > .icon {
-      // color: rgba(255, 255, 255, 0.9) !important;
-    }
-    > .label, > .dropdown > .label {
-      font-size: 0.5em;
-      right: 1.7em;
-      bottom: -0.5em;
-      z-index: 0 !important;
-    }
-  }
-}
-.ui.user-dropdown > .text > .label {
-  margin-right: 0;
-}
-.logo-wrapper {
-  display: inline-block;
-  margin: 0 auto;
-  @include media("<desktop") {
-    margin: 0;
-  }
-  img {
-    height: 1em;
-    display: inline-block;
-    margin: 0 auto;
-  }
-  @include media(">tablet") {
-    img {
-      height: 1.5em;
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-aside.ui.sidebar {
-  overflow-y: visible !important;
-  .ui.search .input {
-    flex: 1;
-    .prompt {
-      border-radius: 0;
-    }
-  }
-  .ui.search .results {
-    vertical-align: middle;
-  }
-  .ui.search .name {
-    vertical-align: middle;
-  }
-}
-.ui.tiny.avatar.image {
-  position: relative;
-  top: -0.5em;
-  width: 3em;
-}
-
-:not(.active) button.title {
-  outline-color: white;
-}
-</style>