mirror of
https://github.com/yingziwu/mastodon.git
synced 2026-02-23 18:52:41 +00:00
copy theme from pullopen.xyz
This commit is contained in:
parent
8266a7fa36
commit
28405b6517
51 changed files with 8511 additions and 0 deletions
67
app/javascript/styles/strawberry/_variables.scss
Normal file
67
app/javascript/styles/strawberry/_variables.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
$bpg: rgb(250,153,134); //页面背景
|
||||
$btt: rgb(235,230,232); //TL背景
|
||||
$btt2: rgb(247,252,247); //TL背景-选中
|
||||
$btt3: rgb(236,222,210); //TL背景-私信
|
||||
$btxt: rgb(170,48,41); //发送栏背景
|
||||
$bhd: rgb(249,235,221); //TL标题背景
|
||||
$blb: rgb(239,199,179); //媒体标签背景
|
||||
$ctxt: rgb(123,29,29); //正文颜色*/
|
||||
$curl: rgb(255,125,117); //链接颜色
|
||||
$cui: rgb(225,130,125); //UI颜色
|
||||
$cui2: rgb(192,110,107); //UI颜色2
|
||||
$cbut: rgb(255,80,80); //发送按钮颜色
|
||||
|
||||
// Commonly used web colors
|
||||
$black: #000000; // Black
|
||||
$white: #ffffff; // White
|
||||
$success-green: #79bd9a !default; // Padua
|
||||
$error-red: #df405a !default; // Cerise
|
||||
$warning-red: #ff5050 !default; // Sunset Orange
|
||||
$gold-star: #ca8f04 !default; // Dark Goldenrod
|
||||
|
||||
// Values from the classic Mastodon UI
|
||||
$classic-base-color: $ctxt; // Midnight Express
|
||||
$classic-primary-color: $cui2; // Echo Blue
|
||||
$classic-secondary-color: $btt; // Pattens Blue
|
||||
$classic-highlight-color: $cbut; // Summer Sky
|
||||
|
||||
// Variables for defaults in UI
|
||||
$base-shadow-color: $black !default;
|
||||
$base-overlay-background: $black !default;
|
||||
$base-border-color: $white !default;
|
||||
$simple-background-color: $white !default;
|
||||
$valid-value-color: $success-green !default;
|
||||
$error-value-color: $error-red !default;
|
||||
|
||||
// Tell UI to use selected colors
|
||||
$ui-base-color: $classic-base-color !default; // Darkest
|
||||
$ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
|
||||
$ui-primary-color: $classic-primary-color !default; // Lighter
|
||||
$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
||||
$ui-highlight-color: $classic-highlight-color !default;
|
||||
|
||||
// Variables for texts
|
||||
$primary-text-color: $white !default;
|
||||
$darker-text-color: $ui-primary-color !default;
|
||||
$dark-text-color: $ui-base-lighter-color !default;
|
||||
$secondary-text-color: $ui-secondary-color !default;
|
||||
$highlight-text-color: $ui-highlight-color !default;
|
||||
$action-button-color: $ui-base-lighter-color !default;
|
||||
// For texts on inverted backgrounds
|
||||
$inverted-text-color: $ui-base-color !default;
|
||||
$lighter-text-color: $ui-base-lighter-color !default;
|
||||
$light-text-color: $ui-primary-color !default;
|
||||
|
||||
// Language codes that uses CJK fonts
|
||||
$cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
|
||||
|
||||
// Variables for components
|
||||
$media-modal-media-max-width: 100%;
|
||||
// put margins on top and bottom of image to avoid the screen covered by image.
|
||||
$media-modal-media-max-height: 80%;
|
||||
|
||||
$no-gap-breakpoint: 415px;
|
||||
|
||||
$font-sans-serif: 'mastodon-font-sans-serif' !default;
|
||||
$font-display: 'mastodon-font-display' !default;
|
||||
$font-monospace: 'mastodon-font-monospace' !default;
|
||||
84
app/javascript/styles/strawberry/about.scss
Normal file
84
app/javascript/styles/strawberry/about.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
.public-layout .header {
|
||||
background: $bhd
|
||||
}
|
||||
.public-layout .header .brand:hover {
|
||||
background: transparent;
|
||||
}
|
||||
.public-layout .header .nav-button {
|
||||
background: $cbut;
|
||||
color: white
|
||||
}
|
||||
.public-layout .header .nav-button:hover,
|
||||
.public-layout .header .nav-button:focus,
|
||||
.public-layout .header .nav-button:active {
|
||||
background: $curl
|
||||
}
|
||||
|
||||
.hero-widget__text {
|
||||
background: $btxt;
|
||||
color: $btt2
|
||||
}
|
||||
.hero-widget__text em,
|
||||
.hero-widget__text a {
|
||||
color: $curl;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
.box-widget {
|
||||
background: $btt;
|
||||
}
|
||||
.rich-formatting {
|
||||
color: $ctxt;
|
||||
padding-right: 0;
|
||||
max-width: 95%;
|
||||
margin: 1em auto;
|
||||
text-align: justify;
|
||||
}
|
||||
.rich-formatting em {
|
||||
font-size: 24px;
|
||||
color: $curl;
|
||||
margin-left: 1em;
|
||||
}
|
||||
.rich-formatting a,
|
||||
.contact-widget__mail a:hover {
|
||||
color: $curl;
|
||||
}
|
||||
.rich-formatting p,
|
||||
.rich-formatting li {
|
||||
color: $cui2;
|
||||
}
|
||||
|
||||
.contact-widget,
|
||||
.landing-page__information.contact-widget {
|
||||
background: $btt3;
|
||||
}
|
||||
.contact-widget__mail a {
|
||||
color: $cbut;
|
||||
}
|
||||
.contact-widget p:last-child {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.public-layout .footer .brand svg {
|
||||
display: inline-block;
|
||||
}
|
||||
.public-layout .footer .brand:active svg path,
|
||||
.public-layout .footer .brand:focus svg path,
|
||||
.public-layout .footer .brand:hover svg path {
|
||||
fill: $cbut;
|
||||
}
|
||||
.public-layout .footer .brand svg path {
|
||||
fill: $btt;
|
||||
}
|
||||
.public-layout .footer ul a,
|
||||
.public-layout .footer {
|
||||
color: $btt;
|
||||
}
|
||||
.public-layout .footer h4,
|
||||
.public-layout .footer .grid .column-2 h4 a {
|
||||
color: $cbut;
|
||||
text-shadow: 0 0 0.4em $btt2;
|
||||
}
|
||||
.landing-page__information .account {
|
||||
box-shadow: none;
|
||||
}
|
||||
159
app/javascript/styles/strawberry/account.scss
Normal file
159
app/javascript/styles/strawberry/account.scss
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
.account__moved-note {
|
||||
background: $blb;
|
||||
border-color: $cui;
|
||||
}
|
||||
.account__moved-note__message,
|
||||
.public-layout .public-account-bio .account__header__fields a,
|
||||
.account__header__fields a {
|
||||
color: $curl;
|
||||
}
|
||||
|
||||
.account__header > div {
|
||||
background: rgba(247,252,247,.4);
|
||||
}
|
||||
.account__header>div {
|
||||
background: rgba(235,230,232,.6) !important;
|
||||
}
|
||||
.account__header .account__header__display-name {
|
||||
color: $btt2;
|
||||
text-shadow: 0 0 0.4em #000
|
||||
}
|
||||
.account__header .account__header__username {
|
||||
color: $cbut;
|
||||
text-shadow: 1px 1px 0.5px #fff
|
||||
}
|
||||
.account__header .account__header__content {
|
||||
color: $ctxt;
|
||||
text-shadow: 1px 1px 0.5px #fff;
|
||||
}
|
||||
.account__action-bar{
|
||||
border-top: 1px solid $cui;
|
||||
border-bottom: 1px solid $cui;
|
||||
}
|
||||
.account__action-bar__tab,
|
||||
.account__header .account__header__fields dl,
|
||||
.account__section-headline,
|
||||
.account__header__fields dl,
|
||||
.account__header__fields {
|
||||
border-color: $cui;
|
||||
}
|
||||
|
||||
.account__header .account__header__fields dt,
|
||||
.account__section-headline a,
|
||||
.account__section-headline,
|
||||
.account__header__fields dt {
|
||||
background: $blb;
|
||||
color: white;
|
||||
text-shadow: 0 0 5px $ctxt;
|
||||
}
|
||||
.account__header .account__header__fields dd,
|
||||
.account__header__fields dd {
|
||||
background: $btt2;
|
||||
color: $ctxt;
|
||||
}
|
||||
.account__section-headline a.active {
|
||||
background: $btt3;
|
||||
color: $curl;
|
||||
text-shadow: 0 0 5px white;
|
||||
}
|
||||
.account__header .account__header__fields dt,
|
||||
.account__header__fields dt {
|
||||
border-right: 1px solid $cui;
|
||||
}
|
||||
.public-layout .public-account-bio__extra, .public-layout .public-account-bio .roles,
|
||||
.account__action-bar__tab > span,
|
||||
.public-layout .public-account-header__tabs__tabs .counter .counter-label {
|
||||
color: $cui;
|
||||
}
|
||||
.public-layout .public-account-header__tabs__tabs .counter,
|
||||
.public-layout .public-account-header__tabs__tabs .counter::after {
|
||||
border-color: $cui;
|
||||
}
|
||||
.account__action-bar__tab strong,
|
||||
.public-layout .public-account-header__tabs__tabs .counter .counter-number {
|
||||
color: $cbut;
|
||||
}
|
||||
.account__action-bar__tab.active,
|
||||
.public-layout .public-account-header__tabs__tabs .counter.active::after {
|
||||
border-color: $curl;
|
||||
}
|
||||
|
||||
.account__section-headline a.active:after,
|
||||
.account__section-headline a.active:before,
|
||||
.community-timeline__section-headline a.active:after,
|
||||
.community-timeline__section-headline a.active:before,
|
||||
.public-timeline__section-headline a.active:after,
|
||||
.public-timeline__section-headline a.active:before {
|
||||
border-color: transparent transparent $cui;
|
||||
}
|
||||
.account__section-headline a.active:after,
|
||||
.community-timeline__section-headline a.active:after,
|
||||
.public-timeline__section-headline a.active:after {
|
||||
border-color: transparent transparent $btt;
|
||||
}
|
||||
|
||||
.account-gallery__item a,
|
||||
.public-layout .public-account-header__image {
|
||||
background: $btxt;
|
||||
color: $btt;
|
||||
}
|
||||
|
||||
.account__disclaimer {
|
||||
color: $cui2;
|
||||
border-color: $cui;
|
||||
}
|
||||
|
||||
|
||||
.activity-stream .entry {
|
||||
background: $btt;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.public-layout .public-account-header__image,
|
||||
.public-layout .public-account-header__bar {
|
||||
background: $btt3;
|
||||
}
|
||||
.public-layout .public-account-header__image {
|
||||
background: $btxt;
|
||||
}
|
||||
.public-layout .public-account-header__extra__links a,
|
||||
.public-layout .public-account-header__tabs__name h1 small {
|
||||
color: $cui;
|
||||
}
|
||||
.public-layout .public-account-header__extra__links a strong {
|
||||
color: $curl;
|
||||
}
|
||||
.public-layout .public-account-header__extra .public-account-bio .account__header__fields {
|
||||
border-color: $cui;
|
||||
}
|
||||
}
|
||||
.public-layout .public-account-header__bar::before {
|
||||
background: $btt;
|
||||
}
|
||||
.public-layout .public-account-header__tabs__name h1 {
|
||||
color: $ctxt;
|
||||
text-shadow: 0 0 0.4em $btt2;
|
||||
}
|
||||
.public-layout .public-account-header__tabs__name h1 small {
|
||||
color: $cui;
|
||||
text-shadow: 1px 1px 1px $ctxt;
|
||||
}
|
||||
.button.logo-button {
|
||||
background: $cbut;
|
||||
}
|
||||
.button.logo-button.button--destructive:active,
|
||||
.button.logo-button.button--destructive:focus,
|
||||
.button.logo-button.button--destructive:hover {
|
||||
background: $curl;
|
||||
}
|
||||
|
||||
.public-layout .public-account-bio {
|
||||
background: $btt3;
|
||||
}
|
||||
.public-layout .public-account-bio .account__header__content {
|
||||
color: $ctxt;
|
||||
}
|
||||
.public-layout .public-account-header__bar .avatar img {
|
||||
border-color: $cbut;
|
||||
background: transparent;
|
||||
}
|
||||
10
app/javascript/styles/strawberry/boost.scss
Normal file
10
app/javascript/styles/strawberry/boost.scss
Normal file
File diff suppressed because one or more lines are too long
138
app/javascript/styles/strawberry/card.scss
Normal file
138
app/javascript/styles/strawberry/card.scss
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
.status-card {
|
||||
border-color: $cui !important;
|
||||
color: $cui;
|
||||
background: $btt;
|
||||
}
|
||||
.status-card > div,
|
||||
.status-card__image,
|
||||
.status-card__actions > div {
|
||||
background: transparent;
|
||||
}
|
||||
.status-card button,
|
||||
.status-card a {
|
||||
color: $cbut;
|
||||
}
|
||||
|
||||
a.status-card:hover,
|
||||
a.status-card.compact:hover {
|
||||
background: $btt2;
|
||||
}
|
||||
.status-card__title,
|
||||
.text-btn:hover {
|
||||
color: $curl;
|
||||
}
|
||||
.status-card__description {
|
||||
color: $cui2;
|
||||
}
|
||||
.column-header__button.active,
|
||||
.column-header__button.active:hover {
|
||||
background: transparent;
|
||||
text-shadow: 0 0 10px $btt;
|
||||
position: relative;
|
||||
}
|
||||
.column-header__collapsible-inner {
|
||||
background: transparent;
|
||||
}
|
||||
.column-header__collapsible {
|
||||
background: $btt2;
|
||||
border-bottom: 1px dotted $cui;
|
||||
}
|
||||
.column-header__collapsible,
|
||||
.column-settings__section {
|
||||
color: $cui;
|
||||
}
|
||||
.setting-toggle__label {
|
||||
color: $cui2;
|
||||
}
|
||||
|
||||
.react-toggle-track {
|
||||
background-color: $blb;
|
||||
}
|
||||
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background-color: $cui;
|
||||
}
|
||||
.react-toggle-thumb {
|
||||
border-color: $blb;
|
||||
}
|
||||
.react-toggle--checked .react-toggle-track,
|
||||
.media-modal__button--active {
|
||||
background-color: $cbut;
|
||||
}
|
||||
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background-color: $curl;
|
||||
}
|
||||
.react-toggle--checked .react-toggle-thumb {
|
||||
border-color: $cbut;
|
||||
}
|
||||
.column-header__collapsible hr {
|
||||
border-color: $cui;
|
||||
}
|
||||
|
||||
.dropdown-menu,
|
||||
.dropdown-menu__item a {
|
||||
background: $btxt;
|
||||
color: $btt;
|
||||
}
|
||||
.dropdown-menu__item a:hover {
|
||||
background: $cui2;
|
||||
color: $btt2;
|
||||
}
|
||||
.dropdown-menu__arrow.bottom {
|
||||
border-bottom-color: $btxt;
|
||||
}
|
||||
.dropdown-menu__separator {
|
||||
border-color: $cui;
|
||||
}
|
||||
|
||||
.card>a {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.card__img,
|
||||
.card__img img {
|
||||
border-radius: 10px 10px 0 0;
|
||||
background: $btt;
|
||||
}
|
||||
|
||||
.card__bar {
|
||||
border-radius: 0 0 10px 10px;
|
||||
background: $blb;
|
||||
box-shadow: 0 8px 15px -8px $cui inset
|
||||
}
|
||||
.card > a .card__bar {
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
.card > a:active .card__bar,
|
||||
.card > a:focus .card__bar,
|
||||
.card > a:hover .card__bar {
|
||||
background: $btt2 !important;
|
||||
}
|
||||
.card__bar .display-name strong {
|
||||
color: $ctxt;
|
||||
text-shadow: 0 0 0.2em $btt2;
|
||||
}
|
||||
.card__bar .display-name span {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 5px $ctxt;
|
||||
}
|
||||
|
||||
.card > a .display-name span {
|
||||
transition: all 0.15s linear;
|
||||
}
|
||||
.card > a:active .display-name span,
|
||||
.card > a:focus .display-name span,
|
||||
.card > a:hover .display-name span{
|
||||
color: $cui;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.list-editor h4 {
|
||||
background: $bhd;
|
||||
color: $curl;
|
||||
}
|
||||
.list-editor .search__input {
|
||||
border-radius: 0;
|
||||
border-bottom: 1px dotted $cui;
|
||||
}
|
||||
.list-editor .drawer__inner {
|
||||
background: $btt3;
|
||||
}
|
||||
132
app/javascript/styles/strawberry/column.scss
Normal file
132
app/javascript/styles/strawberry/column.scss
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
* {
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.column-header > button,
|
||||
.column-header__button,
|
||||
.column-header > .column-header__back-button,
|
||||
.column-header__buttons {
|
||||
color: $cbut;
|
||||
background: transparent;
|
||||
box-shadow: none !important
|
||||
}
|
||||
.column-header__button:hover {
|
||||
color: $curl;
|
||||
background: transparent;
|
||||
}
|
||||
.column-back-button,
|
||||
.column-header__back-button,
|
||||
.column-header,
|
||||
.column-header.active {
|
||||
background: $bhd;
|
||||
color: $cbut;
|
||||
box-shadow: 0 8px 20px -8px $cui;
|
||||
}
|
||||
|
||||
.column-header.active .column-header__icon {
|
||||
color: white;
|
||||
text-shadow: 0 0 10px $btt;
|
||||
}
|
||||
.column-header__wrapper.active::before {
|
||||
background: radial-gradient(ellipse, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%);
|
||||
height: 50px;
|
||||
top: 20px;
|
||||
}
|
||||
.column .scrollable {
|
||||
background: $btt;
|
||||
}
|
||||
.detailed-status,
|
||||
.status.status-direct,
|
||||
.detailed-status__action-bar,
|
||||
.status.status-direct:not(.read) {
|
||||
background: $btt3;
|
||||
border-color: $cui;
|
||||
}
|
||||
.focusable:focus,
|
||||
.load-more:hover,
|
||||
.focusable:focus .status.status-direct,
|
||||
.focusable:focus .status.status-direct .muted,
|
||||
.focusable:focus .detailed-status,
|
||||
.focusable:focus .detailed-status__action-bar {
|
||||
background: $btt2;
|
||||
}
|
||||
.status.status-direct:not(.read),
|
||||
.status,
|
||||
.load-gap,
|
||||
.status__wrapper--filtered {
|
||||
border-color: $cui;
|
||||
box-shadow: 0 5px 20px -8px $cui;
|
||||
}
|
||||
.icon-button,
|
||||
.muted .emojione,
|
||||
.muted .status__avatar,
|
||||
.notification .status__wrapper-public,
|
||||
.notification__message .fa,
|
||||
.notification__favourite-icon-wrapper .star-icon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.notification__message .fa,
|
||||
.notification__favourite-icon-wrapper .star-icon {
|
||||
color: $curl;
|
||||
}
|
||||
.icon-button:hover,
|
||||
.icon-button:active,
|
||||
.icon-button.active,
|
||||
.icon-button:focus {
|
||||
color: $cbut !important;
|
||||
}
|
||||
.icon-button.disabled,
|
||||
.notification-favourite .status.status-direct .icon-button.disabled {
|
||||
color: $cui2
|
||||
}
|
||||
.notification-favourite .status.status-direct {
|
||||
background: transparent;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.account__display-name strong,
|
||||
.status__display-name strong,
|
||||
.detailed-status__display-name strong,
|
||||
.notification__display-name {
|
||||
color: $btxt !important;
|
||||
text-shadow: 0 0 0.2em $btt2;
|
||||
}
|
||||
.status__content,
|
||||
.reply-indicator__content,
|
||||
.status__content p:last-child,
|
||||
.reply-indicator__content p:last-child,
|
||||
.muted .status__content p,
|
||||
.muted .status__content a {
|
||||
color: $ctxt;
|
||||
}
|
||||
.status__content a,
|
||||
.reply-indicator__content a,
|
||||
.attachment-list__list a,
|
||||
.attachment-list.compact .fa,
|
||||
.muted .status__content a,
|
||||
.notification__message,
|
||||
.status__prepend {
|
||||
color: $curl;
|
||||
}
|
||||
.status__display-name,
|
||||
.status__relative-time,
|
||||
.icon-button,
|
||||
.status__action-bar__counter__label,
|
||||
.load-more,
|
||||
.detailed-status__meta,
|
||||
.detailed-status__display-name,
|
||||
.status__wrapper--filtered {
|
||||
color: $cui;
|
||||
}
|
||||
|
||||
a .account__avatar {
|
||||
border-radius: 20px 20px 5px 20px;
|
||||
border: 3px outset $cbut;
|
||||
box-shadow: 0 0 0 1px $blb, 0 15px 25px -10px $cui;
|
||||
}
|
||||
|
||||
.empty-column-indicator,
|
||||
.error-column,
|
||||
.regeneration-indicator {
|
||||
background: $btt;
|
||||
color: $cui;
|
||||
}
|
||||
62
app/javascript/styles/strawberry/covered.scss
Normal file
62
app/javascript/styles/strawberry/covered.scss
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
.status__content .status__content__spoiler-link,
|
||||
.reply-indicator__content .status__content__spoiler-link,
|
||||
.status__content__read-more-button {
|
||||
background: $cui;
|
||||
color: $btt2;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.status__content__read-more-button:hover,
|
||||
.status__content .status__content__spoiler-link:hover,
|
||||
.reply-indicator__content .status__content__spoiler-link:hover {
|
||||
background: $cbut;
|
||||
}
|
||||
.media-spoiler {
|
||||
background-color: $btxt;
|
||||
background-image: url(https://cmx.im/strawberry/elephant.png);
|
||||
background-position: 0% 100%;
|
||||
background-repeat:no-repeat;
|
||||
background-size:95% auto;
|
||||
opacity: 0.8;
|
||||
color: white;
|
||||
text-shadow:0 0 10px $btxt;
|
||||
}
|
||||
|
||||
.media-spoiler:hover {
|
||||
background-color: $cui;
|
||||
background-image: none;
|
||||
color: white;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.media-spoiler .media-spoiler__trigger,
|
||||
.media-spoiler .media-spoiler__warning {
|
||||
background: rgba(170,48,41,.3);
|
||||
}
|
||||
.media-spoiler .media-spoiler__trigger {
|
||||
padding-bottom: 5px
|
||||
}
|
||||
.media-spoiler .media-spoiler__warning {
|
||||
padding-top: 5px
|
||||
}
|
||||
|
||||
.status__content__read-more-button {
|
||||
margin-top: 0.5em;
|
||||
display: inline-block;
|
||||
padding: 0px;
|
||||
padding: 1px 6px;
|
||||
}
|
||||
.status__content__read-more-button:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.status__content.status__content--collapsed {
|
||||
max-height: 25em;
|
||||
background: linear-gradient(to top, transparent 0%, $ctxt 20%);
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
.status__content.status__content--collapsed p {
|
||||
color: transparent;
|
||||
}
|
||||
.icon-button.overlayed,
|
||||
.icon-button.overlayed:hover {
|
||||
background: rgba(170,48,41,.8);
|
||||
}
|
||||
54
app/javascript/styles/strawberry/drawer.scss
Normal file
54
app/javascript/styles/strawberry/drawer.scss
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
.drawer__header {
|
||||
background: $bhd;
|
||||
}
|
||||
.drawer__tab {
|
||||
color: $cui;
|
||||
text-shadow: 0 0 5px white
|
||||
}
|
||||
.drawer__header a:hover {
|
||||
background: $blb;
|
||||
}
|
||||
.drawer__inner__mastodon,
|
||||
.drawer__inner {
|
||||
background: $btxt;
|
||||
}
|
||||
|
||||
.navigation-bar,
|
||||
.text-icon-button:hover {
|
||||
color: $curl;
|
||||
}
|
||||
.navigation-bar strong {
|
||||
color: white
|
||||
}
|
||||
.compose-form .compose-form__buttons-wrapper {
|
||||
background: $blb;
|
||||
border-top: 1px dotted $cui;
|
||||
box-shadow: 0 5px 20px -8px $btt2 inset;
|
||||
}
|
||||
|
||||
.icon-button.inverted,
|
||||
.text-icon-button,
|
||||
.compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter {
|
||||
color: $btxt;
|
||||
text-shadow: 0 0 5px white;
|
||||
}
|
||||
|
||||
.drawer__inner__mastodon {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(170, 48, 41,1),
|
||||
rgba(170, 48, 41,0),
|
||||
rgba(170, 48, 41,0)
|
||||
),
|
||||
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="%23ecded2"/></svg>') no-repeat bottom/100% auto;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: $cbut;
|
||||
}
|
||||
.button:hover {
|
||||
background: $curl;
|
||||
}
|
||||
.icon-button.inverted.disabled {
|
||||
color: $cui2;
|
||||
}
|
||||
9
app/javascript/styles/strawberry/get-full-screen.scss
Normal file
9
app/javascript/styles/strawberry/get-full-screen.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@media screen and (min-width: 631px) {
|
||||
.columns-area {
|
||||
max-width: 100%;
|
||||
}
|
||||
.column {
|
||||
flex: 1 1 100%;
|
||||
min-width: 280px;
|
||||
}
|
||||
}
|
||||
3
app/javascript/styles/strawberry/hide-filtered.scss
Normal file
3
app/javascript/styles/strawberry/hide-filtered.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.status__wrapper--filtered {
|
||||
display:none;
|
||||
}
|
||||
45
app/javascript/styles/strawberry/input.scss
Normal file
45
app/javascript/styles/strawberry/input.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
.boost-modal,
|
||||
.confirmation-modal,
|
||||
.report-modal,
|
||||
.actions-modal,
|
||||
.mute-modal {
|
||||
background: $btt;
|
||||
color: $cui2;
|
||||
}
|
||||
|
||||
.confirmation-modal__action-bar .confirmation-modal__cancel-button,
|
||||
.confirmation-modal__action-bar .mute-modal__cancel-button,
|
||||
.mute-modal__action-bar .confirmation-modal__cancel-button,
|
||||
.mute-modal__action-bar .mute-modal__cancel-button {
|
||||
color: $cui2;
|
||||
}
|
||||
.confirmation-modal__action-bar .confirmation-modal__cancel-button:hover,
|
||||
.confirmation-modal__action-bar .confirmation-modal__cancel-button:focus,
|
||||
.confirmation-modal__action-bar .confirmation-modal__cancel-button:active,
|
||||
.confirmation-modal__action-bar .mute-modal__cancel-button:hover,
|
||||
.confirmation-modal__action-bar .mute-modal__cancel-button:focus,
|
||||
.confirmation-modal__action-bar .mute-modal__cancel-button:active,
|
||||
.mute-modal__action-bar .confirmation-modal__cancel-button:hover,
|
||||
.mute-modal__action-bar .confirmation-modal__cancel-button:focus,
|
||||
.mute-modal__action-bar .confirmation-modal__cancel-button:active,
|
||||
.mute-modal__action-bar .mute-modal__cancel-button:hover,
|
||||
.mute-modal__action-bar .mute-modal__cancel-button:focus,
|
||||
.mute-modal__action-bar .mute-modal__cancel-button:active {
|
||||
color: $curl;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.reply-indicator,
|
||||
.boost-modal__action-bar,
|
||||
.confirmation-modal__action-bar,
|
||||
.mute-modal__action-bar {
|
||||
background: $blb;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: $cbut;
|
||||
}
|
||||
|
||||
.reply-indicator__display-name {
|
||||
color: $btxt;
|
||||
}
|
||||
104
app/javascript/styles/strawberry/landing.scss
Normal file
104
app/javascript/styles/strawberry/landing.scss
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
.landing-page__forms {
|
||||
background: $btxt;
|
||||
}
|
||||
|
||||
.landing-page .separator-or::before {
|
||||
border-bottom: 1px solid $cui;
|
||||
}
|
||||
.landing-page .separator-or span {
|
||||
background: $cui;
|
||||
color: white;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
.button.button-alternative-2 {
|
||||
background: $cui2;
|
||||
}
|
||||
.button.button-alternative-2:active,
|
||||
.button.button-alternative-2:focus,
|
||||
.button.button-alternative-2:hover {
|
||||
background: $cui;
|
||||
}
|
||||
.button.button-alternative:active,
|
||||
.button.button-alternative:focus,
|
||||
.button.button-alternative:hover {
|
||||
background: $curl;
|
||||
}
|
||||
|
||||
.landing-page__information,
|
||||
.landing-page #mastodon-timeline {
|
||||
background: $btt;
|
||||
}
|
||||
|
||||
.landing-page #mastodon-timeline p a,
|
||||
.simple_form p.hint.subtle-hint a {
|
||||
color: $curl;
|
||||
}
|
||||
.landing-page #mastodon-timeline .column-header {
|
||||
color: $cbut;
|
||||
}
|
||||
.landing-page #mastodon-timeline p {
|
||||
color: $ctxt;
|
||||
}
|
||||
|
||||
.landing-page__logo {
|
||||
background: $cbut;
|
||||
padding: 10px 10px 5px 10px;
|
||||
border-radius: 50%
|
||||
}
|
||||
|
||||
.landing-page__short-description h1,
|
||||
.landing-page__short-description p a,
|
||||
.landing-page h5, .landing-page h6,
|
||||
.landing-page h3, .landing-page h4,
|
||||
.landing-page .features-list .features-list__row .visual .fa {
|
||||
color: $curl;
|
||||
}
|
||||
.landing-page__short-description h1 small,
|
||||
.landing-page li, .landing-page p,
|
||||
.landing-page .features-list .features-list__row .text {
|
||||
color: $ctxt;
|
||||
}
|
||||
.landing-page em,
|
||||
.landing-page__short-description h1 small span {
|
||||
color: $btxt;
|
||||
}
|
||||
|
||||
.landing-page__call-to-action {
|
||||
background-color: $btxt;
|
||||
background-image: url(https://cmx.im/strawberry/elephant.png);
|
||||
background-position: 0% 84%;
|
||||
background-repeat:no-repeat;
|
||||
background-size:355px auto;
|
||||
-webkit-box-shadow: 0 0 15px rgba(0,0,0,.2);
|
||||
box-shadow: 0 0 15px rgba(0,0,0,.2);
|
||||
}
|
||||
.landing-page__mascot img {
|
||||
display: none;
|
||||
}
|
||||
.information-board__section strong {
|
||||
color: $cbut;
|
||||
text-shadow: -1px -1px 0.5px rgba(0,0,0,.5), 1px 1px 0.5px rgba(255,255,255,.5);
|
||||
}
|
||||
.information-board__section span:last-child,
|
||||
.information-board__section {
|
||||
color: $btt;
|
||||
}
|
||||
.contact-widget strong {
|
||||
color: $cui;
|
||||
}
|
||||
|
||||
.button.button-alternative {
|
||||
background: $cbut;
|
||||
color: $btt2;
|
||||
}
|
||||
|
||||
.button.button-secondary {
|
||||
color: $cbut;
|
||||
border-color: $cbut;
|
||||
}
|
||||
.button.button-secondary:hover {
|
||||
color: $curl;
|
||||
border-color: $cbut;
|
||||
background: transparent;
|
||||
}
|
||||
41
app/javascript/styles/strawberry/page.scss
Normal file
41
app/javascript/styles/strawberry/page.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
.loading-bar {
|
||||
background:$bhd;
|
||||
}
|
||||
|
||||
body.app-body,
|
||||
.ui {
|
||||
background:$bpg;
|
||||
}
|
||||
|
||||
body.lighter {
|
||||
background:$btxt;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: $cui;
|
||||
border-radius:50px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: $cbut;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: $cui2;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
border:0 none #fff;
|
||||
border-radius:0;
|
||||
background:rgba(249,235,221,.7);
|
||||
}
|
||||
::-webkit-scrollbar-track:active,
|
||||
::-webkit-scrollbar-track:hover {
|
||||
background:$bhd;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background:transparent;
|
||||
}
|
||||
.column ::-webkit-scrollbar-track {
|
||||
border-radius:0 0 10px 0;
|
||||
}
|
||||
.drawer__pager ::-webkit-scrollbar-track {
|
||||
border-radius:0 10px 10px 0;
|
||||
}
|
||||
51
app/javascript/styles/strawberry/radius.scss
Normal file
51
app/javascript/styles/strawberry/radius.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
.public-layout .public-account-header__bar::before,
|
||||
.column .scrollable,
|
||||
.drawer__inner__mastodon,
|
||||
.getting-started,
|
||||
.hero-widget__text,
|
||||
.empty-column-indicator,
|
||||
.error-column,
|
||||
.regeneration-indicator {
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
.search__input,
|
||||
.drawer__inner,
|
||||
.drawer__header,
|
||||
.drawer__tab,
|
||||
.tabs-bar,
|
||||
.landing-page__call-to-action,
|
||||
.contact-widget,
|
||||
.landing-page__information.contact-widget,
|
||||
.public-layout .public-account-header--no-bar .public-account-header__image,
|
||||
.public-layout .public-account-header--no-bar .public-account-header__image img,
|
||||
.public-layout .header,
|
||||
.box-widget,
|
||||
.hero-widget,
|
||||
.landing-page__information,
|
||||
.landing-page #mastodon-timeline,
|
||||
.landing-page__forms,
|
||||
.landing-page__hero,
|
||||
.landing-page__hero img,
|
||||
.search-popout {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.column-back-button,
|
||||
.column-header__back-button,
|
||||
.column-header,
|
||||
.column-header.active,
|
||||
.tabs-bar__link,
|
||||
.hero-widget__img {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px){
|
||||
.navigation-bar,
|
||||
.getting-started__wrapper {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
.getting-started {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
61
app/javascript/styles/strawberry/search.scss
Normal file
61
app/javascript/styles/strawberry/search.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
.search__input {
|
||||
background: $btt;
|
||||
color: $cui;
|
||||
}
|
||||
::placeholder {
|
||||
color: $cui2;
|
||||
}
|
||||
.search__input:focus {
|
||||
background: $btt2;
|
||||
}
|
||||
.search__icon .fa,
|
||||
.account .account__display-name,
|
||||
.trends__item__name {
|
||||
color: $cui;
|
||||
}
|
||||
.fa-times-circle.active:hover,
|
||||
.trends__item__current {
|
||||
color: $cbut;
|
||||
}
|
||||
.trends__item__name a {
|
||||
color: $curl;
|
||||
}
|
||||
.trends__item__sparkline path {
|
||||
stroke: $curl !important
|
||||
}
|
||||
|
||||
.drawer__inner.darker {
|
||||
background: $btt3;
|
||||
}
|
||||
.search-results__header,
|
||||
.trends__header {
|
||||
color: $cbut;
|
||||
background: $bhd;
|
||||
border-color: $cui;
|
||||
}
|
||||
.search-results__section h5 {
|
||||
color: $btxt;
|
||||
border-color: $cui;
|
||||
background: $blb;
|
||||
box-shadow: 0 5px 20px -8px $cui inset;
|
||||
border-top: 1px dotted $cui;
|
||||
}
|
||||
.search-results__section {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.account,
|
||||
.trends__item {
|
||||
border-color: $cui;
|
||||
box-shadow: 0 5px 20px -8px $cui inset;
|
||||
}
|
||||
|
||||
.search-popout {
|
||||
background: $btt;
|
||||
color: $cui;
|
||||
}
|
||||
.search-popout h4 {
|
||||
color: $btxt;
|
||||
}
|
||||
.search-popout em {
|
||||
color: $curl;
|
||||
}
|
||||
3
app/javascript/styles/strawberry/shorter-tl.scss
Normal file
3
app/javascript/styles/strawberry/shorter-tl.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.status.status-public.muted .status__content {
|
||||
max-height: 4em;
|
||||
}
|
||||
69
app/javascript/styles/strawberry/sign_log.scss
Normal file
69
app/javascript/styles/strawberry/sign_log.scss
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
.simple_form input[type=text],
|
||||
.simple_form input[type=number],
|
||||
.simple_form input[type=email],
|
||||
.simple_form input[type=password],
|
||||
.simple_form textarea {
|
||||
color: $cui;
|
||||
background: $btt;
|
||||
border: 1px solid $cui2;
|
||||
}
|
||||
|
||||
.simple_form input[type="email"]:hover,
|
||||
.simple_form input[type="number"]:hover,
|
||||
.simple_form input[type="password"]:hover,
|
||||
.simple_form input[type="text"]:hover,
|
||||
.simple_form textarea:hover {
|
||||
border: 1px solid $curl;
|
||||
}
|
||||
|
||||
.simple_form input[type="email"]:active,
|
||||
.simple_form input[type="email"]:focus,
|
||||
.simple_form input[type="number"]:active,
|
||||
.simple_form input[type="number"]:focus,
|
||||
.simple_form input[type="password"]:active,
|
||||
.simple_form input[type="password"]:focus,
|
||||
.simple_form input[type="text"]:active,
|
||||
.simple_form input[type="text"]:focus,
|
||||
.simple_form textarea:active,
|
||||
.simple_form textarea:focus {
|
||||
background: $btt2;
|
||||
border: 1px solid $curl;
|
||||
}
|
||||
|
||||
.simple_form button,
|
||||
.simple_form .button,
|
||||
.simple_form .block-button {
|
||||
background: $cbut;
|
||||
}
|
||||
|
||||
.simple_form .block-button:hover,
|
||||
.simple_form .button:hover,
|
||||
.simple_form button:hover,
|
||||
.simple_form .block-button:active,
|
||||
.simple_form .block-button:focus,
|
||||
.simple_form .button:active,
|
||||
.simple_form .button:focus,
|
||||
.simple_form button:active,
|
||||
.simple_form button:focus {
|
||||
background: $curl;
|
||||
}
|
||||
|
||||
.form-footer a {
|
||||
color: $btt2;
|
||||
}
|
||||
|
||||
.simple_form .hint,
|
||||
.simple_form p.hint {
|
||||
color: $cui;
|
||||
}
|
||||
|
||||
.simple_form .hint a {
|
||||
color: $cbut;
|
||||
}
|
||||
|
||||
.simple_form .label_input__append {
|
||||
color: $cui;
|
||||
}
|
||||
.simple_form .label_input__append::after {
|
||||
background: linear-gradient(to right, rgba(19, 20, 25, 0), $cui);
|
||||
}
|
||||
64
app/javascript/styles/strawberry/start.scss
Normal file
64
app/javascript/styles/strawberry/start.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
.getting-started {
|
||||
color: $cui;
|
||||
}
|
||||
.getting-started,
|
||||
.flex-spacer,
|
||||
.column-subheading {
|
||||
background: $blb;
|
||||
color: $btxt;
|
||||
}
|
||||
.column-link {
|
||||
background: $btt3;
|
||||
color: $cui2;
|
||||
}
|
||||
.column-link:hover,
|
||||
.column-inline-form {
|
||||
background: $btt2;
|
||||
}
|
||||
.column-subheading {
|
||||
border-bottom: 1px dotted $cui;
|
||||
border-top: 1px dotted $cui;
|
||||
}
|
||||
.getting-started__wrapper {
|
||||
border-bottom: 1px dotted $cui;
|
||||
background: $btt3;
|
||||
}
|
||||
.column-link__badge {
|
||||
background: $curl;
|
||||
color: white
|
||||
}
|
||||
|
||||
.getting-started__footer a,
|
||||
.getting-started__footer p a {
|
||||
color: $curl;
|
||||
text-shadow: 0 0 5px $btt2;
|
||||
}
|
||||
|
||||
.account--panel {
|
||||
background: $blb;
|
||||
border-color: $cui;
|
||||
}
|
||||
.setting-text {
|
||||
color: $cui;
|
||||
border-color: $cui;
|
||||
}
|
||||
.setting-text:focus,
|
||||
.setting-text:active {
|
||||
border-color: $curl;
|
||||
color: $btxt;
|
||||
}
|
||||
.column-back-button--slim .column-back-button,
|
||||
.column-header__buttons .column-header__back-button{
|
||||
box-shadow: none;
|
||||
}
|
||||
.keyboard-shortcuts {
|
||||
color: $cui2;
|
||||
}
|
||||
.keyboard-shortcuts kbd {
|
||||
color: $cbut;
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $cbut;
|
||||
margin: auto 3px;
|
||||
padding: 2px 6px
|
||||
}
|
||||
51
app/javascript/styles/strawberry/ui.scss
Normal file
51
app/javascript/styles/strawberry/ui.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
.tabs-bar {
|
||||
background: $bhd;
|
||||
}
|
||||
.tabs-bar__link {
|
||||
color: $cui;
|
||||
border-color: $cui;
|
||||
}
|
||||
.tabs-bar__link.active {
|
||||
color: $curl;
|
||||
border-color: $cbut;
|
||||
}
|
||||
.floating-action-button,
|
||||
.emoji-mart-anchor-bar {
|
||||
background: $cbut;
|
||||
}
|
||||
.floating-action-button:hover {
|
||||
background: $curl;
|
||||
}
|
||||
.button:disabled {
|
||||
background: $cui2;
|
||||
}
|
||||
|
||||
.emoji-mart-bar:first-child {
|
||||
background: $btt3;
|
||||
}
|
||||
.emoji-mart-anchor-selected {
|
||||
color: $cbut;
|
||||
}
|
||||
.emoji-mart-anchor-selected svg {
|
||||
fill: $cbut !important;
|
||||
}
|
||||
.emoji-mart-anchors svg {
|
||||
fill: $cui;
|
||||
}
|
||||
.emoji-mart-bar,
|
||||
.emoji-mart-search input {
|
||||
border-color: $cui;
|
||||
}
|
||||
@media screen and (max-width: 700px){
|
||||
.landing-page.tag-page #mastodon-timeline .column {
|
||||
height: 100%;
|
||||
}
|
||||
.navigation-bar {
|
||||
background: $blb;
|
||||
border-bottom: 1px dotted $cui;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-wrapper .sidebar ul a {
|
||||
color: $btt3;
|
||||
}
|
||||
27
app/javascript/styles/strawberry/view-long-img.scss
Normal file
27
app/javascript/styles/strawberry/view-long-img.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
.image-loader {
|
||||
align-items:center;
|
||||
}
|
||||
.zoomable-image {
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
max-width: 85%;
|
||||
overflow: auto !important;
|
||||
text-align:center;
|
||||
align-items:center;
|
||||
}
|
||||
.zoomable-image:hover {
|
||||
height:auto;
|
||||
width: auto;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.zoomable-image img {
|
||||
display:block !important;
|
||||
max-width: 100%;
|
||||
max-height: 80%;
|
||||
}
|
||||
.zoomable-image img:hover {
|
||||
display:block !important;
|
||||
max-height: 500%;
|
||||
max-width: 100%;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue