chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add support for the new Report and Block modals

Browse source
This commit is contained in:
Niléane 2024-03-16 17:10:48 +01:00
commit 3ce7186b2f
No known key found for this signature in database
3 changed files with 218 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

78
TangerineUI-cherry.css
View file

@ -800,7 +800,8 @@ body.app-body {
.icon-eraser, .icon-eraser,
.icon-pencil, .icon-pencil,
.app-form__header-input .icon, .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 { path {
display: none; display: none;
@ -861,7 +862,8 @@ body.app-body {
.icon-eraser, .icon-eraser,
.icon-pencil, .icon-pencil,
.app-form__header-input .icon, .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-repeat: no-repeat;
background-size: 100%; background-size: 100%;
@ -3217,6 +3219,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
----------------- */ ----------------- */
.app-body .tabs-bar__wrapper { .app-body .tabs-bar__wrapper {
background-color: transparent; background-color: transparent;
box-shadow: inset 0 10px var(--color-bg);
} }
.app-body .column-header__wrapper.active:before { .app-body .column-header__wrapper.active:before {
background: none; background: none;
@ -5364,22 +5367,37 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
color: var(--color-content-fg); color: var(--color-content-fg);
} }
.app-body .radio-button__input, .app-body .radio-button__input,
.app-body .poll__input { .app-body .poll__input,
.app-body .check-box__input {
border-width: 4px; border-width: 4px;
border-color: var(--color-content-bg); border-color: var(--color-content-bg);
background-color: var(--color-accent-bg); background-color: var(--color-accent-bg);
outline: 1px solid var(--color-accent) !important; outline: 1px solid var(--color-accent) !important;
outline-offset: -1px; outline-offset: -1px;
transition: transform .3s; transition: transform .3s;
width: 20px;
height: 20px;
} }
.app-body .radio-button:active .radio-button__input, .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); transform: scale(.9);
} }
.app-body .radio-button__input.checked, .app-body .radio-button__input.checked,
.app-body .poll__input.active { .app-body .poll__input.active {
background-color: var(--color-accent); 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 { .app-body .dropdown-menu {
border: 1px solid var(--color-lines); border: 1px solid var(--color-lines);
@ -5540,7 +5558,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
/* 🖱️ Interaction modals /* 🖱️ Interaction modals
--------------------- */ --------------------- */
.app-body .modal-root__modal:not(.media-modal) { .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 { .app-body .compare-history-modal {
background-color: var(--color-content-bg); 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 { .app-body .compare-history-modal .report-modal__target {
border-color: var(--color-lines); 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 { .app-body .report-modal {
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
} }

78
TangerineUI-purple.css
View file

@ -800,7 +800,8 @@ body.app-body {
.icon-eraser, .icon-eraser,
.icon-pencil, .icon-pencil,
.app-form__header-input .icon, .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 { path {
display: none; display: none;
@ -861,7 +862,8 @@ body.app-body {
.icon-eraser, .icon-eraser,
.icon-pencil, .icon-pencil,
.app-form__header-input .icon, .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-repeat: no-repeat;
background-size: 100%; background-size: 100%;
@ -3217,6 +3219,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
----------------- */ ----------------- */
.app-body .tabs-bar__wrapper { .app-body .tabs-bar__wrapper {
background-color: transparent; background-color: transparent;
box-shadow: inset 0 10px var(--color-bg);
} }
.app-body .column-header__wrapper.active:before { .app-body .column-header__wrapper.active:before {
background: none; background: none;
@ -5364,22 +5367,37 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
color: var(--color-content-fg); color: var(--color-content-fg);
} }
.app-body .radio-button__input, .app-body .radio-button__input,
.app-body .poll__input { .app-body .poll__input,
.app-body .check-box__input {
border-width: 4px; border-width: 4px;
border-color: var(--color-content-bg); border-color: var(--color-content-bg);
background-color: var(--color-accent-bg); background-color: var(--color-accent-bg);
outline: 1px solid var(--color-accent) !important; outline: 1px solid var(--color-accent) !important;
outline-offset: -1px; outline-offset: -1px;
transition: transform .3s; transition: transform .3s;
width: 20px;
height: 20px;
} }
.app-body .radio-button:active .radio-button__input, .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); transform: scale(.9);
} }
.app-body .radio-button__input.checked, .app-body .radio-button__input.checked,
.app-body .poll__input.active { .app-body .poll__input.active {
background-color: var(--color-accent); 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 { .app-body .dropdown-menu {
border: 1px solid var(--color-lines); border: 1px solid var(--color-lines);
@ -5540,7 +5558,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
/* 🖱️ Interaction modals /* 🖱️ Interaction modals
--------------------- */ --------------------- */
.app-body .modal-root__modal:not(.media-modal) { .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 { .app-body .compare-history-modal {
background-color: var(--color-content-bg); 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 { .app-body .compare-history-modal .report-modal__target {
border-color: var(--color-lines); 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 { .app-body .report-modal {
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
} }

77
TangerineUI.css
View file

@ -800,7 +800,8 @@ body.app-body {
.icon-eraser, .icon-eraser,
.icon-pencil, .icon-pencil,
.app-form__header-input .icon, .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 { path {
display: none; display: none;
@ -861,7 +862,8 @@ body.app-body {
.icon-eraser, .icon-eraser,
.icon-pencil, .icon-pencil,
.app-form__header-input .icon, .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-repeat: no-repeat;
background-size: 100%; background-size: 100%;
@ -5365,22 +5367,37 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
color: var(--color-content-fg); color: var(--color-content-fg);
} }
.app-body .radio-button__input, .app-body .radio-button__input,
.app-body .poll__input { .app-body .poll__input,
.app-body .check-box__input {
border-width: 4px; border-width: 4px;
border-color: var(--color-content-bg); border-color: var(--color-content-bg);
background-color: var(--color-accent-bg); background-color: var(--color-accent-bg);
outline: 1px solid var(--color-accent) !important; outline: 1px solid var(--color-accent) !important;
outline-offset: -1px; outline-offset: -1px;
transition: transform .3s; transition: transform .3s;
width: 20px;
height: 20px;
} }
.app-body .radio-button:active .radio-button__input, .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); transform: scale(.9);
} }
.app-body .radio-button__input.checked, .app-body .radio-button__input.checked,
.app-body .poll__input.active { .app-body .poll__input.active {
background-color: var(--color-accent); 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 { .app-body .dropdown-menu {
border: 1px solid var(--color-lines); border: 1px solid var(--color-lines);
@ -5541,7 +5558,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
/* 🖱️ Interaction modals /* 🖱️ Interaction modals
--------------------- */ --------------------- */
.app-body .modal-root__modal:not(.media-modal) { .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 { .app-body .compare-history-modal {
background-color: var(--color-content-bg); 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 { .app-body .compare-history-modal .report-modal__target {
border-color: var(--color-lines); 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 { .app-body .report-modal {
background-color: var(--color-content-bg); background-color: var(--color-content-bg);
} }