mirror/Tangerine-UI
1
0
Fork 0
mirror of https://github.com/nileane/TangerineUI-for-Mastodon synced 2024-11-24 07:06:10 +09:00
Code

Copy CSS files to installation folder

Browse Source
This commit is contained in:
nileane 2024-03-16 16:11:04 +00:00 committed by github-actions[bot]
parent 3ce7186b2f
commit a40f0f008e
3 changed files with 218 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss
View File

@ -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);
}

78
mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss
View File

@ -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);
}

77
mastodon/app/javascript/styles/tangerineui/tangerineui.scss
View File

@ -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);
}