X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=app.css;h=628b0ce298e726894e93ce683b972403a193fcad;hb=55e0df5386b60935c3db568a94b70d4d6c0f0f49;hp=9b2453a3b62222b8314c842c3a932a0d804181b8;hpb=56c69e0d6bd7265afec6cd66a4875ebf6357ea7d;p=github%2Fbastienwirtz%2Fhomer.git diff --git a/app.css b/app.css index 9b2453a..628b0ce 100644 --- a/app.css +++ b/app.css @@ -1,3 +1,21 @@ +/* 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"), 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"), url("./webfonts/lato/lato-v16-latin-regular.woff") format("woff"); + /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } + html { height: 100%; } @@ -20,6 +38,10 @@ body { box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } body #app .card:hover { background-color: #ffffff; } + body #app .message { + background-color: #ffffff; } + body #app .message .message-body { + color: #363636; } body #app .footer { background-color: #ffffff; box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } @@ -38,6 +60,10 @@ body { box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } body #app .card:hover { background-color: #ffffff; } + body #app .message { + background-color: #ffffff; } + body #app .message .message-body { + color: #363636; } body #app .footer { background-color: #ffffff; box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } } @@ -56,6 +82,10 @@ body { box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); } body #app .card:hover { background-color: #2b2b2b; } + body #app .message { + background-color: #2b2b2b; } + body #app .message .message-body { + color: #eaeaea; } body #app .footer { background-color: #2b2b2b; box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); } } @@ -73,6 +103,10 @@ body { box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } body #app.is-light .card:hover { 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 { background-color: #ffffff; box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } @@ -90,6 +124,10 @@ body { box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); } body #app.is-dark .card:hover { 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 { background-color: #2b2b2b; box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); } @@ -135,21 +173,29 @@ body { padding: 10px; max-height: 70px; max-width: 70px; } - body #bighead .navbar { + body #bighead .navbar, body #bighead .navbar-menu { background-color: #4285f4; } - body #bighead .navbar a { + body #bighead .navbar a, body #bighead .navbar-menu a { color: #ffffff; } - body #bighead .navbar a:hover, body #bighead .navbar 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; background-color: #5a95f5; } + body #bighead .navbar-end { + text-align: right; } body #main-section { margin-bottom: 2rem; padding: 0; } body #main-section h2 { border-bottom: 1px dashed #ccc; - padding-bottom: 10px; } + padding-bottom: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } body #main-section .title { - font-size: 1.1em; } + font-size: 1.1em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } body #main-section .subtitle { font-size: .9em; white-space: nowrap; @@ -165,7 +211,8 @@ body { body #main-section .message .message-body { border: none; } body .media-content { - overflow: inherit; } + overflow: hidden; + text-overflow: inherit; } body .tag { color: #4285f4; background-color: #4285f4; @@ -212,6 +259,10 @@ body { color: #676767; font-size: 0.85rem; transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; } + body .no-footer #main-section { + margin-bottom: 0; } + body .no-footer .footer { + display: none; } body .search-bar { position: relative; display: inline-block; } @@ -220,7 +271,7 @@ body { background-color: #5f98f6; border-radius: 5px; padding: 2px 12px 2px 30px; - margin: 10px 0; + margin: 0 0 0 12px; transition: all 100ms linear; color: #ffffff; height: 30px; @@ -232,16 +283,18 @@ body { body .search-bar .search-label::before { font-family: 'Font Awesome 5 Free'; position: absolute; - top: 12px; - left: 8px; + top: 4px; + left: 16px; content: "\f002"; font-weight: 900; width: 20px; - height: 20px; } + height: 20px; + color: #ffffff; } body .search-bar:focus-within .search-label::before { color: #4a4a4a; } body .icon-button { - display: inline-block; } + display: inline-block; + padding: 0 12px; } body .offline-message { text-align: center; margin: 35px 0; }