GitHub
commit
56dac23614
24
app/javascript/styles/dark-gplus-theme-for-mastodon-dev.scss
Normal file
24
app/javascript/styles/dark-gplus-theme-for-mastodon-dev.scss
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
/**
|
||||||
|
* 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';
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
@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);
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
@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 }
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
@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: #212121;
|
||||||
|
$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;
|
||||||
|
|
||||||
|
$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;
|
||||||
@ -0,0 +1,138 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,191 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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 }
|
||||||
|
}
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
@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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,263 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import 'variables';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.tabs-bar {
|
||||||
|
@include column-shadow;
|
||||||
|
margin: 0;
|
||||||
|
background: $column-header-color;
|
||||||
|
|
||||||
|
.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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__publish { border-top: 1px solid $base-separation-color }
|
||||||
|
&__publish-button-wrapper { @include button-shadow }
|
||||||
|
&__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: unset }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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 {
|
||||||
|
&__icon {
|
||||||
|
@include material-icon-large;
|
||||||
|
vertical-align: bottom;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
&-subheading,
|
||||||
|
&-link__badge { background: $base-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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-root {
|
||||||
|
&__modal {
|
||||||
|
.media-modal {
|
||||||
|
&__close.icon-button {
|
||||||
|
font-size: 40px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import 'variables';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
background-color: $column-header-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu,
|
||||||
|
.actions-modal {
|
||||||
|
@include material-card-radius;
|
||||||
|
|
||||||
|
& > ul {
|
||||||
|
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: 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import 'variables';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
color: $primary-lighter1-text-color;
|
||||||
|
&__title, &__description { color: $primary-lighter2-text-color }
|
||||||
|
|
||||||
|
&__image { background: transparent }
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import 'components-button';
|
||||||
|
@import 'components-card';
|
||||||
|
@import 'components-dropdown';
|
||||||
|
@import 'components-status-card';
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
@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
@ -0,0 +1,21 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,232 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
@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%) }
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
@ -0,0 +1,244 @@
|
|||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 }
|
||||||
|
}
|
||||||
@ -0,0 +1,121 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.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;
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
@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%) }
|
||||||
|
}
|
||||||
24
app/javascript/styles/gplus-theme-for-mastodon-dev.scss
Normal file
24
app/javascript/styles/gplus-theme-for-mastodon-dev.scss
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
/**
|
||||||
|
* 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';
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
@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);
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
@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 }
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
@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;
|
||||||
|
|
||||||
|
$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;
|
||||||
138
app/javascript/styles/gplus-theme-for-mastodon-dev/about.scss
Normal file
138
app/javascript/styles/gplus-theme-for-mastodon-dev/about.scss
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
191
app/javascript/styles/gplus-theme-for-mastodon-dev/accounts.scss
Normal file
191
app/javascript/styles/gplus-theme-for-mastodon-dev/accounts.scss
Normal file
@ -0,0 +1,191 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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 }
|
||||||
|
}
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
@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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
263
app/javascript/styles/gplus-theme-for-mastodon-dev/columns.scss
Normal file
263
app/javascript/styles/gplus-theme-for-mastodon-dev/columns.scss
Normal file
@ -0,0 +1,263 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import 'variables';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.tabs-bar {
|
||||||
|
@include column-shadow;
|
||||||
|
margin: 0;
|
||||||
|
background: $column-header-color;
|
||||||
|
|
||||||
|
.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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__publish { border-top: 1px solid $base-separation-color }
|
||||||
|
&__publish-button-wrapper { @include button-shadow }
|
||||||
|
&__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: unset }
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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 {
|
||||||
|
&__icon {
|
||||||
|
@include material-icon-large;
|
||||||
|
vertical-align: bottom;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
&-subheading,
|
||||||
|
&-link__badge { background: darken($base-color, 10%) }
|
||||||
|
|
||||||
|
&-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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-root {
|
||||||
|
&__modal {
|
||||||
|
.media-modal {
|
||||||
|
&__close.icon-button {
|
||||||
|
font-size: 40px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import 'variables';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
background-color: $column-header-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu,
|
||||||
|
.actions-modal {
|
||||||
|
@include material-card-radius;
|
||||||
|
|
||||||
|
& > ul {
|
||||||
|
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: 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import 'variables';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.status-card {
|
||||||
|
color: $primary-lighter1-text-color;
|
||||||
|
&__title, &__description { color: $primary-lighter2-text-color }
|
||||||
|
|
||||||
|
&__image { background: transparent }
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import 'components-button';
|
||||||
|
@import 'components-card';
|
||||||
|
@import 'components-dropdown';
|
||||||
|
@import 'components-status-card';
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
179
app/javascript/styles/gplus-theme-for-mastodon-dev/icons.scss
Normal file
179
app/javascript/styles/gplus-theme-for-mastodon-dev/icons.scss
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,21 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
232
app/javascript/styles/gplus-theme-for-mastodon-dev/profile.scss
Normal file
232
app/javascript/styles/gplus-theme-for-mastodon-dev/profile.scss
Normal file
@ -0,0 +1,232 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
@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%) }
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
244
app/javascript/styles/gplus-theme-for-mastodon-dev/settings.scss
Normal file
244
app/javascript/styles/gplus-theme-for-mastodon-dev/settings.scss
Normal file
@ -0,0 +1,244 @@
|
|||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 }
|
||||||
|
}
|
||||||
121
app/javascript/styles/gplus-theme-for-mastodon-dev/statuses.scss
Normal file
121
app/javascript/styles/gplus-theme-for-mastodon-dev/statuses.scss
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.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;
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
@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%) }
|
||||||
|
}
|
||||||
22
app/javascript/styles/gplus-theme-for-mastodon.scss
Normal file
22
app/javascript/styles/gplus-theme-for-mastodon.scss
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
/**
|
||||||
|
* 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';
|
||||||
11
app/javascript/styles/gplus-theme-for-mastodon/_mixins.scss
Normal file
11
app/javascript/styles/gplus-theme-for-mastodon/_mixins.scss
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
@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 }
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
@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);
|
||||||
138
app/javascript/styles/gplus-theme-for-mastodon/about.scss
Normal file
138
app/javascript/styles/gplus-theme-for-mastodon/about.scss
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
109
app/javascript/styles/gplus-theme-for-mastodon/accounts.scss
Normal file
109
app/javascript/styles/gplus-theme-for-mastodon/accounts.scss
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
47
app/javascript/styles/gplus-theme-for-mastodon/basics.scss
Normal file
47
app/javascript/styles/gplus-theme-for-mastodon/basics.scss
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
@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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
197
app/javascript/styles/gplus-theme-for-mastodon/columns.scss
Normal file
197
app/javascript/styles/gplus-theme-for-mastodon/columns.scss
Normal file
@ -0,0 +1,197 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import 'variables';
|
||||||
|
@import 'mixins';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.floating-action-button {
|
||||||
|
font-size: 24px;
|
||||||
|
background: $active-color;
|
||||||
|
}
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import 'components-button';
|
||||||
|
@import 'components-card';
|
||||||
|
@import 'components-dropdown';
|
||||||
38
app/javascript/styles/gplus-theme-for-mastodon/explore.scss
Normal file
38
app/javascript/styles/gplus-theme-for-mastodon/explore.scss
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
97
app/javascript/styles/gplus-theme-for-mastodon/icons.scss
Normal file
97
app/javascript/styles/gplus-theme-for-mastodon/icons.scss
Normal file
File diff suppressed because one or more lines are too long
34
app/javascript/styles/gplus-theme-for-mastodon/lists.scss
Normal file
34
app/javascript/styles/gplus-theme-for-mastodon/lists.scss
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
231
app/javascript/styles/gplus-theme-for-mastodon/profile.scss
Normal file
231
app/javascript/styles/gplus-theme-for-mastodon/profile.scss
Normal file
@ -0,0 +1,231 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
41
app/javascript/styles/gplus-theme-for-mastodon/searches.scss
Normal file
41
app/javascript/styles/gplus-theme-for-mastodon/searches.scss
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
@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%) }
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
208
app/javascript/styles/gplus-theme-for-mastodon/settings.scss
Normal file
208
app/javascript/styles/gplus-theme-for-mastodon/settings.scss
Normal file
@ -0,0 +1,208 @@
|
|||||||
|
@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 }
|
||||||
|
}
|
||||||
107
app/javascript/styles/gplus-theme-for-mastodon/statuses.scss
Normal file
107
app/javascript/styles/gplus-theme-for-mastodon/statuses.scss
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
@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;
|
||||||
|
}
|
||||||
29
app/javascript/styles/gplus-theme-for-mastodon/tables.scss
Normal file
29
app/javascript/styles/gplus-theme-for-mastodon/tables.scss
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
@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%) }
|
||||||
|
}
|
||||||
@ -5,12 +5,14 @@
|
|||||||
base_host = Rails.configuration.x.web_domain
|
base_host = Rails.configuration.x.web_domain
|
||||||
assets_host = Rails.configuration.action_controller.asset_host
|
assets_host = Rails.configuration.action_controller.asset_host
|
||||||
assets_host ||= "http#{Rails.configuration.x.use_https ? 's' : ''}://#{base_host}"
|
assets_host ||= "http#{Rails.configuration.x.use_https ? 's' : ''}://#{base_host}"
|
||||||
|
google_font_host = "https://fonts.gstatic.com"
|
||||||
|
gplus_theme_host = "https://raw.githubusercontent.com"
|
||||||
|
|
||||||
Rails.application.config.content_security_policy do |p|
|
Rails.application.config.content_security_policy do |p|
|
||||||
p.base_uri :none
|
p.base_uri :none
|
||||||
p.default_src :none
|
p.default_src :none
|
||||||
p.frame_ancestors :none
|
p.frame_ancestors :none
|
||||||
p.font_src :self, assets_host
|
p.font_src :self, assets_host, google_font_host
|
||||||
p.img_src :self, :https, :data, :blob, assets_host
|
p.img_src :self, :https, :data, :blob, assets_host
|
||||||
p.style_src :self, :unsafe_inline, assets_host
|
p.style_src :self, :unsafe_inline, assets_host
|
||||||
p.media_src :self, :https, :data, assets_host
|
p.media_src :self, :https, :data, assets_host
|
||||||
|
|||||||
@ -1056,6 +1056,10 @@ en:
|
|||||||
contrast: Mastodon (High contrast)
|
contrast: Mastodon (High contrast)
|
||||||
default: Mastodon (Dark)
|
default: Mastodon (Dark)
|
||||||
mastodon-light: Mastodon (Light)
|
mastodon-light: Mastodon (Light)
|
||||||
|
google-plus: Google+
|
||||||
|
google-plus-dev: Google+ Dev
|
||||||
|
dark-google-plus-dev: Dark Google+ Dev
|
||||||
|
|
||||||
time:
|
time:
|
||||||
formats:
|
formats:
|
||||||
default: "%b %d, %Y, %H:%M"
|
default: "%b %d, %Y, %H:%M"
|
||||||
|
|||||||
@ -987,6 +987,9 @@ ja:
|
|||||||
contrast: Mastodon (ハイコントラスト)
|
contrast: Mastodon (ハイコントラスト)
|
||||||
default: Mastodon (ダーク)
|
default: Mastodon (ダーク)
|
||||||
mastodon-light: Mastodon (ライト)
|
mastodon-light: Mastodon (ライト)
|
||||||
|
google-plus: Google+
|
||||||
|
google-plus-dev: Google+ Dev
|
||||||
|
dark-google-plus-dev: Dark Google+ Dev
|
||||||
time:
|
time:
|
||||||
formats:
|
formats:
|
||||||
default: "%Y年%m月%d日 %H:%M"
|
default: "%Y年%m月%d日 %H:%M"
|
||||||
|
|||||||
@ -1,3 +1,6 @@
|
|||||||
default: styles/application.scss
|
default: styles/application.scss
|
||||||
contrast: styles/contrast.scss
|
contrast: styles/contrast.scss
|
||||||
mastodon-light: styles/mastodon-light.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