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