$primary-color: #3367d6; $secondary-color: #2b2b2b; // /!\ Keep background colors sync with `theme-color` meta info $theme-light: ( background: #f5f5f5, card-background: #ffffff, text: #363636, text-title: #303030, text-subtitle: #424242, card-shadow: rgba(0, 0, 0, 0.1), a-hover: #363636 ); $theme-dark: ( background: #131313, card-background: #2b2b2b, text: #eaeaea, text-title: #fafafa, text-subtitle: #f5f5f5, card-shadow: rgba(0, 0, 0, 0.4), a-hover: #f5f5f5 ); /* raleway-regular - latin */ @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: local('Raleway'), local('Raleway-Regular'), url('./webfonts/raleway/raleway-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./webfonts/raleway/raleway-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* lato-regular - latin */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: local('Lato Regular'), local('Lato-Regular'), url('./webfonts/lato/lato-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('./webfonts/lato/lato-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } @mixin theme($theme) { background-color: map-get($theme, "background"); color: map-get($theme, "text"); a { &:hover { color: map-get($theme, "a-hover"); } } .title { color: map-get($theme, "text-title"); } .subtitle { color: map-get($theme, "text-subtitle"); } .card { background-color: map-get($theme, "card-background"); box-shadow: 0 2px 15px 0 map-get($theme, "card-shadow"); &:hover { background-color: map-get($theme, "card-background"); } } .footer { background-color: map-get($theme, "card-background"); box-shadow: 0 2px 15px 0 map-get($theme, "card-shadow"); } } html { height: 100%; } body { font-family: 'Raleway', sans-serif; height: 100%; #app { min-height: 100%; transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; // Default theme @include theme($theme-light); // System pref theme @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) { @include theme($theme-light); } @media (prefers-color-scheme: dark) { @include theme($theme-dark); } // User override theme &.is-light { @include theme($theme-light); } &.is-dark { @include theme($theme-dark); } } h1, h2, h3, h4, h5, h6 { font-family: 'Lato', sans-serif; } h1 { font-size: 2rem; } h2 { font-size: 1.7rem; margin-top: 2rem; margin-bottom: 1rem; .fas, .fab, .far { margin-right: 10px; } span { font-weight: bold; color: $secondary-color; } } [v-cloak] { display: none } #bighead { color: #ffffff; .dashboard-title { padding: 6px 0 0 80px; } .first-line { height: 100px; vertical-align: center; background-color: $primary-color; h1 { margin-top: -12px; font-size: 2rem; } .headline { margin-top: 5px; font-size: 0.9rem; } .container { height: 80px; padding: 10px 0; } .logo { float: left; i { vertical-align: top; padding: 8px 15px; font-size: 50px } img { padding: 10px; max-height: 70px; max-width: 70px; } } } .navbar { background-color: $secondary-color; a { color: #ffffff; &:hover, &:focus { color: #ffffff; background-color: lighten( $secondary-color, 5% ); } } } } #main-section { margin-bottom: 2rem; padding: 0; h2 { border-bottom: 1px dashed #ccc; padding-bottom: 10px; } .title { font-size: 1.1em; } .subtitle { font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .container { padding: 1.2rem .75rem; } .message { margin-top: 45px; box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); .message-header { font-weight: bold; } .message-body { border: none; } } } .media-content { overflow: inherit; } .tag { color: $secondary-color; background-color: $secondary-color; position: absolute; top: 1rem; right: -0.2rem; width: 3px; overflow: hidden; transition: all 0.2s ease-out; padding: 0; .tag-text { display: none; } } .card { border-radius: 5px; border: none; box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; a { outline: none; } } .card:hover { transform: translate(0, -3px); .tag { width: auto; color: #ffffff; padding: 0 0.75em; .tag-text { display: block; } } } .card-content { height: 85px; padding: 1.3rem; } .layout-vertical { .card { border-radius: 0; } .column div:first-of-type .card { border-radius: 5px 5px 0 0; } .column div:last-child .card { border-radius: 0 0 5px 5px; } } .footer { position: fixed; left: 0; right: 0; bottom: 0; padding: 0.5rem; text-align: left; color: #676767; font-size: 0.85rem; transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; } .no-footer { #main-section { margin-bottom: 0; } .footer { display: none; } } .search-bar { position: relative; display: inline-block; #search { border: none; background-color: lighten( $secondary-color, 6% ); border-radius: 5px; padding: 2px 12px 2px 30px; margin: 10px 0; transition: all 100ms linear; color: #ffffff; height: 30px; width: 100px; &:focus { color: #000000; width: 250px; background-color: #ffffff; } } .search-label::before { font-family: 'Font Awesome 5 Free'; position: absolute; top: 12px; left: 8px; content: "\f002"; font-weight: 900; width: 20px; height: 20px; } &:focus-within .search-label::before { color: #4a4a4a; } } .icon-button { display: inline-block; } .offline-message { text-align: center; margin: 35px 0; i { font-size: 2rem; } i.fa-redo-alt { font-size: 1.3rem; line-height: 1rem; vertical-align: middle; cursor: pointer; color: #3273dc; } } }