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