delete google-plus theme
This commit is contained in:
Rintan
parent
4406c908db
commit
83e9ccd514
@ -1,24 +0,0 @@
|
||||
/**
|
||||
* Google+ Theme for Mastodon v1.1
|
||||
* Copyright (C) 2018-2019 Genbu Project
|
||||
*/
|
||||
|
||||
@charset "UTF-8";
|
||||
|
||||
// @import 'application';
|
||||
@import 'application';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/basics';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/components';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/emoji-picker';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/tables';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/columns';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/lists';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/accounts';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/statuses';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/notifications';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/searches';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/settings';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/icons';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/profile';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/about';
|
||||
@import 'dark-gplus-theme-for-mastodon-dev/explore';
|
||||
@ -1,15 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
|
||||
@function adjust-lightness ($color, $lightness) {
|
||||
@if (lightness($color) - $lightness <= 0 and lightness($color) + $lightness < 100) {
|
||||
@return lighten($color, $lightness);
|
||||
}
|
||||
|
||||
@if (0 < lightness($color) - $lightness and 100 <= lightness($color) + $lightness) {
|
||||
@return darken($color, $lightness);
|
||||
}
|
||||
|
||||
@return change-color($color, $lightness: $lightness);
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
@mixin column-shadow { box-shadow: 0 1px 8px 0 $column-header-shadow-color }
|
||||
@mixin status-shadow { box-shadow: 0 1px 4px 0 $status-shadow-color }
|
||||
@mixin status-focus-shadow { box-shadow: 0 0 20px 0 $status-focused-shadow-color }
|
||||
@mixin button-shadow { box-shadow: 0 2px 5px 0 $button-shadow-color }
|
||||
@mixin material-border { border-radius: 4px }
|
||||
@mixin material-card-radius { border-radius: 2px }
|
||||
@mixin material-icon-large { font-size: 20px }
|
||||
@ -1,99 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
|
||||
// Base colors
|
||||
$active-color: #db4437;
|
||||
$accent-color: #fbbc04;
|
||||
$valid-color: #4285f4;
|
||||
$error-color: #d50000;
|
||||
$checked-color: #4285f4;
|
||||
$verified-color: #4caf50;
|
||||
|
||||
|
||||
// Text colors
|
||||
$primary-text-color: #ffffff;
|
||||
$primary-lighter1-text-color: change-color($color: $primary-text-color, $lightness: 62%, $alpha: 1.0); // ex: 時間表示
|
||||
$primary-lighter2-text-color: change-color($color: $primary-text-color, $lightness: 38%, $alpha: 1.0); // ex: 通知メッセージ表示
|
||||
$secondary-text-color: #2196F3; // ex: リンク
|
||||
$secondary-lighter1-text-color: #00bfff; // ex: アカウントTLのユーザーID
|
||||
$light-text-color: #000000;
|
||||
$light-darker1-text-color: darken($light-text-color, 15%);
|
||||
$active-text-color: $active-color;
|
||||
$error-text-color: $error-color;
|
||||
|
||||
|
||||
// Icon colors
|
||||
$icon-color: #BDBDBD;
|
||||
$icon-active-color: $active-color;
|
||||
|
||||
|
||||
// Background colors
|
||||
$base-color: #121212;
|
||||
$base-lighter1-color: #2d2d2d;
|
||||
$base-darker1-color: #000000;
|
||||
|
||||
$column-header-color: $base-lighter1-color;
|
||||
$column-header-hover-color: change-color($color: $column-header-color, $lightness: 10%);
|
||||
|
||||
$status-color: $base-lighter1-color;
|
||||
$status-direct-color: darken($status-color, 5%);
|
||||
$status-actionbar-color: darken($status-color, 2%);
|
||||
|
||||
$account-color: $base-lighter1-color;
|
||||
$account-foreground-color: $base-darker1-color;
|
||||
|
||||
$card-color: $base-lighter1-color;
|
||||
$card-hover-color: $column-header-hover-color;
|
||||
$card-image-color: $base-color;
|
||||
$warning-card-color: #26a69a;
|
||||
|
||||
$form-color: rgba(0, 0, 0, 0.1);
|
||||
$form-focused-color: lighten($form-color, 20%);
|
||||
$trend-color: $base-lighter1-color;
|
||||
|
||||
$setting-base-color: $base-color;
|
||||
$setting-lists-selected-color: darken($base-color, 2%);
|
||||
$setting-lists-hover-color: darken($base-color, 5%);
|
||||
$setting-content-base-color: $base-lighter1-color;
|
||||
|
||||
$setting-toggle-color: #b9b9b9;
|
||||
$setting-toggle-checked-color: change-color($color: $checked-color, $alpha: 0.5);
|
||||
$setting-toggle-thumb-color: #fafafa;
|
||||
$setting-toggle-thumb-checked-color: $checked-color;
|
||||
|
||||
$setting-emphasis-color: $verified-color;
|
||||
|
||||
$dashboard-counters-base-color: $base-color;
|
||||
$dashboard-counters-hover-color: lighten($base-color, 2%);
|
||||
|
||||
$log-entry-color: $base-lighter1-color;
|
||||
$log-entry-extra-color: $base-color;
|
||||
$log-entry-extra--neutral-color: $valid-color;
|
||||
$log-entry-extra--old-color: $active-color;
|
||||
$log-entry-extra--new-color: $verified-color;
|
||||
|
||||
$explore-header-color: lighten($accent-color, 16%);
|
||||
$explore-directory-color: $base-lighter1-color;
|
||||
|
||||
$active-button-color: $valid-color; //文字入りボタン
|
||||
$non-active-button-color: lighten($base-color, 20%);
|
||||
|
||||
$floating-acton-button-hover-color: lighten($active-color, 10%);
|
||||
|
||||
|
||||
// Shadow colors
|
||||
$column-header-shadow-color: rgba(0, 0, 0, 0.3);
|
||||
$status-shadow-color: rgba(0, 0, 0, 0.14);
|
||||
$status-focused-shadow-color: change-color($color: $status-shadow-color, $alpha: 0.3);
|
||||
$icon-hovered-shadow-color: rgba(0, 0, 0, 0.26);
|
||||
$account-header-image-shadow-color: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46));
|
||||
$button-shadow-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
|
||||
// Separation colors
|
||||
$base-separation-color: rgba(0, 0, 0, 0.14);
|
||||
|
||||
|
||||
//Border colors
|
||||
$non-elevated-card-boader : #e0e0e0;
|
||||
@ -1,138 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
// from mastodon/about.scss
|
||||
$column-breakpoint: 700px;
|
||||
|
||||
|
||||
|
||||
.landing-page {
|
||||
h3, h4, h5, h6 { color: $primary-lighter2-text-color }
|
||||
p { color: $primary-lighter1-text-color }
|
||||
em { color: $primary-text-color }
|
||||
|
||||
.column-0 { background: $base-darker1-color }
|
||||
.column-2 {
|
||||
.landing-page {
|
||||
&__information { padding: 0 }
|
||||
|
||||
&__short-description {
|
||||
& > .row:first-child {
|
||||
background: $base-darker1-color;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
& > * {
|
||||
padding-left: 40px; padding-right: 40px;
|
||||
&:last-child { padding-bottom: 45px }
|
||||
|
||||
@media screen and (max-width: $column-breakpoint) {
|
||||
padding-left: 20px; padding-right: 20px;
|
||||
&:last-child { padding-bottom: 25px }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__forms,
|
||||
&__information,
|
||||
&__call-to-action {
|
||||
@include status-shadow;
|
||||
background: $column-header-color;
|
||||
}
|
||||
|
||||
&__forms {
|
||||
padding: 0;
|
||||
|
||||
& > *:first-child { margin: inherit }
|
||||
& > * { margin-left: 20px; margin-right: 20px; }
|
||||
|
||||
.brand { background: $base-darker1-color }
|
||||
|
||||
form {
|
||||
& > .input input {
|
||||
background: $form-color;
|
||||
|
||||
&:focus { background: $form-focused-color }
|
||||
}
|
||||
}
|
||||
|
||||
.separator-or {
|
||||
margin-left: 20px; margin-right: 20px;
|
||||
|
||||
span {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $column-header-color;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $column-breakpoint) {
|
||||
background: inherit;
|
||||
box-shadow: none;
|
||||
|
||||
.separator-or span { background: $base-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__information {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
&.contact-widget {
|
||||
@include status-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
.contact-widget {
|
||||
&__mail {
|
||||
a { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
strong { color: inherit }
|
||||
|
||||
.row:first-child {
|
||||
h1 small {
|
||||
color: $light-darker1-text-color;
|
||||
|
||||
span { color: $light-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__call-to-action {
|
||||
.row__information-board {
|
||||
.information-board__section {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
& > span:last-child { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__features {
|
||||
.features-list {
|
||||
.features-list__row {
|
||||
.text { color: $primary-lighter1-text-color }
|
||||
.visual .fa { color: $icon-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__footer { color: $primary-lighter1-text-color }
|
||||
|
||||
#mastodon-timeline {
|
||||
color: $primary-text-color;
|
||||
background: transparent;
|
||||
|
||||
p {
|
||||
color: $primary-text-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,194 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.account {
|
||||
background: $account-color;
|
||||
border-color: $base-separation-color;
|
||||
|
||||
.account {
|
||||
&__display-name {
|
||||
color: $secondary-text-color;
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&-role {
|
||||
color: $primary-lighter2-text-color;
|
||||
background-color: rgba($base-separation-color, 0.1);
|
||||
border-color: rgba($base-separation-color, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
> .column-back-button {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
}
|
||||
}
|
||||
|
||||
.account-timeline__header {
|
||||
.account__header {
|
||||
background-color: $account-foreground-color;
|
||||
|
||||
> div { background-color: inherit } // -> v2.7.4
|
||||
|
||||
.account__header {
|
||||
&__username { color: $secondary-lighter1-text-color }
|
||||
&__fields { @extend .account__header__fields; }
|
||||
|
||||
&__image { // v2.8.0 ->
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: $account-header-image-shadow-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
> img:not([src]),
|
||||
> img[src$="/headers/original/missing.png"] {
|
||||
content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
|
||||
}
|
||||
}
|
||||
|
||||
&__bar { // v2.8.0 ->
|
||||
background-color: $base-lighter1-color;
|
||||
|
||||
.account__header {
|
||||
&__tabs {
|
||||
.avatar {
|
||||
.account__avatar {
|
||||
border-color: $base-lighter1-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
.icon-button {
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
h1 { color: $primary-text-color }
|
||||
small { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__bio {
|
||||
.account__header {
|
||||
&__content { color: $primary-text-color }
|
||||
&__fields { border-color: $base-separation-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__extra {
|
||||
&__links {
|
||||
&, a { color: $primary-lighter1-text-color }
|
||||
strong { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account--action-button {
|
||||
.icon-button:not(.active) {
|
||||
color: darken($light-text-color, 7%);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $light-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account {
|
||||
&__disclaimer,
|
||||
&__action-bar,
|
||||
&__section-headline {
|
||||
background: $base-lighter1-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&__action-bar {
|
||||
&__tab {
|
||||
border-color: $base-separation-color;
|
||||
&.active { border-bottom-color: $active-color }
|
||||
|
||||
> span { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__section-headline {
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
|
||||
&.active {
|
||||
color: $active-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $status-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-authorize__wrapper {
|
||||
@include status-shadow;
|
||||
background: $base-lighter1-color;
|
||||
|
||||
&:focus { @include status-focus-shadow; }
|
||||
|
||||
.account {
|
||||
&__header__content {
|
||||
color: $primary-lighter2-text-color;
|
||||
}
|
||||
|
||||
&--panel {
|
||||
background: $account-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account__header__fields {
|
||||
dl {
|
||||
border-color: $base-separation-color;
|
||||
|
||||
dt,
|
||||
dd {
|
||||
color: $primary-text-color;
|
||||
background: $base-lighter1-color;
|
||||
}
|
||||
|
||||
dd {
|
||||
&.verified {
|
||||
border-color: transparentize($valid-color, 0.5);
|
||||
background: transparentize($valid-color, 0.75);
|
||||
|
||||
a { color: lighten($verified-color, 20%) }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
.account__action-bar__tab {
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
body {
|
||||
&,
|
||||
.ui {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.focusable {
|
||||
&:focus {
|
||||
background: inherit;
|
||||
|
||||
.status {
|
||||
@include status-focus-shadow;
|
||||
|
||||
&.status-direct { background: $status-direct-color }
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
& { background: $status-color }
|
||||
&__action-bar { background: $status-actionbar-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: darken($base-lighter1-color, 12%);
|
||||
|
||||
&:hover { background: darken($base-lighter1-color, 16%) }
|
||||
&:active { background: darken($base-lighter1-color, 12%) }
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $base-color;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken($base-lighter1-color, 8%);
|
||||
}
|
||||
}
|
||||
@ -1,335 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.tabs-bar {
|
||||
margin: 0;
|
||||
background: $column-header-color;
|
||||
position: relative;
|
||||
|
||||
.tabs-bar {
|
||||
&__link {
|
||||
color: $icon-color;
|
||||
border-bottom: 4px solid $column-header-color;
|
||||
padding: 15px 10px 11px 10px;
|
||||
|
||||
&.active {
|
||||
border-bottom: 4px solid $active-color;
|
||||
}
|
||||
|
||||
.fa {
|
||||
@include material-icon-large;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer {
|
||||
.drawer {
|
||||
&__header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
.drawer__tab {
|
||||
@include material-icon-large;
|
||||
color: $icon-color;
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover { background: $column-header-hover-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__pager {
|
||||
@include status-shadow;
|
||||
@include material-card-radius;
|
||||
|
||||
.drawer__inner {
|
||||
background: $column-header-color;
|
||||
|
||||
&__mastodon { display: none }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-bar {
|
||||
color: $secondary-text-color;
|
||||
background: $column-header-color;
|
||||
|
||||
.navigation-bar {
|
||||
&__profile {
|
||||
strong { color: $primary-text-color }
|
||||
&-edit { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.compose-form {
|
||||
.compose-form {
|
||||
&__buttons-wrapper {
|
||||
background: $column-header-color;
|
||||
|
||||
&.character-counter__wrapper {
|
||||
.character-counter { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__warning {
|
||||
background-color: $warning-card-color;
|
||||
}
|
||||
|
||||
&__publish { border-top: 1px solid $base-separation-color }
|
||||
&__modifiers { background-color: $base-lighter1-color }
|
||||
}
|
||||
|
||||
.autosuggest-textarea__textarea {
|
||||
background-color: $base-lighter1-color;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.character-counter {
|
||||
color: $icon-color
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
.column-header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
&.active {
|
||||
.column-header__icon {
|
||||
color: $icon-active-color;
|
||||
text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
* { background: inherit }
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
color: $icon-color;
|
||||
vertical-align: bottom;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
height: 50px;
|
||||
|
||||
.column-header {
|
||||
&__back-button {
|
||||
.column-back-button__icon { vertical-align: bottom }
|
||||
}
|
||||
|
||||
&__button {
|
||||
&.active {
|
||||
color: $icon-active-color;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.fa { vertical-align: unset }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
color: $icon-color;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
&__collapsible {
|
||||
color: $secondary-text-color;
|
||||
border-bottom: 1px solid $base-separation-color;
|
||||
|
||||
&-inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
|
||||
.column-back-button {
|
||||
background-color: $column-header-color;
|
||||
color: $secondary-text-color;
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
&-subheading,
|
||||
&-link__badge {
|
||||
background: $base-color;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
&-link {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
color: $icon-color;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
background: transparent;
|
||||
|
||||
*[role="feed"] {
|
||||
article {
|
||||
margin: 1em 0;
|
||||
&:first-of-type { margin: 0 }
|
||||
|
||||
&:focus { outline: none }
|
||||
}
|
||||
}
|
||||
|
||||
div[tabindex="-1"] { margin-bottom: 1em }
|
||||
}
|
||||
|
||||
.notification__filter-bar {
|
||||
background: $column-header-color;
|
||||
border-bottom-color: $base-separation-color;
|
||||
|
||||
button {
|
||||
color: $icon-color;
|
||||
background: $column-header-color;
|
||||
|
||||
&.active {
|
||||
color: $icon-active-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $column-header-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-column-indicator {
|
||||
flex-direction: column;
|
||||
background: $base-color;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 1em;
|
||||
|
||||
background: none center / contain no-repeat;
|
||||
background-image: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/notification-jingle_2x.gif");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// v2.9.0以降に対応
|
||||
.column-header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
&.active {
|
||||
.column-header__icon {
|
||||
color: $icon-active-color;
|
||||
text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
* { background: inherit }
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
color: $icon-color;
|
||||
vertical-align: bottom;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
height: 50px;
|
||||
|
||||
.column-header {
|
||||
&__back-button {
|
||||
.column-back-button__icon { vertical-align: bottom }
|
||||
}
|
||||
|
||||
&__button {
|
||||
&.active {
|
||||
color: $icon-active-color;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.fa { vertical-align: unset }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
color: $icon-color;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
&__collapsible {
|
||||
color: $secondary-text-color;
|
||||
border-bottom: 1px solid $base-separation-color;
|
||||
|
||||
&-inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
.column-back-button {
|
||||
background-color: $column-header-color;
|
||||
color: $secondary-text-color;
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
&__wrapper,
|
||||
& {
|
||||
background: $base-color;
|
||||
}
|
||||
|
||||
& {
|
||||
border-top: 1px solid $base-separation-color;
|
||||
|
||||
a { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.load {
|
||||
&-more,
|
||||
&-gap {
|
||||
background: transparent;
|
||||
|
||||
&:hover { background: darken($column-header-color, 10%) }
|
||||
}
|
||||
|
||||
&-gap { border: 0 }
|
||||
}
|
||||
|
||||
.confirmation-modal {
|
||||
@include material-card-radius;
|
||||
color: $primary-text-color;
|
||||
background-color: $base-lighter1-color;
|
||||
|
||||
&__action-bar {
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
|
||||
&__cancel-button {
|
||||
color: $primary-lighter1-text-color;
|
||||
box-shadow: 0 2px 5px 0 transparent;
|
||||
}
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.floating-action-button {
|
||||
font-size: 24px;
|
||||
background-color: $active-color;
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
|
||||
&:active {
|
||||
background-color: $active-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $floating-acton-button-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@include button-shadow;
|
||||
@include material-card-radius;
|
||||
background-color: $active-button-color;
|
||||
|
||||
.text-icon-button {
|
||||
color: $primary-lighter1-text-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.button--block { @include button-shadow }
|
||||
|
||||
.button-secondary {
|
||||
background-color: $primary-lighter1-text-color;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-root {
|
||||
&__modal {
|
||||
.media-modal {
|
||||
&__close.icon-button {
|
||||
font-size: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($base-lighter1-color, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DOM操作によりpaddingが調整できないもの
|
||||
.privacy-dropdown__value-icon.icon-button.inverted,
|
||||
.compose-form__poll-button-icon.icon-button.inverted,
|
||||
.compose-form__upload-button-icon.icon-button.inverted { padding: 4px }
|
||||
@ -1,38 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.card {
|
||||
//border: 1px solid $base-separation-color;
|
||||
//不要(?)
|
||||
|
||||
> a {
|
||||
@include status-shadow;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.card__bar {
|
||||
background: initial;
|
||||
|
||||
.display-name strong { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.card__img { background: $card-image-color }
|
||||
.card__bar {
|
||||
background: $card-color;
|
||||
|
||||
.avatar {
|
||||
img { background: transparent }
|
||||
}
|
||||
|
||||
.display-name {
|
||||
strong { color: $primary-text-color }
|
||||
span { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: $column-header-color;
|
||||
|
||||
&__arrow {
|
||||
&.top { border-top-color: $column-header-color }
|
||||
&.bottom { border-bottom-color: $column-header-color }
|
||||
}
|
||||
|
||||
&__separator { margin: 4px 0 }
|
||||
}
|
||||
|
||||
.dropdown-menu,
|
||||
.actions-modal {
|
||||
@include material-card-radius;
|
||||
|
||||
& > ul {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
.dropdown-menu {
|
||||
&__item {
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
padding: 16px 16px;
|
||||
background: $column-header-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background: $column-header-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__separator { border-bottom-color: $base-separation-color }
|
||||
}
|
||||
|
||||
& > li:not(:empty) {
|
||||
@extend .dropdown-menu__item;
|
||||
|
||||
a {
|
||||
padding: 12px 16px;
|
||||
color: $primary-text-color;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background-color: $column-header-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
background-color: $base-lighter1-color;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
padding-right: 16px;
|
||||
padding-left: 74px;
|
||||
|
||||
&__avatar {
|
||||
top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.status-card {
|
||||
color: $primary-lighter1-text-color;
|
||||
&__title, &__description { color: $primary-lighter2-text-color }
|
||||
|
||||
&__image { background: transparent }
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'components-button';
|
||||
@import 'components-card';
|
||||
@import 'components-dropdown';
|
||||
@import 'components-status-card';
|
||||
@ -1,68 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.emoji-mart {
|
||||
&-bar {
|
||||
border: 0 solid $base-separation-color;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
background-color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-anchors {
|
||||
color: $icon-color;
|
||||
}
|
||||
&-anchor {
|
||||
&-selected {
|
||||
color: $icon-active-color;
|
||||
|
||||
&:hover {
|
||||
color: $icon-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-bar {
|
||||
background-color: $icon-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-search {
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
&-search input {
|
||||
color: $primary-text-color;
|
||||
background-color: $form-color;
|
||||
border: 0px solid #ffffff00;
|
||||
}
|
||||
|
||||
&-category-label span {
|
||||
color: $primary-text-color;
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
|
||||
&-scroll {
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-picker-dropdown {
|
||||
&__modifiers {
|
||||
&__menu {
|
||||
@include status-shadow;
|
||||
@include material-card-radius;
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__menu {
|
||||
@include column-shadow;
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.public-layout {
|
||||
.page-header {
|
||||
background: $explore-header-color;
|
||||
|
||||
h1 { color: $primary-text-color }
|
||||
p { color: $primary-lighter2-text-color }
|
||||
}
|
||||
|
||||
.directory,
|
||||
.notice-widget { @include column-shadow; }
|
||||
|
||||
.directory {
|
||||
background: $explore-directory-color;
|
||||
|
||||
.accounts-table {
|
||||
&__count {
|
||||
color: $primary-lighter2-text-color;
|
||||
small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__tag {
|
||||
& > a {
|
||||
@include status-shadow;
|
||||
background: $explore-directory-color;
|
||||
}
|
||||
|
||||
h4 { color: $primary-lighter2-text-color }
|
||||
.fa, small { color: $primary-lighter1-text-color }
|
||||
.trends__item__current { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.notice-widget {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $explore-directory-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -1,21 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.keyboard-shortcuts {
|
||||
kbd {
|
||||
@include status-shadow;
|
||||
|
||||
color: $primary-text-color;
|
||||
background-color: $base-lighter1-color;
|
||||
border-color: $base-darker1-color;
|
||||
|
||||
margin: 0 0.25em;
|
||||
|
||||
&:first-child { margin-left: 0 }
|
||||
&:last-child { margin-right: 0 }
|
||||
}
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.column {
|
||||
.column-back-button { background: inherit }
|
||||
|
||||
.column-inline-form {
|
||||
background: $column-header-color;
|
||||
|
||||
label input {
|
||||
color: $secondary-text-color;
|
||||
&:focus { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.column-inline-form ~ .scrollable {
|
||||
article { margin: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
.modal-root {
|
||||
.column-inline-form {
|
||||
background: $column-header-color;
|
||||
|
||||
.setting-text {
|
||||
color: $primary-text-color;
|
||||
&:active, &:focus { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.list-editor {
|
||||
background: $base-color;
|
||||
h4 { background: $column-header-color }
|
||||
|
||||
.drawer__pager {
|
||||
.drawer__inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
|
||||
.list-adder {
|
||||
background: $base-color;
|
||||
|
||||
.column-inline-form { border-bottom: 1px solid $base-separation-color }
|
||||
|
||||
&__account,
|
||||
&__lists { background: $column-header-color }
|
||||
|
||||
&__lists {
|
||||
.list { border-color: $base-separation-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.notification {
|
||||
&.notification-favourite {
|
||||
.status {
|
||||
&.status-direct { background: transparent }
|
||||
}
|
||||
}
|
||||
|
||||
> .notification__message {
|
||||
color: $primary-lighter2-text-color;
|
||||
font-size: 13px;
|
||||
padding: 8px 0;
|
||||
|
||||
.notification__display-name {
|
||||
&:hover { color: inherit }
|
||||
}
|
||||
|
||||
.notification__favourite-icon-wrapper {
|
||||
.star-icon { color: $icon-active-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,232 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.public-layout {
|
||||
a.button {
|
||||
@include button-shadow;
|
||||
|
||||
color: $primary-text-color;
|
||||
background: $base-lighter1-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($base-lighter1-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.logo-button {
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
|
||||
&#Mastodon { fill: $base-lighter1-color !important }
|
||||
}
|
||||
}
|
||||
|
||||
.public-account-header {
|
||||
@include status-shadow;
|
||||
|
||||
&__image {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
@media screen and (min-width: 600px) { height: 500px }
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: $account-header-image-shadow-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
> img:not([src]),
|
||||
> img[src="/headers/original/missing.png"] {
|
||||
content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
|
||||
}
|
||||
}
|
||||
|
||||
&__bar {
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
background: $base-color;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) { margin-top: -140px }
|
||||
|
||||
&::before { background: $base-lighter1-color }
|
||||
|
||||
.avatar {
|
||||
@media screen and (max-width: 600px) {
|
||||
position: relative;
|
||||
bottom: 30px;
|
||||
|
||||
display: initial;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 2px solid $base-lighter1-color;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0;
|
||||
|
||||
&__name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
color: $primary-text-color;
|
||||
|
||||
small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
justify-content: center;
|
||||
flex: auto;
|
||||
|
||||
.spacer { display: none }
|
||||
|
||||
a.button.logo-button {
|
||||
color: $light-text-color;
|
||||
background: $secondary-text-color;
|
||||
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $base-lighter1-color !important }
|
||||
&#Mastodon { fill: $secondary-text-color !important }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-counters {
|
||||
.counter {
|
||||
color: $light-text-color;
|
||||
border-right: 0;
|
||||
|
||||
&::after { border-bottom-color: $base-color }
|
||||
|
||||
&.active {
|
||||
&::after { border-bottom-color: $active-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__extra {
|
||||
.public-account-bio {
|
||||
.account__header__content { text-align: center }
|
||||
}
|
||||
|
||||
&__links {
|
||||
color: $primary-text-color;
|
||||
|
||||
a {
|
||||
&, strong { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.public-account-bio,
|
||||
.endorsements-widget,
|
||||
.hero-widget { @include status-shadow; }
|
||||
|
||||
.public-account-bio {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
.account__header__content { color: $primary-text-color }
|
||||
&__extra { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
.endorsements-widget {
|
||||
padding-bottom: 0;
|
||||
border-radius: 4px;
|
||||
|
||||
h4 {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-widget {
|
||||
&__img { background: $base-color }
|
||||
&__text {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
&, em { color: $primary-lighter2-text-color }
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.account__section-headline {
|
||||
background: $base-lighter1-color;
|
||||
border-bottom-color: $base-separation-color;
|
||||
|
||||
a {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
&.active {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $status-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-stream {
|
||||
box-shadow: none;
|
||||
|
||||
.entry {
|
||||
margin: 1em 0;
|
||||
background: transparent;
|
||||
|
||||
&:first-of-type { margin: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
@include status-shadow;
|
||||
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $base-lighter1-color;
|
||||
}
|
||||
|
||||
.footer {
|
||||
h4 { color: $primary-lighter1-text-color }
|
||||
|
||||
ul {
|
||||
a { color: $primary-lighter2-text-color }
|
||||
}
|
||||
|
||||
.brand {
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
|
||||
&#Mastodon { fill: $base-lighter1-color !important }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.search {
|
||||
.search {
|
||||
&__input {
|
||||
@include material-border;
|
||||
|
||||
color: $primary-text-color;
|
||||
background: $form-color;
|
||||
|
||||
&:focus { background: $form-focused-color }
|
||||
}
|
||||
|
||||
&__icon {
|
||||
.fa { color: $icon-color }
|
||||
}
|
||||
}
|
||||
|
||||
&-results {
|
||||
> .search-results {
|
||||
&__header { background: $base-color }
|
||||
&__section {
|
||||
> h5 { background: darken($base-color, 10%) }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trends__item {
|
||||
background: $trend-color;
|
||||
|
||||
.trends__item {
|
||||
&__name a { color: $secondary-text-color }
|
||||
&__current { color: lighten($secondary-text-color, 10%) }
|
||||
}
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.edit_account {
|
||||
@media screen and (min-width: 415px) {
|
||||
.card {
|
||||
> a {
|
||||
position: relative;
|
||||
|
||||
.card__img {
|
||||
border-bottom: 1px solid $base-separation-color;
|
||||
|
||||
> img:not([src]),
|
||||
> img[src="/headers/original/missing.png"] {
|
||||
content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
|
||||
}
|
||||
}
|
||||
|
||||
.card__bar {
|
||||
position: static;
|
||||
padding-top: 30%;
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.display-name {
|
||||
flex: auto;
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.dashboard {
|
||||
&__counters {
|
||||
& > div {
|
||||
& > div, & > a { background: $dashboard-counters-base-color }
|
||||
|
||||
& > a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: $dashboard-counters-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__text,
|
||||
&__num { color: $primary-text-color }
|
||||
|
||||
&__label { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
&__widgets {
|
||||
a:not(.name-tag) { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.admin-wrapper {
|
||||
.content {
|
||||
.directory__tag {
|
||||
& > a,
|
||||
& > div { background: $setting-base-color }
|
||||
|
||||
h4 {
|
||||
& { color: $primary-lighter2-text-color }
|
||||
.fa, small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
.trends__item__current { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.log-entry {
|
||||
.log-entry {
|
||||
&__header {
|
||||
color: $primary-lighter2-text-color;
|
||||
background: $log-entry-color;
|
||||
|
||||
.username,
|
||||
.target,
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
&__timestamp { color: $primary-lighter1-text-color }
|
||||
&__icon { color: $icon-color }
|
||||
|
||||
&__extras {
|
||||
color: $primary-text-color;
|
||||
background: $log-entry-extra-color;
|
||||
|
||||
.diff-neutral { color: $log-entry-extra--neutral-color }
|
||||
.diff-old { color: $log-entry-extra--old-color }
|
||||
.diff-new { color: $log-entry-extra--new-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,75 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.report-card {
|
||||
background: $setting-content-base-color;
|
||||
|
||||
&__profile__stats {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
a {
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: lighten($primary-lighter2-text-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__summary {
|
||||
&__item {
|
||||
border-top-color: $base-separation-color;
|
||||
|
||||
&:hover { background: $column-header-hover-color }
|
||||
|
||||
&__reported-by,
|
||||
&__assigned {
|
||||
color: $primary-lighter2-text-color;
|
||||
}
|
||||
|
||||
&__content {
|
||||
&__icon { color: $icon-color }
|
||||
a { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.batch-table {
|
||||
&__toolbar {
|
||||
background: $base-lighter1-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&__row {
|
||||
&, &:nth-child(2n) { background: $base-lighter1-color }
|
||||
&:hover, &:nth-child(2n):hover { background: $column-header-hover-color }
|
||||
|
||||
border-color: $base-separation-color;
|
||||
|
||||
&__content {
|
||||
.status__content { color: $primary-text-color }
|
||||
.detailed-status__meta { color: $primary-lighter1-text-color }
|
||||
|
||||
|
||||
.accounts-table { // v2.8.0 ->
|
||||
.accounts-table {
|
||||
&__count {
|
||||
& {color: $primary-text-color }
|
||||
small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
td .account { background: inherit }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.speech-bubble {
|
||||
&__bubble { color: $primary-text-color }
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
@ -1,245 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'settings-account';
|
||||
@import 'settings-report';
|
||||
@import 'settings-log';
|
||||
@import 'settings-dashboard';
|
||||
@import 'settings-directory_tag';
|
||||
|
||||
|
||||
|
||||
body.admin {
|
||||
color: $primary-text-color;
|
||||
background: $setting-base-color;
|
||||
|
||||
.sidebar {
|
||||
&-wrapper { background: inherit }
|
||||
|
||||
ul {
|
||||
border-radius: 0;
|
||||
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background: $setting-lists-hover-color;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $primary-text-color;
|
||||
background: $setting-lists-selected-color;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
@include material-icon-large;
|
||||
margin-right: 8px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
ul { background: darken($setting-base-color, 4%) }
|
||||
|
||||
.simple-navigation-active-leaf a {
|
||||
color: $icon-active-color;
|
||||
background: initial;
|
||||
|
||||
&:hover { background: $setting-lists-hover-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@include column-shadow;
|
||||
background: $setting-content-base-color;
|
||||
|
||||
h2, h3, h4, h6 { color: $primary-text-color }
|
||||
|
||||
p {
|
||||
color: $primary-text-color;
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
h2, h4, hr { border-bottom-color: $base-separation-color }
|
||||
.muted-hint { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form {
|
||||
.input {
|
||||
&.boolean,
|
||||
&.with_label,
|
||||
&.with_floating_label {
|
||||
.label_input > label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.with_block_label {
|
||||
& > label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.radio_buttons{
|
||||
.radio label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&-copy {
|
||||
background: $base-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
}
|
||||
|
||||
.check_boxes {
|
||||
.checkbox {
|
||||
label { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=number],
|
||||
input[type=email],
|
||||
input[type=password],
|
||||
textarea {
|
||||
color: $primary-text-color;
|
||||
background: $setting-content-base-color;
|
||||
border-color: $base-separation-color;
|
||||
|
||||
&:hover {
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background: darken($setting-content-base-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
color: $primary-text-color;
|
||||
background-color: $setting-content-base-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
.input.field_with_errors {
|
||||
label,
|
||||
.error {
|
||||
color: $error-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hint, p.hint {
|
||||
color: $primary-lighter1-text-color !important;
|
||||
|
||||
code {
|
||||
color: $light-text-color;
|
||||
background: $setting-emphasis-color;
|
||||
}
|
||||
}
|
||||
|
||||
.recommended {
|
||||
color: $verified-color;
|
||||
background-color: transparentize($verified-color, 0.75);
|
||||
border-color: $verified-color;
|
||||
}
|
||||
|
||||
.label_input {
|
||||
&__append { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
button {
|
||||
@include button-shadow;
|
||||
background-color: $active-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form,
|
||||
.table-form {
|
||||
.warning { background: change-color($color: $error-color, $alpha: 0.8) }
|
||||
}
|
||||
|
||||
.quick-nav {
|
||||
a {
|
||||
color: $secondary-text-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: lighten($secondary-text-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.page,
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.page {
|
||||
&.current {
|
||||
background: $icon-active-color;
|
||||
color: $light-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filters {
|
||||
.filter-subset {
|
||||
strong { color: $primary-text-color }
|
||||
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
&:hover { color: $primary-text-color }
|
||||
|
||||
&.selected {
|
||||
color: $active-text-color;
|
||||
border-bottom-color: $active-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new_form_two_factor_confirmation {
|
||||
.qr-wrapper {
|
||||
.qr-code { box-shadow: none }
|
||||
.qr-alternative { color: $secondary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
label,
|
||||
select#user_setting_default_privacy {
|
||||
&[for=user_setting_default_privacy_public],
|
||||
&[for=user_setting_default_privacy_unlisted],
|
||||
option[value="public"],
|
||||
option[value="unlisted"] { color: $active-text-color !important }
|
||||
}
|
||||
|
||||
.column-header__collapsible__extra {
|
||||
.column-settings__section { color: $primary-text-color }
|
||||
|
||||
.setting-toggle {
|
||||
.react-toggle {
|
||||
&.react-toggle--checked {
|
||||
> .react-toggle-track { background: $setting-toggle-checked-color }
|
||||
|
||||
> .react-toggle-thumb {
|
||||
border-color: $setting-toggle-checked-color;
|
||||
background-color: $setting-toggle-thumb-checked-color;
|
||||
}
|
||||
}
|
||||
|
||||
> .react-toggle-track { background: $setting-toggle-color }
|
||||
|
||||
> .react-toggle-thumb {
|
||||
border-color: $setting-toggle-color;
|
||||
background-color: $setting-toggle-thumb-color;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-toggle__label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.setting-meta__label { color: $primary-lighter1-text-color }
|
||||
}
|
||||
@ -1,123 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.status {
|
||||
@include status-shadow;
|
||||
@include material-card-radius;
|
||||
border-bottom: 0;
|
||||
|
||||
transition: box-shadow 0.1s 0s ease-out;
|
||||
|
||||
&.light {
|
||||
.status {
|
||||
&__relative-time { color: $primary-lighter1-text-color }
|
||||
&__display-name {
|
||||
color: $primary-text-color;
|
||||
|
||||
.display-name__account { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
&__content { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.display-name strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.status-direct {
|
||||
background: $status-direct-color;
|
||||
|
||||
&:not(.read) {
|
||||
background: inherit;
|
||||
border-bottom-color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
&.muted {
|
||||
.status__content {
|
||||
p { color: lighten($primary-text-color, 20%) }
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
&__info {
|
||||
.status__display-name {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.status__relative-time { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__action-bar__counter__label { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
&__display-name {
|
||||
color: $secondary-text-color;
|
||||
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&__meta {
|
||||
.detailed-status__datetime { color: $primary-lighter1-text-color }
|
||||
|
||||
.detailed-status__link {
|
||||
.fa.fa-star { vertical-align: middle }
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
@include status-shadow;
|
||||
|
||||
.detailed-status { @extend .detailed-status; }
|
||||
.detailed-status__action-bar {
|
||||
background: $status-actionbar-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status,
|
||||
.detailed-status {
|
||||
background: $status-color;
|
||||
|
||||
.status__content {
|
||||
color: $primary-text-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
|
||||
.status__content__spoiler-link {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.status-card,
|
||||
a.status-card.compact {
|
||||
&:hover { background: initial }
|
||||
}
|
||||
|
||||
.status-card,
|
||||
.status-card.compact {
|
||||
border-color: $non-elevated-card-boader;
|
||||
|
||||
&__title {
|
||||
color : $primary-text-color;
|
||||
}
|
||||
|
||||
&__host {
|
||||
color: $primary-lighter1-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.name-tag,
|
||||
a.name-tag {
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.table {
|
||||
thead th { border-bottom-color: $base-separation-color }
|
||||
|
||||
th,
|
||||
td {
|
||||
color: $primary-text-color;
|
||||
background-color: $base-color;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
& > tbody > tr:nth-child(odd) {
|
||||
& > td, & > th { background: darken($base-color, 4%) }
|
||||
}
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
a.table-action-link,
|
||||
button.table-action-link {
|
||||
color: $secondary-text-color;
|
||||
|
||||
&:hover { color: darken($secondary-text-color, 8%) }
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
/**
|
||||
* Google+ Theme for Mastodon v1.1
|
||||
* Copyright (C) 2018-2019 Genbu Project
|
||||
*/
|
||||
|
||||
@charset "UTF-8";
|
||||
|
||||
// @import 'application';
|
||||
@import 'application';
|
||||
@import 'gplus-theme-for-mastodon-dev/basics';
|
||||
@import 'gplus-theme-for-mastodon-dev/components';
|
||||
@import 'gplus-theme-for-mastodon-dev/emoji-picker';
|
||||
@import 'gplus-theme-for-mastodon-dev/tables';
|
||||
@import 'gplus-theme-for-mastodon-dev/columns';
|
||||
@import 'gplus-theme-for-mastodon-dev/lists';
|
||||
@import 'gplus-theme-for-mastodon-dev/accounts';
|
||||
@import 'gplus-theme-for-mastodon-dev/statuses';
|
||||
@import 'gplus-theme-for-mastodon-dev/notifications';
|
||||
@import 'gplus-theme-for-mastodon-dev/searches';
|
||||
@import 'gplus-theme-for-mastodon-dev/settings';
|
||||
@import 'gplus-theme-for-mastodon-dev/icons';
|
||||
@import 'gplus-theme-for-mastodon-dev/profile';
|
||||
@import 'gplus-theme-for-mastodon-dev/about';
|
||||
@import 'gplus-theme-for-mastodon-dev/explore';
|
||||
@ -1,15 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
|
||||
@function adjust-lightness ($color, $lightness) {
|
||||
@if (lightness($color) - $lightness <= 0 and lightness($color) + $lightness < 100) {
|
||||
@return lighten($color, $lightness);
|
||||
}
|
||||
|
||||
@if (0 < lightness($color) - $lightness and 100 <= lightness($color) + $lightness) {
|
||||
@return darken($color, $lightness);
|
||||
}
|
||||
|
||||
@return change-color($color, $lightness: $lightness);
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
@mixin column-shadow { box-shadow: 0 1px 8px 0 $column-header-shadow-color }
|
||||
@mixin status-shadow { box-shadow: 0 1px 4px 0 $status-shadow-color }
|
||||
@mixin status-focus-shadow { box-shadow: 0 0 20px 0 $status-focused-shadow-color }
|
||||
@mixin button-shadow { box-shadow: 0 2px 5px 0 $button-shadow-color }
|
||||
@mixin material-border { border-radius: 4px }
|
||||
@mixin material-card-radius { border-radius: 2px }
|
||||
@mixin material-icon-large { font-size: 20px }
|
||||
@ -1,99 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
|
||||
// Base colors
|
||||
$active-color: #db4437;
|
||||
$accent-color: #fbbc04;
|
||||
$valid-color: #4285f4;
|
||||
$error-color: #d50000;
|
||||
$checked-color: #4285f4;
|
||||
$verified-color: #4caf50;
|
||||
|
||||
|
||||
// Text colors
|
||||
$primary-text-color: rgba(0, 0, 0, 0.87);
|
||||
$primary-lighter1-text-color: change-color($color: $primary-text-color, $lightness: 62%, $alpha: 1.0); // ex: 時間表示
|
||||
$primary-lighter2-text-color: change-color($color: $primary-text-color, $lightness: 38%, $alpha: 1.0); // ex: 通知メッセージ表示
|
||||
$secondary-text-color: #2962ff; // ex: リンク
|
||||
$secondary-lighter1-text-color: #00bfff; // ex: アカウントTLのユーザーID
|
||||
$light-text-color: #ffffff;
|
||||
$light-darker1-text-color: darken($light-text-color, 15%);
|
||||
$active-text-color: $active-color;
|
||||
$error-text-color: $error-color;
|
||||
|
||||
|
||||
// Icon colors
|
||||
$icon-color: #757575;
|
||||
$icon-active-color: $active-color;
|
||||
|
||||
|
||||
// Background colors
|
||||
$base-color: #f1f1f1;
|
||||
$base-lighter1-color: #ffffff;
|
||||
$base-darker1-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
$column-header-color: $base-lighter1-color;
|
||||
$column-header-hover-color: darken($column-header-color, 10%);
|
||||
|
||||
$status-color: $base-lighter1-color;
|
||||
$status-direct-color: darken($status-color, 5%);
|
||||
$status-actionbar-color: darken($status-color, 2%);
|
||||
|
||||
$account-color: $base-lighter1-color;
|
||||
$account-foreground-color: $base-darker1-color;
|
||||
|
||||
$card-color: $base-lighter1-color;
|
||||
$card-hover-color: $column-header-hover-color;
|
||||
$card-image-color: $base-color;
|
||||
$warning-card-color: #26a69a;
|
||||
|
||||
$form-color: rgba(0, 0, 0, 0.1);
|
||||
$form-focused-color: lighten($form-color, 20%);
|
||||
$trend-color: $base-lighter1-color;
|
||||
|
||||
$setting-base-color: $base-color;
|
||||
$setting-lists-selected-color: darken($base-color, 2%);
|
||||
$setting-lists-hover-color: darken($base-color, 5%);
|
||||
$setting-content-base-color: $base-lighter1-color;
|
||||
|
||||
$setting-toggle-color: #b9b9b9;
|
||||
$setting-toggle-checked-color: change-color($color: $checked-color, $alpha: 0.5);
|
||||
$setting-toggle-thumb-color: #fafafa;
|
||||
$setting-toggle-thumb-checked-color: $checked-color;
|
||||
|
||||
$setting-emphasis-color: $verified-color;
|
||||
|
||||
$dashboard-counters-base-color: $base-color;
|
||||
$dashboard-counters-hover-color: lighten($base-color, 2%);
|
||||
|
||||
$log-entry-color: $base-lighter1-color;
|
||||
$log-entry-extra-color: $base-color;
|
||||
$log-entry-extra--neutral-color: $valid-color;
|
||||
$log-entry-extra--old-color: $active-color;
|
||||
$log-entry-extra--new-color: $verified-color;
|
||||
|
||||
$explore-header-color: lighten($accent-color, 16%);
|
||||
$explore-directory-color: $base-lighter1-color;
|
||||
|
||||
$active-button-color: $valid-color; //文字入りボタン
|
||||
$non-active-button-color: lighten($base-color, 20%);
|
||||
|
||||
$floating-acton-button-hover-color: lighten($active-color, 10%);
|
||||
|
||||
|
||||
// Shadow colors
|
||||
$column-header-shadow-color: rgba(0, 0, 0, 0.3);
|
||||
$status-shadow-color: rgba(0, 0, 0, 0.14);
|
||||
$status-focused-shadow-color: change-color($color: $status-shadow-color, $alpha: 0.3);
|
||||
$icon-hovered-shadow-color: rgba(0, 0, 0, 0.26);
|
||||
$account-header-image-shadow-color: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46));
|
||||
$button-shadow-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
|
||||
// Separation colors
|
||||
$base-separation-color: rgba(0, 0, 0, 0.14);
|
||||
|
||||
|
||||
//Border colors
|
||||
$non-elevated-card-boader : #e0e0e0;
|
||||
@ -1,138 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
// from mastodon/about.scss
|
||||
$column-breakpoint: 700px;
|
||||
|
||||
|
||||
|
||||
.landing-page {
|
||||
h3, h4, h5, h6 { color: $primary-lighter2-text-color }
|
||||
p { color: $primary-lighter1-text-color }
|
||||
em { color: $primary-text-color }
|
||||
|
||||
.column-0 { background: $base-darker1-color }
|
||||
.column-2 {
|
||||
.landing-page {
|
||||
&__information { padding: 0 }
|
||||
|
||||
&__short-description {
|
||||
& > .row:first-child {
|
||||
background: $base-darker1-color;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
& > * {
|
||||
padding-left: 40px; padding-right: 40px;
|
||||
&:last-child { padding-bottom: 45px }
|
||||
|
||||
@media screen and (max-width: $column-breakpoint) {
|
||||
padding-left: 20px; padding-right: 20px;
|
||||
&:last-child { padding-bottom: 25px }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__forms,
|
||||
&__information,
|
||||
&__call-to-action {
|
||||
@include status-shadow;
|
||||
background: $column-header-color;
|
||||
}
|
||||
|
||||
&__forms {
|
||||
padding: 0;
|
||||
|
||||
& > *:first-child { margin: inherit }
|
||||
& > * { margin-left: 20px; margin-right: 20px; }
|
||||
|
||||
.brand { background: $base-darker1-color }
|
||||
|
||||
form {
|
||||
& > .input input {
|
||||
background: $form-color;
|
||||
|
||||
&:focus { background: $form-focused-color }
|
||||
}
|
||||
}
|
||||
|
||||
.separator-or {
|
||||
margin-left: 20px; margin-right: 20px;
|
||||
|
||||
span {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $column-header-color;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $column-breakpoint) {
|
||||
background: inherit;
|
||||
box-shadow: none;
|
||||
|
||||
.separator-or span { background: $base-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__information {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
&.contact-widget {
|
||||
@include status-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
.contact-widget {
|
||||
&__mail {
|
||||
a { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
strong { color: inherit }
|
||||
|
||||
.row:first-child {
|
||||
h1 small {
|
||||
color: $light-darker1-text-color;
|
||||
|
||||
span { color: $light-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__call-to-action {
|
||||
.row__information-board {
|
||||
.information-board__section {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
& > span:last-child { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__features {
|
||||
.features-list {
|
||||
.features-list__row {
|
||||
.text { color: $primary-lighter1-text-color }
|
||||
.visual .fa { color: $icon-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__footer { color: $primary-lighter1-text-color }
|
||||
|
||||
#mastodon-timeline {
|
||||
color: $primary-text-color;
|
||||
background: transparent;
|
||||
|
||||
p {
|
||||
color: $primary-text-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,194 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.account {
|
||||
background: $account-color;
|
||||
border-color: $base-separation-color;
|
||||
|
||||
.account {
|
||||
&__display-name {
|
||||
color: $secondary-text-color;
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&-role {
|
||||
color: $primary-lighter2-text-color;
|
||||
background-color: rgba($base-separation-color, 0.1);
|
||||
border-color: rgba($base-separation-color, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
> .column-back-button {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
}
|
||||
}
|
||||
|
||||
.account-timeline__header {
|
||||
.account__header {
|
||||
background-color: $account-foreground-color;
|
||||
|
||||
> div { background-color: inherit } // -> v2.7.4
|
||||
|
||||
.account__header {
|
||||
&__username { color: $secondary-lighter1-text-color }
|
||||
&__fields { @extend .account__header__fields; }
|
||||
|
||||
&__image { // v2.8.0 ->
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: $account-header-image-shadow-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
> img:not([src]),
|
||||
> img[src$="/headers/original/missing.png"] {
|
||||
content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
|
||||
}
|
||||
}
|
||||
|
||||
&__bar { // v2.8.0 ->
|
||||
background-color: $base-lighter1-color;
|
||||
|
||||
.account__header {
|
||||
&__tabs {
|
||||
.avatar {
|
||||
.account__avatar {
|
||||
border-color: $base-lighter1-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
.icon-button {
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
h1 { color: $primary-text-color }
|
||||
small { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__bio {
|
||||
.account__header {
|
||||
&__content { color: $primary-text-color }
|
||||
&__fields { border-color: $base-separation-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__extra {
|
||||
&__links {
|
||||
&, a { color: $primary-lighter1-text-color }
|
||||
strong { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account--action-button {
|
||||
.icon-button:not(.active) {
|
||||
color: darken($light-text-color, 7%);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $light-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account {
|
||||
&__disclaimer,
|
||||
&__action-bar,
|
||||
&__section-headline {
|
||||
background: $base-lighter1-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&__action-bar {
|
||||
&__tab {
|
||||
border-color: $base-separation-color;
|
||||
&.active { border-bottom-color: $active-color }
|
||||
|
||||
> span { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__section-headline {
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
|
||||
&.active {
|
||||
color: $active-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $status-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-authorize__wrapper {
|
||||
@include status-shadow;
|
||||
background: $base-lighter1-color;
|
||||
|
||||
&:focus { @include status-focus-shadow; }
|
||||
|
||||
.account {
|
||||
&__header__content {
|
||||
color: $primary-lighter2-text-color;
|
||||
}
|
||||
|
||||
&--panel {
|
||||
background: $account-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account__header__fields {
|
||||
dl {
|
||||
border-color: $base-separation-color;
|
||||
|
||||
dt,
|
||||
dd {
|
||||
color: $primary-text-color;
|
||||
background: $base-lighter1-color;
|
||||
}
|
||||
|
||||
dd {
|
||||
&.verified {
|
||||
border-color: transparentize($valid-color, 0.5);
|
||||
background: transparentize($valid-color, 0.75);
|
||||
|
||||
a { color: lighten($verified-color, 20%) }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
.account__action-bar__tab {
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
body {
|
||||
&,
|
||||
.ui {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.focusable {
|
||||
&:focus {
|
||||
background: inherit;
|
||||
|
||||
.status {
|
||||
@include status-focus-shadow;
|
||||
|
||||
&.status-direct { background: $status-direct-color }
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
& { background: $status-color }
|
||||
&__action-bar { background: $status-actionbar-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: darken($base-lighter1-color, 12%);
|
||||
|
||||
&:hover { background: darken($base-lighter1-color, 16%) }
|
||||
&:active { background: darken($base-lighter1-color, 12%) }
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $base-color;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken($base-lighter1-color, 8%);
|
||||
}
|
||||
}
|
||||
@ -1,335 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.tabs-bar {
|
||||
margin: 0;
|
||||
background: $column-header-color;
|
||||
position: relative;
|
||||
|
||||
.tabs-bar {
|
||||
&__link {
|
||||
color: $icon-color;
|
||||
border-bottom: 4px solid $column-header-color;
|
||||
padding: 15px 10px 11px 10px;
|
||||
|
||||
&.active {
|
||||
border-bottom: 4px solid $active-color;
|
||||
}
|
||||
|
||||
.fa {
|
||||
@include material-icon-large;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer {
|
||||
.drawer {
|
||||
&__header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
.drawer__tab {
|
||||
@include material-icon-large;
|
||||
color: $icon-color;
|
||||
}
|
||||
|
||||
a {
|
||||
&:hover { background: $column-header-hover-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__pager {
|
||||
@include status-shadow;
|
||||
@include material-card-radius;
|
||||
|
||||
.drawer__inner {
|
||||
background: $column-header-color;
|
||||
|
||||
&__mastodon { display: none }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-bar {
|
||||
color: $secondary-text-color;
|
||||
background: $column-header-color;
|
||||
|
||||
.navigation-bar {
|
||||
&__profile {
|
||||
strong { color: $primary-text-color }
|
||||
&-edit { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.compose-form {
|
||||
.compose-form {
|
||||
&__buttons-wrapper {
|
||||
background: $column-header-color;
|
||||
|
||||
&.character-counter__wrapper {
|
||||
.character-counter { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__warning {
|
||||
background-color: $warning-card-color;
|
||||
}
|
||||
|
||||
&__publish { border-top: 1px solid $base-separation-color }
|
||||
&__modifiers { background-color: $base-lighter1-color }
|
||||
}
|
||||
|
||||
.autosuggest-textarea__textarea {
|
||||
background-color: $base-lighter1-color;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.character-counter {
|
||||
color: $icon-color
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
.column-header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
&.active {
|
||||
.column-header__icon {
|
||||
color: $icon-active-color;
|
||||
text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
* { background: inherit }
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
color: $icon-color;
|
||||
vertical-align: bottom;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
height: 50px;
|
||||
|
||||
.column-header {
|
||||
&__back-button {
|
||||
.column-back-button__icon { vertical-align: bottom }
|
||||
}
|
||||
|
||||
&__button {
|
||||
&.active {
|
||||
color: $icon-active-color;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.fa { vertical-align: unset }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
color: $icon-color;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
&__collapsible {
|
||||
color: $secondary-text-color;
|
||||
border-bottom: 1px solid $base-separation-color;
|
||||
|
||||
&-inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
|
||||
.column-back-button {
|
||||
background-color: $column-header-color;
|
||||
color: $secondary-text-color;
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
&-subheading,
|
||||
&-link__badge {
|
||||
background: $base-color;
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
|
||||
&-link {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
color: $icon-color;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
background: transparent;
|
||||
|
||||
*[role="feed"] {
|
||||
article {
|
||||
margin: 1em 0;
|
||||
&:first-of-type { margin: 0 }
|
||||
|
||||
&:focus { outline: none }
|
||||
}
|
||||
}
|
||||
|
||||
div[tabindex="-1"] { margin-bottom: 1em }
|
||||
}
|
||||
|
||||
.notification__filter-bar {
|
||||
background: $column-header-color;
|
||||
border-bottom-color: $base-separation-color;
|
||||
|
||||
button {
|
||||
color: $icon-color;
|
||||
background: $column-header-color;
|
||||
|
||||
&.active {
|
||||
color: $icon-active-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $column-header-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-column-indicator {
|
||||
flex-direction: column;
|
||||
background: $base-color;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 1em;
|
||||
|
||||
background: none center / contain no-repeat;
|
||||
background-image: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/notification-jingle_2x.gif");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// v2.9.0以降に対応
|
||||
.column-header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
&.active {
|
||||
.column-header__icon {
|
||||
color: $icon-active-color;
|
||||
text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
* { background: inherit }
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
color: $icon-color;
|
||||
vertical-align: bottom;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
height: 50px;
|
||||
|
||||
.column-header {
|
||||
&__back-button {
|
||||
.column-back-button__icon { vertical-align: bottom }
|
||||
}
|
||||
|
||||
&__button {
|
||||
&.active {
|
||||
color: $icon-active-color;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.fa { vertical-align: unset }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
color: $icon-color;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
&__collapsible {
|
||||
color: $secondary-text-color;
|
||||
border-bottom: 1px solid $base-separation-color;
|
||||
|
||||
&-inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
.column-back-button {
|
||||
background-color: $column-header-color;
|
||||
color: $secondary-text-color;
|
||||
|
||||
&__icon {
|
||||
@include material-icon-large;
|
||||
vertical-align: bottom;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
&__wrapper,
|
||||
& {
|
||||
background: $base-color;
|
||||
}
|
||||
|
||||
& {
|
||||
border-top: 1px solid $base-separation-color;
|
||||
|
||||
a { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.load {
|
||||
&-more,
|
||||
&-gap {
|
||||
background: transparent;
|
||||
|
||||
&:hover { background: darken($column-header-color, 10%) }
|
||||
}
|
||||
|
||||
&-gap { border: 0 }
|
||||
}
|
||||
|
||||
.confirmation-modal {
|
||||
@include material-card-radius;
|
||||
color: $primary-text-color;
|
||||
background-color: $base-lighter1-color;
|
||||
|
||||
&__action-bar {
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
|
||||
&__cancel-button {
|
||||
color: $primary-lighter1-text-color;
|
||||
box-shadow: 0 2px 5px 0 transparent;
|
||||
}
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.floating-action-button {
|
||||
font-size: 24px;
|
||||
background-color: $active-color;
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
|
||||
&:active {
|
||||
background-color: $active-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $floating-acton-button-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
@include button-shadow;
|
||||
@include material-card-radius;
|
||||
background-color: $active-button-color;
|
||||
|
||||
.text-icon-button {
|
||||
color: $primary-lighter1-text-color;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.button--block { @include button-shadow }
|
||||
|
||||
.button-secondary {
|
||||
background-color: $primary-lighter1-text-color;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-root {
|
||||
&__modal {
|
||||
.media-modal {
|
||||
&__close.icon-button {
|
||||
font-size: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($base-lighter1-color, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DOM操作によりpaddingが調整できないもの
|
||||
.privacy-dropdown__value-icon.icon-button.inverted,
|
||||
.compose-form__poll-button-icon.icon-button.inverted,
|
||||
.compose-form__upload-button-icon.icon-button.inverted { padding: 4px }
|
||||
@ -1,38 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.card {
|
||||
//border: 1px solid $base-separation-color;
|
||||
//不要(?)
|
||||
|
||||
> a {
|
||||
@include status-shadow;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.card__bar {
|
||||
background: initial;
|
||||
|
||||
.display-name strong { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.card__img { background: $card-image-color }
|
||||
.card__bar {
|
||||
background: $card-color;
|
||||
|
||||
.avatar {
|
||||
img { background: transparent }
|
||||
}
|
||||
|
||||
.display-name {
|
||||
strong { color: $primary-text-color }
|
||||
span { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
.dropdown-menu {
|
||||
background-color: $column-header-color;
|
||||
|
||||
&__arrow {
|
||||
&.top { border-top-color: $column-header-color }
|
||||
&.bottom { border-bottom-color: $column-header-color }
|
||||
}
|
||||
|
||||
&__separator { margin: 4px 0 }
|
||||
}
|
||||
|
||||
.dropdown-menu,
|
||||
.actions-modal {
|
||||
@include material-card-radius;
|
||||
|
||||
& > ul {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
.dropdown-menu {
|
||||
&__item {
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
padding: 16px 16px;
|
||||
background: $column-header-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background: $column-header-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__separator { border-bottom-color: $base-separation-color }
|
||||
}
|
||||
|
||||
& > li:not(:empty) {
|
||||
@extend .dropdown-menu__item;
|
||||
|
||||
a {
|
||||
padding: 12px 16px;
|
||||
color: $primary-text-color;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background-color: $column-header-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
background-color: $base-lighter1-color;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
padding-right: 16px;
|
||||
padding-left: 74px;
|
||||
|
||||
&__avatar {
|
||||
top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.status-card {
|
||||
color: $primary-lighter1-text-color;
|
||||
&__title, &__description { color: $primary-lighter2-text-color }
|
||||
|
||||
&__image { background: transparent }
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'components-button';
|
||||
@import 'components-card';
|
||||
@import 'components-dropdown';
|
||||
@import 'components-status-card';
|
||||
@ -1,68 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.emoji-mart {
|
||||
&-bar {
|
||||
border: 0 solid $base-separation-color;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
background-color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-anchors {
|
||||
color: $icon-color;
|
||||
}
|
||||
&-anchor {
|
||||
&-selected {
|
||||
color: $icon-active-color;
|
||||
|
||||
&:hover {
|
||||
color: $icon-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-bar {
|
||||
background-color: $icon-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-search {
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
&-search input {
|
||||
color: $primary-text-color;
|
||||
background-color: $form-color;
|
||||
border: 0px solid #ffffff00;
|
||||
}
|
||||
|
||||
&-category-label span {
|
||||
color: $primary-text-color;
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
|
||||
&-scroll {
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-picker-dropdown {
|
||||
&__modifiers {
|
||||
&__menu {
|
||||
@include status-shadow;
|
||||
@include material-card-radius;
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
|
||||
&__menu {
|
||||
@include column-shadow;
|
||||
background-color: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.public-layout {
|
||||
.page-header {
|
||||
background: $explore-header-color;
|
||||
|
||||
h1 { color: $primary-text-color }
|
||||
p { color: $primary-lighter2-text-color }
|
||||
}
|
||||
|
||||
.directory,
|
||||
.notice-widget { @include column-shadow; }
|
||||
|
||||
.directory {
|
||||
background: $explore-directory-color;
|
||||
|
||||
.accounts-table {
|
||||
&__count {
|
||||
color: $primary-lighter2-text-color;
|
||||
small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__tag {
|
||||
& > a {
|
||||
@include status-shadow;
|
||||
background: $explore-directory-color;
|
||||
}
|
||||
|
||||
h4 { color: $primary-lighter2-text-color }
|
||||
.fa, small { color: $primary-lighter1-text-color }
|
||||
.trends__item__current { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.notice-widget {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $explore-directory-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -1,21 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.keyboard-shortcuts {
|
||||
kbd {
|
||||
@include status-shadow;
|
||||
|
||||
color: $primary-text-color;
|
||||
background-color: $base-lighter1-color;
|
||||
border-color: $base-darker1-color;
|
||||
|
||||
margin: 0 0.25em;
|
||||
|
||||
&:first-child { margin-left: 0 }
|
||||
&:last-child { margin-right: 0 }
|
||||
}
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.column {
|
||||
.column-back-button { background: inherit }
|
||||
|
||||
.column-inline-form {
|
||||
background: $column-header-color;
|
||||
|
||||
label input {
|
||||
color: $secondary-text-color;
|
||||
&:focus { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.column-inline-form ~ .scrollable {
|
||||
article { margin: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
.modal-root {
|
||||
.column-inline-form {
|
||||
background: $column-header-color;
|
||||
|
||||
.setting-text {
|
||||
color: $primary-text-color;
|
||||
&:active, &:focus { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.list-editor {
|
||||
background: $base-color;
|
||||
h4 { background: $column-header-color }
|
||||
|
||||
.drawer__pager {
|
||||
.drawer__inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
|
||||
.list-adder {
|
||||
background: $base-color;
|
||||
|
||||
.column-inline-form { border-bottom: 1px solid $base-separation-color }
|
||||
|
||||
&__account,
|
||||
&__lists { background: $column-header-color }
|
||||
|
||||
&__lists {
|
||||
.list { border-color: $base-separation-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.notification {
|
||||
&.notification-favourite {
|
||||
.status {
|
||||
&.status-direct { background: transparent }
|
||||
}
|
||||
}
|
||||
|
||||
> .notification__message {
|
||||
color: $primary-lighter2-text-color;
|
||||
font-size: 13px;
|
||||
padding: 8px 0;
|
||||
|
||||
.notification__display-name {
|
||||
&:hover { color: inherit }
|
||||
}
|
||||
|
||||
.notification__favourite-icon-wrapper {
|
||||
.star-icon { color: $icon-active-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,232 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.public-layout {
|
||||
a.button {
|
||||
@include button-shadow;
|
||||
|
||||
color: $primary-text-color;
|
||||
background: $base-lighter1-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($base-lighter1-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.logo-button {
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
|
||||
&#Mastodon { fill: $base-lighter1-color !important }
|
||||
}
|
||||
}
|
||||
|
||||
.public-account-header {
|
||||
@include status-shadow;
|
||||
|
||||
&__image {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
@media screen and (min-width: 600px) { height: 500px }
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: $account-header-image-shadow-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
> img:not([src]),
|
||||
> img[src="/headers/original/missing.png"] {
|
||||
content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
|
||||
}
|
||||
}
|
||||
|
||||
&__bar {
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
background: $base-color;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) { margin-top: -140px }
|
||||
|
||||
&::before { background: $base-lighter1-color }
|
||||
|
||||
.avatar {
|
||||
@media screen and (max-width: 600px) {
|
||||
position: relative;
|
||||
bottom: 30px;
|
||||
|
||||
display: initial;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 2px solid $base-lighter1-color;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0;
|
||||
|
||||
&__name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
color: $primary-text-color;
|
||||
|
||||
small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
justify-content: center;
|
||||
flex: auto;
|
||||
|
||||
.spacer { display: none }
|
||||
|
||||
a.button.logo-button {
|
||||
color: $light-text-color;
|
||||
background: $secondary-text-color;
|
||||
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $base-lighter1-color !important }
|
||||
&#Mastodon { fill: $secondary-text-color !important }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-counters {
|
||||
.counter {
|
||||
color: $light-text-color;
|
||||
border-right: 0;
|
||||
|
||||
&::after { border-bottom-color: $base-color }
|
||||
|
||||
&.active {
|
||||
&::after { border-bottom-color: $active-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__extra {
|
||||
.public-account-bio {
|
||||
.account__header__content { text-align: center }
|
||||
}
|
||||
|
||||
&__links {
|
||||
color: $primary-text-color;
|
||||
|
||||
a {
|
||||
&, strong { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.public-account-bio,
|
||||
.endorsements-widget,
|
||||
.hero-widget { @include status-shadow; }
|
||||
|
||||
.public-account-bio {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
.account__header__content { color: $primary-text-color }
|
||||
&__extra { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
.endorsements-widget {
|
||||
padding-bottom: 0;
|
||||
border-radius: 4px;
|
||||
|
||||
h4 {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-widget {
|
||||
&__img { background: $base-color }
|
||||
&__text {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
&, em { color: $primary-lighter2-text-color }
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.account__section-headline {
|
||||
background: $base-lighter1-color;
|
||||
border-bottom-color: $base-separation-color;
|
||||
|
||||
a {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
&.active {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $status-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-stream {
|
||||
box-shadow: none;
|
||||
|
||||
.entry {
|
||||
margin: 1em 0;
|
||||
background: transparent;
|
||||
|
||||
&:first-of-type { margin: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
@include status-shadow;
|
||||
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $base-lighter1-color;
|
||||
}
|
||||
|
||||
.footer {
|
||||
h4 { color: $primary-lighter1-text-color }
|
||||
|
||||
ul {
|
||||
a { color: $primary-lighter2-text-color }
|
||||
}
|
||||
|
||||
.brand {
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
|
||||
&#Mastodon { fill: $base-lighter1-color !important }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.search {
|
||||
.search {
|
||||
&__input {
|
||||
@include material-border;
|
||||
|
||||
color: $primary-text-color;
|
||||
background: $form-color;
|
||||
|
||||
&:focus { background: $form-focused-color }
|
||||
}
|
||||
|
||||
&__icon {
|
||||
.fa { color: $icon-color }
|
||||
}
|
||||
}
|
||||
|
||||
&-results {
|
||||
> .search-results {
|
||||
&__header { background: $base-color }
|
||||
&__section {
|
||||
> h5 { background: darken($base-color, 10%) }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trends__item {
|
||||
background: $trend-color;
|
||||
|
||||
.trends__item {
|
||||
&__name a { color: $secondary-text-color }
|
||||
&__current { color: lighten($secondary-text-color, 10%) }
|
||||
}
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.edit_account {
|
||||
@media screen and (min-width: 415px) {
|
||||
.card {
|
||||
> a {
|
||||
position: relative;
|
||||
|
||||
.card__img {
|
||||
border-bottom: 1px solid $base-separation-color;
|
||||
|
||||
> img:not([src]),
|
||||
> img[src="/headers/original/missing.png"] {
|
||||
content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
|
||||
}
|
||||
}
|
||||
|
||||
.card__bar {
|
||||
position: static;
|
||||
padding-top: 30%;
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.display-name {
|
||||
flex: auto;
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.dashboard {
|
||||
&__counters {
|
||||
& > div {
|
||||
& > div, & > a { background: $dashboard-counters-base-color }
|
||||
|
||||
& > a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: $dashboard-counters-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__text,
|
||||
&__num { color: $primary-text-color }
|
||||
|
||||
&__label { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
&__widgets {
|
||||
a:not(.name-tag) { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.admin-wrapper {
|
||||
.content {
|
||||
.directory__tag {
|
||||
& > a,
|
||||
& > div { background: $setting-base-color }
|
||||
|
||||
h4 {
|
||||
& { color: $primary-lighter2-text-color }
|
||||
.fa, small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
.trends__item__current { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.log-entry {
|
||||
.log-entry {
|
||||
&__header {
|
||||
color: $primary-lighter2-text-color;
|
||||
background: $log-entry-color;
|
||||
|
||||
.username,
|
||||
.target,
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
&__timestamp { color: $primary-lighter1-text-color }
|
||||
&__icon { color: $icon-color }
|
||||
|
||||
&__extras {
|
||||
color: $primary-text-color;
|
||||
background: $log-entry-extra-color;
|
||||
|
||||
.diff-neutral { color: $log-entry-extra--neutral-color }
|
||||
.diff-old { color: $log-entry-extra--old-color }
|
||||
.diff-new { color: $log-entry-extra--new-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,75 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.report-card {
|
||||
background: $setting-content-base-color;
|
||||
|
||||
&__profile__stats {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
a {
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: lighten($primary-lighter2-text-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__summary {
|
||||
&__item {
|
||||
border-top-color: $base-separation-color;
|
||||
|
||||
&:hover { background: $column-header-hover-color }
|
||||
|
||||
&__reported-by,
|
||||
&__assigned {
|
||||
color: $primary-lighter2-text-color;
|
||||
}
|
||||
|
||||
&__content {
|
||||
&__icon { color: $icon-color }
|
||||
a { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.batch-table {
|
||||
&__toolbar {
|
||||
background: $base-lighter1-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&__row {
|
||||
&, &:nth-child(2n) { background: $base-lighter1-color }
|
||||
&:hover, &:nth-child(2n):hover { background: $column-header-hover-color }
|
||||
|
||||
border-color: $base-separation-color;
|
||||
|
||||
&__content {
|
||||
.status__content { color: $primary-text-color }
|
||||
.detailed-status__meta { color: $primary-lighter1-text-color }
|
||||
|
||||
|
||||
.accounts-table { // v2.8.0 ->
|
||||
.accounts-table {
|
||||
&__count {
|
||||
& {color: $primary-text-color }
|
||||
small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
td .account { background: inherit }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.speech-bubble {
|
||||
&__bubble { color: $primary-text-color }
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
@ -1,245 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'settings-account';
|
||||
@import 'settings-report';
|
||||
@import 'settings-log';
|
||||
@import 'settings-dashboard';
|
||||
@import 'settings-directory_tag';
|
||||
|
||||
|
||||
|
||||
body.admin {
|
||||
color: $primary-text-color;
|
||||
background: $setting-base-color;
|
||||
|
||||
.sidebar {
|
||||
&-wrapper { background: inherit }
|
||||
|
||||
ul {
|
||||
border-radius: 0;
|
||||
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background: $setting-lists-hover-color;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $primary-text-color;
|
||||
background: $setting-lists-selected-color;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
@include material-icon-large;
|
||||
margin-right: 8px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
ul { background: darken($setting-base-color, 4%) }
|
||||
|
||||
.simple-navigation-active-leaf a {
|
||||
color: $icon-active-color;
|
||||
background: initial;
|
||||
|
||||
&:hover { background: $setting-lists-hover-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@include column-shadow;
|
||||
background: $setting-content-base-color;
|
||||
|
||||
h2, h3, h4, h6 { color: $primary-text-color }
|
||||
|
||||
p {
|
||||
color: $primary-text-color;
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
h2, h4, hr { border-bottom-color: $base-separation-color }
|
||||
.muted-hint { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form {
|
||||
.input {
|
||||
&.boolean,
|
||||
&.with_label,
|
||||
&.with_floating_label {
|
||||
.label_input > label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.with_block_label {
|
||||
& > label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.radio_buttons{
|
||||
.radio label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&-copy {
|
||||
background: $base-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
}
|
||||
|
||||
.check_boxes {
|
||||
.checkbox {
|
||||
label { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=number],
|
||||
input[type=email],
|
||||
input[type=password],
|
||||
textarea {
|
||||
color: $primary-text-color;
|
||||
background: $setting-content-base-color;
|
||||
border-color: $base-separation-color;
|
||||
|
||||
&:hover {
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background: darken($setting-content-base-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
color: $primary-text-color;
|
||||
background-color: $setting-content-base-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
.input.field_with_errors {
|
||||
label,
|
||||
.error {
|
||||
color: $error-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hint, p.hint {
|
||||
color: $primary-lighter1-text-color !important;
|
||||
|
||||
code {
|
||||
color: $light-text-color;
|
||||
background: $setting-emphasis-color;
|
||||
}
|
||||
}
|
||||
|
||||
.recommended {
|
||||
color: $verified-color;
|
||||
background-color: transparentize($verified-color, 0.75);
|
||||
border-color: $verified-color;
|
||||
}
|
||||
|
||||
.label_input {
|
||||
&__append { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
button {
|
||||
@include button-shadow;
|
||||
background-color: $active-button-color;
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form,
|
||||
.table-form {
|
||||
.warning { background: change-color($color: $error-color, $alpha: 0.8) }
|
||||
}
|
||||
|
||||
.quick-nav {
|
||||
a {
|
||||
color: $secondary-text-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: lighten($secondary-text-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.page,
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.page {
|
||||
&.current {
|
||||
background: $icon-active-color;
|
||||
color: $light-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filters {
|
||||
.filter-subset {
|
||||
strong { color: $primary-text-color }
|
||||
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
&:hover { color: $primary-text-color }
|
||||
|
||||
&.selected {
|
||||
color: $active-text-color;
|
||||
border-bottom-color: $active-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new_form_two_factor_confirmation {
|
||||
.qr-wrapper {
|
||||
.qr-code { box-shadow: none }
|
||||
.qr-alternative { color: $secondary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
label,
|
||||
select#user_setting_default_privacy {
|
||||
&[for=user_setting_default_privacy_public],
|
||||
&[for=user_setting_default_privacy_unlisted],
|
||||
option[value="public"],
|
||||
option[value="unlisted"] { color: $active-text-color !important }
|
||||
}
|
||||
|
||||
.column-header__collapsible__extra {
|
||||
.column-settings__section { color: $primary-text-color }
|
||||
|
||||
.setting-toggle {
|
||||
.react-toggle {
|
||||
&.react-toggle--checked {
|
||||
> .react-toggle-track { background: $setting-toggle-checked-color }
|
||||
|
||||
> .react-toggle-thumb {
|
||||
border-color: $setting-toggle-checked-color;
|
||||
background-color: $setting-toggle-thumb-checked-color;
|
||||
}
|
||||
}
|
||||
|
||||
> .react-toggle-track { background: $setting-toggle-color }
|
||||
|
||||
> .react-toggle-thumb {
|
||||
border-color: $setting-toggle-color;
|
||||
background-color: $setting-toggle-thumb-color;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-toggle__label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.setting-meta__label { color: $primary-lighter1-text-color }
|
||||
}
|
||||
@ -1,123 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.status {
|
||||
@include status-shadow;
|
||||
@include material-card-radius;
|
||||
border-bottom: 0;
|
||||
|
||||
transition: box-shadow 0.1s 0s ease-out;
|
||||
|
||||
&.light {
|
||||
.status {
|
||||
&__relative-time { color: $primary-lighter1-text-color }
|
||||
&__display-name {
|
||||
color: $primary-text-color;
|
||||
|
||||
.display-name__account { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
&__content { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.display-name strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.status-direct {
|
||||
background: $status-direct-color;
|
||||
|
||||
&:not(.read) {
|
||||
background: inherit;
|
||||
border-bottom-color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
&.muted {
|
||||
.status__content {
|
||||
p { color: lighten($primary-text-color, 20%) }
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
&__info {
|
||||
.status__display-name {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.status__relative-time { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__action-bar__counter__label { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
&__display-name {
|
||||
color: $secondary-text-color;
|
||||
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&__meta {
|
||||
.detailed-status__datetime { color: $primary-lighter1-text-color }
|
||||
|
||||
.detailed-status__link {
|
||||
.fa.fa-star { vertical-align: middle }
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
@include status-shadow;
|
||||
|
||||
.detailed-status { @extend .detailed-status; }
|
||||
.detailed-status__action-bar {
|
||||
background: $status-actionbar-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status,
|
||||
.detailed-status {
|
||||
background: $status-color;
|
||||
|
||||
.status__content {
|
||||
color: $primary-text-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
|
||||
.status__content__spoiler-link {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.status-card,
|
||||
a.status-card.compact {
|
||||
&:hover { background: initial }
|
||||
}
|
||||
|
||||
.status-card,
|
||||
.status-card.compact {
|
||||
border-color: $non-elevated-card-boader;
|
||||
|
||||
&__title {
|
||||
color : $primary-text-color;
|
||||
}
|
||||
|
||||
&__host {
|
||||
color: $primary-lighter1-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.name-tag,
|
||||
a.name-tag {
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.table {
|
||||
thead th { border-bottom-color: $base-separation-color }
|
||||
|
||||
th,
|
||||
td {
|
||||
color: $primary-text-color;
|
||||
background-color: $base-color;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
& > tbody > tr:nth-child(odd) {
|
||||
& > td, & > th { background: darken($base-color, 4%) }
|
||||
}
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
a.table-action-link,
|
||||
button.table-action-link {
|
||||
color: $secondary-text-color;
|
||||
|
||||
&:hover { color: darken($secondary-text-color, 8%) }
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
/**
|
||||
* Google+ Theme for Mastodon v1.1
|
||||
* Copyright (C) 2018-2019 Genbu Project
|
||||
*/
|
||||
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'application';
|
||||
@import 'gplus-theme-for-mastodon/basics';
|
||||
@import 'gplus-theme-for-mastodon/components';
|
||||
@import 'gplus-theme-for-mastodon/tables';
|
||||
@import 'gplus-theme-for-mastodon/columns';
|
||||
@import 'gplus-theme-for-mastodon/lists';
|
||||
@import 'gplus-theme-for-mastodon/accounts';
|
||||
@import 'gplus-theme-for-mastodon/statuses';
|
||||
@import 'gplus-theme-for-mastodon/notifications';
|
||||
@import 'gplus-theme-for-mastodon/searches';
|
||||
@import 'gplus-theme-for-mastodon/settings';
|
||||
@import 'gplus-theme-for-mastodon/icons';
|
||||
@import 'gplus-theme-for-mastodon/profile';
|
||||
@import 'gplus-theme-for-mastodon/about';
|
||||
@import 'gplus-theme-for-mastodon/explore';
|
||||
@ -1,11 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
@mixin column-shadow { box-shadow: 0 1px 8px 0 $column-header-shadow-color }
|
||||
@mixin status-shadow { box-shadow: 0 1px 4px 0 $status-shadow-color }
|
||||
@mixin status-focus-shadow { box-shadow: 0 0 20px 0 $status-focused-shadow-color }
|
||||
@mixin button-shadow { box-shadow: 0 2px 5px 0 $button-shadow-color }
|
||||
@mixin material-border { border-radius: 4px }
|
||||
@ -1,81 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
|
||||
|
||||
// Base colors
|
||||
$active-color: #db4437;
|
||||
$accent-color: #fbbc04;
|
||||
$valid-color: #4285f4;
|
||||
$error-color: #d50000;
|
||||
$checked-color: #4285f4;
|
||||
$verified-color: #4caf50;
|
||||
|
||||
|
||||
// Text colors
|
||||
$primary-text-color: rgba(0, 0, 0, 0.87);
|
||||
$primary-lighter1-text-color: change-color($color: $primary-text-color, $lightness: 62%, $alpha: 1.0); // ex: 時間表示
|
||||
$primary-lighter2-text-color: change-color($color: $primary-text-color, $lightness: 38%, $alpha: 1.0); // ex: 通知メッセージ表示
|
||||
$secondary-text-color: #2962ff;
|
||||
$secondary-lighter1-text-color: #00bfff; // ex: アカウントTLのユーザーID
|
||||
$light-text-color: #ffffff;
|
||||
$light-darker1-text-color: darken($light-text-color, 15%);
|
||||
$active-text-color: $active-color;
|
||||
$error-text-color: $error-color;
|
||||
|
||||
|
||||
// Icon colors
|
||||
$icon-color: #757575;
|
||||
$icon-active-color: $active-color;
|
||||
|
||||
|
||||
// Background colors
|
||||
$base-color: #f1f1f1;
|
||||
$base-lighter1-color: #ffffff;
|
||||
$base-darker1-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
$column-header-color: $base-lighter1-color;
|
||||
$column-header-hover-color: change-color($color: $column-header-color, $lightness: 90%);
|
||||
|
||||
$status-color: $base-lighter1-color;
|
||||
$status-direct-color: darken($status-color, 5%);
|
||||
$status-actionbar-color: change-color($color: $status-color, $lightness: 98%);
|
||||
|
||||
$account-color: $base-lighter1-color;
|
||||
$account-foreground-color: $base-darker1-color;
|
||||
|
||||
$card-color: $base-lighter1-color;
|
||||
$card-hover-color: $column-header-hover-color;
|
||||
$card-image-color: $base-color;
|
||||
|
||||
$form-color: rgba(0, 0, 0, 0.1);
|
||||
$form-focused-color: lighten($form-color, 20%);
|
||||
$trend-color: $base-lighter1-color;
|
||||
|
||||
$setting-base-color: $base-color;
|
||||
$setting-lists-selected-color: darken($base-color, 2%);
|
||||
$setting-lists-hover-color: darken($base-color, 5%);
|
||||
$setting-content-base-color: $base-lighter1-color;
|
||||
|
||||
$setting-toggle-color: #b9b9b9;
|
||||
$setting-toggle-checked-color: change-color($color: $checked-color, $alpha: 0.5);
|
||||
$setting-toggle-thumb-color: #fafafa;
|
||||
$setting-toggle-thumb-checked-color: $checked-color;
|
||||
|
||||
$dashboard-counters-base-color: $base-color;
|
||||
$dashboard-counters-hover-color: lighten($base-color, 2%);
|
||||
|
||||
$explore-header-color: lighten($accent-color, 16%);
|
||||
$explore-directory-color: $base-lighter1-color;
|
||||
|
||||
|
||||
// Shadow colors
|
||||
$column-header-shadow-color: rgba(0, 0, 0, 0.3);
|
||||
$status-shadow-color: rgba(0, 0, 0, 0.14);
|
||||
$status-focused-shadow-color: change-color($color: $status-shadow-color, $alpha: 0.3);
|
||||
$icon-hovered-shadow-color: rgba(0, 0, 0, 0.26);
|
||||
$account-header-image-shadow-color: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46));
|
||||
$button-shadow-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
|
||||
// Separation colors
|
||||
$base-separation-color: rgba(0, 0, 0, 0.14);
|
||||
@ -1,138 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
// from mastodon/about.scss
|
||||
$column-breakpoint: 700px;
|
||||
|
||||
|
||||
|
||||
.landing-page {
|
||||
h3, h4, h5, h6 { color: $primary-lighter2-text-color }
|
||||
p { color: $primary-lighter1-text-color }
|
||||
em { color: $primary-text-color }
|
||||
|
||||
.column-0 { background: $base-darker1-color }
|
||||
.column-2 {
|
||||
.landing-page {
|
||||
&__information { padding: 0 }
|
||||
|
||||
&__short-description {
|
||||
& > .row:first-child {
|
||||
background: $base-darker1-color;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
& > * {
|
||||
padding-left: 40px; padding-right: 40px;
|
||||
&:last-child { padding-bottom: 45px }
|
||||
|
||||
@media screen and (max-width: $column-breakpoint) {
|
||||
padding-left: 20px; padding-right: 20px;
|
||||
&:last-child { padding-bottom: 25px }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__forms,
|
||||
&__information,
|
||||
&__call-to-action {
|
||||
@include status-shadow;
|
||||
background: $column-header-color;
|
||||
}
|
||||
|
||||
&__forms {
|
||||
padding: 0;
|
||||
|
||||
& > *:first-child { margin: inherit }
|
||||
& > * { margin-left: 20px; margin-right: 20px; }
|
||||
|
||||
.brand { background: $base-darker1-color }
|
||||
|
||||
form {
|
||||
& > .input input {
|
||||
background: $form-color;
|
||||
|
||||
&:focus { background: $form-focused-color }
|
||||
}
|
||||
}
|
||||
|
||||
.separator-or {
|
||||
margin-left: 20px; margin-right: 20px;
|
||||
|
||||
span {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $column-header-color;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $column-breakpoint) {
|
||||
background: inherit;
|
||||
box-shadow: none;
|
||||
|
||||
.separator-or span { background: $base-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__information {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
&.contact-widget {
|
||||
@include status-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
.contact-widget {
|
||||
&__mail {
|
||||
a { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
strong { color: inherit }
|
||||
|
||||
.row:first-child {
|
||||
h1 small {
|
||||
color: $light-darker1-text-color;
|
||||
|
||||
span { color: $light-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__call-to-action {
|
||||
.row__information-board {
|
||||
.information-board__section {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
& > span:last-child { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__features {
|
||||
.features-list {
|
||||
.features-list__row {
|
||||
.text { color: $primary-lighter1-text-color }
|
||||
.visual .fa { color: $icon-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__footer { color: $primary-lighter1-text-color }
|
||||
|
||||
#mastodon-timeline {
|
||||
color: $primary-text-color;
|
||||
background: transparent;
|
||||
|
||||
p {
|
||||
color: $primary-text-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,109 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.account {
|
||||
background: $account-color;
|
||||
border-color: $base-separation-color;
|
||||
|
||||
.account {
|
||||
&__display-name {
|
||||
color: $secondary-text-color;
|
||||
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
> .column-back-button {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
}
|
||||
}
|
||||
|
||||
.account-timeline__header {
|
||||
.account__header {
|
||||
background-color: $account-foreground-color;
|
||||
|
||||
> div { background-color: inherit }
|
||||
|
||||
.account__header {
|
||||
&__username { color: $secondary-lighter1-text-color }
|
||||
&__fields { @extend .account__header__fields; }
|
||||
}
|
||||
|
||||
.account--action-button {
|
||||
.icon-button:not(.active) {
|
||||
color: darken($light-text-color, 7%);
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $light-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account {
|
||||
&__disclaimer,
|
||||
&__action-bar,
|
||||
&__section-headline {
|
||||
background: $column-header-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&__action-bar {
|
||||
&__tab {
|
||||
border-color: $base-separation-color;
|
||||
&.active { border-bottom-color: $active-color }
|
||||
|
||||
> span { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__section-headline {
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
|
||||
&.active {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $status-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account__header__fields {
|
||||
dl {
|
||||
border-color: $base-separation-color;
|
||||
|
||||
dt,
|
||||
dd {
|
||||
color: $primary-text-color;
|
||||
background: $column-header-color;
|
||||
}
|
||||
|
||||
dd {
|
||||
&.verified {
|
||||
border-color: transparentize($valid-color, 0.5);
|
||||
background: transparentize($valid-color, 0.75);
|
||||
|
||||
a { color: lighten($verified-color, 20%) }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
.account__action-bar__tab {
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
body {
|
||||
&,
|
||||
.ui {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.focusable {
|
||||
&:focus {
|
||||
background: inherit;
|
||||
|
||||
.status {
|
||||
@include status-focus-shadow;
|
||||
|
||||
&.status-direct { background: $status-direct-color }
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
& { background: $status-color }
|
||||
&__action-bar { background: $status-actionbar-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: darken($base-lighter1-color, 12%);
|
||||
|
||||
&:hover { background: darken($base-lighter1-color, 16%) }
|
||||
&:active { background: darken($base-lighter1-color, 12%) }
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $base-color;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: darken($base-lighter1-color, 8%);
|
||||
}
|
||||
}
|
||||
@ -1,197 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.tabs-bar {
|
||||
margin: 0;
|
||||
background: $column-header-color;
|
||||
|
||||
.tabs-bar {
|
||||
&__link {
|
||||
color: $icon-color;
|
||||
|
||||
.fa { vertical-align: top }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer {
|
||||
.drawer {
|
||||
&__header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
.drawer__tab { color: $icon-color }
|
||||
|
||||
a {
|
||||
&:hover { background: $column-header-hover-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__pager {
|
||||
@include status-shadow;
|
||||
|
||||
.drawer__inner {
|
||||
background: $column-header-color;
|
||||
|
||||
&__mastodon { display: none }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-bar {
|
||||
color: $secondary-text-color;
|
||||
background: $column-header-color;
|
||||
|
||||
.navigation-bar {
|
||||
&__profile {
|
||||
strong { color: $primary-text-color }
|
||||
&-edit { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form {
|
||||
.compose-form {
|
||||
&__buttons-wrapper { background: $column-header-color }
|
||||
&__publish { border-top: 1px solid $base-separation-color }
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
.column-header {
|
||||
@include column-shadow;
|
||||
background: $column-header-color;
|
||||
|
||||
&.active {
|
||||
.column-header__icon {
|
||||
color: $icon-active-color;
|
||||
text-shadow: 0 0 10px change-color($color: $icon-active-color, $alpha: 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
* { background: inherit }
|
||||
|
||||
&__icon {
|
||||
color: $icon-color;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
.column-header {
|
||||
&__back-button {
|
||||
.column-back-button__icon { vertical-align: unset }
|
||||
}
|
||||
|
||||
&__button {
|
||||
&.active {
|
||||
color: $icon-active-color;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.fa { vertical-align: unset }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__collapsible {
|
||||
color: $secondary-text-color;
|
||||
border-bottom: 1px solid $base-separation-color;
|
||||
|
||||
&-inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
|
||||
.column-back-button {
|
||||
&__icon { vertical-align: unset }
|
||||
}
|
||||
|
||||
.column {
|
||||
&-subheading { background: darken($base-color, 10%) }
|
||||
|
||||
&-link {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
|
||||
&__icon {
|
||||
color: $icon-color;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
background: transparent;
|
||||
|
||||
*[role="feed"] {
|
||||
article {
|
||||
margin: 1em 0;
|
||||
&:first-of-type { margin: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
div[tabindex="-1"] { margin-bottom: 1em }
|
||||
}
|
||||
|
||||
.notification__filter-bar {
|
||||
background: $column-header-color;
|
||||
border-bottom-color: $base-separation-color;
|
||||
|
||||
button {
|
||||
color: $icon-color;
|
||||
background: $column-header-color;
|
||||
|
||||
&.active {
|
||||
color: $icon-active-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $column-header-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-column-indicator {
|
||||
flex-direction: column;
|
||||
background: $base-color;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 1em;
|
||||
|
||||
background: none center / contain no-repeat;
|
||||
background-image: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/notification-jingle_2x.gif");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
&__wrapper,
|
||||
& {
|
||||
background: $base-color;
|
||||
}
|
||||
|
||||
& {
|
||||
border-top: 1px solid $base-separation-color;
|
||||
|
||||
a { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.load {
|
||||
&-more,
|
||||
&-gap {
|
||||
background: transparent;
|
||||
|
||||
&:hover { background: darken($column-header-color, 10%) }
|
||||
}
|
||||
|
||||
&-gap { border: 0 }
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.floating-action-button {
|
||||
font-size: 24px;
|
||||
background: $active-color;
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.card {
|
||||
border: 1px solid $base-separation-color;
|
||||
|
||||
> a {
|
||||
@include status-shadow;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.card__bar {
|
||||
background: initial;
|
||||
|
||||
.display-name strong { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.card__img { background: $card-image-color }
|
||||
.card__bar {
|
||||
background: $card-color;
|
||||
|
||||
.avatar {
|
||||
img { background: transparent }
|
||||
}
|
||||
|
||||
.display-name {
|
||||
strong { color: $primary-text-color }
|
||||
span { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.dropdown-menu,
|
||||
.actions-modal > ul {
|
||||
@include material-border;
|
||||
background: $base-lighter1-color;
|
||||
|
||||
.dropdown-menu {
|
||||
&__arrow {
|
||||
&.top { border-top-color: $column-header-color }
|
||||
&.bottom { border-bottom-color: $column-header-color }
|
||||
}
|
||||
|
||||
&__item {
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
padding: 8px 16px;
|
||||
background: $column-header-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: $column-header-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__separator { border-bottom-color: $base-separation-color }
|
||||
}
|
||||
|
||||
& > li:not(:empty) {
|
||||
@extend .dropdown-menu__item;
|
||||
|
||||
a { padding: 12px 16px }
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'components-button';
|
||||
@import 'components-card';
|
||||
@import 'components-dropdown';
|
||||
@ -1,38 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.public-layout {
|
||||
.page-header {
|
||||
background: $explore-header-color;
|
||||
|
||||
h1 { color: $primary-text-color }
|
||||
p { color: $primary-lighter2-text-color }
|
||||
}
|
||||
|
||||
.directory {
|
||||
background: $explore-directory-color;
|
||||
|
||||
.accounts-table {
|
||||
&__count {
|
||||
color: $primary-lighter2-text-color;
|
||||
small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__tag {
|
||||
a { background: $explore-directory-color }
|
||||
h4 { color: $primary-text-color }
|
||||
.fa, small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.notice-widget {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $explore-directory-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -1,34 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.column {
|
||||
.column-back-button { background: inherit }
|
||||
|
||||
.column-inline-form {
|
||||
background: $column-header-color;
|
||||
|
||||
label input {
|
||||
color: $secondary-text-color;
|
||||
&:focus { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.column-inline-form ~ .scrollable {
|
||||
article { margin: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
.modal-root {
|
||||
.list-editor {
|
||||
background: $base-color;
|
||||
|
||||
h4 { background: $column-header-color }
|
||||
|
||||
.drawer__pager {
|
||||
.drawer__inner { background: $column-header-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.notification {
|
||||
&.notification-favourite {
|
||||
.status {
|
||||
&.status-direct { background: transparent }
|
||||
}
|
||||
}
|
||||
|
||||
> .notification__message {
|
||||
color: $primary-lighter2-text-color;
|
||||
font-size: 13px;
|
||||
padding: 8px 0;
|
||||
|
||||
.notification__display-name {
|
||||
&:hover { color: inherit }
|
||||
}
|
||||
|
||||
.notification__favourite-icon-wrapper {
|
||||
.star-icon { color: $icon-active-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,231 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.public-layout {
|
||||
a.button {
|
||||
@include button-shadow;
|
||||
|
||||
color: $primary-text-color;
|
||||
background: $base-lighter1-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: darken($base-lighter1-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.logo-button {
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
|
||||
&:last-child { fill: $base-lighter1-color !important }
|
||||
}
|
||||
}
|
||||
|
||||
.public-account-header {
|
||||
@include status-shadow;
|
||||
|
||||
&__image {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
@media screen and (min-width: 600px) { height: 500px }
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: $account-header-image-shadow-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
> img:not([src]),
|
||||
> img[src="/headers/original/missing.png"] {
|
||||
content: url("https://raw.githubusercontent.com/GenbuProject/GPlusTheme-for-Mastodon/asset/account-default_header.jpg");
|
||||
}
|
||||
}
|
||||
|
||||
&__bar {
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
background: $base-color;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) { margin-top: -140px }
|
||||
|
||||
&::before { background: $base-lighter1-color }
|
||||
|
||||
.avatar {
|
||||
@media screen and (max-width: 600px) {
|
||||
position: relative;
|
||||
bottom: 30px;
|
||||
|
||||
display: initial;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 2px solid $base-lighter1-color;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
@media screen and (max-width: 600px) {
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0;
|
||||
|
||||
&__name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
color: $primary-text-color;
|
||||
|
||||
small { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
justify-content: center;
|
||||
flex: auto;
|
||||
|
||||
.spacer { display: none }
|
||||
|
||||
a.button.logo-button {
|
||||
color: $light-text-color;
|
||||
background: $secondary-text-color;
|
||||
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $base-lighter1-color !important }
|
||||
&:last-child { fill: $secondary-text-color !important }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-counters {
|
||||
.counter {
|
||||
color: $light-text-color;
|
||||
border-right: 0;
|
||||
|
||||
&::after { border-bottom-color: $base-color }
|
||||
|
||||
&.active {
|
||||
&::after { border-bottom-color: $active-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__extra {
|
||||
.public-account-bio {
|
||||
.account__header__content { text-align: center }
|
||||
}
|
||||
|
||||
&__links {
|
||||
color: $primary-text-color;
|
||||
|
||||
a {
|
||||
&, strong { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.public-account-bio {
|
||||
@include column-shadow;
|
||||
background: $base-lighter1-color;
|
||||
|
||||
.account__header__content { color: $primary-text-color }
|
||||
&__extra { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
.endorsements-widget {
|
||||
@include column-shadow;
|
||||
|
||||
padding-bottom: 0;
|
||||
border-radius: 4px;
|
||||
|
||||
h4 {
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $base-lighter1-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-widget {
|
||||
@include column-shadow;
|
||||
|
||||
&__img { background: $base-color }
|
||||
&__text {
|
||||
background: $base-lighter1-color;
|
||||
|
||||
&, em { color: $primary-lighter2-text-color }
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.account__section-headline {
|
||||
background: $base-lighter1-color;
|
||||
border-bottom-color: $base-separation-color;
|
||||
|
||||
a {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
&.active {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
&::before { border-color: transparent transparent $base-separation-color }
|
||||
&::after { border-color: transparent transparent $status-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-stream {
|
||||
box-shadow: none;
|
||||
|
||||
.entry {
|
||||
margin: 1em 0;
|
||||
background: transparent;
|
||||
|
||||
&:first-of-type { margin: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
@include status-shadow;
|
||||
|
||||
color: $primary-lighter1-text-color;
|
||||
background: $base-lighter1-color;
|
||||
}
|
||||
|
||||
.footer {
|
||||
h4 { color: $primary-lighter1-text-color }
|
||||
|
||||
ul {
|
||||
a { color: $primary-lighter2-text-color }
|
||||
}
|
||||
|
||||
.brand {
|
||||
svg path {
|
||||
/* Only for Itabashi-don */
|
||||
&:not(#Mastodon):not(#Itabashi) { fill: $secondary-text-color !important }
|
||||
&:last-child { fill: $base-lighter1-color !important }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.search {
|
||||
.search {
|
||||
&__input {
|
||||
@include material-border;
|
||||
|
||||
color: $primary-text-color;
|
||||
background: $form-color;
|
||||
|
||||
&:focus { background: $form-focused-color }
|
||||
}
|
||||
|
||||
&__icon {
|
||||
.fa { color: $icon-color }
|
||||
}
|
||||
}
|
||||
|
||||
&-results {
|
||||
> .search-results {
|
||||
&__header { background: $base-color }
|
||||
&__section {
|
||||
> h5 { background: darken($base-color, 10%) }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trends__item {
|
||||
background: $trend-color;
|
||||
|
||||
.trends__item {
|
||||
&__name a { color: $secondary-text-color }
|
||||
&__current { color: lighten($secondary-text-color, 10%) }
|
||||
}
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.edit_account {
|
||||
@media screen and (min-width: 415px) {
|
||||
.card {
|
||||
> a {
|
||||
position: relative;
|
||||
|
||||
.card__img { border-bottom: 1px solid $base-separation-color }
|
||||
.card__bar {
|
||||
position: static;
|
||||
padding-top: 30%;
|
||||
|
||||
.avatar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
.display-name {
|
||||
flex: auto;
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.dashboard {
|
||||
&__counters {
|
||||
& > div {
|
||||
& > div, & > a { background: $dashboard-counters-base-color }
|
||||
|
||||
& > a {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: $dashboard-counters-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__num { color: $primary-text-color }
|
||||
&__label { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
&__widgets {
|
||||
a:not(.name-tag) { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
@ -1,63 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.report-card {
|
||||
background: $setting-content-base-color;
|
||||
|
||||
&__profile__stats {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
a {
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: lighten($primary-lighter2-text-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__summary {
|
||||
&__item {
|
||||
border-top-color: $base-separation-color;
|
||||
|
||||
&:hover { background: $column-header-hover-color }
|
||||
|
||||
&__reported-by,
|
||||
&__assigned {
|
||||
color: $primary-lighter2-text-color;
|
||||
}
|
||||
|
||||
&__content {
|
||||
&__icon { color: $icon-color }
|
||||
a { color: $primary-lighter2-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.batch-table {
|
||||
&__toolbar {
|
||||
background: $base-lighter1-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&__row {
|
||||
background: $base-lighter1-color;
|
||||
border-color: $base-separation-color;
|
||||
|
||||
&:hover { background: $column-header-hover-color }
|
||||
|
||||
&__content {
|
||||
.status__content { color: $primary-text-color }
|
||||
.detailed-status__meta { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.speech-bubble {
|
||||
&__bubble { color: $primary-text-color }
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
@ -1,208 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'settings-account';
|
||||
@import 'settings-report';
|
||||
@import 'settings-dashboard';
|
||||
|
||||
|
||||
|
||||
body.admin {
|
||||
color: $primary-text-color;
|
||||
background: $setting-base-color;
|
||||
|
||||
.sidebar {
|
||||
&-wrapper { background: inherit }
|
||||
|
||||
ul {
|
||||
border-radius: 0;
|
||||
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
background: $setting-lists-hover-color;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $primary-text-color;
|
||||
background: $setting-lists-selected-color;
|
||||
}
|
||||
}
|
||||
|
||||
ul { background: darken($setting-base-color, 4%) }
|
||||
|
||||
.simple-navigation-active-leaf a {
|
||||
color: $icon-active-color;
|
||||
background: initial;
|
||||
|
||||
&:hover { background: $setting-lists-hover-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
@include column-shadow;
|
||||
background: $setting-content-base-color;
|
||||
|
||||
h2, h3, h4, h6 { color: $primary-text-color }
|
||||
|
||||
p {
|
||||
color: $primary-text-color;
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
h2, h4, hr { border-bottom-color: $base-separation-color }
|
||||
.muted-hint { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form {
|
||||
.input {
|
||||
&.boolean,
|
||||
&.with_label,
|
||||
&.with_floating_label {
|
||||
.label_input > label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.with_block_label {
|
||||
& > label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&.radio_buttons{
|
||||
.radio label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&-copy { background: $base-color }
|
||||
}
|
||||
|
||||
.check_boxes {
|
||||
.checkbox {
|
||||
label { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=number],
|
||||
input[type=email],
|
||||
input[type=password],
|
||||
textarea {
|
||||
color: $primary-text-color;
|
||||
background: $setting-content-base-color;
|
||||
border-color: $base-separation-color;
|
||||
|
||||
&:hover {
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background: darken($setting-content-base-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
color: $primary-text-color;
|
||||
background-color: $setting-content-base-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
|
||||
.input.field_with_errors {
|
||||
label,
|
||||
.error {
|
||||
color: $error-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hint, p.hint { color: $primary-lighter1-text-color !important }
|
||||
|
||||
.label_input {
|
||||
&__append { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form,
|
||||
.table-form {
|
||||
.warning { background: change-color($color: $error-color, $alpha: 0.8) }
|
||||
}
|
||||
|
||||
.quick-nav {
|
||||
a {
|
||||
color: $secondary-text-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: lighten($secondary-text-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.page,
|
||||
a {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.page {
|
||||
&.current {
|
||||
background: $icon-active-color;
|
||||
color: $light-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filters {
|
||||
.filter-subset {
|
||||
strong { color: $primary-text-color }
|
||||
|
||||
a {
|
||||
color: $primary-lighter2-text-color;
|
||||
|
||||
&:hover { color: $primary-text-color }
|
||||
|
||||
&.selected {
|
||||
color: $active-text-color;
|
||||
border-bottom-color: $active-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
&[for=user_setting_default_privacy_public],
|
||||
&[for=user_setting_default_privacy_unlisted] {
|
||||
color: $active-text-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.column-header__collapsible__extra {
|
||||
.column-settings__section { color: $primary-text-color }
|
||||
|
||||
.setting-toggle {
|
||||
.react-toggle {
|
||||
&.react-toggle--checked {
|
||||
> .react-toggle-track { background: $setting-toggle-checked-color }
|
||||
|
||||
> .react-toggle-thumb {
|
||||
border-color: $setting-toggle-checked-color;
|
||||
background-color: $setting-toggle-thumb-checked-color;
|
||||
}
|
||||
}
|
||||
|
||||
> .react-toggle-track { background: $setting-toggle-color }
|
||||
|
||||
> .react-toggle-thumb {
|
||||
border-color: $setting-toggle-color;
|
||||
background-color: $setting-toggle-thumb-color;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-toggle__label { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.setting-meta__label { color: $primary-lighter1-text-color }
|
||||
}
|
||||
@ -1,107 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
||||
|
||||
.status {
|
||||
@include status-shadow;
|
||||
border-bottom: 0;
|
||||
|
||||
transition: box-shadow 0.1s 0s ease-out;
|
||||
|
||||
&.light {
|
||||
.status {
|
||||
&__relative-time { color: $primary-lighter1-text-color }
|
||||
&__display-name {
|
||||
color: $primary-text-color;
|
||||
|
||||
.display-name__account { color: $primary-lighter1-text-color }
|
||||
}
|
||||
|
||||
&__content { color: $primary-text-color }
|
||||
}
|
||||
}
|
||||
|
||||
&.status-direct {
|
||||
background: $status-direct-color;
|
||||
|
||||
&:not(.read) {
|
||||
background: inherit;
|
||||
border-bottom-color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
&.muted {
|
||||
.status__content {
|
||||
p { color: lighten($primary-text-color, 20%) }
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
&__info {
|
||||
.status__display-name {
|
||||
color: $primary-lighter1-text-color;
|
||||
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
.status__relative-time { color: $primary-lighter1-text-color }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status {
|
||||
.detailed-status {
|
||||
&__display-name {
|
||||
color: $secondary-text-color;
|
||||
|
||||
strong { color: $primary-text-color }
|
||||
}
|
||||
|
||||
&__meta {
|
||||
.detailed-status__datetime { color: $primary-lighter1-text-color }
|
||||
|
||||
.detailed-status__link {
|
||||
.fa.fa-star { vertical-align: middle }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
@include status-shadow;
|
||||
|
||||
.detailed-status { @extend .detailed-status; }
|
||||
.detailed-status__action-bar {
|
||||
background: $status-actionbar-color;
|
||||
border-color: $base-separation-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status,
|
||||
.detailed-status {
|
||||
background: $status-color;
|
||||
|
||||
.status__content {
|
||||
color: $primary-text-color;
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
|
||||
.status__content__spoiler-link {
|
||||
color: $primary-text-color;
|
||||
background: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.status-card,
|
||||
a.status-card.compact {
|
||||
&:hover { background: initial }
|
||||
}
|
||||
|
||||
.name-tag,
|
||||
a.name-tag {
|
||||
color: $secondary-text-color;
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import 'variables';
|
||||
|
||||
|
||||
|
||||
.table {
|
||||
thead th { border-bottom-color: $base-separation-color }
|
||||
|
||||
th,
|
||||
td {
|
||||
color: $primary-text-color;
|
||||
background-color: $base-color;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
& > tbody > tr:nth-child(odd) {
|
||||
& > td, & > th { background: darken($base-color, 4%) }
|
||||
}
|
||||
|
||||
a { color: $secondary-text-color }
|
||||
}
|
||||
|
||||
a.table-action-link,
|
||||
button.table-action-link {
|
||||
color: $secondary-text-color;
|
||||
|
||||
&:hover { color: darken($secondary-text-color, 8%) }
|
||||
}
|
||||
@ -1190,9 +1190,6 @@ en:
|
||||
contrast: Mastodon (High contrast)
|
||||
default: Mastodon (Dark)
|
||||
mastodon-light: Mastodon (Light)
|
||||
google-plus: Google+
|
||||
google-plus-dev: Google+ Dev
|
||||
dark-google-plus-dev: Dark Google+ Dev
|
||||
|
||||
time:
|
||||
formats:
|
||||
|
||||
@ -1169,9 +1169,6 @@ ja:
|
||||
contrast: Mastodon (ハイコントラスト)
|
||||
default: Mastodon (ダーク)
|
||||
mastodon-light: Mastodon (ライト)
|
||||
google-plus: Google+
|
||||
google-plus-dev: Google+ Dev
|
||||
dark-google-plus-dev: Dark Google+ Dev
|
||||
time:
|
||||
formats:
|
||||
default: "%Y年%m月%d日 %H:%M"
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
default: styles/application.scss
|
||||
contrast: styles/contrast.scss
|
||||
mastodon-light: styles/mastodon-light.scss
|
||||
google-plus: styles/gplus-theme-for-mastodon.scss
|
||||
google-plus-dev: styles/gplus-theme-for-mastodon-dev.scss
|
||||
dark-google-plus-dev: styles/dark-gplus-theme-for-mastodon-dev.scss
|
||||
|
||||
Loading…
Reference in New Issue
Block a user