diff --git a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss index 981803d..3464199 100644 --- a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss +++ b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss @@ -800,7 +800,8 @@ body.app-body { .icon-eraser, .icon-pencil, .app-form__header-input .icon, - .account__domain-pill__popout__parts__icon .icon + .account__domain-pill__popout__parts__icon .icon, + .safety-action-modal__bullet-points__icon .icon ) path { display: none; @@ -861,7 +862,8 @@ body.app-body { .icon-eraser, .icon-pencil, .app-form__header-input .icon, - .account__domain-pill__popout__parts__icon .icon + .account__domain-pill__popout__parts__icon .icon, + .safety-action-modal__bullet-points__icon .icon ) { background-repeat: no-repeat; background-size: 100%; @@ -3217,6 +3219,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu ----------------- */ .app-body .tabs-bar__wrapper { background-color: transparent; + box-shadow: inset 0 10px var(--color-bg); } .app-body .column-header__wrapper.active:before { background: none; @@ -5364,22 +5367,37 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-content-fg); } .app-body .radio-button__input, -.app-body .poll__input { +.app-body .poll__input, +.app-body .check-box__input { border-width: 4px; border-color: var(--color-content-bg); background-color: var(--color-accent-bg); outline: 1px solid var(--color-accent) !important; outline-offset: -1px; transition: transform .3s; + width: 20px; + height: 20px; } .app-body .radio-button:active .radio-button__input, -.app-body .poll__option:active .poll__input { +.app-body .poll__option:active .poll__input, +.app-body .check-box:active .check-box__input { transform: scale(.9); } .app-body .radio-button__input.checked, .app-body .poll__input.active { background-color: var(--color-accent); } +.app-body .check-box__input.checked:before, +.app-body .radio-button__input.checked:before { + display: none; +} +.app-body .check-box__input.checked, +.app-body .radio-button__input.checked { + background-color: var(--color-accent); +} +.app-body .check-box__input.checked .icon-check { + transform: scale(.5); +} .app-body .dropdown-menu { border: 1px solid var(--color-lines); @@ -5540,7 +5558,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* 🖱️ Interaction modals --------------------- */ .app-body .modal-root__modal:not(.media-modal) { - border: 1px solid var(--color-lines); + border: 0; + outline: 1px solid var(--color-lines-translucent); } .app-body .compare-history-modal { background-color: var(--color-content-bg); @@ -5549,6 +5568,55 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .compare-history-modal .report-modal__target { border-color: var(--color-lines); } +.app-body .safety-action-modal { + border: 1px solid var(--color-lines); + background-color: var(--color-content-bg); + border-radius: 8px; +} +.app-body .safety-action-modal__header__icon { + background-color: var(--color-accent); +} +.app-body .safety-action-modal__header, +.app-body .safety-action-modal__header h1, +.app-body .safety-action-modal__caveats, +.app-body .safety-action-modal__bullet-points { + color: var(--color-content-fg); +} +.app-body .safety-action-modal__header h1 { + font-weight: 600; +} +.app-body .safety-action-modal__header h1 + div { + opacity: .6; +} +.app-body .safety-action-modal__top { + background-color: transparent; + border: 0; +} +.app-body .safety-action-modal__bottom { + background-color: var(--color-content-secondary-bg); + padding-top: 24px; + border: 0; + border-radius: 0 0 8px 8px; +} +.app-body .safety-action-modal__bullet-points__icon .icon { + transform: scale(1.3); +} +.app-body .safety-action-modal__bullet-points > div:first-child .safety-action-modal__bullet-points__icon .icon { + background-image: var(--icon-megaphone); +} +.app-body .safety-action-modal__bullet-points > div:nth-child(2) .safety-action-modal__bullet-points__icon .icon { + background-image: var(--icon-eye-shut); +} +.app-body .safety-action-modal__bullet-points > div:nth-child(3) .safety-action-modal__bullet-points__icon .icon { + background-image: var(--icon-direct-messages); +} +.app-body .safety-action-modal__bullet-points > div:nth-child(4) .safety-action-modal__bullet-points__icon .icon { + background-image: var(--icon-reply); + transform: scale(1); +} +.app-body .safety-action-modal__field-group label { + color: var(--color-content-fg); +} .app-body .report-modal { background-color: var(--color-content-bg); } diff --git a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss index 83dcb64..1c18ac9 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss @@ -800,7 +800,8 @@ body.app-body { .icon-eraser, .icon-pencil, .app-form__header-input .icon, - .account__domain-pill__popout__parts__icon .icon + .account__domain-pill__popout__parts__icon .icon, + .safety-action-modal__bullet-points__icon .icon ) path { display: none; @@ -861,7 +862,8 @@ body.app-body { .icon-eraser, .icon-pencil, .app-form__header-input .icon, - .account__domain-pill__popout__parts__icon .icon + .account__domain-pill__popout__parts__icon .icon, + .safety-action-modal__bullet-points__icon .icon ) { background-repeat: no-repeat; background-size: 100%; @@ -3217,6 +3219,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu ----------------- */ .app-body .tabs-bar__wrapper { background-color: transparent; + box-shadow: inset 0 10px var(--color-bg); } .app-body .column-header__wrapper.active:before { background: none; @@ -5364,22 +5367,37 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-content-fg); } .app-body .radio-button__input, -.app-body .poll__input { +.app-body .poll__input, +.app-body .check-box__input { border-width: 4px; border-color: var(--color-content-bg); background-color: var(--color-accent-bg); outline: 1px solid var(--color-accent) !important; outline-offset: -1px; transition: transform .3s; + width: 20px; + height: 20px; } .app-body .radio-button:active .radio-button__input, -.app-body .poll__option:active .poll__input { +.app-body .poll__option:active .poll__input, +.app-body .check-box:active .check-box__input { transform: scale(.9); } .app-body .radio-button__input.checked, .app-body .poll__input.active { background-color: var(--color-accent); } +.app-body .check-box__input.checked:before, +.app-body .radio-button__input.checked:before { + display: none; +} +.app-body .check-box__input.checked, +.app-body .radio-button__input.checked { + background-color: var(--color-accent); +} +.app-body .check-box__input.checked .icon-check { + transform: scale(.5); +} .app-body .dropdown-menu { border: 1px solid var(--color-lines); @@ -5540,7 +5558,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* 🖱️ Interaction modals --------------------- */ .app-body .modal-root__modal:not(.media-modal) { - border: 1px solid var(--color-lines); + border: 0; + outline: 1px solid var(--color-lines-translucent); } .app-body .compare-history-modal { background-color: var(--color-content-bg); @@ -5549,6 +5568,55 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .compare-history-modal .report-modal__target { border-color: var(--color-lines); } +.app-body .safety-action-modal { + border: 1px solid var(--color-lines); + background-color: var(--color-content-bg); + border-radius: 8px; +} +.app-body .safety-action-modal__header__icon { + background-color: var(--color-accent); +} +.app-body .safety-action-modal__header, +.app-body .safety-action-modal__header h1, +.app-body .safety-action-modal__caveats, +.app-body .safety-action-modal__bullet-points { + color: var(--color-content-fg); +} +.app-body .safety-action-modal__header h1 { + font-weight: 600; +} +.app-body .safety-action-modal__header h1 + div { + opacity: .6; +} +.app-body .safety-action-modal__top { + background-color: transparent; + border: 0; +} +.app-body .safety-action-modal__bottom { + background-color: var(--color-content-secondary-bg); + padding-top: 24px; + border: 0; + border-radius: 0 0 8px 8px; +} +.app-body .safety-action-modal__bullet-points__icon .icon { + transform: scale(1.3); +} +.app-body .safety-action-modal__bullet-points > div:first-child .safety-action-modal__bullet-points__icon .icon { + background-image: var(--icon-megaphone); +} +.app-body .safety-action-modal__bullet-points > div:nth-child(2) .safety-action-modal__bullet-points__icon .icon { + background-image: var(--icon-eye-shut); +} +.app-body .safety-action-modal__bullet-points > div:nth-child(3) .safety-action-modal__bullet-points__icon .icon { + background-image: var(--icon-direct-messages); +} +.app-body .safety-action-modal__bullet-points > div:nth-child(4) .safety-action-modal__bullet-points__icon .icon { + background-image: var(--icon-reply); + transform: scale(1); +} +.app-body .safety-action-modal__field-group label { + color: var(--color-content-fg); +} .app-body .report-modal { background-color: var(--color-content-bg); } diff --git a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss index 09471af..127d1c4 100644 --- a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss +++ b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss @@ -800,7 +800,8 @@ body.app-body { .icon-eraser, .icon-pencil, .app-form__header-input .icon, - .account__domain-pill__popout__parts__icon .icon + .account__domain-pill__popout__parts__icon .icon, + .safety-action-modal__bullet-points__icon .icon ) path { display: none; @@ -861,7 +862,8 @@ body.app-body { .icon-eraser, .icon-pencil, .app-form__header-input .icon, - .account__domain-pill__popout__parts__icon .icon + .account__domain-pill__popout__parts__icon .icon, + .safety-action-modal__bullet-points__icon .icon ) { background-repeat: no-repeat; background-size: 100%; @@ -5365,22 +5367,37 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-content-fg); } .app-body .radio-button__input, -.app-body .poll__input { +.app-body .poll__input, +.app-body .check-box__input { border-width: 4px; border-color: var(--color-content-bg); background-color: var(--color-accent-bg); outline: 1px solid var(--color-accent) !important; outline-offset: -1px; transition: transform .3s; + width: 20px; + height: 20px; } .app-body .radio-button:active .radio-button__input, -.app-body .poll__option:active .poll__input { +.app-body .poll__option:active .poll__input, +.app-body .check-box:active .check-box__input { transform: scale(.9); } .app-body .radio-button__input.checked, .app-body .poll__input.active { background-color: var(--color-accent); } +.app-body .check-box__input.checked:before, +.app-body .radio-button__input.checked:before { + display: none; +} +.app-body .check-box__input.checked, +.app-body .radio-button__input.checked { + background-color: var(--color-accent); +} +.app-body .check-box__input.checked .icon-check { + transform: scale(.5); +} .app-body .dropdown-menu { border: 1px solid var(--color-lines); @@ -5541,7 +5558,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* 🖱️ Interaction modals --------------------- */ .app-body .modal-root__modal:not(.media-modal) { - border: 1px solid var(--color-lines); + border: 0; + outline: 1px solid var(--color-lines-translucent); } .app-body .compare-history-modal { background-color: var(--color-content-bg); @@ -5550,6 +5568,55 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .compare-history-modal .report-modal__target { border-color: var(--color-lines); } +.app-body .safety-action-modal { + border: 1px solid var(--color-lines); + background-color: var(--color-content-bg); + border-radius: 8px; +} +.app-body .safety-action-modal__header__icon { + background-color: var(--color-accent); +} +.app-body .safety-action-modal__header, +.app-body .safety-action-modal__header h1, +.app-body .safety-action-modal__caveats, +.app-body .safety-action-modal__bullet-points { + color: var(--color-content-fg); +} +.app-body .safety-action-modal__header h1 { + font-weight: 600; +} +.app-body .safety-action-modal__header h1 + div { + opacity: .6; +} +.app-body .safety-action-modal__top { + background-color: transparent; + border: 0; +} +.app-body .safety-action-modal__bottom { + background-color: var(--color-content-secondary-bg); + padding-top: 24px; + border: 0; + border-radius: 0 0 8px 8px; +} +.app-body .safety-action-modal__bullet-points__icon .icon { + transform: scale(1.3); +} +.app-body .safety-action-modal__bullet-points > div:first-child .safety-action-modal__bullet-points__icon .icon { + background-image: var(--icon-megaphone); +} +.app-body .safety-action-modal__bullet-points > div:nth-child(2) .safety-action-modal__bullet-points__icon .icon { + background-image: var(--icon-eye-shut); +} +.app-body .safety-action-modal__bullet-points > div:nth-child(3) .safety-action-modal__bullet-points__icon .icon { + background-image: var(--icon-direct-messages); +} +.app-body .safety-action-modal__bullet-points > div:nth-child(4) .safety-action-modal__bullet-points__icon .icon { + background-image: var(--icon-reply); + transform: scale(1); +} +.app-body .safety-action-modal__field-group label { + color: var(--color-content-fg); +} .app-body .report-modal { background-color: var(--color-content-bg); }