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

Fixed #57: interaction modals are incorrectly styled on Mastodon v4.2.0

Browse source
This commit is contained in:
Niléane 2023-08-25 12:11:33 +02:00
commit 919c459cb0
No known key found for this signature in database
4 changed files with 96 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

23
TangerineUI-purple.css
View file

@ -3201,10 +3201,29 @@ body.layout-single-column {
.layout-single-column .interaction-modal .button.button-tertiary:hover {
background-color: var(--color-content-secondary-separator);
}
.layout-single-column .copypaste input {
.layout-single-column .copypaste input,
.layout-single-column .interaction-modal__login__input {
border-color: var(--color-accent);
background-color: var(--color-content-bg);
background-color: var(--color-accent-lines);
color: var(--color-content-fg);
border-radius: 8px;
}
.layout-single-column .interaction-modal__login.expanded .interaction-modal__login__input {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.layout-single-column .interaction-modal__login__input input::placeholder {
color: var(--color-accent);
}
.layout-single-column .interaction-modal__login.focused .interaction-modal__login__input {
background-color: var(--color-content-bg);
border-color: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-accent);
}
.layout-single-column .interaction-modal__login .search__popout {
border-color: var(--color-lines);
}
.layout-single-column .interaction-modal .copypaste button {
padding: 8px 18px;

29
TangerineUI.css
View file

@ -3194,6 +3194,12 @@ body.layout-single-column {
.layout-single-column .interaction-modal__choices__choice p {
color: var(--color-fg);
}
.layout-single-column .interaction-modal p {
color: var(--color-content-fg);
}
.layout-single-column .interaction-modal p.hint {
color: var(--color-content-fg-muted);
}
.layout-single-column .interaction-modal .button,
.layout-single-column .interaction-modal .button.button-tertiary {
padding: 10px 18px;
@ -3201,10 +3207,29 @@ body.layout-single-column {
.layout-single-column .interaction-modal .button.button-tertiary:hover {
background-color: var(--color-content-secondary-separator);
}
.layout-single-column .copypaste input {
.layout-single-column .copypaste input,
.layout-single-column .interaction-modal__login__input {
border-color: var(--color-accent);
background-color: var(--color-content-bg);
background-color: var(--color-accent-lines);
color: var(--color-content-fg);
border-radius: 8px;
}
.layout-single-column .interaction-modal__login.expanded .interaction-modal__login__input {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.layout-single-column .interaction-modal__login__input input::placeholder {
color: var(--color-accent);
}
.layout-single-column .interaction-modal__login.focused .interaction-modal__login__input {
background-color: var(--color-content-bg);
border-color: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-accent);
}
.layout-single-column .interaction-modal__login .search__popout {
border-color: var(--color-lines);
}
.layout-single-column .interaction-modal .copypaste button {
padding: 8px 18px;

23
mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss
View file

@ -3201,10 +3201,29 @@ body.layout-single-column {
.layout-single-column .interaction-modal .button.button-tertiary:hover {
background-color: var(--color-content-secondary-separator);
}
.layout-single-column .copypaste input {
.layout-single-column .copypaste input,
.layout-single-column .interaction-modal__login__input {
border-color: var(--color-accent);
background-color: var(--color-content-bg);
background-color: var(--color-accent-lines);
color: var(--color-content-fg);
border-radius: 8px;
}
.layout-single-column .interaction-modal__login.expanded .interaction-modal__login__input {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.layout-single-column .interaction-modal__login__input input::placeholder {
color: var(--color-accent);
}
.layout-single-column .interaction-modal__login.focused .interaction-modal__login__input {
background-color: var(--color-content-bg);
border-color: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-accent);
}
.layout-single-column .interaction-modal__login .search__popout {
border-color: var(--color-lines);
}
.layout-single-column .interaction-modal .copypaste button {
padding: 8px 18px;

29
mastodon/app/javascript/styles/tangerineui/layout-single-column.scss
View file

@ -3194,6 +3194,12 @@ body.layout-single-column {
.layout-single-column .interaction-modal__choices__choice p {
color: var(--color-fg);
}
.layout-single-column .interaction-modal p {
color: var(--color-content-fg);
}
.layout-single-column .interaction-modal p.hint {
color: var(--color-content-fg-muted);
}
.layout-single-column .interaction-modal .button,
.layout-single-column .interaction-modal .button.button-tertiary {
padding: 10px 18px;
@ -3201,10 +3207,29 @@ body.layout-single-column {
.layout-single-column .interaction-modal .button.button-tertiary:hover {
background-color: var(--color-content-secondary-separator);
}
.layout-single-column .copypaste input {
.layout-single-column .copypaste input,
.layout-single-column .interaction-modal__login__input {
border-color: var(--color-accent);
background-color: var(--color-content-bg);
background-color: var(--color-accent-lines);
color: var(--color-content-fg);
border-radius: 8px;
}
.layout-single-column .interaction-modal__login.expanded .interaction-modal__login__input {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.layout-single-column .interaction-modal__login__input input::placeholder {
color: var(--color-accent);
}
.layout-single-column .interaction-modal__login.focused .interaction-modal__login__input {
background-color: var(--color-content-bg);
border-color: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-accent);
}
.layout-single-column .interaction-modal__login .search__popout {
border-color: var(--color-lines);
}
.layout-single-column .interaction-modal .copypaste button {
padding: 8px 18px;