mstdn.y-zu.org/mastodon
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update material theme to the latest

Browse Source
This commit is contained in:
Rintan 2020-12-23 16:34:02 +09:00
parent 4638de3865
commit 74217dcb56
156 changed files with 3030 additions and 804 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/javascript/styles/mastodon-material-dark.scss
View File

@ -1,9 +1,2 @@
/*
* Mastodon Material 0.2.0
* Author: Rintan, Genbu Project
* Copyright (C) 2020 Rintan, Genbu Project
*/
@import 'application';
@import 'mastodon-material-dark/loader';

14
app/javascript/styles/mastodon-material-dark/color/black.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #1e1e1e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #121212;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
@ -56,10 +58,10 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-hover-color: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$disabled-icon-color: darken($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/mastodon-material-dark/color/mastodon-dark.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #42485a;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #393f4f;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#42485a, 0.2);
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/mastodon-material-dark/color/mastodon-light.scss
View File

@ -40,11 +40,13 @@ $verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/mastodon-material-dark/color/plus-classic.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

16
app/javascript/styles/mastodon-material-dark/color/v1-dark.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #2e2e2e;
$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
@ -56,10 +58,10 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-hover-color: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$disabled-icon-color: darken($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/mastodon-material-dark/color/v1-light.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

14
app/javascript/styles/mastodon-material-dark/color/v2-dark.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #2e2e2e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
@ -56,10 +58,10 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-hover-color: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$disabled-icon-color: darken($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/mastodon-material-dark/color/v2-light.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

4
app/javascript/styles/mastodon-material-dark/layout/material-v1.scss
View File

@ -49,3 +49,7 @@ $outlined-chip: false; // Material v1 styled contained chip
// Button shadow
$button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px;

5
app/javascript/styles/mastodon-material-dark/layout/material-v2.scss
View File

@ -57,3 +57,8 @@ $outlined-chip: true; // Material v2 styled outlined chip
// Button shadow
$button-shadow: false; // Material v2 styled colored button without shadow
//$button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px; // Regular
//$fab-size: 40px; // Mini

17
app/javascript/styles/mastodon-material-dark/plugins/dense.scss
View File

@ -5,20 +5,21 @@
.drawer {
&__tab { margin: 8px auto 8px }
&__header { height: 48px }
&__tab { margin: 6px auto 6px }
}
.column { margin: 10px 5px }
.column-header {
height: 48px;
> button { padding: 12px 16px }
&__buttons { height: 48px }
&__button {
margin: 8px;
padding: 10px 8px;
.fa { vertical-align: text-top }
}
&__button { margin: 6px }
}
.column-subheading { padding: 8px 16px }
@ -38,7 +39,7 @@
}
.status {
padding: 8px 8px 8px 66px;
padding: 8px 8px 4px 66px;
&__expand { width: 66px }

8
app/javascript/styles/mastodon-material-dark/theme/_mixins.scss
View File

@ -45,7 +45,7 @@ $shadow-color-3: rgba(0,0,0,.12);
@if $outlined-chip {
.reactions-bar__item {
background: $outlined-chip-color !important;
border: 1px solid $border-color !important;
border: 1px solid $outlined-chip-selected-border-color !important;
&.active { background-color: $outlined-chip-selected-color !important }
@ -61,6 +61,12 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
@mixin icon-button {
width: 20px !important;
height: 20px !important;
font-size: 20px !important;
}
// check background-image value
@mixin bg-image {
@if $bg-image == none {

21
app/javascript/styles/mastodon-material-dark/theme/account.scss
View File

@ -6,6 +6,7 @@
.account {
border-bottom: 1px solid $border-color;
padding: 16px;
.account__display-name,
.account__display-name strong { color: $primary-text-color }
@ -27,6 +28,11 @@
}
}
&__avatar-wrapper {
margin-left: 0;
margin-right: 16px;
}
&__header {
&__bar {
background: $card-bg-color;
@ -51,9 +57,11 @@
&__buttons {
.icon-button {
@include icon-button;
border: none;
border-radius: 50%;
padding: 0;
padding: 8px;
margin-left: 8px;
}
}
}
@ -157,6 +165,17 @@
&:hover { background: $text-tab-indicator-bg-hover-color }
}
}
&__relationship {
padding: 0;
height: auto;
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
}
.account-role {

66
app/javascript/styles/mastodon-material-dark/theme/button.scss
View File

@ -21,16 +21,23 @@
&.inverted {
color: $icon-button-color;
&.active { color: $icon-button-active-color }
&:hover {
color: $icon-button-hover-color;
background-color: $icon-bg-hover-color;
}
&:focus { background-color: transparent }
}
&.overlayed {
@include icon-button;
border-radius: 50%;
background: $media-icon-bg-color;
color: $media-icon-color;
padding: 4px;
line-height: 20px !important;
&:hover {
background: $media-icon-bg-color;
@ -76,38 +83,53 @@ label.icon-button {
}
}
.button,
.button:active,
.button:focus {
.button {
background-color: $contained-button-color;
border-radius: $button-radius;
}
.button:hover {
@include shadow-2dp;
background-color: $contained-button-hover-color;
}
&:active,
&:focus {
background-color: $contained-button-color;
border-radius: $button-radius;
}
.button.logo-button {
background: $contained-button-color;
margin: 2px;
&:hover {
@include shadow-2dp;
background-color: $contained-button-hover-color;
}
&:hover { background: $contained-button-hover-color }
&.logo-button {
background: $contained-button-color;
margin: 2px;
.button--destructive:hover { background: $contained-button-hover-color }
}
&:hover { background: $contained-button-hover-color }
.button.button--block { margin: 8px 0 }
.button--destructive:hover { background: $contained-button-hover-color }
}
.button.confirmation-modal__cancel-button {
box-shadow: none;
background-color: transparent;
margin: 0 8px;
color: $text-button-color;
&.button--block { margin: 8px 0 }
&:hover { background: $text-button-hover-color }
&.button-secondary {
color: $text-button-color;
border: none;
box-shadow: none;
&:focus { background: $text-button-focus-color }
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
}
&.confirmation-modal__cancel-button {
box-shadow: none;
background-color: transparent;
margin: 0 8px;
color: $text-button-color;
&:hover { background: $text-button-hover-color }
&:focus { background: $text-button-focus-color }
}
}
.spoiler-button__overlay__label {

40
app/javascript/styles/mastodon-material-dark/theme/columns.scss
View File

@ -21,9 +21,10 @@
.column-header {
background: $top-bar-color;
border-radius: $bar-radius;
height: 56px;
> button {
padding: 16px 0 16px 16px;
padding: 16px;
color: $top-bar-text-color;
}
@ -45,12 +46,13 @@
&__buttons { height: 56px }
&__button {
@include icon-button;
background: $top-bar-color;
color: $top-bar-icon-color;
margin: 8px 10px;
padding: 10px;
padding: 8px;
margin: 10px;
border-radius: 50%;
font-size: 20px;
box-sizing: content-box;
&.active {
color: $top-bar-icon-active-color;
@ -136,6 +138,7 @@
color: $section-text-color;
background: $bg-color;
padding: 12px 16px;
margin-top: 8px;
border-top: 1px solid $border-color;
}
@ -192,6 +195,8 @@
padding: 16px;
span { visibility: hidden } // hide "back" string
&--slim-button { top: -54px }
}
.column-inline-form {
@ -296,6 +301,7 @@
&__wrapper {
background: $bg-color;
height: auto !important;
padding-bottom: 8px;
border-bottom: 1px solid $border-color;
}
@ -321,6 +327,7 @@
h4 {
color: $section-text-color;
padding: 12px 16px;
margin-top: 8px;
border-top: 1px solid $border-color;
border-bottom: none;
}
@ -384,15 +391,18 @@
&__pagination {
color: $ui-text-color;
padding: 8px 16px;
bottom: 8px;
padding: 16px;
bottom: 0;
.icon-button {
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
margin: 0 8px;
@include icon-button;
padding: 8px;
margin: 0 4px;
line-height: normal !important;
box-sizing: content-box;
}
span { vertical-align: super }
}
}
@ -401,6 +411,9 @@
@include outlined-chip;
.reactions-bar {
margin-top: 16px;
width: calc(100% - 72px);
.emoji-button {
color: $icon-button-color;
font-size: 20px;
@ -417,7 +430,10 @@
&.active {
background-color: $contained-chip-selected-color;
.reactions-bar__item__count { color: $ui-text-color }
.reactions-bar__item__count { color: $chip-selected-text-color }
&:hover { background-color: $contained-chip-selected-color }
}
&__emoji {
@ -428,7 +444,7 @@
&__count {
font-size: 16px;
margin: 0 8px;
margin: 0 12px 0 8px;
color: $secondary-text-color;
}

70
app/javascript/styles/mastodon-material-dark/theme/components.scss
View File

@ -121,7 +121,7 @@
background-color: $card-bg-color;
padding: 16px;
.fa { margin-right: 8px }
.fa { margin-right: 16px }
}
&__section {
@ -148,6 +148,11 @@
width: 36px !important;
height: 36px !important;
padding: 8px;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
}
}
@ -156,6 +161,8 @@
margin: 8px 0;
}
.flex-spacer { margin: 8px 0 }
.dropdown-menu {
@include shadow-8dp;
background: $menu-bg-color;
@ -233,6 +240,7 @@
padding: 16px;
border: 1px solid $border-color;
border-radius: $card-radius;
box-shadow: none;
a { color: $link-text-color }
}
@ -263,8 +271,7 @@
padding: 8px;
.icon-button {
width: 20px !important;
height: 20px !important;
@include icon-button;
padding: 8px;
}
@ -291,14 +298,12 @@
.button.button-secondary {
box-shadow: none;
color: $outlined-button-color;
border-color: $outlined-button-color;
color: $text-button-color;
&:hover { background-color: $outlined-button-hover-color }
&:hover { background-color: $text-button-hover-color }
&:active { background-color: $outlined-button-active-color }
&:focus { background-color: $outlined-button-color }
&:active,
&:focus { background-color: $text-button-focus-color }
}
.poll__footer { border-top: none }
@ -312,17 +317,32 @@
.poll {
.button { margin-right: 8px }
li { margin-bottom: 0 }
&__input {
border: 2px solid $control-border-color;
border: none;
width: 20px;
height: 20px;
flex: 0 0 20px;
margin: 8px;
padding: 18px;
margin: 0 2px;
background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
&.checkbox { border-radius: 2px }
&:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
&:focus,
&:hover { border: 2px solid $control-border-color }
&.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
&.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
&.checkbox {
border-radius: 2px;
border: 2px solid $control-border-color;
padding: 8px;
margin: 8px 10px;
background: none;
}
}
&__text input[type=text] {
@ -334,12 +354,16 @@
&:focus { border-color: $border-active-color }
}
&__option input[type=text] {
color: $primary-text-color;
background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
&__option {
padding: 16px 0 8px;
input[type=text] {
color: $primary-text-color;
background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
}
}
&__chart {
@ -444,7 +468,11 @@
&-avatar { margin-right: 8px }
}
&__content { color: $primary-text-color }
&__content {
color: $primary-text-color;
p { margin-bottom: 16px }
}
}
.attachment-list {

57
app/javascript/styles/mastodon-material-dark/theme/containers.scss Normal file
View File

@ -0,0 +1,57 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.public-layout {
.header {
@include shadow-4dp;
background: $top-bar-color;
border-radius: $nav-bar-radius;
margin: 16px 0;
.brand:hover { background: $tab-indicator-bg-hover-color }
.nav-link,
.nav-link.optional {
color: $top-bar-text-color;
&:hover {
background: $tab-indicator-bg-hover-color;
text-decoration: none;
}
}
.nav-button {
background: transparent;
margin: 0;
border-radius: 0;
&:hover { background: $tab-indicator-bg-hover-color }
}
.detailed-status__meta { margin-top: 16px }
}
.detailed-status { padding: 16px }
.footer {
padding-top: 16px;
padding-bottom: 64px;
color: $ui-text-color;
h4 { color: $ui-text-color }
ul a { color: $secondary-text-color }
.grid .column-2 h4 a { color: $ui-text-color }
.brand {
svg { fill: $icon-color }
&:hover svg { fill: $icon-hover-color }
}
}
}

12
app/javascript/styles/mastodon-material-dark/theme/emoji-picker.scss
View File

@ -69,13 +69,13 @@
background: $menu-bg-color;
}
&-category-label span {
padding: 4px 6px;
background: $menu-bg-color;
}
&-category {
&-label span {
padding: 4px 6px;
background: $menu-bg-color;
}
&-emoji:hover::before {
background-color: $icon-bg-hover-color;
.emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
}
&-no-results { color: $secondary-text-color }

53
app/javascript/styles/mastodon-material-dark/theme/material-icons.scss
View File

@ -75,7 +75,8 @@
&.fa-check,
&.fa-quote-right,
&.fa-upload,
&.fa-comments {
&.fa-comments,
&.fa-angle-right {
@include icon-font-style;
line-height: 1;
letter-spacing: normal;
@ -143,6 +144,7 @@
&.fa-quote-right::before { content: "format_quote" }
&.fa-upload::before { content: "file_upload" }
&.fa-comments::before { content: "forum" }
&.fa-angle-right::before { content: "chevron_right" }
}
// bookmark icon
@ -170,17 +172,20 @@
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
// boost icon
button.icon-button i.fa-retweet,
button.icon-button i.fa-retweet:hover {
height: 18px;
width: 18px;
button.icon-button i.fa-retweet {
height: 20px;
width: 20px;
transition: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
}
button.icon-button i.fa-retweet:hover {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-hover-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
}
button.icon-button.disabled i.fa-retweet,
button.icon-button.disabled i.fa-retweet:hover {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
}
// dropdown icon
@ -199,7 +204,24 @@ button.icon-button.disabled i.fa-retweet:hover {
.fa.fa-bell.column-header__icon.fa-fw,
.fa.fa-home.column-header__icon.fa-fw,
.fa.fa-users.column-header__icon.fa-fw,
.fa.fa-globe.column-header__icon.fa-fw { vertical-align: text-bottom }
.fa.fa-globe.column-header__icon.fa-fw,
.fa.fa-bars.column-header__icon.fa-fw,
.fa.fa-bookmark.column-header__icon.fa-fw,
.fa.fa-address-book-o.column-header__icon.fa-fw,
.fa.fa-envelope.column-header__icon.fa-fw,
.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
// top bar icons in single column mode
.tabs-bar__link {
.fa.fa-home.fa-fw,
.fa.fa-bell.fa-fw,
.fa.fa-users.fa-fw,
.fa.fa-globe.fa-fw { vertical-align: text-bottom }
}
// getting-started and side bar icons
.column-link .fa,
.column-link--transparent .fa { vertical-align: text-bottom }
// uploaded media icons align
.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
@ -209,3 +231,18 @@ button.icon-button.disabled i.fa-retweet:hover {
// search results icons align
.search-results__header .fa { vertical-align: text-bottom }
// read more icon
.status__content__read-more-button .fa { vertical-align: bottom }
// status detail icon
.detailed-status .fa {
font-size: 16px;
vertical-align: text-bottom;
}
// status scope
.status__visibility-icon .fa {
font-size: 16px;
vertical-align: text-bottom;
}

16
app/javascript/styles/mastodon-material-dark/theme/media.scss
View File

@ -12,23 +12,25 @@
}
.media-modal__close {
align-content: center;
&.icon-button {
background: transparent;
color: $media-icon-color;
text-align: center !important;
font-size: 24px !important;
width: 48px !important;
height: 48px !important;
border: 12px;
width: 24px !important;
height: 24px !important;
padding: 8px;
box-sizing: content-box;
line-height: normal !important;
&:hover {
background: $media-icon-bg-hover-color;
color: $media-icon-hover-color;
}
.fa-fw { width: 24px }
.fa-fw {
width: 24px;
height: 24px;
}
}
}

1
app/javascript/styles/mastodon-material-dark/theme/modal.scss
View File

@ -10,7 +10,6 @@
background: $card-bg-color;
color: $ui-text-color;
border-radius: $dialog-radius;
width: 300px;
&__container {
text-align: left;

24
app/javascript/styles/mastodon-material-dark/theme/responsive.scss
View File

@ -39,6 +39,10 @@
background: $floating-action-button-color;
color: $floating-action-button-icon-color;
font-size: 24px;
width: $fab-size;
height: $fab-size;
bottom: 16px;
right: 16px;
&:hover { background: $floating-action-button-hover-color }
@ -60,6 +64,11 @@
}
}
// small size screen
@media screen and (max-width: 415px) {
.public-layout { padding-top: 64px }
}
// middle size screen
@media screen and (min-width: 415px) {
.tabs-bar {
@ -72,17 +81,22 @@
}
}
.columns-area__panels__main {
@include shadow-1dp;
padding: 0;
.columns-area__panels {
&__main {
@include shadow-1dp;
padding: 0;
}
&__pane { padding: 0 16px }
}
}
//single column mode
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
background: $tab-indicator-bg-hover-color;
border-bottom-color: $tab-bg-color;
border-bottom-color: transparent;
}
&:active,
@ -90,5 +104,7 @@
background: $tab-indicator-bg-focus-color;
border-bottom-color: $tab-bg-color;
}
&.active { border-bottom-color: $tab-indicator-active-color }
}
}

92
app/javascript/styles/mastodon-material-dark/theme/statuses.scss
View File

@ -6,7 +6,7 @@
.status {
padding: 12px 12px 12px 70px;
padding: 12px 12px 4px 70px;
border-bottom: 1px solid $border-color;
&__expand { width: 70px }
@ -40,6 +40,8 @@
&.unhandled-link { color: $link-text-color }
}
p { margin-bottom: 16px }
.status__content__spoiler-link {
background: transparent;
@ -69,9 +71,47 @@
}
&__action-bar {
&__counter__label {
font-size: 14px;
color: $info-text-color;
margin-top: 4px;
&__counter {
margin-right: 6px;
&__label {
font-size: 14px;
color: $info-text-color;
}
}
}
&__action-bar-button {
margin-right: 6px;
&.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
&__action-bar-dropdown {
width: 36px !important;
height: 36px !important;
box-sizing: content-box;
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
&:hover {
color:$icon-hover-color;
background: $icon-bg-hover-color;
}
}
}
@ -154,6 +194,9 @@ a.status-card {
&:hover { background-color: $card-bg-color }
}
.embed .status,
.public-layout .status { padding: 16px 16px 16px 80px }
// Detailed status in mobile
.status.light {
.status {
@ -170,6 +213,8 @@ a.status-card {
background: $card-bg-color;
padding: 16px;
&.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
&__display-name {
color: $secondary-text-color;
@ -185,11 +230,28 @@ a.status-card {
background: $card-bg-color;
border-top: none;
border-bottom: 1px solid $border-color;
padding: 12px 0;
padding: 8px 0;
}
&__action-bar-dropdown {
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
}
}
&__button {
.icon-button { font-size: 20px !important }
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
}
@ -198,3 +260,21 @@ a.status-card {
&__html { color: $primary-text-color }
&__account { color: $secondary-text-color }
}
.activity-stream {
@include shadow-1dp;
margin-bottom: 16px;
border-radius: $card-radius;
.entry {
background: $card-bg-color;
&:first-child {
.detailed-status,
.load-more,
.status { border-radius: $card-radius $card-radius 0 0 }
}
}
}
.entry.entry-center { border-bottom: 1px solid $border-color }

8
app/javascript/styles/mastodon-material-dark/theme/theme.scss
View File

@ -1,4 +1,10 @@
/*
* Mastodon Material 0.2.0
* Author: Rintan, Genbu Project
* Copyright (C) 2020 Rintan, Genbu Project
*/
@charset "UTF-8";
@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';

32
app/javascript/styles/mastodon-material-dark/theme/widgets.scss Normal file
View File

@ -0,0 +1,32 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.hero-widget {
@include shadow-2dp;
margin-bottom: 16px;
&__img {
border-radius: $card-radius $card-radius 0 0;
background: $card-bg-color;
img { border-radius: $card-radius $card-radius 0 0 }
}
&__text {
background: $card-bg-color;
padding: 16px;
color: $primary-text-color;
border-radius: 0 0 $card-radius $card-radius;
}
}
.endorsements-widget {
padding-bottom: 8px;
margin-bottom: 8px;
}
.trends-widget h4 { color: $section-text-color }

7
app/javascript/styles/mastodon-material-light.scss
View File

@ -1,9 +1,2 @@
/*
* Mastodon Material 0.2.0
* Author: Rintan, Genbu Project
* Copyright (C) 2020 Rintan, Genbu Project
*/
@import 'application';
@import 'mastodon-material-light/loader';

14
app/javascript/styles/mastodon-material-light/color/black.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #1e1e1e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #121212;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
@ -56,10 +58,10 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-hover-color: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$disabled-icon-color: darken($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/mastodon-material-light/color/mastodon-dark.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #42485a;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #393f4f;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#42485a, 0.2);
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/mastodon-material-light/color/mastodon-light.scss
View File

@ -40,11 +40,13 @@ $verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/mastodon-material-light/color/plus-classic.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

16
app/javascript/styles/mastodon-material-light/color/v1-dark.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #2e2e2e;
$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
@ -56,10 +58,10 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-hover-color: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$disabled-icon-color: darken($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/mastodon-material-light/color/v1-light.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

14
app/javascript/styles/mastodon-material-light/color/v2-dark.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #2e2e2e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
@ -56,10 +58,10 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-hover-color: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$disabled-icon-color: darken($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/mastodon-material-light/color/v2-light.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

4
app/javascript/styles/mastodon-material-light/layout/material-v1.scss
View File

@ -49,3 +49,7 @@ $outlined-chip: false; // Material v1 styled contained chip
// Button shadow
$button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px;

5
app/javascript/styles/mastodon-material-light/layout/material-v2.scss
View File

@ -57,3 +57,8 @@ $outlined-chip: true; // Material v2 styled outlined chip
// Button shadow
$button-shadow: false; // Material v2 styled colored button without shadow
//$button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px; // Regular
//$fab-size: 40px; // Mini

17
app/javascript/styles/mastodon-material-light/plugins/dense.scss
View File

@ -5,20 +5,21 @@
.drawer {
&__tab { margin: 8px auto 8px }
&__header { height: 48px }
&__tab { margin: 6px auto 6px }
}
.column { margin: 10px 5px }
.column-header {
height: 48px;
> button { padding: 12px 16px }
&__buttons { height: 48px }
&__button {
margin: 8px;
padding: 10px 8px;
.fa { vertical-align: text-top }
}
&__button { margin: 6px }
}
.column-subheading { padding: 8px 16px }
@ -38,7 +39,7 @@
}
.status {
padding: 8px 8px 8px 66px;
padding: 8px 8px 4px 66px;
&__expand { width: 66px }

8
app/javascript/styles/mastodon-material-light/theme/_mixins.scss
View File

@ -45,7 +45,7 @@ $shadow-color-3: rgba(0,0,0,.12);
@if $outlined-chip {
.reactions-bar__item {
background: $outlined-chip-color !important;
border: 1px solid $border-color !important;
border: 1px solid $outlined-chip-selected-border-color !important;
&.active { background-color: $outlined-chip-selected-color !important }
@ -61,6 +61,12 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
@mixin icon-button {
width: 20px !important;
height: 20px !important;
font-size: 20px !important;
}
// check background-image value
@mixin bg-image {
@if $bg-image == none {

21
app/javascript/styles/mastodon-material-light/theme/account.scss
View File

@ -6,6 +6,7 @@
.account {
border-bottom: 1px solid $border-color;
padding: 16px;
.account__display-name,
.account__display-name strong { color: $primary-text-color }
@ -27,6 +28,11 @@
}
}
&__avatar-wrapper {
margin-left: 0;
margin-right: 16px;
}
&__header {
&__bar {
background: $card-bg-color;
@ -51,9 +57,11 @@
&__buttons {
.icon-button {
@include icon-button;
border: none;
border-radius: 50%;
padding: 0;
padding: 8px;
margin-left: 8px;
}
}
}
@ -157,6 +165,17 @@
&:hover { background: $text-tab-indicator-bg-hover-color }
}
}
&__relationship {
padding: 0;
height: auto;
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
}
.account-role {

66
app/javascript/styles/mastodon-material-light/theme/button.scss
View File

@ -21,16 +21,23 @@
&.inverted {
color: $icon-button-color;
&.active { color: $icon-button-active-color }
&:hover {
color: $icon-button-hover-color;
background-color: $icon-bg-hover-color;
}
&:focus { background-color: transparent }
}
&.overlayed {
@include icon-button;
border-radius: 50%;
background: $media-icon-bg-color;
color: $media-icon-color;
padding: 4px;
line-height: 20px !important;
&:hover {
background: $media-icon-bg-color;
@ -76,38 +83,53 @@ label.icon-button {
}
}
.button,
.button:active,
.button:focus {
.button {
background-color: $contained-button-color;
border-radius: $button-radius;
}
.button:hover {
@include shadow-2dp;
background-color: $contained-button-hover-color;
}
&:active,
&:focus {
background-color: $contained-button-color;
border-radius: $button-radius;
}
.button.logo-button {
background: $contained-button-color;
margin: 2px;
&:hover {
@include shadow-2dp;
background-color: $contained-button-hover-color;
}
&:hover { background: $contained-button-hover-color }
&.logo-button {
background: $contained-button-color;
margin: 2px;
.button--destructive:hover { background: $contained-button-hover-color }
}
&:hover { background: $contained-button-hover-color }
.button.button--block { margin: 8px 0 }
.button--destructive:hover { background: $contained-button-hover-color }
}
.button.confirmation-modal__cancel-button {
box-shadow: none;
background-color: transparent;
margin: 0 8px;
color: $text-button-color;
&.button--block { margin: 8px 0 }
&:hover { background: $text-button-hover-color }
&.button-secondary {
color: $text-button-color;
border: none;
box-shadow: none;
&:focus { background: $text-button-focus-color }
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
}
&.confirmation-modal__cancel-button {
box-shadow: none;
background-color: transparent;
margin: 0 8px;
color: $text-button-color;
&:hover { background: $text-button-hover-color }
&:focus { background: $text-button-focus-color }
}
}
.spoiler-button__overlay__label {

40
app/javascript/styles/mastodon-material-light/theme/columns.scss
View File

@ -21,9 +21,10 @@
.column-header {
background: $top-bar-color;
border-radius: $bar-radius;
height: 56px;
> button {
padding: 16px 0 16px 16px;
padding: 16px;
color: $top-bar-text-color;
}
@ -45,12 +46,13 @@
&__buttons { height: 56px }
&__button {
@include icon-button;
background: $top-bar-color;
color: $top-bar-icon-color;
margin: 8px 10px;
padding: 10px;
padding: 8px;
margin: 10px;
border-radius: 50%;
font-size: 20px;
box-sizing: content-box;
&.active {
color: $top-bar-icon-active-color;
@ -136,6 +138,7 @@
color: $section-text-color;
background: $bg-color;
padding: 12px 16px;
margin-top: 8px;
border-top: 1px solid $border-color;
}
@ -192,6 +195,8 @@
padding: 16px;
span { visibility: hidden } // hide "back" string
&--slim-button { top: -54px }
}
.column-inline-form {
@ -296,6 +301,7 @@
&__wrapper {
background: $bg-color;
height: auto !important;
padding-bottom: 8px;
border-bottom: 1px solid $border-color;
}
@ -321,6 +327,7 @@
h4 {
color: $section-text-color;
padding: 12px 16px;
margin-top: 8px;
border-top: 1px solid $border-color;
border-bottom: none;
}
@ -384,15 +391,18 @@
&__pagination {
color: $ui-text-color;
padding: 8px 16px;
bottom: 8px;
padding: 16px;
bottom: 0;
.icon-button {
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
margin: 0 8px;
@include icon-button;
padding: 8px;
margin: 0 4px;
line-height: normal !important;
box-sizing: content-box;
}
span { vertical-align: super }
}
}
@ -401,6 +411,9 @@
@include outlined-chip;
.reactions-bar {
margin-top: 16px;
width: calc(100% - 72px);
.emoji-button {
color: $icon-button-color;
font-size: 20px;
@ -417,7 +430,10 @@
&.active {
background-color: $contained-chip-selected-color;
.reactions-bar__item__count { color: $ui-text-color }
.reactions-bar__item__count { color: $chip-selected-text-color }
&:hover { background-color: $contained-chip-selected-color }
}
&__emoji {
@ -428,7 +444,7 @@
&__count {
font-size: 16px;
margin: 0 8px;
margin: 0 12px 0 8px;
color: $secondary-text-color;
}

70
app/javascript/styles/mastodon-material-light/theme/components.scss
View File

@ -121,7 +121,7 @@
background-color: $card-bg-color;
padding: 16px;
.fa { margin-right: 8px }
.fa { margin-right: 16px }
}
&__section {
@ -148,6 +148,11 @@
width: 36px !important;
height: 36px !important;
padding: 8px;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
}
}
@ -156,6 +161,8 @@
margin: 8px 0;
}
.flex-spacer { margin: 8px 0 }
.dropdown-menu {
@include shadow-8dp;
background: $menu-bg-color;
@ -233,6 +240,7 @@
padding: 16px;
border: 1px solid $border-color;
border-radius: $card-radius;
box-shadow: none;
a { color: $link-text-color }
}
@ -263,8 +271,7 @@
padding: 8px;
.icon-button {
width: 20px !important;
height: 20px !important;
@include icon-button;
padding: 8px;
}
@ -291,14 +298,12 @@
.button.button-secondary {
box-shadow: none;
color: $outlined-button-color;
border-color: $outlined-button-color;
color: $text-button-color;
&:hover { background-color: $outlined-button-hover-color }
&:hover { background-color: $text-button-hover-color }
&:active { background-color: $outlined-button-active-color }
&:focus { background-color: $outlined-button-color }
&:active,
&:focus { background-color: $text-button-focus-color }
}
.poll__footer { border-top: none }
@ -312,17 +317,32 @@
.poll {
.button { margin-right: 8px }
li { margin-bottom: 0 }
&__input {
border: 2px solid $control-border-color;
border: none;
width: 20px;
height: 20px;
flex: 0 0 20px;
margin: 8px;
padding: 18px;
margin: 0 2px;
background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
&.checkbox { border-radius: 2px }
&:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
&:focus,
&:hover { border: 2px solid $control-border-color }
&.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
&.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
&.checkbox {
border-radius: 2px;
border: 2px solid $control-border-color;
padding: 8px;
margin: 8px 10px;
background: none;
}
}
&__text input[type=text] {
@ -334,12 +354,16 @@
&:focus { border-color: $border-active-color }
}
&__option input[type=text] {
color: $primary-text-color;
background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
&__option {
padding: 16px 0 8px;
input[type=text] {
color: $primary-text-color;
background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
}
}
&__chart {
@ -444,7 +468,11 @@
&-avatar { margin-right: 8px }
}
&__content { color: $primary-text-color }
&__content {
color: $primary-text-color;
p { margin-bottom: 16px }
}
}
.attachment-list {

57
app/javascript/styles/mastodon-material-light/theme/containers.scss Normal file
View File

@ -0,0 +1,57 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.public-layout {
.header {
@include shadow-4dp;
background: $top-bar-color;
border-radius: $nav-bar-radius;
margin: 16px 0;
.brand:hover { background: $tab-indicator-bg-hover-color }
.nav-link,
.nav-link.optional {
color: $top-bar-text-color;
&:hover {
background: $tab-indicator-bg-hover-color;
text-decoration: none;
}
}
.nav-button {
background: transparent;
margin: 0;
border-radius: 0;
&:hover { background: $tab-indicator-bg-hover-color }
}
.detailed-status__meta { margin-top: 16px }
}
.detailed-status { padding: 16px }
.footer {
padding-top: 16px;
padding-bottom: 64px;
color: $ui-text-color;
h4 { color: $ui-text-color }
ul a { color: $secondary-text-color }
.grid .column-2 h4 a { color: $ui-text-color }
.brand {
svg { fill: $icon-color }
&:hover svg { fill: $icon-hover-color }
}
}
}

12
app/javascript/styles/mastodon-material-light/theme/emoji-picker.scss
View File

@ -69,13 +69,13 @@
background: $menu-bg-color;
}
&-category-label span {
padding: 4px 6px;
background: $menu-bg-color;
}
&-category {
&-label span {
padding: 4px 6px;
background: $menu-bg-color;
}
&-emoji:hover::before {
background-color: $icon-bg-hover-color;
.emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
}
&-no-results { color: $secondary-text-color }

53
app/javascript/styles/mastodon-material-light/theme/material-icons.scss
View File

@ -75,7 +75,8 @@
&.fa-check,
&.fa-quote-right,
&.fa-upload,
&.fa-comments {
&.fa-comments,
&.fa-angle-right {
@include icon-font-style;
line-height: 1;
letter-spacing: normal;
@ -143,6 +144,7 @@
&.fa-quote-right::before { content: "format_quote" }
&.fa-upload::before { content: "file_upload" }
&.fa-comments::before { content: "forum" }
&.fa-angle-right::before { content: "chevron_right" }
}
// bookmark icon
@ -170,17 +172,20 @@
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
// boost icon
button.icon-button i.fa-retweet,
button.icon-button i.fa-retweet:hover {
height: 18px;
width: 18px;
button.icon-button i.fa-retweet {
height: 20px;
width: 20px;
transition: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
}
button.icon-button i.fa-retweet:hover {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-hover-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
}
button.icon-button.disabled i.fa-retweet,
button.icon-button.disabled i.fa-retweet:hover {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
}
// dropdown icon
@ -199,7 +204,24 @@ button.icon-button.disabled i.fa-retweet:hover {
.fa.fa-bell.column-header__icon.fa-fw,
.fa.fa-home.column-header__icon.fa-fw,
.fa.fa-users.column-header__icon.fa-fw,
.fa.fa-globe.column-header__icon.fa-fw { vertical-align: text-bottom }
.fa.fa-globe.column-header__icon.fa-fw,
.fa.fa-bars.column-header__icon.fa-fw,
.fa.fa-bookmark.column-header__icon.fa-fw,
.fa.fa-address-book-o.column-header__icon.fa-fw,
.fa.fa-envelope.column-header__icon.fa-fw,
.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
// top bar icons in single column mode
.tabs-bar__link {
.fa.fa-home.fa-fw,
.fa.fa-bell.fa-fw,
.fa.fa-users.fa-fw,
.fa.fa-globe.fa-fw { vertical-align: text-bottom }
}
// getting-started and side bar icons
.column-link .fa,
.column-link--transparent .fa { vertical-align: text-bottom }
// uploaded media icons align
.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
@ -209,3 +231,18 @@ button.icon-button.disabled i.fa-retweet:hover {
// search results icons align
.search-results__header .fa { vertical-align: text-bottom }
// read more icon
.status__content__read-more-button .fa { vertical-align: bottom }
// status detail icon
.detailed-status .fa {
font-size: 16px;
vertical-align: text-bottom;
}
// status scope
.status__visibility-icon .fa {
font-size: 16px;
vertical-align: text-bottom;
}

16
app/javascript/styles/mastodon-material-light/theme/media.scss
View File

@ -12,23 +12,25 @@
}
.media-modal__close {
align-content: center;
&.icon-button {
background: transparent;
color: $media-icon-color;
text-align: center !important;
font-size: 24px !important;
width: 48px !important;
height: 48px !important;
border: 12px;
width: 24px !important;
height: 24px !important;
padding: 8px;
box-sizing: content-box;
line-height: normal !important;
&:hover {
background: $media-icon-bg-hover-color;
color: $media-icon-hover-color;
}
.fa-fw { width: 24px }
.fa-fw {
width: 24px;
height: 24px;
}
}
}

1
app/javascript/styles/mastodon-material-light/theme/modal.scss
View File

@ -10,7 +10,6 @@
background: $card-bg-color;
color: $ui-text-color;
border-radius: $dialog-radius;
width: 300px;
&__container {
text-align: left;

24
app/javascript/styles/mastodon-material-light/theme/responsive.scss
View File

@ -39,6 +39,10 @@
background: $floating-action-button-color;
color: $floating-action-button-icon-color;
font-size: 24px;
width: $fab-size;
height: $fab-size;
bottom: 16px;
right: 16px;
&:hover { background: $floating-action-button-hover-color }
@ -60,6 +64,11 @@
}
}
// small size screen
@media screen and (max-width: 415px) {
.public-layout { padding-top: 64px }
}
// middle size screen
@media screen and (min-width: 415px) {
.tabs-bar {
@ -72,17 +81,22 @@
}
}
.columns-area__panels__main {
@include shadow-1dp;
padding: 0;
.columns-area__panels {
&__main {
@include shadow-1dp;
padding: 0;
}
&__pane { padding: 0 16px }
}
}
//single column mode
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
background: $tab-indicator-bg-hover-color;
border-bottom-color: $tab-bg-color;
border-bottom-color: transparent;
}
&:active,
@ -90,5 +104,7 @@
background: $tab-indicator-bg-focus-color;
border-bottom-color: $tab-bg-color;
}
&.active { border-bottom-color: $tab-indicator-active-color }
}
}

92
app/javascript/styles/mastodon-material-light/theme/statuses.scss
View File

@ -6,7 +6,7 @@
.status {
padding: 12px 12px 12px 70px;
padding: 12px 12px 4px 70px;
border-bottom: 1px solid $border-color;
&__expand { width: 70px }
@ -40,6 +40,8 @@
&.unhandled-link { color: $link-text-color }
}
p { margin-bottom: 16px }
.status__content__spoiler-link {
background: transparent;
@ -69,9 +71,47 @@
}
&__action-bar {
&__counter__label {
font-size: 14px;
color: $info-text-color;
margin-top: 4px;
&__counter {
margin-right: 6px;
&__label {
font-size: 14px;
color: $info-text-color;
}
}
}
&__action-bar-button {
margin-right: 6px;
&.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
&__action-bar-dropdown {
width: 36px !important;
height: 36px !important;
box-sizing: content-box;
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
&:hover {
color:$icon-hover-color;
background: $icon-bg-hover-color;
}
}
}
@ -154,6 +194,9 @@ a.status-card {
&:hover { background-color: $card-bg-color }
}
.embed .status,
.public-layout .status { padding: 16px 16px 16px 80px }
// Detailed status in mobile
.status.light {
.status {
@ -170,6 +213,8 @@ a.status-card {
background: $card-bg-color;
padding: 16px;
&.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
&__display-name {
color: $secondary-text-color;
@ -185,11 +230,28 @@ a.status-card {
background: $card-bg-color;
border-top: none;
border-bottom: 1px solid $border-color;
padding: 12px 0;
padding: 8px 0;
}
&__action-bar-dropdown {
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
}
}
&__button {
.icon-button { font-size: 20px !important }
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
}
@ -198,3 +260,21 @@ a.status-card {
&__html { color: $primary-text-color }
&__account { color: $secondary-text-color }
}
.activity-stream {
@include shadow-1dp;
margin-bottom: 16px;
border-radius: $card-radius;
.entry {
background: $card-bg-color;
&:first-child {
.detailed-status,
.load-more,
.status { border-radius: $card-radius $card-radius 0 0 }
}
}
}
.entry.entry-center { border-bottom: 1px solid $border-color }

8
app/javascript/styles/mastodon-material-light/theme/theme.scss
View File

@ -1,4 +1,10 @@
/*
* Mastodon Material 0.2.0
* Author: Rintan, Genbu Project
* Copyright (C) 2020 Rintan, Genbu Project
*/
@charset "UTF-8";
@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';

32
app/javascript/styles/mastodon-material-light/theme/widgets.scss Normal file
View File

@ -0,0 +1,32 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.hero-widget {
@include shadow-2dp;
margin-bottom: 16px;
&__img {
border-radius: $card-radius $card-radius 0 0;
background: $card-bg-color;
img { border-radius: $card-radius $card-radius 0 0 }
}
&__text {
background: $card-bg-color;
padding: 16px;
color: $primary-text-color;
border-radius: 0 0 $card-radius $card-radius;
}
}
.endorsements-widget {
padding-bottom: 8px;
margin-bottom: 8px;
}
.trends-widget h4 { color: $section-text-color }

7
app/javascript/styles/material-black.scss
View File

@ -1,9 +1,2 @@
/*
* Mastodon Material 0.2.0
* Author: Rintan, Genbu Project
* Copyright (C) 2020 Rintan, Genbu Project
*/
@import 'application';
@import 'material-black/loader';

14
app/javascript/styles/material-black/color/black.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #1e1e1e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #121212;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
@ -56,10 +58,10 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-hover-color: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$disabled-icon-color: darken($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/material-black/color/mastodon-dark.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #42485a;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #393f4f;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#42485a, 0.2);
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/material-black/color/mastodon-light.scss
View File

@ -40,11 +40,13 @@ $verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/material-black/color/plus-classic.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

16
app/javascript/styles/material-black/color/v1-dark.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #2e2e2e;
$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
@ -56,10 +58,10 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-hover-color: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$disabled-icon-color: darken($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/material-black/color/v1-light.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

14
app/javascript/styles/material-black/color/v2-dark.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #2e2e2e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
@ -56,10 +58,10 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-hover-color: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$disabled-icon-color: darken($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/material-black/color/v2-light.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

4
app/javascript/styles/material-black/layout/material-v1.scss
View File

@ -49,3 +49,7 @@ $outlined-chip: false; // Material v1 styled contained chip
// Button shadow
$button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px;

5
app/javascript/styles/material-black/layout/material-v2.scss
View File

@ -57,3 +57,8 @@ $outlined-chip: true; // Material v2 styled outlined chip
// Button shadow
$button-shadow: false; // Material v2 styled colored button without shadow
//$button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px; // Regular
//$fab-size: 40px; // Mini

17
app/javascript/styles/material-black/plugins/dense.scss
View File

@ -5,20 +5,21 @@
.drawer {
&__tab { margin: 8px auto 8px }
&__header { height: 48px }
&__tab { margin: 6px auto 6px }
}
.column { margin: 10px 5px }
.column-header {
height: 48px;
> button { padding: 12px 16px }
&__buttons { height: 48px }
&__button {
margin: 8px;
padding: 10px 8px;
.fa { vertical-align: text-top }
}
&__button { margin: 6px }
}
.column-subheading { padding: 8px 16px }
@ -38,7 +39,7 @@
}
.status {
padding: 8px 8px 8px 66px;
padding: 8px 8px 4px 66px;
&__expand { width: 66px }

8
app/javascript/styles/material-black/theme/_mixins.scss
View File

@ -45,7 +45,7 @@ $shadow-color-3: rgba(0,0,0,.12);
@if $outlined-chip {
.reactions-bar__item {
background: $outlined-chip-color !important;
border: 1px solid $border-color !important;
border: 1px solid $outlined-chip-selected-border-color !important;
&.active { background-color: $outlined-chip-selected-color !important }
@ -61,6 +61,12 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
@mixin icon-button {
width: 20px !important;
height: 20px !important;
font-size: 20px !important;
}
// check background-image value
@mixin bg-image {
@if $bg-image == none {

21
app/javascript/styles/material-black/theme/account.scss
View File

@ -6,6 +6,7 @@
.account {
border-bottom: 1px solid $border-color;
padding: 16px;
.account__display-name,
.account__display-name strong { color: $primary-text-color }
@ -27,6 +28,11 @@
}
}
&__avatar-wrapper {
margin-left: 0;
margin-right: 16px;
}
&__header {
&__bar {
background: $card-bg-color;
@ -51,9 +57,11 @@
&__buttons {
.icon-button {
@include icon-button;
border: none;
border-radius: 50%;
padding: 0;
padding: 8px;
margin-left: 8px;
}
}
}
@ -157,6 +165,17 @@
&:hover { background: $text-tab-indicator-bg-hover-color }
}
}
&__relationship {
padding: 0;
height: auto;
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
}
.account-role {

66
app/javascript/styles/material-black/theme/button.scss
View File

@ -21,16 +21,23 @@
&.inverted {
color: $icon-button-color;
&.active { color: $icon-button-active-color }
&:hover {
color: $icon-button-hover-color;
background-color: $icon-bg-hover-color;
}
&:focus { background-color: transparent }
}
&.overlayed {
@include icon-button;
border-radius: 50%;
background: $media-icon-bg-color;
color: $media-icon-color;
padding: 4px;
line-height: 20px !important;
&:hover {
background: $media-icon-bg-color;
@ -76,38 +83,53 @@ label.icon-button {
}
}
.button,
.button:active,
.button:focus {
.button {
background-color: $contained-button-color;
border-radius: $button-radius;
}
.button:hover {
@include shadow-2dp;
background-color: $contained-button-hover-color;
}
&:active,
&:focus {
background-color: $contained-button-color;
border-radius: $button-radius;
}
.button.logo-button {
background: $contained-button-color;
margin: 2px;
&:hover {
@include shadow-2dp;
background-color: $contained-button-hover-color;
}
&:hover { background: $contained-button-hover-color }
&.logo-button {
background: $contained-button-color;
margin: 2px;
.button--destructive:hover { background: $contained-button-hover-color }
}
&:hover { background: $contained-button-hover-color }
.button.button--block { margin: 8px 0 }
.button--destructive:hover { background: $contained-button-hover-color }
}
.button.confirmation-modal__cancel-button {
box-shadow: none;
background-color: transparent;
margin: 0 8px;
color: $text-button-color;
&.button--block { margin: 8px 0 }
&:hover { background: $text-button-hover-color }
&.button-secondary {
color: $text-button-color;
border: none;
box-shadow: none;
&:focus { background: $text-button-focus-color }
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
}
&.confirmation-modal__cancel-button {
box-shadow: none;
background-color: transparent;
margin: 0 8px;
color: $text-button-color;
&:hover { background: $text-button-hover-color }
&:focus { background: $text-button-focus-color }
}
}
.spoiler-button__overlay__label {

40
app/javascript/styles/material-black/theme/columns.scss
View File

@ -21,9 +21,10 @@
.column-header {
background: $top-bar-color;
border-radius: $bar-radius;
height: 56px;
> button {
padding: 16px 0 16px 16px;
padding: 16px;
color: $top-bar-text-color;
}
@ -45,12 +46,13 @@
&__buttons { height: 56px }
&__button {
@include icon-button;
background: $top-bar-color;
color: $top-bar-icon-color;
margin: 8px 10px;
padding: 10px;
padding: 8px;
margin: 10px;
border-radius: 50%;
font-size: 20px;
box-sizing: content-box;
&.active {
color: $top-bar-icon-active-color;
@ -136,6 +138,7 @@
color: $section-text-color;
background: $bg-color;
padding: 12px 16px;
margin-top: 8px;
border-top: 1px solid $border-color;
}
@ -192,6 +195,8 @@
padding: 16px;
span { visibility: hidden } // hide "back" string
&--slim-button { top: -54px }
}
.column-inline-form {
@ -296,6 +301,7 @@
&__wrapper {
background: $bg-color;
height: auto !important;
padding-bottom: 8px;
border-bottom: 1px solid $border-color;
}
@ -321,6 +327,7 @@
h4 {
color: $section-text-color;
padding: 12px 16px;
margin-top: 8px;
border-top: 1px solid $border-color;
border-bottom: none;
}
@ -384,15 +391,18 @@
&__pagination {
color: $ui-text-color;
padding: 8px 16px;
bottom: 8px;
padding: 16px;
bottom: 0;
.icon-button {
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
margin: 0 8px;
@include icon-button;
padding: 8px;
margin: 0 4px;
line-height: normal !important;
box-sizing: content-box;
}
span { vertical-align: super }
}
}
@ -401,6 +411,9 @@
@include outlined-chip;
.reactions-bar {
margin-top: 16px;
width: calc(100% - 72px);
.emoji-button {
color: $icon-button-color;
font-size: 20px;
@ -417,7 +430,10 @@
&.active {
background-color: $contained-chip-selected-color;
.reactions-bar__item__count { color: $ui-text-color }
.reactions-bar__item__count { color: $chip-selected-text-color }
&:hover { background-color: $contained-chip-selected-color }
}
&__emoji {
@ -428,7 +444,7 @@
&__count {
font-size: 16px;
margin: 0 8px;
margin: 0 12px 0 8px;
color: $secondary-text-color;
}

70
app/javascript/styles/material-black/theme/components.scss
View File

@ -121,7 +121,7 @@
background-color: $card-bg-color;
padding: 16px;
.fa { margin-right: 8px }
.fa { margin-right: 16px }
}
&__section {
@ -148,6 +148,11 @@
width: 36px !important;
height: 36px !important;
padding: 8px;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
}
}
@ -156,6 +161,8 @@
margin: 8px 0;
}
.flex-spacer { margin: 8px 0 }
.dropdown-menu {
@include shadow-8dp;
background: $menu-bg-color;
@ -233,6 +240,7 @@
padding: 16px;
border: 1px solid $border-color;
border-radius: $card-radius;
box-shadow: none;
a { color: $link-text-color }
}
@ -263,8 +271,7 @@
padding: 8px;
.icon-button {
width: 20px !important;
height: 20px !important;
@include icon-button;
padding: 8px;
}
@ -291,14 +298,12 @@
.button.button-secondary {
box-shadow: none;
color: $outlined-button-color;
border-color: $outlined-button-color;
color: $text-button-color;
&:hover { background-color: $outlined-button-hover-color }
&:hover { background-color: $text-button-hover-color }
&:active { background-color: $outlined-button-active-color }
&:focus { background-color: $outlined-button-color }
&:active,
&:focus { background-color: $text-button-focus-color }
}
.poll__footer { border-top: none }
@ -312,17 +317,32 @@
.poll {
.button { margin-right: 8px }
li { margin-bottom: 0 }
&__input {
border: 2px solid $control-border-color;
border: none;
width: 20px;
height: 20px;
flex: 0 0 20px;
margin: 8px;
padding: 18px;
margin: 0 2px;
background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
&.checkbox { border-radius: 2px }
&:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
&:focus,
&:hover { border: 2px solid $control-border-color }
&.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
&.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
&.checkbox {
border-radius: 2px;
border: 2px solid $control-border-color;
padding: 8px;
margin: 8px 10px;
background: none;
}
}
&__text input[type=text] {
@ -334,12 +354,16 @@
&:focus { border-color: $border-active-color }
}
&__option input[type=text] {
color: $primary-text-color;
background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
&__option {
padding: 16px 0 8px;
input[type=text] {
color: $primary-text-color;
background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
}
}
&__chart {
@ -444,7 +468,11 @@
&-avatar { margin-right: 8px }
}
&__content { color: $primary-text-color }
&__content {
color: $primary-text-color;
p { margin-bottom: 16px }
}
}
.attachment-list {

57
app/javascript/styles/material-black/theme/containers.scss Normal file
View File

@ -0,0 +1,57 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.public-layout {
.header {
@include shadow-4dp;
background: $top-bar-color;
border-radius: $nav-bar-radius;
margin: 16px 0;
.brand:hover { background: $tab-indicator-bg-hover-color }
.nav-link,
.nav-link.optional {
color: $top-bar-text-color;
&:hover {
background: $tab-indicator-bg-hover-color;
text-decoration: none;
}
}
.nav-button {
background: transparent;
margin: 0;
border-radius: 0;
&:hover { background: $tab-indicator-bg-hover-color }
}
.detailed-status__meta { margin-top: 16px }
}
.detailed-status { padding: 16px }
.footer {
padding-top: 16px;
padding-bottom: 64px;
color: $ui-text-color;
h4 { color: $ui-text-color }
ul a { color: $secondary-text-color }
.grid .column-2 h4 a { color: $ui-text-color }
.brand {
svg { fill: $icon-color }
&:hover svg { fill: $icon-hover-color }
}
}
}

12
app/javascript/styles/material-black/theme/emoji-picker.scss
View File

@ -69,13 +69,13 @@
background: $menu-bg-color;
}
&-category-label span {
padding: 4px 6px;
background: $menu-bg-color;
}
&-category {
&-label span {
padding: 4px 6px;
background: $menu-bg-color;
}
&-emoji:hover::before {
background-color: $icon-bg-hover-color;
.emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
}
&-no-results { color: $secondary-text-color }

53
app/javascript/styles/material-black/theme/material-icons.scss
View File

@ -75,7 +75,8 @@
&.fa-check,
&.fa-quote-right,
&.fa-upload,
&.fa-comments {
&.fa-comments,
&.fa-angle-right {
@include icon-font-style;
line-height: 1;
letter-spacing: normal;
@ -143,6 +144,7 @@
&.fa-quote-right::before { content: "format_quote" }
&.fa-upload::before { content: "file_upload" }
&.fa-comments::before { content: "forum" }
&.fa-angle-right::before { content: "chevron_right" }
}
// bookmark icon
@ -170,17 +172,20 @@
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
// boost icon
button.icon-button i.fa-retweet,
button.icon-button i.fa-retweet:hover {
height: 18px;
width: 18px;
button.icon-button i.fa-retweet {
height: 20px;
width: 20px;
transition: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
}
button.icon-button i.fa-retweet:hover {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-hover-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
}
button.icon-button.disabled i.fa-retweet,
button.icon-button.disabled i.fa-retweet:hover {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
}
// dropdown icon
@ -199,7 +204,24 @@ button.icon-button.disabled i.fa-retweet:hover {
.fa.fa-bell.column-header__icon.fa-fw,
.fa.fa-home.column-header__icon.fa-fw,
.fa.fa-users.column-header__icon.fa-fw,
.fa.fa-globe.column-header__icon.fa-fw { vertical-align: text-bottom }
.fa.fa-globe.column-header__icon.fa-fw,
.fa.fa-bars.column-header__icon.fa-fw,
.fa.fa-bookmark.column-header__icon.fa-fw,
.fa.fa-address-book-o.column-header__icon.fa-fw,
.fa.fa-envelope.column-header__icon.fa-fw,
.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
// top bar icons in single column mode
.tabs-bar__link {
.fa.fa-home.fa-fw,
.fa.fa-bell.fa-fw,
.fa.fa-users.fa-fw,
.fa.fa-globe.fa-fw { vertical-align: text-bottom }
}
// getting-started and side bar icons
.column-link .fa,
.column-link--transparent .fa { vertical-align: text-bottom }
// uploaded media icons align
.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
@ -209,3 +231,18 @@ button.icon-button.disabled i.fa-retweet:hover {
// search results icons align
.search-results__header .fa { vertical-align: text-bottom }
// read more icon
.status__content__read-more-button .fa { vertical-align: bottom }
// status detail icon
.detailed-status .fa {
font-size: 16px;
vertical-align: text-bottom;
}
// status scope
.status__visibility-icon .fa {
font-size: 16px;
vertical-align: text-bottom;
}

16
app/javascript/styles/material-black/theme/media.scss
View File

@ -12,23 +12,25 @@
}
.media-modal__close {
align-content: center;
&.icon-button {
background: transparent;
color: $media-icon-color;
text-align: center !important;
font-size: 24px !important;
width: 48px !important;
height: 48px !important;
border: 12px;
width: 24px !important;
height: 24px !important;
padding: 8px;
box-sizing: content-box;
line-height: normal !important;
&:hover {
background: $media-icon-bg-hover-color;
color: $media-icon-hover-color;
}
.fa-fw { width: 24px }
.fa-fw {
width: 24px;
height: 24px;
}
}
}

1
app/javascript/styles/material-black/theme/modal.scss
View File

@ -10,7 +10,6 @@
background: $card-bg-color;
color: $ui-text-color;
border-radius: $dialog-radius;
width: 300px;
&__container {
text-align: left;

24
app/javascript/styles/material-black/theme/responsive.scss
View File

@ -39,6 +39,10 @@
background: $floating-action-button-color;
color: $floating-action-button-icon-color;
font-size: 24px;
width: $fab-size;
height: $fab-size;
bottom: 16px;
right: 16px;
&:hover { background: $floating-action-button-hover-color }
@ -60,6 +64,11 @@
}
}
// small size screen
@media screen and (max-width: 415px) {
.public-layout { padding-top: 64px }
}
// middle size screen
@media screen and (min-width: 415px) {
.tabs-bar {
@ -72,17 +81,22 @@
}
}
.columns-area__panels__main {
@include shadow-1dp;
padding: 0;
.columns-area__panels {
&__main {
@include shadow-1dp;
padding: 0;
}
&__pane { padding: 0 16px }
}
}
//single column mode
@media screen and (min-width: 631px) {
.tabs-bar__link {
&:hover {
background: $tab-indicator-bg-hover-color;
border-bottom-color: $tab-bg-color;
border-bottom-color: transparent;
}
&:active,
@ -90,5 +104,7 @@
background: $tab-indicator-bg-focus-color;
border-bottom-color: $tab-bg-color;
}
&.active { border-bottom-color: $tab-indicator-active-color }
}
}

92
app/javascript/styles/material-black/theme/statuses.scss
View File

@ -6,7 +6,7 @@
.status {
padding: 12px 12px 12px 70px;
padding: 12px 12px 4px 70px;
border-bottom: 1px solid $border-color;
&__expand { width: 70px }
@ -40,6 +40,8 @@
&.unhandled-link { color: $link-text-color }
}
p { margin-bottom: 16px }
.status__content__spoiler-link {
background: transparent;
@ -69,9 +71,47 @@
}
&__action-bar {
&__counter__label {
font-size: 14px;
color: $info-text-color;
margin-top: 4px;
&__counter {
margin-right: 6px;
&__label {
font-size: 14px;
color: $info-text-color;
}
}
}
&__action-bar-button {
margin-right: 6px;
&.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
&__action-bar-dropdown {
width: 36px !important;
height: 36px !important;
box-sizing: content-box;
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
&:hover {
color:$icon-hover-color;
background: $icon-bg-hover-color;
}
}
}
@ -154,6 +194,9 @@ a.status-card {
&:hover { background-color: $card-bg-color }
}
.embed .status,
.public-layout .status { padding: 16px 16px 16px 80px }
// Detailed status in mobile
.status.light {
.status {
@ -170,6 +213,8 @@ a.status-card {
background: $card-bg-color;
padding: 16px;
&.detailed-status--flex.detailed-status-public { border-radius: $card-radius }
&__display-name {
color: $secondary-text-color;
@ -185,11 +230,28 @@ a.status-card {
background: $card-bg-color;
border-top: none;
border-bottom: 1px solid $border-color;
padding: 12px 0;
padding: 8px 0;
}
&__action-bar-dropdown {
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
}
}
&__button {
.icon-button { font-size: 20px !important }
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
}
@ -198,3 +260,21 @@ a.status-card {
&__html { color: $primary-text-color }
&__account { color: $secondary-text-color }
}
.activity-stream {
@include shadow-1dp;
margin-bottom: 16px;
border-radius: $card-radius;
.entry {
background: $card-bg-color;
&:first-child {
.detailed-status,
.load-more,
.status { border-radius: $card-radius $card-radius 0 0 }
}
}
}
.entry.entry-center { border-bottom: 1px solid $border-color }

8
app/javascript/styles/material-black/theme/theme.scss
View File

@ -1,4 +1,10 @@
/*
* Mastodon Material 0.2.0
* Author: Rintan, Genbu Project
* Copyright (C) 2020 Rintan, Genbu Project
*/
@charset "UTF-8";
@import 'account', 'basics', 'button', 'columns', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables';
@import 'account', 'basics', 'button', 'columns', 'containers', 'components', 'base_config', 'control', 'emoji-picker', 'icons', 'media', 'modal', 'responsive', 'statuses', 'variables', 'widgets';

32
app/javascript/styles/material-black/theme/widgets.scss Normal file
View File

@ -0,0 +1,32 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.hero-widget {
@include shadow-2dp;
margin-bottom: 16px;
&__img {
border-radius: $card-radius $card-radius 0 0;
background: $card-bg-color;
img { border-radius: $card-radius $card-radius 0 0 }
}
&__text {
background: $card-bg-color;
padding: 16px;
color: $primary-text-color;
border-radius: 0 0 $card-radius $card-radius;
}
}
.endorsements-widget {
padding-bottom: 8px;
margin-bottom: 8px;
}
.trends-widget h4 { color: $section-text-color }

7
app/javascript/styles/material-dark.scss
View File

@ -1,9 +1,2 @@
/*
* Mastodon Material 0.2.0
* Author: Rintan, Genbu Project
* Copyright (C) 2020 Rintan, Genbu Project
*/
@import 'application';
@import 'material-dark/loader';

14
app/javascript/styles/material-dark/color/black.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #1e1e1e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #121212;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
@ -56,10 +58,10 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-hover-color: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$disabled-icon-color: darken($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/material-dark/color/mastodon-dark.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #42485a;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #393f4f;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#42485a, 0.2);
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/material-dark/color/mastodon-light.scss
View File

@ -40,11 +40,13 @@ $verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/material-dark/color/plus-classic.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

16
app/javascript/styles/material-dark/color/v1-dark.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #2e2e2e;
$contained-chip-hover-color: lighten(tranparentize(#2e2e2e, 0.3), 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
@ -56,10 +58,10 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-hover-color: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$disabled-icon-color: darken($icon-color, 16%);
$top-bar-icon-color: #ffffff;
$top-bar-icon-hover-color: lighten($top-bar-icon-color, 10%);
$top-bar-icon-active-color: lighten($top-bar-icon-color, 18%);
@ -67,7 +69,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/material-dark/color/v1-light.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

14
app/javascript/styles/material-dark/color/v2-dark.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: darken($verified-color, 20%);
// Chip color
$contained-chip-color: #2e2e2e;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: lighten($contained-chip-color, 6%);
$contained-chip-selected-color: lighten($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #1e1e1e;
$outlined-chip-hover-color: lighten($outlined-chip-color, 6%);
$outlined-chip-selected-color: lighten($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#2e2e2e, 0.2);
@ -56,10 +58,10 @@ $badge-color: $primary-color;
// Icon color
$icon-color: #e2e2e3;
$icon-hover-color: lighten($icon-color, 30%);
$icon-hover-color: #ffffff;
$icon-bg-hover-color: transparentize(#ffffff, 0.8);
$icon-bg-active-color: transparentize(#ffffff, 0.7);
$disabled-icon-color: lighten($icon-color, 16%);
$disabled-icon-color: darken($icon-color, 16%);
$top-bar-icon-color: $icon-color;
$top-bar-icon-hover-color: $icon-hover-color;
$top-bar-icon-active-color: $primary-color;
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

10
app/javascript/styles/material-dark/color/v2-light.scss
View File

@ -41,11 +41,13 @@ $verified-bg-color: lighten($verified-color, 20%);
// Chip color
$contained-chip-color: #e0e0e0;
$chip-selected-text-color: $primary-color;
$contained-chip-hover-color: darken($contained-chip-color, 6%);
$contained-chip-selected-color: darken($contained-chip-color, 12%);
$contained-chip-selected-color: transparentize($chip-selected-text-color, 0.7);
$outlined-chip-color: #ffffff;
$outlined-chip-hover-color: darken($outlined-chip-color, 6%);
$outlined-chip-selected-color: darken($outlined-chip-color, 12%);
$outlined-chip-selected-color: transparentize($chip-selected-text-color, 0.8);
$outlined-chip-selected-border-color: transparentize($chip-selected-text-color, 0.7);
// Relationship tag color
$relationship-tag-color: transparentize(#e0e0e0, 0.2);
@ -68,7 +70,11 @@ $media-icon-color: transparentize(#ffffff, 0.4);
$media-icon-hover-color: transparentize(#ffffff, 0.2);
$media-icon-bg-color: transparentize(#000000, 0.5);
$media-icon-bg-hover-color: transparentize(#000000, 0.8);
// Control color
$control-border-color: $icon-color;
$control-border-active-color: $primary-color;
$control-border-hover-color: transparentize($control-border-active-color, 0.8);
// Button color
$icon-button-color: $icon-color;

4
app/javascript/styles/material-dark/layout/material-v1.scss
View File

@ -49,3 +49,7 @@ $outlined-chip: false; // Material v1 styled contained chip
// Button shadow
$button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px;

5
app/javascript/styles/material-dark/layout/material-v2.scss
View File

@ -57,3 +57,8 @@ $outlined-chip: true; // Material v2 styled outlined chip
// Button shadow
$button-shadow: false; // Material v2 styled colored button without shadow
//$button-shadow: true; // Material v1 styled colored button with shadow
// Floating Action Button size
$fab-size: 56px; // Regular
//$fab-size: 40px; // Mini

17
app/javascript/styles/material-dark/plugins/dense.scss
View File

@ -5,20 +5,21 @@
.drawer {
&__tab { margin: 8px auto 8px }
&__header { height: 48px }
&__tab { margin: 6px auto 6px }
}
.column { margin: 10px 5px }
.column-header {
height: 48px;
> button { padding: 12px 16px }
&__buttons { height: 48px }
&__button {
margin: 8px;
padding: 10px 8px;
.fa { vertical-align: text-top }
}
&__button { margin: 6px }
}
.column-subheading { padding: 8px 16px }
@ -38,7 +39,7 @@
}
.status {
padding: 8px 8px 8px 66px;
padding: 8px 8px 4px 66px;
&__expand { width: 66px }

8
app/javascript/styles/material-dark/theme/_mixins.scss
View File

@ -45,7 +45,7 @@ $shadow-color-3: rgba(0,0,0,.12);
@if $outlined-chip {
.reactions-bar__item {
background: $outlined-chip-color !important;
border: 1px solid $border-color !important;
border: 1px solid $outlined-chip-selected-border-color !important;
&.active { background-color: $outlined-chip-selected-color !important }
@ -61,6 +61,12 @@ $shadow-color-3: rgba(0,0,0,.12);
}
}
@mixin icon-button {
width: 20px !important;
height: 20px !important;
font-size: 20px !important;
}
// check background-image value
@mixin bg-image {
@if $bg-image == none {

21
app/javascript/styles/material-dark/theme/account.scss
View File

@ -6,6 +6,7 @@
.account {
border-bottom: 1px solid $border-color;
padding: 16px;
.account__display-name,
.account__display-name strong { color: $primary-text-color }
@ -27,6 +28,11 @@
}
}
&__avatar-wrapper {
margin-left: 0;
margin-right: 16px;
}
&__header {
&__bar {
background: $card-bg-color;
@ -51,9 +57,11 @@
&__buttons {
.icon-button {
@include icon-button;
border: none;
border-radius: 50%;
padding: 0;
padding: 8px;
margin-left: 8px;
}
}
}
@ -157,6 +165,17 @@
&:hover { background: $text-tab-indicator-bg-hover-color }
}
}
&__relationship {
padding: 0;
height: auto;
.icon-button {
@include icon-button;
padding: 8px;
box-sizing: content-box;
}
}
}
.account-role {

66
app/javascript/styles/material-dark/theme/button.scss
View File

@ -21,16 +21,23 @@
&.inverted {
color: $icon-button-color;
&.active { color: $icon-button-active-color }
&:hover {
color: $icon-button-hover-color;
background-color: $icon-bg-hover-color;
}
&:focus { background-color: transparent }
}
&.overlayed {
@include icon-button;
border-radius: 50%;
background: $media-icon-bg-color;
color: $media-icon-color;
padding: 4px;
line-height: 20px !important;
&:hover {
background: $media-icon-bg-color;
@ -76,38 +83,53 @@ label.icon-button {
}
}
.button,
.button:active,
.button:focus {
.button {
background-color: $contained-button-color;
border-radius: $button-radius;
}
.button:hover {
@include shadow-2dp;
background-color: $contained-button-hover-color;
}
&:active,
&:focus {
background-color: $contained-button-color;
border-radius: $button-radius;
}
.button.logo-button {
background: $contained-button-color;
margin: 2px;
&:hover {
@include shadow-2dp;
background-color: $contained-button-hover-color;
}
&:hover { background: $contained-button-hover-color }
&.logo-button {
background: $contained-button-color;
margin: 2px;
.button--destructive:hover { background: $contained-button-hover-color }
}
&:hover { background: $contained-button-hover-color }
.button.button--block { margin: 8px 0 }
.button--destructive:hover { background: $contained-button-hover-color }
}
.button.confirmation-modal__cancel-button {
box-shadow: none;
background-color: transparent;
margin: 0 8px;
color: $text-button-color;
&.button--block { margin: 8px 0 }
&:hover { background: $text-button-hover-color }
&.button-secondary {
color: $text-button-color;
border: none;
box-shadow: none;
&:focus { background: $text-button-focus-color }
&:hover {
color: $text-button-color;
background-color: $text-button-hover-color;
}
}
&.confirmation-modal__cancel-button {
box-shadow: none;
background-color: transparent;
margin: 0 8px;
color: $text-button-color;
&:hover { background: $text-button-hover-color }
&:focus { background: $text-button-focus-color }
}
}
.spoiler-button__overlay__label {

40
app/javascript/styles/material-dark/theme/columns.scss
View File

@ -21,9 +21,10 @@
.column-header {
background: $top-bar-color;
border-radius: $bar-radius;
height: 56px;
> button {
padding: 16px 0 16px 16px;
padding: 16px;
color: $top-bar-text-color;
}
@ -45,12 +46,13 @@
&__buttons { height: 56px }
&__button {
@include icon-button;
background: $top-bar-color;
color: $top-bar-icon-color;
margin: 8px 10px;
padding: 10px;
padding: 8px;
margin: 10px;
border-radius: 50%;
font-size: 20px;
box-sizing: content-box;
&.active {
color: $top-bar-icon-active-color;
@ -136,6 +138,7 @@
color: $section-text-color;
background: $bg-color;
padding: 12px 16px;
margin-top: 8px;
border-top: 1px solid $border-color;
}
@ -192,6 +195,8 @@
padding: 16px;
span { visibility: hidden } // hide "back" string
&--slim-button { top: -54px }
}
.column-inline-form {
@ -296,6 +301,7 @@
&__wrapper {
background: $bg-color;
height: auto !important;
padding-bottom: 8px;
border-bottom: 1px solid $border-color;
}
@ -321,6 +327,7 @@
h4 {
color: $section-text-color;
padding: 12px 16px;
margin-top: 8px;
border-top: 1px solid $border-color;
border-bottom: none;
}
@ -384,15 +391,18 @@
&__pagination {
color: $ui-text-color;
padding: 8px 16px;
bottom: 8px;
padding: 16px;
bottom: 0;
.icon-button {
font-size: 20px !important;
width: 20px !important;
height: 20px !important;
margin: 0 8px;
@include icon-button;
padding: 8px;
margin: 0 4px;
line-height: normal !important;
box-sizing: content-box;
}
span { vertical-align: super }
}
}
@ -401,6 +411,9 @@
@include outlined-chip;
.reactions-bar {
margin-top: 16px;
width: calc(100% - 72px);
.emoji-button {
color: $icon-button-color;
font-size: 20px;
@ -417,7 +430,10 @@
&.active {
background-color: $contained-chip-selected-color;
.reactions-bar__item__count { color: $ui-text-color }
.reactions-bar__item__count { color: $chip-selected-text-color }
&:hover { background-color: $contained-chip-selected-color }
}
&__emoji {
@ -428,7 +444,7 @@
&__count {
font-size: 16px;
margin: 0 8px;
margin: 0 12px 0 8px;
color: $secondary-text-color;
}

70
app/javascript/styles/material-dark/theme/components.scss
View File

@ -121,7 +121,7 @@
background-color: $card-bg-color;
padding: 16px;
.fa { margin-right: 8px }
.fa { margin-right: 16px }
}
&__section {
@ -148,6 +148,11 @@
width: 36px !important;
height: 36px !important;
padding: 8px;
&.active {
color: $icon-hover-color;
background: $icon-bg-active-color;
}
}
}
@ -156,6 +161,8 @@
margin: 8px 0;
}
.flex-spacer { margin: 8px 0 }
.dropdown-menu {
@include shadow-8dp;
background: $menu-bg-color;
@ -233,6 +240,7 @@
padding: 16px;
border: 1px solid $border-color;
border-radius: $card-radius;
box-shadow: none;
a { color: $link-text-color }
}
@ -263,8 +271,7 @@
padding: 8px;
.icon-button {
width: 20px !important;
height: 20px !important;
@include icon-button;
padding: 8px;
}
@ -291,14 +298,12 @@
.button.button-secondary {
box-shadow: none;
color: $outlined-button-color;
border-color: $outlined-button-color;
color: $text-button-color;
&:hover { background-color: $outlined-button-hover-color }
&:hover { background-color: $text-button-hover-color }
&:active { background-color: $outlined-button-active-color }
&:focus { background-color: $outlined-button-color }
&:active,
&:focus { background-color: $text-button-focus-color }
}
.poll__footer { border-top: none }
@ -312,17 +317,32 @@
.poll {
.button { margin-right: 8px }
li { margin-bottom: 0 }
&__input {
border: 2px solid $control-border-color;
border: none;
width: 20px;
height: 20px;
flex: 0 0 20px;
margin: 8px;
padding: 18px;
margin: 0 2px;
background: radial-gradient(circle, transparent, transparent 7px, $control-border-color 8px, $control-border-color 9px, transparent 10px, transparent);
&.checkbox { border-radius: 2px }
&:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color)}
&:focus,
&:hover { border: 2px solid $control-border-color }
&.active { background: radial-gradient(circle, $control-border-active-color, $control-border-active-color 4px, transparent 5px, transparent 7px, $control-border-active-color 8px, $control-border-active-color 9px, transparent 10px, transparent) }
&.active:hover { background: radial-gradient(circle, $control-border-hover-color, $control-border-hover-color 7px, $control-border-color 8px, $control-border-color 9px, $control-border-hover-color 10px, $control-border-hover-color) }
&.checkbox {
border-radius: 2px;
border: 2px solid $control-border-color;
padding: 8px;
margin: 8px 10px;
background: none;
}
}
&__text input[type=text] {
@ -334,12 +354,16 @@
&:focus { border-color: $border-active-color }
}
&__option input[type=text] {
color: $primary-text-color;
background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
&__option {
padding: 16px 0 8px;
input[type=text] {
color: $primary-text-color;
background: $text-field-bg-color;
border: none;
border-radius: 2px;
padding: 8px 16px;
}
}
&__chart {
@ -444,7 +468,11 @@
&-avatar { margin-right: 8px }
}
&__content { color: $primary-text-color }
&__content {
color: $primary-text-color;
p { margin-bottom: 16px }
}
}
.attachment-list {

57
app/javascript/styles/material-dark/theme/containers.scss Normal file
View File

@ -0,0 +1,57 @@
@charset "UTF-8";
@import 'base_config';
@import '../custom_config';
@import '../custom_color', '../custom_layout';
@import 'mixins';
.public-layout {
.header {
@include shadow-4dp;
background: $top-bar-color;
border-radius: $nav-bar-radius;
margin: 16px 0;
.brand:hover { background: $tab-indicator-bg-hover-color }
.nav-link,
.nav-link.optional {
color: $top-bar-text-color;
&:hover {
background: $tab-indicator-bg-hover-color;
text-decoration: none;
}
}
.nav-button {
background: transparent;
margin: 0;
border-radius: 0;
&:hover { background: $tab-indicator-bg-hover-color }
}
.detailed-status__meta { margin-top: 16px }
}
.detailed-status { padding: 16px }
.footer {
padding-top: 16px;
padding-bottom: 64px;
color: $ui-text-color;
h4 { color: $ui-text-color }
ul a { color: $secondary-text-color }
.grid .column-2 h4 a { color: $ui-text-color }
.brand {
svg { fill: $icon-color }
&:hover svg { fill: $icon-hover-color }
}
}
}

12
app/javascript/styles/material-dark/theme/emoji-picker.scss
View File

@ -69,13 +69,13 @@
background: $menu-bg-color;
}
&-category-label span {
padding: 4px 6px;
background: $menu-bg-color;
}
&-category {
&-label span {
padding: 4px 6px;
background: $menu-bg-color;
}
&-emoji:hover::before {
background-color: $icon-bg-hover-color;
.emoji-mart-emoji:hover::before { background-color: $icon-bg-hover-color }
}
&-no-results { color: $secondary-text-color }

53
app/javascript/styles/material-dark/theme/material-icons.scss
View File

@ -75,7 +75,8 @@
&.fa-check,
&.fa-quote-right,
&.fa-upload,
&.fa-comments {
&.fa-comments,
&.fa-angle-right {
@include icon-font-style;
line-height: 1;
letter-spacing: normal;
@ -143,6 +144,7 @@
&.fa-quote-right::before { content: "format_quote" }
&.fa-upload::before { content: "file_upload" }
&.fa-comments::before { content: "forum" }
&.fa-angle-right::before { content: "chevron_right" }
}
// bookmark icon
@ -170,17 +172,20 @@
.status__action-bar-button.star-icon.icon-button.active { color: $favorite-icon-color }
// boost icon
button.icon-button i.fa-retweet,
button.icon-button i.fa-retweet:hover {
height: 18px;
width: 18px;
button.icon-button i.fa-retweet {
height: 20px;
width: 20px;
transition: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="36" width="18"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
}
button.icon-button i.fa-retweet:hover {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" id="svg4" version="1.1" viewBox="0 0 24 48" height="40px" width="20px"><path d="M 7,7 H 17 V 10 l 4,-4 -4,-4 v 3 H 5 V 11 h 2 z M 17,17 H 7 V 14 L 3,18 7,22 V 19 H 19 v -6 h -2 z" fill="#{svg-color($icon-hover-color)}" stroke-width="0"/><path d="m 7,31 h 10 v 3 l 4,-4 -4,-4 v 3 H 5 v 6 H 7 Z M 17,41 H 7 v -3 l -4,4 4,4 v -3 h 12 v -6 h -2 z" fill="#{svg-color($icon-button-active-color)}" stroke-width="0"/></svg>');
}
button.icon-button.disabled i.fa-retweet,
button.icon-button.disabled i.fa-retweet:hover {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{svg-color($disabled-icon-color)}" width="20px" height="20px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>');
}
// dropdown icon
@ -199,7 +204,24 @@ button.icon-button.disabled i.fa-retweet:hover {
.fa.fa-bell.column-header__icon.fa-fw,
.fa.fa-home.column-header__icon.fa-fw,
.fa.fa-users.column-header__icon.fa-fw,
.fa.fa-globe.column-header__icon.fa-fw { vertical-align: text-bottom }
.fa.fa-globe.column-header__icon.fa-fw,
.fa.fa-bars.column-header__icon.fa-fw,
.fa.fa-bookmark.column-header__icon.fa-fw,
.fa.fa-address-book-o.column-header__icon.fa-fw,
.fa.fa-envelope.column-header__icon.fa-fw,
.fa.fa-star.column-header__icon.fa-fw { vertical-align: text-bottom }
// top bar icons in single column mode
.tabs-bar__link {
.fa.fa-home.fa-fw,
.fa.fa-bell.fa-fw,
.fa.fa-users.fa-fw,
.fa.fa-globe.fa-fw { vertical-align: text-bottom }
}
// getting-started and side bar icons
.column-link .fa,
.column-link--transparent .fa { vertical-align: text-bottom }
// uploaded media icons align
.compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button .fa {
@ -209,3 +231,18 @@ button.icon-button.disabled i.fa-retweet:hover {
// search results icons align
.search-results__header .fa { vertical-align: text-bottom }
// read more icon
.status__content__read-more-button .fa { vertical-align: bottom }
// status detail icon
.detailed-status .fa {
font-size: 16px;
vertical-align: text-bottom;
}
// status scope
.status__visibility-icon .fa {
font-size: 16px;
vertical-align: text-bottom;
}

16
app/javascript/styles/material-dark/theme/media.scss
View File

@ -12,23 +12,25 @@
}
.media-modal__close {
align-content: center;
&.icon-button {
background: transparent;
color: $media-icon-color;
text-align: center !important;
font-size: 24px !important;
width: 48px !important;
height: 48px !important;
border: 12px;
width: 24px !important;
height: 24px !important;
padding: 8px;
box-sizing: content-box;
line-height: normal !important;
&:hover {
background: $media-icon-bg-hover-color;
color: $media-icon-hover-color;
}
.fa-fw { width: 24px }
.fa-fw {
width: 24px;
height: 24px;
}
}
}

1
app/javascript/styles/material-dark/theme/modal.scss
View File

@ -10,7 +10,6 @@
background: $card-bg-color;
color: $ui-text-color;
border-radius: $dialog-radius;
width: 300px;
&__container {
text-align: left;

Some files were not shown because too many files have changed in this diff Show More