src/assets/app.scss

   1 @charset "utf-8";
   2
   3 @import "./webfonts/webfonts.scss";
   4
   5 @import "bulma";
   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 {
  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
 109     .first-line {
 110       min-height: 100px;
 111       vertical-align: center;
 112       background-color: var(--highlight-primary);
 113
 114       h1 {
 115         margin-top: -12px;
 116         font-size: 2rem;
 117       }
 118
 119       .headline {
 120         margin-top: 5px;
 121         font-size: 0.9rem;
 122       }
 123
 124       .container {
 125         min-height: 80px;
 126         padding: 10px 0;
 127       }
 128
 129       .logo {
 130         float: left;
 131         i {
 132           vertical-align: top;
 133           padding: 8px 15px;
 134           font-size: 50px;
 135         }
 136
 137         img {
 138           padding: 10px;
 139           max-height: 70px;
 140           max-width: 70px;
 141         }
 142       }
 143     }
 144     .navbar {
 145       background-color: var(--highlight-secondary);
 146
 147       a {
 148         color: var(--text-header);
 149         padding: 8px 12px;
 150         &:hover,
 151         &:focus {
 152           color: var(--text-header);
 153           background-color: var(--highlight-hover);
 154         }
 155       }
 156         .navbar-menu {
 157       background-color: inherit;
 158       }
 159     }
 160     .navbar-end {
 161       text-align: right;
 162     }
 163   }
 164
 165   #main-section {
 166     margin-bottom: 2rem;
 167     padding: 0;
 168
 169     h2 {
 170       padding-bottom: 0px;
 171       @include ellipsis();
 172     }
 173
 174     .title {
 175       font-size: 1.1em;
 176       line-height: 1.2em;
 177       @include ellipsis();
 178     }
 179
 180     .subtitle {
 181       font-size: 0.9em;
 182       @include ellipsis();
 183     }
 184
 185     .container {
 186       padding: 1.2rem 0.75rem;
 187     }
 188
 189     .message {
 190       margin-top: 45px;
 191       box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
 192
 193       .message-header {
 194         font-weight: bold;
 195       }
 196
 197       .message-body {
 198         border: none;
 199       }
 200     }
 201   }
 202
 203   .media.no-subtitle {
 204     display: flex;
 205     align-items: center;
 206   }
 207
 208   .media-content {
 209     overflow: hidden;
 210     text-overflow: inherit;
 211   }
 212
 213   .tag {
 214     color: var(--highlight-secondary);
 215     background-color: var(--highlight-secondary);
 216     position: absolute;
 217     bottom: 1rem;
 218     right: -0.2rem;
 219     width: 3px;
 220     overflow: hidden;
 221     transition: all 0.2s ease-out;
 222     padding: 0;
 223
 224     .tag-text {
 225       display: none;
 226     }
 227   }
 228
 229   .card {
 230     border: none;
 231     box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
 232     transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
 233     overflow: visible;
 234
 235     a {
 236       outline: none;
 237     }
 238   }
 239
 240   .card:hover {
 241     transform: translate(0, -3px);
 242
 243     .tag {
 244       width: auto;
 245       color: #ffffff;
 246       padding: 0 0.75em;
 247
 248       .tag-text {
 249         display: block;
 250       }
 251     }
 252   }
 253
 254   .card-content {
 255     height: 85px;
 256     padding: 1.3rem;
 257   }
 258
 259   .layout-vertical {
 260     .card {
 261       border-radius: 0;
 262     }
 263
 264     .column div:first-of-type .card {
 265       border-top-left-radius: 0.25rem;
 266       border-top-right-radius: 0.25rem;
 267     }
 268
 269     .column div:last-child .card {
 270       border-bottom-left-radius: 0.25rem;
 271       border-bottom-right-radius: 0.25rem;
 272     }
 273   }
 274
 275   .footer {
 276     position: fixed;
 277     left: 0;
 278     right: 0;
 279     bottom: 0;
 280     padding: 0.5rem;
 281     text-align: left;
 282     color: #676767;
 283     font-size: 0.85rem;
 284     transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
 285   }
 286
 287   .no-footer {
 288     #main-section {
 289       margin-bottom: 0;
 290     }
 291
 292     .footer {
 293       display: none;
 294     }
 295   }
 296
 297   .search-bar {
 298     position: relative;
 299     display: inline-block;
 300     input {
 301       border: none;
 302       background-color: var(--highlight-hover);
 303       border-radius: 5px;
 304       margin-top: 2px;
 305       padding: 2px 12px 2px 30px;
 306       transition: all 100ms linear;
 307       color: #ffffff;
 308       height: 30px;
 309       width: 100px;
 310
 311       &:focus {
 312         color: #000000;
 313         width: 250px;
 314         background-color: #ffffff;
 315       }
 316     }
 317
 318     .search-label::before {
 319       font-family: "Font Awesome 5 Free";
 320       position: absolute;
 321       top: 14px;
 322       left: 16px;
 323       content: "\f002";
 324       font-weight: 900;
 325       width: 20px;
 326       height: 20px;
 327       color: #ffffff;
 328     }
 329
 330     &:focus-within .search-label::before {
 331       color: #6e6e6e;
 332     }
 333   }
 334
 335   .offline-message {
 336     text-align: center;
 337     margin: 35px 0;
 338
 339     i {
 340       font-size: 2rem;
 341     }
 342
 343     i.fa-redo-alt {
 344       font-size: 1.3rem;
 345       line-height: 1rem;
 346       vertical-align: middle;
 347       cursor: pointer;
 348       color: #3273dc;
 349     }
 350   }
 351 }
 352
 353 .group-logo {
 354   float: left;
 355 }