diff --git a/app/javascript/fonts/pressstart2p/PressStart2P-Regular.ttf b/app/javascript/fonts/pressstart2p/PressStart2P-Regular.ttf new file mode 100644 index 000000000..39adf42ef Binary files /dev/null and b/app/javascript/fonts/pressstart2p/PressStart2P-Regular.ttf differ diff --git a/app/javascript/styles/cyberpunk-neon.scss b/app/javascript/styles/cyberpunk-neon.scss new file mode 100644 index 000000000..592549692 --- /dev/null +++ b/app/javascript/styles/cyberpunk-neon.scss @@ -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,") 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,') 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 */ + + diff --git a/app/javascript/styles/cybre-base.scss b/app/javascript/styles/cybre-base.scss new file mode 100644 index 000000000..ad1c46df4 --- /dev/null +++ b/app/javascript/styles/cybre-base.scss @@ -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; + } +} + + + diff --git a/app/javascript/styles/cybre-light.scss b/app/javascript/styles/cybre-light.scss new file mode 100644 index 000000000..7480589a5 --- /dev/null +++ b/app/javascript/styles/cybre-light.scss @@ -0,0 +1,1005 @@ +$success-green: #B64579; // Padua + +$ui-base-color: #f7e8ed; // "darkest" +$ui-base-alt: #f9f2f5; +$ui-base-lighter-color: darken($ui-base-color, 40%); // Lighter darkest +$ui-secondary-color: #ead0d6; // "lightest" +$ui-primary-color: #bf5677; // "lighter" +$ui-highlight-color: #bf5677; // "vibrant" +$primary-text-color: #382b32; +$dark-text-color: #ca748f; +$secondary-text-color: #382b32; + +$header-color: $ui-primary-color; +$header-text-color: #fff; +$icon-button-inactive-color: lighten(desaturate($ui-base-lighter-color, 20%), 20%); +$action-button-color: $icon-button-inactive-color; + +$about-page-text: $primary-text-color; + +@import 'cybre-base'; + +$gold-star: $ui-highlight-color; + +/* cybre-specific additions */ + +.column .static-content.getting-started { + background-image: url('../themes/cybrelight/logo-cybre-light.png'); + background-size:auto 50%; + background-position: 50% 75%; + background-repeat:no-repeat; +} + +.ui { + background: $ui-base-color; + background-attachment: fixed; +} + +body, .landing-page, .public-layout { + background-image: url('../images/background-cybre-light.png'); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-attachment: fixed; +} + +.landing-page .header-wrapper { + background-image:url('../themes/cybrelight/header-cybre-alt.jpg'); + background-size:cover; + background-position:50% 50%; +} + +.landing-page.alternative .header { + background-image:url('../themes/cybrelight/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; + } +} + +/* about.scss */ + +.landing-page { + h1 { + color: $about-page-text; + small { + color: lighten($about-page-text, 10%); + } + } + p, li { + color: $about-page-text; + } + + .header-wrapper { + padding-top:0px; + + background-size:cover; + background-position:50% 55%; + } + + .header-wrapper { + .mascot { + width:500px; + bottom:-52px; + left:-120px; + } + } + + .container.links { + background-color: $ui-base-color; + border-top: 5px solid $ui-primary-color; + width:100%; + max-width:100%; + padding:0px calc(50% - 400px); + + a { + &:hover { + color: lighten($ui-primary-color, 10%); + } + } + } + + .container.hero { + .floats { + display:none; + } + + .closed-registrations-message, form { + border-top: 50px solid #5f4770; + -webkit-box-shadow: 0 0 6px rgba(0,0,0,.1); + box-shadow: 0 0 6px rgba(0,0,0,.1); + + &:before { + font-size: 16px; + font-family:inherit; + line-height:inherit; + font-weight:normal; + color:white; + position:absolute; + top:-35px; + } + } + + .closed-registrations-message:before { + content: "Registrations closed"; + } + + form:before { + content: "Register now"; + } + } + + #mastodon-timeline { + .column-header { + color:white; + } + } +} + +.features-list__row { + .text { + color: $about-page-text; + } +} + +.information-board { + .panel { + .panel-header { + color: $primary-text-color; + border-bottom: 1px solid lighten($ui-secondary-color, 4%); + + a, + span { + font-weight: 400; + color: lighten($ui-primary-color, 4%); + } + } + } +} + +/* components.scss */ + +.onboarding-modal__page { + p { + color: $primary-text-color; + } +} + +.column-header { + background: $header-color; + color: $header-text-color; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + box-shadow: 0px 0px 3px rgba(0,0,0,0.3); +} + +.column-header__button { + background: $header-color; + color: $header-text-color; + border-top-right-radius: 3px; + + &:hover { + color: darken($ui-base-color, 10%); + } + + &.active { + color: $primary-text-color; + background: darken($ui-base-color, 5%); + + &:hover { + background: darken($ui-base-color, 5%); + } + } +} + +.status-card, .status-card.compact { + border-color: $ui-highlight-color; +} + +.search__input { + border: 1px solid $ui-primary-color; + border-radius: 10px; +} + +.icon-with-badge { + &__badge { + background: $ui-base-color; + border: 2px solid lighten($ui-highlight-color, 30%); + color: $dark-text-color; + } +} + +.relationship-tag { + color: $primary-text-color; + background-color: $ui-base-color; +} + +.media-modal__nav { + background: rgba($ui-primary-color, 0.5); + color: $ui-base-color; +} + +// selectivity -- needs to override .column-header > button +.column-header .column-header__back-button { + background: $header-color; + color:$header-text-color; +} + +.column-back-button { + background: $header-color; + color:$header-text-color; +} + +.column-header__collapsible-inner { + background: darken($ui-base-alt, 2%); +} + +.empty-column-indicator, +.error-column { + color: darken($ui-base-lighter-color, 15%); +} + +.compose-form { + .autosuggest-textarea__textarea, + .spoiler-input__input { + color: $primary-text-color; + border: 1px solid $ui-primary-color; + } + + .autosuggest-textarea__textarea { + border-bottom-width:0px; + } + .compose-form__modifiers { + border: 1px solid $ui-primary-color; + border-top-width:0px; + } + + .compose-form__buttons button.active:last-child { + border-radius:3px; + background: $ui-base-color; + color: $ui-primary-color; + } + .compose-form__buttons-wrapper { + background-color:$ui-primary-color; + } + + .compose-form__warning a { + color:white; + } + + .icon-button.inverted { + color:white; + + &:hover { + color:$ui-secondary-color; + } + } +} + +button.icon-button { + &.disabled { + } +} + +.icon-button { + &.inverted { + color: darken($ui-base-lighter-color, 10%); + } + + &.overlayed { + background: rgba($base-overlay-background, 0.2); + color: rgba($white, 0.7); + + &:hover { + background: rgba($base-overlay-background, 0.4); + } + } + + &.disabled { + color: desaturate($icon-button-inactive-color, 5%); + + &:hover, + &:active, + &:focus { + color: desaturate($icon-button-inactive-color, 5%); + } + } + + color: $icon-button-inactive-color; + + &:hover, + &:active, + &:focus { + color: darken($icon-button-inactive-color, 5%); + } +} + +.icon-button.star-icon, +.icon-button.star-icon:active { + background:transparent; + border:none; +} + +.icon-button.star-icon.active { + color: $gold-star; + &:active, &:hover, &:focus { + color: $gold-star; + } +} + +.text-icon-button { + color: $white; + &.active { + background: $ui-base-color; + color: $ui-primary-color; + } + &:focus, &:hover { + color: darken($ui-base-color, 3%); + } +} +.status.status-direct { + background: darken($ui-base-alt, 5%); + .icon-button.disabled { + color: lighten($ui-base-lighter-color, 10%); + } +} + +.account__header, .account-card { + & > div { + background: rgba(lighten($ui-base-color, 4%), 0.6); + } + + .account__header__content { + color: $primary-text-color; + } + + .detailed-status__display-name .display-name strong { + color: $ui-highlight-color; + } + + .icon-button { + &, &:hover { + color:desaturate($ui-base-lighter-color, 20%); + } + &.active { + &, &:hover { + color:$ui-base-lighter-color; + } + } + } +} + +.account__section-headline a { + &.active { + color: $primary-text-color; + + &::after { + border-bottom-color: $ui-base-alt; + } + + &::after { + border-bottom-color: $ui-base-alt; + } + } +} + +.privacy-dropdown.active .privacy-dropdown__value.active .icon-button { + color: $ui-primary-color; +} + +.privacy-dropdown__option { + color: $primary-text-color; + + strong { + color: $primary-text-color; + } + + &:hover, + &.active { + color: $white; + + .privacy-dropdown__option__content { + color: $white; + + strong { + color: $white; + } + } + } +} + +.emoji-picker-dropdown__menu { + .emoji-search-wrapper { + border-color: darken($ui-base-color, 10%); + } + .emoji-search { + background: darken($ui-base-color, 5%); + border-color: darken($ui-base-color, 10%); + } + .emoji-mart { + color: $ui-primary-color; + } +} + +.search-popout { + background: $ui-base-color; + color: $ui-primary-color; + + h4 { + color: $ui-primary-color; + } + + em { + color: $ui-highlight-color; + } +} +.search__icon .fa.active { + opacity:1.0; +} +.search-results__hashtag { + color: darken($ui-primary-color, 10%); + &:hover { + color: lighten($ui-primary-color, 5%); + } +} + +.static-content { + /*color: $primary-text-color;*/ +} + +#Getting-started { + background: $ui-primary-color; + border-bottom:0px; + color:white; +} + +.getting-started { + p { + color: $primary-text-color; + } + + a { + color: darken($ui-base-lighter-color, 10%); + } +} +.getting-started__wrapper { + flex: 0 0.5 auto; +} + +.getting-started { + .column-link { + background: lighten($ui-primary-color, 5%); + color:$white; + &:hover { + background: lighten($ui-primary-color, 10%); + } + } +} +.column-link__badge { + background: saturate(darken($ui-primary-color, 5%), 5%); +} +.column-subheading { + background: darken($ui-primary-color, 5%); + color:$white; +} + +.media-spoiler, +.video-player__spoiler.active { + color: $white; + &:hover { + color: darken($white, 5%); + } +} + +.status { + border-bottom: 1px solid $ui-secondary-color; +} + +.status__relative-time, .status__display-name { + color: darken($ui-base-color, 40%); +} + +.status__content { + .status__content__spoiler-link { + background: $ui-base-lighter-color; + + &:hover { + background: lighten($ui-base-lighter-color, 5%); + } + } +} + +.muted .status__content p { + color: $icon-button-inactive-color; +} + +.dropdown-menu__item { + & > a { + color: $primary-text-color; + &:hover, &:active, &:focus { + color: $white; + } + } +} + +.dropdown--active .dropdown__content { + & > ul { + background: $ui-base-color; + box-shadow: 0 0 5px rgba($base-shadow-color, 0.2); + & > li > a { + background: $ui-base-color; + color: $primary-text-color; + + &:hover { + background: $ui-highlight-color; + color: $ui-base-color; + } + } + } +} + +.boost-modal, +.confirmation-modal, +.report-modal, +.actions-modal, +.mute-modal +{ + color: $primary-text-color; +} +.boost-modal__action-bar, +.confirmation-modal__action-bar, +.mute-modal__action-bar, +.report-modal__action-bar, +.mute-modal__action-bar { + & > div { + color: $ui-primary-color; + } +} + +.actions-modal +{ + ul { + li:not(:empty) { + a { + color: $primary-text-color; + button { + + } + &.active, &:hover, &:active, &:focus { + color: $white; + button { + color: $white; + } + } + } + } + } +} + +.react-toggle-track { + background-color: $icon-button-inactive-color; +} + +.report-modal__comment .setting-text { + color: $primary-text-color; + border-bottom-color: lighten($ui-primary-color, 10%); + &:focus, &:active { + color: $primary-text-color; + } +} + +.status.light { + .status__content { + color: $primary-text-color; + } + .display-name strong { + color: $primary-text-color; + } +} + +.reply-indicator__content a { + color: lighten($ui-highlight-color, 30%); + &.unhandled-link { + color:lighten( #ff0051, 30%); + } +} + +.status__content +{ + a { + color: $ui-highlight-color; + + &:hover { + .fa { + color: darken($ui-base-color, 40%); + } + } + + &.unhandled-link { + color: #ff0051; + } + } + +} + +.detailed-status__display-name { + color: $ui-base-lighter-color; +} + +.drawer .drawer__inner { + /* overflow: visible; + height:inherit; */ + background:$ui-base-alt; +} + +.search__icon .fa { + color: $ui-highlight-color; +} + +/* .drawer__pager { + overflow-y:auto; +} */ + +.drawer .drawer__header { + background: $ui-base-color; + border-radius:3px; +} + +.onboarding-modal__page h1 { + background-color: darken($ui-primary-color, 5%); +} + +.poll__text input[type="text"], +.compose-form__poll-wrapper select { + color: $primary-text-color; +} + +.compose-form__poll-wrapper .button.button-secondary { + color: $ui-highlight-color; +} + +/* forms.scss */ +.block-button, .button, button { + background-color: $ui-primary-color; + color: $white; + + &.button-alternative { + color: $ui-base-color; + } + + &.logo-button { + color: $white; + svg path:first-child { + fill: $white; + } + } +} + +.simple_form { + p.hint { + color: $primary-text-color; + } + + .block-button, .button, button { + background-color: $ui-primary-color; + color: $white; + + &:hover { + background-color: lighten($ui-primary-color, 5%); + } + + &:active, + &:focus { + background-color: darken($ui-primary-color, 5%); + } + + } +} + +/* admin.scss */ + +.table > thead > tr > th { + border-bottom-color: $ui-secondary-color; +} + +.simple_form h4 { + border-bottom: 1px solid $ui-highlight-color; +} + +.admin-wrapper { + .content { + h2, p.hint, h4, h6 { + color: $primary-text-color; + } + + .muted-hint { + color: $primary-text-color; + } + } + + .sidebar { + .logo { + -webkit-filter: hue-rotate(133deg) saturate(70%) brightness(110%); + filter: hue-rotate(133deg) saturate(70%) brightness(110%); + } + + ul { + ul { + a { + &.selected { + background-color: $ui-primary-color; + color: $white; + + &:hover { + background-color: lighten($ui-primary-color, 10%); + } + } + } + } + a { + &.selected { + background-color: $ui-primary-color; + color: $white; + + &:hover { + background-color: lighten($ui-primary-color, 10%); + } + } + } + } + } +} + +.pagination .current { + color: $ui-primary-color; +} + +.report-accounts__item > strong { + color: $primary-text-color; +} + +.admin-wrapper .content { + & > p { + color: $primary-text-color; + } + hr { + border-color: $ui-highlight-color; + } +} + +/* accounts.scss */ +.card { + .name { + color: $white; + } + + .counter { + .counter-number { + color: $white; + } + } +} + +/* stream_entries.scss */ +.activity-stream { + .entry { + } + .status.light { + .display-name { + strong { + color: $primary-text-color; + } + } + .status__content { + color: $primary-text-color; + } + } + .detailed-status.light { + .detailed-status__display-name { + .display-name { + strong { + color: $primary-text-color; + } + } + } + .status__content { + color: $primary-text-color; + } + .status-card, + .status-card__title, + .status-card__description { + color: $primary-text-color; + } + } +} + +/* accounts.scss */ +.card { + .name { + color: darken($ui-primary-color, 15%); + } + .counter { + .counter-number { + color: darken($ui-primary-color, 15%); + } + border-color: $ui-primary-color; + } +} + +.activity-stream-tabs { + a { + color: lighten($ui-primary-color, 10%); + &.active { + color: darken($ui-primary-color, 10%); + } + } +} + +/* uncategorized */ + +.empty-column-indicator, .error-column { + background-color: $ui-base-alt; +} + +.actions .button.button-alternative { + background: $ui-highlight-color; + color: $white; + + &:active, + &:focus, + &:hover { + background-color: lighten($ui-highlight-color, 4%); + } +} + +.public-layout .header { + background: $ui-highlight-color; + color: $white; +} + +.public-layout .public-account-header__tabs__name h1 { + color: $white; + small { + color: $white; + } +} +.public-layout .header .brand:hover, +.public-layout .header .brand:focus, +.public-layout .header .brand:active { + background: lighten($ui-highlight-color, 5%); +} + +.public-layout .container:last-child { + background:$ui-highlight-color; + padding-left: 100px; + padding-right: 100px; + border-radius: 4px; + h4 { + color: white; + } +} + +.modal-layout, .modal-layout__mastodon > * { + background: none; +} + +.dashboard__widgets a:not(.name-tag) { + color: $primary-text-color; +} + +.tabs-bar__wrapper { + background: $ui-base-color; +} + +.layout-single-column .navigation-panel { + background-color: $ui-highlight-color; + height: auto; + .column-link { + background: lighten($ui-primary-color, 5%); + color:$white; + &:hover { + background: lighten($ui-primary-color, 10%); + } + &.active { + background: darken($ui-primary-color, 5%); + } + } + hr { + display: none; + } +} + +.bookmark-icon.active { + color: #ff5050; +} + + +/* 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%); +} + +.drawer__inner__mastodon { + background: #f9f2f5 url('data:image/svg+xml;utf8,') no-repeat bottom/100% auto !important; +} \ No newline at end of file diff --git a/app/javascript/styles/cybre.scss b/app/javascript/styles/cybre.scss new file mode 100644 index 000000000..9da998103 --- /dev/null +++ b/app/javascript/styles/cybre.scss @@ -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%); +} diff --git a/app/javascript/styles/deep-green.scss b/app/javascript/styles/deep-green.scss new file mode 100644 index 000000000..1d1a8c208 --- /dev/null +++ b/app/javascript/styles/deep-green.scss @@ -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,') 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; +} \ No newline at end of file diff --git a/app/javascript/styles/fonts/press-start.scss b/app/javascript/styles/fonts/press-start.scss new file mode 100644 index 000000000..322b06052 --- /dev/null +++ b/app/javascript/styles/fonts/press-start.scss @@ -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; + } + \ No newline at end of file diff --git a/app/javascript/styles/forest.scss b/app/javascript/styles/forest.scss new file mode 100644 index 000000000..6fd37b0e4 --- /dev/null +++ b/app/javascript/styles/forest.scss @@ -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) +} + diff --git a/app/javascript/styles/fullwidth-media.scss b/app/javascript/styles/fullwidth-media.scss new file mode 100644 index 000000000..f6a036d4f --- /dev/null +++ b/app/javascript/styles/fullwidth-media.scss @@ -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; + } +} diff --git a/app/javascript/styles/geodude.scss b/app/javascript/styles/geodude.scss new file mode 100644 index 000000000..de1a389e4 --- /dev/null +++ b/app/javascript/styles/geodude.scss @@ -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'; + diff --git a/app/javascript/styles/jigglypuff.scss b/app/javascript/styles/jigglypuff.scss new file mode 100644 index 000000000..1605f01d7 --- /dev/null +++ b/app/javascript/styles/jigglypuff.scss @@ -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; +} + + diff --git a/app/javascript/styles/luxury.scss b/app/javascript/styles/luxury.scss new file mode 100644 index 000000000..d3d079021 --- /dev/null +++ b/app/javascript/styles/luxury.scss @@ -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; + } + \ No newline at end of file diff --git a/app/javascript/styles/meemu-default.scss b/app/javascript/styles/meemu-default.scss new file mode 100644 index 000000000..a4c7416f2 --- /dev/null +++ b/app/javascript/styles/meemu-default.scss @@ -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'; \ No newline at end of file diff --git a/app/javascript/styles/meemu.scss b/app/javascript/styles/meemu.scss new file mode 100644 index 000000000..bbbc8b703 --- /dev/null +++ b/app/javascript/styles/meemu.scss @@ -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'; \ No newline at end of file diff --git a/app/javascript/styles/neon-base.scss b/app/javascript/styles/neon-base.scss new file mode 100644 index 000000000..58a926bc7 --- /dev/null +++ b/app/javascript/styles/neon-base.scss @@ -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; + } +} + + diff --git a/app/javascript/styles/neon-city.scss b/app/javascript/styles/neon-city.scss new file mode 100644 index 000000000..1f56c4e32 --- /dev/null +++ b/app/javascript/styles/neon-city.scss @@ -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); +} \ No newline at end of file diff --git a/app/javascript/styles/new-year.scss b/app/javascript/styles/new-year.scss new file mode 100644 index 000000000..82203aa51 --- /dev/null +++ b/app/javascript/styles/new-year.scss @@ -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) +} \ No newline at end of file diff --git a/app/javascript/styles/nga.scss b/app/javascript/styles/nga.scss new file mode 100644 index 000000000..7188178bf --- /dev/null +++ b/app/javascript/styles/nga.scss @@ -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,') no-repeat bottom/100% auto !important; + } \ No newline at end of file diff --git a/app/javascript/styles/pastel-gradient.scss b/app/javascript/styles/pastel-gradient.scss new file mode 100644 index 000000000..327799fdd --- /dev/null +++ b/app/javascript/styles/pastel-gradient.scss @@ -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,') 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; +} diff --git a/app/javascript/styles/purple-haze.scss b/app/javascript/styles/purple-haze.scss new file mode 100644 index 000000000..ecacdc42c --- /dev/null +++ b/app/javascript/styles/purple-haze.scss @@ -0,0 +1,2152 @@ +@import 'application'; + + +/* Made by Kpmitarai @kpm from cmx.im */ +/* Version 2.0 */ +/* Sogo Osaka love */ + + +html { + scrollbar-face-color: #313543; + scrollbar-track-color: rgba(0, 0, 0, 0.1); + } + /* -----整体背景----- */ + .ui { + background: #72607C; + } + + /* -----按钮颜色----- */ + .icon-button.active { + color: #705480; + } + .icon-button { + color: #69428f; + background: transparent; + } + .icon-button:hover { + color: #9C77C2; + } + .icon-button:active, + .icon-button:focus { + color: #705480; + } + .icon-button.disabled { + color: #705480; + cursor: default; + } + + .icon-button.inverted { + color: #69428f; + } + .icon-button.inverted:hover { + color: #9C77C2; + } + .icon-button.inverted:active, + .icon-button.inverted:focus { + color: #705480; + } + .icon-button.inverted.disabled { + color: #707b97; + } + .icon-button.inverted.active { + color: #705480; + } + .icon-button.inverted.active.disabled { + color: #705480; + } + .icon-button.overlayed { + background: rgba(0, 0, 0, 0.6); + color: #69428f; + } + .icon-button.overlayed:hover { + background: rgba(0, 0, 0, 0.9); + color: #694E78; + } + + .text-icon-button { + color: #69428f; + background: transparent; + } + .text-icon-button:hover { + color: #9C77C2; + } + .text-icon-button:active, .text-icon-button:focus { + color: #705480; + } + .text-icon-button.disabled { + color: #979eb3; + } + .text-icon-button.active { + color: #705480; + } + + .star-icon.active { + color: #705480; + } + + /* -------發文按鈕------- */ + .button { + background-color: #69428f; + color: #ffffff; + } + .button:active, + .button:focus, + .button:hover { + background-color: #9C77C2; + } + .reply-indicator { + background: #F0E3FD; + } + + .reply-indicator__display-name { + color: #9C77C2; + } + .status__content, + .reply-indicator__content { + color: #ffffff; + } + + .status__content a:hover .fa, + .reply-indicator__content a:hover .fa { + color: #694E78; + } + .status__content a .fa, + .reply-indicator__content a .fa { + color: #705480; + } + .status__content .status__content__spoiler-link, + .reply-indicator__content .status__content__spoiler-link { + color: rgba(255, 255, 255, 0.9); + background: #9C77C2; + } + .status__content .status__content__spoiler-link:hover, + .reply-indicator__content .status__content__spoiler-link:hover { + background: #69428f; + text-decoration: none; } + + + /* -------隱私設置------- */ + .privacy-dropdown__dropdown { + background: #ffffff; + } + .privacy-dropdown__option { + color: #69428f; + } + .privacy-dropdown__option:hover, + .privacy-dropdown__option.active { + background: #F7EFFF; + color: #705480; + } + .privacy-dropdown__option:hover .privacy-dropdown__option__content, + .privacy-dropdown__option.active .privacy-dropdown__option__content { + color: #694E78; + } + .privacy-dropdown__option:hover .privacy-dropdown__option__content strong, + .privacy-dropdown__option.active .privacy-dropdown__option__content strong { + color: #705480; + } + .privacy-dropdown__option.active:hover { + background: #F7EFFF; + } + .privacy-dropdown__option__content { + color: #69428f; + } + .privacy-dropdown__option__content strong { + color: #694E78; + } + .privacy-dropdown.active .privacy-dropdown__value { + background: #ffffff; + } + .privacy-dropdown.active .privacy-dropdown__value.active { + background: transparent; + } + .privacy-dropdown.active .privacy-dropdown__value.active .icon-button { + color: #705480; + } + + + /* ---------First Column--------- */ + .drawer__tab { + background-color: #F7EFFF; + color: #966DAD; + border-bottom: 2px solid transparent; + } + + .drawer__tab:first-child { + border-radius: 4px 0 0 4px; + } + .drawer__tab:last-child { + border-radius: 0 4px 4px 0; + } + drawer__header { + color: inherit; + } + .drawer__inner { + background: #F7EFFF; + border-radius: 0 0 4px 4px; + } + .drawer__inner__mastodon { + background: #FBF6FF url('data:image/svg+xml;utf8,') no-repeat bottom/100% auto; + } + .drawer__inner.darker { + background:#FBF6FF; + } + .drawer__pager { + border-radius: 4px + } + .drawer__header { + background: none; + } + .drawer__header a:hover { + background: #EFDFFF; + color:#69428f; + } + + /* -------搜索欄-------- */ + .search__input { + background: #DFC9F2; + color: #694E78; + border-radius: 4px; + } + .search__input:focus { + background: #FBF6FF; + } + .search__icon .fa { + color: #69428f; + } + .search__icon .fa-times-circle { + color: #69428f; + } + .search__icon .fa-times-circle:hover { + color: #9C77C2; + } + .search-popout { + background: #ffffff; + color: #9BAEC8; + -webkit-box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.4); + box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.4); + } + .search-popout h4 { + color: #694E78; + } + .search-popout em { + color: #966DAD; + } + + /* -------搜索結果-------- */ + .trends__item { + border-bottom: 1px solid rgba(112, 84, 128, .5); + } + .trends__item__name, + .trends__item__name a, + .trends__item__current { + color: #705480; + } + .trends__item__sparkline path { + stroke: #705480 !important; + } + .search-results__header { + color: #694E78; + background: #FBF6FF; + } + .search-results__section h5 { + background: #F7EFFF; + color: #69428f; + box-shadow: inset 0px 4px 15px -7px #69428f; + border-bottom: 1px solid rgba(112, 84, 128, .5) !important; + } + .search-results__section h5 .fa { + color: #9C77C2; + } + .search-results__hashtag { + color: #69428f; + } + .search-results__hashtag:hover, + .search-results__hashtag:active, + .search-results__hashtag:focus { + color: #9C77C2; + } + .search-results__section .account:last-child, + .search-results__section > div:last-child .status { + border-bottom: none !important; + } + .status { + border-bottom: 1px solid rgba(112, 84, 128, .5) !important; + } + + + /* -------嘟文編輯------- */ + .navigation-bar { + color:#69428f !important; + background: #FBF6FF; + } + .navigation-bar strong { + color: #705480; + } + + .compose-form .compose-form__warning { + color: #694E78; + background: #F7EFFF; + } + .compose-form .compose-form__warning strong { + color: #282c37; + } + .compose-form .compose-form__warning a { + color: #69428f; + } + .compose-form .autosuggest-textarea__textarea, + .compose-form .spoiler-input__input { + color: #694E78; + background: #ffffff; + } + .compose-form .autosuggest-textarea__suggestions { + background: #FBF6FF; + color: #694E78; + } + .compose-form .autosuggest-textarea__suggestions__item:hover, + .compose-form .autosuggest-textarea__suggestions__item:focus, + .compose-form .autosuggest-textarea__suggestions__item:active, + .compose-form .autosuggest-textarea__suggestions__item.selected { + background: #F0E3FD; + } + .compose-form .autosuggest-account .display-name__account { + color: #9C77C2; + } + .compose-form .compose-form__modifiers { + color: #705480; + background: #ffffff; + } + .compose-form .compose-form__modifiers .compose-form__upload__actions { + background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0.8)), color-stop(80%, rgba(0, 0, 0, 0.35)), to(transparent)); + background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.35) 80%, transparent); + } + .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button { + color: #d9e1e8; + } + .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button:hover, + .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button:focus, + .compose-form .compose-form__modifiers .compose-form__upload__actions .icon-button:active { + color: #eff3f5; + } + + .compose-form .compose-form__modifiers .compose-form__upload-description { + background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, 0.8)), color-stop(80%, rgba(0, 0, 0, 0.35)), to(transparent)); + background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.35) 80%, transparent); + } + .compose-form .compose-form__modifiers .compose-form__upload-description input { + background: transparent; + color: #d9e1e8; + } + .compose-form .compose-form__modifiers .compose-form__upload-description input:focus { + color: #ffffff; + } + .compose-form .compose-form__modifiers .compose-form__upload-description input::-webkit-input-placeholder { + color: #d9e1e8; + } + .compose-form .compose-form__modifiers .compose-form__upload-description input:-ms-input-placeholder { + color: #d9e1e8; + } + .compose-form .compose-form__modifiers .compose-form__upload-description input::-ms-input-placeholder { + color: #d9e1e8; + } + .compose-form .compose-form__modifiers .compose-form__upload-description input::placeholder { + color: #d9e1e8; + } + .compose-form .compose-form__buttons-wrapper { + background: #F7EFFF; + } + + .compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter { + color: #69428f; + } + .compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter.character-counter--over { + color: #ff5050; + } + + + /* -------emoji選擇------- */ + .emoji-mart { + color: #694E78; + } + .emoji-mart-bar { + border: none; + } + .emoji-mart-bar:first-child { + background: #FBF6FF; + } + .emoji-mart-anchors { + color: #69428f; + } + .emoji-mart-anchor:hover { + color: #705480; } + .emoji-mart-anchor-selected { + color: #705480; } + .emoji-mart-anchor-selected:hover { + color: #705480; } + .emoji-mart-anchor-bar { + background-color: #705480; + } + .emoji-mart-anchors svg { + fill: currentColor; + } + .emoji-mart-scroll { + background: #ffffff; + } + .emoji-mart-scroll::-webkit-scrollbar-track:hover, + .emoji-mart-scroll::-webkit-scrollbar-track:active { + background-color: #F0E3FD; + } + .emoji-mart-search { + background: #ffffff; + } + .emoji-mart-search input { + background: rgba(217, 225, 232, 0.3); + color: #69428f; + border: 1px solid #9C77C2; + } + .emoji-mart-category .emoji-mart-emoji:hover::before { + background-color: rgba(217, 225, 232, 0.7); + } + .emoji-mart-category-label span { + background: #ffffff; + } + .emoji-mart-no-results { + color: #69428f; + } + + /* -------下拉菜單------- */ + .dropdown-menu__separator { + border-bottom: 1px solid rgba(112, 84, 128, .5); + } + .dropdown-menu { + background: #F7EFFF; + -webkit-box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.4); + box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.4); + } + .dropdown-menu__arrow { + border: 0 solid #F7EFFF; + } + .dropdown-menu__arrow.left { + border-left-color: #F7EFFF; + } + .dropdown-menu__arrow.top { + border-top-color: #F7EFFF; + } + .dropdown-menu__arrow.bottom { + border-bottom-color: #F7EFFF; + } + .dropdown-menu__arrow.right { + border-right-color: #F7EFFF; + } + .dropdown-menu__item a { + background: #F7EFFF; + color: #694E78; + } + .dropdown-menu__item a:focus, + .dropdown-menu__item a:hover, + .dropdown-menu__item a:active { + background: #69428f; + color: #FFFFFF; + } + .dropdown--active .dropdown__content > ul { + background: #d9e1e8; + -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); + box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); + } + .dropdown--active .dropdown__content > ul > li > a { + background: #F7EFFF; + color: #694E78; + } + + .dropdown--active .dropdown__content > ul > li > a:hover { + background: #69428f; + color: #FFFFFF; + } + + + /* ----------scrollbar---------- */ + ::-webkit-scrollbar-thumb { + background: #9C77C2; + border-radius: 15px; + } + ::-webkit-scrollbar-thumb:hover, + ::-webkit-scrollbar-thumb:active, + ::-webkit-scrollbar-track:active { + background: #69428f; + } + ::-webkit-scrollbar-track, + ::-webkit-scrollbar-track:hover { + background: #F0E3FD; + border: 0px none #ffffff; + border-radius: 0 0 4px 0; + } + ::-webkit-scrollbar-corner { + background: transparent; + } + + /* ----------Main Page---------- */ + + .column-header, + .column-back-button, + .column-header > button, + .column-header__collapsible-inner { + border-radius: 4px 4px 0 0 !important; + } + .column-header, + .column-header__button, + .column-header__button.active { + color: #705480; + background: #DFC9F2; + box-shadow: 0 1px rgba(125, 33, 189, .23); + } + .column-header__button.active:hover { + color: #f7efff; + background: #DFC9F2; + } + + + .column-header__wrapper.active::before { + background: radial-gradient(ellipse, rgba(125, 33, 189, .23) 0%, rgba(125, 33, 189, 0) 60%); + } + .column-header > button { + background: transparent; + } + .column-header > .column-header__back-button { + color: #705480; + } + .column-header.active { + -webkit-box-shadow: 0 1px 0 rgba(125, 33, 189, .23); + box-shadow: 0 1px 0 rgba(125, 33, 189, .23); + } + .column-header.active .column-header__icon { + text-shadow:0 0 10px rgba(125, 33, 189, .23); + color: #9C77C2; + } + + .column-header__button:hover { + color: #9c77c2; + } + .column-header__collapsible { + color: #705480; + } + .column-header__collapsible hr { + background: transparent; + border-top: 1px solid #42485a; + } + .column-header__collapsible-inner { + background: #F7EFFF; + } + .column-header__setting-btn:hover { + color: #9C77C2; + } + .column > .scrollable { + background: #FCF8FF; + border-radius: 0 0 4px 4px + } + .status__content, + .reply-indicator__content { + color: #705480; + } + .status__content a { + color: #69428f; + } + .reply-indicator__content a { + color: #FFF; + } + .status__display-name strong, + .account__display-name strong { + color: #705480; + } + + .status__content__read-more-button { + color: #69428f; + background: transparent; + } + .status__content__spoiler-link { + background: transparent; + color: #FFF; + } + .status__wrapper--filtered { + color: #606984; + border-bottom: 1px solid #393f4f; + } + + + + + + .logo-container h1 a { + background-image: url("data:image/svg+xml;utf8,"); + width: auto; + height: 42px; + background-repeat: no-repeat; + background-position:40% 50%; + object-fit:none; + color: #ffffff; + } + .logo-container h1 img { + opacity: 0; + } + .account-header .name { + color: #d9e1e8; + } + + + + + + + /* ----------User Page---------- */ + @media screen and (max-width: 600px) { + .public-layout .public-account-header__bar { + background: #F7EFFF; } + } + + .public-layout .public-account-header__tabs__name h1 { + color: #ffffff; + text-shadow: 1px 1px 1px #694e78; } + .public-layout .public-account-header__tabs__name h1 small { + color: #ffffff; + } + @media screen and (max-width: 600px) { + .public-layout .public-account-header__tabs__name h1 small { + color: #fff; } } + + @media screen and (max-width: 415px) { + .public-layout .card-grid { + border-top: 1px solid rgba(125, 33, 189, .23); } + .public-layout .card-grid > div { + border-bottom: 1px solid rgba(125, 33, 189, .23); } + .public-layout .card-grid > div .card__bar { + background: #69428f; } + .public-layout .card-grid > div .card__bar:hover, + .public-layout .card-grid > div .card__bar:active, + .public-layout .card-grid > div .card__bar:focus { + background: #9C77C2; } + } + + .public-layout .public-account-header__bar::before { + background: #F7EFFF; + border-radius: 0 0 4px 4px !important; + } + .public-layout .header { + background: #69428f; + box-shadow: 0 0 15px rgba(125, 33, 189, .23); + } + .public-layout .header .brand:hover, + .public-layout .header .brand:focus, + .public-layout .header .brand:active { + background: #9C77C2; + } + .public-layout .header .nav-link { + color: #69428f; + } + .public-layout .header .nav-link:hover, + .public-layout .header .nav-link:focus, + .public-layout .header .nav-link:active { + color: #705480; + } + .public-layout .header .nav-link.optional { + color: #FFF; + } + .public-layout .header .nav-button { + background: #FBF6FF; + } + .public-layout .header .nav-button:hover, + .public-layout .header .nav-button:focus, + .public-layout .header .nav-button:active { + background: #F7EFFF; + } + .public-layout .public-account-header { + border-radius: 4px 4px 4px 4px; + -webkit-box-shadow: 0 0 13px 1px rgba(125, 33, 189, .23); + box-shadow: 0 0 13px 1px rgba(125, 33, 189, .23); + } + + .public-layout .public-account-header.inactive .logo-button { + background-color: #d9e1e8; + } + .public-layout .public-account-header.inactive .logo-button svg path:last-child { + fill: #d9e1e8; + } + + .public-layout .public-account-header__image { + background: #F7EFFF; + } + .public-layout .public-account-header__image::after { + -webkit-box-shadow: inset 0 0 2px 0.5px rgba(125, 33, 189, .23); + box-shadow: inset 0 0 2px 0.5px rgba(125, 33, 189, .23); + z-index: 0; + } + + .public-layout .public-account-header__tabs__tabs .counter { + color: #705480; + border-right: 1px solid rgba(125, 33, 189, .23); + } + + .public-layout .public-account-header__tabs__tabs .counter::after { + border-bottom: 4px solid #69428f; + } + .public-layout .public-account-header__tabs__tabs .counter.active::after { + border-bottom: 4px solid #9C77C2; + } + .public-layout .public-account-header__tabs__tabs .counter.active.inactive::after { + border-bottom-color: #d9e1e8; + } + + .public-layout .public-account-header__tabs__tabs .counter .counter-number { + color: #69428f; + } + .public-layout .public-account-header__extra .public-account-bio { + background: transparent; + } + .public-layout .public-account-header__extra .public-account-bio .account__header__fields { + border-top: 1px solid rgba(112, 84, 128, .5); + } + .public-layout .public-account-header__extra__links { + color: #9baec8; + } + .public-layout .public-account-header__extra__links a { + color: #694E78; + } + .public-layout .public-account-header__extra__links a strong { + color: #69428f; + } + + /* ------User Page Avatar------ */ + .public-layout .public-account-header__bar .avatar { + display: block; + width: 125px; + height: 125px; + padding-left: 16px; + } + .public-layout .public-account-header__bar .avatar img { + display: block; + width: 100%; + height: 100%; + margin: 0; + border-radius: 50%; + border: 0.25px solid #69428f; + background: transparent; } + /* ------User Page Avatar End------ */ + + /* ------User Page Self Intro------ */ + .account__header__fields { + border-top: 1px solid rgba(112, 84, 128, .5); + border-bottom: 1px solid rgba(112, 84, 128, .5); + } + .account__header__fields dl { + border-bottom: 1px solid rgba(112, 84, 128, .5); + } + + .account__header__fields dt { + color: #705480; + background: #F0E3FD; + } + .account__header__fields dd { + color: #705480; + background: #F7EFFF; + } + .account__header__fields a { + color: #69428f; + } + .account__header__fields a:hover { + color: #F7EFFF; + } + .account__header__fields .verified { + border: 1px solid rgba(121, 189, 154, 0.2); + background: rgba(121, 189, 154, 0.25); + } + .account__header__fields .verified a { + color: #79bd9a; + } + .account__header__fields .verified__mark { + color: #79bd9a; + } + .public-layout .public-account-bio { + background: #FBF6FF; + -webkit-box-shadow: 0 0 5px rgba(125, 33, 189, .23); + box-shadow: 0 0 5px rgba(125, 33, 189, .23); + } + .public-layout .public-account-bio .account__header__fields a { + color: #69428f; + } + .public-layout .public-account-bio .account__header__fields .verified a { + color: #79bd9a; + } + .public-layout .public-account-bio .account__header__content { + color: #694E78; + } + .public-layout .public-account-bio__extra, + .public-layout .public-account-bio .roles { + color: #69428f; + } + .public-layout .static-icon-button { + color: #606984; + } + /* ------User Page Self Intro End------ */ + + + + /* ------User Page Toots------ */ + .account-gallery__item a { + background-color: #000000; + color: #9baec8; + } + .account-gallery__item a:hover, .account-gallery__item a:active, .account-gallery__item a:focus { + color: #d9e1e8; } + .account-gallery__item a:hover::before, .account-gallery__item a:active::before, .account-gallery__item a:focus::before { + background: rgba(0, 0, 0, 0.3); + } + .account__section-headline { + -webkit-box-shadow: 0 0 2px 0.5px rgba(125, 33, 189, .23); + box-shadow: 0 0 2px 0.5px rgba(125, 33, 189, .23); + background: #F7EFFF; + border-bottom: 1px solid rgba(112, 84, 128, .3); + } + .account__section-headline a { + color: #69428f; + } + .account__section-headline a:hover { + color: #694E78; + } + .account__section-headline a.active { + color: #694E78; + } + .account__section-headline a.active::before, + .account__section-headline a.active::after { + border-color: transparent transparent #69428f; + } + + .activity-stream { + -webkit-box-shadow: 0 0 13px rgba(125, 33, 189, .23); + box-shadow: 0 0 13px rgba(125, 33, 189, .23); + } + .activity-stream .entry { + background: #FBF6FF; + } + .activity-stream--highlighted .entry { + background: #393f4f; + } + .status-card { + border: 1px solid rgba(112, 84, 128, .2); + color: #69428f; + } + .status-card__actions > div { + background: rgba(0, 0, 0, 0.38); + } + .status-card__actions button, + .status-card__actions a { + color: #FFF; + background: transparent; + } + a.status-card:hover { + background: #F7EFFF; + } + .status-card__title { + color: #705480; + } + .status-card__description { + color: #69428f; + } + .status-card__image { + background: #F0E3FD; + } + .status-card.compact { + border-color: rgba(112, 84, 128, .2); + } + + a.status-card.compact:hover { + background-color: #F7EFFF; + } + .load-more { + color: #69428f; + background-color: transparent; + } + .load-more:hover { + background: #F7EFFF; + } + .load-gap { + border-bottom: 1px solid rgba(112, 84, 128, .5); + } + + + + + + + /* ------User Page Footer------ */ + .public-layout .footer { + color: #69428f; + } + .public-layout .footer .grid .column-2 h4 a { + color: #9c77c2; + } + .public-layout .footer h4 { + color: #9C77C2; + } + .public-layout .footer h4 a { + color: inherit; + } + .public-layout .footer ul a { + color: #69428f; + } + .public-layout .footer ul a:hover { + color: #9C77C2; + } + .public-layout .footer .brand svg path { + fill: #69428f; + } + .public-layout .footer .brand:hover svg path, + .public-layout .footer .brand:focus svg path, + .public-layout .footer .brand:active svg path { + fill: #9C77C2; } + + .compact-header h1 { + color: #9baec8; + } + .compact-header h1 a { + color: inherit; + } + .compact-header h1 small { + color: #d9e1e8; + } + .hero-widget { + border-radius: 4px; + -webkit-box-shadow: 0 0 5px rgba(125, 33, 189, .23); + box-shadow: 0 0 5px rgba(125, 33, 189, .23); + } + .hero-widget__img { + background: transparent; + } + .hero-widget__text { + background: #FBF6FF; + color: #705480; + } + .hero-widget__text em { + background: transparent; + color: #69428f; + } + .hero-widget__text a { + color: #69428f; + } + .hero-widget__text a:hover { + color: #9C77C2; + } + .endorsements-widget h4 { + color: #9baec8; + } + .box-widget, + .contact-widget, + .landing-page__information.contact-widget { + background: #282c37; + -webkit-box-shadow: 0 0 13px rgba(125, 33, 189, .23); + box-shadow: 0 0 13px rgba(125, 33, 189, .23); + } + .contact-widget { + color: #9baec8; + } + .contact-widget__mail a { + color: #69428f; + } + .moved-account-widget { + background: #282c37; + -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); + color: #d9e1e8; + } + .moved-account-widget a { + color: inherit; + } + .moved-account-widget__message .fa { + color: #9baec8; + } + .memoriam-widget { + background: #000000; + -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); + color: #9baec8; + } + + .flash-message { + background: #393f4f; + color: #9baec8; + } + .flash-message.notice { + border: 1px solid rgba(121, 189, 154, 0.5); + background: rgba(121, 189, 154, 0.25); + color: #79bd9a; + } + .flash-message.alert { + border: 1px solid rgba(223, 64, 90, 0.5); + background: rgba(223, 64, 90, 0.25); + color: #df405a; + } + .flash-message .oauth-code { + background: #282c37; + color: #ffffff; + } + .flash-message .oauth-code:focus { + background: #313543; + } + .form-footer a { + color: #69428f; + } + .form-footer a:hover { + color: #694E78; + } + .oauth-prompt, + .follow-prompt { + color: #9baec8; + } + .oauth-prompt strong, + .follow-prompt strong { + color: #d9e1e8; + } + .qr-code { + background: #ffffff; + -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); + } + .qr-alternative { + color: #d9e1e8; + } + .simple_form .warning, + .table-form .warning { + background: rgba(223, 64, 90, 0.5); + color: #ffffff; + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); + -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); + } + .simple_form .warning a, + .table-form .warning a { + color: #ffffff; + } + .post-follow-actions { + color: #9baec8; + } + .alternative-login h4 { + color: #ffffff; + } + .scope-danger { + color: #ff5050; + } + + + + + + + + .pagination a, + .pagination .current, + .pagination .newer, + .pagination .older, + .pagination .page, + .pagination .gap { + color: #ffffff; + } + .pagination .current { + background: #ffffff; + color: #705480; + } + .pagination .older, + .pagination .newer { + color: #69428f; + } + .pagination .disabled { + color: #705480; + } + .nothing-here { + background: #282c37; + -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); + color: #9baec8; + } + .nothing-here--under-tabs { + border-radius: 0 0 4px 4px; } + .account-role { + color: #fff; + background-color: rgba(217, 225, 232, 0.2); + border: 1px solid rgba(217, 225, 232, 0.6); + } + .account-role.moderator { + color: #79bd9a; + background-color: rgba(121, 189, 154, 0.1); + border-color: rgba(121, 189, 154, 0.5); + } + .account-role.admin { + color: #e87487; + background-color: rgba(232, 116, 135, 0.1); + border-color: rgba(232, 116, 135, 0.5); + } + + + + + .button.logo-button { + background: #69428f; + color: #ffffff; + } + .button.logo-button svg path:first-child { + fill: #ffffff; + } + .button.logo-button svg path:last-child { + fill: #2b90d9; + } + .button.logo-button:active, + .button.logo-button:focus { + background: #705480; + } + .button.logo-button:hover { + background: #9C77C2; + } + .button.logo-button:active svg path:last-child, + .button.logo-button:focus svg path:last-child, + .button.logo-button:hover svg path:last-child { + fill: #56a7e1; + } + .button.logo-button.button--destructive:active, + .button.logo-button.button--destructive:focus, + .button.logo-button.button--destructive:hover { + background: #df405a; + } + .button.logo-button.button--destructive:active svg path:last-child, + .button.logo-button.button--destructive:focus svg path:last-child, + .button.logo-button.button--destructive:hover svg path:last-child { + fill: #df405a; + } + button.icon-button i.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); } + button.icon-button i.fa-retweet:hover { + background-image: url("data:image/svg+xml;utf8,"); } + button.icon-button.disabled i.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); } + + + .button--destructive:active, .button--destructive:focus, .button--destructive:hover { + background-color: #df405a; + } + .button:disabled { + background-color: #705480; + } + .button.button-alternative { + color: #fff; + background: #69428f; + } + .button.button-alternative:active, + .button.button-alternative:focus, + .button.button-alternative:hover { + background-color: #9c77c2; + } + .button.button-alternative-2 { + background: #9C77C2; + } + .button.button-alternative-2:active, + .button.button-alternative-2:focus, + .button.button-alternative-2:hover { + background-color: #69428f; + } + .button.button-secondary { + color: #9baec8; + background: transparent; + border: 1px solid #9baec8; + } + .button.button-secondary:active, + .button.button-secondary:focus, + .button.button-secondary:hover { + border-color: #a8b9cf; + color: #a8b9cf; + } + + + + + + + + + + + + + /* ----------Tooooooooots---------- */ + .focusable:focus { + background: #F7EFFF; + } + .focusable:focus .status.status-direct { + background: #F7EFFF; + } + .focusable:focus .status.status-direct.muted { + background: transparent; + } + .focusable:focus .detailed-status, + .focusable:focus .detailed-status__action-bar { + background: #F7EFFF; + } + + + + + + + + .status { + border-bottom: 1px solid #393f4f; + } + + .status.status-direct:not(.read) { + background:#F7EFFF; + border-bottom-color: #42485a; + } + .status.light .status__relative-time { + color: #69428f; + } + .status.light .status__display-name { + color: #705480; + } + .status.light .display-name strong { + color: #705480; + } + .status.light .display-name span { + color: #9baec8; + } + .status.light .status__content { + color: #694E78; + } + .status.light .status__content a { + color: #69428f; + } + .status.light .status__content a.status__content__spoiler-link { + color: #ffffff; + background: #9baec8; + } + .status.light .status__content a.status__content__spoiler-link:hover { + background: #b5c3d6; + } + + + .notification-favourite .status.status-direct { + background: transparent; + } + .notification-favourite .status.status-direct .icon-button.disabled { + color: #705480; + } + .notification__filter-bar { + background: #F7EFFF; + border-bottom: 1px solid rgba(112, 84, 128, .5) + } + .notification__filter-bar button { + background: #F7EFFF; + color: #69428f; + } + .notification__filter-bar button:hover { + color: #9C77C2; + } + .notification__filter-bar button.active { + color: #705480; + } + .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 #69428f; + } + + + .status__relative-time { + color: #694E78; + } + .status__display-name { + color: #606984; + } + .status-check-box { + border-bottom: 1px solid #d9e1e8; + } + .status__prepend { + color: #705480; + } + .status__prepend .status__display-name strong { + color: #705480; + } + + .status__action-bar__counter__label { + color: #69428f; + } + .detailed-status { + background: #F7EFFF; + } + .detailed-status__meta { + color: #69428f; + } + .detailed-status__action-bar { + background: #F7EFFF; + border-top: 1px solid rgba(112, 84, 128, .5); + border-bottom: 1px solid rgba(112, 84, 128, .5); + } + + .reply-indicator__content a { + color: #69428f; + } + + .domain { + border-bottom: 1px solid rgba(112, 84, 128, .5); + } + .domain .domain__domain-name { + color: #ffffff; + } + + .account__disclaimer { + border-top: 1px solid rgba(112, 84, 128, .5); + color: #69428f; + } + .account__header__content { + color: #9baec8; + } + .account__header__content a { + color: #69428f; + } + .account__action-bar { + border-top: 1px solid rgba(112, 84, 128, .5); + border-bottom: 1px solid rgba(112, 84, 128, .5); + } + + .account__action-bar__tab { + border-right: 1px solid rgba(112, 84, 128, .5); + border-bottom: 4px solid transparent; + } + .account__action-bar__tab.active { + border-bottom: 4px solid #69428f; + } + .account__action-bar__tab > span { + color: #694E78; + } + .account__action-bar__tab strong { + color: #69428f; + } + + .account__header__avatar { + background-size: 90px 90px; + display: block; + height: 90px; + margin: 0 auto 10px; + overflow: hidden; + width: 90px; + } + + .detailed-status__display-name { + color: #694E78; + } + .detailed-status__display-name strong { + color: #705480; + } + .muted .status__content p, + .muted .status__content a { + color: #9BAEC8; + } + .muted .status__display-name strong { + color: #606984; + } + .muted a.status__content__spoiler-link { + background: #9BAEC8; + color: #282c37; + } + .muted a.status__content__spoiler-link:hover { + background: #707b97; + } + + + + .notification__message .fa { + color: #705480; + } + .notification__favourite-icon-wrapper .star-icon { + color: #705480; + } + + .notification__display-name { + color: inherit; + } + .notification__display-name:hover { + color: #69428f; + } + .navigation-bar { + color: #FBF6FF; + border-radius: 4px 4px 0 0; + } + .navigation-bar a { + color: inherit; + } + + + .tabs-bar { + background: #F7EFFF; + } + .tabs-bar__link { + color: #966DAD; + border-bottom: 2px solid rgba(112, 84, 128, .5); + } + .tabs-bar__link.active { + border-bottom: 2px solid rgba(112, 84, 128, .5); + color: #69428f; + } + + @media screen and (min-width: 631px) { + .tabs-bar__link:hover, + .tabs-bar__link:focus, + .tabs-bar__link:active { + background: #464d60; } + } + + .column-back-button { + background: #DFC9F2; + color: #705480; + } + .column-back-button:hover { + color: #FAFAFA; + } + .column-header__back-button { + background: #DFC9F2; + color: #705480; + } + + .react-toggle { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: transparent; + } + + .react-toggle-track { + background-color: #705480; + } + .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { + background-color: #9C77C2; + } + .react-toggle--checked .react-toggle-track { + background-color: #69428f; + } + .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { + background-color: #9C77C2; + } + + .react-toggle-thumb { + border: 1px solid #9C77C2; + background-color: #fafafa; + } + .react-toggle--checked .react-toggle-thumb { + border-color: #69428f; + } + + + + + .keyboard-shortcuts kbd { + background-color: #F7EFFF; + border: 1px solid rgba(112, 84, 128, .1); + } + .setting-text { + color: #69428f; + background: transparent; + border-bottom: 2px solid rgba(112, 84, 128, .5); + } + .setting-text:focus, .setting-text:active { + color: #705480; + border-bottom-color: 2px solid rgba(112, 84, 128, .5); + } + .reduce-motion button.icon-button i.fa-retweet { + color: #69428f; + } + .reduce-motion button.icon-button.active i.fa-retweet { + color: #705480; + } + + .regeneration-indicator { + color: #69428f; + background: #FCF8FF; + } + .regeneration-indicator > div { + background: transparent; + } + + .regeneration-indicator__label strong { + color: #694E78; + } + + .text-btn { + color: #69428f; + background: transparent; + } + .text-btn:hover { + color: #705480; + } + .loading-indicator { + color: #69428f; + } + .loading-indicator__figure { + border: 0 solid #69428f; + border-radius: 50%; + } + .no-reduce-motion .loading-indicator__figure { + color: #69428f; + + } + + @-webkit-keyframes loader-figure { + 0% { + background-color: #69428f; } + 29% { + background-color: #69428f; } + 30% { + background-color: transparent; } + 100% { + background-color: transparent; } + } + @keyframes loader-figure { + 0% { + background-color: #69428f; } + 29% { + background-color: #69428f; } + 30% { + background-color: transparent; } + 100% { + background-color: transparent; } + } + .video-error-cover { + background: #000000; + color: #ffffff; + } + .media-spoiler { + background: #F0E3FD; + color: #694E78; + } + .media-spoiler:hover, + .media-spoiler:active, + .media-spoiler:focus { + color: #69428f; + } + .spoiler-button { + text-shadow: 0 1px 1px #000000, 1px 0 1px #000000; + } + + + .pseudo-drawer { + background: #F7EFFF; + } + .modal-container--preloader { + background: #FBF6FF; + } + .account--panel { + background: #F7EFFF; + border-top: 1px solid rgba(112, 84, 128, .3); + border-bottom: 1px solid rgba(112, 84, 128, .3); + } + .column-settings__outer { + background: #393f4f; + } + .column-settings__section { + color: #9C77C2; + } + + .account--follows-info { + color: #ffffff; + background-color: rgba(0, 0, 0, 0.4); + } + .account--muting-info { + color: #ffffff; + background-color: rgba(0, 0, 0, 0.4); + } + .setting-toggle__label { + color: #705480; + } + .empty-column-indicator, + .error-column { + color: #69428f; + background: #FCF8FF; + } + .empty-column-indicator a, + .error-column a { + color: #69428f; + } + + .emoji-picker-dropdown__menu { + background: #ffffff; + -webkit-box-shadow: 4px 4px 6px rgba(125, 33, 189, .23); + box-shadow: 4px 4px 6px rgba(125, 33, 189, .23); + } + + .emoji-picker-dropdown__modifiers__menu { + background: #ffffff; + -webkit-box-shadow: 1px 2px 6px rgba(125, 33, 189, .2); + box-shadow: 1px 2px 6px rgba(125, 33, 189, .2); + } + .emoji-picker-dropdown__modifiers__menu button { + background: transparent; + } + .emoji-picker-dropdown__modifiers__menu button:hover, + .emoji-picker-dropdown__modifiers__menu button:focus, + .emoji-picker-dropdown__modifiers__menu button:active { + background: rgba(217, 225, 232, 0.4); + } + + .upload-area { + background: rgba(0, 0, 0, 0.8); + } + .upload-area__background { + background: #282c37; + -webkit-box-shadow: 0 0 5px rgba(125, 33, 189, .2); + box-shadow: 0 0 5px rgba(125, 33, 189, .2); + } + .upload-area__content { + color: #d9e1e8; + border: 2px dashed rgba(125, 33, 189, .2); + } + .upload-progress { + color: #69428f; + } + .upload-progress__backdrop { + background: #606984; + } + .upload-progress__tracker { + background: #69428f; + } + + + .modal-root__overlay { + background: rgba(0, 0, 0, 0.7); + } + + .media-modal__nav { + background: rgba(0, 0, 0, 0.5); + color: #ffffff; + } + .media-modal__button { + background-color: #ffffff; + } + .media-modal__button--active { + background-color: #9C77C2; + } + + .boost-modal, + .confirmation-modal, + .report-modal, + .actions-modal, + .mute-modal { + background: #FBF6FF; + color: #705480; + } + + .boost-modal .status__content__spoiler-link, + .confirmation-modal .status__content__spoiler-link, + .report-modal .status__content__spoiler-link, + .actions-modal .status__content__spoiler-link, + .mute-modal .status__content__spoiler-link { + color: #f2f5f7; + } + .actions-modal .status { + background: #ffffff; + border-bottom-color: rgba(112, 84, 128, .5); + } + .actions-modal .dropdown-menu__separator { + border-bottom-color: rgba(112, 84, 128, .5); + } + + .boost-modal__action-bar, + .confirmation-modal__action-bar, + .mute-modal__action-bar { + background: #F0E3FD; + } + .boost-modal__action-bar > div, + .confirmation-modal__action-bar > div, + .mute-modal__action-bar > div { + color: #9C77C2; + } + .report-modal__container { + border-top: 1px solid #d9e1e8; + } + .report-modal__statuses .status__content a { + color: #69428f; + } + .report-modal__statuses .status__content p { + color: #282c37; + } + .report-modal__comment .setting-text { + color: #282c37; + background: #ffffff; + border: 1px solid #d9e1e8; + } + .report-modal__comment .setting-text:focus { + border: 1px solid rgba(112, 84, 128, .5); + } + .report-modal__comment .setting-toggle__label { + color: #282c37; + } + + .actions-modal ul li:not(:empty) a { + color: #705480; + } + .actions-modal ul li:not(:empty) a.active, + .actions-modal ul li:not(:empty) a.active button, .actions-modal ul li:not(:empty) a:hover, + .actions-modal ul li:not(:empty) a:hover button, .actions-modal ul li:not(:empty) a:active, + .actions-modal ul li:not(:empty) a:active button, .actions-modal ul li:not(:empty) a:focus, + .actions-modal ul li:not(:empty) a:focus button { + background: #69428f; + color: #ffffff; + } + .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 { + background-color: transparent; + color: #69428f; + } + .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: #694E78; + } + .loading-bar { + background-color: #69428f; + } + .media-gallery__gifv__label { + color: #ffffff; + background: rgba(0, 0, 0, 0.5); + } + .attachment-list { + border: 1px solid #393f4f; + } + .attachment-list__icon { + color: #606984; + border-right: 1px solid #393f4f; + } + .attachment-list__list a { + color: #69428f; + } + .attachment-list.compact .fa { + color: #606984; + } + + + /* Media Gallery */ + .media-gallery__item-thumbnail { + color: #d9e1e8; + } + /* End Media Gallery */ + + + + /* Status Video Player */ + .status__video-player { + background: #000000; + } + .status__video-player-expand, + .status__video-player-mute { + color: #ffffff; + text-shadow: 0 1px 1px #000000, 1px 0 1px #000000; + } + .status__video-player-spoiler { + color: #ffffff; + text-shadow: 0 1px 1px #000000, 1px 0 1px #000000; + } + + .video-player { + background: transparent; + } + .video-player__controls { + background: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgba(0, 0, 0, 0.85)), color-stop(60%, rgba(0, 0, 0, 0.45)), to(transparent)); + background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0, rgba(0, 0, 0, 0.45) 60%, transparent); + } + .video-player__spoiler { + background: #F0E3FD; + color: #705480; + border-radius: 4px; + } + .video-player__spoiler.active:hover, .video-player__spoiler.active:active, .video-player__spoiler.active:focus { + color: #69428f; + } + .video-player__buttons button { + background: transparent; + color: rgba(255, 255, 255, 0.75); + } + .video-player__buttons button:active, .video-player__buttons button:hover, .video-player__buttons button:focus { + color: #ffffff; + } + .video-player__time-current { + color: #ffffff; + } + .video-player__time-sep, .video-player__time-total { + color: #ffffff; } + .video-player__seek::before { + background: rgba(255, 255, 255, 0.35); + } + .video-player__volume__current { + background: #69428f; + } + .video-player__seek__progress, .video-player__seek__buffer { + background: #69428f; + } + .video-player__seek__buffer { + background: rgba(255, 255, 255, 0.2); } + .video-player__seek__handle { + background: #69428f; + -webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2); + box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2); + } + .video-player__volume__handle { + background: #69428f; + } + .media-spoiler-video-play-icon { + color: rgba(255, 255, 255, 0.8); + } + /* End Video Player */ + + + + + noscript div { + color: #d9e1e8; + } + noscript div a { + color: #69428f; + } + .embed-modal .embed-modal__container .embed-modal__html { + background: #282c37; + color: #ffffff; + } + .embed-modal .embed-modal__container .embed-modal__html:focus { + background: #313543; + } + .account__moved-note { + background: #313543; + border-top: 1px solid #393f4f; + border-bottom: 1px solid #393f4f; + } + .account__moved-note__message { + position: relative; + color: #69428f; + } + .column-inline-form { + background: #F7EFFF; + } + .drawer__backdrop { + background: rgba(0, 0, 0, 0.5); + } + .list-editor { + background: #282c37; + -webkit-box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.4); + box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.4); + } + .list-editor h4 { + background: #444b5d; + } + .list-editor .drawer__inner.backdrop { + -webkit-box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.4); + box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.4); + } + .focal-point__reticle { + -webkit-box-shadow: 0 0 0 9999em rgba(112, 84, 128, .35); + box-shadow: 0 0 0 9999em rgba(112, 84, 128, .35); + } + .floating-action-button { + background: #69428f; + color: #ffffff; + border-radius: 50%; + -webkit-box-shadow: 2px 3px 9px rgba(0, 0, 0, 0.4); + box-shadow: 2px 3px 9px rgba(0, 0, 0, 0.4); } + .floating-action-button:hover, + .floating-action-button:focus, + .floating-action-button:active { + background: #705480; + } + + + + /* ----------開始使用---------- */ + .column-link { + background: #FBF6FF; + color: #69428f; + } + .column-link:hover { + background: #F7EFFF; + color: #694E78; + } + .column-link__badge { + background: #F0E3FD; + } + .column-subheading { + background: #F0E3FD; + color: #694E78; + box-shadow: inset 0px 4px 15px -7px #69428f; + + } + .getting-started__wrapper, + .getting-started, + .flex-spacer { + background: #F0E3FD; + } + .getting-started { + color: #69428f; + } + .getting-started__footer p { + color: #624b6e; + } + .getting-started__footer a, + .getting-started__footer p a { + color: #69428f; + } + .getting-started__footer a:hover, + .getting-started__footer p a:hover { + color: #694E78; + } + + /* ----------Onboarding---------- */ + .onboarding-modal, + .error-modal, + .embed-modal { + background: #FCF8FF; + color: #282c37; + } + + .onboarding-modal__paginator, + .error-modal__footer { + background: #F7EFFF; + } + + .onboarding-modal__paginator .onboarding-modal__nav, + .onboarding-modal__paginator .error-modal__nav, + .error-modal__footer .onboarding-modal__nav, + .error-modal__footer .error-modal__nav { + color: #282C37; + background-color: transparent; + } + .onboarding-modal__paginator .onboarding-modal__nav:hover, .onboarding-modal__paginator .onboarding-modal__nav:focus, .onboarding-modal__paginator .onboarding-modal__nav:active, + .onboarding-modal__paginator .error-modal__nav:hover, + .onboarding-modal__paginator .error-modal__nav:focus, + .onboarding-modal__paginator .error-modal__nav:active, + .error-modal__footer .onboarding-modal__nav:hover, + .error-modal__footer .onboarding-modal__nav:focus, + .error-modal__footer .onboarding-modal__nav:active, + .error-modal__footer .error-modal__nav:hover, + .error-modal__footer .error-modal__nav:focus, + .error-modal__footer .error-modal__nav:active { + color: #694E78; + background-color: #F0E3FD; + } + .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done, .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next, + .onboarding-modal__paginator .error-modal__nav.onboarding-modal__done, + .onboarding-modal__paginator .error-modal__nav.onboarding-modal__next, + .error-modal__footer .onboarding-modal__nav.onboarding-modal__done, + .error-modal__footer .onboarding-modal__nav.onboarding-modal__next, + .error-modal__footer .error-modal__nav.onboarding-modal__done, + .error-modal__footer .error-modal__nav.onboarding-modal__next { + color: #69428f; + } + .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done:hover, + .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done:focus, + .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__done:active, + .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next:hover, + .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next:focus, + .onboarding-modal__paginator .onboarding-modal__nav.onboarding-modal__next:active, + .onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:hover, + .onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:focus, + .onboarding-modal__paginator .error-modal__nav.onboarding-modal__done:active, + .onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:hover, + .onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:focus, + .onboarding-modal__paginator .error-modal__nav.onboarding-modal__next:active, + .error-modal__footer .onboarding-modal__nav.onboarding-modal__done:hover, + .error-modal__footer .onboarding-modal__nav.onboarding-modal__done:focus, + .error-modal__footer .onboarding-modal__nav.onboarding-modal__done:active, + .error-modal__footer .onboarding-modal__nav.onboarding-modal__next:hover, + .error-modal__footer .onboarding-modal__nav.onboarding-modal__next:focus, + .error-modal__footer .onboarding-modal__nav.onboarding-modal__next:active, + .error-modal__footer .error-modal__nav.onboarding-modal__done:hover, + .error-modal__footer .error-modal__nav.onboarding-modal__done:focus, + .error-modal__footer .error-modal__nav.onboarding-modal__done:active, + .error-modal__footer .error-modal__nav.onboarding-modal__next:hover, + .error-modal__footer .error-modal__nav.onboarding-modal__next:focus, + .error-modal__footer .error-modal__nav.onboarding-modal__next:active { + color: #313543; + } + + .onboarding-modal__dot { + background: #69428f; + } + .onboarding-modal__dot:hover { + background: #9C77C2; + } + .onboarding-modal__dot.active { + cursor: default; + background: #694E78; + } + + .onboarding-modal__page h1 { + color: #694E78; + } + .onboarding-modal__page a { + color: #69428f; + } + .onboarding-modal__page a:hover, .onboarding-modal__page a:focus, .onboarding-modal__page a:active { + color: #694E78; + } + .onboarding-modal__page .navigation-bar a { + color: inherit; + } + .onboarding-modal__page p { + color: #69428f; + } + .onboarding-modal__page p strong { + background: #69428f; + color: #d9e1e8; + } + .display-case__label { + color: #694E78; + } + .display-case__case { + background: #69428f; + color: #FFFFFF; + } + + .onboarding-modal__page-two .figure, + .onboarding-modal__page-three .figure, + .onboarding-modal__page-four .figure, + .onboarding-modal__page-five .figure { + background: #F0E3FD; + color: #69428f; + -webkit-box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3); + box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3); + } + + .onboarding-modal__page-four__columns .column-header { + color: #ffffff; + } + + /* ----------Tutorial---------- */ + body.app-body { + background: #FCF8FF; + } + .introduction__pager { + background: #F7EFFF; + } + .introduction__text { + border-top: 2px solid rgba(112, 84, 128, .5) + } + .introduction__text p { + color: #69428f; + } + .introduction__text h3 { + color: #694E78; + } + .introduction__text p code { + color: #FFF; + background:#69428f; + border: 1px solid rgba(112, 84, 128, .1); + } + .introduction__dot { + background: transparent; + border: 1px solid rgba(112, 84, 128, .5); + } + .introduction__dot:hover{ + background: #9C77C2; + } + .introduction__dot.active { + background: #694E78; + } + + /* ----------Explore---------- */ + .memoriam-widget, .page-header { + box-shadow: 0 0 13px rgba(125, 33, 189, .23); + } + .page-header { + background: #FBF6FF; + } + .page-header h1 { + color: #9C77C2; + } + .page-header p { + color: #69428f; + } + .accounts-table tbody td { + border-radius: 4px; + } + .accounts-table__count small { + color: #694E78; + } + .accounts-table__count { + color: #69428f; + } + .accounts-table tbody td { + border-bottom: 1px solid rgba(112, 84, 128, .3); + } + .box-widget, .contact-widget, .landing-page__information.contact-widget { + background: #F7EFFF; + } + .notice-widget { + color: #69428f; + } + .notice-widget a { + color: #694E78; + } + .directory { + border-radius: 4px; + background: #FBF6FF; + } + + .directory__tag a { + background: #FBF6FF; + box-shadow: 0 0 13px rgba(125, 33, 189, .23); + } + .directory__tag h4 .fa { + color: #9C77C2; + } + .directory__tag h4 { + color: #69428f; + } + .directory__tag h4 small { + color: #694E78; + } + .avatar-stack .account__avatar { + width: 40px; + height:40px; + border: 2px solid rgba(112, 84, 128, .3); + } + + + .directory__tag a:focus, + .directory__tag a:hover { + color: #69428f; + background: #F7EFFF; + } + .directory__tag.active h4, + .directory__tag.active h4 .fa, + .directory__tag.active h4 small { + color: #FFF; + } + .directory__tag.active a { + background: #69428f; + } + + .getting-started__trends h4, .getting-started__trends .trends__item__current, .trends__item__name a, .trends__item__name strong, .trends__item__name { + color: rgb(234, 222, 236) !important; + } + .getting-started__trends { + background-color: transparent !important; + } + +body, .account__header__bar { + background: #72607c !important; +} + +.endorsements-widget h4, .endorsements-widget .account { + background: #fbf6ff !important; + border-radius: 4px; +} \ No newline at end of file diff --git a/app/javascript/styles/royal-tenenbaums.scss b/app/javascript/styles/royal-tenenbaums.scss new file mode 100644 index 000000000..872caac82 --- /dev/null +++ b/app/javascript/styles/royal-tenenbaums.scss @@ -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; +} \ No newline at end of file diff --git a/app/javascript/styles/sakura.scss b/app/javascript/styles/sakura.scss new file mode 100644 index 000000000..68ff7f6f2 --- /dev/null +++ b/app/javascript/styles/sakura.scss @@ -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,') no-repeat bottom/100% auto !important; + } \ No newline at end of file diff --git a/app/javascript/styles/sleeping-town.scss b/app/javascript/styles/sleeping-town.scss new file mode 100644 index 000000000..830c94000 --- /dev/null +++ b/app/javascript/styles/sleeping-town.scss @@ -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; +} diff --git a/app/javascript/styles/sleeping-town/boost.scss b/app/javascript/styles/sleeping-town/boost.scss new file mode 100644 index 000000000..194146957 --- /dev/null +++ b/app/javascript/styles/sleeping-town/boost.scss @@ -0,0 +1,63 @@ +/* https://github.com/mstdn/mastodon/blob/master/app/javascript/styles/boost.scss */ + +@function hex-color($color) { + @if type-of($color) == 'color' { + $color: str-slice(ie-hex-str($color), 4); + } + @return '%23' + unquote($color) +} + +@mixin boost-svg($color) { + background-image: url("data:image/svg+xml;utf8,"); +} + +@mixin boost-locked-svg($color) { + background-image: url("data:image/svg+xml;utf8,"); +} + +@mixin boost-svg-single($color) { + background-image: url("data:image/svg+xml;utf8,"); +} + +@mixin boost-locked-svg-single($color) { + background-image: url("data:image/svg+xml;utf8,"); +} + +@mixin envelope($color) { + background-image: url("data:image/svg+xml;utf8,"); +} + +button.icon-button i.fa-retweet { + @include boost-svg-single($ui-base-lighter-color); +} + +.status-private button.icon-button i.fa-retweet { + @include boost-locked-svg-single($ui-base-lighter-color); +} + +// Disabled variant +button.icon-button.disabled i.fa-retweet { + @include boost-locked-svg-single(lighten($ui-base-color, 13%)); +} + +// Disabled variant for use with DMs +.status-direct button.icon-button.disabled i.fa-retweet { + @include envelope(lighten($ui-base-color, 16%)); + background-position: center center; + background-repeat: no-repeat; +} + +.no-reduce-motion button.icon-button i.fa-retweet { + transition: none; + background-position: 0px 684px; +} + +.no-reduce-motion button.icon-button.active i.fa-retweet { + @include boost-svg($ui-highlight-color); + transition: background-position 0.6s steps(36); + background-size: 22px 684px; + background-position: 0px 0px; +} +.no-reduce-motion .status-private button.icon-button.active i.fa-retweet { + @include boost-locked-svg($ui-highlight-color); +} diff --git a/app/javascript/styles/sleeping-town/fullwidth-media.scss b/app/javascript/styles/sleeping-town/fullwidth-media.scss new file mode 100644 index 000000000..5e563aebc --- /dev/null +++ b/app/javascript/styles/sleeping-town/fullwidth-media.scss @@ -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; + } +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry.scss b/app/javascript/styles/strawberry.scss new file mode 100644 index 000000000..20d43bb6e --- /dev/null +++ b/app/javascript/styles/strawberry.scss @@ -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'; \ No newline at end of file diff --git a/app/javascript/styles/strawberry/_variables.scss b/app/javascript/styles/strawberry/_variables.scss new file mode 100644 index 000000000..f2af8a364 --- /dev/null +++ b/app/javascript/styles/strawberry/_variables.scss @@ -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; diff --git a/app/javascript/styles/strawberry/about.scss b/app/javascript/styles/strawberry/about.scss new file mode 100644 index 000000000..8b8f147bd --- /dev/null +++ b/app/javascript/styles/strawberry/about.scss @@ -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; +} diff --git a/app/javascript/styles/strawberry/account.scss b/app/javascript/styles/strawberry/account.scss new file mode 100644 index 000000000..960eecc22 --- /dev/null +++ b/app/javascript/styles/strawberry/account.scss @@ -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; +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry/boost.scss b/app/javascript/styles/strawberry/boost.scss new file mode 100644 index 000000000..c62d2d670 --- /dev/null +++ b/app/javascript/styles/strawberry/boost.scss @@ -0,0 +1,10 @@ +button.icon-button i.fa-retweet { + background-image:url("data:image/svg+xml;utf8,") +} +button.icon-button i.fa-retweet:hover, +button.icon-button.active i.fa-retweet { + background-image:url("data:image/svg+xml;utf8,") +} +button.icon-button.disabled i.fa-retweet { + background-image:url("data:image/svg+xml;utf8,") +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry/card.scss b/app/javascript/styles/strawberry/card.scss new file mode 100644 index 000000000..111125169 --- /dev/null +++ b/app/javascript/styles/strawberry/card.scss @@ -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; +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry/column.scss b/app/javascript/styles/strawberry/column.scss new file mode 100644 index 000000000..15be8b840 --- /dev/null +++ b/app/javascript/styles/strawberry/column.scss @@ -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; +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry/covered.scss b/app/javascript/styles/strawberry/covered.scss new file mode 100644 index 000000000..e38a4942b --- /dev/null +++ b/app/javascript/styles/strawberry/covered.scss @@ -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); +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry/drawer.scss b/app/javascript/styles/strawberry/drawer.scss new file mode 100644 index 000000000..69a0ac18a --- /dev/null +++ b/app/javascript/styles/strawberry/drawer.scss @@ -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,') no-repeat bottom/100% auto; +} + +.button { + background: $cbut; +} +.button:hover { + background: $curl; +} +.icon-button.inverted.disabled { + color: $cui2; +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry/get-full-screen.scss b/app/javascript/styles/strawberry/get-full-screen.scss new file mode 100644 index 000000000..e1024ff35 --- /dev/null +++ b/app/javascript/styles/strawberry/get-full-screen.scss @@ -0,0 +1,9 @@ +@media screen and (min-width: 631px) { + .columns-area { + max-width: 100%; + } + .column { + flex: 1 1 100%; + min-width: 280px; + } +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry/hide-filtered.scss b/app/javascript/styles/strawberry/hide-filtered.scss new file mode 100644 index 000000000..e5459525c --- /dev/null +++ b/app/javascript/styles/strawberry/hide-filtered.scss @@ -0,0 +1,3 @@ +.status__wrapper--filtered { + display:none; +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry/input.scss b/app/javascript/styles/strawberry/input.scss new file mode 100644 index 000000000..08a43f706 --- /dev/null +++ b/app/javascript/styles/strawberry/input.scss @@ -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; +} diff --git a/app/javascript/styles/strawberry/landing.scss b/app/javascript/styles/strawberry/landing.scss new file mode 100644 index 000000000..93fa71b4b --- /dev/null +++ b/app/javascript/styles/strawberry/landing.scss @@ -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; +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry/page.scss b/app/javascript/styles/strawberry/page.scss new file mode 100644 index 000000000..87e102096 --- /dev/null +++ b/app/javascript/styles/strawberry/page.scss @@ -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; +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry/radius.scss b/app/javascript/styles/strawberry/radius.scss new file mode 100644 index 000000000..25bbac01a --- /dev/null +++ b/app/javascript/styles/strawberry/radius.scss @@ -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; + } +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry/search.scss b/app/javascript/styles/strawberry/search.scss new file mode 100644 index 000000000..ad16f0641 --- /dev/null +++ b/app/javascript/styles/strawberry/search.scss @@ -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; +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry/shorter-tl.scss b/app/javascript/styles/strawberry/shorter-tl.scss new file mode 100644 index 000000000..40a853b96 --- /dev/null +++ b/app/javascript/styles/strawberry/shorter-tl.scss @@ -0,0 +1,3 @@ +.status.status-public.muted .status__content { + max-height: 4em; +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry/sign_log.scss b/app/javascript/styles/strawberry/sign_log.scss new file mode 100644 index 000000000..73e7a722e --- /dev/null +++ b/app/javascript/styles/strawberry/sign_log.scss @@ -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); +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry/start.scss b/app/javascript/styles/strawberry/start.scss new file mode 100644 index 000000000..a5e46638f --- /dev/null +++ b/app/javascript/styles/strawberry/start.scss @@ -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 +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry/ui.scss b/app/javascript/styles/strawberry/ui.scss new file mode 100644 index 000000000..6c74fb780 --- /dev/null +++ b/app/javascript/styles/strawberry/ui.scss @@ -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; +} \ No newline at end of file diff --git a/app/javascript/styles/strawberry/view-long-img.scss b/app/javascript/styles/strawberry/view-long-img.scss new file mode 100644 index 000000000..9e533680d --- /dev/null +++ b/app/javascript/styles/strawberry/view-long-img.scss @@ -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%; +} \ No newline at end of file diff --git a/app/javascript/styles/swan-lake.scss b/app/javascript/styles/swan-lake.scss new file mode 100644 index 000000000..68c9e7e6f --- /dev/null +++ b/app/javascript/styles/swan-lake.scss @@ -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; +} \ No newline at end of file diff --git a/app/javascript/styles/ubuntu-light.scss b/app/javascript/styles/ubuntu-light.scss new file mode 100644 index 000000000..9fc4ae103 --- /dev/null +++ b/app/javascript/styles/ubuntu-light.scss @@ -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,') no-repeat bottom/100% auto !important; + } diff --git a/app/javascript/styles/ubuntu-terminal.scss b/app/javascript/styles/ubuntu-terminal.scss new file mode 100644 index 000000000..0a40db0e4 --- /dev/null +++ b/app/javascript/styles/ubuntu-terminal.scss @@ -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; + } \ No newline at end of file diff --git a/app/javascript/styles/witches-town.scss b/app/javascript/styles/witches-town.scss new file mode 100644 index 000000000..1c14abadb --- /dev/null +++ b/app/javascript/styles/witches-town.scss @@ -0,0 +1,71 @@ +// Colors +$ui-base-color: #383144; +$ui-base-lighter-color: #D5BDD6; +$ui-primary-color: #E6E6FA; +$ui-secondary-color: #DBD3FF; +$ui-highlight-color: #A288BD; + +// Import defaults +@import 'application'; + +// Columns width +.column { + flex-grow: 1; +} + +// Fonts +@font-face { + font-family: 'witchesAwesome'; + src: url('/witchesAwesome/witchesAwesome.eot?c15'); + src: url('/witchesAwesome/witchesAwesome.eot?c15#iefix') format('embedded-opentype'), + url('/witchesAwesome/witchesAwesome.ttf?c15') format('truetype'), + url('/witchesAwesome/witchesAwesome.woff?c15') format('woff'), + url('/witchesAwesome/witchesAwesome.svg?c15#witchesAwesome') format('svg'); + font-weight: normal; + font-style: normal; +} + +.fa { + font-family: witchesAwesome, FontAwesome; +} + +.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; +} + +.account__action-bar__tab:nth-child(3) > strong > span::before, +.counter:nth-child(3) > a > .counter-number::before { + visibility: visible; + content: "\26e7 666\26e7"; +} */ + +// Boost icon +@function hex-color($color) { + @if type-of($color) == 'color' { + $color: str-slice(ie-hex-str($color), 4); + } + @return '%23' + unquote($color) +} + +button.icon-button i.fa-retweet { + background-image: url("data:image/svg+xml;utf8,%3Csvg width='22px' height='209px' version='1.1' viewBox='0 0 22 209' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238BB82D'%3E%3Cg transform='translate%283 191.19%29'%3E%3Cpath d='m11.202 1.8024c0.053418 0.4381-0.55297 0.8378-1.3543 0.89265-0.80148 0.05463-1.4946-0.25628-1.5479-0.69448-0.02991-0.24647 0.14882-0.48081 0.45348-0.64839 0.029595-0.016136 0.06045-0.03185 0.092459-0.046826 0.22364-0.10483 0.50196-0.17644 0.80873-0.19732 0.80148-0.054841 1.4942 0.25607 1.5476 0.69437m4.0378-0.29825c-1.8351 0.33063-4.0974-2.4486-6.9584-0.95392l-1.0495e-4 1.0546e-4c-0.52978 0.27674-1.0802 0.70017-1.6522 1.3169-1.0516 0.34107-3.4064 0.58553-4.7676 1.4599-1.9651 1.2623 1.362 4.314 2.1613 3.9165 0.52757-0.2625 1.8362-0.81745 2.2249-0.85753l-0.22648-0.31745 0.23361-0.31207c0.35777-0.47743 0.60334-1.0416 0.75604-1.6872l0.13108-0.74289c0.0016792-0.012339 0.0034633-0.024468 0.0048276-0.036807l1.0509 0.12476c-0.11387 0.96679-0.38022 1.8657-0.86424 2.6402 0.49073 0.64122 1.159 1.371 1.9607 1.9757 1.3809 0.96816 2.9499 1.7304 4.3583 1.2366-1.1538-0.5405-2.0283-1.1814-2.6207-1.861-0.6682-0.76693-1.0017-1.6169-0.81912-2.4124 0.13696-0.5965 0.57259-1.0764 1.1973-1.3759 0.20832-0.099769 0.43753-0.1795 0.68373-0.23698 0.93823-0.21884 2.1614-0.17096 3.6984 0.20534 0.14798-0.74658-0.087002-1.4232-0.55223-2.0819'/%3E%3Cpath d='m13.162 4.5324c-0.0018891-7.3825e-4 -0.0036732-0.0012656-0.0055622-0.0017929-0.25744-0.062013-0.48591-0.034276-0.63252-1.0547e-4 -0.15259 0.035647-0.2715 0.11844-0.367 0.18498-0.037151 0.025839-0.071889 0.050201-0.10526 0.069395-0.018681 0.010546-0.02886 0.031428-0.026027 0.052837 0.0028335 0.021304 0.018261 0.038811 0.03904 0.044084l0.20874 0.055263-0.18985 0.68794-0.35808-0.091543c-0.016792-0.0040076-0.035052 0.0011601-0.047961 0.013183-0.012804 0.012234-0.018471 0.030057-0.015427 0.047564 0.03967 0.22116 0.15721 0.46562 0.33982 0.70703 0.0053523 0.0070661 0.012384 0.012656 0.020465 0.016241 2.3313 1.0468 2.2046 3.1414 2.058 5.567-0.018786 0.31006-0.038096 0.63078-0.051634 0.94548-4.198e-4 0.0023202-0.041979 0.23634-0.21115 0.45065-0.13675 0.17328-0.35777 0.25796-0.66232 0.24858l-9.4027-4.219e-4c-0.037256 0-0.073778-0.036807-0.073778-0.074246l-0.056987-5.532c-0.80579-0.14238-2.2168-1.3662-2.6936-2.4784-0.37151 0.52764-0.39786 0.95666-0.39786 1.6508v6.3596c0 1.7855 1.4454 3.2382 3.2222 3.2382h9.3819c1.6916 0 3.6583-1.4301 3.6582-3.2714l0.0072414-0.15472c0.19741-4.2307 0.33993-7.2874-3.6379-8.7342'/%3E%3C/g%3E%3Cg transform='translate%283 133%29'%3E%3Cpath transform='translate%288.5407 5.5337%29 rotate%28180%29 translate%28-8.5407 -5.5337%29' d='m5.8815 8.495c-0.053418-0.4382 0.55297-0.83791 1.3543-0.89275 0.80148-0.05463 1.4946 0.25628 1.5479 0.69448 0.02991 0.24647-0.14882 0.48081-0.45348 0.64839-0.029595 0.016241-0.06045 0.03185-0.092459 0.046826-0.22364 0.10483-0.50196 0.17644-0.80873 0.19732-0.80138 0.054841-1.4942-0.25607-1.5476-0.69427m-4.0376 0.29825c1.8351-0.33073 4.0974 2.4484 6.9583 0.95381l1.0495e-4 -1.0547e-4c0.52978-0.27674 1.0802-0.70017 1.6522-1.3169 1.0516-0.34107 3.4064-0.58553 4.7676-1.4599 1.9651-1.2623-1.362-4.314-2.1613-3.9165-0.52757 0.2625-1.8362 0.81745-2.2249 0.85753l0.22648 0.31745-0.23361 0.31207c-0.35777 0.47743-0.60334 1.0416-0.75604 1.6872l-0.13108 0.74289c-0.0016792 0.012445-0.0034633 0.024468-0.0048276 0.036807l-1.0509-0.12476c0.11387-0.96668 0.38022-1.8655 0.86424-2.6402-0.49073-0.64122-1.159-1.371-1.9607-1.9757-1.3809-0.96816-2.9499-1.7304-4.3583-1.2366 1.1538 0.5405 2.0284 1.1814 2.6207 1.8611 0.6682 0.76683 1.0017 1.6168 0.81912 2.4123-0.13696 0.5965-0.57249 1.0764-1.1973 1.3759-0.20832 0.099769-0.43742 0.1796-0.68373 0.23708-0.93823 0.21873-2.1614 0.17085-3.6984-0.20544-0.14798 0.74658 0.087001 1.4233 0.55234 2.082'/%3E%3Cpath transform='translate%288.7093 11.363%29 rotate%28180%29 translate%28-8.7093 -11.363%29' d='m4.2522 17.424c0.0018891 7.382e-4 0.0036732 0.0012655 0.0055622 0.0017928 0.25744 0.062013 0.48591 0.034276 0.63252 1.055e-4 0.15259-0.035647 0.2715-0.11844 0.367-0.18498 0.037151-0.025839 0.071889-0.050201 0.10526-0.069395 0.018681-0.010546 0.028861-0.031428 0.026027-0.052837-0.0028336-0.021304-0.018261-0.038811-0.03904-0.044084l-0.20874-0.055263 0.18985-0.68794 0.35808 0.091543c0.016792 0.0040076 0.035052-0.0011601 0.047961-0.013183 0.012804-0.012234 0.018471-0.030057 0.015427-0.047564-0.03967-0.22116-0.15721-0.46562-0.33982-0.70703-0.0053523-0.007066-0.012384-0.012656-0.020465-0.016241-2.3313-1.0468-2.2046-3.1414-2.058-5.567 0.018786-0.31006 0.038096-0.63078 0.051634-0.94548 4.1979e-4 -0.0023202 0.041979-0.23634 0.21115-0.45065 0.13675-0.17328 0.35777-0.25796 0.66232-0.24858l9.4027 4.2185e-4c0.037256 0 0.073778 0.036807 0.073778 0.074247l0.056986 5.532c0.80579 0.14238 2.2168 1.3662 2.6936 2.4784 0.37151-0.52764 0.39786-0.95666 0.39786-1.6508v-6.3596c0-1.7855-1.4454-3.2382-3.2222-3.2382h-9.3819c-1.6916 0-3.6583 1.4301-3.6582 3.2714l-0.0072414 0.15472c-0.19741 4.2307-0.33993 7.2874 3.6379 8.7342'/%3E%3C/g%3E%3Cg transform='translate%283 152%29'%3E%3Cpath transform='translate%288.5407 5.5337%29 rotate%28180%29 translate%28-8.5407 -5.5337%29' d='m5.8815 8.495c-0.053418-0.4382 0.55297-0.83791 1.3543-0.89275 0.80148-0.05463 1.4946 0.25628 1.5479 0.69448 0.02991 0.24647-0.14882 0.48081-0.45348 0.64839-0.029595 0.016241-0.06045 0.03185-0.092459 0.046826-0.22364 0.10483-0.50196 0.17644-0.80873 0.19732-0.80138 0.054841-1.4942-0.25607-1.5476-0.69427m-4.0376 0.29825c1.8351-0.33073 4.0974 2.4484 6.9583 0.95381l1.0495e-4 -1.0547e-4c0.52978-0.27674 1.0802-0.70017 1.6522-1.3169 1.0516-0.34107 3.4064-0.58553 4.7676-1.4599 1.9651-1.2623-1.362-4.314-2.1613-3.9165-0.52757 0.2625-1.8362 0.81745-2.2249 0.85753l0.22648 0.31745-0.23361 0.31207c-0.35777 0.47743-0.60334 1.0416-0.75604 1.6872l-0.13108 0.74289c-0.0016792 0.012445-0.0034633 0.024468-0.0048276 0.036807l-1.0509-0.12476c0.11387-0.96668 0.38022-1.8655 0.86424-2.6402-0.49073-0.64122-1.159-1.371-1.9607-1.9757-1.3809-0.96816-2.9499-1.7304-4.3583-1.2366 1.1538 0.5405 2.0284 1.1814 2.6207 1.8611 0.6682 0.76683 1.0017 1.6168 0.81912 2.4123-0.13696 0.5965-0.57249 1.0764-1.1973 1.3759-0.20832 0.099769-0.43742 0.1796-0.68373 0.23708-0.93823 0.21873-2.1614 0.17085-3.6984-0.20544-0.14798 0.74658 0.087001 1.4233 0.55234 2.082'/%3E%3Cpath transform='translate%288.7093 11.363%29 rotate%28180%29 translate%28-8.7093 -11.363%29' d='m4.2522 17.424c0.0018891 7.382e-4 0.0036732 0.0012655 0.0055622 0.0017928 0.25744 0.062013 0.48591 0.034276 0.63252 1.055e-4 0.15259-0.035647 0.2715-0.11844 0.367-0.18498 0.037151-0.025839 0.071889-0.050201 0.10526-0.069395 0.018681-0.010546 0.028861-0.031428 0.026027-0.052837-0.0028336-0.021304-0.018261-0.038811-0.03904-0.044084l-0.20874-0.055263 0.18985-0.68794 0.35808 0.091543c0.016792 0.0040076 0.035052-0.0011601 0.047961-0.013183 0.012804-0.012234 0.018471-0.030057 0.015427-0.047564-0.03967-0.22116-0.15721-0.46562-0.33982-0.70703-0.0053523-0.007066-0.012384-0.012656-0.020465-0.016241-2.3313-1.0468-2.2046-3.1414-2.058-5.567 0.018786-0.31006 0.038096-0.63078 0.051634-0.94548 4.1979e-4 -0.0023202 0.041979-0.23634 0.21115-0.45065 0.13675-0.17328 0.35777-0.25796 0.66232-0.24858l9.4027 4.2185e-4c0.037256 0 0.073778 0.036807 0.073778 0.074247l0.056986 5.532c0.80579 0.14238 2.2168 1.3662 2.6936 2.4784 0.37151-0.52764 0.39786-0.95666 0.39786-1.6508v-6.3596c0-1.7855-1.4454-3.2382-3.2222-3.2382h-9.3819c-1.6916 0-3.6583 1.4301-3.6582 3.2714l-0.0072414 0.15472c-0.19741 4.2307-0.33993 7.2874 3.6379 8.7342'/%3E%3C/g%3E%3Cg transform='translate%283 171.6%29'%3E%3Cpath transform='translate%288.5407 5.5337%29 rotate%28180%29 translate%28-8.5407 -5.5337%29' d='m5.8815 8.495c-0.053418-0.4382 0.55297-0.83791 1.3543-0.89275 0.80148-0.05463 1.4946 0.25628 1.5479 0.69448 0.02991 0.24647-0.14882 0.48081-0.45348 0.64839-0.029595 0.016241-0.06045 0.03185-0.092459 0.046826-0.22364 0.10483-0.50196 0.17644-0.80873 0.19732-0.80138 0.054841-1.4942-0.25607-1.5476-0.69427m-4.0376 0.29825c1.8351-0.33073 4.0974 2.4484 6.9583 0.95381l1.0495e-4 -1.0547e-4c0.52978-0.27674 1.0802-0.70017 1.6522-1.3169 1.0516-0.34107 3.4064-0.58553 4.7676-1.4599 1.9651-1.2623-1.362-4.314-2.1613-3.9165-0.52757 0.2625-1.8362 0.81745-2.2249 0.85753l0.22648 0.31745-0.23361 0.31207c-0.35777 0.47743-0.60334 1.0416-0.75604 1.6872l-0.13108 0.74289c-0.0016792 0.012445-0.0034633 0.024468-0.0048276 0.036807l-1.0509-0.12476c0.11387-0.96668 0.38022-1.8655 0.86424-2.6402-0.49073-0.64122-1.159-1.371-1.9607-1.9757-1.3809-0.96816-2.9499-1.7304-4.3583-1.2366 1.1538 0.5405 2.0284 1.1814 2.6207 1.8611 0.6682 0.76683 1.0017 1.6168 0.81912 2.4123-0.13696 0.5965-0.57249 1.0764-1.1973 1.3759-0.20832 0.099769-0.43742 0.1796-0.68373 0.23708-0.93823 0.21873-2.1614 0.17085-3.6984-0.20544-0.14798 0.74658 0.087001 1.4233 0.55234 2.082'/%3E%3Cpath transform='translate%288.7093 11.363%29 rotate%28180%29 translate%28-8.7093 -11.363%29' d='m4.2522 17.424c0.0018891 7.382e-4 0.0036732 0.0012655 0.0055622 0.0017928 0.25744 0.062013 0.48591 0.034276 0.63252 1.055e-4 0.15259-0.035647 0.2715-0.11844 0.367-0.18498 0.037151-0.025839 0.071889-0.050201 0.10526-0.069395 0.018681-0.010546 0.028861-0.031428 0.026027-0.052837-0.0028336-0.021304-0.018261-0.038811-0.03904-0.044084l-0.20874-0.055263 0.18985-0.68794 0.35808 0.091543c0.016792 0.0040076 0.035052-0.0011601 0.047961-0.013183 0.012804-0.012234 0.018471-0.030057 0.015427-0.047564-0.03967-0.22116-0.15721-0.46562-0.33982-0.70703-0.0053523-0.007066-0.012384-0.012656-0.020465-0.016241-2.3313-1.0468-2.2046-3.1414-2.058-5.567 0.018786-0.31006 0.038096-0.63078 0.051634-0.94548 4.1979e-4 -0.0023202 0.041979-0.23634 0.21115-0.45065 0.13675-0.17328 0.35777-0.25796 0.66232-0.24858l9.4027 4.2185e-4c0.037256 0 0.073778 0.036807 0.073778 0.074247l0.056986 5.532c0.80579 0.14238 2.2168 1.3662 2.6936 2.4784 0.37151-0.52764 0.39786-0.95666 0.39786-1.6508v-6.3596c0-1.7855-1.4454-3.2382-3.2222-3.2382h-9.3819c-1.6916 0-3.6583 1.4301-3.6582 3.2714l-0.0072414 0.15472c-0.19741 4.2307-0.33993 7.2874 3.6379 8.7342'/%3E%3C/g%3E%3Cg transform='translate%283 113.92%29'%3E%3Cpath transform='translate%288.5407 5.5337%29 rotate%28180%29 translate%28-8.5407 -5.5337%29' d='m5.8815 8.495c-0.053418-0.4382 0.55297-0.83791 1.3543-0.89275 0.80148-0.05463 1.4946 0.25628 1.5479 0.69448 0.02991 0.24647-0.14882 0.48081-0.45348 0.64839-0.029595 0.016241-0.06045 0.03185-0.092459 0.046826-0.22364 0.10483-0.50196 0.17644-0.80873 0.19732-0.80138 0.054841-1.4942-0.25607-1.5476-0.69427m-4.0376 0.29825c1.8351-0.33073 4.0974 2.4484 6.9583 0.95381l1.0495e-4 -1.0547e-4c0.52978-0.27674 1.0802-0.70017 1.6522-1.3169 1.0516-0.34107 3.4064-0.58553 4.7676-1.4599 1.9651-1.2623-1.362-4.314-2.1613-3.9165-0.52757 0.2625-1.8362 0.81745-2.2249 0.85753l0.22648 0.31745-0.23361 0.31207c-0.35777 0.47743-0.60334 1.0416-0.75604 1.6872l-0.13108 0.74289c-0.0016792 0.012445-0.0034633 0.024468-0.0048276 0.036807l-1.0509-0.12476c0.11387-0.96668 0.38022-1.8655 0.86424-2.6402-0.49073-0.64122-1.159-1.371-1.9607-1.9757-1.3809-0.96816-2.9499-1.7304-4.3583-1.2366 1.1538 0.5405 2.0284 1.1814 2.6207 1.8611 0.6682 0.76683 1.0017 1.6168 0.81912 2.4123-0.13696 0.5965-0.57249 1.0764-1.1973 1.3759-0.20832 0.099769-0.43742 0.1796-0.68373 0.23708-0.93823 0.21873-2.1614 0.17085-3.6984-0.20544-0.14798 0.74658 0.087001 1.4233 0.55234 2.082'/%3E%3Cpath transform='translate%288.7093 11.363%29 rotate%28180%29 translate%28-8.7093 -11.363%29' d='m4.2522 17.424c0.0018891 7.382e-4 0.0036732 0.0012655 0.0055622 0.0017928 0.25744 0.062013 0.48591 0.034276 0.63252 1.055e-4 0.15259-0.035647 0.2715-0.11844 0.367-0.18498 0.037151-0.025839 0.071889-0.050201 0.10526-0.069395 0.018681-0.010546 0.028861-0.031428 0.026027-0.052837-0.0028336-0.021304-0.018261-0.038811-0.03904-0.044084l-0.20874-0.055263 0.18985-0.68794 0.35808 0.091543c0.016792 0.0040076 0.035052-0.0011601 0.047961-0.013183 0.012804-0.012234 0.018471-0.030057 0.015427-0.047564-0.03967-0.22116-0.15721-0.46562-0.33982-0.70703-0.0053523-0.007066-0.012384-0.012656-0.020465-0.016241-2.3313-1.0468-2.2046-3.1414-2.058-5.567 0.018786-0.31006 0.038096-0.63078 0.051634-0.94548 4.1979e-4 -0.0023202 0.041979-0.23634 0.21115-0.45065 0.13675-0.17328 0.35777-0.25796 0.66232-0.24858l9.4027 4.2185e-4c0.037256 0 0.073778 0.036807 0.073778 0.074247l0.056986 5.532c0.80579 0.14238 2.2168 1.3662 2.6936 2.4784 0.37151-0.52764 0.39786-0.95666 0.39786-1.6508v-6.3596c0-1.7855-1.4454-3.2382-3.2222-3.2382h-9.3819c-1.6916 0-3.6583 1.4301-3.6582 3.2714l-0.0072414 0.15472c-0.19741 4.2307-0.33993 7.2874 3.6379 8.7342'/%3E%3C/g%3E%3Cg transform='translate%281 98.1%29'%3E%3Cpath transform='translate%284.2656 7.449%29 rotate%28180%29 translate%28-4.2656 -7.449%29' d='m6.9773 9.4652c-0.40121 0.049357-0.76727-0.5115-0.81744-1.2526-0.050165-0.74109 0.23466-1.3819 0.63598-1.4314 0.22564-0.027737 0.44025 0.13752 0.59379 0.41932 0.014693 0.027421 0.029175 0.056001 0.042819 0.085531 0.096027 0.20681 0.16151 0.46415 0.18082 0.74795 0.05006 0.74109-0.23456 1.3818-0.63598 1.4311m0.27318 3.7338c-0.30277-1.697 2.2422-3.7891 0.87348-6.4349v-1.0546e-4c-0.25355-0.48998-0.78238-1.9433-1.5057-2.2148-0.65876-0.77832-2.251-2.3071-3.4701-3.1623-1.76-1.2346-3.1705 2.6827-2.5527 3.2255 0.40793 0.35847 1.6273 0.54367 1.7981 0.86174l0.1888-0.30532 0.77388-0.27864c0.43721 0.33073 0.95376 0.5579 1.5451 0.69912l0.68027 0.12118c0.011334 0.0014765 0.022354 0.0031639 0.033583 0.0044295l-0.11408 0.97185c-0.88544-0.10525-1.7085-0.35162-2.4178-0.7992-0.58718 0.45392-1.2555 1.0718-1.8092 1.8133-0.8867 1.277-1.5846 2.7278-1.1325 4.0302 0.49504-1.0668 1.082-1.8757 1.7043-2.4235 0.7022-0.61802 1.4806-0.92629 2.209-0.75755 0.54625 0.12666 0.98577 0.52953 1.26 1.1073 0.091304 0.19268 0.16445 0.40466 0.21703 0.63226 0.20034 0.86765 0.15658 1.999-0.18807 3.4203 0.68363 0.13668 1.3032-0.080574 1.9065-0.51087'/%3E%3Cpath transform='translate%2811.421 6.603%29 rotate%28180%29 translate%28-11.421 -6.603%29' d='m18.57 8.7472l-0.097286 0.24626-0.0010495 0.0042186-0.0011544 0.0044295-0.036522 0.13236-0.78574-0.21894 0.035367-0.12793 0.052789-0.20913 0.016372-0.071294c-0.18901 0.03417-0.45337 0.029108-0.62391 0.30595-0.010914 0.017612-0.15018 0.276-0.15669 0.29572-0.73537 2.2486-3.3947 1.4306-6.0615 1.2467-0.10327-0.007066-3.5133-0.39791-3.5133-0.39791-0.50973-0.10304-0.43837-0.34466-0.43837-0.44042v-6.3596c0-0.098925 0.080495-0.17971 0.17883-0.17971h7.1843c-0.24705-0.62603 0.064333-1.5771 0.18439-1.8982 0.13444-0.35932 0.31757-0.72717 0.54384-1.0547h-7.9125c-1.7217 0-3.1174 1.4026-3.1174 3.1327v6.3596c0 1.7301 1.3957 3.1327 3.1174 3.1327 0 0 3.036 0.32725 4.1752 0.39254 2.8306 0.16189 6.0343 0.7992 7.4377-3.0978 0.054678-0.22907 0.094873-0.59323 0.055832-0.7624-0.046492-0.20144-0.16802-0.31375-0.23666-0.43504'/%3E%3C/g%3E%3Cg transform='translate%281 78.28%29'%3E%3Cpath transform='translate%286.1503 9.7893%29 rotate%28180%29 translate%28-6.1503 -9.7893%29' d='m9.3801 8.4249c-0.24894 0.32008-0.90244 0.18361-1.4593-0.3049-0.55706-0.4883-0.80663-1.1438-0.55759-1.4638 0.1401-0.18013 0.40814-0.21557 0.71501-0.1254 0.0297 0.008859 0.059925 0.018773 0.09036 0.029846h1.0495e-4c0.21336 0.078043 0.44078 0.21356 0.65393 0.40045 0.55696 0.48851 0.80663 1.1438 0.55748 1.4638m2.8205 2.4461c-1.4082-0.98482-1.0807-4.2724-3.9102-5.1708h-1.0495e-4c-0.524-0.16632-1.9206-0.81819-2.6231-0.49621-1.0135-0.082367-3.1013-0.70798-4.565-0.44643-2.1131 0.37756-0.3542 4.1498 0.46471 4.0947 0.54048-0.03649 1.4191-0.095867 1.7636 0.0076988l-0.081334-0.35003 0.35126-0.74689c0.54184-0.076989 1.067-0.28328 1.5844-0.60367l0.5664-0.3977c0.0090255-0.0069606 0.018051-0.013605 0.026972-0.020776l0.60303 0.76841c-0.7001 0.55463-1.4554 0.96542-2.2721 1.1528-0.095712 0.73825-0.13349 1.6501-0.0032534 2.5678 0.2716 1.533 0.79886 3.0549 2.0352 3.6545-0.40079-1.1061-0.55486-2.095-0.50028-2.9247 0.061709-0.93599 0.39523-1.7072 1.0291-2.1054 0.47541-0.29867 1.0695-0.32599 1.67-0.11242 0.20013 0.071294 0.4009 0.16937 0.59841 0.29298 0.75205 0.471 1.517 1.3021 2.2736 2.552 0.57963-0.38916 0.86487-0.98303 0.98861-1.716'/%3E%3Cpath transform='translate%2810.498 6.9503%29 rotate%28180%29 translate%28-10.498 -6.9503%29' d='m17.813 6.0808c-0.12247-0.2008-0.28346-0.34054-0.43028-0.4324-0.17453-0.10926-0.36501-0.11264-0.49892-0.14965l0.063388 0.10705 0.0022039 0.0037967 0.0023089 0.0039022 0.067271 0.11949-0.70966 0.40361-0.065067-0.11559-0.10978-0.1853-0.038621-0.062224c-0.11313 0.16379-0.20528 0.40097-0.24841 0.71852 0.85784 2.2542 0.50616 3.1966-0.80946 3.8269-0.015532-0.0053786-0.02907-0.0090698-0.038516-0.0090698h-9.3819c-0.098441 0-0.17883-0.080891-0.17883-0.17971v-6.3596c0-0.098925 0.08039-0.17971 0.17883-0.17971h3.3528c0.1463 0 0.29133-0.027315 0.42766-0.080363l0.092984-0.16125c-0.63787-0.59102-1.1325-1.8017-1.2086-2.6698-0.0012594-0.014238-0.0012594-0.027632-0.0023088-0.041553h-2.6625c-1.7217 0-3.1174 1.4026-3.1174 3.1327v6.3596c0 1.7301 1.3957 3.1327 3.1174 3.1327h9.1164c0.18765 0 0.37445-0.029424 0.55328-0.087219 1.3051-0.42175 2.4628-1.1709 2.757-2.4129 0.60807-1.1847 0.66936-2.7502-0.2312-4.6819'/%3E%3C/g%3E%3Cg transform='translate%283 58.46%29'%3E%3Cpath d='m5.794 15.428c-0.053418-0.4382 0.55297-0.83791 1.3543-0.89275 0.80148-0.05463 1.4946 0.25628 1.5479 0.69448 0.02991 0.24647-0.14882 0.48081-0.45348 0.64839-0.029595 0.016241-0.06045 0.03185-0.092459 0.046826-0.22364 0.10483-0.50196 0.17644-0.80873 0.19732-0.80138 0.054841-1.4942-0.25607-1.5476-0.69427m-4.0376 0.29825c1.8351-0.33073 4.0974 2.4484 6.9583 0.95381l1.0495e-4 -1.054e-4c0.52978-0.27674 1.0802-0.70017 1.6522-1.3169 1.0516-0.34107 3.4064-0.58553 4.7676-1.4599 1.9651-1.2623-1.362-4.314-2.1613-3.9165-0.52757 0.2625-1.8362 0.81745-2.2249 0.85753l0.22648 0.31745-0.23361 0.31207c-0.35777 0.47743-0.60334 1.0416-0.75604 1.6872l-0.13108 0.74289c-0.0016792 0.012445-0.0034633 0.024468-0.0048276 0.036807l-1.0509-0.12476c0.11387-0.96668 0.38022-1.8655 0.86424-2.6402-0.49073-0.64122-1.159-1.371-1.9607-1.9757-1.3809-0.96816-2.9499-1.7304-4.3583-1.2366 1.1538 0.5405 2.0284 1.1814 2.6207 1.8611 0.6682 0.76683 1.0017 1.6168 0.81912 2.4123-0.13696 0.5965-0.57249 1.0764-1.1973 1.3759-0.20832 0.099769-0.43742 0.1796-0.68373 0.23708-0.93823 0.21873-2.1614 0.17085-3.6984-0.20544-0.14798 0.74658 0.087002 1.4233 0.55234 2.082'/%3E%3Cpath d='m3.8274 12.701c0.001889 7.383e-4 0.0036732 0.0012656 0.0055622 0.0017929 0.25744 0.062013 0.48591 0.034276 0.63252 1.055e-4 0.15259-0.035647 0.2715-0.11844 0.367-0.18498 0.037151-0.025839 0.071889-0.050201 0.10526-0.069395 0.018681-0.010546 0.028861-0.031428 0.026027-0.052837-0.0028336-0.021304-0.018261-0.038811-0.03904-0.044084l-0.20874-0.055263 0.18985-0.68794 0.35808 0.091543c0.016792 0.0040076 0.035052-0.0011601 0.047961-0.013183 0.012804-0.012234 0.018471-0.030057 0.015427-0.047564-0.03967-0.22116-0.15721-0.46562-0.33982-0.70703-0.0053523-0.0070661-0.012384-0.012656-0.020465-0.016241-2.3313-1.0468-2.2046-3.1414-2.058-5.567 0.018786-0.31006 0.038096-0.63078 0.051634-0.94548 4.1979e-4 -0.0023202 0.041979-0.23634 0.21115-0.45065 0.13675-0.17328 0.35777-0.25796 0.66232-0.24858l9.4027 4.2186e-4c0.037256 0 0.073778 0.036807 0.073778 0.074246l0.056986 5.532c0.80579 0.14238 2.2168 1.3662 2.6936 2.4784 0.37151-0.52764 0.39786-0.95666 0.39786-1.6508v-6.3596c0-1.7855-1.4454-3.2382-3.2222-3.2382h-9.3819c-1.6916 0-3.6583 1.4301-3.6582 3.2714l-0.0072414 0.15472c-0.19741 4.2307-0.33993 7.2874 3.6379 8.7342'/%3E%3C/g%3E%3Cg transform='translate%283 40.64%29'%3E%3Cpath d='m17.377 8.5671c-0.40121 0.049357-0.76727-0.5115-0.81744-1.2526-0.050165-0.74109 0.23466-1.3819 0.63598-1.4314 0.22564-0.027737 0.44025 0.13752 0.59379 0.41932 0.014693 0.027421 0.029175 0.056001 0.042819 0.085531 0.096027 0.20681 0.16151 0.46415 0.18082 0.74795 0.05006 0.74109-0.23456 1.3818-0.63598 1.4311m0.27318 3.7338c-0.30277-1.697 2.2422-3.7891 0.87348-6.4349v-1.0546e-4c-0.25355-0.48998-0.78238-1.9433-1.5057-2.2148-0.65876-0.77832-2.251-2.3071-3.4701-3.1623-1.76-1.2346-3.1705 2.6827-2.5527 3.2255 0.40793 0.35847 1.6273 0.54367 1.7981 0.86174l0.1888-0.30532 0.77388-0.27864c0.43721 0.33073 0.95376 0.5579 1.5451 0.69912l0.68027 0.12118c0.011334 0.0014765 0.022354 0.0031639 0.033583 0.0044295l-0.11408 0.97185c-0.88544-0.10525-1.7085-0.35162-2.4178-0.7992-0.58718 0.45392-1.2555 1.0718-1.8092 1.8133-0.8867 1.277-1.5846 2.7278-1.1325 4.0302 0.49504-1.0668 1.082-1.8757 1.7043-2.4235 0.7022-0.61802 1.4806-0.92629 2.209-0.75755 0.54625 0.12666 0.98577 0.52953 1.26 1.1073 0.091304 0.19268 0.16445 0.40466 0.21703 0.63226 0.20034 0.86765 0.15658 1.999-0.18807 3.4203 0.68363 0.13668 1.3032-0.080574 1.9065-0.51087'/%3E%3Cpath d='m14.66 9.5411l-0.097286 0.24626-0.0010495 0.0042186-0.0011544 0.0044295-0.036522 0.13236-0.78574-0.21894 0.035367-0.12793 0.052789-0.20913 0.016372-0.071294c-0.18901 0.03417-0.45337 0.029108-0.62391 0.30595-0.010914 0.017612-0.15018 0.276-0.15669 0.29572-0.73537 2.2486-3.3947 1.4306-6.0615 1.2467-0.10327-0.0070661-3.5133-0.39791-3.5133-0.39791-0.50973-0.10304-0.43837-0.34466-0.43837-0.44042v-6.3596c0-0.098925 0.080495-0.17971 0.17883-0.17971h7.1843c-0.24705-0.62603 0.064333-1.5771 0.18439-1.8982 0.13444-0.35932 0.31757-0.72717 0.54384-1.0547h-7.9125c-1.7217 0-3.1174 1.4026-3.1174 3.1327v6.3596c0 1.7301 1.3957 3.1327 3.1174 3.1327 0 0 3.036 0.32725 4.1752 0.39254 2.8306 0.16189 6.0343 0.7992 7.4377-3.0978 0.054678-0.22907 0.094873-0.59323 0.055832-0.7624-0.046492-0.20144-0.16802-0.31375-0.23666-0.43504'/%3E%3C/g%3E%3Cg transform='translate%283 20.82%29'%3E%3Cpath d='m15.575 3.8463c-0.24894 0.32008-0.90244 0.18361-1.4593-0.3049-0.55706-0.4883-0.80663-1.1438-0.55759-1.4638 0.1401-0.18013 0.40814-0.21557 0.71501-0.1254 0.0297 0.008859 0.059925 0.018773 0.09036 0.029846h1.049e-4c0.21336 0.078043 0.44078 0.21356 0.65393 0.40045 0.55696 0.48851 0.80663 1.1438 0.55748 1.4638m2.8205 2.4461c-1.4082-0.98482-1.0807-4.2724-3.9102-5.1708h-1.049e-4c-0.524-0.16632-1.9206-0.81819-2.6231-0.49621-1.0135-0.082367-3.1013-0.70798-4.565-0.44643-2.1131 0.37756-0.3542 4.1498 0.46471 4.0947 0.54048-0.03649 1.4191-0.095867 1.7636 0.0076989l-0.081334-0.35003 0.35126-0.74689c0.54184-0.076989 1.067-0.28328 1.5844-0.60367l0.5664-0.3977c0.0090254-0.0069606 0.018051-0.013605 0.026972-0.020776l0.60303 0.76841c-0.7001 0.55463-1.4554 0.96542-2.2721 1.1528-0.095712 0.73825-0.13349 1.6501-0.0032534 2.5678 0.2716 1.533 0.79886 3.0549 2.0352 3.6545-0.40079-1.1061-0.55486-2.095-0.50028-2.9247 0.061709-0.93599 0.39523-1.7072 1.0291-2.1054 0.47541-0.29867 1.0695-0.32599 1.67-0.11242 0.20013 0.071294 0.4009 0.16937 0.59841 0.29298 0.75205 0.471 1.517 1.3021 2.2736 2.552 0.57963-0.38916 0.86487-0.98303 0.98861-1.716'/%3E%3Cpath d='m15.313 7.1802c-0.12247-0.2008-0.28346-0.34054-0.43028-0.4324-0.17453-0.10926-0.36501-0.11264-0.49892-0.14965l0.063388 0.10705 0.0022039 0.0037967 0.0023088 0.0039022 0.067271 0.11949-0.70966 0.40361-0.065067-0.11559-0.10978-0.1853-0.038621-0.062224c-0.11313 0.16379-0.20528 0.40097-0.24841 0.71852 0.85784 2.2542 0.50616 3.1966-0.80946 3.8269-0.015532-0.0053786-0.02907-0.0090699-0.038516-0.0090699h-9.3819c-0.098441 0-0.17883-0.080891-0.17883-0.17971v-6.3596c0-0.098925 0.08039-0.17971 0.17883-0.17971h3.3528c0.1463 0 0.29133-0.027315 0.42766-0.080363l0.092984-0.16125c-0.63787-0.59102-1.1325-1.8017-1.2086-2.6698-0.0012594-0.014238-0.0012594-0.027632-0.0023088-0.041553h-2.6625c-1.7217 0-3.1174 1.4026-3.1174 3.1327v6.3596c0 1.7301 1.3957 3.1327 3.1174 3.1327h9.1164c0.18765 0 0.37445-0.029424 0.55328-0.087218 1.3051-0.42175 2.4628-1.1709 2.757-2.4129 0.60807-1.1847 0.66936-2.7502-0.2312-4.6819'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate%283 1%29' fill='#{hex-color($ui-base-lighter-color)}'%3E%3Cpath d='m11.202 1.8024c0.053418 0.4381-0.55297 0.8378-1.3543 0.89265-0.80148 0.05463-1.4946-0.25628-1.5479-0.69448-0.02991-0.24647 0.14882-0.48081 0.45348-0.64839 0.029595-0.016136 0.06045-0.03185 0.092459-0.046826 0.22364-0.10483 0.50196-0.17644 0.80873-0.19732 0.80148-0.054841 1.4942 0.25607 1.5476 0.69437m4.0378-0.29825c-1.8351 0.33063-4.0974-2.4486-6.9584-0.95392l-1.0495e-4 1.0546e-4c-0.52978 0.27674-1.0802 0.70017-1.6522 1.3169-1.0516 0.34107-3.4064 0.58553-4.7676 1.4599-1.9651 1.2623 1.362 4.314 2.1613 3.9165 0.52757-0.2625 1.8362-0.81745 2.2249-0.85753l-0.22648-0.31745 0.23361-0.31207c0.35777-0.47743 0.60334-1.0416 0.75604-1.6872l0.13108-0.74289c0.0016792-0.012339 0.0034633-0.024468 0.0048276-0.036807l1.0509 0.12476c-0.11387 0.96679-0.38022 1.8657-0.86424 2.6402 0.49073 0.64122 1.159 1.371 1.9607 1.9757 1.3809 0.96816 2.9499 1.7304 4.3583 1.2366-1.1538-0.5405-2.0283-1.1814-2.6207-1.861-0.6682-0.76693-1.0017-1.6169-0.81912-2.4124 0.13696-0.5965 0.57259-1.0764 1.1973-1.3759 0.20832-0.099769 0.43753-0.1795 0.68373-0.23698 0.93823-0.21884 2.1614-0.17096 3.6984 0.20534 0.14798-0.74658-0.087002-1.4232-0.55223-2.0819'/%3E%3Cpath d='m13.162 4.5324c-0.0018891-7.3825e-4 -0.0036732-0.0012656-0.0055622-0.0017929-0.25744-0.062013-0.48591-0.034276-0.63252-1.0547e-4 -0.15259 0.035647-0.2715 0.11844-0.367 0.18498-0.037151 0.025839-0.071889 0.050201-0.10526 0.069395-0.018681 0.010546-0.02886 0.031428-0.026027 0.052837 0.0028335 0.021304 0.018261 0.038811 0.03904 0.044084l0.20874 0.055263-0.18985 0.68794-0.35808-0.091543c-0.016792-0.0040076-0.035052 0.0011601-0.047961 0.013183-0.012804 0.012234-0.018471 0.030057-0.015427 0.047564 0.03967 0.22116 0.15721 0.46562 0.33982 0.70703 0.0053523 0.0070661 0.012384 0.012656 0.020465 0.016241 2.3313 1.0468 2.2046 3.1414 2.058 5.567-0.018786 0.31006-0.038096 0.63078-0.051634 0.94548-4.198e-4 0.0023202-0.041979 0.23634-0.21115 0.45065-0.13675 0.17328-0.35777 0.25796-0.66232 0.24858l-9.4027-4.219e-4c-0.037256 0-0.073778-0.036807-0.073778-0.074246l-0.056987-5.532c-0.80579-0.14238-2.2168-1.3662-2.6936-2.4784-0.37151 0.52764-0.39786 0.95666-0.39786 1.6508v6.3596c0 1.7855 1.4454 3.2382 3.2222 3.2382h9.3819c1.6916 0 3.6583-1.4301 3.6582-3.2714l0.0072414-0.15472c0.19741-4.2307 0.33993-7.2874-3.6379-8.7342'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + + &:hover { + background-image: url("data:image/svg+xml;utf8,%3Csvg width='22px' height='209px' version='1.1' viewBox='0 0 22 209' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238BB82D'%3E%3Cg transform='translate%283 191.19%29'%3E%3Cpath d='m11.202 1.8024c0.053418 0.4381-0.55297 0.8378-1.3543 0.89265-0.80148 0.05463-1.4946-0.25628-1.5479-0.69448-0.02991-0.24647 0.14882-0.48081 0.45348-0.64839 0.029595-0.016136 0.06045-0.03185 0.092459-0.046826 0.22364-0.10483 0.50196-0.17644 0.80873-0.19732 0.80148-0.054841 1.4942 0.25607 1.5476 0.69437m4.0378-0.29825c-1.8351 0.33063-4.0974-2.4486-6.9584-0.95392l-1.0495e-4 1.0546e-4c-0.52978 0.27674-1.0802 0.70017-1.6522 1.3169-1.0516 0.34107-3.4064 0.58553-4.7676 1.4599-1.9651 1.2623 1.362 4.314 2.1613 3.9165 0.52757-0.2625 1.8362-0.81745 2.2249-0.85753l-0.22648-0.31745 0.23361-0.31207c0.35777-0.47743 0.60334-1.0416 0.75604-1.6872l0.13108-0.74289c0.0016792-0.012339 0.0034633-0.024468 0.0048276-0.036807l1.0509 0.12476c-0.11387 0.96679-0.38022 1.8657-0.86424 2.6402 0.49073 0.64122 1.159 1.371 1.9607 1.9757 1.3809 0.96816 2.9499 1.7304 4.3583 1.2366-1.1538-0.5405-2.0283-1.1814-2.6207-1.861-0.6682-0.76693-1.0017-1.6169-0.81912-2.4124 0.13696-0.5965 0.57259-1.0764 1.1973-1.3759 0.20832-0.099769 0.43753-0.1795 0.68373-0.23698 0.93823-0.21884 2.1614-0.17096 3.6984 0.20534 0.14798-0.74658-0.087002-1.4232-0.55223-2.0819'/%3E%3Cpath d='m13.162 4.5324c-0.0018891-7.3825e-4 -0.0036732-0.0012656-0.0055622-0.0017929-0.25744-0.062013-0.48591-0.034276-0.63252-1.0547e-4 -0.15259 0.035647-0.2715 0.11844-0.367 0.18498-0.037151 0.025839-0.071889 0.050201-0.10526 0.069395-0.018681 0.010546-0.02886 0.031428-0.026027 0.052837 0.0028335 0.021304 0.018261 0.038811 0.03904 0.044084l0.20874 0.055263-0.18985 0.68794-0.35808-0.091543c-0.016792-0.0040076-0.035052 0.0011601-0.047961 0.013183-0.012804 0.012234-0.018471 0.030057-0.015427 0.047564 0.03967 0.22116 0.15721 0.46562 0.33982 0.70703 0.0053523 0.0070661 0.012384 0.012656 0.020465 0.016241 2.3313 1.0468 2.2046 3.1414 2.058 5.567-0.018786 0.31006-0.038096 0.63078-0.051634 0.94548-4.198e-4 0.0023202-0.041979 0.23634-0.21115 0.45065-0.13675 0.17328-0.35777 0.25796-0.66232 0.24858l-9.4027-4.219e-4c-0.037256 0-0.073778-0.036807-0.073778-0.074246l-0.056987-5.532c-0.80579-0.14238-2.2168-1.3662-2.6936-2.4784-0.37151 0.52764-0.39786 0.95666-0.39786 1.6508v6.3596c0 1.7855 1.4454 3.2382 3.2222 3.2382h9.3819c1.6916 0 3.6583-1.4301 3.6582-3.2714l0.0072414-0.15472c0.19741-4.2307 0.33993-7.2874-3.6379-8.7342'/%3E%3C/g%3E%3Cg transform='translate%283 133%29'%3E%3Cpath transform='translate%288.5407 5.5337%29 rotate%28180%29 translate%28-8.5407 -5.5337%29' d='m5.8815 8.495c-0.053418-0.4382 0.55297-0.83791 1.3543-0.89275 0.80148-0.05463 1.4946 0.25628 1.5479 0.69448 0.02991 0.24647-0.14882 0.48081-0.45348 0.64839-0.029595 0.016241-0.06045 0.03185-0.092459 0.046826-0.22364 0.10483-0.50196 0.17644-0.80873 0.19732-0.80138 0.054841-1.4942-0.25607-1.5476-0.69427m-4.0376 0.29825c1.8351-0.33073 4.0974 2.4484 6.9583 0.95381l1.0495e-4 -1.0547e-4c0.52978-0.27674 1.0802-0.70017 1.6522-1.3169 1.0516-0.34107 3.4064-0.58553 4.7676-1.4599 1.9651-1.2623-1.362-4.314-2.1613-3.9165-0.52757 0.2625-1.8362 0.81745-2.2249 0.85753l0.22648 0.31745-0.23361 0.31207c-0.35777 0.47743-0.60334 1.0416-0.75604 1.6872l-0.13108 0.74289c-0.0016792 0.012445-0.0034633 0.024468-0.0048276 0.036807l-1.0509-0.12476c0.11387-0.96668 0.38022-1.8655 0.86424-2.6402-0.49073-0.64122-1.159-1.371-1.9607-1.9757-1.3809-0.96816-2.9499-1.7304-4.3583-1.2366 1.1538 0.5405 2.0284 1.1814 2.6207 1.8611 0.6682 0.76683 1.0017 1.6168 0.81912 2.4123-0.13696 0.5965-0.57249 1.0764-1.1973 1.3759-0.20832 0.099769-0.43742 0.1796-0.68373 0.23708-0.93823 0.21873-2.1614 0.17085-3.6984-0.20544-0.14798 0.74658 0.087001 1.4233 0.55234 2.082'/%3E%3Cpath transform='translate%288.7093 11.363%29 rotate%28180%29 translate%28-8.7093 -11.363%29' d='m4.2522 17.424c0.0018891 7.382e-4 0.0036732 0.0012655 0.0055622 0.0017928 0.25744 0.062013 0.48591 0.034276 0.63252 1.055e-4 0.15259-0.035647 0.2715-0.11844 0.367-0.18498 0.037151-0.025839 0.071889-0.050201 0.10526-0.069395 0.018681-0.010546 0.028861-0.031428 0.026027-0.052837-0.0028336-0.021304-0.018261-0.038811-0.03904-0.044084l-0.20874-0.055263 0.18985-0.68794 0.35808 0.091543c0.016792 0.0040076 0.035052-0.0011601 0.047961-0.013183 0.012804-0.012234 0.018471-0.030057 0.015427-0.047564-0.03967-0.22116-0.15721-0.46562-0.33982-0.70703-0.0053523-0.007066-0.012384-0.012656-0.020465-0.016241-2.3313-1.0468-2.2046-3.1414-2.058-5.567 0.018786-0.31006 0.038096-0.63078 0.051634-0.94548 4.1979e-4 -0.0023202 0.041979-0.23634 0.21115-0.45065 0.13675-0.17328 0.35777-0.25796 0.66232-0.24858l9.4027 4.2185e-4c0.037256 0 0.073778 0.036807 0.073778 0.074247l0.056986 5.532c0.80579 0.14238 2.2168 1.3662 2.6936 2.4784 0.37151-0.52764 0.39786-0.95666 0.39786-1.6508v-6.3596c0-1.7855-1.4454-3.2382-3.2222-3.2382h-9.3819c-1.6916 0-3.6583 1.4301-3.6582 3.2714l-0.0072414 0.15472c-0.19741 4.2307-0.33993 7.2874 3.6379 8.7342'/%3E%3C/g%3E%3Cg transform='translate%283 152%29'%3E%3Cpath transform='translate%288.5407 5.5337%29 rotate%28180%29 translate%28-8.5407 -5.5337%29' d='m5.8815 8.495c-0.053418-0.4382 0.55297-0.83791 1.3543-0.89275 0.80148-0.05463 1.4946 0.25628 1.5479 0.69448 0.02991 0.24647-0.14882 0.48081-0.45348 0.64839-0.029595 0.016241-0.06045 0.03185-0.092459 0.046826-0.22364 0.10483-0.50196 0.17644-0.80873 0.19732-0.80138 0.054841-1.4942-0.25607-1.5476-0.69427m-4.0376 0.29825c1.8351-0.33073 4.0974 2.4484 6.9583 0.95381l1.0495e-4 -1.0547e-4c0.52978-0.27674 1.0802-0.70017 1.6522-1.3169 1.0516-0.34107 3.4064-0.58553 4.7676-1.4599 1.9651-1.2623-1.362-4.314-2.1613-3.9165-0.52757 0.2625-1.8362 0.81745-2.2249 0.85753l0.22648 0.31745-0.23361 0.31207c-0.35777 0.47743-0.60334 1.0416-0.75604 1.6872l-0.13108 0.74289c-0.0016792 0.012445-0.0034633 0.024468-0.0048276 0.036807l-1.0509-0.12476c0.11387-0.96668 0.38022-1.8655 0.86424-2.6402-0.49073-0.64122-1.159-1.371-1.9607-1.9757-1.3809-0.96816-2.9499-1.7304-4.3583-1.2366 1.1538 0.5405 2.0284 1.1814 2.6207 1.8611 0.6682 0.76683 1.0017 1.6168 0.81912 2.4123-0.13696 0.5965-0.57249 1.0764-1.1973 1.3759-0.20832 0.099769-0.43742 0.1796-0.68373 0.23708-0.93823 0.21873-2.1614 0.17085-3.6984-0.20544-0.14798 0.74658 0.087001 1.4233 0.55234 2.082'/%3E%3Cpath transform='translate%288.7093 11.363%29 rotate%28180%29 translate%28-8.7093 -11.363%29' d='m4.2522 17.424c0.0018891 7.382e-4 0.0036732 0.0012655 0.0055622 0.0017928 0.25744 0.062013 0.48591 0.034276 0.63252 1.055e-4 0.15259-0.035647 0.2715-0.11844 0.367-0.18498 0.037151-0.025839 0.071889-0.050201 0.10526-0.069395 0.018681-0.010546 0.028861-0.031428 0.026027-0.052837-0.0028336-0.021304-0.018261-0.038811-0.03904-0.044084l-0.20874-0.055263 0.18985-0.68794 0.35808 0.091543c0.016792 0.0040076 0.035052-0.0011601 0.047961-0.013183 0.012804-0.012234 0.018471-0.030057 0.015427-0.047564-0.03967-0.22116-0.15721-0.46562-0.33982-0.70703-0.0053523-0.007066-0.012384-0.012656-0.020465-0.016241-2.3313-1.0468-2.2046-3.1414-2.058-5.567 0.018786-0.31006 0.038096-0.63078 0.051634-0.94548 4.1979e-4 -0.0023202 0.041979-0.23634 0.21115-0.45065 0.13675-0.17328 0.35777-0.25796 0.66232-0.24858l9.4027 4.2185e-4c0.037256 0 0.073778 0.036807 0.073778 0.074247l0.056986 5.532c0.80579 0.14238 2.2168 1.3662 2.6936 2.4784 0.37151-0.52764 0.39786-0.95666 0.39786-1.6508v-6.3596c0-1.7855-1.4454-3.2382-3.2222-3.2382h-9.3819c-1.6916 0-3.6583 1.4301-3.6582 3.2714l-0.0072414 0.15472c-0.19741 4.2307-0.33993 7.2874 3.6379 8.7342'/%3E%3C/g%3E%3Cg transform='translate%283 171.6%29'%3E%3Cpath transform='translate%288.5407 5.5337%29 rotate%28180%29 translate%28-8.5407 -5.5337%29' d='m5.8815 8.495c-0.053418-0.4382 0.55297-0.83791 1.3543-0.89275 0.80148-0.05463 1.4946 0.25628 1.5479 0.69448 0.02991 0.24647-0.14882 0.48081-0.45348 0.64839-0.029595 0.016241-0.06045 0.03185-0.092459 0.046826-0.22364 0.10483-0.50196 0.17644-0.80873 0.19732-0.80138 0.054841-1.4942-0.25607-1.5476-0.69427m-4.0376 0.29825c1.8351-0.33073 4.0974 2.4484 6.9583 0.95381l1.0495e-4 -1.0547e-4c0.52978-0.27674 1.0802-0.70017 1.6522-1.3169 1.0516-0.34107 3.4064-0.58553 4.7676-1.4599 1.9651-1.2623-1.362-4.314-2.1613-3.9165-0.52757 0.2625-1.8362 0.81745-2.2249 0.85753l0.22648 0.31745-0.23361 0.31207c-0.35777 0.47743-0.60334 1.0416-0.75604 1.6872l-0.13108 0.74289c-0.0016792 0.012445-0.0034633 0.024468-0.0048276 0.036807l-1.0509-0.12476c0.11387-0.96668 0.38022-1.8655 0.86424-2.6402-0.49073-0.64122-1.159-1.371-1.9607-1.9757-1.3809-0.96816-2.9499-1.7304-4.3583-1.2366 1.1538 0.5405 2.0284 1.1814 2.6207 1.8611 0.6682 0.76683 1.0017 1.6168 0.81912 2.4123-0.13696 0.5965-0.57249 1.0764-1.1973 1.3759-0.20832 0.099769-0.43742 0.1796-0.68373 0.23708-0.93823 0.21873-2.1614 0.17085-3.6984-0.20544-0.14798 0.74658 0.087001 1.4233 0.55234 2.082'/%3E%3Cpath transform='translate%288.7093 11.363%29 rotate%28180%29 translate%28-8.7093 -11.363%29' d='m4.2522 17.424c0.0018891 7.382e-4 0.0036732 0.0012655 0.0055622 0.0017928 0.25744 0.062013 0.48591 0.034276 0.63252 1.055e-4 0.15259-0.035647 0.2715-0.11844 0.367-0.18498 0.037151-0.025839 0.071889-0.050201 0.10526-0.069395 0.018681-0.010546 0.028861-0.031428 0.026027-0.052837-0.0028336-0.021304-0.018261-0.038811-0.03904-0.044084l-0.20874-0.055263 0.18985-0.68794 0.35808 0.091543c0.016792 0.0040076 0.035052-0.0011601 0.047961-0.013183 0.012804-0.012234 0.018471-0.030057 0.015427-0.047564-0.03967-0.22116-0.15721-0.46562-0.33982-0.70703-0.0053523-0.007066-0.012384-0.012656-0.020465-0.016241-2.3313-1.0468-2.2046-3.1414-2.058-5.567 0.018786-0.31006 0.038096-0.63078 0.051634-0.94548 4.1979e-4 -0.0023202 0.041979-0.23634 0.21115-0.45065 0.13675-0.17328 0.35777-0.25796 0.66232-0.24858l9.4027 4.2185e-4c0.037256 0 0.073778 0.036807 0.073778 0.074247l0.056986 5.532c0.80579 0.14238 2.2168 1.3662 2.6936 2.4784 0.37151-0.52764 0.39786-0.95666 0.39786-1.6508v-6.3596c0-1.7855-1.4454-3.2382-3.2222-3.2382h-9.3819c-1.6916 0-3.6583 1.4301-3.6582 3.2714l-0.0072414 0.15472c-0.19741 4.2307-0.33993 7.2874 3.6379 8.7342'/%3E%3C/g%3E%3Cg transform='translate%283 113.92%29'%3E%3Cpath transform='translate%288.5407 5.5337%29 rotate%28180%29 translate%28-8.5407 -5.5337%29' d='m5.8815 8.495c-0.053418-0.4382 0.55297-0.83791 1.3543-0.89275 0.80148-0.05463 1.4946 0.25628 1.5479 0.69448 0.02991 0.24647-0.14882 0.48081-0.45348 0.64839-0.029595 0.016241-0.06045 0.03185-0.092459 0.046826-0.22364 0.10483-0.50196 0.17644-0.80873 0.19732-0.80138 0.054841-1.4942-0.25607-1.5476-0.69427m-4.0376 0.29825c1.8351-0.33073 4.0974 2.4484 6.9583 0.95381l1.0495e-4 -1.0547e-4c0.52978-0.27674 1.0802-0.70017 1.6522-1.3169 1.0516-0.34107 3.4064-0.58553 4.7676-1.4599 1.9651-1.2623-1.362-4.314-2.1613-3.9165-0.52757 0.2625-1.8362 0.81745-2.2249 0.85753l0.22648 0.31745-0.23361 0.31207c-0.35777 0.47743-0.60334 1.0416-0.75604 1.6872l-0.13108 0.74289c-0.0016792 0.012445-0.0034633 0.024468-0.0048276 0.036807l-1.0509-0.12476c0.11387-0.96668 0.38022-1.8655 0.86424-2.6402-0.49073-0.64122-1.159-1.371-1.9607-1.9757-1.3809-0.96816-2.9499-1.7304-4.3583-1.2366 1.1538 0.5405 2.0284 1.1814 2.6207 1.8611 0.6682 0.76683 1.0017 1.6168 0.81912 2.4123-0.13696 0.5965-0.57249 1.0764-1.1973 1.3759-0.20832 0.099769-0.43742 0.1796-0.68373 0.23708-0.93823 0.21873-2.1614 0.17085-3.6984-0.20544-0.14798 0.74658 0.087001 1.4233 0.55234 2.082'/%3E%3Cpath transform='translate%288.7093 11.363%29 rotate%28180%29 translate%28-8.7093 -11.363%29' d='m4.2522 17.424c0.0018891 7.382e-4 0.0036732 0.0012655 0.0055622 0.0017928 0.25744 0.062013 0.48591 0.034276 0.63252 1.055e-4 0.15259-0.035647 0.2715-0.11844 0.367-0.18498 0.037151-0.025839 0.071889-0.050201 0.10526-0.069395 0.018681-0.010546 0.028861-0.031428 0.026027-0.052837-0.0028336-0.021304-0.018261-0.038811-0.03904-0.044084l-0.20874-0.055263 0.18985-0.68794 0.35808 0.091543c0.016792 0.0040076 0.035052-0.0011601 0.047961-0.013183 0.012804-0.012234 0.018471-0.030057 0.015427-0.047564-0.03967-0.22116-0.15721-0.46562-0.33982-0.70703-0.0053523-0.007066-0.012384-0.012656-0.020465-0.016241-2.3313-1.0468-2.2046-3.1414-2.058-5.567 0.018786-0.31006 0.038096-0.63078 0.051634-0.94548 4.1979e-4 -0.0023202 0.041979-0.23634 0.21115-0.45065 0.13675-0.17328 0.35777-0.25796 0.66232-0.24858l9.4027 4.2185e-4c0.037256 0 0.073778 0.036807 0.073778 0.074247l0.056986 5.532c0.80579 0.14238 2.2168 1.3662 2.6936 2.4784 0.37151-0.52764 0.39786-0.95666 0.39786-1.6508v-6.3596c0-1.7855-1.4454-3.2382-3.2222-3.2382h-9.3819c-1.6916 0-3.6583 1.4301-3.6582 3.2714l-0.0072414 0.15472c-0.19741 4.2307-0.33993 7.2874 3.6379 8.7342'/%3E%3C/g%3E%3Cg transform='translate%281 98.1%29'%3E%3Cpath transform='translate%284.2656 7.449%29 rotate%28180%29 translate%28-4.2656 -7.449%29' d='m6.9773 9.4652c-0.40121 0.049357-0.76727-0.5115-0.81744-1.2526-0.050165-0.74109 0.23466-1.3819 0.63598-1.4314 0.22564-0.027737 0.44025 0.13752 0.59379 0.41932 0.014693 0.027421 0.029175 0.056001 0.042819 0.085531 0.096027 0.20681 0.16151 0.46415 0.18082 0.74795 0.05006 0.74109-0.23456 1.3818-0.63598 1.4311m0.27318 3.7338c-0.30277-1.697 2.2422-3.7891 0.87348-6.4349v-1.0546e-4c-0.25355-0.48998-0.78238-1.9433-1.5057-2.2148-0.65876-0.77832-2.251-2.3071-3.4701-3.1623-1.76-1.2346-3.1705 2.6827-2.5527 3.2255 0.40793 0.35847 1.6273 0.54367 1.7981 0.86174l0.1888-0.30532 0.77388-0.27864c0.43721 0.33073 0.95376 0.5579 1.5451 0.69912l0.68027 0.12118c0.011334 0.0014765 0.022354 0.0031639 0.033583 0.0044295l-0.11408 0.97185c-0.88544-0.10525-1.7085-0.35162-2.4178-0.7992-0.58718 0.45392-1.2555 1.0718-1.8092 1.8133-0.8867 1.277-1.5846 2.7278-1.1325 4.0302 0.49504-1.0668 1.082-1.8757 1.7043-2.4235 0.7022-0.61802 1.4806-0.92629 2.209-0.75755 0.54625 0.12666 0.98577 0.52953 1.26 1.1073 0.091304 0.19268 0.16445 0.40466 0.21703 0.63226 0.20034 0.86765 0.15658 1.999-0.18807 3.4203 0.68363 0.13668 1.3032-0.080574 1.9065-0.51087'/%3E%3Cpath transform='translate%2811.421 6.603%29 rotate%28180%29 translate%28-11.421 -6.603%29' d='m18.57 8.7472l-0.097286 0.24626-0.0010495 0.0042186-0.0011544 0.0044295-0.036522 0.13236-0.78574-0.21894 0.035367-0.12793 0.052789-0.20913 0.016372-0.071294c-0.18901 0.03417-0.45337 0.029108-0.62391 0.30595-0.010914 0.017612-0.15018 0.276-0.15669 0.29572-0.73537 2.2486-3.3947 1.4306-6.0615 1.2467-0.10327-0.007066-3.5133-0.39791-3.5133-0.39791-0.50973-0.10304-0.43837-0.34466-0.43837-0.44042v-6.3596c0-0.098925 0.080495-0.17971 0.17883-0.17971h7.1843c-0.24705-0.62603 0.064333-1.5771 0.18439-1.8982 0.13444-0.35932 0.31757-0.72717 0.54384-1.0547h-7.9125c-1.7217 0-3.1174 1.4026-3.1174 3.1327v6.3596c0 1.7301 1.3957 3.1327 3.1174 3.1327 0 0 3.036 0.32725 4.1752 0.39254 2.8306 0.16189 6.0343 0.7992 7.4377-3.0978 0.054678-0.22907 0.094873-0.59323 0.055832-0.7624-0.046492-0.20144-0.16802-0.31375-0.23666-0.43504'/%3E%3C/g%3E%3Cg transform='translate%281 78.28%29'%3E%3Cpath transform='translate%286.1503 9.7893%29 rotate%28180%29 translate%28-6.1503 -9.7893%29' d='m9.3801 8.4249c-0.24894 0.32008-0.90244 0.18361-1.4593-0.3049-0.55706-0.4883-0.80663-1.1438-0.55759-1.4638 0.1401-0.18013 0.40814-0.21557 0.71501-0.1254 0.0297 0.008859 0.059925 0.018773 0.09036 0.029846h1.0495e-4c0.21336 0.078043 0.44078 0.21356 0.65393 0.40045 0.55696 0.48851 0.80663 1.1438 0.55748 1.4638m2.8205 2.4461c-1.4082-0.98482-1.0807-4.2724-3.9102-5.1708h-1.0495e-4c-0.524-0.16632-1.9206-0.81819-2.6231-0.49621-1.0135-0.082367-3.1013-0.70798-4.565-0.44643-2.1131 0.37756-0.3542 4.1498 0.46471 4.0947 0.54048-0.03649 1.4191-0.095867 1.7636 0.0076988l-0.081334-0.35003 0.35126-0.74689c0.54184-0.076989 1.067-0.28328 1.5844-0.60367l0.5664-0.3977c0.0090255-0.0069606 0.018051-0.013605 0.026972-0.020776l0.60303 0.76841c-0.7001 0.55463-1.4554 0.96542-2.2721 1.1528-0.095712 0.73825-0.13349 1.6501-0.0032534 2.5678 0.2716 1.533 0.79886 3.0549 2.0352 3.6545-0.40079-1.1061-0.55486-2.095-0.50028-2.9247 0.061709-0.93599 0.39523-1.7072 1.0291-2.1054 0.47541-0.29867 1.0695-0.32599 1.67-0.11242 0.20013 0.071294 0.4009 0.16937 0.59841 0.29298 0.75205 0.471 1.517 1.3021 2.2736 2.552 0.57963-0.38916 0.86487-0.98303 0.98861-1.716'/%3E%3Cpath transform='translate%2810.498 6.9503%29 rotate%28180%29 translate%28-10.498 -6.9503%29' d='m17.813 6.0808c-0.12247-0.2008-0.28346-0.34054-0.43028-0.4324-0.17453-0.10926-0.36501-0.11264-0.49892-0.14965l0.063388 0.10705 0.0022039 0.0037967 0.0023089 0.0039022 0.067271 0.11949-0.70966 0.40361-0.065067-0.11559-0.10978-0.1853-0.038621-0.062224c-0.11313 0.16379-0.20528 0.40097-0.24841 0.71852 0.85784 2.2542 0.50616 3.1966-0.80946 3.8269-0.015532-0.0053786-0.02907-0.0090698-0.038516-0.0090698h-9.3819c-0.098441 0-0.17883-0.080891-0.17883-0.17971v-6.3596c0-0.098925 0.08039-0.17971 0.17883-0.17971h3.3528c0.1463 0 0.29133-0.027315 0.42766-0.080363l0.092984-0.16125c-0.63787-0.59102-1.1325-1.8017-1.2086-2.6698-0.0012594-0.014238-0.0012594-0.027632-0.0023088-0.041553h-2.6625c-1.7217 0-3.1174 1.4026-3.1174 3.1327v6.3596c0 1.7301 1.3957 3.1327 3.1174 3.1327h9.1164c0.18765 0 0.37445-0.029424 0.55328-0.087219 1.3051-0.42175 2.4628-1.1709 2.757-2.4129 0.60807-1.1847 0.66936-2.7502-0.2312-4.6819'/%3E%3C/g%3E%3Cg transform='translate%283 58.46%29'%3E%3Cpath d='m5.794 15.428c-0.053418-0.4382 0.55297-0.83791 1.3543-0.89275 0.80148-0.05463 1.4946 0.25628 1.5479 0.69448 0.02991 0.24647-0.14882 0.48081-0.45348 0.64839-0.029595 0.016241-0.06045 0.03185-0.092459 0.046826-0.22364 0.10483-0.50196 0.17644-0.80873 0.19732-0.80138 0.054841-1.4942-0.25607-1.5476-0.69427m-4.0376 0.29825c1.8351-0.33073 4.0974 2.4484 6.9583 0.95381l1.0495e-4 -1.054e-4c0.52978-0.27674 1.0802-0.70017 1.6522-1.3169 1.0516-0.34107 3.4064-0.58553 4.7676-1.4599 1.9651-1.2623-1.362-4.314-2.1613-3.9165-0.52757 0.2625-1.8362 0.81745-2.2249 0.85753l0.22648 0.31745-0.23361 0.31207c-0.35777 0.47743-0.60334 1.0416-0.75604 1.6872l-0.13108 0.74289c-0.0016792 0.012445-0.0034633 0.024468-0.0048276 0.036807l-1.0509-0.12476c0.11387-0.96668 0.38022-1.8655 0.86424-2.6402-0.49073-0.64122-1.159-1.371-1.9607-1.9757-1.3809-0.96816-2.9499-1.7304-4.3583-1.2366 1.1538 0.5405 2.0284 1.1814 2.6207 1.8611 0.6682 0.76683 1.0017 1.6168 0.81912 2.4123-0.13696 0.5965-0.57249 1.0764-1.1973 1.3759-0.20832 0.099769-0.43742 0.1796-0.68373 0.23708-0.93823 0.21873-2.1614 0.17085-3.6984-0.20544-0.14798 0.74658 0.087002 1.4233 0.55234 2.082'/%3E%3Cpath d='m3.8274 12.701c0.001889 7.383e-4 0.0036732 0.0012656 0.0055622 0.0017929 0.25744 0.062013 0.48591 0.034276 0.63252 1.055e-4 0.15259-0.035647 0.2715-0.11844 0.367-0.18498 0.037151-0.025839 0.071889-0.050201 0.10526-0.069395 0.018681-0.010546 0.028861-0.031428 0.026027-0.052837-0.0028336-0.021304-0.018261-0.038811-0.03904-0.044084l-0.20874-0.055263 0.18985-0.68794 0.35808 0.091543c0.016792 0.0040076 0.035052-0.0011601 0.047961-0.013183 0.012804-0.012234 0.018471-0.030057 0.015427-0.047564-0.03967-0.22116-0.15721-0.46562-0.33982-0.70703-0.0053523-0.0070661-0.012384-0.012656-0.020465-0.016241-2.3313-1.0468-2.2046-3.1414-2.058-5.567 0.018786-0.31006 0.038096-0.63078 0.051634-0.94548 4.1979e-4 -0.0023202 0.041979-0.23634 0.21115-0.45065 0.13675-0.17328 0.35777-0.25796 0.66232-0.24858l9.4027 4.2186e-4c0.037256 0 0.073778 0.036807 0.073778 0.074246l0.056986 5.532c0.80579 0.14238 2.2168 1.3662 2.6936 2.4784 0.37151-0.52764 0.39786-0.95666 0.39786-1.6508v-6.3596c0-1.7855-1.4454-3.2382-3.2222-3.2382h-9.3819c-1.6916 0-3.6583 1.4301-3.6582 3.2714l-0.0072414 0.15472c-0.19741 4.2307-0.33993 7.2874 3.6379 8.7342'/%3E%3C/g%3E%3Cg transform='translate%283 40.64%29'%3E%3Cpath d='m17.377 8.5671c-0.40121 0.049357-0.76727-0.5115-0.81744-1.2526-0.050165-0.74109 0.23466-1.3819 0.63598-1.4314 0.22564-0.027737 0.44025 0.13752 0.59379 0.41932 0.014693 0.027421 0.029175 0.056001 0.042819 0.085531 0.096027 0.20681 0.16151 0.46415 0.18082 0.74795 0.05006 0.74109-0.23456 1.3818-0.63598 1.4311m0.27318 3.7338c-0.30277-1.697 2.2422-3.7891 0.87348-6.4349v-1.0546e-4c-0.25355-0.48998-0.78238-1.9433-1.5057-2.2148-0.65876-0.77832-2.251-2.3071-3.4701-3.1623-1.76-1.2346-3.1705 2.6827-2.5527 3.2255 0.40793 0.35847 1.6273 0.54367 1.7981 0.86174l0.1888-0.30532 0.77388-0.27864c0.43721 0.33073 0.95376 0.5579 1.5451 0.69912l0.68027 0.12118c0.011334 0.0014765 0.022354 0.0031639 0.033583 0.0044295l-0.11408 0.97185c-0.88544-0.10525-1.7085-0.35162-2.4178-0.7992-0.58718 0.45392-1.2555 1.0718-1.8092 1.8133-0.8867 1.277-1.5846 2.7278-1.1325 4.0302 0.49504-1.0668 1.082-1.8757 1.7043-2.4235 0.7022-0.61802 1.4806-0.92629 2.209-0.75755 0.54625 0.12666 0.98577 0.52953 1.26 1.1073 0.091304 0.19268 0.16445 0.40466 0.21703 0.63226 0.20034 0.86765 0.15658 1.999-0.18807 3.4203 0.68363 0.13668 1.3032-0.080574 1.9065-0.51087'/%3E%3Cpath d='m14.66 9.5411l-0.097286 0.24626-0.0010495 0.0042186-0.0011544 0.0044295-0.036522 0.13236-0.78574-0.21894 0.035367-0.12793 0.052789-0.20913 0.016372-0.071294c-0.18901 0.03417-0.45337 0.029108-0.62391 0.30595-0.010914 0.017612-0.15018 0.276-0.15669 0.29572-0.73537 2.2486-3.3947 1.4306-6.0615 1.2467-0.10327-0.0070661-3.5133-0.39791-3.5133-0.39791-0.50973-0.10304-0.43837-0.34466-0.43837-0.44042v-6.3596c0-0.098925 0.080495-0.17971 0.17883-0.17971h7.1843c-0.24705-0.62603 0.064333-1.5771 0.18439-1.8982 0.13444-0.35932 0.31757-0.72717 0.54384-1.0547h-7.9125c-1.7217 0-3.1174 1.4026-3.1174 3.1327v6.3596c0 1.7301 1.3957 3.1327 3.1174 3.1327 0 0 3.036 0.32725 4.1752 0.39254 2.8306 0.16189 6.0343 0.7992 7.4377-3.0978 0.054678-0.22907 0.094873-0.59323 0.055832-0.7624-0.046492-0.20144-0.16802-0.31375-0.23666-0.43504'/%3E%3C/g%3E%3Cg transform='translate%283 20.82%29'%3E%3Cpath d='m15.575 3.8463c-0.24894 0.32008-0.90244 0.18361-1.4593-0.3049-0.55706-0.4883-0.80663-1.1438-0.55759-1.4638 0.1401-0.18013 0.40814-0.21557 0.71501-0.1254 0.0297 0.008859 0.059925 0.018773 0.09036 0.029846h1.049e-4c0.21336 0.078043 0.44078 0.21356 0.65393 0.40045 0.55696 0.48851 0.80663 1.1438 0.55748 1.4638m2.8205 2.4461c-1.4082-0.98482-1.0807-4.2724-3.9102-5.1708h-1.049e-4c-0.524-0.16632-1.9206-0.81819-2.6231-0.49621-1.0135-0.082367-3.1013-0.70798-4.565-0.44643-2.1131 0.37756-0.3542 4.1498 0.46471 4.0947 0.54048-0.03649 1.4191-0.095867 1.7636 0.0076989l-0.081334-0.35003 0.35126-0.74689c0.54184-0.076989 1.067-0.28328 1.5844-0.60367l0.5664-0.3977c0.0090254-0.0069606 0.018051-0.013605 0.026972-0.020776l0.60303 0.76841c-0.7001 0.55463-1.4554 0.96542-2.2721 1.1528-0.095712 0.73825-0.13349 1.6501-0.0032534 2.5678 0.2716 1.533 0.79886 3.0549 2.0352 3.6545-0.40079-1.1061-0.55486-2.095-0.50028-2.9247 0.061709-0.93599 0.39523-1.7072 1.0291-2.1054 0.47541-0.29867 1.0695-0.32599 1.67-0.11242 0.20013 0.071294 0.4009 0.16937 0.59841 0.29298 0.75205 0.471 1.517 1.3021 2.2736 2.552 0.57963-0.38916 0.86487-0.98303 0.98861-1.716'/%3E%3Cpath d='m15.313 7.1802c-0.12247-0.2008-0.28346-0.34054-0.43028-0.4324-0.17453-0.10926-0.36501-0.11264-0.49892-0.14965l0.063388 0.10705 0.0022039 0.0037967 0.0023088 0.0039022 0.067271 0.11949-0.70966 0.40361-0.065067-0.11559-0.10978-0.1853-0.038621-0.062224c-0.11313 0.16379-0.20528 0.40097-0.24841 0.71852 0.85784 2.2542 0.50616 3.1966-0.80946 3.8269-0.015532-0.0053786-0.02907-0.0090699-0.038516-0.0090699h-9.3819c-0.098441 0-0.17883-0.080891-0.17883-0.17971v-6.3596c0-0.098925 0.08039-0.17971 0.17883-0.17971h3.3528c0.1463 0 0.29133-0.027315 0.42766-0.080363l0.092984-0.16125c-0.63787-0.59102-1.1325-1.8017-1.2086-2.6698-0.0012594-0.014238-0.0012594-0.027632-0.0023088-0.041553h-2.6625c-1.7217 0-3.1174 1.4026-3.1174 3.1327v6.3596c0 1.7301 1.3957 3.1327 3.1174 3.1327h9.1164c0.18765 0 0.37445-0.029424 0.55328-0.087218 1.3051-0.42175 2.4628-1.1709 2.757-2.4129 0.60807-1.1847 0.66936-2.7502-0.2312-4.6819'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate%283 1%29' fill='#{hex-color(lighten($ui-base-color, 33%))}'%3E%3Cpath d='m11.202 1.8024c0.053418 0.4381-0.55297 0.8378-1.3543 0.89265-0.80148 0.05463-1.4946-0.25628-1.5479-0.69448-0.02991-0.24647 0.14882-0.48081 0.45348-0.64839 0.029595-0.016136 0.06045-0.03185 0.092459-0.046826 0.22364-0.10483 0.50196-0.17644 0.80873-0.19732 0.80148-0.054841 1.4942 0.25607 1.5476 0.69437m4.0378-0.29825c-1.8351 0.33063-4.0974-2.4486-6.9584-0.95392l-1.0495e-4 1.0546e-4c-0.52978 0.27674-1.0802 0.70017-1.6522 1.3169-1.0516 0.34107-3.4064 0.58553-4.7676 1.4599-1.9651 1.2623 1.362 4.314 2.1613 3.9165 0.52757-0.2625 1.8362-0.81745 2.2249-0.85753l-0.22648-0.31745 0.23361-0.31207c0.35777-0.47743 0.60334-1.0416 0.75604-1.6872l0.13108-0.74289c0.0016792-0.012339 0.0034633-0.024468 0.0048276-0.036807l1.0509 0.12476c-0.11387 0.96679-0.38022 1.8657-0.86424 2.6402 0.49073 0.64122 1.159 1.371 1.9607 1.9757 1.3809 0.96816 2.9499 1.7304 4.3583 1.2366-1.1538-0.5405-2.0283-1.1814-2.6207-1.861-0.6682-0.76693-1.0017-1.6169-0.81912-2.4124 0.13696-0.5965 0.57259-1.0764 1.1973-1.3759 0.20832-0.099769 0.43753-0.1795 0.68373-0.23698 0.93823-0.21884 2.1614-0.17096 3.6984 0.20534 0.14798-0.74658-0.087002-1.4232-0.55223-2.0819'/%3E%3Cpath d='m13.162 4.5324c-0.0018891-7.3825e-4 -0.0036732-0.0012656-0.0055622-0.0017929-0.25744-0.062013-0.48591-0.034276-0.63252-1.0547e-4 -0.15259 0.035647-0.2715 0.11844-0.367 0.18498-0.037151 0.025839-0.071889 0.050201-0.10526 0.069395-0.018681 0.010546-0.02886 0.031428-0.026027 0.052837 0.0028335 0.021304 0.018261 0.038811 0.03904 0.044084l0.20874 0.055263-0.18985 0.68794-0.35808-0.091543c-0.016792-0.0040076-0.035052 0.0011601-0.047961 0.013183-0.012804 0.012234-0.018471 0.030057-0.015427 0.047564 0.03967 0.22116 0.15721 0.46562 0.33982 0.70703 0.0053523 0.0070661 0.012384 0.012656 0.020465 0.016241 2.3313 1.0468 2.2046 3.1414 2.058 5.567-0.018786 0.31006-0.038096 0.63078-0.051634 0.94548-4.198e-4 0.0023202-0.041979 0.23634-0.21115 0.45065-0.13675 0.17328-0.35777 0.25796-0.66232 0.24858l-9.4027-4.219e-4c-0.037256 0-0.073778-0.036807-0.073778-0.074246l-0.056987-5.532c-0.80579-0.14238-2.2168-1.3662-2.6936-2.4784-0.37151 0.52764-0.39786 0.95666-0.39786 1.6508v6.3596c0 1.7855 1.4454 3.2382 3.2222 3.2382h9.3819c1.6916 0 3.6583-1.4301 3.6582-3.2714l0.0072414-0.15472c0.19741-4.2307 0.33993-7.2874-3.6379-8.7342'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + } +} + +button.icon-button.disabled i.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); +} diff --git a/config/themes.yml b/config/themes.yml index cac8961da..60b63558a 100644 --- a/config/themes.yml +++ b/config/themes.yml @@ -2,3 +2,24 @@ default: styles/application.scss contrast: styles/contrast.scss mastodon-light: styles/mastodon-light.scss linernotes_dark: styles/linernotes_dark.scss +pastel-gradient: styles/pastel-gradient.scss +witches-town: styles/witches-town.scss +strawberry: styles/strawberry.scss +neoncity: styles/neon-city.scss +swan-lake: styles/swan-lake.scss +cybre-light: styles/cybre-light.scss +cyberpunk-neon: styles/cyberpunk-neon.scss +meemu-org: styles/meemu.scss +sakura: styles/sakura.scss +forest: styles/forest.scss +sleeping-town: styles/sleeping-town.scss +deep-green: styles/deep-green.scss +new-year: styles/new-year.scss +geodude: styles/geodude.scss +royal-tenenbaums: styles/royal-tenenbaums.scss +nga: styles/nga.scss +ubuntu-light: styles/ubuntu-light.scss +luxury: styles/luxury.scss +purple-haze: styles/purple-haze.scss +ubuntu-terminal: styles/ubuntu-terminal.scss +cybrespace: styles/cybre.scss