diff --git a/Mastodon-Cyberpunk-Neon.css b/Mastodon-Cyberpunk-Neon.css index 6a96467..74c8218 100644 --- a/Mastodon-Cyberpunk-Neon.css +++ b/Mastodon-Cyberpunk-Neon.css @@ -1,15 +1,15 @@ @-moz-document url-prefix("https://im-in.space/") { /* Main */ html { - scrollbar-color: #09bcc6 transparent; + scrollbar-color: #0abdc6 transparent; } ::selection { background: #711c91; /* WebKit/Blink Browsers */ - color: #09bcc6; + color: #0abdc6; } ::-moz-selection { background: #711c91; /* Gecko Browsers */ - color: #09bcc6; + color: #0abdc6; } /* Background */ .ui { @@ -17,85 +17,93 @@ html { } /* Top letters */ body { - color: #09bcc6; + color: #0abdc6; } /* Left header */ .drawer__header { - background: #123e7c; + background: #133e7c; +} +.drawer__header a:hover { + background: #091833; + color: #ea00d9; } .drawer__tab { - color: #09bcc6; -} -.drawer__tab:hold { - color: #091833; + color: #0abdc6; } + /* Search bar */ .search__input { background: #091833; - color: #09bcc6; + color: #0abdc6; font-size: 14px; margin: 0; } .search__input:focus { - background: #123e7c; + background: #133e7c; } .search__icon .fa { - color: #09bcc6; + color: #0abdc6; } /* Profile colum */ .drawer__inner { background: #091833; } .navigation-bar { - color: #d300c4; + color: #ea00d9; } .navigation-bar strong { - color: #d300c4; + color: #ea00d9; } .icon-button { - color: #09bcc6; + color: #0abdc6; } .icon-button:active , .icon-button:focus, .icon-button:hover { - color: #123e7c; + color: #ea00d9; } /* Dropdown Menu */ .dropdown-menu { - background: #123e7c; + background: #133e7c; } .dropdown-menu__arrow.bottom { - border-bottom-color: #123e7c; + border-bottom-color: #133e7c; } .dropdown-menu__item a { - background: #123e7c; - color: #09bcc6; + background: #133e7c; + color: #0abdc6; } .dropdown-menu__item a:focus { - background: #123e7c; - color: #d300c4; + background: #133e7c; + color: #ea00d9; } .dropdown-menu__separator { border-bottom: 1px solid #091833; } /* Text Area */ .compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input { - color: #09bcc6; - background: #123e7c; + color: #0abdc6; + background: #133e7c; } .compose-form .compose-form__modifiers { - color: #09bcc6; - background: #123e7c; + color: #0abdc6; + background: #133e7c; } .compose-form .compose-form__buttons-wrapper { - background: #123e7c; + background: #133e7c; } .icon-button.inverted { - color: #09bcc6; + color: #0abdc6; +} +.icon-button.inverted:hover { + color: #ea00d9; } .text-icon-button { - color: #09bcc6; + color: #0abdc6; +} +.text-icon-button:hover { + color: #ea00d9; } .compose-form .compose-form__buttons-wrapper .character-counter__wrapper .character-counter { - color: #09bcc6; + color: #0abdc6; } /* Emoji Picker */ .emoji-picker-dropdown__menu { @@ -108,36 +116,42 @@ body { border: 0 solid #000b1e; } .emoji-mart-anchors { - color: #d300c4; + color: #0abdc6; +} +.emoji-mart-anchor:hover { + color: #ea00d9; } .emoji-mart-anchor-selected { - color: #09bcc6; + color: #ea00d9; } .emoji-mart-search { background: #091833; } .emoji-mart-search input { - background: #123e7c; - color: #09bcc6; - border: 1px solid #711c91; + background: #133e7c; + color: #0abdc6; + border: 1px solid #0abdc6; } .emoji-mart-scroll { background: #091833; } .emoji-mart { - color: #d300c4; + color: #ea00d9; } .emoji-mart-category-label span { - background: #123e7c + background: #091833 +} +.emoji-mart-category .emoji-mart-emoji:hover::before { + background-color: #0abdc6; } /* Botones */ .button { - background-color: #123e7c; - color: #09bcc6; + background-color: #133e7c; + color: #0abdc6; } .button:hover { background-color: #711c91; - color: #09bcc6; + color: #0abdc6; } .drawer__inner__mastodon { background: #091833 @@ -148,34 +162,41 @@ body { } .column-header__button { background: #091833; - color: #09bcc6; + color: #0abdc6; } .column-header__button:hover { - background: #123e7c; - color: #091833; + background: #133e7c; + color: #ea00d9; } .column-header__button.active { - background: #123e7c; - color: #09bcc6; + background: #133e7c; + color: #0abdc6; } .column-header__button.active:hover { - background: #123e7c; - color: #091833; + background: #133e7c; + color: #ea00d9; +} +.column-header.active .column-header__icon { + color: #ea00d9; + text-shadow: 0 0 10px rgba(43,144,217,.4); } .column-header__collapsible { - color: #09bcc6; + color: #0abdc6; } .column-header__collapsible-inner { - background: #123e7c; + background: #133e7c; } .setting-toggle__label { - color: #09bcc6; + color: #0abdc6; } .react-toggle-track { background-color: #000b1e; } .column-settings__section { - color: #09bcc6; + color: #0abdc6; +} +.column-header__setting-btn:hover { + color: #ea00d9; } /* Colums */ .column > .scrollable { @@ -191,31 +212,117 @@ body { color: #711c91; } .account__display-name strong, .status__display-name strong { - color: #d300c4; + color: #ea00d9; } .reply-indicator__content, .status__content { - color: #09bcc6; + color: #0abdc6; } .reply-indicator__content a, .status__content a { - color: #d300c4; + color: #ea00d9; } .icon-button.disabled { color: #711c91; - cursor: default; } .star-icon.active { color: yellow; } .status__content__read-more-button { - color: #d300c4; + color: #ea00d9; } .status__action-bar__counter__label { - color: #09bcc6; + color: #0abdc6; } -button.icon-button i.fa-retweet { - background-image: #09bcc6; +.attachment-list.compact .fa { + color: #711c91; +} +.attachment-list__list a { + color: #711c91; +} +.status__prepend { + color: #711c91; +} +.status__prepend .status__display-name strong { + color: #711c91; +} +.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: #0abdc6; +} +.status-card__image { + background: #133e7c; +} +.status-card__title { + color: #ea00d9; +} +.status-card__content:hover { + background: #133e7c; +} +.reply-indicator__content .status__content__spoiler-link:hover, .status__content .status__content__spoiler-link:hover { + background: #ea00d9; +} +.status__content__spoiler-link { + color: #0abdc6; +} +.reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link { + background: #711c91; +} +.focusable:focus { + outline: 0; + background: #133e7c; +} +.account { + padding: 10px; + border-bottom: 1px solid #000b1e; +} +/* Notificaciones */ +.status.status-direct:not(.read) { + background: #133e7c; + border-bottom-color: #000b1e; +} +.account__section-headline, .notification__filter-bar { + background: #000b1e; + border-bottom: 1px solid #0abdc6; +} +.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: #0abdc6; +} +.account__section-headline a, .account__section-headline button, .notification__filter-bar a, .notification__filter-bar button { + color: #0abdc680; +} +.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 #0abdc6; +} +.notification-favourite .status.status-direct { + background: transparent; +} +.notification__favourite-icon-wrapper .star-icon, .star-icon.active { + color: yellow; +} +.notification__message { + color: #711c91; +} +.notification__display-name:hover { + color: #ea00d9; +} +.muted .status__content a, .muted .status__content p, .muted .status__display-name strong { + color: #711c91; +} +.account .account__display-name { + color: #711c91; +} +.notification-favourite .status.status-direct .icon-button.disabled { + color: #711c91; } - /* Vistas detalladas */ .detailed-status { background: #000b1e; @@ -228,15 +335,56 @@ button.icon-button i.fa-retweet { color: #711c91; } .detailed-status__display-name strong { - color: #d300c4; + color: #ea00d9; } .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: #ea00d9; +} +.detailed-status__meta { + color: #711c91; +} +.column-subheading { + color: #0abdc680; +} +.column-link__badge, .column-subheading { + background: #000b1e; +} +.column-link { + background: #091833; + color: #ea00d9; +} +.column-link:hover { + background: #133e7c; +} +.getting-started { + color: #091833; +} +.flex-spacer, .getting-started, .getting-started__wrapper { + background: #091833; +} +.getting-started__footer a { + color: #ea00d9b8; +} +.getting-started__footer p { + color: #711c91; +} +.getting-started__footer p a { + color: #711c91; +} +.column-header__back-button { + background: #091833; + color: #ea00d9; +} +/* Retoot color */ +button.icon-button i.fa-retweet { + background-image: url("data:image/svg+xml;utf8,"); +} }