Merge pull request #308 from Rintan/features/material-theme
Mastodon v3.3.0向けのマテリアルテーマの修正
This commit is contained in:
GitHub
commit
6c163375df
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #1e1e1e;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #42485a;
|
||||
|
||||
@ -37,6 +37,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -51,6 +51,20 @@
|
||||
}
|
||||
|
||||
&__content { padding-top: 2px }
|
||||
|
||||
&__action-bar-button {
|
||||
margin: 0 4px;
|
||||
|
||||
&.icon-button { padding: 4px }
|
||||
}
|
||||
|
||||
&__action-bar-dropdown {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
margin: 0 4px;
|
||||
|
||||
.icon-button { padding: 4px }
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
|
||||
@ -12,6 +12,10 @@
|
||||
.fa { vertical-align: bottom }
|
||||
}
|
||||
|
||||
// exception
|
||||
.media-modal__overlay .picture-in-picture__footer .icon-button,
|
||||
.status__action-bar-button.icon-button--with-counter { background: transparent }
|
||||
|
||||
// favorite icon
|
||||
.star-icon.active,
|
||||
.star-icon.icon-button.active.activate,
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
@import '../custom_color', '../custom_layout';
|
||||
|
||||
|
||||
body { background: $bg-color }
|
||||
body,
|
||||
body.embed { background: $bg-color }
|
||||
|
||||
.focusable:focus { background: transparent }
|
||||
|
||||
|
||||
@ -45,6 +45,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__counter {
|
||||
width: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include material-transition;
|
||||
color: $icon-button-hover-color;
|
||||
|
||||
@ -223,6 +223,7 @@
|
||||
color: $secondary-text-color;
|
||||
background: $card-bg-color;
|
||||
font-size: 16px;
|
||||
contain: initial; // padding fix
|
||||
}
|
||||
|
||||
.conversation {
|
||||
@ -502,4 +503,9 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
||||
|
||||
// unread notification
|
||||
.notification.unread:before, .status__wrapper.unread:before { border-left: none }
|
||||
|
||||
.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
|
||||
@ -4,7 +4,13 @@
|
||||
@import '../custom_color', '../custom_layout';
|
||||
@import 'mixins';
|
||||
|
||||
.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
|
||||
.modal-root {
|
||||
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
|
||||
|
||||
&__overlay { background-color: rgba(0,0,0,.32) !important }
|
||||
|
||||
&__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
|
||||
}
|
||||
|
||||
.drawer {
|
||||
&__header {
|
||||
@ -364,6 +370,8 @@
|
||||
border-radius: 2px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
&__text { line-height: 34px }
|
||||
}
|
||||
|
||||
&__chart {
|
||||
|
||||
@ -60,6 +60,7 @@
|
||||
&:focus {
|
||||
@include shadow-2dp;
|
||||
background: $search-bar-focus-color;
|
||||
color: $search-bar-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,6 +48,7 @@
|
||||
&.fa-bookmark,
|
||||
&.fa-ellipsis-h,
|
||||
&.fa-bell,
|
||||
&.fa-bell-o,
|
||||
&.fa-eraser,
|
||||
&.fa-users,
|
||||
&.fa-file-text,
|
||||
@ -76,7 +77,8 @@
|
||||
&.fa-quote-right,
|
||||
&.fa-upload,
|
||||
&.fa-comments,
|
||||
&.fa-angle-right {
|
||||
&.fa-angle-right,
|
||||
&.fa-thumb-tack {
|
||||
@include icon-font-style;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
@ -116,6 +118,7 @@
|
||||
&.fa-bookmark::before { content: "bookmark" }
|
||||
&.fa-ellipsis-h::before { content: "more_horiz" }
|
||||
&.fa-bell::before { content: "notifications" }
|
||||
&.fa-bell-o::before { content: "notifications" }
|
||||
&.fa-eraser::before { content: "clear_all" }
|
||||
&.fa-users::before { content: "people" }
|
||||
&.fa-file-text::before { content: "web" }
|
||||
@ -145,6 +148,7 @@
|
||||
&.fa-upload::before { content: "file_upload" }
|
||||
&.fa-comments::before { content: "forum" }
|
||||
&.fa-angle-right::before { content: "chevron_right" }
|
||||
&.fa-thumb-tack::before { content: "push_pin" }
|
||||
}
|
||||
|
||||
// bookmark icon
|
||||
@ -179,12 +183,16 @@ button.icon-button i.fa-retweet {
|
||||
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 {
|
||||
.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { 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="#{$media-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,
|
||||
button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
|
||||
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 {
|
||||
button.icon-button.disabled i.fa-retweet:hover,
|
||||
button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
|
||||
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>');
|
||||
}
|
||||
|
||||
@ -242,7 +250,8 @@ button.icon-button.disabled i.fa-retweet:hover {
|
||||
}
|
||||
|
||||
// status scope
|
||||
.status__visibility-icon .fa {
|
||||
.status__visibility-icon .fa,
|
||||
.account__header__tabs__name .fa {
|
||||
font-size: 16px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
@ -11,29 +11,6 @@
|
||||
&__item { border-radius: $media-radius }
|
||||
}
|
||||
|
||||
.media-modal__close {
|
||||
&.icon-button {
|
||||
background: transparent;
|
||||
color: $media-icon-color;
|
||||
font-size: 24px !important;
|
||||
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;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-modal {
|
||||
&__nav {
|
||||
background: $media-icon-bg-color;
|
||||
@ -53,11 +30,47 @@
|
||||
&--active { background-color: $media-page-indicator-active-color }
|
||||
}
|
||||
|
||||
&__close {
|
||||
&.icon-button {
|
||||
background: transparent;
|
||||
color: $media-icon-color;
|
||||
font-size: 24px !important;
|
||||
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;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
bottom: 24px;
|
||||
|
||||
a { color: $media-icon-color }
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
.picture-in-picture__footer .icon-button {
|
||||
color: $media-icon-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $media-icon-hover-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-player {
|
||||
|
||||
@ -84,12 +84,19 @@
|
||||
}
|
||||
|
||||
&__action-bar-button {
|
||||
margin-right: 6px;
|
||||
margin-right: 4px;
|
||||
|
||||
&.icon-button {
|
||||
@include icon-button;
|
||||
padding: 8px;
|
||||
box-sizing: content-box;
|
||||
|
||||
&--with-counter {
|
||||
margin-right: 4px;
|
||||
width: auto !important;
|
||||
|
||||
&:hover { background: transparent }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -253,6 +260,11 @@ a.status-card {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
.button.logo-button {
|
||||
margin-bottom: 16px;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
// search user trends
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Mastodon Material 0.2.0
|
||||
* Mastodon Material 0.2.1
|
||||
* Author: Rintan, Genbu Project
|
||||
* Copyright (C) 2020 Rintan, Genbu Project
|
||||
*/
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #1e1e1e;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #42485a;
|
||||
|
||||
@ -37,6 +37,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -51,6 +51,20 @@
|
||||
}
|
||||
|
||||
&__content { padding-top: 2px }
|
||||
|
||||
&__action-bar-button {
|
||||
margin: 0 4px;
|
||||
|
||||
&.icon-button { padding: 4px }
|
||||
}
|
||||
|
||||
&__action-bar-dropdown {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
margin: 0 4px;
|
||||
|
||||
.icon-button { padding: 4px }
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
|
||||
@ -12,6 +12,10 @@
|
||||
.fa { vertical-align: bottom }
|
||||
}
|
||||
|
||||
// exception
|
||||
.media-modal__overlay .picture-in-picture__footer .icon-button,
|
||||
.status__action-bar-button.icon-button--with-counter { background: transparent }
|
||||
|
||||
// favorite icon
|
||||
.star-icon.active,
|
||||
.star-icon.icon-button.active.activate,
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
@import '../custom_color', '../custom_layout';
|
||||
|
||||
|
||||
body { background: $bg-color }
|
||||
body,
|
||||
body.embed { background: $bg-color }
|
||||
|
||||
.focusable:focus { background: transparent }
|
||||
|
||||
|
||||
@ -45,6 +45,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__counter {
|
||||
width: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include material-transition;
|
||||
color: $icon-button-hover-color;
|
||||
|
||||
@ -223,6 +223,7 @@
|
||||
color: $secondary-text-color;
|
||||
background: $card-bg-color;
|
||||
font-size: 16px;
|
||||
contain: initial; // padding fix
|
||||
}
|
||||
|
||||
.conversation {
|
||||
@ -502,4 +503,9 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
||||
|
||||
// unread notification
|
||||
.notification.unread:before, .status__wrapper.unread:before { border-left: none }
|
||||
|
||||
.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
|
||||
@ -4,7 +4,13 @@
|
||||
@import '../custom_color', '../custom_layout';
|
||||
@import 'mixins';
|
||||
|
||||
.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
|
||||
.modal-root {
|
||||
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
|
||||
|
||||
&__overlay { background-color: rgba(0,0,0,.32) !important }
|
||||
|
||||
&__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
|
||||
}
|
||||
|
||||
.drawer {
|
||||
&__header {
|
||||
@ -364,6 +370,8 @@
|
||||
border-radius: 2px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
&__text { line-height: 34px }
|
||||
}
|
||||
|
||||
&__chart {
|
||||
|
||||
@ -60,6 +60,7 @@
|
||||
&:focus {
|
||||
@include shadow-2dp;
|
||||
background: $search-bar-focus-color;
|
||||
color: $search-bar-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,6 +48,7 @@
|
||||
&.fa-bookmark,
|
||||
&.fa-ellipsis-h,
|
||||
&.fa-bell,
|
||||
&.fa-bell-o,
|
||||
&.fa-eraser,
|
||||
&.fa-users,
|
||||
&.fa-file-text,
|
||||
@ -76,7 +77,8 @@
|
||||
&.fa-quote-right,
|
||||
&.fa-upload,
|
||||
&.fa-comments,
|
||||
&.fa-angle-right {
|
||||
&.fa-angle-right,
|
||||
&.fa-thumb-tack {
|
||||
@include icon-font-style;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
@ -116,6 +118,7 @@
|
||||
&.fa-bookmark::before { content: "bookmark" }
|
||||
&.fa-ellipsis-h::before { content: "more_horiz" }
|
||||
&.fa-bell::before { content: "notifications" }
|
||||
&.fa-bell-o::before { content: "notifications" }
|
||||
&.fa-eraser::before { content: "clear_all" }
|
||||
&.fa-users::before { content: "people" }
|
||||
&.fa-file-text::before { content: "web" }
|
||||
@ -145,6 +148,7 @@
|
||||
&.fa-upload::before { content: "file_upload" }
|
||||
&.fa-comments::before { content: "forum" }
|
||||
&.fa-angle-right::before { content: "chevron_right" }
|
||||
&.fa-thumb-tack::before { content: "push_pin" }
|
||||
}
|
||||
|
||||
// bookmark icon
|
||||
@ -179,12 +183,16 @@ button.icon-button i.fa-retweet {
|
||||
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 {
|
||||
.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { 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="#{$media-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,
|
||||
button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
|
||||
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 {
|
||||
button.icon-button.disabled i.fa-retweet:hover,
|
||||
button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
|
||||
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>');
|
||||
}
|
||||
|
||||
@ -242,7 +250,8 @@ button.icon-button.disabled i.fa-retweet:hover {
|
||||
}
|
||||
|
||||
// status scope
|
||||
.status__visibility-icon .fa {
|
||||
.status__visibility-icon .fa,
|
||||
.account__header__tabs__name .fa {
|
||||
font-size: 16px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
@ -11,29 +11,6 @@
|
||||
&__item { border-radius: $media-radius }
|
||||
}
|
||||
|
||||
.media-modal__close {
|
||||
&.icon-button {
|
||||
background: transparent;
|
||||
color: $media-icon-color;
|
||||
font-size: 24px !important;
|
||||
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;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-modal {
|
||||
&__nav {
|
||||
background: $media-icon-bg-color;
|
||||
@ -53,11 +30,47 @@
|
||||
&--active { background-color: $media-page-indicator-active-color }
|
||||
}
|
||||
|
||||
&__close {
|
||||
&.icon-button {
|
||||
background: transparent;
|
||||
color: $media-icon-color;
|
||||
font-size: 24px !important;
|
||||
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;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
bottom: 24px;
|
||||
|
||||
a { color: $media-icon-color }
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
.picture-in-picture__footer .icon-button {
|
||||
color: $media-icon-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $media-icon-hover-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-player {
|
||||
|
||||
@ -84,12 +84,19 @@
|
||||
}
|
||||
|
||||
&__action-bar-button {
|
||||
margin-right: 6px;
|
||||
margin-right: 4px;
|
||||
|
||||
&.icon-button {
|
||||
@include icon-button;
|
||||
padding: 8px;
|
||||
box-sizing: content-box;
|
||||
|
||||
&--with-counter {
|
||||
margin-right: 4px;
|
||||
width: auto !important;
|
||||
|
||||
&:hover { background: transparent }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -253,6 +260,11 @@ a.status-card {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
.button.logo-button {
|
||||
margin-bottom: 16px;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
// search user trends
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Mastodon Material 0.2.0
|
||||
* Mastodon Material 0.2.1
|
||||
* Author: Rintan, Genbu Project
|
||||
* Copyright (C) 2020 Rintan, Genbu Project
|
||||
*/
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #1e1e1e;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #42485a;
|
||||
|
||||
@ -37,6 +37,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -51,6 +51,20 @@
|
||||
}
|
||||
|
||||
&__content { padding-top: 2px }
|
||||
|
||||
&__action-bar-button {
|
||||
margin: 0 4px;
|
||||
|
||||
&.icon-button { padding: 4px }
|
||||
}
|
||||
|
||||
&__action-bar-dropdown {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
margin: 0 4px;
|
||||
|
||||
.icon-button { padding: 4px }
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
|
||||
@ -12,6 +12,10 @@
|
||||
.fa { vertical-align: bottom }
|
||||
}
|
||||
|
||||
// exception
|
||||
.media-modal__overlay .picture-in-picture__footer .icon-button,
|
||||
.status__action-bar-button.icon-button--with-counter { background: transparent }
|
||||
|
||||
// favorite icon
|
||||
.star-icon.active,
|
||||
.star-icon.icon-button.active.activate,
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
@import '../custom_color', '../custom_layout';
|
||||
|
||||
|
||||
body { background: $bg-color }
|
||||
body,
|
||||
body.embed { background: $bg-color }
|
||||
|
||||
.focusable:focus { background: transparent }
|
||||
|
||||
|
||||
@ -45,6 +45,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__counter {
|
||||
width: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include material-transition;
|
||||
color: $icon-button-hover-color;
|
||||
|
||||
@ -223,6 +223,7 @@
|
||||
color: $secondary-text-color;
|
||||
background: $card-bg-color;
|
||||
font-size: 16px;
|
||||
contain: initial; // padding fix
|
||||
}
|
||||
|
||||
.conversation {
|
||||
@ -502,4 +503,9 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
||||
|
||||
// unread notification
|
||||
.notification.unread:before, .status__wrapper.unread:before { border-left: none }
|
||||
|
||||
.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
|
||||
@ -4,7 +4,13 @@
|
||||
@import '../custom_color', '../custom_layout';
|
||||
@import 'mixins';
|
||||
|
||||
.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
|
||||
.modal-root {
|
||||
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
|
||||
|
||||
&__overlay { background-color: rgba(0,0,0,.32) !important }
|
||||
|
||||
&__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
|
||||
}
|
||||
|
||||
.drawer {
|
||||
&__header {
|
||||
@ -364,6 +370,8 @@
|
||||
border-radius: 2px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
&__text { line-height: 34px }
|
||||
}
|
||||
|
||||
&__chart {
|
||||
|
||||
@ -60,6 +60,7 @@
|
||||
&:focus {
|
||||
@include shadow-2dp;
|
||||
background: $search-bar-focus-color;
|
||||
color: $search-bar-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,6 +48,7 @@
|
||||
&.fa-bookmark,
|
||||
&.fa-ellipsis-h,
|
||||
&.fa-bell,
|
||||
&.fa-bell-o,
|
||||
&.fa-eraser,
|
||||
&.fa-users,
|
||||
&.fa-file-text,
|
||||
@ -76,7 +77,8 @@
|
||||
&.fa-quote-right,
|
||||
&.fa-upload,
|
||||
&.fa-comments,
|
||||
&.fa-angle-right {
|
||||
&.fa-angle-right,
|
||||
&.fa-thumb-tack {
|
||||
@include icon-font-style;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
@ -116,6 +118,7 @@
|
||||
&.fa-bookmark::before { content: "bookmark" }
|
||||
&.fa-ellipsis-h::before { content: "more_horiz" }
|
||||
&.fa-bell::before { content: "notifications" }
|
||||
&.fa-bell-o::before { content: "notifications" }
|
||||
&.fa-eraser::before { content: "clear_all" }
|
||||
&.fa-users::before { content: "people" }
|
||||
&.fa-file-text::before { content: "web" }
|
||||
@ -145,6 +148,7 @@
|
||||
&.fa-upload::before { content: "file_upload" }
|
||||
&.fa-comments::before { content: "forum" }
|
||||
&.fa-angle-right::before { content: "chevron_right" }
|
||||
&.fa-thumb-tack::before { content: "push_pin" }
|
||||
}
|
||||
|
||||
// bookmark icon
|
||||
@ -179,12 +183,16 @@ button.icon-button i.fa-retweet {
|
||||
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 {
|
||||
.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { 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="#{$media-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,
|
||||
button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
|
||||
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 {
|
||||
button.icon-button.disabled i.fa-retweet:hover,
|
||||
button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
|
||||
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>');
|
||||
}
|
||||
|
||||
@ -242,7 +250,8 @@ button.icon-button.disabled i.fa-retweet:hover {
|
||||
}
|
||||
|
||||
// status scope
|
||||
.status__visibility-icon .fa {
|
||||
.status__visibility-icon .fa,
|
||||
.account__header__tabs__name .fa {
|
||||
font-size: 16px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
@ -11,29 +11,6 @@
|
||||
&__item { border-radius: $media-radius }
|
||||
}
|
||||
|
||||
.media-modal__close {
|
||||
&.icon-button {
|
||||
background: transparent;
|
||||
color: $media-icon-color;
|
||||
font-size: 24px !important;
|
||||
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;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-modal {
|
||||
&__nav {
|
||||
background: $media-icon-bg-color;
|
||||
@ -53,11 +30,47 @@
|
||||
&--active { background-color: $media-page-indicator-active-color }
|
||||
}
|
||||
|
||||
&__close {
|
||||
&.icon-button {
|
||||
background: transparent;
|
||||
color: $media-icon-color;
|
||||
font-size: 24px !important;
|
||||
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;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
bottom: 24px;
|
||||
|
||||
a { color: $media-icon-color }
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
.picture-in-picture__footer .icon-button {
|
||||
color: $media-icon-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $media-icon-hover-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-player {
|
||||
|
||||
@ -84,12 +84,19 @@
|
||||
}
|
||||
|
||||
&__action-bar-button {
|
||||
margin-right: 6px;
|
||||
margin-right: 4px;
|
||||
|
||||
&.icon-button {
|
||||
@include icon-button;
|
||||
padding: 8px;
|
||||
box-sizing: content-box;
|
||||
|
||||
&--with-counter {
|
||||
margin-right: 4px;
|
||||
width: auto !important;
|
||||
|
||||
&:hover { background: transparent }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -253,6 +260,11 @@ a.status-card {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
.button.logo-button {
|
||||
margin-bottom: 16px;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
// search user trends
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Mastodon Material 0.2.0
|
||||
* Mastodon Material 0.2.1
|
||||
* Author: Rintan, Genbu Project
|
||||
* Copyright (C) 2020 Rintan, Genbu Project
|
||||
*/
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #1e1e1e;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #42485a;
|
||||
|
||||
@ -37,6 +37,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -51,6 +51,20 @@
|
||||
}
|
||||
|
||||
&__content { padding-top: 2px }
|
||||
|
||||
&__action-bar-button {
|
||||
margin: 0 4px;
|
||||
|
||||
&.icon-button { padding: 4px }
|
||||
}
|
||||
|
||||
&__action-bar-dropdown {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
margin: 0 4px;
|
||||
|
||||
.icon-button { padding: 4px }
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
|
||||
@ -12,6 +12,10 @@
|
||||
.fa { vertical-align: bottom }
|
||||
}
|
||||
|
||||
// exception
|
||||
.media-modal__overlay .picture-in-picture__footer .icon-button,
|
||||
.status__action-bar-button.icon-button--with-counter { background: transparent }
|
||||
|
||||
// favorite icon
|
||||
.star-icon.active,
|
||||
.star-icon.icon-button.active.activate,
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
@import '../custom_color', '../custom_layout';
|
||||
|
||||
|
||||
body { background: $bg-color }
|
||||
body,
|
||||
body.embed { background: $bg-color }
|
||||
|
||||
.focusable:focus { background: transparent }
|
||||
|
||||
|
||||
@ -45,6 +45,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__counter {
|
||||
width: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include material-transition;
|
||||
color: $icon-button-hover-color;
|
||||
|
||||
@ -223,6 +223,7 @@
|
||||
color: $secondary-text-color;
|
||||
background: $card-bg-color;
|
||||
font-size: 16px;
|
||||
contain: initial; // padding fix
|
||||
}
|
||||
|
||||
.conversation {
|
||||
@ -502,4 +503,9 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
||||
|
||||
// unread notification
|
||||
.notification.unread:before, .status__wrapper.unread:before { border-left: none }
|
||||
|
||||
.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
|
||||
@ -4,7 +4,13 @@
|
||||
@import '../custom_color', '../custom_layout';
|
||||
@import 'mixins';
|
||||
|
||||
.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
|
||||
.modal-root {
|
||||
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
|
||||
|
||||
&__overlay { background-color: rgba(0,0,0,.32) !important }
|
||||
|
||||
&__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
|
||||
}
|
||||
|
||||
.drawer {
|
||||
&__header {
|
||||
@ -364,6 +370,8 @@
|
||||
border-radius: 2px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
&__text { line-height: 34px }
|
||||
}
|
||||
|
||||
&__chart {
|
||||
|
||||
@ -60,6 +60,7 @@
|
||||
&:focus {
|
||||
@include shadow-2dp;
|
||||
background: $search-bar-focus-color;
|
||||
color: $search-bar-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,6 +48,7 @@
|
||||
&.fa-bookmark,
|
||||
&.fa-ellipsis-h,
|
||||
&.fa-bell,
|
||||
&.fa-bell-o,
|
||||
&.fa-eraser,
|
||||
&.fa-users,
|
||||
&.fa-file-text,
|
||||
@ -76,7 +77,8 @@
|
||||
&.fa-quote-right,
|
||||
&.fa-upload,
|
||||
&.fa-comments,
|
||||
&.fa-angle-right {
|
||||
&.fa-angle-right,
|
||||
&.fa-thumb-tack {
|
||||
@include icon-font-style;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
@ -116,6 +118,7 @@
|
||||
&.fa-bookmark::before { content: "bookmark" }
|
||||
&.fa-ellipsis-h::before { content: "more_horiz" }
|
||||
&.fa-bell::before { content: "notifications" }
|
||||
&.fa-bell-o::before { content: "notifications" }
|
||||
&.fa-eraser::before { content: "clear_all" }
|
||||
&.fa-users::before { content: "people" }
|
||||
&.fa-file-text::before { content: "web" }
|
||||
@ -145,6 +148,7 @@
|
||||
&.fa-upload::before { content: "file_upload" }
|
||||
&.fa-comments::before { content: "forum" }
|
||||
&.fa-angle-right::before { content: "chevron_right" }
|
||||
&.fa-thumb-tack::before { content: "push_pin" }
|
||||
}
|
||||
|
||||
// bookmark icon
|
||||
@ -179,12 +183,16 @@ button.icon-button i.fa-retweet {
|
||||
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 {
|
||||
.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { 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="#{$media-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,
|
||||
button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
|
||||
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 {
|
||||
button.icon-button.disabled i.fa-retweet:hover,
|
||||
button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
|
||||
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>');
|
||||
}
|
||||
|
||||
@ -242,7 +250,8 @@ button.icon-button.disabled i.fa-retweet:hover {
|
||||
}
|
||||
|
||||
// status scope
|
||||
.status__visibility-icon .fa {
|
||||
.status__visibility-icon .fa,
|
||||
.account__header__tabs__name .fa {
|
||||
font-size: 16px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
@ -11,29 +11,6 @@
|
||||
&__item { border-radius: $media-radius }
|
||||
}
|
||||
|
||||
.media-modal__close {
|
||||
&.icon-button {
|
||||
background: transparent;
|
||||
color: $media-icon-color;
|
||||
font-size: 24px !important;
|
||||
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;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-modal {
|
||||
&__nav {
|
||||
background: $media-icon-bg-color;
|
||||
@ -53,11 +30,47 @@
|
||||
&--active { background-color: $media-page-indicator-active-color }
|
||||
}
|
||||
|
||||
&__close {
|
||||
&.icon-button {
|
||||
background: transparent;
|
||||
color: $media-icon-color;
|
||||
font-size: 24px !important;
|
||||
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;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
bottom: 24px;
|
||||
|
||||
a { color: $media-icon-color }
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
.picture-in-picture__footer .icon-button {
|
||||
color: $media-icon-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $media-icon-hover-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-player {
|
||||
|
||||
@ -84,12 +84,19 @@
|
||||
}
|
||||
|
||||
&__action-bar-button {
|
||||
margin-right: 6px;
|
||||
margin-right: 4px;
|
||||
|
||||
&.icon-button {
|
||||
@include icon-button;
|
||||
padding: 8px;
|
||||
box-sizing: content-box;
|
||||
|
||||
&--with-counter {
|
||||
margin-right: 4px;
|
||||
width: auto !important;
|
||||
|
||||
&:hover { background: transparent }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -253,6 +260,11 @@ a.status-card {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
.button.logo-button {
|
||||
margin-bottom: 16px;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
// search user trends
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Mastodon Material 0.2.0
|
||||
* Mastodon Material 0.2.1
|
||||
* Author: Rintan, Genbu Project
|
||||
* Copyright (C) 2020 Rintan, Genbu Project
|
||||
*/
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #1e1e1e;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #42485a;
|
||||
|
||||
@ -37,6 +37,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -51,6 +51,20 @@
|
||||
}
|
||||
|
||||
&__content { padding-top: 2px }
|
||||
|
||||
&__action-bar-button {
|
||||
margin: 0 4px;
|
||||
|
||||
&.icon-button { padding: 4px }
|
||||
}
|
||||
|
||||
&__action-bar-dropdown {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
margin: 0 4px;
|
||||
|
||||
.icon-button { padding: 4px }
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
|
||||
@ -12,6 +12,10 @@
|
||||
.fa { vertical-align: bottom }
|
||||
}
|
||||
|
||||
// exception
|
||||
.media-modal__overlay .picture-in-picture__footer .icon-button,
|
||||
.status__action-bar-button.icon-button--with-counter { background: transparent }
|
||||
|
||||
// favorite icon
|
||||
.star-icon.active,
|
||||
.star-icon.icon-button.active.activate,
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
@import '../custom_color', '../custom_layout';
|
||||
|
||||
|
||||
body { background: $bg-color }
|
||||
body,
|
||||
body.embed { background: $bg-color }
|
||||
|
||||
.focusable:focus { background: transparent }
|
||||
|
||||
|
||||
@ -45,6 +45,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__counter {
|
||||
width: 16px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include material-transition;
|
||||
color: $icon-button-hover-color;
|
||||
|
||||
@ -223,6 +223,7 @@
|
||||
color: $secondary-text-color;
|
||||
background: $card-bg-color;
|
||||
font-size: 16px;
|
||||
contain: initial; // padding fix
|
||||
}
|
||||
|
||||
.conversation {
|
||||
@ -502,4 +503,9 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
||||
.attachment-list__list a { color: $secondary-text-color }
|
||||
|
||||
// unread notification
|
||||
.notification.unread:before, .status__wrapper.unread:before { border-left: none }
|
||||
|
||||
.notification.unread, .status__wrapper.unread { background-color: $unread-bg-color }
|
||||
@ -4,7 +4,13 @@
|
||||
@import '../custom_color', '../custom_layout';
|
||||
@import 'mixins';
|
||||
|
||||
.modal-root { transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1) }
|
||||
.modal-root {
|
||||
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
|
||||
|
||||
&__overlay { background-color: rgba(0,0,0,.32) !important }
|
||||
|
||||
&__container { background: linear-gradient(rgba(0, 0, 0, 0.48) 10%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.48) 90%) }
|
||||
}
|
||||
|
||||
.drawer {
|
||||
&__header {
|
||||
@ -364,6 +370,8 @@
|
||||
border-radius: 2px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
&__text { line-height: 34px }
|
||||
}
|
||||
|
||||
&__chart {
|
||||
|
||||
@ -60,6 +60,7 @@
|
||||
&:focus {
|
||||
@include shadow-2dp;
|
||||
background: $search-bar-focus-color;
|
||||
color: $search-bar-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,6 +48,7 @@
|
||||
&.fa-bookmark,
|
||||
&.fa-ellipsis-h,
|
||||
&.fa-bell,
|
||||
&.fa-bell-o,
|
||||
&.fa-eraser,
|
||||
&.fa-users,
|
||||
&.fa-file-text,
|
||||
@ -76,7 +77,8 @@
|
||||
&.fa-quote-right,
|
||||
&.fa-upload,
|
||||
&.fa-comments,
|
||||
&.fa-angle-right {
|
||||
&.fa-angle-right,
|
||||
&.fa-thumb-tack {
|
||||
@include icon-font-style;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
@ -116,6 +118,7 @@
|
||||
&.fa-bookmark::before { content: "bookmark" }
|
||||
&.fa-ellipsis-h::before { content: "more_horiz" }
|
||||
&.fa-bell::before { content: "notifications" }
|
||||
&.fa-bell-o::before { content: "notifications" }
|
||||
&.fa-eraser::before { content: "clear_all" }
|
||||
&.fa-users::before { content: "people" }
|
||||
&.fa-file-text::before { content: "web" }
|
||||
@ -145,6 +148,7 @@
|
||||
&.fa-upload::before { content: "file_upload" }
|
||||
&.fa-comments::before { content: "forum" }
|
||||
&.fa-angle-right::before { content: "chevron_right" }
|
||||
&.fa-thumb-tack::before { content: "push_pin" }
|
||||
}
|
||||
|
||||
// bookmark icon
|
||||
@ -179,12 +183,16 @@ button.icon-button i.fa-retweet {
|
||||
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 {
|
||||
.media-modal__overlay .picture-in-picture__footer button.icon-button i.fa-retweet /* in media view */ { 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="#{$media-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,
|
||||
button.icon-button:hover i.fa-retweet /* v3.3.0 or above */ {
|
||||
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 {
|
||||
button.icon-button.disabled i.fa-retweet:hover,
|
||||
button.icon-button.disabled:hover i.fa-retweet /* v3.3.0 or above */ {
|
||||
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>');
|
||||
}
|
||||
|
||||
@ -242,7 +250,8 @@ button.icon-button.disabled i.fa-retweet:hover {
|
||||
}
|
||||
|
||||
// status scope
|
||||
.status__visibility-icon .fa {
|
||||
.status__visibility-icon .fa,
|
||||
.account__header__tabs__name .fa {
|
||||
font-size: 16px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
@ -11,29 +11,6 @@
|
||||
&__item { border-radius: $media-radius }
|
||||
}
|
||||
|
||||
.media-modal__close {
|
||||
&.icon-button {
|
||||
background: transparent;
|
||||
color: $media-icon-color;
|
||||
font-size: 24px !important;
|
||||
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;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-modal {
|
||||
&__nav {
|
||||
background: $media-icon-bg-color;
|
||||
@ -53,11 +30,47 @@
|
||||
&--active { background-color: $media-page-indicator-active-color }
|
||||
}
|
||||
|
||||
&__close {
|
||||
&.icon-button {
|
||||
background: transparent;
|
||||
color: $media-icon-color;
|
||||
font-size: 24px !important;
|
||||
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;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__meta {
|
||||
bottom: 24px;
|
||||
|
||||
a { color: $media-icon-color }
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
.picture-in-picture__footer .icon-button {
|
||||
color: $media-icon-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $media-icon-hover-color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-player {
|
||||
|
||||
@ -84,12 +84,19 @@
|
||||
}
|
||||
|
||||
&__action-bar-button {
|
||||
margin-right: 6px;
|
||||
margin-right: 4px;
|
||||
|
||||
&.icon-button {
|
||||
@include icon-button;
|
||||
padding: 8px;
|
||||
box-sizing: content-box;
|
||||
|
||||
&--with-counter {
|
||||
margin-right: 4px;
|
||||
width: auto !important;
|
||||
|
||||
&:hover { background: transparent }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -253,6 +260,11 @@ a.status-card {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
.button.logo-button {
|
||||
margin-bottom: 16px;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
// search user trends
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Mastodon Material 0.2.0
|
||||
* Mastodon Material 0.2.1
|
||||
* Author: Rintan, Genbu Project
|
||||
* Copyright (C) 2020 Rintan, Genbu Project
|
||||
*/
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #1e1e1e;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #42485a;
|
||||
|
||||
@ -37,6 +37,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: darken($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: darken($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: lighten($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #e0e0e0;
|
||||
|
||||
@ -38,6 +38,7 @@ $list-bg-active-color: lighten($list-bg-color, 10%);
|
||||
$list-bg-inactive-color: lighten($list-bg-color, 10%);
|
||||
$text-field-bg-color: $card-bg-color;
|
||||
$verified-bg-color: darken($verified-color, 20%);
|
||||
$unread-bg-color: transparentize($primary-color, 0.8);
|
||||
|
||||
// Chip color
|
||||
$contained-chip-color: #2e2e2e;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user