taigrr/homer
1
0
Fork 0
mirror of https://github.com/taigrr/homer synced 2025-01-18 04:53:12 -08:00
Code Issues Projects Releases Wiki Activity

Change message box background according to the theme.

Browse Source
This commit is contained in:
Bastien Wirtz 2020-03-25 22:58:24 -07:00
parent 4aeaeb09ad
commit 0503e77861
2 changed files with 290 additions and 354 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

307
app.css
View File

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

7
app.scss
View File

@ -68,6 +68,13 @@ $theme-dark: (
} }
} }
.message {
background-color: map-get($theme, "card-background");
.message-body {
color: map-get($theme, "text");
}
}
.footer { .footer {
background-color: map-get($theme, "card-background"); background-color: map-get($theme, "card-background");
box-shadow: 0 2px 15px 0 map-get($theme, "card-shadow"); box-shadow: 0 2px 15px 0 map-get($theme, "card-shadow");