37b3985bfa
This commit redesign the polls and increases characters limit for the options from 25 to 50 characters, giving pollsters more freedom. Summarizing, the redesign is making the polls more adaptive for upcoming changes to the options characters limit: the bar, or a "chart", is now displayed separately from the option itself; vote check mark is moved next to the option text, making the percentages take less space. Option lengths are taken into account and text is wrapped to multiple lines if necessary to avoid overflow.
776 lines
16 KiB
SCSS
776 lines
16 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;
|
|
}
|
|
}
|
|
|
|
.status-card__actions button,
|
|
.status-card__actions a {
|
|
color: rgba($white, 0.8);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
// Change default background colors of columns
|
|
.column > .scrollable,
|
|
.getting-started,
|
|
.column-inline-form,
|
|
.error-column,
|
|
.regeneration-indicator {
|
|
background: $white;
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
border-top: 0;
|
|
}
|
|
|
|
.directory__card__img {
|
|
background: lighten($ui-base-color, 12%);
|
|
}
|
|
|
|
.filter-form,
|
|
.directory__card__bar {
|
|
background: $white;
|
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
|
}
|
|
|
|
.scrollable .directory__list {
|
|
width: calc(100% + 2px);
|
|
margin-left: -1px;
|
|
margin-right: -1px;
|
|
}
|
|
|
|
.directory__card,
|
|
.table-of-contents {
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
}
|
|
|
|
.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 {
|
|
top: -50px;
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
.column-header__back-button,
|
|
.column-header__button,
|
|
.column-header__button.active,
|
|
.account__header__bar,
|
|
.directory__card__extra {
|
|
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;
|
|
}
|
|
|
|
.confirmation-modal__secondary-button,
|
|
.confirmation-modal__cancel-button,
|
|
.mute-modal__cancel-button,
|
|
.block-modal__cancel-button {
|
|
color: lighten($ui-base-color, 26%);
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
color: $primary-text-color;
|
|
}
|
|
}
|
|
|
|
.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__option 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,
|
|
.audio-player {
|
|
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,
|
|
.block-modal,
|
|
.report-modal,
|
|
.embed-modal,
|
|
.error-modal,
|
|
.onboarding-modal,
|
|
.report-modal__comment .setting-text__wrapper,
|
|
.report-modal__comment .setting-text {
|
|
background: $white;
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
}
|
|
|
|
.report-modal__comment {
|
|
border-right-color: lighten($ui-base-color, 8%);
|
|
}
|
|
|
|
.report-modal__container {
|
|
border-top-color: lighten($ui-base-color, 8%);
|
|
}
|
|
|
|
.column-header__collapsible-inner {
|
|
background: darken($ui-base-color, 4%);
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
border-top: 0;
|
|
}
|
|
|
|
.focal-point__preview strong {
|
|
color: $white;
|
|
}
|
|
|
|
.boost-modal__action-bar,
|
|
.confirmation-modal__action-bar,
|
|
.mute-modal__action-bar,
|
|
.block-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;
|
|
border: 1px solid lighten($ui-base-color, 8%);
|
|
|
|
&:focus {
|
|
border-color: lighten($ui-base-color, 12%);
|
|
background: $white;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.audio-player .video-player__controls button,
|
|
.audio-player .video-player__time-sep,
|
|
.audio-player .video-player__time-current,
|
|
.audio-player .video-player__time-total {
|
|
color: $primary-text-color;
|
|
}
|