From c99054ecb283727816177859cb456fd2ee4481b0 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Wed, 18 Jul 2018 22:32:27 +0200 Subject: [PATCH] Add CSS for the newly-introduced dashboard (fixes #592) --- .../flavours/glitch/styles/dashboard.scss | 69 +++++++++++++++++++ .../flavours/glitch/styles/index.scss | 1 + 2 files changed, 70 insertions(+) create mode 100644 app/javascript/flavours/glitch/styles/dashboard.scss diff --git a/app/javascript/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.scss new file mode 100644 index 0000000000..949ca733f4 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/dashboard.scss @@ -0,0 +1,69 @@ +.dashboard__counters { + display: flex; + flex-wrap: wrap; + margin: 0 -5px; + margin-bottom: 20px; + + & > div { + box-sizing: border-box; + flex: 0 0 33.333%; + padding: 0 5px; + margin-bottom: 10px; + + & > div, + & > a { + padding: 20px; + background: lighten($ui-base-color, 4%); + border-radius: 4px; + } + + & > a { + text-decoration: none; + color: inherit; + display: block; + + &:hover, + &:focus, + &:active { + background: lighten($ui-base-color, 8%); + } + } + } + + &__num { + text-align: center; + font-weight: 500; + font-size: 24px; + color: $primary-text-color; + font-family: 'mastodon-font-display', sans-serif; + margin-bottom: 20px; + } + + &__label { + font-size: 14px; + color: $darker-text-color; + text-align: center; + font-weight: 500; + } +} + +.dashboard__widgets { + display: flex; + flex-wrap: wrap; + margin: 0 -5px; + + & > div { + flex: 0 0 33.333%; + margin-bottom: 20px; + + & > div { + padding: 0 5px; + } + } + + a:not(.name-tag) { + color: $ui-secondary-color; + font-weight: 500; + text-decoration: none; + } +} diff --git a/app/javascript/flavours/glitch/styles/index.scss b/app/javascript/flavours/glitch/styles/index.scss index a8ce129530..e25a0ddd6a 100644 --- a/app/javascript/flavours/glitch/styles/index.scss +++ b/app/javascript/flavours/glitch/styles/index.scss @@ -20,3 +20,4 @@ @import 'tables'; @import 'admin'; @import 'rtl'; +@import 'dashboard';