.circleci
.dependabot
.github
app
chewy
controllers
helpers
javascript
fonts
images
mastodon
packs
styles
contrast
fonts
mastodon
mastodon-light
diff.scss
variables.scss
application.scss
contrast.scss
mailer.scss
mastodon-light.scss
lib
mailers
models
policies
presenters
serializers
services
validators
views
workers
bin
config
db
dist
lib
log
nanobox
public
spec
streaming
vendor
.buildpacks
.codeclimate.yml
.dockerignore
.editorconfig
.env.nanobox
.env.production.sample
.env.test
.env.vagrant
.eslintignore
.eslintrc.js
.foreman
.gitattributes
.gitignore
.haml-lint.yml
.nanoignore
.nvmrc
.profile
.rspec
.rubocop.yml
.ruby-version
.sass-lint.yml
.slugignore
.yarnclean
AUTHORS.md
Aptfile
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
Capfile
Dockerfile
Gemfile
Gemfile.lock
LICENSE
Procfile
Procfile.dev
README.md
Rakefile
Vagrantfile
app.json
babel.config.js
boxfile.yml
config.ru
crowdin.yml
docker-compose.yml
package.json
postcss.config.js
priv-config
scalingo.json
yarn.lock
703 lines
14 KiB
SCSS
703 lines
14 KiB
SCSS
// Notes!
|
|
// Sass color functions, "darken" and "lighten" are automatically replaced.
|
|
|
|
html {
|
|
scrollbar-color: $ui-base-color rgba($ui-base-color, 0.25);
|
|
}
|
|
|
|
// Change the colors of button texts
|
|
.button {
|
|
color: $white;
|
|
|
|
&.button-alternative-2 {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
// Change default background colors of columns
|
|
.column > .scrollable,
|
|
.getting-started,
|
|
.column-inline-form {
|
|
background: $white;
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
border-top: 0;
|
|
}
|
|
|
|
.column-back-button,
|
|
.column-header {
|
|
background: $white;
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
|
|
@media screen and (max-width: $no-gap-breakpoint) {
|
|
border-top: 0;
|
|
}
|
|
|
|
&--slim-button {
|
|
border: 0;
|
|
top: -49px;
|
|
right: 1px;
|
|
}
|
|
}
|
|
|
|
.column-header__back-button,
|
|
.column-header__button,
|
|
.column-header__button.active,
|
|
.account__header__bar {
|
|
background: $white;
|
|
}
|
|
|
|
.column-header__button.active {
|
|
color: $ui-highlight-color;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: $ui-highlight-color;
|
|
background: $white;
|
|
}
|
|
}
|
|
|
|
.account__header__bar .avatar .account__avatar {
|
|
border-color: $white;
|
|
}
|
|
|
|
.getting-started__footer a {
|
|
color: $ui-secondary-color;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.column-subheading {
|
|
background: darken($ui-base-color, 4%);
|
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
|
}
|
|
|
|
.getting-started,
|
|
.scrollable {
|
|
.column-link {
|
|
background: $white;
|
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
background: $ui-base-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.getting-started .navigation-bar {
|
|
border-top: 1px solid lighten($ui-base-color, 8%);
|
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
|
|
|
@media screen and (max-width: $no-gap-breakpoint) {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
.compose-form__autosuggest-wrapper,
|
|
.poll__text input[type="text"],
|
|
.compose-form .spoiler-input__input,
|
|
.compose-form__poll-wrapper select,
|
|
.search__input,
|
|
.setting-text,
|
|
.box-widget input[type="text"],
|
|
.box-widget input[type="email"],
|
|
.box-widget input[type="password"],
|
|
.box-widget textarea,
|
|
.statuses-grid .detailed-status {
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
}
|
|
|
|
.search__input {
|
|
@media screen and (max-width: $no-gap-breakpoint) {
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.list-editor .search .search__input {
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.compose-form__poll-wrapper select {
|
|
background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") no-repeat right 8px center / auto 16px;
|
|
}
|
|
|
|
.compose-form__poll-wrapper,
|
|
.compose-form__poll-wrapper .poll__footer {
|
|
border-top-color: lighten($ui-base-color, 8%);
|
|
}
|
|
|
|
.notification__filter-bar {
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
border-top: 0;
|
|
}
|
|
|
|
.compose-form .compose-form__buttons-wrapper {
|
|
background: $ui-base-color;
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
border-top: 0;
|
|
}
|
|
|
|
.drawer__header,
|
|
.drawer__inner {
|
|
background: $white;
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
}
|
|
|
|
.drawer__inner__mastodon {
|
|
background: $white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
|
|
}
|
|
|
|
// Change the colors used in compose-form
|
|
.compose-form {
|
|
.compose-form__modifiers {
|
|
.compose-form__upload__actions .icon-button {
|
|
color: lighten($white, 7%);
|
|
|
|
&:active,
|
|
&:focus,
|
|
&:hover {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
.compose-form__upload-description input {
|
|
color: lighten($white, 7%);
|
|
|
|
&::placeholder {
|
|
color: lighten($white, 7%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.compose-form__buttons-wrapper {
|
|
background: darken($ui-base-color, 6%);
|
|
}
|
|
|
|
.autosuggest-textarea__suggestions {
|
|
background: darken($ui-base-color, 6%);
|
|
}
|
|
|
|
.autosuggest-textarea__suggestions__item {
|
|
&:hover,
|
|
&:focus,
|
|
&:active,
|
|
&.selected {
|
|
background: lighten($ui-base-color, 4%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.emoji-mart-bar {
|
|
border-color: lighten($ui-base-color, 4%);
|
|
|
|
&:first-child {
|
|
background: darken($ui-base-color, 6%);
|
|
}
|
|
}
|
|
|
|
.emoji-mart-search input {
|
|
background: rgba($ui-base-color, 0.3);
|
|
border-color: $ui-base-color;
|
|
}
|
|
|
|
// Change the background colors of statuses
|
|
.focusable:focus {
|
|
background: $ui-base-color;
|
|
}
|
|
|
|
.status.status-direct {
|
|
background: lighten($ui-base-color, 4%);
|
|
}
|
|
|
|
.focusable:focus .status.status-direct {
|
|
background: lighten($ui-base-color, 8%);
|
|
}
|
|
|
|
.detailed-status,
|
|
.detailed-status__action-bar {
|
|
background: $white;
|
|
}
|
|
|
|
// Change the background colors of status__content__spoiler-link
|
|
.reply-indicator__content .status__content__spoiler-link,
|
|
.status__content .status__content__spoiler-link {
|
|
background: $ui-base-color;
|
|
|
|
&:hover {
|
|
background: lighten($ui-base-color, 4%);
|
|
}
|
|
}
|
|
|
|
// Change the background colors of media and video spoilers
|
|
.media-spoiler,
|
|
.video-player__spoiler {
|
|
background: $ui-base-color;
|
|
}
|
|
|
|
.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
|
|
color: $white;
|
|
}
|
|
|
|
.account-gallery__item a {
|
|
background-color: $ui-base-color;
|
|
}
|
|
|
|
// Change the colors used in the dropdown menu
|
|
.dropdown-menu {
|
|
background: $white;
|
|
|
|
&__arrow {
|
|
&.left {
|
|
border-left-color: $white;
|
|
}
|
|
|
|
&.top {
|
|
border-top-color: $white;
|
|
}
|
|
|
|
&.bottom {
|
|
border-bottom-color: $white;
|
|
}
|
|
|
|
&.right {
|
|
border-right-color: $white;
|
|
}
|
|
}
|
|
|
|
&__item {
|
|
a {
|
|
background: $white;
|
|
color: $darker-text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Change the text colors on inverted background
|
|
.privacy-dropdown__option.active,
|
|
.privacy-dropdown__option:hover,
|
|
.privacy-dropdown__option.active .privacy-dropdown__option__content,
|
|
.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
|
|
.privacy-dropdown__option:hover .privacy-dropdown__option__content,
|
|
.privacy-dropdown__option:hover .privacy-dropdown__option__content strong,
|
|
.dropdown-menu__item a:active,
|
|
.dropdown-menu__item a:focus,
|
|
.dropdown-menu__item a:hover,
|
|
.actions-modal ul li:not(:empty) a.active,
|
|
.actions-modal ul li:not(:empty) a.active 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,
|
|
.actions-modal ul li:not(:empty) a:hover,
|
|
.actions-modal ul li:not(:empty) a:hover button,
|
|
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
|
|
.simple_form .block-button,
|
|
.simple_form .button,
|
|
.simple_form button {
|
|
color: $white;
|
|
}
|
|
|
|
.dropdown-menu__separator {
|
|
border-bottom-color: lighten($ui-base-color, 4%);
|
|
}
|
|
|
|
// Change the background colors of modals
|
|
.actions-modal,
|
|
.boost-modal,
|
|
.confirmation-modal,
|
|
.mute-modal,
|
|
.report-modal,
|
|
.embed-modal,
|
|
.error-modal,
|
|
.onboarding-modal {
|
|
background: $ui-base-color;
|
|
}
|
|
|
|
.column-header__collapsible-inner {
|
|
background: darken($ui-base-color, 4%);
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
border-top: 0;
|
|
}
|
|
|
|
.boost-modal__action-bar,
|
|
.confirmation-modal__action-bar,
|
|
.mute-modal__action-bar,
|
|
.onboarding-modal__paginator,
|
|
.error-modal__footer {
|
|
background: darken($ui-base-color, 6%);
|
|
|
|
.onboarding-modal__nav,
|
|
.error-modal__nav {
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: darken($ui-base-color, 12%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.display-case__case {
|
|
background: $white;
|
|
}
|
|
|
|
.embed-modal .embed-modal__container .embed-modal__html {
|
|
background: $white;
|
|
|
|
&:focus {
|
|
background: darken($ui-base-color, 6%);
|
|
}
|
|
}
|
|
|
|
.react-toggle-track {
|
|
background: $ui-secondary-color;
|
|
}
|
|
|
|
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
|
background: darken($ui-secondary-color, 10%);
|
|
}
|
|
|
|
.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
|
|
background: lighten($ui-highlight-color, 10%);
|
|
}
|
|
|
|
// Change the default color used for the text in an empty column or on the error column
|
|
.empty-column-indicator,
|
|
.error-column {
|
|
color: $primary-text-color;
|
|
background: $white;
|
|
}
|
|
|
|
.tabs-bar {
|
|
background: $white;
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
border-bottom: 0;
|
|
|
|
@media screen and (max-width: $no-gap-breakpoint) {
|
|
border-top: 0;
|
|
}
|
|
|
|
&__link {
|
|
padding-bottom: 14px;
|
|
border-bottom-width: 1px;
|
|
border-bottom-color: lighten($ui-base-color, 8%);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
background: $ui-base-color;
|
|
}
|
|
|
|
&.active {
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
background: transparent;
|
|
border-bottom-color: $ui-highlight-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Change the default colors used on some parts of the profile pages
|
|
.activity-stream-tabs {
|
|
background: $account-background-color;
|
|
border-bottom-color: lighten($ui-base-color, 8%);
|
|
}
|
|
|
|
.box-widget,
|
|
.nothing-here,
|
|
.page-header,
|
|
.directory__tag > a,
|
|
.directory__tag > div,
|
|
.landing-page__call-to-action,
|
|
.contact-widget,
|
|
.landing .hero-widget__text,
|
|
.landing-page__information.contact-widget {
|
|
background: $white;
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
|
|
@media screen and (max-width: $no-gap-breakpoint) {
|
|
border-left: 0;
|
|
border-right: 0;
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
.landing .hero-widget__text {
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.simple_form {
|
|
input[type=text],
|
|
input[type=number],
|
|
input[type=email],
|
|
input[type=password],
|
|
textarea {
|
|
&:hover {
|
|
border-color: lighten($ui-base-color, 12%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.landing .hero-widget__footer {
|
|
background: $white;
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
border-top: 0;
|
|
|
|
@media screen and (max-width: $no-gap-breakpoint) {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.brand__tagline {
|
|
color: $ui-secondary-color;
|
|
}
|
|
|
|
.directory__tag > a {
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
background: $ui-base-color;
|
|
}
|
|
|
|
@media screen and (max-width: $no-gap-breakpoint) {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.directory__tag.active > a,
|
|
.directory__tag.active > div {
|
|
border-color: $ui-highlight-color;
|
|
|
|
&,
|
|
h4,
|
|
h4 small,
|
|
.fa,
|
|
.trends__item__current {
|
|
color: $white;
|
|
}
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
background: $ui-highlight-color;
|
|
}
|
|
}
|
|
|
|
.batch-table {
|
|
&__toolbar,
|
|
&__row,
|
|
.nothing-here {
|
|
border-color: lighten($ui-base-color, 8%);
|
|
}
|
|
}
|
|
|
|
.activity-stream {
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
|
|
&--under-tabs {
|
|
border-top: 0;
|
|
}
|
|
|
|
.entry {
|
|
background: $account-background-color;
|
|
|
|
.detailed-status.light,
|
|
.more.light,
|
|
.status.light {
|
|
border-bottom-color: lighten($ui-base-color, 8%);
|
|
}
|
|
}
|
|
|
|
.status.light {
|
|
.status__content {
|
|
color: $primary-text-color;
|
|
}
|
|
|
|
.display-name {
|
|
strong {
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.accounts-grid {
|
|
.account-grid-card {
|
|
.controls {
|
|
.icon-button {
|
|
color: $darker-text-color;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
a {
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
|
|
.username {
|
|
color: $darker-text-color;
|
|
}
|
|
|
|
.account__header__content {
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.simple_form,
|
|
.table-form {
|
|
.warning {
|
|
box-shadow: none;
|
|
background: rgba($error-red, 0.5);
|
|
text-shadow: none;
|
|
}
|
|
|
|
.recommended {
|
|
border-color: $ui-highlight-color;
|
|
color: $ui-highlight-color;
|
|
background-color: rgba($ui-highlight-color, 0.1);
|
|
}
|
|
}
|
|
|
|
.compose-form .compose-form__warning {
|
|
border-color: $ui-highlight-color;
|
|
background-color: rgba($ui-highlight-color, 0.1);
|
|
|
|
&,
|
|
a {
|
|
color: $ui-highlight-color;
|
|
}
|
|
}
|
|
|
|
.status__content,
|
|
.reply-indicator__content {
|
|
a {
|
|
color: $highlight-text-color;
|
|
}
|
|
}
|
|
|
|
.button.logo-button {
|
|
color: $white;
|
|
|
|
svg {
|
|
fill: $white;
|
|
}
|
|
}
|
|
|
|
.public-layout {
|
|
.account__section-headline {
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
|
|
@media screen and (max-width: $no-gap-breakpoint) {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
.header,
|
|
.public-account-header,
|
|
.public-account-bio {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.public-account-bio,
|
|
.hero-widget__text {
|
|
background: $account-background-color;
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
}
|
|
|
|
.header {
|
|
background: $ui-base-color;
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
|
|
@media screen and (max-width: $no-gap-breakpoint) {
|
|
border: 0;
|
|
}
|
|
|
|
.brand {
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background: lighten($ui-base-color, 4%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.public-account-header {
|
|
&__image {
|
|
background: lighten($ui-base-color, 12%);
|
|
|
|
&::after {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&__bar {
|
|
&::before {
|
|
background: $account-background-color;
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
border-top: 0;
|
|
}
|
|
|
|
.avatar img {
|
|
border-color: $account-background-color;
|
|
}
|
|
|
|
@media screen and (max-width: $no-columns-breakpoint) {
|
|
background: $account-background-color;
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
&__tabs {
|
|
&__name {
|
|
h1,
|
|
h1 small {
|
|
color: $white;
|
|
|
|
@media screen and (max-width: $no-columns-breakpoint) {
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__extra {
|
|
.public-account-bio {
|
|
border: 0;
|
|
}
|
|
|
|
.public-account-bio .account__header__fields {
|
|
border-color: lighten($ui-base-color, 8%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.notification__filter-bar button.active::after,
|
|
.account__section-headline a.active::after {
|
|
border-color: transparent transparent $white;
|
|
}
|
|
|
|
.hero-widget,
|
|
.box-widget,
|
|
.contact-widget,
|
|
.landing-page__information.contact-widget,
|
|
.moved-account-widget,
|
|
.memoriam-widget,
|
|
.activity-stream,
|
|
.nothing-here,
|
|
.directory__tag > a,
|
|
.directory__tag > div,
|
|
.card > a,
|
|
.page-header,
|
|
.compose-form .compose-form__warning {
|
|
box-shadow: none;
|
|
}
|