src/assets/app.scss

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