Build system integration using vue-cli.

[github/bastienwirtz/homer.git] / src / assets / app.scss

diff --git a/src/assets/app.scss b/src/assets/app.scss
new file mode 100644 (file)
index 0000000..4b69864
--- /dev/null
+++ b/src/assets/app.scss
@@ -0,0 +1,336 @@
+@charset "utf-8";
+
+@import url("//fonts.googleapis.com/css?family=Lato:400,700|Pacifico|Raleway&display=swap");
+@import "bulma";
+
+// Themes import
+@import "./themes/sui.scss";
+
+@mixin ellipsis() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  font-family: "Raleway", sans-serif;
+  height: 100%;
+
+  #app {
+    min-height: 100%;
+    background-color: var(--background);
+    color: var(--text);
+    transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+
+    a {
+      &:hover {
+        color: var(--link-hover);
+      }
+    }
+
+    .title {
+      color: var(--text-title);
+    }
+    .subtitle {
+      color: var(--text-subtitle);
+    }
+
+    .card {
+      background-color: var(--card-background);
+      box-shadow: 0 2px 15px 0 var(--card-shadow);
+      &:hover {
+        background-color: var(--card-background);
+      }
+    }
+
+    .message {
+      background-color: var(--card-background);
+      .message-body {
+        color: var(--text);
+      }
+    }
+
+    .footer {
+      background-color: var(--card-background);
+      box-shadow: 0 2px 15px 0 var(--card-shadow);
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: "Lato", sans-serif;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  h2 {
+    font-size: 1.7rem;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+
+    .fas,
+    .fab,
+    .far {
+      margin-right: 10px;
+    }
+
+    span {
+      font-weight: bold;
+      color: var(--highlight-secondary);
+    }
+  }
+
+  [v-cloak] {
+    display: none;
+  }
+
+  #bighead {
+    color: var(--text-header);
+
+    .dashboard-title {
+      padding: 6px 0 0 80px;
+    }
+
+    .first-line {
+      height: 100px;
+      vertical-align: center;
+      background-color: var(--highlight-primary);
+
+      h1 {
+        margin-top: -12px;
+        font-size: 2rem;
+      }
+
+      .headline {
+        margin-top: 5px;
+        font-size: 0.9rem;
+      }
+
+      .container {
+        height: 80px;
+        padding: 10px 0;
+      }
+
+      .logo {
+        float: left;
+        i {
+          vertical-align: top;
+          padding: 8px 15px;
+          font-size: 50px;
+        }
+
+        img {
+          padding: 10px;
+          max-height: 70px;
+          max-width: 70px;
+        }
+      }
+    }
+    .navbar,
+    .navbar-menu {
+      background-color: var(--highlight-secondary);
+
+      a {
+        color: var(--text-header);
+        padding: 8px 12px;
+        &:hover,
+        &:focus {
+          color: var(--text-header);
+          background-color: var(--highlight-hover);
+        }
+      }
+    }
+    .navbar-end {
+      text-align: right;
+    }
+  }
+
+  #main-section {
+    margin-bottom: 2rem;
+    padding: 0;
+
+    h2 {
+      padding-bottom: 0px;
+      @include ellipsis();
+    }
+
+    .title {
+      font-size: 1.1em;
+      @include ellipsis();
+    }
+
+    .subtitle {
+      font-size: 0.9em;
+      @include ellipsis();
+    }
+
+    .container {
+      padding: 1.2rem 0.75rem;
+    }
+
+    .message {
+      margin-top: 45px;
+      box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
+
+      .message-header {
+        font-weight: bold;
+      }
+
+      .message-body {
+        border: none;
+      }
+    }
+  }
+
+  .media-content {
+    overflow: hidden;
+    text-overflow: inherit;
+  }
+
+  .tag {
+    color: var(--highlight-secondary);
+    background-color: var(--highlight-secondary);
+    position: absolute;
+    top: 1rem;
+    right: -0.2rem;
+    width: 3px;
+    overflow: hidden;
+    transition: all 0.2s ease-out;
+    padding: 0;
+
+    .tag-text {
+      display: none;
+    }
+  }
+
+  .card {
+    border-radius: 5px;
+    border: none;
+    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
+    transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+
+    a {
+      outline: none;
+    }
+  }
+
+  .card:hover {
+    transform: translate(0, -3px);
+
+    .tag {
+      width: auto;
+      color: #ffffff;
+      padding: 0 0.75em;
+
+      .tag-text {
+        display: block;
+      }
+    }
+  }
+
+  .card-content {
+    height: 85px;
+    padding: 1.3rem;
+  }
+
+  .layout-vertical {
+    .card {
+      border-radius: 0;
+    }
+
+    .column div:first-of-type .card {
+      border-radius: 5px 5px 0 0;
+    }
+
+    .column div:last-child .card {
+      border-radius: 0 0 5px 5px;
+    }
+  }
+
+  .footer {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0.5rem;
+    text-align: left;
+    color: #676767;
+    font-size: 0.85rem;
+    transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+  }
+
+  .no-footer {
+    #main-section {
+      margin-bottom: 0;
+    }
+
+    .footer {
+      display: none;
+    }
+  }
+
+  .search-bar {
+    position: relative;
+    display: inline-block;
+    input {
+      border: none;
+      background-color: var(--highlight-hover);
+      border-radius: 5px;
+      margin-top: 2px;
+      padding: 2px 12px 2px 30px;
+      transition: all 100ms linear;
+      color: #ffffff;
+      height: 30px;
+      width: 100px;
+
+      &:focus {
+        color: #000000;
+        width: 250px;
+        background-color: #ffffff;
+      }
+    }
+
+    .search-label::before {
+      font-family: "Font Awesome 5 Free";
+      position: absolute;
+      top: 14px;
+      left: 16px;
+      content: "\f002";
+      font-weight: 900;
+      width: 20px;
+      height: 20px;
+      color: #ffffff;
+    }
+
+    &:focus-within .search-label::before {
+      color: #6e6e6e;
+    }
+  }
+
+  .offline-message {
+    text-align: center;
+    margin: 35px 0;
+
+    svg {
+      font-size: 2rem;
+    }
+
+    svg.fa-redo-alt {
+      font-size: 1.3rem;
+      line-height: 1rem;
+      vertical-align: middle;
+      cursor: pointer;
+      color: #3273dc;
+    }
+  }
+}