app.css

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