diff options
Diffstat (limited to 'app/javascript')
| -rw-r--r-- | app/javascript/mastodon/features/ui/components/actions_modal.js | 2 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/about.scss | 64 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/accounts.scss | 42 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/admin.scss | 42 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/basics.scss | 2 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/boost.scss | 6 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/compact_header.scss | 4 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/components.scss | 353 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/containers.scss | 2 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/emoji_picker.scss | 16 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/footer.scss | 2 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/forms.scss | 39 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/landing_strip.scss | 8 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/stream_entries.scss | 32 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/tables.scss | 4 | ||||
| -rw-r--r-- | app/javascript/styles/mastodon/variables.scss | 7 |
16 files changed, 285 insertions, 340 deletions
diff --git a/app/javascript/mastodon/features/ui/components/actions_modal.js b/app/javascript/mastodon/features/ui/components/actions_modal.js index 79a5a20ef..9792eba5f 100644 --- a/app/javascript/mastodon/features/ui/components/actions_modal.js +++ b/app/javascript/mastodon/features/ui/components/actions_modal.js @@ -27,7 +27,7 @@ export default class ActionsModal extends ImmutablePureComponent { return ( <li key={`${text}-${i}`}> <a href={href} target='_blank' rel='noopener' onClick={this.props.onClick} data-index={i} className={classNames({ active })}> - {icon && <IconButton title={text} icon={icon} role='presentation' tabIndex='-1' />} + {icon && <IconButton title={text} icon={icon} role='presentation' tabIndex='-1' inverted />} <div> <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div> <div>{meta}</div> diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss index 034c35e8a..0a09a38d2 100644 --- a/app/javascript/styles/mastodon/about.scss +++ b/app/javascript/styles/mastodon/about.scss @@ -169,7 +169,7 @@ $small-breakpoint: 960px; background: $ui-base-color; font-size: 12px; font-weight: 500; - color: $ui-primary-color; + color: $darker-text-color; text-transform: uppercase; position: relative; z-index: 1; @@ -186,10 +186,10 @@ $small-breakpoint: 960px; font-size: 16px; line-height: 30px; margin-bottom: 12px; - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; } } @@ -202,11 +202,11 @@ $small-breakpoint: 960px; text-align: center; font-size: 12px; line-height: 18px; - color: $ui-primary-color; + color: $darker-text-color; margin-bottom: 0; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; } } @@ -225,7 +225,7 @@ $small-breakpoint: 960px; font-family: inherit; font-size: inherit; line-height: inherit; - color: lighten($ui-primary-color, 10%); + color: transparentize($darker-text-color, 0.1); } h1 { @@ -234,14 +234,14 @@ $small-breakpoint: 960px; line-height: 30px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $primary-text-color; small { font-family: 'mastodon-font-sans-serif', sans-serif; display: block; font-size: 18px; font-weight: 400; - color: $ui-base-lighter-color; + color: opacify($darker-text-color, 0.1); } } @@ -251,7 +251,7 @@ $small-breakpoint: 960px; line-height: 26px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $primary-text-color; } h3 { @@ -260,7 +260,7 @@ $small-breakpoint: 960px; line-height: 24px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $primary-text-color; } h4 { @@ -269,7 +269,7 @@ $small-breakpoint: 960px; line-height: 24px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $primary-text-color; } h5 { @@ -278,7 +278,7 @@ $small-breakpoint: 960px; line-height: 24px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $primary-text-color; } h6 { @@ -287,7 +287,7 @@ $small-breakpoint: 960px; line-height: 24px; font-weight: 500; margin-bottom: 20px; - color: $ui-secondary-color; + color: $primary-text-color; } ul, @@ -354,10 +354,10 @@ $small-breakpoint: 960px; font-weight: 400; font-size: 16px; line-height: 30px; - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; } } @@ -405,7 +405,7 @@ $small-breakpoint: 960px; font-size: 14px; &:hover { - color: $ui-secondary-color; + color: $darker-text-color; } } @@ -478,10 +478,10 @@ $small-breakpoint: 960px; font-weight: 400; font-size: 16px; line-height: 30px; - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; } } @@ -517,7 +517,7 @@ $small-breakpoint: 960px; span { &:last-child { - color: $ui-secondary-color; + color: $darker-text-color; } } @@ -548,7 +548,7 @@ $small-breakpoint: 960px; font-size: 14px; line-height: 24px; font-weight: 500; - color: $ui-primary-color; + color: $darker-text-color; padding-bottom: 5px; margin-bottom: 15px; border-bottom: 1px solid lighten($ui-base-color, 4%); @@ -559,7 +559,7 @@ $small-breakpoint: 960px; a, span { font-weight: 400; - color: darken($ui-primary-color, 10%); + color: opacify($darker-text-color, 0.1); } a { @@ -602,7 +602,7 @@ $small-breakpoint: 960px; .username { display: block; - color: $ui-primary-color; + color: $darker-text-color; } } } @@ -775,7 +775,7 @@ $small-breakpoint: 960px; } p a { - color: $ui-secondary-color; + color: $darker-text-color; } h1 { @@ -784,10 +784,10 @@ $small-breakpoint: 960px; margin-bottom: 0; small { - color: $ui-primary-color; + color: $darker-text-color; span { - color: $ui-secondary-color; + color: $darker-text-color; } } } @@ -896,7 +896,7 @@ $small-breakpoint: 960px; } a { - color: $ui-secondary-color; + color: $darker-text-color; text-decoration: none; } } @@ -935,7 +935,7 @@ $small-breakpoint: 960px; .fa { display: block; - color: $ui-primary-color; + color: $darker-text-color; font-size: 48px; } } @@ -943,7 +943,7 @@ $small-breakpoint: 960px; .text { font-size: 16px; line-height: 30px; - color: $ui-primary-color; + color: $darker-text-color; h6 { font-size: inherit; @@ -969,10 +969,10 @@ $small-breakpoint: 960px; font-weight: 400; font-size: 16px; line-height: 30px; - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; } } @@ -980,7 +980,7 @@ $small-breakpoint: 960px; .footer-links { padding-bottom: 50px; text-align: right; - color: $ui-base-lighter-color; + color: $darker-text-color; p { font-size: 14px; @@ -995,7 +995,7 @@ $small-breakpoint: 960px; &__footer { margin-top: 10px; text-align: center; - color: $ui-base-lighter-color; + color: $darker-text-color; p { font-size: 14px; diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss index 0b49da1ad..f9af6f288 100644 --- a/app/javascript/styles/mastodon/accounts.scss +++ b/app/javascript/styles/mastodon/accounts.scss @@ -75,7 +75,7 @@ small { display: block; font-size: 14px; - color: $ui-highlight-color; + color: $highlight-text-color; font-weight: 400; overflow: hidden; text-overflow: ellipsis; @@ -113,7 +113,7 @@ width: 33.3%; box-sizing: border-box; flex: 0 0 auto; - color: $ui-primary-color; + color: $darker-text-color; padding: 5px 10px 0; margin-bottom: 10px; border-right: 1px solid lighten($ui-base-color, 4%); @@ -143,7 +143,7 @@ &.active { &::after { - border-bottom: 4px solid $ui-highlight-color; + border-bottom: 4px solid $highlight-text-color; opacity: 1; } } @@ -178,7 +178,7 @@ font-size: 14px; line-height: 18px; padding: 0 15px; - color: $ui-secondary-color; + color: $darker-text-color; } @media screen and (max-width: 480px) { @@ -256,7 +256,7 @@ .current { background: $simple-background-color; border-radius: 100px; - color: $ui-base-color; + color: $lighter-text-color; cursor: default; margin: 0 10px; } @@ -268,7 +268,7 @@ .older, .newer { text-transform: uppercase; - color: $ui-secondary-color; + color: $primary-text-color; } .older { @@ -293,7 +293,7 @@ .disabled { cursor: default; - color: lighten($ui-base-color, 10%); + color: opacify($lighter-text-color, 0.1); } @media screen and (max-width: 700px) { @@ -332,7 +332,7 @@ width: 335px; background: $simple-background-color; border-radius: 4px; - color: $ui-base-color; + color: $lighter-text-color; margin: 0 5px 10px; position: relative; @@ -344,7 +344,7 @@ overflow: hidden; height: 100px; border-radius: 4px 4px 0 0; - background-color: lighten($ui-base-color, 4%); + background-color: opacify($lighter-text-color, 0.04); background-size: cover; background-position: center; position: relative; @@ -392,7 +392,7 @@ a { display: block; - color: $ui-base-color; + color: $inverted-text-color; text-decoration: none; text-overflow: ellipsis; overflow: hidden; @@ -414,7 +414,7 @@ } .username { - color: lighten($ui-base-color, 34%); + color: $lighter-text-color; font-size: 14px; font-weight: 400; } @@ -422,7 +422,7 @@ .account__header__content { padding: 10px 15px; padding-top: 15px; - color: lighten($ui-base-color, 26%); + color: transparentize($lighter-text-color, 0.1); word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; @@ -434,7 +434,7 @@ .nothing-here { width: 100%; display: block; - color: $ui-primary-color; + color: $lighter-text-color; font-size: 14px; font-weight: 500; text-align: center; @@ -493,7 +493,7 @@ span { font-size: 14px; - color: $ui-primary-color; + color: $inverted-text-color; } } @@ -508,7 +508,7 @@ .account__header__content { font-size: 14px; - color: $ui-base-color; + color: $darker-text-color; } } @@ -522,18 +522,18 @@ display: inline-block; padding: 15px; text-decoration: none; - color: $ui-highlight-color; + color: $highlight-text-color; text-transform: uppercase; font-weight: 500; &:hover, &:active, &:focus { - color: lighten($ui-highlight-color, 8%); + color: lighten($highlight-text-color, 8%); } &.active { - color: $ui-base-color; + color: $inverted-text-color; cursor: default; } } @@ -586,19 +586,19 @@ font-weight: 500; text-align: center; width: 94px; - color: $ui-secondary-color; + color: opacify($darker-text-color, 0.1); background: rgba(darken($ui-base-color, 8%), 0.5); } td { - color: $ui-primary-color; + color: $darker-text-color; text-align: center; width: 100%; padding-left: 0; } a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: none; &:hover, diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss index 6bd659030..348f72078 100644 --- a/app/javascript/styles/mastodon/admin.scss +++ b/app/javascript/styles/mastodon/admin.scss @@ -33,7 +33,7 @@ a { display: block; padding: 15px; - color: rgba($primary-text-color, 0.7); + color: $darker-text-color; text-decoration: none; transition: all 200ms linear; border-radius: 4px 0 0 4px; @@ -90,7 +90,7 @@ padding-left: 25px; h2 { - color: $ui-secondary-color; + color: $primary-text-color; font-size: 24px; line-height: 28px; font-weight: 400; @@ -98,7 +98,7 @@ } h3 { - color: $ui-secondary-color; + color: $primary-text-color; font-size: 20px; line-height: 28px; font-weight: 400; @@ -109,7 +109,7 @@ text-transform: uppercase; font-size: 13px; font-weight: 500; - color: $ui-primary-color; + color: $primary-text-color; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid lighten($ui-base-color, 8%); @@ -117,7 +117,7 @@ h6 { font-size: 16px; - color: $ui-secondary-color; + color: $primary-text-color; line-height: 28px; font-weight: 400; } @@ -125,7 +125,7 @@ & > p { font-size: 14px; line-height: 18px; - color: $ui-secondary-color; + color: $darker-text-color; margin-bottom: 20px; strong { @@ -153,10 +153,10 @@ } .muted-hint { - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } } @@ -253,7 +253,7 @@ a { display: inline-block; - color: rgba($primary-text-color, 0.7); + color: $darker-text-color; text-decoration: none; text-transform: uppercase; font-size: 12px; @@ -266,7 +266,7 @@ } &.selected { - color: $ui-highlight-color; + color: $highlight-text-color; border-bottom: 2px solid $ui-highlight-color; } } @@ -291,7 +291,7 @@ font-weight: 500; font-size: 14px; line-height: 18px; - color: $ui-secondary-color; + color: $primary-text-color; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -348,7 +348,7 @@ padding: 7px 4px; margin-bottom: 10px; font-size: 16px; - color: $ui-base-color; + color: $inverted-text-color; display: block; width: 100%; outline: 0; @@ -402,7 +402,7 @@ font-size: 14px; a { - color: $classic-highlight-color; + color: $highlight-text-color; text-decoration: none; &:hover { @@ -425,7 +425,7 @@ align-items: center; padding: 10px; background: $ui-base-color; - color: $ui-primary-color; + color: $darker-text-color; border-radius: 4px 4px 0 0; font-size: 14px; position: relative; @@ -452,14 +452,14 @@ } &__timestamp { - color: lighten($ui-base-color, 34%); + color: $darker-text-color; } &__extras { background: lighten($ui-base-color, 6%); border-radius: 0 0 4px 4px; padding: 10px; - color: $ui-primary-color; + color: $darker-text-color; font-family: 'mastodon-font-monospace', monospace; font-size: 12px; word-wrap: break-word; @@ -469,7 +469,7 @@ &__icon { font-size: 28px; margin-right: 10px; - color: lighten($ui-base-color, 34%); + color: $darker-text-color; } &__icon__overlay { @@ -485,7 +485,7 @@ } &.negative { - background: $error-red; + background: lighten($error-red, 12%); } &.neutral { @@ -496,17 +496,17 @@ a, .username, .target { - color: $ui-secondary-color; + color: $primary-text-color; text-decoration: none; font-weight: 500; } .diff-old { - color: $error-red; + color: lighten($error-red, 12%); } .diff-neutral { - color: $ui-secondary-color; + color: $darker-text-color; } .diff-new { diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index bec0d4d91..c52e069be 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -75,7 +75,7 @@ body { &.error { position: absolute; text-align: center; - color: $ui-primary-color; + color: $darker-text-color; background: $ui-base-color; width: 100%; height: 100%; diff --git a/app/javascript/styles/mastodon/boost.scss b/app/javascript/styles/mastodon/boost.scss index 31053decc..8e11cb596 100644 --- a/app/javascript/styles/mastodon/boost.scss +++ b/app/javascript/styles/mastodon/boost.scss @@ -6,13 +6,13 @@ } button.icon-button i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color($ui-base-lighter-color)}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color($ui-highlight-color)}' stroke-width='0'/></svg>"); + background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color($action-button-color)}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color($highlight-text-color)}' stroke-width='0'/></svg>"); &:hover { - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color(lighten($ui-base-color, 33%))}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color($ui-highlight-color)}' stroke-width='0'/></svg>"); + background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color(lighten($action-button-color, 7%))}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color($highlight-text-color)}' stroke-width='0'/></svg>"); } } button.icon-button.disabled i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color(lighten($ui-base-color, 13%))}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color($ui-highlight-color)}' stroke-width='0'/></svg>"); + background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='209'><path d='M4.97 3.16c-.1.03-.17.1-.22.18L.8 8.24c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77L5.5 3.35c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.02-2.4.02H7.1l2.32 2.85.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color(darken($action-button-color, 13%))}' stroke-width='0'/><path d='M7.78 19.66c-.24.02-.44.25-.44.5v2.46h-.06c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v4.47c0 4.26-.56 3.62 3.65 3.62H8.5l-1.3-1.06c-.1-.08-.18-.2-.2-.3-.02-.17.06-.35.2-.45l1.33-1.1H7.28c-.44 0-.72-.3-.72-.7v-4.48c0-.44.28-.72.72-.72h.06v2.5c0 .38.54.63.82.38l4.9-3.93c.25-.18.25-.6 0-.78l-4.9-3.92c-.1-.1-.24-.14-.38-.12zm9.34 2.93c-.54-.02-1.3.02-2.4.02h-1.25l1.3 1.07c.1.07.18.2.2.33.02.16-.06.3-.2.4l-1.33 1.1h1.28c.42 0 .72.28.72.72v4.47c0 .42-.3.72-.72.72h-.1v-2.47c0-.3-.3-.53-.6-.47-.07 0-.14.05-.2.1l-4.9 3.93c-.26.18-.26.6 0 .78l4.9 3.92c.27.25.82 0 .8-.38v-2.5h.1c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.15.4-3.62-1.25-3.66zM10.34 38.66c-.24.02-.44.25-.43.5v2.47H7.3c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.47c0 3.66-.23 3.7 2.34 3.66l-1.34-1.1c-.1-.08-.18-.2-.2-.3 0-.17.07-.35.2-.45l1.96-1.6c-.03-.06-.04-.13-.04-.2v-4.48c0-.44.28-.72.72-.72H9.9v2.5c0 .36.5.6.8.38l4.93-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.08-.23-.13-.36-.12zm5.63 2.93l1.34 1.1c.1.07.18.2.2.33.02.16-.03.3-.16.4l-1.96 1.6c.02.07.06.13.06.22v4.47c0 .42-.3.72-.72.72h-2.66v-2.47c0-.3-.3-.53-.6-.47-.06.02-.12.05-.18.1l-4.94 3.93c-.24.18-.24.6 0 .78l4.94 3.92c.28.22.78-.02.78-.38v-2.5h2.66c4.27 0 3.65.67 3.65-3.62v-4.47c0-3.66.34-3.7-2.4-3.66zM13.06 57.66c-.23.03-.4.26-.4.5v2.47H7.28c-1.08 0-1.86-.04-2.4-.04-1.64 0-1.25.43-1.25 3.65v4.87l2.93-2.37v-2.5c0-.44.28-.72.72-.72h5.38v2.5c0 .36.5.6.78.38l4.94-3.93c.24-.18.24-.6 0-.78l-4.94-3.92c-.1-.1-.24-.14-.38-.12zm5.3 6.15l-2.92 2.4v2.52c0 .42-.3.72-.72.72h-5.4v-2.47c0-.3-.32-.53-.6-.47-.07.02-.13.05-.2.1L3.6 70.52c-.25.18-.25.6 0 .78l4.93 3.92c.28.22.78-.02.78-.38v-2.5h5.42c4.27 0 3.65.67 3.65-3.62v-4.47-.44zM19.25 78.8c-.1.03-.2.1-.28.17l-.9.9c-.44-.3-1.36-.25-3.35-.25H7.28c-1.08 0-1.86-.03-2.4-.03-1.64 0-1.25.43-1.25 3.65v.7l2.93.3v-1c0-.44.28-.72.72-.72h7.44c.2 0 .37.08.5.2l-1.8 1.8c-.25.26-.08.76.27.8l6.27.7c.28.03.56-.25.53-.53l-.7-6.25c0-.27-.3-.48-.55-.44zm-17.2 6.1c-.2.07-.36.3-.33.54l.7 6.25c.02.36.58.55.83.27l.8-.8c.02 0 .04-.02.04 0 .46.24 1.37.17 3.18.17h7.44c4.27 0 3.65.67 3.65-3.62v-.75l-2.93-.3v1.05c0 .42-.3.72-.72.72H7.28c-.15 0-.3-.03-.4-.1L8.8 86.4c.3-.24.1-.8-.27-.84l-6.28-.65h-.2zM4.88 98.6c-1.33 0-1.34.48-1.3 2.3l1.14-1.37c.08-.1.22-.17.34-.2.16 0 .34.08.44.2l1.66 2.03c.04 0 .07-.03.12-.03h7.44c.34 0 .57.2.65.5h-2.43c-.34.05-.53.52-.3.78l3.92 4.95c.18.24.6.24.78 0l3.94-4.94c.22-.27-.02-.76-.37-.77H18.4c.02-3.9.6-3.4-3.66-3.4H7.28c-1.08 0-1.86-.04-2.4-.04zm.15 2.46c-.1.03-.2.1-.28.2l-3.94 4.9c-.2.28.03.77.4.78H3.6c-.02 3.94-.45 3.4 3.66 3.4h7.44c3.65 0 3.74.3 3.7-2.25l-1.1 1.34c-.1.1-.2.17-.32.2-.16 0-.34-.08-.44-.2l-1.65-2.03c-.06.02-.1.04-.18.04H7.28c-.35 0-.57-.2-.66-.5h2.44c.37 0 .63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.23-.47-.2zM4.88 117.6c-1.16 0-1.3.3-1.3 1.56l1.14-1.38c.08-.1.22-.14.34-.16.16 0 .34.04.44.16l2.22 2.75h7c.42 0 .72.28.72.72v.53h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-.53c0-4.2.72-3.63-3.66-3.63H7.28c-1.08 0-1.86-.03-2.4-.03zm.1 1.74c-.1.03-.17.1-.23.16L.8 124.44c-.2.28.03.77.4.78H3.6v.5c0 4.26-.55 3.62 3.66 3.62h7.44c1.03 0 1.74.02 2.28 0-.16.02-.34-.03-.44-.15l-2.22-2.76H7.28c-.44 0-.72-.3-.72-.72v-.5h2.5c.37.02.63-.5.4-.78L5.5 119.5c-.12-.15-.34-.22-.53-.16zm12.02 10c1.2-.02 1.4-.25 1.4-1.53l-1.1 1.36c-.07.1-.17.17-.3.18zM5.94 136.6l2.37 2.93h6.42c.42 0 .72.28.72.72v1.25h-2.6c-.3.1-.43.54-.2.78l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.25c0-4.2.72-3.63-3.66-3.63H7.28c-.6 0-.92-.02-1.34-.03zm-1.72.06c-.4.08-.54.3-.6.75l.6-.74zm.84.93c-.12 0-.24.08-.3.18l-3.95 4.9c-.24.3 0 .83.4.82H3.6v1.22c0 4.26-.55 3.62 3.66 3.62h7.44c.63 0 .97.02 1.4.03l-2.37-2.93H7.28c-.44 0-.72-.3-.72-.72v-1.22h2.5c.4.04.67-.53.4-.8l-3.96-4.92c-.1-.13-.27-.2-.44-.2zm13.28 10.03l-.56.7c.36-.07.5-.3.56-.7zM17.13 155.6c-.55-.02-1.32.03-2.4.03h-8.2l2.38 2.9h5.82c.42 0 .72.28.72.72v1.97H12.9c-.32.06-.48.52-.28.78l3.94 4.94c.2.23.6.22.78-.03l3.94-4.9c.22-.28-.02-.77-.37-.78H18.4v-1.97c0-3.15.4-3.62-1.25-3.66zm-12.1.28c-.1.02-.2.1-.28.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v1.96c0 4.26-.55 3.62 3.66 3.62h8.24l-2.36-2.9H7.28c-.44 0-.72-.3-.72-.72v-1.97h2.5c.37.02.63-.5.4-.78l-3.96-4.9c-.1-.15-.3-.22-.47-.2zM5.13 174.5c-.15 0-.3.07-.38.2L.8 179.6c-.24.27 0 .82.4.8H3.6v2.32c0 4.26-.55 3.62 3.66 3.62h7.94l-2.35-2.9h-5.6c-.43 0-.7-.3-.7-.72v-2.3h2.5c.38.03.66-.54.4-.83l-3.97-4.9c-.1-.13-.23-.2-.38-.2zm12 .1c-.55-.02-1.32.03-2.4.03H6.83l2.35 2.9h5.52c.42 0 .72.28.72.72v2.34h-2.6c-.3.1-.43.53-.2.78l3.92 4.9c.18.24.6.24.78 0l3.94-4.9c.22-.3-.02-.78-.37-.8H18.4v-2.33c0-3.15.4-3.62-1.25-3.66zM4.97 193.16c-.1.03-.17.1-.22.18l-3.94 4.9c-.2.3.03.78.4.8H3.6v2.68c0 4.26-.55 3.62 3.66 3.62h7.66l-2.3-2.84c-.03-.02-.03-.04-.05-.06H7.27c-.44 0-.72-.3-.72-.72v-2.7h2.5c.37.03.63-.48.4-.77l-3.96-4.9c-.12-.17-.34-.25-.53-.2zm12.16.43c-.55-.02-1.32.03-2.4.03H7.1l2.32 2.84.03.06h5.25c.42 0 .72.28.72.72v2.7h-2.5c-.36.02-.56.54-.3.8l3.92 4.9c.18.25.6.25.78 0l3.94-4.9c.26-.28 0-.83-.37-.8H18.4v-2.7c0-3.15.4-3.62-1.25-3.66z' fill='#{hex-color($highlight-text-color)}' stroke-width='0'/></svg>"); } diff --git a/app/javascript/styles/mastodon/compact_header.scss b/app/javascript/styles/mastodon/compact_header.scss index 90d98cc8c..83ac7a8d0 100644 --- a/app/javascript/styles/mastodon/compact_header.scss +++ b/app/javascript/styles/mastodon/compact_header.scss @@ -2,7 +2,7 @@ h1 { font-size: 24px; line-height: 28px; - color: $ui-primary-color; + color: $primary-text-color; font-weight: 500; margin-bottom: 20px; padding: 0 10px; @@ -20,7 +20,7 @@ small { font-weight: 400; - color: $ui-secondary-color; + color: $darker-text-color; } img { diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 96112d84a..cdf3a9daa 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -4,7 +4,7 @@ } .button { - background-color: darken($ui-highlight-color, 3%); + background-color: $ui-highlight-color; border: 10px none; border-radius: 4px; box-sizing: border-box; @@ -31,7 +31,7 @@ &:active, &:focus, &:hover { - background-color: lighten($ui-highlight-color, 7%); + background-color: lighten($ui-highlight-color, 4%); transition: all 200ms ease-out; } @@ -52,7 +52,7 @@ } &.button-alternative { - color: $ui-base-color; + color: $inverted-text-color; background: $ui-primary-color; &:active, @@ -98,26 +98,10 @@ position: relative; } -.column-icon { - background: lighten($ui-base-color, 4%); - color: $ui-primary-color; - cursor: pointer; - font-size: 16px; - padding: 15px; - position: absolute; - right: 0; - top: -48px; - z-index: 3; - - &:hover { - color: lighten($ui-primary-color, 7%); - } -} - .icon-button { display: inline-block; padding: 0; - color: $ui-base-lighter-color; + color: $action-button-color; border: none; background: transparent; cursor: pointer; @@ -126,17 +110,17 @@ &:hover, &:active, &:focus { - color: lighten($ui-base-color, 33%); + color: lighten($action-button-color, 7%); transition: color 200ms ease-out; } &.disabled { - color: lighten($ui-base-color, 13%); + color: darken($action-button-color, 13%); cursor: default; } &.active { - color: $ui-highlight-color; + color: $highlight-text-color; } &::-moz-focus-inner { @@ -150,23 +134,23 @@ } &.inverted { - color: lighten($ui-base-color, 33%); + color: $lighter-text-color; &:hover, &:active, &:focus { - color: $ui-base-lighter-color; + color: transparentize($lighter-text-color, 0.07); } &.disabled { - color: $ui-primary-color; + color: opacify($lighter-text-color, 0.07); } &.active { - color: $ui-highlight-color; + color: $highlight-text-color; &.disabled { - color: lighten($ui-highlight-color, 13%); + color: opacify($lighter-text-color, 0.13); } } } @@ -185,7 +169,7 @@ } .text-icon-button { - color: lighten($ui-base-color, 33%); + color: $lighter-text-color; border: none; background: transparent; cursor: pointer; @@ -199,17 +183,17 @@ &:hover, &:active, &:focus { - color: $ui-base-lighter-color; + color: opacify($lighter-text-color, 0.07); transition: color 200ms ease-out; } &.disabled { - color: lighten($ui-base-color, 13%); + color: transparentize($lighter-text-color, 0.2); cursor: default; } &.active { - color: $ui-highlight-color; + color: $highlight-text-color; } &::-moz-focus-inner { @@ -228,25 +212,6 @@ transform-origin: 50% 0; } -.dropdown--active .icon-button { - color: $ui-highlight-color; -} - -.dropdown--active::after { - @media screen and (min-width: 631px) { - content: ""; - display: block; - position: absolute; - width: 0; - height: 0; - border-style: solid; - border-width: 0 4.5px 7.8px; - border-color: transparent transparent $ui-secondary-color; - bottom: 8px; - right: 104px; - } -} - .invisible { font-size: 0; line-height: 0; @@ -271,15 +236,11 @@ } } -.lightbox .icon-button { - color: $ui-base-color; -} - .compose-form { padding: 10px; .compose-form__warning { - color: darken($ui-secondary-color, 65%); + color: $inverted-text-color; margin-bottom: 15px; background: $ui-primary-color; box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); @@ -289,7 +250,7 @@ font-weight: 400; strong { - color: darken($ui-secondary-color, 65%); + color: $inverted-text-color; font-weight: 500; @each $lang in $cjk-langs { @@ -300,7 +261,7 @@ } a { - color: darken($ui-primary-color, 33%); + color: $lighter-text-color; font-weight: 500; text-decoration: underline; @@ -333,7 +294,7 @@ box-sizing: border-box; width: 100%; margin: 0; - color: $ui-base-color; + color: $inverted-text-color; background: $simple-background-color; padding: 10px; font-family: inherit; @@ -378,7 +339,7 @@ box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); background: $ui-secondary-color; border-radius: 0 0 4px 4px; - color: $ui-base-color; + color: $lighter-text-color; font-size: 14px; padding: 6px; @@ -419,11 +380,11 @@ } .autosuggest-account .display-name__account { - color: lighten($ui-base-color, 36%); + color: $lighter-text-color; } .compose-form__modifiers { - color: $ui-base-color; + color: $inverted-text-color; font-family: inherit; font-size: 14px; background: $simple-background-color; @@ -454,7 +415,7 @@ .icon-button { flex: 0 1 auto; - color: $ui-secondary-color; + color: $action-button-color; font-size: 14px; font-weight: 500; padding: 10px; @@ -463,7 +424,7 @@ &:hover, &:focus, &:active { - color: lighten($ui-secondary-color, 4%); + color: lighten($action-button-color, 7%); } } @@ -486,7 +447,7 @@ input { background: transparent; - color: $ui-secondary-color; + color: $primary-text-color; border: 0; padding: 0; margin: 0; @@ -501,7 +462,7 @@ &::placeholder { opacity: 0.54; - color: $ui-secondary-color; + color: $darker-text-color; } } @@ -563,7 +524,7 @@ font-family: 'mastodon-font-sans-serif', sans-serif; font-size: 14px; font-weight: 600; - color: lighten($ui-base-color, 12%); + color: $lighter-text-color; &.character-counter--over { color: $warning-red; @@ -617,7 +578,7 @@ } .reply-indicator__display-name { - color: $ui-base-color; + color: $lighter-text-color; display: block; max-width: 100%; line-height: 24px; @@ -679,7 +640,7 @@ text-decoration: underline; .fa { - color: lighten($ui-base-color, 40%); + color: lighten($action-button-color, 7%); } } @@ -694,15 +655,15 @@ } .fa { - color: lighten($ui-base-color, 30%); + color: $action-button-color; } } .status__content__spoiler-link { - background: lighten($ui-base-color, 30%); + background: $action-button-color; &:hover { - background: lighten($ui-base-color, 33%); + background: lighten($action-button-color, 7%); text-decoration: none; } } @@ -721,7 +682,7 @@ border-radius: 2px; background: transparent; border: 0; - color: lighten($ui-base-color, 8%); + color: $lighter-text-color; font-weight: 700; font-size: 11px; padding: 0 6px; @@ -784,36 +745,32 @@ &.status-direct { background: lighten($ui-base-color, 8%); - - .icon-button.disabled { - color: lighten($ui-base-color, 16%); - } } &.light { .status__relative-time { - color: $ui-primary-color; + color: $lighter-text-color; } .status__display-name { - color: $ui-base-color; + color: $inverted-text-color; } .display-name { strong { - color: $ui-base-color; + color: $inverted-text-color; } span { - color: $ui-primary-color; + color: $lighter-text-color; } } .status__content { - color: $ui-base-color; + color: $inverted-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } a.status__content__spoiler-link { @@ -833,19 +790,19 @@ background: transparent; .icon-button.disabled { - color: lighten($ui-base-color, 13%); + color: lighten($action-button-color, 13%); } } } .status__relative-time { - color: $ui-base-lighter-color; + color: $darker-text-color; float: right; font-size: 14px; } .status__display-name { - color: $ui-base-lighter-color; + color: $darker-text-color; } .status__info .status__display-name { @@ -896,14 +853,14 @@ .status__prepend { margin-left: 68px; - color: $ui-base-lighter-color; + color: $darker-text-color; padding: 8px 0; padding-bottom: 2px; font-size: 14px; position: relative; .status__display-name strong { - color: $ui-base-lighter-color; + color: $darker-text-color; } > span { @@ -965,7 +922,7 @@ .detailed-status__meta { margin-top: 15px; - color: $ui-base-lighter-color; + color: $darker-text-color; font-size: 14px; line-height: 18px; } @@ -993,11 +950,11 @@ } .reply-indicator__content { - color: $ui-base-color; + color: $inverted-text-color; font-size: 14px; a { - color: lighten($ui-base-color, 20%); + color: $lighter-text-color; } } @@ -1032,7 +989,7 @@ .account__display-name { flex: 1 1 auto; display: block; - color: $ui-primary-color; + color: $darker-text-color; overflow: hidden; text-decoration: none; font-size: 14px; @@ -1102,7 +1059,7 @@ } .account__header__username { - color: $ui-primary-color; + color: $darker-text-color; } } @@ -1112,7 +1069,7 @@ } .account__header__content { - color: $ui-secondary-color; + color: $darker-text-color; } .account__header__display-name { @@ -1127,7 +1084,7 @@ } .account__header__username { - color: $ui-highlight-color; + color: $highlight-text-color; font-size: 14px; font-weight: 400; display: block; @@ -1140,7 +1097,7 @@ .account__disclaimer { padding: 10px; border-top: 1px solid lighten($ui-base-color, 8%); - color: $ui-base-lighter-color; + color: $darker-text-color; strong { font-weight: 500; @@ -1166,7 +1123,7 @@ } .account__header__content { - color: $ui-primary-color; + color: $darker-text-color; font-size: 14px; font-weight: 400; overflow: hidden; @@ -1243,7 +1200,7 @@ display: block; text-transform: uppercase; font-size: 11px; - color: $ui-primary-color; + color: $darker-text-color; } strong { @@ -1258,10 +1215,6 @@ } } } - - abbr { - color: $ui-base-lighter-color; - } } .account__header__avatar { @@ -1331,7 +1284,7 @@ } .detailed-status__display-name { - color: $ui-secondary-color; + color: $darker-text-color; display: block; line-height: 24px; margin-bottom: 15px; @@ -1366,11 +1319,11 @@ .muted { .status__content p, .status__content a { - color: $ui-base-lighter-color; + color: $darker-text-color; } .status__display-name strong { - color: $ui-base-lighter-color; + color: $darker-text-color; } .status__avatar { @@ -1378,11 +1331,11 @@ } a.status__content__spoiler-link { - background: $ui-base-lighter-color; + background: $darker-text-color; color: lighten($ui-base-color, 4%); &:hover { - background: lighten($ui-base-color, 29%); + background: transparentize($darker-text-color, 0.07); text-decoration: none; } } @@ -1398,7 +1351,7 @@ position: relative; .fa { - color: $ui-highlight-color; + color: $highlight-text-color; } > span { @@ -1501,7 +1454,7 @@ display: flex; flex-shrink: 0; cursor: default; - color: $ui-primary-color; + color: $darker-text-color; strong { color: $primary-text-color; @@ -1609,7 +1562,7 @@ box-sizing: border-box; text-decoration: none; background: $ui-secondary-color; - color: $ui-base-color; + color: $inverted-text-color; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -1618,7 +1571,7 @@ &:hover, &:active { background: $ui-highlight-color; - color: $ui-secondary-color; + color: $primary-text-color; outline: 0; } } @@ -1660,7 +1613,7 @@ box-sizing: border-box; text-decoration: none; background: $ui-secondary-color; - color: $ui-base-color; + color: $inverted-text-color; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -1671,7 +1624,7 @@ &:hover { background: $ui-highlight-color; - color: $ui-secondary-color; + color: $primary-text-color; } } } @@ -1683,7 +1636,7 @@ .static-content { padding: 10px; padding-top: 20px; - color: $ui-base-lighter-color; + color: $darker-text-color; h1 { font-size: 16px; @@ -1935,8 +1888,8 @@ } &.active { - border-bottom: 2px solid $ui-highlight-color; - color: $ui-highlight-color; + border-bottom: 2px solid $highlight-text-color; + color: $highlight-text-color; } &:hover, @@ -1991,7 +1944,7 @@ .column-back-button { background: lighten($ui-base-color, 4%); - color: $ui-highlight-color; + color: $highlight-text-color; cursor: pointer; flex: 0 0 auto; font-size: 16px; @@ -2010,7 +1963,7 @@ background: lighten($ui-base-color, 4%); border: 0; font-family: inherit; - color: $ui-highlight-color; + color: $highlight-text-color; cursor: pointer; white-space: nowrap; font-size: 16px; @@ -2182,7 +2135,7 @@ .column-subheading { background: $ui-base-color; - color: $ui-base-lighter-color; + color: $darker-text-color; padding: 8px 20px; font-size: 12px; font-weight: 500; @@ -2205,11 +2158,11 @@ flex: 1 0 auto; p { - color: $ui-secondary-color; + color: $darker-text-color; } a { - color: $ui-base-lighter-color; + color: opacify($darker-text-color, 0.07); } } @@ -2235,7 +2188,7 @@ } .setting-text { - color: $ui-primary-color; + color: $darker-text-color; background: transparent; border: none; border-bottom: 2px solid $ui-primary-color; @@ -2249,23 +2202,12 @@ &:focus, &:active { color: $primary-text-color; - border-bottom-color: $ui-highlight-color; + border-bottom-color: $highlight-text-color; } @media screen and (max-width: 600px) { font-size: 16px; } - - &.light { - color: $ui-base-color; - border-bottom: 2px solid lighten($ui-base-color, 27%); - - &:focus, - &:active { - color: $ui-base-color; - border-bottom-color: $ui-highlight-color; - } - } } .no-reduce-motion button.icon-button i.fa-retweet { @@ -2288,12 +2230,12 @@ } .reduce-motion button.icon-button i.fa-retweet { - color: $ui-base-lighter-color; + color: $action-button-color; transition: color 100ms ease-in; } .reduce-motion button.icon-button.active i.fa-retweet { - color: $ui-highlight-color; + color: $highlight-text-color; } .status-card { @@ -2301,7 +2243,7 @@ font-size: 14px; border: 1px solid lighten($ui-base-color, 8%); border-radius: 4px; - color: $ui-base-lighter-color; + color: $darker-text-color; margin-top: 14px; text-decoration: none; overflow: hidden; @@ -2439,7 +2381,7 @@ a.status-card { .load-more { display: block; - color: $ui-base-lighter-color; + color: $darker-text-color; background-color: transparent; border: 0; font-size: inherit; @@ -2463,7 +2405,7 @@ a.status-card { text-align: center; font-size: 16px; font-weight: 500; - color: lighten($ui-base-color, 16%); + color: opacify($darker-text-color, 0.07); background: $ui-base-color; cursor: default; display: flex; @@ -2503,7 +2445,7 @@ a.status-card { strong { display: block; margin-bottom: 10px; - color: lighten($ui-base-color, 34%); + color: $darker-text-color; } span { @@ -2561,15 +2503,15 @@ a.status-card { } & > .column-header__back-button { - color: $ui-highlight-color; + color: $highlight-text-color; } &.active { - box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3); + box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3); .column-header__icon { - color: $ui-highlight-color; - text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); + color: $highlight-text-color; + text-shadow: 0 0 10px rgba($highlight-text-color, 0.4); } } @@ -2615,7 +2557,7 @@ a.status-card { max-height: 70vh; overflow: hidden; overflow-y: auto; - color: $ui-primary-color; + color: $darker-text-color; transition: max-height 150ms ease-in-out, opacity 300ms linear; opacity: 1; @@ -2644,7 +2586,7 @@ a.status-card { .column-header__setting-btn { &:hover { - color: lighten($ui-primary-color, 4%); + color: $darker-text-color; text-decoration: underline; } } @@ -2678,7 +2620,7 @@ a.status-card { } .loading-indicator { - color: lighten($ui-base-color, 26%); + color: $darker-text-color; font-size: 12px; font-weight: 400; text-transform: uppercase; @@ -2763,7 +2705,7 @@ a.status-card { .media-spoiler { background: $base-overlay-background; - color: $ui-primary-color; + color: $darker-text-color; border: 0; padding: 0; width: 100%; @@ -2775,7 +2717,7 @@ a.status-card { &:active, &:focus { padding: 0; - color: lighten($ui-primary-color, 8%); + color: transparentize($darker-text-color, 0.07); } } @@ -2828,7 +2770,7 @@ a.status-card { } .column-settings__section { - color: $ui-primary-color; + color: $darker-text-color; cursor: default; display: block; font-weight: 500; @@ -2886,7 +2828,7 @@ a.status-card { .setting-toggle__label, .setting-meta__label { - color: $ui-primary-color; + color: $darker-text-color; display: inline-block; margin-bottom: 14px; margin-left: 8px; @@ -2894,13 +2836,12 @@ a.status-card { } .setting-meta__label { - color: $ui-primary-color; float: right; } .empty-column-indicator, .error-column { - color: lighten($ui-base-color, 20%); + color: $darker-text-color; background: $ui-base-color; text-align: center; padding: 20px; @@ -2917,7 +2858,7 @@ a.status-card { } a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: none; &:hover { @@ -3102,7 +3043,7 @@ a.status-card { display: flex; align-items: center; justify-content: center; - color: $ui-secondary-color; + color: $primary-text-color; font-size: 18px; font-weight: 500; border: 2px dashed $ui-base-lighter-color; @@ -3111,7 +3052,7 @@ a.status-card { .upload-progress { padding: 10px; - color: $ui-base-lighter-color; + color: $lighter-text-color; overflow: hidden; display: flex; @@ -3200,7 +3141,7 @@ a.status-card { } .privacy-dropdown__option { - color: $ui-base-color; + color: $lighter-text-color; padding: 10px; cursor: pointer; display: flex; @@ -3233,12 +3174,12 @@ a.status-card { .privacy-dropdown__option__content { flex: 1 1 auto; - color: darken($ui-primary-color, 24%); + color: $lighter-text-color; strong { font-weight: 500; display: block; - color: $ui-base-color; + color: $inverted-text-color; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -3287,7 +3228,7 @@ a.status-card { padding-right: 30px; font-family: inherit; background: $ui-base-color; - color: $ui-primary-color; + color: $darker-text-color; font-size: 14px; margin: 0; @@ -3344,6 +3285,7 @@ a.status-card { .fa-times-circle { top: 11px; transform: rotate(0deg); + color: $action-button-color; cursor: pointer; &.active { @@ -3351,13 +3293,13 @@ a.status-card { } &:hover { - color: $primary-text-color; + color: lighten($action-button-color, 7%); } } } .search-results__header { - color: $ui-base-lighter-color; + color: $darker-text-color; background: lighten($ui-base-color, 2%); border-bottom: 1px solid darken($ui-base-color, 4%); padding: 15px 10px; @@ -3386,7 +3328,7 @@ a.status-card { span { display: inline-block; background: $ui-base-color; - color: $ui-primary-color; + color: $darker-text-color; font-size: 14px; font-weight: 500; padding: 10px; @@ -3405,13 +3347,13 @@ a.status-card { .search-results__hashtag { display: block; padding: 10px; - color: $ui-secondary-color; + color: darken($primary-text-color, 4%); text-decoration: none; &:hover, &:active, &:focus { - color: lighten($ui-secondary-color, 4%); + color: $primary-text-color; text-decoration: underline; } } @@ -3549,7 +3491,7 @@ a.status-card { } .media-modal__button { - background-color: $white; + background-color: $primary-text-color; height: 12px; width: 12px; border-radius: 6px; @@ -3560,7 +3502,7 @@ a.status-card { } .media-modal__button--active { - background-color: $ui-highlight-color; + background-color: $highlight-text-color; } .media-modal__close { @@ -3574,7 +3516,7 @@ a.status-card { .error-modal, .embed-modal { background: $ui-secondary-color; - color: $ui-base-color; + color: $inverted-text-color; border-radius: 8px; overflow: hidden; display: flex; @@ -3662,7 +3604,7 @@ a.status-card { .onboarding-modal__nav, .error-modal__nav { - color: darken($ui-secondary-color, 34%); + color: $lighter-text-color; border: 0; font-size: 14px; font-weight: 500; @@ -3676,18 +3618,18 @@ a.status-card { &:hover, &:focus, &:active { - color: darken($ui-secondary-color, 38%); + color: transparentize($lighter-text-color, 0.04); background-color: darken($ui-secondary-color, 16%); } &.onboarding-modal__done, &.onboarding-modal__next { - color: $ui-base-color; + color: $inverted-text-color; &:hover, &:focus, &:active { - color: darken($ui-base-color, 4%); + color: lighten($inverted-text-color, 4%); } } } @@ -3739,17 +3681,17 @@ a.status-card { h1 { font-size: 18px; font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; margin-bottom: 20px; } a { - color: $ui-highlight-color; + color: $highlight-text-color; &:hover, &:focus, &:active { - color: lighten($ui-highlight-color, 4%); + color: lighten($highlight-text-color, 4%); } } @@ -3759,7 +3701,7 @@ a.status-card { p { font-size: 16px; - color: lighten($ui-base-color, 8%); + color: $lighter-text-color; margin-top: 10px; margin-bottom: 10px; @@ -3770,7 +3712,7 @@ a.status-card { strong { font-weight: 500; background: $ui-base-color; - color: $ui-secondary-color; + color: $primary-text-color; border-radius: 4px; font-size: 14px; padding: 3px 6px; @@ -3822,7 +3764,7 @@ a.status-card { &__label { font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; margin-bottom: 5px; text-transform: uppercase; font-size: 12px; @@ -3830,7 +3772,7 @@ a.status-card { &__case { background: $ui-base-color; - color: $ui-secondary-color; + color: $primary-text-color; font-weight: 500; padding: 10px; border-radius: 4px; @@ -3847,7 +3789,7 @@ a.status-card { .figure { background: darken($ui-base-color, 8%); - color: $ui-secondary-color; + color: $darker-text-color; margin-bottom: 20px; border-radius: 4px; padding: 10px; @@ -3936,7 +3878,7 @@ a.status-card { .actions-modal, .mute-modal { background: lighten($ui-secondary-color, 8%); - color: $ui-base-color; + color: $inverted-text-color; border-radius: 8px; overflow: hidden; max-width: 90vw; @@ -3994,7 +3936,7 @@ a.status-card { & > div { flex: 1 1 auto; text-align: right; - color: lighten($ui-base-color, 33%); + color: $lighter-text-color; padding-right: 10px; } @@ -4081,7 +4023,7 @@ a.status-card { box-sizing: border-box; width: 100%; margin: 0; - color: $ui-base-color; + color: $inverted-text-color; background: $white; padding: 10px; font-family: inherit; @@ -4103,7 +4045,7 @@ a.status-card { margin-bottom: 24px; &__label { - color: $ui-base-color; + color: $inverted-text-color; font-size: 14px; } } @@ -4142,7 +4084,7 @@ a.status-card { li:not(:empty) { a { - color: $ui-base-color; + color: $inverted-text-color; display: flex; padding: 12px 16px; font-size: 15px; @@ -4178,14 +4120,14 @@ a.status-card { .confirmation-modal__cancel-button, .mute-modal__cancel-button { background-color: transparent; - color: darken($ui-secondary-color, 34%); + color: $lighter-text-color; font-size: 14px; font-weight: 500; &:hover, &:focus, &:active { - color: darken($ui-secondary-color, 38%); + color: transparentize($lighter-text-color, 0.04); } } } @@ -4218,7 +4160,7 @@ a.status-card { } .loading-bar { - background-color: $ui-highlight-color; + background-color: $highlight-text-color; height: 3px; position: absolute; top: 0; @@ -4266,7 +4208,7 @@ a.status-card { &__icon { flex: 0 0 auto; - color: $ui-base-lighter-color; + color: $darker-text-color; padding: 8px 18px; cursor: default; border-right: 1px solid lighten($ui-base-color, 8%); @@ -4296,7 +4238,7 @@ a.status-card { a { text-decoration: none; - color: $ui-base-lighter-color; + color: $darker-text-color; font-weight: 500; &:hover { @@ -4315,7 +4257,7 @@ a.status-card { } .fa { - color: $ui-base-lighter-color; + color: $darker-text-color; } } } @@ -4511,7 +4453,7 @@ a.status-card { z-index: 4; border: 0; background: $base-shadow-color; - color: $ui-primary-color; + color: $darker-text-color; transition: none; pointer-events: none; @@ -4522,7 +4464,7 @@ a.status-card { &:hover, &:active, &:focus { - color: lighten($ui-primary-color, 8%); + color: transparentize($darker-text-color, 0.07); } } @@ -4719,7 +4661,7 @@ a.status-card { background-size: cover; background-position: center; position: absolute; - color: $ui-primary-color; + color: $darker-text-color; text-decoration: none; border-radius: 4px; @@ -4727,7 +4669,7 @@ a.status-card { &:active, &:focus { outline: 0; - color: $ui-secondary-color; + color: transparentize($darker-text-color, 0.07); &::before { content: ""; @@ -4758,7 +4700,7 @@ a.status-card { a { display: block; flex: 1 1 auto; - color: $ui-primary-color; + color: $darker-text-color; padding: 15px 0; font-size: 14px; font-weight: 500; @@ -4767,7 +4709,7 @@ a.status-card { position: relative; &.active { - color: $ui-secondary-color; + color: transparentize($darker-text-color, 0.07); &::before, &::after { @@ -4802,12 +4744,12 @@ a.status-card { padding: 10px 14px; padding-bottom: 14px; margin-top: 10px; - color: $ui-primary-color; + color: $lighter-text-color; box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); h4 { text-transform: uppercase; - color: $ui-primary-color; + color: $lighter-text-color; font-size: 13px; font-weight: 500; margin-bottom: 10px; @@ -4823,7 +4765,7 @@ a.status-card { em { font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; } } @@ -4839,11 +4781,11 @@ noscript { div { font-size: 14px; margin: 30px auto; - color: $ui-secondary-color; + color: $primary-text-color; max-width: 400px; a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; &:hover { @@ -4941,7 +4883,6 @@ noscript { } .embed-modal__html { - color: $ui-secondary-color; outline: 0; box-sizing: border-box; display: block; @@ -4950,7 +4891,7 @@ noscript { padding: 10px; font-family: 'mastodon-font-monospace', monospace; background: $ui-base-color; - color: $ui-primary-color; + color: $primary-text-color; font-size: 14px; margin: 0; margin-bottom: 15px; @@ -4993,7 +4934,7 @@ noscript { &__message { position: relative; margin-left: 58px; - color: $ui-base-lighter-color; + color: $darker-text-color; padding: 8px 0; padding-top: 0; padding-bottom: 4px; @@ -5201,7 +5142,7 @@ noscript { } th { - color: $ui-primary-color; + color: $darker-text-color; background: darken($ui-base-color, 4%); max-width: 120px; font-weight: 500; diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss index e761f58eb..8df2902d2 100644 --- a/app/javascript/styles/mastodon/containers.scss +++ b/app/javascript/styles/mastodon/containers.scss @@ -100,7 +100,7 @@ .name { flex: 1 1 auto; - color: $ui-secondary-color; + color: $darker-text-color; width: calc(100% - 88px); .username { diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss index 4161cc045..3620a6f54 100644 --- a/app/javascript/styles/mastodon/emoji_picker.scss +++ b/app/javascript/styles/mastodon/emoji_picker.scss @@ -7,7 +7,7 @@ font-size: 13px; display: inline-block; - color: $ui-base-color; + color: $inverted-text-color; .emoji-mart-emoji { padding: 6px; @@ -36,7 +36,7 @@ display: flex; justify-content: space-between; padding: 0 6px; - color: $ui-primary-color; + color: $lighter-text-color; line-height: 0; } @@ -50,15 +50,15 @@ cursor: pointer; &:hover { - color: darken($ui-primary-color, 4%); + color: opacify($lighter-text-color, 0.04); } } .emoji-mart-anchor-selected { - color: darken($ui-highlight-color, 3%); + color: $highlight-text-color; &:hover { - color: darken($ui-highlight-color, 3%); + color: darken($highlight-text-color, 4%); } .emoji-mart-anchor-bar { @@ -72,7 +72,7 @@ left: 0; width: 100%; height: 3px; - background-color: darken($ui-highlight-color, 3%); + background-color: $highlight-text-color; } .emoji-mart-anchors { @@ -115,7 +115,7 @@ display: block; width: 100%; background: rgba($ui-secondary-color, 0.3); - color: $ui-primary-color; + color: $inverted-text-color; border: 1px solid $ui-secondary-color; border-radius: 4px; @@ -184,7 +184,7 @@ font-size: 14px; text-align: center; padding-top: 70px; - color: $ui-primary-color; + color: $lighter-text-color; .emoji-mart-category-label { display: none; diff --git a/app/javascript/styles/mastodon/footer.scss b/app/javascript/styles/mastodon/footer.scss index 2d953b34e..ba2a06954 100644 --- a/app/javascript/styles/mastodon/footer.scss +++ b/app/javascript/styles/mastodon/footer.scss @@ -2,7 +2,7 @@ text-align: center; margin-top: 30px; font-size: 12px; - color: darken($ui-secondary-color, 25%); + color: $darker-text-color; .domain { font-weight: 500; diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index 945579a9c..3a3b4c326 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -29,14 +29,14 @@ code { span.hint { display: block; - color: $ui-primary-color; + color: $darker-text-color; font-size: 12px; margin-top: 4px; } p.hint { margin-bottom: 15px; - color: $ui-primary-color; + color: $darker-text-color; &.subtle-hint { text-align: center; @@ -44,10 +44,10 @@ code { line-height: 18px; margin-top: 15px; margin-bottom: 0; - color: $ui-primary-color; + color: $darker-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } } } @@ -244,35 +244,35 @@ code { } &:focus:invalid { - border-bottom-color: $error-value-color; + border-bottom-color: lighten($error-red, 12%); } &:required:valid { - border-bottom-color: $valid-value-color; + border-bottom-color: lighten($error-red, 12%); } &:active, &:focus { - border-bottom-color: $ui-highlight-color; + border-bottom-color: $highlight-text-color; background: rgba($base-overlay-background, 0.1); } } .input.field_with_errors { label { - color: $error-value-color; + color: lighten($error-red, 12%); } input[type=text], input[type=email], input[type=password] { - border-bottom-color: $error-value-color; + border-bottom-color: lighten($error-red, 12%); } .error { display: block; font-weight: 500; - color: $error-value-color; + color: lighten($error-red, 12%); margin-top: 4px; } } @@ -356,7 +356,7 @@ code { padding: 7px 4px; padding-bottom: 9px; font-size: 16px; - color: $ui-base-lighter-color; + color: $darker-text-color; font-family: inherit; pointer-events: none; cursor: default; @@ -366,7 +366,7 @@ code { .flash-message { background: lighten($ui-base-color, 8%); - color: $ui-primary-color; + color: $darker-text-color; border-radius: 4px; padding: 15px 10px; margin-bottom: 30px; @@ -378,7 +378,6 @@ code { } .oauth-code { - color: $ui-secondary-color; outline: 0; box-sizing: border-box; display: block; @@ -387,7 +386,7 @@ code { padding: 10px; font-family: 'mastodon-font-monospace', monospace; background: $ui-base-color; - color: $ui-primary-color; + color: $primary-text-color; font-size: 14px; margin: 0; @@ -426,7 +425,7 @@ code { text-align: center; a { - color: $ui-primary-color; + color: $darker-text-color; text-decoration: none; &:hover { @@ -439,7 +438,7 @@ code { .follow-prompt { margin-bottom: 30px; text-align: center; - color: $ui-primary-color; + color: $darker-text-color; h2 { font-size: 16px; @@ -447,7 +446,7 @@ code { } strong { - color: $ui-secondary-color; + color: $primary-text-color; font-weight: 500; @each $lang in $cjk-langs { @@ -484,7 +483,7 @@ code { .qr-alternative { margin-bottom: 20px; - color: $ui-secondary-color; + color: $darker-text-color; flex: 150px; samp { @@ -569,7 +568,7 @@ code { .post-follow-actions { text-align: center; - color: $ui-primary-color; + color: $darker-text-color; div { margin-bottom: 4px; @@ -582,7 +581,7 @@ code { h4 { font-size: 16px; - color: $ui-base-lighter-color; + color: $primary-text-color; text-align: center; margin-bottom: 20px; border: 0; diff --git a/app/javascript/styles/mastodon/landing_strip.scss b/app/javascript/styles/mastodon/landing_strip.scss index ffa1e149d..651c06ced 100644 --- a/app/javascript/styles/mastodon/landing_strip.scss +++ b/app/javascript/styles/mastodon/landing_strip.scss @@ -1,7 +1,7 @@ .landing-strip, .memoriam-strip { background: rgba(darken($ui-base-color, 7%), 0.8); - color: $ui-primary-color; + color: $darker-text-color; font-weight: 400; padding: 14px; border-radius: 4px; @@ -45,7 +45,7 @@ padding: 14px; border-radius: 4px; background: rgba(darken($ui-base-color, 7%), 0.8); - color: $ui-secondary-color; + color: $darker-text-color; font-weight: 400; margin-bottom: 20px; @@ -88,7 +88,7 @@ .fa { margin-right: 5px; - color: $ui-primary-color; + color: $darker-text-color; } } @@ -103,7 +103,7 @@ text-decoration: none; span { - color: $ui-highlight-color; + color: $highlight-text-color; font-weight: 400; } } diff --git a/app/javascript/styles/mastodon/stream_entries.scss b/app/javascript/styles/mastodon/stream_entries.scss index dfdc48d06..c39163ba8 100644 --- a/app/javascript/styles/mastodon/stream_entries.scss +++ b/app/javascript/styles/mastodon/stream_entries.scss @@ -84,7 +84,7 @@ font-size: 14px; .status__relative-time { - color: $ui-primary-color; + color: $lighter-text-color; } } } @@ -93,7 +93,7 @@ display: block; max-width: 100%; padding-right: 25px; - color: $ui-base-color; + color: $lighter-text-color; } .status__avatar { @@ -123,7 +123,7 @@ strong { font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -134,15 +134,15 @@ span { font-size: 14px; - color: $ui-primary-color; + color: $inverted-text-color; } } .status__content { - color: $ui-base-color; + color: $inverted-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } a.status__content__spoiler-link { @@ -180,7 +180,7 @@ strong { font-weight: 500; - color: $ui-base-color; + color: $inverted-text-color; @each $lang in $cjk-langs { &:lang(#{$lang}) { @@ -191,7 +191,7 @@ span { font-size: 14px; - color: $ui-primary-color; + color: $lighter-text-color; } } } @@ -207,10 +207,10 @@ } .status__content { - color: $ui-base-color; + color: $inverted-text-color; a { - color: $ui-highlight-color; + color: $highlight-text-color; } a.status__content__spoiler-link { @@ -225,7 +225,7 @@ .detailed-status__meta { margin-top: 15px; - color: $ui-primary-color; + color: $lighter-text-color; font-size: 14px; line-height: 18px; @@ -243,7 +243,7 @@ .status-card { border-color: lighten($ui-secondary-color, 4%); - color: darken($ui-primary-color, 4%); + color: $lighter-text-color; &:hover { background: lighten($ui-secondary-color, 4%); @@ -252,7 +252,7 @@ .status-card__title, .status-card__description { - color: $ui-base-color; + color: $inverted-text-color; } .status-card__image { @@ -262,7 +262,7 @@ .media-spoiler { background: $ui-base-color; - color: $ui-primary-color; + color: $darker-text-color; } .pre-header { @@ -270,7 +270,7 @@ padding-left: (48px + 14px * 2); padding-bottom: 0; margin-bottom: -4px; - color: $ui-primary-color; + color: $lighter-text-color; font-size: 14px; position: relative; @@ -280,7 +280,7 @@ } .status__display-name.muted strong { - color: $ui-primary-color; + color: $lighter-text-color; } } diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss index 92870e679..c12d84f1c 100644 --- a/app/javascript/styles/mastodon/tables.scss +++ b/app/javascript/styles/mastodon/tables.scss @@ -30,7 +30,7 @@ } a { - color: $ui-highlight-color; + color: $highlight-text-color; text-decoration: underline; &:hover { @@ -68,7 +68,7 @@ a.table-action-link { display: inline-block; margin-right: 5px; padding: 0 10px; - color: rgba($primary-text-color, 0.7); + color: $darker-text-color; font-weight: 500; &:hover { diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss index e456c27ee..dc4e72a2e 100644 --- a/app/javascript/styles/mastodon/variables.scss +++ b/app/javascript/styles/mastodon/variables.scss @@ -18,6 +18,11 @@ $base-overlay-background: $black !default; $base-border-color: $white !default; $simple-background-color: $white !default; $primary-text-color: $white !default; +$darker-text-color: rgba($primary-text-color, 0.7) !default; +$highlight-text-color: $classic-highlight-color !default; +$inverted-text-color: $black !default; +$lighter-text-color: rgba($inverted-text-color, 0.7) !default; +$action-button-color: #8d9ac2; $valid-value-color: $success-green !default; $error-value-color: $error-red !default; @@ -26,7 +31,7 @@ $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; // Vibrant +$ui-highlight-color: #2b5fd9; // Language codes that uses CJK fonts $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW; |