Add CSS for the newly-introduced dashboard (fixes #592)
This commit is contained in:
parent
828f602b2f
commit
c99054ecb2
2 changed files with 70 additions and 0 deletions
69
app/javascript/flavours/glitch/styles/dashboard.scss
Normal file
69
app/javascript/flavours/glitch/styles/dashboard.scss
Normal file
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -20,3 +20,4 @@
|
|||
@import 'tables';
|
||||
@import 'admin';
|
||||
@import 'rtl';
|
||||
@import 'dashboard';
|
||||
|
|
Loading…
Reference in a new issue