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