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