src/assets/app.scss

   1 @charset "utf-8";
   2
   3 @import "./webfonts/webfonts.scss";
   4 @import "../../node_modules/bulma/bulma";
   5 @import "./components/status.scss";
   6
   7 // Themes import
   8 @import "./themes/sui.scss";
   9
  10 @mixin ellipsis() {
  11   white-space: nowrap;
  12   overflow: hidden;
  13   text-overflow: ellipsis;
  14 }
  15
  16 html, body, body #app-mount, body #app {
  17   height: 100%;
  18   background-color: var(--background);
  19 }
  20
  21 body {
  22   font-family: "Raleway", sans-serif;
  23
  24   #app {
  25     height: auto;
  26     min-height: 100%;
  27     background-image: var(--background-image);
  28     background-size: cover;
  29     background-position: center;
  30     color: var(--text);
  31     transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
  32
  33     a {
  34       color: var(--link);
  35       &:hover {
  36         color: var(--link-hover);
  37       }
  38     }
  39
  40     .title {
  41       color: var(--text-title);
  42     }
  43     .subtitle {
  44       color: var(--text-subtitle);
  45     }
  46
  47     .card {
  48       background-color: var(--card-background);
  49       box-shadow: 0 2px 15px 0 var(--card-shadow);
  50       &:hover {
  51         background-color: var(--card-background);
  52       }
  53     }
  54
  55     .message {
  56       background-color: var(--card-background);
  57       .message-body {
  58         color: var(--text);
  59       }
  60     }
  61
  62     .footer {
  63       background-color: var(--card-background);
  64       box-shadow: 0 2px 15px 0 var(--card-shadow);
  65     }
  66   }
  67
  68   h1,
  69   h2,
  70   h3,
  71   h4,
  72   h5,
  73   h6 {
  74     font-family: "Lato", sans-serif;
  75   }
  76
  77   h1 {
  78     font-size: 2rem;
  79   }
  80
  81   h2 {
  82     font-size: 1.7rem;
  83     margin-top: 2rem;
  84     margin-bottom: 1rem;
  85
  86     .fas,
  87     .fab,
  88     .far {
  89       margin-right: 10px;
  90     }
  91
  92     span {
  93       font-weight: bold;
  94       color: var(--highlight-secondary);
  95     }
  96   }
  97
  98   [v-cloak] {
  99     display: none;
 100   }
 101
 102   #bighead {
 103     color: var(--text-header);
 104
 105     .dashboard-title {
 106       padding: 6px 0 0 80px;
 107
 108       &.no-logo {
 109         padding-left: 0;
 110       }
 111     }
 112
 113     .first-line {
 114       min-height: 100px;
 115       vertical-align: center;
 116       background-color: var(--highlight-primary);
 117
 118       h1 {
 119         margin-top: -12px;
 120         font-size: 2rem;
 121       }
 122
 123       .headline {
 124         margin-top: 5px;
 125         font-size: 0.9rem;
 126       }
 127
 128       .container {
 129         min-height: 80px;
 130         padding: 10px 0;
 131       }
 132
 133       .logo {
 134         float: left;
 135         i {
 136           vertical-align: top;
 137           padding: 8px 15px;
 138           font-size: 50px;
 139         }
 140
 141         img {
 142           padding: 10px;
 143           max-height: 70px;
 144           max-width: 70px;
 145         }
 146       }
 147     }
 148     .navbar {
 149       background-color: var(--highlight-secondary);
 150
 151       a {
 152         color: var(--text-header);
 153         padding: 8px 12px;
 154         &:hover,
 155         &:focus {
 156           color: var(--text-header);
 157           background-color: var(--highlight-hover);
 158         }
 159       }
 160         .navbar-menu {
 161       background-color: inherit;
 162       }
 163     }
 164     .navbar-end {
 165       text-align: right;
 166     }
 167   }
 168
 169   #main-section {
 170     padding: 0 0 2.5rem 0;
 171
 172     h2 {
 173       padding-bottom: 0px;
 174       @include ellipsis();
 175     }
 176
 177     .title {
 178       font-size: 1.1em;
 179       line-height: 1.2em;
 180       @include ellipsis();
 181     }
 182
 183     .subtitle {
 184       font-size: 0.9em;
 185       @include ellipsis();
 186     }
 187
 188     .container {
 189       padding: 1.2rem 0.75rem;
 190     }
 191
 192     .message {
 193       margin-top: 45px;
 194       box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
 195
 196       .message-header {
 197         font-weight: bold;
 198       }
 199
 200       .message-body {
 201         border: none;
 202       }
 203     }
 204   }
 205
 206   .media.no-subtitle {
 207     display: flex;
 208     align-items: center;
 209   }
 210
 211   .media-content {
 212     overflow: hidden;
 213     text-overflow: inherit;
 214   }
 215
 216   .tag {
 217     color: var(--highlight-secondary);
 218     background-color: var(--highlight-secondary);
 219     position: absolute;
 220     bottom: 1rem;
 221     right: -0.2rem;
 222     width: 3px;
 223     overflow: hidden;
 224     transition: all 0.2s ease-out;
 225     padding: 0;
 226
 227     .tag-text {
 228       display: none;
 229     }
 230   }
 231
 232   .card {
 233     border: none;
 234     box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
 235     transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
 236     overflow: visible;
 237
 238     a {
 239       outline: none;
 240     }
 241   }
 242
 243   .card:hover {
 244     transform: translate(0, -3px);
 245
 246     .tag {
 247       width: auto;
 248       color: #ffffff;
 249       padding: 0 0.75em;
 250
 251       .tag-text {
 252         display: block;
 253       }
 254     }
 255   }
 256
 257   .card-content {
 258     height: 85px;
 259     padding: 1.3rem;
 260   }
 261
 262   .layout-vertical {
 263     .card {
 264       border-radius: 0;
 265     }
 266
 267     .column div:first-of-type .card {
 268       border-top-left-radius: 0.25rem;
 269       border-top-right-radius: 0.25rem;
 270     }
 271
 272     .column div:last-child .card {
 273       border-bottom-left-radius: 0.25rem;
 274       border-bottom-right-radius: 0.25rem;
 275     }
 276   }
 277
 278   .footer {
 279     position: fixed;
 280     left: 0;
 281     right: 0;
 282     bottom: 0;
 283     padding: 0.5rem;
 284     text-align: left;
 285     color: #676767;
 286     font-size: 0.85rem;
 287     transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
 288   }
 289
 290   .no-footer {
 291     #main-section {
 292       padding-bottom: 0;
 293     }
 294
 295     .footer {
 296       display: none;
 297     }
 298   }
 299
 300   .search-bar {
 301     position: relative;
 302     display: inline-block;
 303     input {
 304       border: none;
 305       background-color: var(--highlight-hover);
 306       border-radius: 5px;
 307       margin-top: 2px;
 308       padding: 2px 12px 2px 30px;
 309       transition: all 100ms linear;
 310       color: #ffffff;
 311       height: 30px;
 312       width: 100px;
 313
 314       &:focus {
 315         color: #000000;
 316         width: 250px;
 317         background-color: #ffffff;
 318       }
 319     }
 320
 321     .search-label::before {
 322       font-family: "Font Awesome 5 Free";
 323       position: absolute;
 324       top: 14px;
 325       left: 16px;
 326       content: "\f002";
 327       font-weight: 900;
 328       width: 20px;
 329       height: 20px;
 330       color: #ffffff;
 331     }
 332
 333     &:focus-within .search-label::before {
 334       color: #6e6e6e;
 335     }
 336   }
 337
 338   .offline-message {
 339     text-align: center;
 340     margin: 35px 0;
 341
 342     i {
 343       font-size: 2rem;
 344     }
 345
 346     i.fa-redo-alt {
 347       font-size: 1.3rem;
 348       line-height: 1rem;
 349       vertical-align: middle;
 350       cursor: pointer;
 351       color: #3273dc;
 352     }
 353   }
 354 }
 355
 356 .group-logo {
 357   float: left;
 358 }