app.scss

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