Skip to content

Instantly share code, notes, and snippets.

@d6rkaiz d6rkaiz/custom.scss
Created Apr 22, 2017

Embed
What would you like to do?
Mastodon custom.scss for https://mstdn.club default theme
@import 'application';
/*
* Mastodon custom.scss for https://mstdn.club default theme
* by d6rkaiz
*
* original css created by 生駒菜々(やっきゅん)
* ref: https://userstyles.org/styles/141389/lite-masudon-kun-lite,
* https://userstyles.org/styles/141517/theme
*/
$tab_color: #283593;
$theme_color: #f5f5ff;
$theme_color_rgba: rgba(245, 245, 255, 0.7);
$link_color: #ff5722;
$font_color: #222;
$ui_color: #444B5D;
.drawer__inner, .ui {
background-color: $ui_color;
}
.scrollable, .drawer__inner.darker, .search-results__section *, .tabs-bar__link:hover {
background-color: $theme_color !important;
color: $font_color !important;
}
.drawer__header > a:hover {
background-color: $theme_color !important;
color: $font_color !important;
* {
background-color: $theme_color !important;
color: $font_color !important;
}
}
.empty-column-indicator {
background-color: $theme_color !important;
color: $font_color !important;
}
.scrollable *:not(.fa) {
background-color: $theme_color;
color: $font_color;
}
.account__header {
div *:not(.account__header__avatar), span {
background: rgba(0, 0, 0, 0) !important;
}
}
.account__header__content, .account__header .fa, .muted a.status__content__spoiler-link, .status__content__spoiler-link:hover > span {
background: rgba(0, 0, 0, 0) !important;
}
.drawer__tab {
> .fa, &:hover > .fa {
background: rgba(0, 0, 0, 0) !important;
}
}
.account__header {
> div {
background: $theme_color_rgba !important;
}
* {
color: $font_color !important;
}
}
.status__content a {
color: $link_color !important;
> span {
color: $link_color !important;
}
}
span.ellipsis, .active, .search__icon * {
color: $link_color !important;
}
.tabs-bar__link.active {
border-color: $link_color;
}
.compose-form__buttons .active {
background-color: #282c37;
}
.button {
background-color: $link_color;
opacity: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
&:hover {
background-color: $link_color;
opacity: 0.8;
}
}
.search *, .compose-form__buttons .active {
border-radius: 0.4em;
}
.search__input {
background-color: $theme_color;
&:focus {
background-color: $theme_color;
}
}
.status__content__spoiler-link *:hover {
color: #FFF;
}
.column-header, .column-icon, .tabs-bar {
background-color: $tab_color;
color: #FFF;
}
.drawer__header {
background-color: $tab_color;
color: #FFF;
* {
background-color: $tab_color;
color: #FFF;
}
}
.column-back-button, .search-results__header {
background-color: $tab_color;
color: #FFF;
}
.status__content__spoiler-link:hover > span {
color: #fff !important;
}
.dropdown__content > ul {
width: 25vw !important;
* {
width: 25vw !important;
}
}
@media (max-width: 1024px) {
.dropdown__content > ul {
width: 50vw !important;
* {
width: 50vw !important;
}
}
}
@media (max-width: 500px) {
.dropdown__content > ul {
width: 90vw !important;
* {
width: 90vw !important;
}
}
}
@media (min-width: 1025px) {
.drawer {
width: 20%;
max-width: 400px;
}
.column {
width: calc(80%/3);
max-width: 800px;
}
}
@media (min-width: 2560px) {
.drawer, .column {
margin: 0;
height: 100vh;
}
}
.columns-area > div {
&:nth-child(1) {
order: 1 !important;
}
&:nth-child(2) {
order: 3 !important;
}
&:nth-child(3) {
order: 4 !important;
}
&:nth-child(4) {
order: 2 !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.