Modifying css and components to look like Utmstack

frontend/public/img/logo.svg

@@ -1,147 +1,31 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg viewBox="0 0 500 650" xmlns="http://www.w3.org/2000/svg">
-<svg
+  <defs>
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
+    <style>.cls-1 {
-   xmlns:cc="http://creativecommons.org/ns#"
+      fill: #00669a;
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+    }
-   xmlns:svg="http://www.w3.org/2000/svg"
+
-   xmlns="http://www.w3.org/2000/svg"
+    .cls-2 {
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+      fill: #86b2cd;
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+    }
-   xml:space="preserve"
+
-   width="560"
+    .cls-3 {
-   height="560"
+      fill: #b6d1df;
-   version="1.1"
+    }</style>
-   style="clip-rule:evenodd;fill-rule:evenodd;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision"
-   viewBox="0 0 560 560"
-   id="svg44"
-   sodipodi:docname="icon_raw.svg"
-   inkscape:version="0.92.3 (2405546, 2018-03-11)"
-   inkscape:export-filename="/home/umarcor/filebrowser/logo/icon_raw.svg.png"
-   inkscape:export-xdpi="96"
-   inkscape:export-ydpi="96"><metadata
-   id="metadata48"><rdf:RDF><cc:Work
-       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><sodipodi:namedview
-   pagecolor="#ffffff"
-   bordercolor="#666666"
-   borderopacity="1"
-   objecttolerance="10"
-   gridtolerance="10"
-   guidetolerance="10"
-   inkscape:pageopacity="0"
-   inkscape:pageshadow="2"
-   inkscape:window-width="1366"
-   inkscape:window-height="711"
-   id="namedview46"
-   showgrid="false"
-   inkscape:zoom="0.33714286"
-   inkscape:cx="-172.33051"
-   inkscape:cy="280"
-   inkscape:window-x="0"
-   inkscape:window-y="20"
-   inkscape:window-maximized="1"
-   inkscape:current-layer="svg44" />
-  <defs
-   id="defs4">
-    <style
-   type="text/css"
-   id="style2">
-      <![CDATA[
-       .fil1 {fill:#FEFEFE}
-       .fil6 {fill:#006498}
-       .fil7 {fill:#0EA5EB}
-       .fil8 {fill:#2979FF}
-       .fil3 {fill:#2BBCFF}
-       .fil0 {fill:#455A64}
-       .fil4 {fill:#53C6FC}
-       .fil5 {fill:#BDEAFF}
-       .fil2 {fill:#332C2B;fill-opacity:0.149020}
-      ]]>
-    </style>
   </defs>
-  <g
+  <g data-name="Capa 4" id="Capa_4">
-   id="g85"
+    <polyline class="cls-1"
-   transform="translate(-70,-70)"><path
+              points="464.1 519.51 354.86 456.2 245.08 392.59 136.38 329.62 27.73 266.65 26.06 265.66 26.06 140.31 26.4 140.12 136.43 203.87 245.08 266.79 464.1 393.74 464.1 519.51"/>
-     class="fil1"
+    <polygon class="cls-1"
-     d="M 350,71 C 504,71 629,196 629,350 629,504 504,629 350,629 196,629 71,504 71,350 71,196 196,71 350,71 Z"
+             points="354.04 583.07 245.1 646.04 135.76 582.78 134.78 582.19 26.07 519.22 47.29 506.99 47.34 506.99 68.61 494.76 135.41 456.35 202.17 494.85 245.1 519.61 354.04 583.07"/>
-     id="path9"
+    <polygon class="cls-2"
-     inkscape:connector-curvature="0"
+             points="473.98 155.29 364.39 218.51 364.19 218.41 255.54 155.44 254.9 155.1 276.17 142.82 364.19 193.85 364.39 193.95 452.75 142.97 473.73 155.15 473.98 155.29"/>
-     style="fill:#fefefe" /><path
+    <polygon class="cls-3"
-     class="fil2"
+             points="473.98 179.85 364.39 243.07 364.19 242.97 255.54 180 254.9 179.66 276.17 167.38 364.19 218.41 364.39 218.51 452.75 167.52 473.73 179.71 473.98 179.85"/>
-     d="M 475,236 593,387 C 596,503 444,639 301,585 L 225,486 339,330 c 0,0 138,-95 136,-94 z"
+    <polygon class="cls-1"
-     id="path11"
+             points="473.99 130.73 452.77 142.97 364.41 193.95 364.21 193.85 276.19 142.82 255.56 130.88 254.92 130.54 145.53 67.17 254.92 3.96 365.05 67.62 452.77 118.41 473.75 130.59 473.99 130.73"/>
-     inkscape:connector-curvature="0"
+    <polygon class="cls-2"
-     style="fill:#332c2b;fill-opacity:0.14902003" /><path
+             points="245.08 495.05 223.62 507.23 202.15 494.85 135.4 456.35 68.59 494.76 47.33 506.99 47.28 506.99 26.01 494.66 47.28 482.43 135.4 431.79 223.62 482.67 245.08 495.05"/>
-     class="fil3"
+    <polygon class="cls-3"
-     d="m 231,211 h 208 l 38,24 v 246 c 0,5 -3,8 -8,8 H 231 c -5,0 -8,-3 -8,-8 V 219 c 0,-5 3,-8 8,-8 z"
+             points="245.08 470.49 223.62 482.67 135.4 431.79 47.28 482.43 26.01 470.1 135.4 407.23 245.08 470.49"/>
-     id="path13"
+  </g>
-     inkscape:connector-curvature="0"
-     style="fill:#2bbcff" /><path
-     class="fil4"
-     d="m 231,211 h 208 l 38,24 v 2 L 440,214 H 231 c -4,0 -7,3 -7,7 v 263 c -1,-1 -1,-2 -1,-3 V 219 c 0,-5 3,-8 8,-8 z"
-     id="path15"
-     inkscape:connector-curvature="0"
-     style="fill:#53c6fc" /><polygon
-     class="fil5"
-     points="305,212 418,212 418,310 305,310 "
-     id="polygon17"
-     style="fill:#bdeaff" /><path
-     class="fil5"
-     d="m 255,363 h 189 c 3,0 5,2 5,4 V 483 H 250 V 367 c 0,-2 2,-4 5,-4 z"
-     id="path19"
-     inkscape:connector-curvature="0"
-     style="fill:#bdeaff" /><polygon
-     class="fil6"
-     points="250,470 449,470 449,483 250,483 "
-     id="polygon21"
-     style="fill:#006498" /><path
-     class="fil6"
-     d="m 380,226 h 10 c 3,0 6,2 6,5 v 40 c 0,3 -3,6 -6,6 h -10 c -3,0 -6,-3 -6,-6 v -40 c 0,-3 3,-5 6,-5 z"
-     id="path23"
-     inkscape:connector-curvature="0"
-     style="fill:#006498" /><path
-     class="fil1"
-     d="m 254,226 c 10,0 17,7 17,17 0,9 -7,16 -17,16 -9,0 -17,-7 -17,-16 0,-10 8,-17 17,-17 z"
-     id="path25"
-     inkscape:connector-curvature="0"
-     style="fill:#fefefe" /><path
-     class="fil6"
-     d="m 267,448 h 165 c 2,0 3,1 3,3 v 0 c 0,1 -1,3 -3,3 H 267 c -2,0 -3,-2 -3,-3 v 0 c 0,-2 1,-3 3,-3 z"
-     id="path27"
-     inkscape:connector-curvature="0"
-     style="fill:#006498" /><path
-     class="fil6"
-     d="m 267,415 h 165 c 2,0 3,1 3,3 v 0 c 0,1 -1,2 -3,2 H 267 c -2,0 -3,-1 -3,-2 v 0 c 0,-2 1,-3 3,-3 z"
-     id="path29"
-     inkscape:connector-curvature="0"
-     style="fill:#006498" /><path
-     class="fil6"
-     d="m 267,381 h 165 c 2,0 3,2 3,3 v 0 c 0,2 -1,3 -3,3 H 267 c -2,0 -3,-1 -3,-3 v 0 c 0,-1 1,-3 3,-3 z"
-     id="path31"
-     inkscape:connector-curvature="0"
-     style="fill:#006498" /><path
-     class="fil1"
-     d="m 236,472 c 3,0 5,2 5,5 0,2 -2,4 -5,4 -3,0 -5,-2 -5,-4 0,-3 2,-5 5,-5 z"
-     id="path33"
-     inkscape:connector-curvature="0"
-     style="fill:#fefefe" /><path
-     class="fil1"
-     d="m 463,472 c 3,0 5,2 5,5 0,2 -2,4 -5,4 -3,0 -5,-2 -5,-4 0,-3 2,-5 5,-5 z"
-     id="path35"
-     inkscape:connector-curvature="0"
-     style="fill:#fefefe" /><polygon
-     class="fil6"
-     points="305,212 284,212 284,310 305,310 "
-     id="polygon37"
-     style="fill:#006498" /><path
-     class="fil7"
-     d="m 477,479 v 2 c 0,5 -3,8 -8,8 H 231 c -5,0 -8,-3 -8,-8 v -2 c 0,4 3,8 8,8 h 238 c 5,0 8,-4 8,-8 z"
-     id="path39"
-     inkscape:connector-curvature="0"
-     style="fill:#0ea5eb" /><path
-     class="fil8"
-     d="M 350,70 C 505,70 630,195 630,350 630,505 505,630 350,630 195,630 70,505 70,350 70,195 195,70 350,70 Z m 0,46 C 479,116 584,221 584,350 584,479 479,584 350,584 221,584 116,479 116,350 116,221 221,116 350,116 Z"
-     id="path41"
-     inkscape:connector-curvature="0"
-     style="fill:#2979ff" /></g>
 </svg>

frontend/src/components/Search.vue

@@ -1,6 +1,16 @@
 <template>
   <div id="search" @click="open" v-bind:class="{ active, ongoing }">
     <div id="input">
+      <input
+        type="text"
+        @keyup.exact="keyup"
+        @keyup.enter="submit"
+        ref="input"
+        :autofocus="active"
+        v-model.trim="value"
+        :aria-label="$t('search.pressToSearch')"
+        :placeholder="$t('search.pressToSearch')"
+      />
       <button
         v-if="active"
         class="action"
@@ -11,39 +21,16 @@
         <i class="material-icons">arrow_back</i>
       </button>
       <i v-else class="material-icons">search</i>
-      <input
-        type="text"
-        @keyup.exact="keyup"
-        @keyup.enter="submit"
-        ref="input"
-        :autofocus="active"
-        v-model.trim="value"
-        :aria-label="$t('search.search')"
-        :placeholder="$t('search.search')"
-      />
     </div>
 
     <div id="result" ref="result">
       <div>
         <template v-if="isEmpty">
-          <p>{{ text }}</p>
-
           <template v-if="value.length === 0">
-            <div class="boxes">
+            <div class="valign-wrapper" style="padding: 45%">
-              <h3>{{ $t("search.types") }}</h3>
+              <i class="material-icons" style="font-size: 8em !important"
-              <div>
+                >toc</i
-                <div
-                  tabindex="0"
-                  v-for="(v, k) in boxes"
-                  :key="k"
-                  role="button"
-                  @click="init('type:' + k)"
-                  :aria-label="$t('search.' + v.label)"
               >
-                  <i class="material-icons">{{ v.icon }}</i>
-                  <p>{{ $t("search." + v.label) }}</p>
-                </div>
-              </div>
             </div>
           </template>
         </template>
@@ -58,14 +45,16 @@
         </ul>
       </div>
       <p id="renew">
-        <i class="material-icons spin">autorenew</i>
+        <i class="material-icons spin" style="font-size: 8em !important"
+          >autorenew</i
+        >
       </p>
     </div>
   </div>
 </template>
 
 <script>
-import { mapState, mapGetters, mapMutations } from "vuex";
+import { mapGetters, mapMutations, mapState } from "vuex";
 import url from "@/utils/url";
 import { search } from "@/api";
 

frontend/src/components/Sidebar.vue

@@ -33,82 +33,14 @@
         </button>
       </div>
 
-      <div>
-        <router-link
-          class="action"
-          to="/settings"
-          :aria-label="$t('sidebar.settings')"
-          :title="$t('sidebar.settings')"
-        >
-          <i class="material-icons">settings_applications</i>
-          <span>{{ $t("sidebar.settings") }}</span>
-        </router-link>
-
-        <button
-          v-if="authMethod == 'json'"
-          @click="logout"
-          class="action"
-          id="logout"
-          :aria-label="$t('sidebar.logout')"
-          :title="$t('sidebar.logout')"
-        >
-          <i class="material-icons">exit_to_app</i>
-          <span>{{ $t("sidebar.logout") }}</span>
-        </button>
-      </div>
     </template>
-    <template v-else>
-      <router-link
-        class="action"
-        to="/login"
-        :aria-label="$t('sidebar.login')"
-        :title="$t('sidebar.login')"
-      >
-        <i class="material-icons">exit_to_app</i>
-        <span>{{ $t("sidebar.login") }}</span>
-      </router-link>
-
-      <router-link
-        v-if="signup"
-        class="action"
-        to="/login"
-        :aria-label="$t('sidebar.signup')"
-        :title="$t('sidebar.signup')"
-      >
-        <i class="material-icons">person_add</i>
-        <span>{{ $t("sidebar.signup") }}</span>
-      </router-link>
-    </template>
-
-    <p class="credits">
-      <span>
-        <span v-if="disableExternal">File Browser</span>
-        <a
-          v-else
-          rel="noopener noreferrer"
-          target="_blank"
-          href="https://github.com/filebrowser/filebrowser"
-          >File Browser</a
-        >
-        <span> {{ version }}</span>
-      </span>
-      <span
-        ><a @click="help">{{ $t("sidebar.help") }}</a></span
-      >
-    </p>
   </nav>
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import * as auth from "@/utils/auth";
-import {
+import { authMethod, disableExternal, noAuth, signup, version } from "@/utils/constants";
-  version,
-  signup,
-  disableExternal,
-  noAuth,
-  authMethod,
-} from "@/utils/constants";
 
 export default {
   name: "sidebar",

frontend/src/components/files/ListingItem.vue

@@ -23,9 +23,8 @@
     <div>
       <p class="name">{{ name }}</p>
 
-      <p v-if="isDir" class="size" data-order="-1">&mdash;</p>
+      <p v-if="isDir" class="size" data-order="-1"></p>
       <p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
-
       <p class="modified">
         <time :datetime="modified">{{ humanTime() }}</time>
       </p>

frontend/src/components/header/HeaderBar.vue

@@ -1,6 +1,5 @@
 <template>
   <header>
-    <img v-if="showLogo !== undefined" :src="logoURL" />
     <action
       v-if="showMenu !== undefined"
       class="menu-button"

frontend/src/css/_variables.css

@@ -1,7 +1,7 @@
 :root {
-  --blue: #2196f3;
+  --blue: #1976D2;
-  --dark-blue: #1E88E5;
+  --dark-blue: #1565C0;
-  --red: #F44336;
+  --red: #D32F2F;
-  --dark-red: #D32F2F;
+  --dark-red:#C62828;
   --moon-grey: #f2f2f2;
 }

frontend/src/css/base.css

@@ -1,8 +1,13 @@
 body {
-  font-family: 'Roboto', sans-serif;
+  overflow-x: hidden;
-  padding-top: 4em;
+  color: #333;
-  background-color: #fafafa;
+  text-align: left;
-  color: #333333;
+  background-color: #f5f5f5;
+  margin: 0;
+  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 13px;
+  font-weight: 300 !important;
+  line-height: 1.5385;
 }
 
 * {
@@ -54,19 +59,21 @@ i.spin {
 nav {
   width: 16em;
   position: fixed;
-  top: 4em;
+  top: 5em;
-  left: 0;
+  left: 13px;
+  bottom: 0;
+  background: white;
+  border: 0 solid rgba(0, 0, 0, .125);
 }
 
 nav .action {
-  width: 100%;
+  background: #fff;
-  display: block;
+  border: 0;
-  border-radius: 0;
+  color: #232f3e;
-  font-size: 1.1em;
+  text-decoration: none;
-  padding: .5em;
+  position: relative;
-  white-space: nowrap;
+  padding: 5px 15px;
-  overflow: hidden;
+  font-size: 13px;
-  text-overflow: ellipsis;
 }
 
 nav>div {
@@ -86,6 +93,7 @@ main {
 .breadcrumbs {
   height: 3em;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  margin-top: 4rem;
 }
 
 .breadcrumbs span,

frontend/src/css/dashboard.css

@@ -32,7 +32,7 @@ a {
   margin-bottom: .2em;
   display: block;
   font-size: .8em;
-  font-weight: 500;
+  font-weight: 300;
   color: rgba(0, 0, 0, 0.57);
 }
 
@@ -64,7 +64,7 @@ p code {
   list-style: none;
   display: flex;
   color: rgb(84, 110, 122);
-  font-weight: 500;
+  font-weight: 300;
   padding: 0;
   margin: 0 0 -2px 0;
   font-size: .8em;
@@ -120,7 +120,7 @@ table tr:last-child {
 }
 
 table th {
-  font-weight: 500;
+  font-weight: 300;
   color: #757575;
   text-align: left;
 }
@@ -207,13 +207,13 @@ table tr>*:last-child {
 }
 
 .card h2 {
-  font-weight: 500;
+  font-weight: 300;
 }
 
 .card h3 {
   color: rgba(0, 0, 0, 0.53);
   font-size: 1em;
-  font-weight: 500;
+  font-weight: 300;
   margin: 2em 0 1em;
 }
 
@@ -460,5 +460,5 @@ table tr>*:last-child {
 
 .card .card-action.full .action .title {
   font-size: 1.5em;
-  font-weight: 500;
+  font-weight: 300;
 }

frontend/src/css/fonts.css

@@ -1,7 +1,7 @@
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
-  font-weight: 400;
+  font-weight: 300;
   src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-cyrillic-ext.woff2) format('woff2');
   unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
 }
@@ -9,161 +9,9 @@
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
-  font-weight: 400;
+  font-weight: 300;
   src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-cyrillic.woff2) format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-greek-ext.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-greek.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-vietnamese.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-latin-ext.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-latin.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-cyrillic-ext.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-cyrillic.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-greek-ext.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-greek.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-vietnamese.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-latin-ext.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-latin.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(../assets/fonts/roboto/bold-cyrillic-ext.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(../assets/fonts/roboto/bold-cyrillic.woff2) format('woff2');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(../assets/fonts/roboto/bold-greek-ext.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(../assets/fonts/roboto/bold-greek.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(../assets/fonts/roboto/bold-vietnamese.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(../assets/fonts/roboto/bold-latin-ext.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(../assets/fonts/roboto/bold-latin.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-
 @import "~material-design-icons/iconfont/material-icons.css";

frontend/src/css/header.css

@@ -84,8 +84,8 @@ header .menu-button {
 #search #input {
   background-color: #f5f5f5;
   display: flex;
-  padding: 0.75em;
+  padding: 0.5em;
-  border-radius: 0.3em;
+  border-radius: 0;
   transition: .1s ease all;
   align-items: center;
   z-index: 2;
@@ -140,7 +140,7 @@ header .menu-button {
 
 #search.active #result {
   padding: .5em;
-  height: calc(100% - 4em);
+  height: calc(100% - 0);
 }
 
 #search ul {
@@ -217,7 +217,7 @@ header .menu-button {
 
 #search .boxes h3 {
   margin: 0;
-  font-weight: 500;
+  font-weight: 300;
   font-size: 1em;
   color: #212121;
   padding: .5em;

frontend/src/css/listing.css

@@ -2,7 +2,7 @@
   margin: 0 0 0 0.5em;
   font-size: .9em;
   color: rgba(0, 0, 0, 0.38);
-  font-weight: 500;
+  font-weight: 300;
 }
 
 #listing .item div:last-of-type * {
@@ -40,22 +40,23 @@
 
 #listing .item .size,
 #listing .item .modified {
-  font-size: 0.9em;
+  font-size: 12px;
+  color: #6f6f6f;
 }
 
 #listing .item .name {
-  font-weight: bold;
+  font-weight: 300;
 }
 
 #listing .item i {
-  font-size: 4em;
+  font-size: 25px;
   margin-right: 0.1em;
   vertical-align: bottom;
 }
 
 #listing .item img {
-  width: 4em;
+  width: 25px;
-  height: 4em;
+  height: 25px;
   object-fit: cover;
   margin-right: 0.1em;
   vertical-align: bottom;
@@ -68,7 +69,7 @@
   display: block !important;
   width: 95%;
   color: rgba(0, 0, 0, 0.3);
-  font-weight: 500;
+  font-weight: 300;
 }
 
 .message i {
@@ -86,7 +87,7 @@
   width: calc(33% - 1em);
   margin: .5em;
   padding: 0.5em;
-  border-radius: 0.2em;
+  border-radius: 0;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
 }
 
@@ -99,7 +100,7 @@
 }
 
 #listing.mosaic .item div:first-of-type {
-  width: 5em;
+  width: 3em;
 }
 
 #listing.mosaic .item div:last-of-type {
@@ -111,13 +112,14 @@
   width: 100%;
   max-width: 100%;
   margin: 0;
+  margin-top: 64px;
 }
 
 #listing.list .item {
   width: 100%;
   margin: 0;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 1em;
+  padding: 0.2em;
   border-top: 0;
 }
 
@@ -166,13 +168,14 @@
   font-size: 1.5em;
   vertical-align: middle;
   margin-left: .2em;
+  margin-right: .2em;
 }
 
 #listing.list .item.header {
   display: flex !important;
-  background: #fafafa;
+  background: white;
   z-index: 999;
-  padding: .85em;
+  padding: .5em;
   border: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
@@ -194,7 +197,7 @@
 }
 
 #listing.list .name {
-  font-weight: normal;
+  font-weight: 300;
 }
 
 #listing.list .item.header .name {
@@ -216,7 +219,7 @@
 }
 
 #listing.list .item.header .active {
-  font-weight: bold;
+  font-weight: 300;
 }
 
 #listing #multiple-selection {
@@ -240,3 +243,9 @@
 #listing #multiple-selection i {
   color: #fff;
 }
+
+
+/*OVERRIDE CSS*/
+#listing .item[aria-selected=true] .modified, #listing .item .size {
+  color: #fff !important;
+}

frontend/src/css/login.css

@@ -59,7 +59,7 @@
   text-align: right;
   color: var(--blue);
   text-transform: lowercase;
-  font-weight: 500;
+  font-weight: 300;
   font-size: 0.9rem;
   margin: .5rem 0;
 }

frontend/src/css/styles.css

@@ -85,19 +85,20 @@ main .spinner .bounce2 {
 }
 
 .action i {
-  padding: 0.4em;
+  padding: 0.25em;
   transition: .1s ease-in-out all;
-  border-radius: 50%;
+  border-radius: 0;
+  font-size: 14px;
 }
 
 .action:hover {
-  background-color: rgba(0, 0, 0, .1);
+  color: #0277bd;
 }
 
 .action ul {
   position: absolute;
   top: 0;
-  color: #7d7d7d;
+  color: #f5f5f5;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -142,7 +143,7 @@ main .spinner .bounce2 {
   height: 1.8em;
   text-align: center;
   line-height: 1.55em;
-  font-weight: bold;
+  font-weight: 300;
   border: 2px solid white;
 }
 
@@ -371,3 +372,55 @@ main .spinner .bounce2 {
 }
 
 @import './mobile.css';
+
+
+input, .card {
+  border-radius: 0 !important;
+}
+
+#input {
+  font-size: 12px !important;
+  border-radius: 0;
+  height: 36px !important;
+  background-color: white;
+}
+
+i {
+  font-size: 16px !important;
+  color: #232f3e !important;
+}
+
+
+/* width */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+/* Track */
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #888;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 0;
+  box-shadow: inset 0 0 0 transparent;
+  background: #e8e8e8;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 0;
+  box-shadow: inset 0 0 0 transparent;;
+}
+
+.scroll-0 {
+  overflow-y: hidden !important;
+}

frontend/src/i18n/en.json

@@ -130,9 +130,9 @@
     "move": "Move",
     "moveMessage": "Choose new house for your file(s)/folder(s):",
     "newArchetype": "Create a new post based on an archetype. Your file will be created on content folder.",
-    "newDir": "New directory",
+    "newDir": "New rule directory",
     "newDirMessage": "Write the name of the new directory.",
-    "newFile": "New file",
+    "newFile": "New rule file",
     "newFileMessage": "Write the name of the new file.",
     "numberDirs": "Number of directories",
     "numberFiles": "Number of files",
@@ -239,7 +239,7 @@
     "hugoNew": "Hugo New",
     "login": "Login",
     "logout": "Logout",
-    "myFiles": "My files",
+    "myFiles": "Rules",
     "newFile": "New file",
     "newFolder": "New folder",
     "preview": "Preview",

frontend/src/router/index.js

@@ -50,53 +50,6 @@ const router = new Router({
             requiresAuth: true,
           },
         },
-        {
-          path: "/settings",
-          name: "Settings",
-          component: Settings,
-          redirect: {
-            path: "/settings/profile",
-          },
-          meta: {
-            requiresAuth: true,
-          },
-          children: [
-            {
-              path: "/settings/profile",
-              name: "Profile Settings",
-              component: ProfileSettings,
-            },
-            {
-              path: "/settings/shares",
-              name: "Shares",
-              component: Shares,
-            },
-            {
-              path: "/settings/global",
-              name: "Global Settings",
-              component: GlobalSettings,
-              meta: {
-                requiresAdmin: true,
-              },
-            },
-            {
-              path: "/settings/users",
-              name: "Users",
-              component: Users,
-              meta: {
-                requiresAdmin: true,
-              },
-            },
-            {
-              path: "/settings/users/*",
-              name: "User",
-              component: User,
-              meta: {
-                requiresAdmin: true,
-              },
-            },
-          ],
-        },
         {
           path: "/403",
           name: "Forbidden",

frontend/src/views/Files.vue

@@ -1,9 +1,6 @@
 <template>
   <div>
     <header-bar v-if="error || req.type == null" showMenu showLogo />
-
-    <breadcrumbs base="/files" />
-
     <errors v-if="error" :errorCode="error.message" />
     <component v-else-if="currentView" :is="currentView"></component>
     <div v-else>

frontend/src/views/files/Editor.vue

@@ -14,9 +14,6 @@
         />
       </template>
     </header-bar>
-
-    <breadcrumbs base="/files" noLink />
-
     <form id="editor"></form>
   </div>
 </template>