From b9c5fcf085bed9c6100283133531b36bfbb06cf0 Mon Sep 17 00:00:00 2001 From: Bastien Wirtz Date: Mon, 25 May 2020 15:07:03 -0700 Subject: Build system integration using vue-cli. --- app.scss | 395 --------------------------------------------------------------- 1 file changed, 395 deletions(-) delete mode 100644 app.scss (limited to 'app.scss') diff --git a/app.scss b/app.scss deleted file mode 100644 index 51110e1..0000000 --- a/app.scss +++ /dev/null @@ -1,395 +0,0 @@ -$primary-color: #3367d6; -$secondary-color: #4285f4; - - -// /!\ 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: #ffdd57 -); - -/* 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"); - } - } - - .message { - background-color: map-get($theme, "card-background"); - .message-body { - color: map-get($theme, "text"); - } - } - - .footer { - background-color: map-get($theme, "card-background"); - box-shadow: 0 2px 15px 0 map-get($theme, "card-shadow"); - } -} - - -@mixin ellipsis() { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - - -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, .navbar-menu { - background-color: $secondary-color; - - a { - color: #ffffff; - &:hover, &:focus { - color: #ffffff; - background-color: lighten( $secondary-color, 5% ); - } - } - } - .navbar-end { - text-align: right; - } - } - - #main-section { - margin-bottom: 2rem; - padding: 0; - - h2 { - border-bottom: 1px dashed #ccc; - padding-bottom: 10px; - @include ellipsis(); - } - - .title { - font-size: 1.1em; - @include ellipsis(); - } - - .subtitle { - font-size: .9em; - @include 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: hidden; - text-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: 0 0 0 12px; - 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: 4px; - left: 16px; - content: "\f002"; - font-weight: 900; - width: 20px; - height: 20px; - color: #ffffff; - } - - &:focus-within .search-label::before { - color: #4a4a4a; - } - } - - .icon-button { - display: inline-block; - padding: 0 12px; - } - - .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; - } - } - -} -- cgit v1.2.3