app.css

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