mirror of
https://github.com/yingziwu/mastodon.git
synced 2026-02-11 23:15:17 +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
BIN
app/javascript/fonts/pressstart2p/PressStart2P-Regular.ttf
Normal file
BIN
app/javascript/fonts/pressstart2p/PressStart2P-Regular.ttf
Normal file
Binary file not shown.
997
app/javascript/styles/cyberpunk-neon.scss
Normal file
997
app/javascript/styles/cyberpunk-neon.scss
Normal file
|
|
@ -0,0 +1,997 @@
|
|||
@import 'application';
|
||||
|
||||
/* Index
|
||||
1. Main elements
|
||||
2. Left Column
|
||||
3. Column Headers
|
||||
4. Main Columns
|
||||
5. Notification Column
|
||||
6. Right column
|
||||
7. Simple view
|
||||
8. Mobile view
|
||||
9. External view
|
||||
10. Mastodon Social
|
||||
11. im-in.space
|
||||
*/
|
||||
|
||||
/* 1. Main elements*/
|
||||
html {
|
||||
scrollbar-color: #8EABAD transparent !important;
|
||||
}
|
||||
.ui {
|
||||
background: #000b1e;
|
||||
}
|
||||
body {
|
||||
color: #8EABAD;
|
||||
}
|
||||
|
||||
/* 1.1. Selection */
|
||||
::selection {
|
||||
background: #711c91; /* WebKit/Blink Browsers */
|
||||
color: #8EABAD;
|
||||
}
|
||||
::-moz-selection {
|
||||
background: #711c91; /* Gecko Browsers */
|
||||
color: #8EABAD;
|
||||
}
|
||||
.note-3kmerW textarea::-moz-selection {
|
||||
background:#711c91;
|
||||
color:#8EABAD
|
||||
}
|
||||
.note-3kmerW textarea::selection {
|
||||
background:#711c91;
|
||||
color:#8EABAD
|
||||
}
|
||||
|
||||
/* 2. Left colum */
|
||||
|
||||
/* 2.1. Left header */
|
||||
.drawer__header {
|
||||
background: #133e7c;
|
||||
}
|
||||
.drawer__header a:hover {
|
||||
background: #091833;
|
||||
color: #BD82B9;
|
||||
}
|
||||
.drawer__tab {
|
||||
color: #8EABAD;
|
||||
}
|
||||
|
||||
/* 2.2. Search bar */
|
||||
.search__input {
|
||||
background: #091833;
|
||||
color: #8EABAD;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
.search__input:focus {
|
||||
background: #133e7c;
|
||||
}
|
||||
.search__icon .fa {
|
||||
color: #8EABAD;
|
||||
}
|
||||
|
||||
/* 2.2.1. Search results */
|
||||
.search-results__header {
|
||||
color: #8EABAD;
|
||||
background: #133e7c;
|
||||
}
|
||||
.search-results__section h5 {
|
||||
background: #091833;
|
||||
border-bottom: 1px solid #133e7c;
|
||||
color: #8EABAD;
|
||||
}
|
||||
.search-results__info {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.trends__item__current {
|
||||
color: #BD82B9;
|
||||
}
|
||||
|
||||
/* 2.3. Profile */
|
||||
.drawer__inner {
|
||||
background: #091833;
|
||||
}
|
||||
.navigation-bar {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.navigation-bar strong {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.icon-button {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.icon-button:active , .icon-button:focus, .icon-button:hover {
|
||||
color: #BD82B9;
|
||||
}
|
||||
|
||||
/* 2.4. Dropdown Menu */
|
||||
.dropdown-menu {
|
||||
background: #000b1e;
|
||||
}
|
||||
.dropdown-menu__arrow.bottom {
|
||||
border-bottom-color: #000b1e;
|
||||
}
|
||||
.dropdown-menu__item a {
|
||||
background: #000b1e;
|
||||
color: #8EABAD;
|
||||
}
|
||||
.dropdown-menu__separator {
|
||||
border-bottom: 1px solid #091833;
|
||||
}
|
||||
.dropdown-menu__item a:active, .dropdown-menu__item a:focus, .dropdown-menu__item a:hover {
|
||||
background: rgba(19, 62, 124, .6);
|
||||
color: #8EABAD;
|
||||
}
|
||||
|
||||
/* 2.5. Text Area */
|
||||
.compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input {
|
||||
color: #8EABAD;
|
||||
background: #133e7c;
|
||||
}
|
||||
.compose-form .compose-form__modifiers {
|
||||
color: #8EABAD;
|
||||
background: #133e7c;
|
||||
}
|
||||
.compose-form .compose-form__buttons-wrapper {
|
||||
background: #133e7c;
|
||||
}
|
||||
.icon-button.inverted {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.icon-button.inverted:hover {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.text-icon-button {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.text-icon-button:hover {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.reply-indicator {
|
||||
background: #133e7c;
|
||||
}
|
||||
.reply-indicator__display-name {
|
||||
color: #BD82B9;
|
||||
}
|
||||
|
||||
/* 2.5.1. Polls */
|
||||
.poll__text input[type="text"] {
|
||||
color: #8EABAD;
|
||||
background: #133e7c;
|
||||
border: 1px solid #8EABAD;
|
||||
}
|
||||
.poll__text input[type="text"]:hover {
|
||||
border: 1px solid #BD82B9;
|
||||
}
|
||||
.poll__input {
|
||||
border: 1px solid #8EABAD;
|
||||
}
|
||||
.compose-form__poll-wrapper .icon-button.disabled {
|
||||
color: #d7d7d5;
|
||||
}
|
||||
.compose-form__poll-wrapper {
|
||||
border-top: 1px solid #8EABAD;
|
||||
}
|
||||
.compose-form__poll-wrapper .poll__footer {
|
||||
border-top: 1px solid #8EABAD;
|
||||
}
|
||||
.compose-form__poll-wrapper .button.button-secondary {
|
||||
color: #BD82B9;
|
||||
border-color: #BD82B9;
|
||||
}
|
||||
.compose-form__poll-wrapper select {
|
||||
color: #8EABAD;
|
||||
background: #133e7c url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='%230abdc6'/></svg>") no-repeat right 8px center/auto 16px;
|
||||
border: 1px solid #8EABAD;
|
||||
}
|
||||
|
||||
/* 2.5.2. Emoji Picker */
|
||||
.emoji-picker-dropdown__menu {
|
||||
background: #091833;
|
||||
}
|
||||
.emoji-mart-bar:first-child {
|
||||
background: #091833;
|
||||
}
|
||||
.emoji-mart-bar {
|
||||
border: 0 solid #000b1e;
|
||||
}
|
||||
.emoji-mart-anchors {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.emoji-mart-anchor:hover {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.emoji-mart-anchor-selected {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.emoji-mart-search {
|
||||
background: #091833;
|
||||
}
|
||||
.emoji-mart-search input {
|
||||
background: #133e7c;
|
||||
color: #8EABAD;
|
||||
border: 1px solid #8EABAD;
|
||||
}
|
||||
.emoji-mart-scroll {
|
||||
background: #091833;
|
||||
}
|
||||
.emoji-mart {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.emoji-mart-category-label span {
|
||||
background: #091833
|
||||
}
|
||||
.emoji-mart-category .emoji-mart-emoji:hover::before {
|
||||
background-color: #8EABAD;
|
||||
}
|
||||
|
||||
/* 2.6. Other */
|
||||
.button {
|
||||
background-color: #133e7c;
|
||||
color: #8EABAD;
|
||||
}
|
||||
.button:hover {
|
||||
background-color: #711c91;
|
||||
color: #8EABAD;
|
||||
}
|
||||
.drawer__inner__mastodon {
|
||||
background: #091833 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="%23bd82b9"/></svg>') no-repeat bottom/100% auto;
|
||||
}
|
||||
|
||||
/* 3. Column Headers */
|
||||
.column-header {
|
||||
background: #091833;
|
||||
}
|
||||
.column-header__button {
|
||||
background: #091833;
|
||||
color: #8EABAD;
|
||||
}
|
||||
.column-header__button:hover {
|
||||
background: #133e7c;
|
||||
color: #BD82B9;
|
||||
}
|
||||
.column-header__button.active {
|
||||
background: #133e7c;
|
||||
color: #8EABAD;
|
||||
}
|
||||
.column-header__button.active:hover {
|
||||
background: #133e7c;
|
||||
color: #BD82B9;
|
||||
}
|
||||
.column-header.active .column-header__icon {
|
||||
color: #BD82B9;
|
||||
text-shadow: 0 0 10px rgba(95, 129, 154, .4);
|
||||
}
|
||||
.column-header__collapsible {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.column-header__collapsible-inner {
|
||||
background: #133e7c;
|
||||
}
|
||||
.setting-toggle__label {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.react-toggle-track {
|
||||
background-color: #000b1e;
|
||||
}
|
||||
.column-settings__section {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.column-header__setting-btn:hover {
|
||||
color: #BD82B9;
|
||||
}
|
||||
|
||||
/* 3.1. Announcements */
|
||||
|
||||
.announcements {
|
||||
background: #133e7c;
|
||||
}
|
||||
.announcements__item__unread {
|
||||
background: #BD82B9;
|
||||
}
|
||||
.reactions-bar .emoji-button, .reactions-bar .emoji-button, .reactions-bar .emoji-button {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.reactions-bar .emoji-button:active, .reactions-bar .emoji-button:focus, .reactions-bar .emoji-button:hover {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.reactions-bar__item.active {
|
||||
background-color: rgba(113, 28, 145, .7);
|
||||
}
|
||||
|
||||
/* 4. Main Columns */
|
||||
.column > .scrollable {
|
||||
background: #091833;
|
||||
}
|
||||
.status {
|
||||
border-bottom: 1px solid #000b1e;
|
||||
}
|
||||
.notification__relative_time, .status__relative-time {
|
||||
color: rgba(190, 141, 187, .6);
|
||||
}
|
||||
.status__display-name {
|
||||
color: rgba(190, 141, 187, .6);
|
||||
}
|
||||
.account__display-name strong, .status__display-name strong {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.reply-indicator__content, .status__content {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.reply-indicator__content a, .status__content a {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.status__content a.unhandled-link {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.icon-button.disabled {
|
||||
color: #711c91;
|
||||
}
|
||||
.star-icon.active {
|
||||
color: #D1D17B;
|
||||
}
|
||||
.status__content__read-more-button {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.status__action-bar__counter__label {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.attachment-list.compact .fa {
|
||||
color: #711c91;
|
||||
}
|
||||
.attachment-list__list a {
|
||||
color: #711c91;
|
||||
}
|
||||
.status__prepend {
|
||||
color: rgba(76, 111, 113, .6);
|
||||
}
|
||||
.status__prepend .status__display-name strong {
|
||||
color: rgba(190, 141, 187, .6);
|
||||
}
|
||||
.status-card.compact {
|
||||
border-color: #133e7c;
|
||||
}
|
||||
.status-card {
|
||||
border: 1px solid #133e7c;
|
||||
border-top-color: rgb(57, 63, 79);
|
||||
border-right-color: rgb(57, 63, 79);
|
||||
border-bottom-color: rgb(57, 63, 79);
|
||||
border-left-color: rgb(57, 63, 79);
|
||||
color: #8EABAD;
|
||||
}
|
||||
.status-card__image {
|
||||
background: #133e7c;
|
||||
}
|
||||
.status-card__title {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.status-card__content:hover {
|
||||
background: #133e7c;
|
||||
}
|
||||
.reply-indicator__content .status__content__spoiler-:hover, .status__content .status__content__spoiler-link:hover {
|
||||
background: #711c91;
|
||||
}
|
||||
.status__content__spoiler-link {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link {
|
||||
background: #133e7c;
|
||||
}
|
||||
.account {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #000b1e;
|
||||
}
|
||||
.poll__chart.leading {
|
||||
background: #133e7c;
|
||||
}
|
||||
.poll__chart {
|
||||
background: rgba(19, 62, 124, .6);
|
||||
}
|
||||
.poll__footer {
|
||||
color: rgba(120, 175, 178, .6);
|
||||
}
|
||||
.poll__link {
|
||||
color: rgba(190, 141, 187, .6);
|
||||
}
|
||||
.focusable:focus {
|
||||
background: rgba(216, 170, 213, .2);
|
||||
}
|
||||
.icon-button:active, .icon-button:focus, .icon-button:hover {
|
||||
background: none;
|
||||
}
|
||||
a.status-card.compact:hover {
|
||||
background-color: rgba(19, 62, 124, .6);
|
||||
}
|
||||
|
||||
/* 5. Notification Column */
|
||||
.status.status-direct:not(.read) {
|
||||
background: #133e7c;
|
||||
border-bottom-color: #000b1e;
|
||||
}
|
||||
.account__section-headline, .notification__filter-bar {
|
||||
background: #000b1e;
|
||||
border-bottom: 1px solid #8EABAD;
|
||||
}
|
||||
.account__section-headline button, .notification__filter-bar button {
|
||||
background: #000b1e;
|
||||
}
|
||||
.account__section-headline a.active, .account__section-headline button.active, .notification__filter-bar a.active, .notification__filter-bar button.active {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.account__section-headline a, .account__section-headline button, .notification__filter-bar a, .notification__filter-bar button {
|
||||
color: #8EABADba;
|
||||
}
|
||||
.account__section-headline a.active::after, .account__section-headline a.active::before, .account__section-headline button.active::after, .account__section-headline button.active::before, .notification__filter-bar a.active::after, .notification__filter-bar a.active::before, .notification__filter-bar button.active::after, .notification__filter-bar button.active::before {
|
||||
border-color: transparent transparent #8EABAD;
|
||||
}
|
||||
.notification-favourite .status.status-direct {
|
||||
background: transparent;
|
||||
}
|
||||
.notification__message .fa {
|
||||
color: #79C679;
|
||||
}
|
||||
.notification__favourite-icon-wrapper .star-icon, .star-icon.active {
|
||||
color: #D1D17B;
|
||||
}
|
||||
.notification__message {
|
||||
color: rgba(100, 132, 134, .8);
|
||||
}
|
||||
.notification__display-name:hover {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.muted .status__content a, .muted .status__content p {
|
||||
color: rgba(120, 175, 178, .6);
|
||||
}
|
||||
.notification__display-name {
|
||||
color: rgba(190, 141, 187, .8)
|
||||
}
|
||||
.muted .status__display-name strong {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.account .account__display-name {
|
||||
color: rgba(190, 141, 187, .6);
|
||||
}
|
||||
.notification-favourite .status.status-direct .icon-button.disabled {
|
||||
color: #711c91;
|
||||
}
|
||||
.muted .poll__chart.leading {
|
||||
background: rgba(43,144,217,.3);
|
||||
}
|
||||
.muted .poll__chart {
|
||||
background: rgba(43,144,217,.1);
|
||||
}
|
||||
.muted .poll {
|
||||
color: rgba(120, 175, 178, .6);
|
||||
}
|
||||
|
||||
/* 6. Right bar */
|
||||
|
||||
/* 6.1. Detailed views */
|
||||
.detailed-status {
|
||||
background: #000b1e;
|
||||
}
|
||||
.detailed-status:hold {
|
||||
background: #000b1e;
|
||||
padding: 14px 10px;
|
||||
}
|
||||
.detailed-status__display-name {
|
||||
color: rgba(234, 0, 217, .6);
|
||||
}
|
||||
.detailed-status__display-name strong {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.focusable:focus .detailed-status, .focusable:focus .detailed-status__action-bar {
|
||||
background: rgba(113, 28, 145, .2);
|
||||
}
|
||||
.detailed-status__action-bar {
|
||||
background: #000b1e;
|
||||
border-top: 1px solid #091833;
|
||||
border-bottom: 1px solid #091833;
|
||||
}
|
||||
.detailed-status__wrapper {
|
||||
background: #000b1e;
|
||||
}
|
||||
.column-header > .column-header__back-button {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.detailed-status__meta {
|
||||
color: rgba(190, 141, 187, .6);
|
||||
}
|
||||
.column-subheading {
|
||||
color: #8EABADba;
|
||||
}
|
||||
.column-link__badge, .column-subheading {
|
||||
background: #000b1e;
|
||||
}
|
||||
.column-link {
|
||||
background: #091833;
|
||||
color: #BD82B9;
|
||||
}
|
||||
.column-link:hover {
|
||||
background: #133e7c;
|
||||
}
|
||||
.getting-started {
|
||||
color: #091833;
|
||||
}
|
||||
.flex-spacer, .getting-started, .getting-started__wrapper {
|
||||
background: #091833;
|
||||
}
|
||||
.getting-started__footer a {
|
||||
color: #BD82B9b8;
|
||||
}
|
||||
.getting-started__footer p {
|
||||
color: rgba(190, 141, 187, .5);
|
||||
}
|
||||
.getting-started__footer p a {
|
||||
color: rgba(190, 141, 187, .5);
|
||||
}
|
||||
.column-header__back-button {
|
||||
background: #091833;
|
||||
color: #BD82B9;
|
||||
}
|
||||
.account--panel {
|
||||
background: #133e7c;
|
||||
border-top: 1px solid #133e7c;
|
||||
border-bottom: 1px solid #133e7c;
|
||||
}
|
||||
|
||||
/* 6.2. Detailed profile view */
|
||||
|
||||
.column-back-button {
|
||||
background: #091833;
|
||||
color: #BD82B9;
|
||||
}
|
||||
.account__header__image {
|
||||
overflow: hidden;
|
||||
height: 145px;
|
||||
position: relative;
|
||||
background: #000b1e;
|
||||
}
|
||||
.account__header__bar {
|
||||
background: #091833;
|
||||
border-bottom: 1px solid #8EABAD;
|
||||
}
|
||||
.account__header__tabs__name h1 {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.account__header__tabs__name h1 small {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.account__header__fields dt {
|
||||
background: #000b1e;
|
||||
}
|
||||
.account__header__fields dt {
|
||||
color: #8EABAD;
|
||||
background: #000b1e;
|
||||
}
|
||||
.account__header__fields dd {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.account__header__fields dl {
|
||||
border-bottom: 1px solid #133e7c;
|
||||
}
|
||||
.account__header__bio .account__header__fields {
|
||||
border-top: 1px solid #133e7c;
|
||||
}
|
||||
.account__header__fields {
|
||||
border-color: #133e7c currentcolor;
|
||||
border-top-color: #133e7c;
|
||||
}
|
||||
.account__header__fields .verified {
|
||||
border: 1px solid rgba(150, 202, 150, .5);
|
||||
background: rgba(150, 202, 150, .25);
|
||||
}
|
||||
.account__header__fields .verified__mark {
|
||||
color: #79C679;
|
||||
}
|
||||
.account__header__bio .account__header__fields .verified a {
|
||||
color: #79C679;
|
||||
}
|
||||
.account__header__bio .account__header__content {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.account__header__extra__links {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.account__header__extra__links a strong {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.account__header__extra__links a {
|
||||
color: #8EABADba;
|
||||
}
|
||||
.account-role, .simple_form .recommended {
|
||||
color: #8EABAD;
|
||||
background-color: #133e7c;
|
||||
border: 1px solid #8EABAD;
|
||||
}
|
||||
.relationship-tag {
|
||||
color: #8EABAD;
|
||||
background-color: #000b1e;
|
||||
}
|
||||
.empty-column-indicator, .error-column {
|
||||
color: #8EABAD;
|
||||
background: #091833;
|
||||
}
|
||||
|
||||
/* 6.3. Hastags */
|
||||
.trends__item__name {
|
||||
color: rgba(190, 141, 187, .6);
|
||||
}
|
||||
.trends__item__name a {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.getting-started__trends .trends__item__current {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.getting-started__trends h4 {
|
||||
color: #8EABAD;
|
||||
border-bottom: 1px solid rgba(10, 189, 198, .3);
|
||||
}
|
||||
|
||||
/* 7. Simple View */
|
||||
.tabs-bar__wrapper {
|
||||
background: #000b1e;
|
||||
}
|
||||
.navigation-panel hr {
|
||||
border-top: 1px solid #133e7c;
|
||||
}
|
||||
|
||||
/* 8. Mobile View */
|
||||
.tabs-bar {
|
||||
background: #091833;
|
||||
}
|
||||
.tabs-bar__link {
|
||||
color: #8EABAD;
|
||||
border-bottom: 2px solid #091833;
|
||||
}
|
||||
.tabs-bar__link:active, .tabs-bar__link:focus, .tabs-bar__link:hover {
|
||||
background: #133e7c;
|
||||
border-bottom-color: #133e7c;
|
||||
}
|
||||
.tabs-bar__link.active {
|
||||
border-bottom: 2px solid #BD82B9;
|
||||
border-bottom-color: #BD82B9;
|
||||
color: #BD82B9;
|
||||
}
|
||||
.drawer__inner.darker {
|
||||
background: #091833;
|
||||
}
|
||||
.trends__header {
|
||||
color: #8EABADba;
|
||||
background: #091833;
|
||||
border-bottom: 1px solid #000b1e;
|
||||
}
|
||||
|
||||
/* 9. External View */
|
||||
body {
|
||||
background-color: #000b1e;
|
||||
color: #8EABAD;
|
||||
}
|
||||
html {
|
||||
background-color: #000b1e !important;
|
||||
}
|
||||
.public-layout .header {
|
||||
background-color: #091833;
|
||||
}
|
||||
.public-layout .header .brand svg {
|
||||
fill: #8EABAD;
|
||||
}
|
||||
.public-layout .header .brand:active, .public-layout .header .brand:focus, .public-layout .header .brand:hover {
|
||||
background-color: #133e7c;
|
||||
}
|
||||
.public-layout .header .nav-link:active, .public-layout .header .nav-link:focus, .public-layout .header .nav-link:hover {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.public-layout .header .nav-link {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.public-layout .header .nav-button:active, .public-layout .header .nav-button:focus, .public-layout .header .nav-button {
|
||||
background-color: #133e7c;
|
||||
}
|
||||
.public-layout .header .nav-button:active, .public-layout .header .nav-button:focus, .public-layout .header .nav-button:hover {
|
||||
background-color: #133e7c;
|
||||
}
|
||||
.public-layout .public-account-header__tabs__name h1 {
|
||||
color: #BD82B9;
|
||||
text-shadow: #000b1e 1px 1px 1px;
|
||||
}
|
||||
.public-layout .public-account-header__tabs__name h1 small {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.public-layout .public-account-header__bar .avatar img {
|
||||
border-color: #8EABAD;
|
||||
background-color: #000b1e;
|
||||
}
|
||||
.public-layout .public-account-header__tabs__tabs .counter .counter-number {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.public-layout .public-account-header__tabs__tabs .counter .counter-label {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.public-layout .public-account-header__tabs__tabs .counter {
|
||||
border-right-color: #133e7c;
|
||||
}
|
||||
.public-layout .public-account-header__tabs__tabs .counter.active::after {
|
||||
border-bottom-color: #BD82B9;
|
||||
}
|
||||
.activity-stream .entry {
|
||||
background-color: #091833;
|
||||
}
|
||||
.load-more {
|
||||
color: #8EABAD;
|
||||
background-color: #133e7c;
|
||||
}
|
||||
.load-more:hover {
|
||||
background-color: #711c91;
|
||||
}
|
||||
.public-layout .public-account-bio .account__header__fields .verified a {
|
||||
color: #79C679;
|
||||
}
|
||||
|
||||
/* 9.1. Profile */
|
||||
.public-layout .public-account-bio .account__header__fields a {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.public-layout .public-account-bio .account__header__content {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.public-layout .public-account-bio .roles, .public-layout .public-account-bio__extra {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.public-layout .public-account-bio {
|
||||
background-color: #091833;
|
||||
}
|
||||
.hero-widget__text {
|
||||
background-color: #091833;
|
||||
color: #8EABAD;
|
||||
}
|
||||
.button.logo-button:active, .button.logo-button:focus, .button.logo-button:hover {
|
||||
background-color: #133e7c;
|
||||
color: #BD82B9;
|
||||
}
|
||||
.button.logo-button:active, .button.logo-button:focus, .button.logo-button {
|
||||
background-color: #133e7c;
|
||||
color: #8EABAD;
|
||||
}
|
||||
.button.logo-button svg {
|
||||
fill: #8EABAD;
|
||||
}
|
||||
|
||||
/* 9.1.1. Followers */
|
||||
.card__img {
|
||||
background-color: rgba(113, 28, 145, .3);
|
||||
}
|
||||
.card__bar {
|
||||
background-color: #091833;
|
||||
}
|
||||
a:hover .card__bar {
|
||||
background-color: rgba(19, 62, 124, .6);
|
||||
}
|
||||
.card > a:active .card__bar, .card > a:focus .card__bar, .card > a:hover .card__bar {
|
||||
background: rgba(19, 62, 124, .6);
|
||||
background-color: rgba(19, 62, 124, .6);
|
||||
background-image: none;
|
||||
}
|
||||
.card__bar .display-name strong {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.card__bar .display-name span {
|
||||
color: rgba(234, 0, 217, .6);
|
||||
}
|
||||
.pagination .current {
|
||||
background-color: #133e7c;
|
||||
color: #8EABAD;
|
||||
}
|
||||
.pagination .current, .pagination .gap, .pagination .newer, .pagination .older, .pagination .page, .pagination a {
|
||||
color: #8EABAD;
|
||||
}
|
||||
|
||||
/* 9.2. Footer */
|
||||
.public-layout .footer h4 {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.public-layout .footer ul a {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.public-layout .footer .grid .column-2 h4 a {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.public-layout .footer .brand svg {
|
||||
fill: #8EABAD;
|
||||
}
|
||||
.public-layout .footer .brand svg:hover {
|
||||
fill: #BD82B9;
|
||||
}
|
||||
.public-layout .footer {
|
||||
color: #BD82B9
|
||||
}
|
||||
.public-layout .footer {
|
||||
background: #000b1e;
|
||||
}
|
||||
|
||||
/* 9.3. About/more page */
|
||||
.landing-page__call-to-action {
|
||||
background-color: #091833;
|
||||
}
|
||||
.information-board__section {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.information-board__section span:last-child {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.contact-widget h4 {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.contact-widget > a {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.table-of-contents {
|
||||
background: #091833;
|
||||
}
|
||||
.table-of-contents li a {
|
||||
color: #BD82B9;
|
||||
border-bottom-color: rgba(19, 62, 124, .6);
|
||||
}
|
||||
.rich-formatting h1, .rich-formatting h2, .rich-formatting h3, .rich-formatting h4, .rich-formatting h5, .rich-formatting h6 {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.rich-formatting strong {
|
||||
color: #d7d7d5;
|
||||
}
|
||||
.rich-formatting li, .rich-formatting p {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.rich-formatting li a, .rich-formatting p a {
|
||||
color: #BD82B9;
|
||||
}
|
||||
|
||||
/* 9.4. Directory */
|
||||
.page-header {
|
||||
background-color: #091833;
|
||||
}
|
||||
.page-header h1 {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.page-header p {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.directory__card__bar {
|
||||
background-color: #091833;
|
||||
}
|
||||
.directory__card__bar .display-name strong {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.directory__card__bar .display-name span {
|
||||
color: rgba(190, 141, 187, .6);
|
||||
}
|
||||
.directory__card__extra {
|
||||
background-color: #091833;
|
||||
}
|
||||
.account__header__content {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.directory__card__extra .account__header__content {
|
||||
border-bottom-color: rgba(19, 62, 124, .6);
|
||||
}
|
||||
.accounts-table__count {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.accounts-table__count small {
|
||||
color: #8EABAD;
|
||||
}
|
||||
|
||||
/* 9.5. About page */
|
||||
.landing .simple_form .user_agreement .label_input > label, .landing .simple_form p.lead {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.landing__brand svg {
|
||||
fill: #8EABAD;
|
||||
}
|
||||
.simple_form .input.boolean label a {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.simple_form .hint a {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.hero-widget__text a {
|
||||
color: #BD82B9;
|
||||
}
|
||||
[data-darkreader-inline-fill] {
|
||||
fill: #BD82B9 !important;
|
||||
}
|
||||
.brand__tagline {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.simple_form input[type="email"], .simple_form input[type="number"], .simple_form input[type="password"], .simple_form input[type="text"], .simple_form textarea {
|
||||
color: #8EABAD;
|
||||
background-color: #133e7c;
|
||||
border-color: rgba(120, 175, 178, .6);
|
||||
}
|
||||
.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-color: #8EABAD;
|
||||
}
|
||||
.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 {
|
||||
border-color: #8EABAD;
|
||||
background-color: #000b1e
|
||||
}
|
||||
.simple_form .label_input__append {
|
||||
color: #BD82B9;
|
||||
}
|
||||
::placeholder {
|
||||
color: #8EABAD !important;
|
||||
}
|
||||
.directory__tag > a, .directory__tag > div {
|
||||
background-color: #091833;
|
||||
box-shadow: rgba(19, 62, 124, 0.2) 0px 0px 15px;
|
||||
}
|
||||
.directory__tag > a:active, .directory__tag > a:focus, .directory__tag > a:hover {
|
||||
background-color: rgba(19, 62, 124, .6);
|
||||
}
|
||||
.directory__tag h4 {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.directory__tag h4 .fa {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.directory__tag h4 small {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.avatar-stack .account__avatar {
|
||||
background-color: #000b1e;
|
||||
border-color: #133e7c;
|
||||
}
|
||||
.landing .hero-widget__footer {
|
||||
background-color: #091833;
|
||||
}
|
||||
.landing .hero-widget h4 {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.landing .hero-widget__counter span {
|
||||
color: #8EABAD;
|
||||
}
|
||||
|
||||
/* 10. im-in.space */
|
||||
.public-layout .public-account-bio, .public-layout .public-account-header__bar::before, .hero-widget__text, .public-layout .header {
|
||||
background: #091833 !important;
|
||||
}
|
||||
|
||||
.button.logo-button, .simple_form button, .simple_form .button, .simple_form .block-button, .public-layout .header .nav-button {
|
||||
background-color: #133e7c !important;
|
||||
color: #8EABAD !important;
|
||||
}
|
||||
.button.logo-button:active, .button.logo-button:focus, .button.logo-button:hover, .simple_form button:hover, .simple_form button:focus, .simple_form button:active, .simple_form .button:hover, .simple_form .button:focus, .simple_form .button:active, .simple_form .block-button:hover, .simple_form .block-button:focus, .simple_form .block-button:active, .public-layout .header .nav-button:hover, .public-layout .header .nav-button:focus, .public-layout .header .nav-button:active {
|
||||
background-color: #711c91 !important;
|
||||
color: #8EABAD !important;
|
||||
}
|
||||
.endorsements-widget {
|
||||
background: #091833;
|
||||
}
|
||||
.endorsements-widget h4 {
|
||||
color: #8EABAD;
|
||||
}
|
||||
.landing-page__information, .landing-page__forms, .landing-page #mastodon-timeline, .box-widget, .contact-widget, .landing-page__information.contact-widget, .landing-page__call-to-action {
|
||||
background-color: #091833 !important;
|
||||
}
|
||||
.rich-formatting a {
|
||||
color: #BD82B9;
|
||||
}
|
||||
.notice-widget {
|
||||
color: #8EABAD;
|
||||
}
|
||||
|
||||
/* 10.1. About/more */
|
||||
.rich-formatting table thead tr {
|
||||
color: rgba(120, 175, 178, .6) !important;
|
||||
}
|
||||
.rich-formatting table tbody tr, .rich-formatting table thead tr {
|
||||
border-bottom: 1px solid rgba(19, 62, 124, .6);
|
||||
color: #8EABAD;
|
||||
}
|
||||
|
||||
/* 11. Settings */
|
||||
|
||||
|
||||
86
app/javascript/styles/cybre-base.scss
Normal file
86
app/javascript/styles/cybre-base.scss
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
|
||||
@import 'application';
|
||||
|
||||
/* Wider compose area */
|
||||
@media screen and (min-width: 1300px) {
|
||||
.drawer {
|
||||
width: 17%; /* Not part of the flex fun */
|
||||
max-width: 400px;
|
||||
min-width: 330px;
|
||||
}
|
||||
.layout-multiple-columns .column {
|
||||
flex-grow: 1 !important;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Don't show outline around statuses if we're in
|
||||
* mouse or touch mode (rather than keyboard) */
|
||||
[data-whatinput="mouse"], [data-whatinput="touch"] {
|
||||
.status__content:focus, .status:focus,
|
||||
.status__wrapper:focus, .status__content__text:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Less emphatic show more */
|
||||
.status__content__read-more-button {
|
||||
font-size: 14px;
|
||||
color: $dark-text-color;
|
||||
|
||||
.status__prepend-icon {
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Show a little arrowey thing after the time in a
|
||||
* status to signal that you can click it to see
|
||||
* a detailed view */
|
||||
.status time:after,
|
||||
.detailed-status__datetime span:after {
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
content: "\00a0\00a0\f08e";
|
||||
}
|
||||
|
||||
/* Don't display the elephant mascot (we have our
|
||||
* own, thanks) */
|
||||
/*.drawer__inner__mastodon {
|
||||
display: none;
|
||||
} */
|
||||
|
||||
/* Let the compose area/drawer be short, but
|
||||
* expand if necessary */
|
||||
/* .drawer .drawer__inner {
|
||||
overflow: visible;
|
||||
height:inherit;
|
||||
background-image: none;
|
||||
}
|
||||
.drawer__pager {
|
||||
overflow-y:auto;
|
||||
} */
|
||||
|
||||
/* Put a reasonable background on the single-column compose form */
|
||||
.layout-single-column .compose-panel {
|
||||
background-color: $ui-base-color;
|
||||
height: auto;
|
||||
overflow-y: visible;
|
||||
margin-top: 65px;
|
||||
}
|
||||
|
||||
/* Better distinguish the search bar */
|
||||
.layout-single-column .compose-panel .search {
|
||||
position:relative;
|
||||
top: -55px;
|
||||
margin-bottom: -55px;
|
||||
}
|
||||
|
||||
/* Use display: none instead of visibility:hidden
|
||||
* to hide the suggested follows list on non-mobile */
|
||||
@media screen and (min-width: 630px) {
|
||||
.search-results .trends {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
1005
app/javascript/styles/cybre-light.scss
Normal file
1005
app/javascript/styles/cybre-light.scss
Normal file
File diff suppressed because it is too large
Load diff
282
app/javascript/styles/cybre.scss
Normal file
282
app/javascript/styles/cybre.scss
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
$ui-base-color: #181818; // darkest
|
||||
$ui-highlight-color: #1ea21e; // vibrant
|
||||
$ui-secondary-color: #E4F2E4; // lightest
|
||||
$ui-primary-color: #E4F2E4; // lighter
|
||||
$ui-primary-color-alt: #a0b49c; // darker, for external pages
|
||||
|
||||
$about-page-text: lighten($ui-base-color, 50%);
|
||||
|
||||
@import 'cybre-base';
|
||||
|
||||
@keyframes floating {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
65% {
|
||||
transform: translate(0, 4px);
|
||||
}
|
||||
to {
|
||||
transform: translate(0, -0);
|
||||
}
|
||||
}
|
||||
|
||||
body, body.about-body {
|
||||
background: $ui-base-color url('../images/background-cybre.png');
|
||||
}
|
||||
|
||||
body.about-body {
|
||||
// basics.scss &.about-body
|
||||
background: darken($ui-base-color, 8%) url('../images/background-cybre.png');
|
||||
|
||||
background-position-y: 200px;
|
||||
background-position-x: center;
|
||||
}
|
||||
|
||||
.about-body .mascot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.muted {
|
||||
.status__content p, .status__content a {
|
||||
color: lighten($ui-base-color, 35%);
|
||||
}
|
||||
|
||||
.status__display-name strong {
|
||||
color: lighten($ui-base-color, 35%);
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form__buttons button.active:last-child {
|
||||
color:$ui-secondary-color;
|
||||
background-color: $ui-highlight-color;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
.screenshot-with-signup {
|
||||
min-height:300px;
|
||||
}
|
||||
|
||||
.container.hero .closed-registrations-message .clock {
|
||||
font-size: 150%;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
.column .static-content.getting-started {
|
||||
background-image: url('../images/logo-cybre.png'), url('../images/background-cybre.png');
|
||||
background-size:auto 50%, cover;
|
||||
background-position: 50% 75%, center center;
|
||||
background-repeat:no-repeat, no-repeat;
|
||||
}
|
||||
|
||||
.columns-area {
|
||||
background: $ui-base-color url('../images/background-cybre.png');
|
||||
}
|
||||
|
||||
.actions .button.button-alternative {
|
||||
background: $ui-highlight-color;
|
||||
color: $ui-primary-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($ui-highlight-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.landing-page .container.links {
|
||||
top: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.landing-page.alternative .header {
|
||||
background-image:url('../images/header-cybre-colour.jpg');
|
||||
background-repeat: repeat-x;
|
||||
background-size:contain;
|
||||
height:45vh;
|
||||
width: 100%;
|
||||
position:absolute;
|
||||
z-index: 1;
|
||||
text-align:center;
|
||||
|
||||
display: unset!important;
|
||||
}
|
||||
|
||||
.landing-page.alternative .header img {
|
||||
margin: auto;
|
||||
max-height:45vh;
|
||||
}
|
||||
|
||||
|
||||
.landing-page.alternative .grid {
|
||||
position: relative;
|
||||
z-index:2;
|
||||
margin-top:15vh;
|
||||
}
|
||||
|
||||
.landing-page.alternative .landing-page__hero img {
|
||||
visibility: hidden;
|
||||
max-height:170px;
|
||||
}
|
||||
|
||||
.landing-page.alternative .landing-page__forms {
|
||||
height:auto;
|
||||
}
|
||||
|
||||
.landing-page.alternative .column-1 {
|
||||
display:flex;
|
||||
align-items:flex-end;
|
||||
}
|
||||
|
||||
.landing-page.alternative .column {
|
||||
max-height:initial;
|
||||
}
|
||||
|
||||
.landing-page.alternative .row__mascot {
|
||||
.floats {
|
||||
position:absolute;
|
||||
img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
transition: all 0.1s linear;
|
||||
animation-name: floating;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.float-1 {
|
||||
width:50px;
|
||||
height:50px;
|
||||
bottom:60px;
|
||||
left:110px;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
.float-2 {
|
||||
width:130px;
|
||||
height:130px;
|
||||
left:85px;
|
||||
bottom: -60px;
|
||||
animation-duration: 3.5s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.float-3 {
|
||||
width:100px;
|
||||
height:100px;
|
||||
right: 50;
|
||||
top: -10px;
|
||||
animation-duration: 4s;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-stream {
|
||||
.status.light {
|
||||
.status__header .status__meta .status__relative-time {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
|
||||
.display-name span {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
|
||||
.status__content {
|
||||
a.status__content__spoiler-link {
|
||||
background: $ui-primary-color-alt;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-primary-color-alt, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status.light {
|
||||
.detailed-status__display-name .display-name span {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
|
||||
.status__content a.status__content__spoiler-link {
|
||||
background: $ui-primary-color-alt;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-primary-color-alt, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__meta {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.media-spoiler {
|
||||
background: $ui-primary-color-alt;
|
||||
&:hover {
|
||||
background: darken($ui-primary-color-alt, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.pre-header {
|
||||
color: $ui-primary-color-alt;
|
||||
.status__display-name.muted strong {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button {
|
||||
color: $ui-primary-color-alt;
|
||||
svg {
|
||||
path:first-child {
|
||||
fill: $ui-primary-color-alt;
|
||||
}
|
||||
}
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
svg path:first-child {
|
||||
fill: lighten($ui-primary-color-alt, 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-search {
|
||||
background: $simple-background-color;
|
||||
input {
|
||||
color: $ui-primary-color-alt;
|
||||
border: 1px solid $ui-primary-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-anchor {
|
||||
color: $ui-primary-color-alt;
|
||||
&:hover {
|
||||
color: darken($ui-primary-color-alt, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.search-popout {
|
||||
background: $ui-base-color;
|
||||
color: $ui-primary-color;
|
||||
|
||||
h4 {
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
|
||||
em {
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* Octagonal avatars, because ???? */
|
||||
.account__avatar,
|
||||
.account__avatar-overlay-base,
|
||||
.account__header__avatar,
|
||||
.account__avatar-overlay-overlay {
|
||||
border-radius:0px !important;
|
||||
-webkit-clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
|
||||
clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
|
||||
}
|
||||
195
app/javascript/styles/deep-green.scss
Normal file
195
app/javascript/styles/deep-green.scss
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
@import 'application';
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
body {
|
||||
color: #26c7b7;
|
||||
/*フォント指定PCに"ＤＦＰ勘亭流"がない場合は以下の通りに置き換えて下さい*/
|
||||
/*Font designation: If there is no "DFKanTeiRyu-XB-MP-RKSJ-H" on the PC, please replace it as follows*/
|
||||
/*Win → font-family: 'Yu Gothic' !important; */
|
||||
/*Mac → font-family: ''HiraKakuProN-W6'!important; */
|
||||
/*font-family: 'Yu Gothic' !important;*/
|
||||
}
|
||||
.navigation-bar {
|
||||
/*プロフィールを編集*/
|
||||
color:#62cdbf ;
|
||||
}
|
||||
.ui {
|
||||
/*カラムの背景*/
|
||||
background: #0b2226;
|
||||
}
|
||||
.table a {
|
||||
color: #32353e;
|
||||
}
|
||||
.column {
|
||||
width: 380px;
|
||||
font-size: 100% !important;
|
||||
|
||||
}
|
||||
.column > .scrollable {
|
||||
background: #0b2226;
|
||||
}
|
||||
.column-header {
|
||||
/*カラム上*/
|
||||
|
||||
background: #0b2226;
|
||||
}
|
||||
.column-icon {
|
||||
/*カラム右上のアイコン*/
|
||||
color: #d85128;
|
||||
background: #0b2226;
|
||||
}
|
||||
|
||||
.column-settings--section, .setting-toggle{ /*カラムドロップダウン文字*/
|
||||
color: #fff;
|
||||
}
|
||||
.column-settings--outer,.column-link { /*カラムドロップダウン背景ブロック*/
|
||||
background: #025354;
|
||||
}
|
||||
|
||||
.icon-button.active {
|
||||
color: #c1b717;
|
||||
|
||||
}
|
||||
.column-back-button {
|
||||
/*カラム戻る*/
|
||||
|
||||
background: #0b2226;
|
||||
color: #cb1953!important;
|
||||
}
|
||||
.column-icon:hover {
|
||||
color: #dc163b;
|
||||
text-shadow: 0 0 8px #dc163b;
|
||||
}
|
||||
.status__content {
|
||||
/*TLの本文*/
|
||||
|
||||
color: #26c7b7;
|
||||
/*font-size: 12px !important;*/
|
||||
}
|
||||
|
||||
.drawer__tab { /*左上のタブの一番上のアイコン*/
|
||||
color: #26c7b7;
|
||||
|
||||
}
|
||||
.autosuggest-textarea__textarea,
|
||||
.compose-form__modifiers ,.compose-form__buttons,.search__input ,.search__input:focus,.autosuggest-textarea__suggestions,
|
||||
.autosuggest-textarea__textarea{
|
||||
/*ツゥーと入力欄と検索*/
|
||||
/*background: #06665e;*/
|
||||
color: #ffffda ;
|
||||
text-shadow: 0 0 8px #fcfcf6;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #851a24 !important;
|
||||
color: #ffffff;
|
||||
/*font-size: 11px !important;*/
|
||||
}
|
||||
.button:hover {
|
||||
background-color: #fa051c;
|
||||
text-shadow: 0 0 12px #fff;
|
||||
}
|
||||
.button:disabled {
|
||||
background-color: #851a24;
|
||||
}
|
||||
.emoji-dialog {
|
||||
background: #37e8f3;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 0 18px rgba(10, 241, 255, 0.9);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.drawer__inner, .drawer__inner.darker {
|
||||
/*左のタブ*/
|
||||
background: #0b2226;
|
||||
color: #dd4968;
|
||||
}
|
||||
.navigation-bar strong {
|
||||
color: #26c7b7;
|
||||
}
|
||||
|
||||
|
||||
.status__display-name strong ,.muted .status__display-name strong, .notification .display-name__html {
|
||||
/*TLグローバルのディスプレイネーム*/
|
||||
color: #dd4968;
|
||||
}
|
||||
.status .status__display-name ,.account .account__display-name {
|
||||
/*全部の＠ネーム*/
|
||||
color: #cb777d;
|
||||
}
|
||||
.status .status__relative-time { /*時間 */
|
||||
color: #cb777d;
|
||||
}
|
||||
|
||||
.notification__message, .notification__display-name:hover {
|
||||
/*通知のメッセージ*/
|
||||
|
||||
color: #d29a2e;
|
||||
}
|
||||
.muted .status__content p,
|
||||
.muted .status__content a {
|
||||
/*通知本文*/
|
||||
|
||||
color: #189487;
|
||||
}
|
||||
.account {
|
||||
/*通知した文*/
|
||||
color: #26c7b7;
|
||||
}
|
||||
.owner .name .username {
|
||||
display: block;
|
||||
color: #12f607;
|
||||
}
|
||||
.status.light .status__relative-time {
|
||||
color: #12f607;
|
||||
}
|
||||
|
||||
.dropdown__sep { /*...のドロップダウンメニューの区切り線*/
|
||||
background: #000;
|
||||
|
||||
}
|
||||
.dropdown--active .dropdown__content>ul {/*...のドロップダウンメニューの背景*/
|
||||
background: #37e8f3;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 18px rgba(10, 241, 255, 0.9);
|
||||
opacity: 0.9;
|
||||
}
|
||||
.dropdown--active .dropdown__content>ul>li>a {/*...のドロップダウンメニューの文字*/
|
||||
color: #fff;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ---------First Column--------- */
|
||||
|
||||
.drawer__inner__mastodon {
|
||||
background: #0b2226 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="%2326c7b7"/></svg>') no-repeat bottom/100% auto;
|
||||
}
|
||||
|
||||
|
||||
.empty-column-indicator, .detailed-status, .notification, .status, .getting-started, .column-link, .column-subheading, .column-header, .column-header__button, .search__input, .drawer__header, .drawer__tab, .column-back-button, .account__header__content, .account__header, .account__action-bar__tab > span, .account__action-bar__tab strong, .column-header__back-button, .search__icon .fa, .search, .status-card__title, .column-header__collapsible-inner, .setting-toggle__label, .column-settings__section, .column-inline-form, .getting-started__wrapper, .keyboard-shortcuts, .status__content, .account__header__fields dt, .account__header__fields dd, .account__section-headline, .account__section-headline a {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.notification__filter-bar button, .search-results__header {
|
||||
background: #154047;
|
||||
}
|
||||
|
||||
.hashtag:hover, .mention:hover {
|
||||
text-shadow: 0 0 5px #fff;
|
||||
}
|
||||
.status-link:hover {
|
||||
text-shadow: 0 0 5px #8ca6f6;
|
||||
}
|
||||
.search-results__section h5 {
|
||||
background: #091a1c;
|
||||
}
|
||||
|
||||
.account__header__bar, body, .activity-stream--under-tabs, .public-layout .header {
|
||||
background: #0b2226 !important;
|
||||
}
|
||||
|
||||
|
||||
.activity-stream .entry,.public-layout .public-account-bio, .public-layout .hero-widget__text, .directory__tag > a, .public-layout .public-account-header__bar::before, .grid-4 .landing-page__call-to-action, .contact-widget, .box-widget, .table-of-contents {
|
||||
background: transparent !important;
|
||||
}
|
||||
8
app/javascript/styles/fonts/press-start.scss
Normal file
8
app/javascript/styles/fonts/press-start.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
@font-face {
|
||||
font-family: 'is-this-vaporwave';
|
||||
src: local('PressStart2P'),
|
||||
url('../fonts/pressstart2p/PressStart2P-Regular.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
49
app/javascript/styles/forest.scss
Normal file
49
app/javascript/styles/forest.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
/* https://github.com/AstroProfundis/mastodon/edit/lynx/app/javascript/styles/dark-green.scss */
|
||||
|
||||
// Colors
|
||||
$ui-base-color: #285043;
|
||||
$ui-base-lighter-color: #7a9785;
|
||||
$ui-primary-color: #a0d2b1;
|
||||
$ui-secondary-color: #e5eee8;
|
||||
$ui-highlight-color: #5ecc86;
|
||||
|
||||
// Import defaults
|
||||
@import 'application';
|
||||
|
||||
// Based on Witches Town
|
||||
// Columns width
|
||||
.column {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.detailed-status__link .fa-star {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.detailed-status__link .fa-retweet {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
// Hide followers count
|
||||
/* .account__action-bar__tab:nth-child(3) > strong > span,
|
||||
.counter:nth-child(3) > a > .counter-number {
|
||||
visibility: hidden;
|
||||
white-space: nowrap;
|
||||
} */
|
||||
|
||||
.status__content {
|
||||
color: lighten($ui-primary-color, 6%) !important;
|
||||
}
|
||||
|
||||
.status__display-name strong {
|
||||
color: lighten($ui-primary-color, 15%) !important;
|
||||
}
|
||||
|
||||
// Boost icon
|
||||
@function hex-color($color) {
|
||||
@if type-of($color) == 'color' {
|
||||
$color: str-slice(ie-hex-str($color), 4);
|
||||
}
|
||||
@return '%23' + unquote($color)
|
||||
}
|
||||
|
||||
48
app/javascript/styles/fullwidth-media.scss
Normal file
48
app/javascript/styles/fullwidth-media.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
|
||||
.detailed-status > .media-spoiler,
|
||||
.status > .media-spoiler,
|
||||
.status .video-player,
|
||||
.media-gallery,
|
||||
.status .status-card.interactive {
|
||||
margin-top: 20px;
|
||||
margin-left: -68px;
|
||||
width: calc(100% + 80px);
|
||||
}
|
||||
|
||||
.detailed-status > .media-spoiler,
|
||||
.status > .media-spoiler,
|
||||
.video-player {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* If there's no status text, add an extra margin on top */
|
||||
.status .status__info + .media-gallery,
|
||||
.status .status__info + .media-spoiler,
|
||||
.status .status__info + .video-player,
|
||||
.status .status__info + .status-card {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.status__video-player-video {
|
||||
transform: unset;
|
||||
top: unset;
|
||||
}
|
||||
|
||||
.detailed-status .media-gallery {
|
||||
margin-left: -10px;
|
||||
width: calc(100% + 22px);
|
||||
}
|
||||
|
||||
.public-layout .status {
|
||||
.status__content {
|
||||
min-height: 15px;
|
||||
}
|
||||
& > .media-spoiler,
|
||||
.video-player,
|
||||
.media-gallery,
|
||||
.status-card {
|
||||
margin-top: 20px;
|
||||
width: calc(100% + 94px);
|
||||
margin-left: -78px;
|
||||
}
|
||||
}
|
||||
11
app/javascript/styles/geodude.scss
Normal file
11
app/javascript/styles/geodude.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
// http://pokepalettes.com/#jigglypuff
|
||||
$ui-base-color: #8f8571; // darkest #1
|
||||
$ui-highlight-color: #cde0df; // vibrant #3
|
||||
$ui-secondary-color: #413931; // lightest #7
|
||||
$ui-primary-color: #d4e9cf; // lighter #0
|
||||
$ui-primary-color-alt: #cddecd; // darker, for external pages #2
|
||||
|
||||
$about-page-text: lighten($ui-base-color, 50%);
|
||||
|
||||
@import 'application';
|
||||
|
||||
19
app/javascript/styles/jigglypuff.scss
Normal file
19
app/javascript/styles/jigglypuff.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
// http://pokepalettes.com/#jigglypuff
|
||||
$ui-base-color: #6a5262; // darkest #1
|
||||
$ui-highlight-color: #ffcdc5; // vibrant #3
|
||||
$ui-secondary-color: #ffffff; // lightest #7
|
||||
$ui-primary-color: #ffaca4; // lighter #0
|
||||
$ui-primary-color-alt: #a41020; // darker, for external pages #2
|
||||
|
||||
$about-page-text: lighten($ui-base-color, 50%);
|
||||
|
||||
@import 'application';
|
||||
.button:hover {
|
||||
background-color: #e54252;
|
||||
}
|
||||
|
||||
.confirmation-modal .button {
|
||||
background-color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
|
||||
35
app/javascript/styles/luxury.scss
Normal file
35
app/javascript/styles/luxury.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// Dependent colors
|
||||
$black: #000000;
|
||||
|
||||
$classic-base-color: #18121e;
|
||||
$classic-primary-color: #eabd7a;
|
||||
$classic-secondary-color: #d3b379;
|
||||
$classic-highlight-color: #233237;
|
||||
|
||||
$ui-base-color: $classic-base-color !default;
|
||||
$ui-primary-color: $classic-primary-color !default;
|
||||
$ui-secondary-color: $classic-secondary-color !default;
|
||||
|
||||
// Differences
|
||||
$ui-highlight-color: #c79f72;
|
||||
|
||||
$darker-text-color: lighten($ui-primary-color, 20%) !default;
|
||||
$dark-text-color: lighten($ui-primary-color, 12%) !default;
|
||||
$secondary-text-color: lighten($ui-secondary-color, 6%) !default;
|
||||
$highlight-text-color: $classic-highlight-color !default;
|
||||
$action-button-color: #b0a6bb;
|
||||
|
||||
$inverted-text-color: $black !default;
|
||||
$lighter-text-color: darken($ui-base-color, 6%) !default;
|
||||
$light-text-color: darken($ui-primary-color, 40%) !default;
|
||||
|
||||
@import 'application';
|
||||
|
||||
.status__content {
|
||||
color: lighten($ui-primary-color, 6%) !important;
|
||||
}
|
||||
|
||||
.status__display-name strong {
|
||||
color: lighten($ui-primary-color, 15%) !important;
|
||||
}
|
||||
|
||||
9
app/javascript/styles/meemu-default.scss
Normal file
9
app/javascript/styles/meemu-default.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
$classic-base-color: #322a4f;
|
||||
$ui-base-color: $classic-base-color;
|
||||
$ui-base-lighter-color: #885b8c;
|
||||
$ui-primary-color: #9bcbed;
|
||||
$ui-secondary-color: #ba8d98;
|
||||
$ui-highlight-color: #CC7AFF;
|
||||
|
||||
|
||||
@import 'application';
|
||||
123
app/javascript/styles/meemu.scss
Normal file
123
app/javascript/styles/meemu.scss
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
/*$ui-highlight-color: #4286f4;
|
||||
$classic-base-color: #94D0FF;
|
||||
$classic-primary-color: #8795E8;
|
||||
$classic-secondary-color: #FF6AD5;
|
||||
$classic-highlight-color: #2b90d9;*/
|
||||
@import 'fonts/press-start';
|
||||
|
||||
$classic-base-color: #1d146e;
|
||||
$ui-base-color: $classic-base-color;
|
||||
/*$ui-base-lighter-color: #b0c0cf;
|
||||
$ui-primary-color: #9bcbed;
|
||||
$ui-secondary-color: $classic-secondary-color !default;
|
||||
$ui-highlight-color: #2b5fd9;
|
||||
*/
|
||||
|
||||
@mixin gradient-background{
|
||||
background: linear-gradient(to bottom, #fc00ff , #00dbde) !important;
|
||||
}
|
||||
|
||||
@mixin text-shadow{
|
||||
text-shadow: -3px -2px 3px #FF00E0;
|
||||
}
|
||||
@mixin corner-rounded{
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
@mixin opacity-setting{
|
||||
opacity:0.86 !important;
|
||||
}
|
||||
|
||||
.form-container{
|
||||
background: $ui-base-color;
|
||||
opacity: 0.86;
|
||||
}
|
||||
|
||||
.columns-area{
|
||||
/*background: repeating-linear-gradient(
|
||||
45deg,
|
||||
#FF6AD5,
|
||||
#FF6AD5 10px,
|
||||
#000000 10px,
|
||||
#465298 20px
|
||||
);*/
|
||||
@include gradient-background();
|
||||
}
|
||||
/*html{
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
#FF6AD5,
|
||||
#FF6AD5 10px,
|
||||
#000000 10px,
|
||||
#465298 20px
|
||||
) !important;
|
||||
}*/
|
||||
body{
|
||||
@include gradient-background();
|
||||
}
|
||||
|
||||
.admin-wrapper{
|
||||
@include gradient-background();
|
||||
}
|
||||
|
||||
.scrollable, .drawer__inner{
|
||||
opacity: 0.86;
|
||||
@include corner-rounded();
|
||||
}
|
||||
.empty-column-indicator{
|
||||
@include corner-rounded();
|
||||
}
|
||||
.column{
|
||||
@include opacity-setting();
|
||||
@include corner-rounded();
|
||||
}
|
||||
.column-3{
|
||||
@include opacity-setting();
|
||||
}
|
||||
.admin-wrapper{
|
||||
@include opacity-setting();
|
||||
}
|
||||
.content-wrapper{
|
||||
@include opacity-setting();
|
||||
background: $ui-base-color;
|
||||
}
|
||||
.sidebar-wrapper{
|
||||
@include opacity-setting();
|
||||
background: $ui-base-color;
|
||||
}
|
||||
.column-header button{
|
||||
font-family: 'is-this-vaporwave', cursive !important;
|
||||
font-size: 13px !important;
|
||||
text-shadow: -5px -2px 1px #FF00E0;
|
||||
}
|
||||
.getting_started {
|
||||
@include corner-rounded();
|
||||
}
|
||||
.getting_started__wrapper {
|
||||
@include corner-rounded();
|
||||
}
|
||||
|
||||
.drawer__tab{
|
||||
@include text-shadow();
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.drawer__header {
|
||||
@include opacity-setting();
|
||||
}
|
||||
|
||||
.drawer__inner.darker{
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.getting-started__trends h4, .getting-started__trends .trends__item__current, .trends__item__name a {
|
||||
color: #373737 !important;
|
||||
}
|
||||
|
||||
/*.footer {
|
||||
background: $ui-base-color;
|
||||
@include opacity-setting();
|
||||
@include corner-rounded();
|
||||
}*/
|
||||
@import 'application';
|
||||
84
app/javascript/styles/neon-base.scss
Normal file
84
app/javascript/styles/neon-base.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
|
||||
@import 'application';
|
||||
|
||||
/* Wider compose area
|
||||
@media screen and (min-width: 1300px) {
|
||||
.drawer {
|
||||
width: 17%; */ /* Not part of the flex fun */
|
||||
/* max-width: 400px;
|
||||
min-width: 330px;
|
||||
}
|
||||
.layout-multiple-columns .column {
|
||||
flex-grow: 1 !important;
|
||||
max-width: 400px;
|
||||
}
|
||||
}*/
|
||||
|
||||
/* Don't show outline around statuses if we're in
|
||||
* mouse or touch mode (rather than keyboard) */
|
||||
[data-whatinput="mouse"], [data-whatinput="touch"] {
|
||||
.status__content:focus, .status:focus,
|
||||
.status__wrapper:focus, .status__content__text:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Less emphatic show more */
|
||||
.status__content__read-more-button {
|
||||
font-size: 14px;
|
||||
color: $dark-text-color;
|
||||
|
||||
.status__prepend-icon {
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Show a little arrowey thing after the time in a
|
||||
* status to signal that you can click it to see
|
||||
* a detailed view */
|
||||
.status time:after,
|
||||
.detailed-status__datetime span:after {
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
content: "\00a0\00a0\f08e";
|
||||
}
|
||||
|
||||
/* Don't display the elephant mascot (we have our
|
||||
* own, thanks) */
|
||||
/*.drawer__inner__mastodon {
|
||||
display: none;
|
||||
} */
|
||||
|
||||
/* Let the compose area/drawer be short, but
|
||||
* expand if necessary
|
||||
.drawer .drawer__inner {
|
||||
overflow: visible;
|
||||
height:inherit;
|
||||
background-image: none;
|
||||
}
|
||||
.drawer__pager {
|
||||
overflow-y:auto;
|
||||
} */
|
||||
|
||||
/* Put a reasonable background on the single-column compose form */
|
||||
.layout-single-column .compose-panel {
|
||||
height: auto;
|
||||
overflow-y: visible;
|
||||
margin-top: 65px;
|
||||
}
|
||||
|
||||
/* Better distinguish the search bar */
|
||||
.layout-single-column .compose-panel .search {
|
||||
position:relative;
|
||||
top: -55px;
|
||||
margin-bottom: -55px;
|
||||
}
|
||||
|
||||
/* Use display: none instead of visibility:hidden
|
||||
* to hide the suggested follows list on non-mobile */
|
||||
@media screen and (min-width: 630px) {
|
||||
.search-results .trends {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
322
app/javascript/styles/neon-city.scss
Normal file
322
app/javascript/styles/neon-city.scss
Normal file
|
|
@ -0,0 +1,322 @@
|
|||
$ui-base-color: #1b1b1b; // darkest
|
||||
$ui-highlight-color: #a21e8c; // vibrant
|
||||
$ui-secondary-color: #b9b9ba; // lightest
|
||||
$ui-primary-color: #b9b9ba; // lighter
|
||||
$ui-primary-color-alt: #b49cac; // darker, for external pages
|
||||
$ui-link-text-color: #65cfed;
|
||||
|
||||
$about-page-text: lighten($ui-base-color, 50%);
|
||||
|
||||
@import 'neon-base';
|
||||
|
||||
@keyframes floating {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
65% {
|
||||
transform: translate(0, 4px);
|
||||
}
|
||||
to {
|
||||
transform: translate(0, -0);
|
||||
}
|
||||
}
|
||||
|
||||
.about-body .mascot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.muted {
|
||||
.status__content p, .status__content a {
|
||||
color: lighten($ui-base-color, 35%);
|
||||
}
|
||||
|
||||
.status__display-name strong {
|
||||
color: lighten($ui-base-color, 35%);
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form__buttons button.active:last-child {
|
||||
color:$ui-secondary-color;
|
||||
background-color: $ui-highlight-color;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
.screenshot-with-signup {
|
||||
min-height:300px;
|
||||
}
|
||||
|
||||
.container.hero .closed-registrations-message .clock {
|
||||
font-size: 150%;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
.actions .button.button-alternative {
|
||||
background: $ui-highlight-color;
|
||||
color: $ui-primary-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($ui-highlight-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.landing-page .container.links {
|
||||
top: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.landing-page.alternative .header {
|
||||
background-image:url('../themes/neoncity/images/header-cybre-colour.jpg');
|
||||
background-repeat: repeat-x;
|
||||
background-size:contain;
|
||||
height:45vh;
|
||||
width: 100%;
|
||||
position:absolute;
|
||||
z-index: 1;
|
||||
text-align:center;
|
||||
|
||||
display: unset!important;
|
||||
}
|
||||
|
||||
.landing-page.alternative .header img {
|
||||
margin: auto;
|
||||
max-height:45vh;
|
||||
}
|
||||
|
||||
|
||||
.landing-page.alternative .grid {
|
||||
position: relative;
|
||||
z-index:2;
|
||||
margin-top:15vh;
|
||||
}
|
||||
|
||||
.landing-page.alternative .landing-page__hero img {
|
||||
visibility: hidden;
|
||||
max-height:170px;
|
||||
}
|
||||
|
||||
.landing-page.alternative .landing-page__forms {
|
||||
height:auto;
|
||||
}
|
||||
|
||||
.landing-page.alternative .column-1 {
|
||||
display:flex;
|
||||
align-items:flex-end;
|
||||
}
|
||||
|
||||
.landing-page.alternative .column {
|
||||
max-height:initial;
|
||||
}
|
||||
|
||||
.landing-page.alternative .row__mascot {
|
||||
.floats {
|
||||
position:absolute;
|
||||
img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
transition: all 0.1s linear;
|
||||
animation-name: floating;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.float-1 {
|
||||
width:50px;
|
||||
height:50px;
|
||||
bottom:60px;
|
||||
left:110px;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
.float-2 {
|
||||
width:130px;
|
||||
height:130px;
|
||||
left:85px;
|
||||
bottom: -60px;
|
||||
animation-duration: 3.5s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.float-3 {
|
||||
width:100px;
|
||||
height:100px;
|
||||
right: 50;
|
||||
top: -10px;
|
||||
animation-duration: 4s;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-stream {
|
||||
.status.light {
|
||||
.status__header .status__meta .status__relative-time {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
|
||||
.display-name span {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
|
||||
.status__content {
|
||||
a.status__content__spoiler-link {
|
||||
background: $ui-primary-color-alt;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-primary-color-alt, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status.light {
|
||||
.detailed-status__display-name .display-name span {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
|
||||
.status__content a.status__content__spoiler-link {
|
||||
background: $ui-primary-color-alt;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-primary-color-alt, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__meta {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.media-spoiler {
|
||||
background: $ui-primary-color-alt;
|
||||
&:hover {
|
||||
background: darken($ui-primary-color-alt, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.pre-header {
|
||||
color: $ui-primary-color-alt;
|
||||
.status__display-name.muted strong {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button {
|
||||
color: $ui-primary-color-alt;
|
||||
svg {
|
||||
path:first-child {
|
||||
fill: $ui-primary-color-alt;
|
||||
}
|
||||
}
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
svg path:first-child {
|
||||
fill: lighten($ui-primary-color-alt, 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-search {
|
||||
background: $simple-background-color;
|
||||
input {
|
||||
color: $ui-primary-color-alt;
|
||||
border: 1px solid $ui-primary-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-anchor {
|
||||
color: $ui-primary-color-alt;
|
||||
&:hover {
|
||||
color: darken($ui-primary-color-alt, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.search-popout {
|
||||
background: $ui-base-color;
|
||||
color: $ui-primary-color;
|
||||
|
||||
h4 {
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
|
||||
em {
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* customize color and opacity */
|
||||
.status__content a,
|
||||
.status__content a.unhandled-link {
|
||||
color: $ui-link-text-color;
|
||||
}
|
||||
|
||||
.status__content {
|
||||
color: lighten($ui-primary-color, 6%);
|
||||
}
|
||||
|
||||
.status__display-name strong {
|
||||
color: lighten($ui-primary-color, 15%);
|
||||
}
|
||||
|
||||
.column > .scrollable {
|
||||
background-color: rgba(27,27,27,0.9);
|
||||
}
|
||||
|
||||
.drawer__inner, .drawer__inner__mastodon {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
body, .landing-page, .public-layout {
|
||||
background-image: url("../themes/neoncity/images/neon-city.jpg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.layout-single-column .navigation-panel {
|
||||
//background-color: $ui-highlight-color;
|
||||
opacity: 0.8;
|
||||
height: auto;
|
||||
.column-link {
|
||||
background: lighten($ui-base-color, 5%);
|
||||
color:$white;
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 10%);
|
||||
}
|
||||
&.active {
|
||||
background: darken($ui-base-color, 5%);
|
||||
}
|
||||
}
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
opacity: 0.8;
|
||||
.column-link {
|
||||
background: lighten($ui-base-color, 5%);
|
||||
color:$white;
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.landing__grid {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.activity-stream .entry {
|
||||
background-color: rgba(27,27,27,0.9);
|
||||
}
|
||||
|
||||
.account__section-headline {
|
||||
background-color: rgba(17,17,17,0.9);
|
||||
}
|
||||
48
app/javascript/styles/new-year.scss
Normal file
48
app/javascript/styles/new-year.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
/* https://github.com/AstroProfundis/mastodon/blob/lynx/app/javascript/styles/new-year.scss */
|
||||
|
||||
// Colors
|
||||
$ui-base-color: #52221c;
|
||||
$ui-base-lighter-color: #eba458;
|
||||
$ui-primary-color: #dfbbb7;
|
||||
$ui-secondary-color: #f37343;
|
||||
$ui-highlight-color: #dfc657;
|
||||
|
||||
// Import defaults
|
||||
@import 'application';
|
||||
|
||||
// Based on Witches Town
|
||||
// Columns width
|
||||
.column {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.detailed-status__link .fa-star {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.detailed-status__link .fa-retweet {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
// Hide followers count
|
||||
/* .account__action-bar__tab:nth-child(3) > strong > span,
|
||||
.counter:nth-child(3) > a > .counter-number {
|
||||
visibility: hidden;
|
||||
white-space: nowrap;
|
||||
} */
|
||||
|
||||
.status__content {
|
||||
color: lighten($ui-primary-color, 6%) !important;
|
||||
}
|
||||
|
||||
.status__display-name strong {
|
||||
color: lighten($ui-primary-color, 15%) !important;
|
||||
}
|
||||
|
||||
// Boost icon
|
||||
@function hex-color($color) {
|
||||
@if type-of($color) == 'color' {
|
||||
$color: str-slice(ie-hex-str($color), 4);
|
||||
}
|
||||
@return '%23' + unquote($color)
|
||||
}
|
||||
62
app/javascript/styles/nga.scss
Normal file
62
app/javascript/styles/nga.scss
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
/* https://github.com/AstroProfundis/mastodon/blob/lynx/app/javascript/styles/nga.scss */
|
||||
|
||||
// Dependent colors
|
||||
$black: #330e04;
|
||||
$white: #fffffc;
|
||||
|
||||
$classic-base-color: #591804;
|
||||
$classic-secondary-color: #fdedba;
|
||||
$classic-highlight-color: #7f2206;
|
||||
|
||||
// Differences
|
||||
$success-green: #57a96f;
|
||||
|
||||
$base-overlay-background: $white !default;
|
||||
$valid-value-color: $success-green !default;
|
||||
|
||||
$ui-base-color: $classic-secondary-color !default;
|
||||
$ui-base-lighter-color: #f9f7f2;
|
||||
$ui-primary-color: #ffe49b;
|
||||
$ui-secondary-color: $classic-base-color !default;
|
||||
$ui-highlight-color: #591804;
|
||||
|
||||
$primary-text-color: $black !default;
|
||||
$darker-text-color: $classic-base-color !default;
|
||||
$dark-text-color: #281b16;
|
||||
$action-button-color: #a4705e;
|
||||
|
||||
$inverted-text-color: $black !default;
|
||||
$lighter-text-color: $classic-base-color !default;
|
||||
$light-text-color: #986756;
|
||||
|
||||
//Newly added colors
|
||||
$account-background-color: $white !default;
|
||||
|
||||
//Invert darkened and lightened colors
|
||||
@function darken($color, $amount) {
|
||||
@return hsl(hue($color), saturation($color), lightness($color) + $amount);
|
||||
}
|
||||
|
||||
@function lighten($color, $amount) {
|
||||
@return hsl(hue($color), saturation($color), lightness($color) - $amount);
|
||||
}
|
||||
|
||||
// base on mastodon-light theme
|
||||
@import 'application';
|
||||
@import 'mastodon-light/diff';
|
||||
|
||||
.drawer__inner, .column > .scrollable, .column-link, .column-header, .column-header__button, .drawer__header a, .getting-started .column-link, .column-back-button, .account__header__bar, .column-header__back-button {
|
||||
background: #F9F6E8 !important;
|
||||
}
|
||||
|
||||
.directory__tag > a {
|
||||
background: #fef2ce !important;
|
||||
}
|
||||
|
||||
.detailed-status, .detailed-status__action-bar, .getting-started__footer {
|
||||
background: #FEFDF5 !important;
|
||||
}
|
||||
|
||||
.drawer__inner__mastodon {
|
||||
background: #F9F6E8 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="%23fdedba"/></svg>') no-repeat bottom/100% auto !important;
|
||||
}
|
||||
102
app/javascript/styles/pastel-gradient.scss
Normal file
102
app/javascript/styles/pastel-gradient.scss
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
@import 'mastodon-light/variables';
|
||||
@import 'application';
|
||||
@import 'mastodon-light/diff';
|
||||
.navigation-bar {
|
||||
color: #2C2C2C !important;
|
||||
}
|
||||
.navigation-bar strong {
|
||||
color: rgb(24, 24, 24) !important;
|
||||
}
|
||||
|
||||
.column, .scrollable, .status-list, .status__prepend, .detailed-status__action-bar, .missing-indicator {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.empty-column-indicator, .detailed-status, .notification, .status, .getting-started, .column-link, .column-subheading, .column-header, .column-header__button, .search__input, .drawer__header, .drawer__tab, .column-back-button, .account__header__content, .account__header, .account__action-bar__tab > span, .account__action-bar__tab strong, .column-header__back-button, .search__icon .fa, .search, .drawer__inner, .status-card__title, .column-header__collapsible-inner, .setting-toggle__label, .column-settings__section, .column-inline-form, .getting-started__wrapper, .keyboard-shortcuts, .status__content, .account__header__fields dt, .account__header__fields dd, .account__section-headline, .account__section-headline a {
|
||||
background-color: transparent !important;
|
||||
color: #181818 !important;
|
||||
}
|
||||
.search-results__header, .search-results__section, .list-editor, .status__wrapper:focus {
|
||||
background-color: rgb(255,255,255,0.95) !important;
|
||||
}
|
||||
|
||||
.account__header__content, .account__header__display-name {
|
||||
color: #181818 !important;
|
||||
}
|
||||
.account__header > div {
|
||||
background-color: rgb(210,210,236,0.8) !important;
|
||||
}
|
||||
|
||||
.account--follows-info, kbd {
|
||||
background-color: rgb(57,57,57,0.8) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.account-role {
|
||||
color: #181818 !important;
|
||||
border-color: #181818 !important;
|
||||
}
|
||||
|
||||
.hashtag, .mention, .status-link, .search-results__hashtag, .notification__display-name:hover {
|
||||
text-decoration: underline !important;
|
||||
color: #245974 !important;
|
||||
}
|
||||
.display-name__html {
|
||||
color: #082a2a !important;
|
||||
}
|
||||
.status__content__spoiler-link {
|
||||
color: #d2ecd2 !important;
|
||||
background-color: rgb(57,57,57,0.8) !important;
|
||||
}
|
||||
|
||||
.status-card__description {
|
||||
color: #393939 !important;
|
||||
}
|
||||
|
||||
.status-card:hover {
|
||||
background-color: rgb(210,210,236,0.7) !important;
|
||||
}
|
||||
|
||||
.notification__message, .display-name__account, .setting-text {
|
||||
color: #082a2a !important;
|
||||
border-bottom-color: #393939 !important;
|
||||
}
|
||||
|
||||
.react-toggle-track {
|
||||
background-color: #393939 !important;
|
||||
color: #181818 !important;
|
||||
}
|
||||
|
||||
.react-toggle-thumb, .drawer__inner.backdrop {
|
||||
background-color: #d2d2ec !important;
|
||||
border-style: none !important;
|
||||
}
|
||||
|
||||
.column-header__collapsible.collapsed {
|
||||
border-style: none !important;
|
||||
}
|
||||
|
||||
.column-header__collapsible {
|
||||
border-style: solid !important;
|
||||
border-width: 1px !important;
|
||||
border-color: #fff !important;
|
||||
background-color: rgb(210,210,236,0.2) !important;
|
||||
}
|
||||
|
||||
|
||||
.columns-area {
|
||||
background: linear-gradient(#D2D2EC, #D2ECD2) !important;
|
||||
}
|
||||
|
||||
/* ---------First Column--------- */
|
||||
|
||||
.drawer__inner__mastodon {
|
||||
background: #d2e1dd 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="%23F7EFFF"/></svg>') no-repeat bottom/100% auto;
|
||||
}
|
||||
|
||||
body, .activity-stream--under-tabs {
|
||||
background: linear-gradient(#D2D2EC, #D2ECD2) !important;
|
||||
}
|
||||
|
||||
.activity-stream .entry,.public-layout .public-account-bio, .public-layout .hero-widget__text, .directory__tag > a, .public-layout .public-account-header__bar::before, .grid-4 .landing-page__call-to-action, .contact-widget, .box-widget {
|
||||
background: transparent !important;
|
||||
}
|
||||
2152
app/javascript/styles/purple-haze.scss
Normal file
2152
app/javascript/styles/purple-haze.scss
Normal file
File diff suppressed because one or more lines are too long
21
app/javascript/styles/royal-tenenbaums.scss
Normal file
21
app/javascript/styles/royal-tenenbaums.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
// http://www.anothermag.com/art-photography/3586/wes-andersons-colour-palettes
|
||||
$ui-base-color: darken(#8A9DA4, 15%); // darkest #1
|
||||
$ui-highlight-color: lighten(#56bedd, 15%); // vibrant #3
|
||||
$ui-secondary-color: #FAEFD1; // lightest #7
|
||||
$ui-primary-color: #cedce2; // lighter #0
|
||||
$ui-primary-color-alt: #56bedd; // darker, for external pages #2
|
||||
|
||||
@import 'application';
|
||||
|
||||
|
||||
.display-name {
|
||||
color: lighten($ui-highlight-color, 50%);
|
||||
}
|
||||
|
||||
.status__content {
|
||||
color: lighten($ui-primary-color, 6%) !important;
|
||||
}
|
||||
|
||||
.status__display-name strong {
|
||||
color: lighten($ui-primary-color, 15%) !important;
|
||||
}
|
||||
61
app/javascript/styles/sakura.scss
Normal file
61
app/javascript/styles/sakura.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
// Dependent colors
|
||||
$black: #000000;
|
||||
$white: #ffffff;
|
||||
|
||||
$classic-base-color: #000000;
|
||||
$classic-primary-color: #df4a95;
|
||||
$classic-secondary-color: #90b9b0;
|
||||
$classic-highlight-color: #fed2e4;
|
||||
|
||||
// Differences
|
||||
$success-green: lighten(#3c754d, 8%);
|
||||
|
||||
$base-overlay-background: #b2d4cd !default;
|
||||
$valid-value-color: $success-green !default;
|
||||
|
||||
$ui-base-color: $classic-secondary-color !default;
|
||||
$ui-base-lighter-color: #b0c0cf;
|
||||
$ui-primary-color: #fed2e4;
|
||||
$ui-secondary-color: $classic-base-color !default;
|
||||
$ui-highlight-color: #df4a95;
|
||||
|
||||
$primary-text-color: $black !default;
|
||||
$darker-text-color: $classic-base-color !default;
|
||||
$dark-text-color: #444b5d;
|
||||
$action-button-color: #606984;
|
||||
|
||||
$inverted-text-color: $black !default;
|
||||
$lighter-text-color: $classic-base-color !default;
|
||||
$light-text-color: #444b5d;
|
||||
|
||||
//Newly added colors
|
||||
$account-background-color: #b2d4cd !default;
|
||||
|
||||
//Invert darkened and lightened colors
|
||||
@function darken($color, $amount) {
|
||||
@return hsl(hue($color), saturation($color), lightness($color) + $amount);
|
||||
}
|
||||
|
||||
@function lighten($color, $amount) {
|
||||
@return hsl(hue($color), saturation($color), lightness($color) - $amount);
|
||||
}
|
||||
|
||||
|
||||
@import 'application';
|
||||
@import 'mastodon-light/diff';
|
||||
|
||||
.drawer__inner, .column > .scrollable, .column-link, .column-header, .column-header__button, .drawer__header a, .getting-started .column-link, .column-back-button, .account__header__bar, .column-header__back-button {
|
||||
background: #D5E5E2 !important;
|
||||
}
|
||||
|
||||
.directory__tag > a {
|
||||
background: #9dc1b9 !important;
|
||||
}
|
||||
|
||||
.detailed-status, .detailed-status__action-bar, .getting-started__footer {
|
||||
background: #ECF1F0 !important;
|
||||
}
|
||||
|
||||
.drawer__inner__mastodon {
|
||||
background: #D5E5E2 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="%23a3c5bd"/></svg>') no-repeat bottom/100% auto !important;
|
||||
}
|
||||
896
app/javascript/styles/sleeping-town.scss
Normal file
896
app/javascript/styles/sleeping-town.scss
Normal file
|
|
@ -0,0 +1,896 @@
|
|||
/* https://github.com/mstdn/mastodon/blob/master/app/javascript/styles/sleepingtown.scss */
|
||||
// ==========================================================================
|
||||
//
|
||||
// Name: UI Color Palette
|
||||
// Description: The color palette of material design.
|
||||
// Version: 2.3.1
|
||||
//
|
||||
// Author: Denis Malinochkin
|
||||
// Git: https://github.com/mrmlnc/material-color
|
||||
//
|
||||
// twitter: @mrmlnc
|
||||
//
|
||||
// ==========================================================================
|
||||
|
||||
|
||||
//
|
||||
// List of base colors
|
||||
//
|
||||
|
||||
// $clr-red
|
||||
// $clr-pink
|
||||
// $clr-purple
|
||||
// $clr-deep-purple
|
||||
// $clr-indigo
|
||||
// $clr-blue
|
||||
// $clr-light-blue
|
||||
// $clr-cyan
|
||||
// $clr-teal
|
||||
// $clr-green
|
||||
// $clr-light-green
|
||||
// $clr-lime
|
||||
// $clr-yellow
|
||||
// $clr-amber
|
||||
// $clr-orange
|
||||
// $clr-deep-orange
|
||||
// $clr-brown
|
||||
// $clr-grey
|
||||
// $clr-blue-grey
|
||||
// $clr-black
|
||||
// $clr-white
|
||||
|
||||
|
||||
//
|
||||
// Red
|
||||
//
|
||||
|
||||
$clr-red-list: (
|
||||
"base": #f44336,
|
||||
"50": #ffebee,
|
||||
"100": #ffcdd2,
|
||||
"200": #ef9a9a,
|
||||
"300": #e57373,
|
||||
"400": #ef5350,
|
||||
"500": #f44336,
|
||||
"600": #e53935,
|
||||
"700": #d32f2f,
|
||||
"800": #c62828,
|
||||
"900": #b71c1c,
|
||||
"a100": #ff8a80,
|
||||
"a200": #ff5252,
|
||||
"a400": #ff1744,
|
||||
"a700": #d50000
|
||||
);
|
||||
|
||||
$clr-red: map-get($clr-red-list, "base");
|
||||
|
||||
$clr-red-50: map-get($clr-red-list, "50");
|
||||
$clr-red-100: map-get($clr-red-list, "100");
|
||||
$clr-red-200: map-get($clr-red-list, "200");
|
||||
$clr-red-300: map-get($clr-red-list, "300");
|
||||
$clr-red-400: map-get($clr-red-list, "400");
|
||||
$clr-red-500: map-get($clr-red-list, "500");
|
||||
$clr-red-600: map-get($clr-red-list, "600");
|
||||
$clr-red-700: map-get($clr-red-list, "700");
|
||||
$clr-red-800: map-get($clr-red-list, "800");
|
||||
$clr-red-900: map-get($clr-red-list, "900");
|
||||
$clr-red-a100: map-get($clr-red-list, "a100");
|
||||
$clr-red-a200: map-get($clr-red-list, "a200");
|
||||
$clr-red-a400: map-get($clr-red-list, "a400");
|
||||
$clr-red-a700: map-get($clr-red-list, "a700");
|
||||
|
||||
|
||||
//
|
||||
// Pink
|
||||
//
|
||||
|
||||
$clr-pink-list: (
|
||||
"base": #e91e63,
|
||||
"50": #fce4ec,
|
||||
"100": #f8bbd0,
|
||||
"200": #f48fb1,
|
||||
"300": #f06292,
|
||||
"400": #ec407a,
|
||||
"500": #e91e63,
|
||||
"600": #d81b60,
|
||||
"700": #c2185b,
|
||||
"800": #ad1457,
|
||||
"900": #880e4f,
|
||||
"a100": #ff80ab,
|
||||
"a200": #ff4081,
|
||||
"a400": #f50057,
|
||||
"a700": #c51162
|
||||
);
|
||||
|
||||
$clr-pink: map-get($clr-pink-list, "base");
|
||||
|
||||
$clr-pink-50: map-get($clr-pink-list, "50");
|
||||
$clr-pink-100: map-get($clr-pink-list, "100");
|
||||
$clr-pink-200: map-get($clr-pink-list, "200");
|
||||
$clr-pink-300: map-get($clr-pink-list, "300");
|
||||
$clr-pink-400: map-get($clr-pink-list, "400");
|
||||
$clr-pink-500: map-get($clr-pink-list, "500");
|
||||
$clr-pink-600: map-get($clr-pink-list, "600");
|
||||
$clr-pink-700: map-get($clr-pink-list, "700");
|
||||
$clr-pink-800: map-get($clr-pink-list, "800");
|
||||
$clr-pink-900: map-get($clr-pink-list, "900");
|
||||
$clr-pink-a100: map-get($clr-pink-list, "a100");
|
||||
$clr-pink-a200: map-get($clr-pink-list, "a200");
|
||||
$clr-pink-a400: map-get($clr-pink-list, "a400");
|
||||
$clr-pink-a700: map-get($clr-pink-list, "a700");
|
||||
|
||||
|
||||
//
|
||||
// Purple
|
||||
//
|
||||
|
||||
$clr-purple-list: (
|
||||
"base": #9c27b0,
|
||||
"50": #f3e5f5,
|
||||
"100": #e1bee7,
|
||||
"200": #ce93d8,
|
||||
"300": #ba68c8,
|
||||
"400": #ab47bc,
|
||||
"500": #9c27b0,
|
||||
"600": #8e24aa,
|
||||
"700": #7b1fa2,
|
||||
"800": #6a1b9a,
|
||||
"900": #4a148c,
|
||||
"a100": #ea80fc,
|
||||
"a200": #e040fb,
|
||||
"a400": #d500f9,
|
||||
"a700": #aa00ff
|
||||
);
|
||||
|
||||
$clr-purple: map-get($clr-purple-list, "base");
|
||||
|
||||
$clr-purple-50: map-get($clr-purple-list, "50");
|
||||
$clr-purple-100: map-get($clr-purple-list, "100");
|
||||
$clr-purple-200: map-get($clr-purple-list, "200");
|
||||
$clr-purple-300: map-get($clr-purple-list, "300");
|
||||
$clr-purple-400: map-get($clr-purple-list, "400");
|
||||
$clr-purple-500: map-get($clr-purple-list, "500");
|
||||
$clr-purple-600: map-get($clr-purple-list, "600");
|
||||
$clr-purple-700: map-get($clr-purple-list, "700");
|
||||
$clr-purple-800: map-get($clr-purple-list, "800");
|
||||
$clr-purple-900: map-get($clr-purple-list, "900");
|
||||
$clr-purple-a100: map-get($clr-purple-list, "a100");
|
||||
$clr-purple-a200: map-get($clr-purple-list, "a200");
|
||||
$clr-purple-a400: map-get($clr-purple-list, "a400");
|
||||
$clr-purple-a700: map-get($clr-purple-list, "a700");
|
||||
|
||||
|
||||
//
|
||||
// Deep purple
|
||||
//
|
||||
|
||||
$clr-deep-purple-list: (
|
||||
"base": #673ab7,
|
||||
"50": #ede7f6,
|
||||
"100": #d1c4e9,
|
||||
"200": #b39ddb,
|
||||
"300": #9575cd,
|
||||
"400": #7e57c2,
|
||||
"500": #673ab7,
|
||||
"600": #5e35b1,
|
||||
"700": #512da8,
|
||||
"800": #4527a0,
|
||||
"900": #311b92,
|
||||
"a100": #b388ff,
|
||||
"a200": #7c4dff,
|
||||
"a400": #651fff,
|
||||
"a700": #6200ea
|
||||
);
|
||||
|
||||
$clr-deep-purple: map-get($clr-deep-purple-list, "base");
|
||||
|
||||
$clr-deep-purple-50: map-get($clr-deep-purple-list, "50");
|
||||
$clr-deep-purple-100: map-get($clr-deep-purple-list, "100");
|
||||
$clr-deep-purple-200: map-get($clr-deep-purple-list, "200");
|
||||
$clr-deep-purple-300: map-get($clr-deep-purple-list, "300");
|
||||
$clr-deep-purple-400: map-get($clr-deep-purple-list, "400");
|
||||
$clr-deep-purple-500: map-get($clr-deep-purple-list, "500");
|
||||
$clr-deep-purple-600: map-get($clr-deep-purple-list, "600");
|
||||
$clr-deep-purple-700: map-get($clr-deep-purple-list, "700");
|
||||
$clr-deep-purple-800: map-get($clr-deep-purple-list, "800");
|
||||
$clr-deep-purple-900: map-get($clr-deep-purple-list, "900");
|
||||
$clr-deep-purple-a100: map-get($clr-deep-purple-list, "a100");
|
||||
$clr-deep-purple-a200: map-get($clr-deep-purple-list, "a200");
|
||||
$clr-deep-purple-a400: map-get($clr-deep-purple-list, "a400");
|
||||
$clr-deep-purple-a700: map-get($clr-deep-purple-list, "a700");
|
||||
|
||||
|
||||
//
|
||||
// Indigo
|
||||
//
|
||||
|
||||
$clr-indigo-list: (
|
||||
"base": #3f51b5,
|
||||
"50": #e8eaf6,
|
||||
"100": #c5cae9,
|
||||
"200": #9fa8da,
|
||||
"300": #7986cb,
|
||||
"400": #5c6bc0,
|
||||
"500": #3f51b5,
|
||||
"600": #3949ab,
|
||||
"700": #303f9f,
|
||||
"800": #283593,
|
||||
"900": #1a237e,
|
||||
"a100": #8c9eff,
|
||||
"a200": #536dfe,
|
||||
"a400": #3d5afe,
|
||||
"a700": #304ffe
|
||||
);
|
||||
|
||||
$clr-indigo: map-get($clr-indigo-list, "base");
|
||||
|
||||
$clr-indigo-50: map-get($clr-indigo-list, "50");
|
||||
$clr-indigo-100: map-get($clr-indigo-list, "100");
|
||||
$clr-indigo-200: map-get($clr-indigo-list, "200");
|
||||
$clr-indigo-300: map-get($clr-indigo-list, "300");
|
||||
$clr-indigo-400: map-get($clr-indigo-list, "400");
|
||||
$clr-indigo-500: map-get($clr-indigo-list, "500");
|
||||
$clr-indigo-600: map-get($clr-indigo-list, "600");
|
||||
$clr-indigo-700: map-get($clr-indigo-list, "700");
|
||||
$clr-indigo-800: map-get($clr-indigo-list, "800");
|
||||
$clr-indigo-900: map-get($clr-indigo-list, "900");
|
||||
$clr-indigo-a100: map-get($clr-indigo-list, "a100");
|
||||
$clr-indigo-a200: map-get($clr-indigo-list, "a200");
|
||||
$clr-indigo-a400: map-get($clr-indigo-list, "a400");
|
||||
$clr-indigo-a700: map-get($clr-indigo-list, "a700");
|
||||
|
||||
|
||||
//
|
||||
// Blue
|
||||
//
|
||||
|
||||
$clr-blue-list: (
|
||||
"base": #2196f3,
|
||||
"50": #e3f2fd,
|
||||
"100": #bbdefb,
|
||||
"200": #90caf9,
|
||||
"300": #64b5f6,
|
||||
"400": #42a5f5,
|
||||
"500": #2196f3,
|
||||
"600": #1e88e5,
|
||||
"700": #1976d2,
|
||||
"800": #1565c0,
|
||||
"900": #0d47a1,
|
||||
"a100": #82b1ff,
|
||||
"a200": #448aff,
|
||||
"a400": #2979ff,
|
||||
"a700": #2962ff
|
||||
);
|
||||
|
||||
$clr-blue: map-get($clr-blue-list, "base");
|
||||
|
||||
$clr-blue-50: map-get($clr-blue-list, "50");
|
||||
$clr-blue-100: map-get($clr-blue-list, "100");
|
||||
$clr-blue-200: map-get($clr-blue-list, "200");
|
||||
$clr-blue-300: map-get($clr-blue-list, "300");
|
||||
$clr-blue-400: map-get($clr-blue-list, "400");
|
||||
$clr-blue-500: map-get($clr-blue-list, "500");
|
||||
$clr-blue-600: map-get($clr-blue-list, "600");
|
||||
$clr-blue-700: map-get($clr-blue-list, "700");
|
||||
$clr-blue-800: map-get($clr-blue-list, "800");
|
||||
$clr-blue-900: map-get($clr-blue-list, "900");
|
||||
$clr-blue-a100: map-get($clr-blue-list, "a100");
|
||||
$clr-blue-a200: map-get($clr-blue-list, "a200");
|
||||
$clr-blue-a400: map-get($clr-blue-list, "a400");
|
||||
$clr-blue-a700: map-get($clr-blue-list, "a700");
|
||||
|
||||
|
||||
//
|
||||
// Light Blue
|
||||
//
|
||||
|
||||
$clr-light-blue-list: (
|
||||
"base": #03a9f4,
|
||||
"50": #e1f5fe,
|
||||
"100": #b3e5fc,
|
||||
"200": #81d4fa,
|
||||
"300": #4fc3f7,
|
||||
"400": #29b6f6,
|
||||
"500": #03a9f4,
|
||||
"600": #039be5,
|
||||
"700": #0288d1,
|
||||
"800": #0277bd,
|
||||
"900": #01579b,
|
||||
"a100": #80d8ff,
|
||||
"a200": #40c4ff,
|
||||
"a400": #00b0ff,
|
||||
"a700": #0091ea
|
||||
);
|
||||
|
||||
$clr-light-blue: map-get($clr-light-blue-list, "base");
|
||||
|
||||
$clr-light-blue-50: map-get($clr-light-blue-list, "50");
|
||||
$clr-light-blue-100: map-get($clr-light-blue-list, "100");
|
||||
$clr-light-blue-200: map-get($clr-light-blue-list, "200");
|
||||
$clr-light-blue-300: map-get($clr-light-blue-list, "300");
|
||||
$clr-light-blue-400: map-get($clr-light-blue-list, "400");
|
||||
$clr-light-blue-500: map-get($clr-light-blue-list, "500");
|
||||
$clr-light-blue-600: map-get($clr-light-blue-list, "600");
|
||||
$clr-light-blue-700: map-get($clr-light-blue-list, "700");
|
||||
$clr-light-blue-800: map-get($clr-light-blue-list, "800");
|
||||
$clr-light-blue-900: map-get($clr-light-blue-list, "900");
|
||||
$clr-light-blue-a100: map-get($clr-light-blue-list, "a100");
|
||||
$clr-light-blue-a200: map-get($clr-light-blue-list, "a200");
|
||||
$clr-light-blue-a400: map-get($clr-light-blue-list, "a400");
|
||||
$clr-light-blue-a700: map-get($clr-light-blue-list, "a700");
|
||||
|
||||
|
||||
//
|
||||
// Cyan
|
||||
//
|
||||
|
||||
$clr-cyan-list: (
|
||||
"base": #00bcd4,
|
||||
"50": #e0f7fa,
|
||||
"100": #b2ebf2,
|
||||
"200": #80deea,
|
||||
"300": #4dd0e1,
|
||||
"400": #26c6da,
|
||||
"500": #00bcd4,
|
||||
"600": #00acc1,
|
||||
"700": #0097a7,
|
||||
"800": #00838f,
|
||||
"900": #006064,
|
||||
"a100": #84ffff,
|
||||
"a200": #18ffff,
|
||||
"a400": #00e5ff,
|
||||
"a700": #00b8d4
|
||||
);
|
||||
|
||||
$clr-cyan: map-get($clr-cyan-list, "base");
|
||||
|
||||
$clr-cyan-50: map-get($clr-cyan-list, "50");
|
||||
$clr-cyan-100: map-get($clr-cyan-list, "100");
|
||||
$clr-cyan-200: map-get($clr-cyan-list, "200");
|
||||
$clr-cyan-300: map-get($clr-cyan-list, "300");
|
||||
$clr-cyan-400: map-get($clr-cyan-list, "400");
|
||||
$clr-cyan-500: map-get($clr-cyan-list, "500");
|
||||
$clr-cyan-600: map-get($clr-cyan-list, "600");
|
||||
$clr-cyan-700: map-get($clr-cyan-list, "700");
|
||||
$clr-cyan-800: map-get($clr-cyan-list, "800");
|
||||
$clr-cyan-900: map-get($clr-cyan-list, "900");
|
||||
$clr-cyan-a100: map-get($clr-cyan-list, "a100");
|
||||
$clr-cyan-a200: map-get($clr-cyan-list, "a200");
|
||||
$clr-cyan-a400: map-get($clr-cyan-list, "a400");
|
||||
$clr-cyan-a700: map-get($clr-cyan-list, "a700");
|
||||
|
||||
|
||||
//
|
||||
// Teal
|
||||
//
|
||||
|
||||
$clr-teal-list: (
|
||||
"base": #009688,
|
||||
"50": #e0f2f1,
|
||||
"100": #b2dfdb,
|
||||
"200": #80cbc4,
|
||||
"300": #4db6ac,
|
||||
"400": #26a69a,
|
||||
"500": #009688,
|
||||
"600": #00897b,
|
||||
"700": #00796b,
|
||||
"800": #00695c,
|
||||
"900": #004d40,
|
||||
"a100": #a7ffeb,
|
||||
"a200": #64ffda,
|
||||
"a400": #1de9b6,
|
||||
"a700": #00bfa5
|
||||
);
|
||||
|
||||
$clr-teal: map-get($clr-teal-list, "base");
|
||||
|
||||
$clr-teal-50: map-get($clr-teal-list, "50");
|
||||
$clr-teal-100: map-get($clr-teal-list, "100");
|
||||
$clr-teal-200: map-get($clr-teal-list, "200");
|
||||
$clr-teal-300: map-get($clr-teal-list, "300");
|
||||
$clr-teal-400: map-get($clr-teal-list, "400");
|
||||
$clr-teal-500: map-get($clr-teal-list, "500");
|
||||
$clr-teal-600: map-get($clr-teal-list, "600");
|
||||
$clr-teal-700: map-get($clr-teal-list, "700");
|
||||
$clr-teal-800: map-get($clr-teal-list, "800");
|
||||
$clr-teal-900: map-get($clr-teal-list, "900");
|
||||
$clr-teal-a100: map-get($clr-teal-list, "a100");
|
||||
$clr-teal-a200: map-get($clr-teal-list, "a200");
|
||||
$clr-teal-a400: map-get($clr-teal-list, "a400");
|
||||
$clr-teal-a700: map-get($clr-teal-list, "a700");
|
||||
|
||||
|
||||
//
|
||||
// Green
|
||||
//
|
||||
|
||||
$clr-green-list: (
|
||||
"base": #4caf50,
|
||||
"50": #e8f5e9,
|
||||
"100": #c8e6c9,
|
||||
"200": #a5d6a7,
|
||||
"300": #81c784,
|
||||
"400": #66bb6a,
|
||||
"500": #4caf50,
|
||||
"600": #43a047,
|
||||
"700": #388e3c,
|
||||
"800": #2e7d32,
|
||||
"900": #1b5e20,
|
||||
"a100": #b9f6ca,
|
||||
"a200": #69f0ae,
|
||||
"a400": #00e676,
|
||||
"a700": #00c853
|
||||
);
|
||||
|
||||
$clr-green: map-get($clr-green-list, "base");
|
||||
|
||||
$clr-green-50: map-get($clr-green-list, "50");
|
||||
$clr-green-100: map-get($clr-green-list, "100");
|
||||
$clr-green-200: map-get($clr-green-list, "200");
|
||||
$clr-green-300: map-get($clr-green-list, "300");
|
||||
$clr-green-400: map-get($clr-green-list, "400");
|
||||
$clr-green-500: map-get($clr-green-list, "500");
|
||||
$clr-green-600: map-get($clr-green-list, "600");
|
||||
$clr-green-700: map-get($clr-green-list, "700");
|
||||
$clr-green-800: map-get($clr-green-list, "800");
|
||||
$clr-green-900: map-get($clr-green-list, "900");
|
||||
$clr-green-a100: map-get($clr-green-list, "a100");
|
||||
$clr-green-a200: map-get($clr-green-list, "a200");
|
||||
$clr-green-a400: map-get($clr-green-list, "a400");
|
||||
$clr-green-a700: map-get($clr-green-list, "a700");
|
||||
|
||||
|
||||
//
|
||||
// Light green
|
||||
//
|
||||
|
||||
$clr-light-green-list: (
|
||||
"base": #8bc34a,
|
||||
"50": #f1f8e9,
|
||||
"100": #dcedc8,
|
||||
"200": #c5e1a5,
|
||||
"300": #aed581,
|
||||
"400": #9ccc65,
|
||||
"500": #8bc34a,
|
||||
"600": #7cb342,
|
||||
"700": #689f38,
|
||||
"800": #558b2f,
|
||||
"900": #33691e,
|
||||
"a100": #ccff90,
|
||||
"a200": #b2ff59,
|
||||
"a400": #76ff03,
|
||||
"a700": #64dd17
|
||||
);
|
||||
|
||||
$clr-light-green: map-get($clr-light-green-list, "base");
|
||||
|
||||
$clr-light-green-50: map-get($clr-light-green-list, "50");
|
||||
$clr-light-green-100: map-get($clr-light-green-list, "100");
|
||||
$clr-light-green-200: map-get($clr-light-green-list, "200");
|
||||
$clr-light-green-300: map-get($clr-light-green-list, "300");
|
||||
$clr-light-green-400: map-get($clr-light-green-list, "400");
|
||||
$clr-light-green-500: map-get($clr-light-green-list, "500");
|
||||
$clr-light-green-600: map-get($clr-light-green-list, "600");
|
||||
$clr-light-green-700: map-get($clr-light-green-list, "700");
|
||||
$clr-light-green-800: map-get($clr-light-green-list, "800");
|
||||
$clr-light-green-900: map-get($clr-light-green-list, "900");
|
||||
$clr-light-green-a100: map-get($clr-light-green-list, "a100");
|
||||
$clr-light-green-a200: map-get($clr-light-green-list, "a200");
|
||||
$clr-light-green-a400: map-get($clr-light-green-list, "a400");
|
||||
$clr-light-green-a700: map-get($clr-light-green-list, "a700");
|
||||
|
||||
|
||||
//
|
||||
// Lime
|
||||
//
|
||||
|
||||
$clr-lime-list: (
|
||||
"base": #cddc39,
|
||||
"50": #f9fbe7,
|
||||
"100": #f0f4c3,
|
||||
"200": #e6ee9c,
|
||||
"300": #dce775,
|
||||
"400": #d4e157,
|
||||
"500": #cddc39,
|
||||
"600": #c0ca33,
|
||||
"700": #afb42b,
|
||||
"800": #9e9d24,
|
||||
"900": #827717,
|
||||
"a100": #f4ff81,
|
||||
"a200": #eeff41,
|
||||
"a400": #c6ff00,
|
||||
"a700": #aeea00
|
||||
);
|
||||
|
||||
$clr-lime: map-get($clr-lime-list, "base");
|
||||
|
||||
$clr-lime-50: map-get($clr-lime-list, "50");
|
||||
$clr-lime-100: map-get($clr-lime-list, "100");
|
||||
$clr-lime-200: map-get($clr-lime-list, "200");
|
||||
$clr-lime-300: map-get($clr-lime-list, "300");
|
||||
$clr-lime-400: map-get($clr-lime-list, "400");
|
||||
$clr-lime-500: map-get($clr-lime-list, "500");
|
||||
$clr-lime-600: map-get($clr-lime-list, "600");
|
||||
$clr-lime-700: map-get($clr-lime-list, "700");
|
||||
$clr-lime-800: map-get($clr-lime-list, "800");
|
||||
$clr-lime-900: map-get($clr-lime-list, "900");
|
||||
$clr-lime-a100: map-get($clr-lime-list, "a100");
|
||||
$clr-lime-a200: map-get($clr-lime-list, "a200");
|
||||
$clr-lime-a400: map-get($clr-lime-list, "a400");
|
||||
$clr-lime-a700: map-get($clr-lime-list, "a700");
|
||||
|
||||
|
||||
//
|
||||
// Yellow
|
||||
//
|
||||
|
||||
$clr-yellow-list: (
|
||||
"base": #ffeb3b,
|
||||
"50": #fffde7,
|
||||
"100": #fff9c4,
|
||||
"200": #fff59d,
|
||||
"300": #fff176,
|
||||
"400": #ffee58,
|
||||
"500": #ffeb3b,
|
||||
"600": #fdd835,
|
||||
"700": #fbc02d,
|
||||
"800": #f9a825,
|
||||
"900": #f57f17,
|
||||
"a100": #ffff8d,
|
||||
"a200": #ffff00,
|
||||
"a400": #ffea00,
|
||||
"a700": #ffd600
|
||||
);
|
||||
|
||||
$clr-yellow: map-get($clr-yellow-list, "base");
|
||||
|
||||
$clr-yellow-50: map-get($clr-yellow-list, "50");
|
||||
$clr-yellow-100: map-get($clr-yellow-list, "100");
|
||||
$clr-yellow-200: map-get($clr-yellow-list, "200");
|
||||
$clr-yellow-300: map-get($clr-yellow-list, "300");
|
||||
$clr-yellow-400: map-get($clr-yellow-list, "400");
|
||||
$clr-yellow-500: map-get($clr-yellow-list, "500");
|
||||
$clr-yellow-600: map-get($clr-yellow-list, "600");
|
||||
$clr-yellow-700: map-get($clr-yellow-list, "700");
|
||||
$clr-yellow-800: map-get($clr-yellow-list, "800");
|
||||
$clr-yellow-900: map-get($clr-yellow-list, "900");
|
||||
$clr-yellow-a100: map-get($clr-yellow-list, "a100");
|
||||
$clr-yellow-a200: map-get($clr-yellow-list, "a200");
|
||||
$clr-yellow-a400: map-get($clr-yellow-list, "a400");
|
||||
$clr-yellow-a700: map-get($clr-yellow-list, "a700");
|
||||
|
||||
|
||||
//
|
||||
// amber
|
||||
//
|
||||
|
||||
$clr-amber-list: (
|
||||
"base": #ffc107,
|
||||
"50": #fff8e1,
|
||||
"100": #ffecb3,
|
||||
"200": #ffe082,
|
||||
"300": #ffd54f,
|
||||
"400": #ffca28,
|
||||
"500": #ffc107,
|
||||
"600": #ffb300,
|
||||
"700": #ffa000,
|
||||
"800": #ff8f00,
|
||||
"900": #ff6f00,
|
||||
"a100": #ffe57f,
|
||||
"a200": #ffd740,
|
||||
"a400": #ffc400,
|
||||
"a700": #ffab00
|
||||
);
|
||||
|
||||
$clr-amber: map-get($clr-amber-list, "base");
|
||||
|
||||
$clr-amber-50: map-get($clr-amber-list, "50");
|
||||
$clr-amber-100: map-get($clr-amber-list, "100");
|
||||
$clr-amber-200: map-get($clr-amber-list, "200");
|
||||
$clr-amber-300: map-get($clr-amber-list, "300");
|
||||
$clr-amber-400: map-get($clr-amber-list, "400");
|
||||
$clr-amber-500: map-get($clr-amber-list, "500");
|
||||
$clr-amber-600: map-get($clr-amber-list, "600");
|
||||
$clr-amber-700: map-get($clr-amber-list, "700");
|
||||
$clr-amber-800: map-get($clr-amber-list, "800");
|
||||
$clr-amber-900: map-get($clr-amber-list, "900");
|
||||
$clr-amber-a100: map-get($clr-amber-list, "a100");
|
||||
$clr-amber-a200: map-get($clr-amber-list, "a200");
|
||||
$clr-amber-a400: map-get($clr-amber-list, "a400");
|
||||
$clr-amber-a700: map-get($clr-amber-list, "a700");
|
||||
|
||||
|
||||
//
|
||||
// Orange
|
||||
//
|
||||
|
||||
$clr-orange-list: (
|
||||
"base": #ff9800,
|
||||
"50": #fff3e0,
|
||||
"100": #ffe0b2,
|
||||
"200": #ffcc80,
|
||||
"300": #ffb74d,
|
||||
"400": #ffa726,
|
||||
"500": #ff9800,
|
||||
"600": #fb8c00,
|
||||
"700": #f57c00,
|
||||
"800": #ef6c00,
|
||||
"900": #e65100,
|
||||
"a100": #ffd180,
|
||||
"a200": #ffab40,
|
||||
"a400": #ff9100,
|
||||
"a700": #ff6d00
|
||||
);
|
||||
|
||||
$clr-orange: map-get($clr-orange-list, "base");
|
||||
|
||||
$clr-orange-50: map-get($clr-orange-list, "50");
|
||||
$clr-orange-100: map-get($clr-orange-list, "100");
|
||||
$clr-orange-200: map-get($clr-orange-list, "200");
|
||||
$clr-orange-300: map-get($clr-orange-list, "300");
|
||||
$clr-orange-400: map-get($clr-orange-list, "400");
|
||||
$clr-orange-500: map-get($clr-orange-list, "500");
|
||||
$clr-orange-600: map-get($clr-orange-list, "600");
|
||||
$clr-orange-700: map-get($clr-orange-list, "700");
|
||||
$clr-orange-800: map-get($clr-orange-list, "800");
|
||||
$clr-orange-900: map-get($clr-orange-list, "900");
|
||||
$clr-orange-a100: map-get($clr-orange-list, "a100");
|
||||
$clr-orange-a200: map-get($clr-orange-list, "a200");
|
||||
$clr-orange-a400: map-get($clr-orange-list, "a400");
|
||||
$clr-orange-a700: map-get($clr-orange-list, "a700");
|
||||
|
||||
|
||||
//
|
||||
// Deep orange
|
||||
//
|
||||
|
||||
$clr-deep-orange-list: (
|
||||
"base": #ff5722,
|
||||
"50": #fbe9e7,
|
||||
"100": #ffccbc,
|
||||
"200": #ffab91,
|
||||
"300": #ff8a65,
|
||||
"400": #ff7043,
|
||||
"500": #ff5722,
|
||||
"600": #f4511e,
|
||||
"700": #e64a19,
|
||||
"800": #d84315,
|
||||
"900": #bf360c,
|
||||
"a100": #ff9e80,
|
||||
"a200": #ff6e40,
|
||||
"a400": #ff3d00,
|
||||
"a700": #dd2c00
|
||||
);
|
||||
|
||||
$clr-deep-orange: map-get($clr-deep-orange-list, "base");
|
||||
|
||||
$clr-deep-orange-50: map-get($clr-deep-orange-list, "50");
|
||||
$clr-deep-orange-100: map-get($clr-deep-orange-list, "100");
|
||||
$clr-deep-orange-200: map-get($clr-deep-orange-list, "200");
|
||||
$clr-deep-orange-300: map-get($clr-deep-orange-list, "300");
|
||||
$clr-deep-orange-400: map-get($clr-deep-orange-list, "400");
|
||||
$clr-deep-orange-500: map-get($clr-deep-orange-list, "500");
|
||||
$clr-deep-orange-600: map-get($clr-deep-orange-list, "600");
|
||||
$clr-deep-orange-700: map-get($clr-deep-orange-list, "700");
|
||||
$clr-deep-orange-800: map-get($clr-deep-orange-list, "800");
|
||||
$clr-deep-orange-900: map-get($clr-deep-orange-list, "900");
|
||||
$clr-deep-orange-a100: map-get($clr-deep-orange-list, "a100");
|
||||
$clr-deep-orange-a200: map-get($clr-deep-orange-list, "a200");
|
||||
$clr-deep-orange-a400: map-get($clr-deep-orange-list, "a400");
|
||||
$clr-deep-orange-a700: map-get($clr-deep-orange-list, "a700");
|
||||
|
||||
|
||||
//
|
||||
// Brown
|
||||
//
|
||||
|
||||
$clr-brown-list: (
|
||||
"base": #795548,
|
||||
"50": #efebe9,
|
||||
"100": #d7ccc8,
|
||||
"200": #bcaaa4,
|
||||
"300": #a1887f,
|
||||
"400": #8d6e63,
|
||||
"500": #795548,
|
||||
"600": #6d4c41,
|
||||
"700": #5d4037,
|
||||
"800": #4e342e,
|
||||
"900": #3e2723,
|
||||
);
|
||||
|
||||
$clr-brown: map-get($clr-brown-list, "base");
|
||||
|
||||
$clr-brown-50: map-get($clr-brown-list, "50");
|
||||
$clr-brown-100: map-get($clr-brown-list, "100");
|
||||
$clr-brown-200: map-get($clr-brown-list, "200");
|
||||
$clr-brown-300: map-get($clr-brown-list, "300");
|
||||
$clr-brown-400: map-get($clr-brown-list, "400");
|
||||
$clr-brown-500: map-get($clr-brown-list, "500");
|
||||
$clr-brown-600: map-get($clr-brown-list, "600");
|
||||
$clr-brown-700: map-get($clr-brown-list, "700");
|
||||
$clr-brown-800: map-get($clr-brown-list, "800");
|
||||
$clr-brown-900: map-get($clr-brown-list, "900");
|
||||
|
||||
|
||||
//
|
||||
// Grey
|
||||
//
|
||||
|
||||
$clr-grey-list: (
|
||||
"base": #9e9e9e,
|
||||
"50": #fafafa,
|
||||
"100": #f5f5f5,
|
||||
"200": #eeeeee,
|
||||
"300": #e0e0e0,
|
||||
"400": #bdbdbd,
|
||||
"500": #9e9e9e,
|
||||
"600": #757575,
|
||||
"700": #616161,
|
||||
"800": #424242,
|
||||
"900": #212121,
|
||||
);
|
||||
|
||||
$clr-grey: map-get($clr-grey-list, "base");
|
||||
|
||||
$clr-grey-50: map-get($clr-grey-list, "50");
|
||||
$clr-grey-100: map-get($clr-grey-list, "100");
|
||||
$clr-grey-200: map-get($clr-grey-list, "200");
|
||||
$clr-grey-300: map-get($clr-grey-list, "300");
|
||||
$clr-grey-400: map-get($clr-grey-list, "400");
|
||||
$clr-grey-500: map-get($clr-grey-list, "500");
|
||||
$clr-grey-600: map-get($clr-grey-list, "600");
|
||||
$clr-grey-700: map-get($clr-grey-list, "700");
|
||||
$clr-grey-800: map-get($clr-grey-list, "800");
|
||||
$clr-grey-900: map-get($clr-grey-list, "900");
|
||||
|
||||
|
||||
//
|
||||
// Blue grey
|
||||
//
|
||||
|
||||
$clr-blue-grey-list: (
|
||||
"base": #607d8b,
|
||||
"50": #eceff1,
|
||||
"100": #cfd8dc,
|
||||
"200": #b0bec5,
|
||||
"300": #90a4ae,
|
||||
"400": #78909c,
|
||||
"500": #607d8b,
|
||||
"600": #546e7a,
|
||||
"700": #455a64,
|
||||
"800": #37474f,
|
||||
"900": #263238,
|
||||
);
|
||||
|
||||
$clr-blue-grey: map-get($clr-blue-grey-list, "base");
|
||||
|
||||
$clr-blue-grey-50: map-get($clr-blue-grey-list, "50");
|
||||
$clr-blue-grey-100: map-get($clr-blue-grey-list, "100");
|
||||
$clr-blue-grey-200: map-get($clr-blue-grey-list, "200");
|
||||
$clr-blue-grey-300: map-get($clr-blue-grey-list, "300");
|
||||
$clr-blue-grey-400: map-get($clr-blue-grey-list, "400");
|
||||
$clr-blue-grey-500: map-get($clr-blue-grey-list, "500");
|
||||
$clr-blue-grey-600: map-get($clr-blue-grey-list, "600");
|
||||
$clr-blue-grey-700: map-get($clr-blue-grey-list, "700");
|
||||
$clr-blue-grey-800: map-get($clr-blue-grey-list, "800");
|
||||
$clr-blue-grey-900: map-get($clr-blue-grey-list, "900");
|
||||
|
||||
|
||||
//
|
||||
// Black
|
||||
//
|
||||
|
||||
$clr-black-list: (
|
||||
"base": #000
|
||||
);
|
||||
|
||||
$clr-black: map-get($clr-black-list, "base");
|
||||
|
||||
|
||||
//
|
||||
// White
|
||||
//
|
||||
|
||||
$clr-white-list: (
|
||||
"base": #fff
|
||||
);
|
||||
|
||||
$clr-white: map-get($clr-white-list, "base");
|
||||
|
||||
|
||||
//
|
||||
// List for all Colors for looping
|
||||
//
|
||||
|
||||
$clr-list-all: (
|
||||
"red": $clr-red-list,
|
||||
"pink": $clr-pink-list,
|
||||
"purple": $clr-purple-list,
|
||||
"deep-purple": $clr-deep-purple-list,
|
||||
"indigo": $clr-indigo-list,
|
||||
"blue": $clr-blue-list,
|
||||
"light-blue": $clr-light-blue-list,
|
||||
"cyan": $clr-cyan-list,
|
||||
"teal": $clr-teal-list,
|
||||
"green": $clr-green-list,
|
||||
"light-green": $clr-light-green-list,
|
||||
"lime": $clr-lime-list,
|
||||
"yellow": $clr-yellow-list,
|
||||
"amber": $clr-amber-list,
|
||||
"orange": $clr-orange-list,
|
||||
"deep-orange": $clr-deep-orange-list,
|
||||
"brown": $clr-brown-list,
|
||||
"grey": $clr-grey-list,
|
||||
"blue-grey": $clr-blue-grey-list,
|
||||
"black": $clr-black-list,
|
||||
"white": $clr-white-list
|
||||
);
|
||||
|
||||
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
$clr-ui-display-4: $clr-grey-600;
|
||||
$clr-ui-display-3: $clr-grey-600;
|
||||
$clr-ui-display-2: $clr-grey-600;
|
||||
$clr-ui-display-1: $clr-grey-600;
|
||||
$clr-ui-headline: $clr-grey-900;
|
||||
$clr-ui-title: $clr-grey-900;
|
||||
$clr-ui-subhead-1: $clr-grey-900;
|
||||
$clr-ui-body-2: $clr-grey-900;
|
||||
$clr-ui-body-1: $clr-grey-900;
|
||||
$clr-ui-caption: $clr-grey-600;
|
||||
$clr-ui-menu: $clr-grey-900;
|
||||
$clr-ui-button: $clr-grey-900;
|
||||
|
||||
|
||||
$error-red: $clr-red-500;
|
||||
$success-green: $clr-green-500;
|
||||
|
||||
$valid-value-color: $clr-green-a400;
|
||||
$error-value-color: $clr-red-a400;
|
||||
|
||||
$base-shadow-color: #000;
|
||||
$base-overlay-background: #000;
|
||||
$base-border-color: #fff;
|
||||
$simple-background-color: #fff;
|
||||
$primary-text-color: #FFF;
|
||||
|
||||
$gold-star: $clr-amber-500;
|
||||
|
||||
$ui-base-dark-color: $clr-blue-grey-900;
|
||||
$ui-base-color: $clr-blue-grey-800;
|
||||
$ui-base-light-color: $clr-blue-grey-700;
|
||||
$ui-base-lighter-color: $clr-blue-grey-400;
|
||||
$ui-base-lightest-color: $clr-blue-grey-300;
|
||||
$ui-primary-color: $clr-blue-grey-100;
|
||||
$ui-secondary-color: $clr-blue-grey-200;
|
||||
$ui-highlight-color: $clr-pink-a200;
|
||||
|
||||
$secondary-text-color: $ui-secondary-color;
|
||||
$darker-text-color: rgba($primary-text-color, 0.7);
|
||||
$dark-text-color: rgba($primary-text-color, 0.5);
|
||||
$inverted-text-color: #000 !default;
|
||||
$lighter-text-color: rgba($inverted-text-color, 0.7);
|
||||
$light-text-color: rgba($inverted-text-color, 0.5);
|
||||
|
||||
$primary: $clr-teal-500;
|
||||
$accent: $clr-pink-a200;
|
||||
|
||||
$ui-avatar-border-size: 0%;
|
||||
|
||||
@import 'application';
|
||||
.activity-stream .status.light .status__content a.status__content__spoiler-link {
|
||||
color: #000;
|
||||
}
|
||||
$ui-highlight-color: $clr-light-blue-500;
|
||||
@import 'sleeping-town/boost';
|
||||
|
||||
.status__content {
|
||||
color: lighten($ui-primary-color, 6%) !important;
|
||||
}
|
||||
|
||||
.status__display-name strong {
|
||||
color: lighten($ui-primary-color, 15%) !important;
|
||||
}
|
||||
63
app/javascript/styles/sleeping-town/boost.scss
Normal file
63
app/javascript/styles/sleeping-town/boost.scss
Normal file
File diff suppressed because one or more lines are too long
49
app/javascript/styles/sleeping-town/fullwidth-media.scss
Normal file
49
app/javascript/styles/sleeping-town/fullwidth-media.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
/* https://github.com/mstdn/mastodon/blob/master/app/javascript/styles/fullwidth-media.scss */
|
||||
|
||||
.detailed-status > .media-spoiler,
|
||||
.status > .media-spoiler,
|
||||
.status .video-player,
|
||||
.media-gallery,
|
||||
.status .status-card.interactive {
|
||||
margin-top: 20px;
|
||||
margin-left: -68px;
|
||||
width: calc(100% + 80px);
|
||||
}
|
||||
|
||||
.detailed-status > .media-spoiler,
|
||||
.status > .media-spoiler,
|
||||
.video-player {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* If there's no status text, add an extra margin on top */
|
||||
.status .status__info + .media-gallery,
|
||||
.status .status__info + .media-spoiler,
|
||||
.status .status__info + .video-player,
|
||||
.status .status__info + .status-card {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.status__video-player-video {
|
||||
transform: unset;
|
||||
top: unset;
|
||||
}
|
||||
|
||||
.detailed-status .media-gallery {
|
||||
margin-left: -10px;
|
||||
width: calc(100% + 22px);
|
||||
}
|
||||
|
||||
.public-layout .status {
|
||||
.status__content {
|
||||
min-height: 15px;
|
||||
}
|
||||
& > .media-spoiler,
|
||||
.video-player,
|
||||
.media-gallery,
|
||||
.status-card {
|
||||
margin-top: 20px;
|
||||
width: calc(100% + 94px);
|
||||
margin-left: -78px;
|
||||
}
|
||||
}
|
||||
19
app/javascript/styles/strawberry.scss
Normal file
19
app/javascript/styles/strawberry.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
@import 'strawberry/_variables';
|
||||
@import 'application';
|
||||
|
||||
@import 'strawberry/page';
|
||||
@import 'strawberry/sign_log';
|
||||
@import 'strawberry/landing';
|
||||
@import 'strawberry/column';
|
||||
@import 'strawberry/boost';
|
||||
@import 'strawberry/covered';
|
||||
@import 'strawberry/card';
|
||||
@import 'strawberry/search';
|
||||
@import 'strawberry/drawer';
|
||||
@import 'strawberry/start';
|
||||
@import 'strawberry/about';
|
||||
@import 'strawberry/ui';
|
||||
@import 'strawberry/account';
|
||||
@import 'strawberry/radius';
|
||||
@import 'strawberry/input';
|
||||
@import 'strawberry/shorter-tl';
|
||||
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%;
|
||||
}
|
||||
341
app/javascript/styles/swan-lake.scss
Normal file
341
app/javascript/styles/swan-lake.scss
Normal file
|
|
@ -0,0 +1,341 @@
|
|||
$ui-base-color: #0C023D; // darkest
|
||||
$ui-highlight-color: #5c82c2; // vibrant
|
||||
$ui-secondary-color: #b5c6d4; // lightest
|
||||
$ui-primary-color: #afc5d6; // lighter
|
||||
$ui-primary-color-alt: #9498be; // darker, for external pages
|
||||
$ui-link-text-color: #85d7ee;
|
||||
|
||||
$about-page-text: lighten($ui-base-color, 50%);
|
||||
|
||||
@import 'neon-base';
|
||||
|
||||
@keyframes floating {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
65% {
|
||||
transform: translate(0, 4px);
|
||||
}
|
||||
to {
|
||||
transform: translate(0, -0);
|
||||
}
|
||||
}
|
||||
|
||||
.about-body .mascot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.muted {
|
||||
.status__content p, .status__content a {
|
||||
color: lighten($ui-base-color, 60%);
|
||||
}
|
||||
|
||||
.status__display-name strong {
|
||||
color: lighten($ui-base-color, 60%);
|
||||
}
|
||||
}
|
||||
|
||||
.status__content__read-more-button {
|
||||
color: lighten($ui-base-color, 60%) !important;
|
||||
}
|
||||
|
||||
.compose-form__buttons button.active:last-child {
|
||||
color:$ui-secondary-color;
|
||||
background-color: $ui-highlight-color;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
.screenshot-with-signup {
|
||||
min-height:300px;
|
||||
}
|
||||
|
||||
.container.hero .closed-registrations-message .clock {
|
||||
font-size: 150%;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
.actions .button.button-alternative {
|
||||
background: $ui-highlight-color;
|
||||
color: $ui-primary-color;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($ui-highlight-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.landing-page .container.links {
|
||||
top: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.landing-page.alternative .header {
|
||||
background-image:url('../themes/neoncity/images/header-cybre-colour.jpg');
|
||||
background-repeat: repeat-x;
|
||||
background-size:contain;
|
||||
height:45vh;
|
||||
width: 100%;
|
||||
position:absolute;
|
||||
z-index: 1;
|
||||
text-align:center;
|
||||
|
||||
display: unset!important;
|
||||
}
|
||||
|
||||
.landing-page.alternative .header img {
|
||||
margin: auto;
|
||||
max-height:45vh;
|
||||
}
|
||||
|
||||
|
||||
.landing-page.alternative .grid {
|
||||
position: relative;
|
||||
z-index:2;
|
||||
margin-top:15vh;
|
||||
}
|
||||
|
||||
.landing-page.alternative .landing-page__hero img {
|
||||
visibility: hidden;
|
||||
max-height:170px;
|
||||
}
|
||||
|
||||
.landing-page.alternative .landing-page__forms {
|
||||
height:auto;
|
||||
}
|
||||
|
||||
.landing-page.alternative .column-1 {
|
||||
display:flex;
|
||||
align-items:flex-end;
|
||||
}
|
||||
|
||||
.landing-page.alternative .column {
|
||||
max-height:initial;
|
||||
}
|
||||
|
||||
.landing-page.alternative .row__mascot {
|
||||
.floats {
|
||||
position:absolute;
|
||||
img {
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
transition: all 0.1s linear;
|
||||
animation-name: floating;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.float-1 {
|
||||
width:50px;
|
||||
height:50px;
|
||||
bottom:60px;
|
||||
left:110px;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
.float-2 {
|
||||
width:130px;
|
||||
height:130px;
|
||||
left:85px;
|
||||
bottom: -60px;
|
||||
animation-duration: 3.5s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.float-3 {
|
||||
width:100px;
|
||||
height:100px;
|
||||
right: 50;
|
||||
top: -10px;
|
||||
animation-duration: 4s;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-stream {
|
||||
.status.light {
|
||||
.status__header .status__meta .status__relative-time {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
|
||||
.display-name span {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
|
||||
.status__content {
|
||||
a.status__content__spoiler-link {
|
||||
background: $ui-primary-color-alt;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-primary-color-alt, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status.light {
|
||||
.detailed-status__display-name .display-name span {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
|
||||
.status__content a.status__content__spoiler-link {
|
||||
background: $ui-primary-color-alt;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-primary-color-alt, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__meta {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.media-spoiler {
|
||||
background: $ui-primary-color-alt;
|
||||
&:hover {
|
||||
background: darken($ui-primary-color-alt, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.pre-header {
|
||||
color: $ui-primary-color-alt;
|
||||
.status__display-name.muted strong {
|
||||
color: $ui-primary-color-alt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.embed .activity-stream .entry .detailed-status.light .button.button-secondary.logo-button {
|
||||
color: $ui-primary-color-alt;
|
||||
svg {
|
||||
path:first-child {
|
||||
fill: $ui-primary-color-alt;
|
||||
}
|
||||
}
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
svg path:first-child {
|
||||
fill: lighten($ui-primary-color-alt, 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-search {
|
||||
background: $simple-background-color;
|
||||
input {
|
||||
color: $ui-primary-color-alt;
|
||||
border: 1px solid $ui-primary-color-alt;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-mart-anchor {
|
||||
color: $ui-primary-color-alt;
|
||||
&:hover {
|
||||
color: darken($ui-primary-color-alt, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.search-popout {
|
||||
background: $ui-base-color;
|
||||
color: $ui-primary-color;
|
||||
|
||||
h4 {
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
|
||||
em {
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* customize color and opacity */
|
||||
.status__content a,
|
||||
.status__content a.unhandled-link {
|
||||
color: $ui-link-text-color;
|
||||
}
|
||||
|
||||
.status__content {
|
||||
color: lighten($ui-primary-color, 6%);
|
||||
}
|
||||
|
||||
.status__display-name strong {
|
||||
color: lighten($ui-primary-color, 15%);
|
||||
}
|
||||
|
||||
.column > .scrollable {
|
||||
background-color: #0C023DB5;
|
||||
}
|
||||
|
||||
.drawer__inner, .drawer__inner__mastodon {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
body, .landing-page, .public-layout {
|
||||
background-image: url("../themes/swan-lake.jpg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.layout-single-column .navigation-panel {
|
||||
//background-color: $ui-highlight-color;
|
||||
opacity: 0.8;
|
||||
height: auto;
|
||||
.column-link {
|
||||
background: lighten($ui-base-color, 5%);
|
||||
color:$white;
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 10%);
|
||||
}
|
||||
&.active {
|
||||
background: darken($ui-base-color, 5%);
|
||||
}
|
||||
}
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
opacity: 0.8;
|
||||
.column-link {
|
||||
background: lighten($ui-base-color, 5%);
|
||||
color:$white;
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.landing__grid {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.activity-stream .entry {
|
||||
background-color:#0C023DB5;
|
||||
}
|
||||
|
||||
.account__section-headline {
|
||||
background-color: #0C023D;
|
||||
}
|
||||
|
||||
.hashtag:hover, .mention:hover {
|
||||
text-shadow: 0 0 8px #fff;
|
||||
}
|
||||
.status-link:hover {
|
||||
text-shadow: 0 0 8px #8ca6f6;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
text-shadow: 0 0 8px #fcfcf6 !important;
|
||||
}
|
||||
|
||||
.status__content__read-more-button:hover {
|
||||
text-shadow: 0 0 8px #A59BD6 !important;
|
||||
}
|
||||
63
app/javascript/styles/ubuntu-light.scss
Normal file
63
app/javascript/styles/ubuntu-light.scss
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
// Dependent colors
|
||||
$black: #000000;
|
||||
$white: #ffffff;
|
||||
|
||||
$classic-base-color: #111111;
|
||||
$classic-primary-color: #333333;
|
||||
$classic-secondary-color: #d4cbbf;
|
||||
$classic-highlight-color: #b9a639;
|
||||
|
||||
// Differences
|
||||
$success-green: lighten(#3c754d, 8%);
|
||||
|
||||
$base-overlay-background: #dfd5c8 !default;
|
||||
$valid-value-color: $success-green !default;
|
||||
|
||||
$ui-base-color: $classic-secondary-color !default;
|
||||
$ui-base-lighter-color: #d1cac0;
|
||||
$ui-primary-color: rgb(172, 165, 165);
|
||||
$ui-secondary-color: $classic-base-color !default;
|
||||
$ui-highlight-color: #423523;
|
||||
|
||||
$primary-text-color: $black !default;
|
||||
$darker-text-color: $classic-base-color !default;
|
||||
$dark-text-color: #111111;
|
||||
$action-button-color: #666059;
|
||||
|
||||
$inverted-text-color: $black !default;
|
||||
$lighter-text-color: $classic-base-color !default;
|
||||
$light-text-color: #111111;
|
||||
|
||||
//Newly added colors
|
||||
$account-background-color: #dfd5c8 !default;
|
||||
|
||||
//Invert darkened and lightened colors
|
||||
@function darken($color, $amount) {
|
||||
@return hsl(hue($color), saturation($color), lightness($color) + $amount);
|
||||
}
|
||||
|
||||
@function lighten($color, $amount) {
|
||||
@return hsl(hue($color), saturation($color), lightness($color) - $amount);
|
||||
}
|
||||
|
||||
$emojis-requiring-inversion: 'chains';
|
||||
|
||||
|
||||
@import 'application';
|
||||
@import 'mastodon-light/diff';
|
||||
|
||||
.drawer__inner, .column > .scrollable, .column-link, .column-header, .column-header__button, .drawer__header a, .getting-started .column-link, .column-back-button, .account__header__bar, .column-header__back-button {
|
||||
background: #E2DBCE !important;
|
||||
}
|
||||
|
||||
.directory__tag > a {
|
||||
background: #b3a38e !important;
|
||||
}
|
||||
|
||||
.detailed-status, .detailed-status__action-bar, .getting-started__footer {
|
||||
background: #EDEAE4 !important;
|
||||
}
|
||||
|
||||
.drawer__inner__mastodon {
|
||||
background: #E2DBCE 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="%23aea79f"/></svg>') no-repeat bottom/100% auto !important;
|
||||
}
|
||||
35
app/javascript/styles/ubuntu-terminal.scss
Normal file
35
app/javascript/styles/ubuntu-terminal.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
// Dependent colors
|
||||
$black: #000000;
|
||||
|
||||
$classic-base-color: #2C001E;
|
||||
$classic-primary-color: #cc99bf;
|
||||
$classic-secondary-color: #e2afdd;
|
||||
$classic-highlight-color: #e6c3e7;
|
||||
|
||||
$ui-base-color: $classic-base-color !default;
|
||||
$ui-primary-color: $classic-primary-color !default;
|
||||
$ui-secondary-color: $classic-secondary-color !default;
|
||||
|
||||
// Differences
|
||||
$ui-highlight-color: #e6c3e7;
|
||||
|
||||
$darker-text-color: lighten($ui-primary-color, 20%) !default;
|
||||
$dark-text-color: lighten($ui-primary-color, 12%) !default;
|
||||
$secondary-text-color: lighten($ui-secondary-color, 6%) !default;
|
||||
$highlight-text-color: $classic-highlight-color !default;
|
||||
$action-button-color: #d3afd4;
|
||||
|
||||
$inverted-text-color: $black !default;
|
||||
$lighter-text-color: darken($ui-base-color, 6%) !default;
|
||||
$light-text-color: darken($ui-primary-color, 40%) !default;
|
||||
|
||||
|
||||
@import 'application';
|
||||
|
||||
.status__content {
|
||||
color: lighten($ui-primary-color, 6%) !important;
|
||||
}
|
||||
|
||||
.status__display-name strong {
|
||||
color: lighten($ui-primary-color, 15%) !important;
|
||||
}
|
||||
71
app/javascript/styles/witches-town.scss
Normal file
71
app/javascript/styles/witches-town.scss
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue