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 {
 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   }
 190
 191   #main-section {
 192     margin-bottom: 2rem;
 193     padding: 0;
 194
 195     h2 {
 196       border-bottom: 1px dashed #ccc;
 197       padding-bottom: 10px;
 198     }
 199
 200     .title {
 201       font-size: 1.1em;
 202     }
 203
 204     .subtitle {
 205       font-size: .9em;
 206       white-space: nowrap;
 207       overflow: hidden;
 208       text-overflow: ellipsis;
 209     }
 210
 211     .container {
 212       padding: 1.2rem .75rem;
 213     }
 214
 215     .message {
 216       margin-top: 45px;
 217       box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
 218
 219       .message-header {
 220         font-weight: bold;
 221       }
 222
 223       .message-body {
 224         border: none;
 225       }
 226     }
 227   }
 228
 229   .media-content {
 230     overflow: inherit;
 231   }
 232
 233   .tag {
 234     color: $secondary-color;
 235     background-color: $secondary-color;
 236     position: absolute;
 237     top: 1rem;
 238     right: -0.2rem;
 239     width: 3px;
 240     overflow: hidden;
 241     transition: all 0.2s ease-out;
 242     padding: 0;
 243
 244     .tag-text {
 245       display: none;
 246     }
 247   }
 248
 249   .card {
 250     border-radius: 5px;
 251     border: none;
 252     box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
 253     transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
 254
 255     a {
 256       outline: none;
 257     }
 258   }
 259
 260   .card:hover {
 261     transform: translate(0, -3px);
 262
 263     .tag {
 264       width: auto;
 265       color: #ffffff;
 266       padding: 0 0.75em;
 267
 268       .tag-text {
 269         display: block;
 270       }
 271     }
 272   }
 273
 274   .card-content {
 275     height: 85px;
 276     padding: 1.3rem;
 277   }
 278
 279   .layout-vertical {
 280     .card {
 281       border-radius: 0;
 282     }
 283
 284     .column div:first-of-type .card {
 285       border-radius: 5px 5px 0 0;
 286     }
 287
 288     .column div:last-child .card {
 289       border-radius: 0 0 5px 5px;
 290     }
 291   }
 292
 293   .footer {
 294     position: fixed;
 295     left: 0;
 296     right: 0;
 297     bottom: 0;
 298     padding: 0.5rem;
 299     text-align: left;
 300     color: #676767;
 301     font-size: 0.85rem;
 302     transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
 303   }
 304
 305   .no-footer {
 306     #main-section {
 307       margin-bottom: 0;
 308     }
 309
 310     .footer {
 311       display: none;
 312     }
 313   }
 314
 315   .search-bar {
 316     position: relative;
 317     display: inline-block;
 318     #search {
 319       border: none;
 320       background-color: lighten( $secondary-color, 6% );
 321       border-radius: 5px;
 322       padding: 2px 12px 2px 30px;
 323       margin: 10px 0;
 324       transition: all 100ms linear;
 325       color: #ffffff;
 326       height: 30px;
 327       width: 100px;
 328
 329
 330       &:focus {
 331         color: #000000;
 332         width: 250px;
 333         background-color: #ffffff;
 334       }
 335     }
 336
 337     .search-label::before {
 338       font-family: 'Font Awesome 5 Free';
 339       position: absolute;
 340       top: 12px;
 341       left: 8px;
 342       content: "\f002";
 343       font-weight: 900;
 344       width: 20px;
 345       height: 20px;
 346     }
 347
 348       &:focus-within .search-label::before {
 349           color: #4a4a4a;
 350       }
 351   }
 352
 353   .icon-button {
 354     display: inline-block;
 355   }
 356
 357   .offline-message {
 358       text-align: center;
 359       margin: 35px 0;
 360
 361       i {
 362         font-size: 2rem;
 363       }
 364
 365       i.fa-redo-alt {
 366         font-size: 1.3rem;
 367         line-height: 1rem;
 368         vertical-align: middle;
 369         cursor: pointer;
 370         color: #3273dc;
 371       }
 372   }
 373
 374 }