From a2d78c64628e264787fc0a383378c8336845d14d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nil=C3=A9ane?= Date: Tue, 19 Dec 2023 21:34:08 +0100 Subject: [PATCH] Fixes to the lists tab + composer --- TangerineUI-cherry.css | 35 +++++++++++++++++++---------------- TangerineUI-purple.css | 35 +++++++++++++++++++---------------- TangerineUI.css | 35 +++++++++++++++++++---------------- 3 files changed, 57 insertions(+), 48 deletions(-) diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css index db2e3de..fb2ef67 100644 --- a/TangerineUI-cherry.css +++ b/TangerineUI-cherry.css @@ -1088,11 +1088,7 @@ body.app-body { } @media screen and (max-width:1174px) { .app-body .compose-form { - padding: 0 10px 10px; - } - .app-body .navigation-bar { - border-radius: 8px 8px 0 0; - margin: 10px 10px 0; + padding: 15px; } } @@ -1145,7 +1141,7 @@ body.app-body { } .app-body .compose-form__poll__footer { margin-top: 5px; - padding-inline-start: 25px; + padding-inline-start: 51px; } .app-body .compose-form__poll__select__label { color: var(--color-content-fg) @@ -2912,12 +2908,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu align-items: center; box-sizing: border-box; background-color: transparent; + transform-origin: center; + transition: .2s transform; } .app-body .navigation-panel:has(> *:nth-child(4):last-child) :is(.column-link, .navigation-panel__legal) { flex: 50vw; } + .app-body .navigation-panel :is(.column-link, .navigation-panel__legal):active { + transform: scale(.9); + } .app-body .navigation-panel:has(> *:nth-child(5):last-child) :is(.column-link, .navigation-panel__legal), @@ -3759,27 +3760,24 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* 📋 Lists tab */ .app-body .column-inline-form { - background-color: var(--color-accent-bg); - border: 1px solid var(--color-accent-lines); -} -@media screen and (max-width:1174px) { - .app-body .column-inline-form { - margin-top: 10px; - } + background-color: var(--color-content-secondary-bg); + border: 1px solid var(--color-lines); + border-bottom: 0; } @media screen and (max-width:889px) { .app-body .column-inline-form { - margin-left: 10px; - margin-right: 10px; + border-left: 0; + border-right: 0; } } .app-body .column-inline-form label :is(input, input:focus) { background-color: var(--color-content-bg); color: var(--color-content-fg); border-radius: 8px; + border: 1px solid var(--color-lines); } .app-body .column-inline-form label input:focus { - box-shadow: 0 0 0 1px var(--color-accent); + border-color: var(--color-accent); } .app-body :is(.column-subheading, .columns-area__panels__main .column-link) { background-color: var(--color-content-bg); @@ -3801,11 +3799,16 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 0; } } +.app-body .list-editor { + background-color: var(--color-content-bg); +} .app-body .list-editor .drawer__inner { background-color: var(--color-content-bg); + border-radius: 0; } .app-body .list-editor__search { margin: 10px; + background-color: var(--color-content-bg); } .app-body .list-editor .column-inline-form { background-color: var(--color-content-secondary-bg); diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index 1b3f1ac..874c5ab 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -1088,11 +1088,7 @@ body.app-body { } @media screen and (max-width:1174px) { .app-body .compose-form { - padding: 0 10px 10px; - } - .app-body .navigation-bar { - border-radius: 8px 8px 0 0; - margin: 10px 10px 0; + padding: 15px; } } @@ -1145,7 +1141,7 @@ body.app-body { } .app-body .compose-form__poll__footer { margin-top: 5px; - padding-inline-start: 25px; + padding-inline-start: 51px; } .app-body .compose-form__poll__select__label { color: var(--color-content-fg) @@ -2912,12 +2908,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu align-items: center; box-sizing: border-box; background-color: transparent; + transform-origin: center; + transition: .2s transform; } .app-body .navigation-panel:has(> *:nth-child(4):last-child) :is(.column-link, .navigation-panel__legal) { flex: 50vw; } + .app-body .navigation-panel :is(.column-link, .navigation-panel__legal):active { + transform: scale(.9); + } .app-body .navigation-panel:has(> *:nth-child(5):last-child) :is(.column-link, .navigation-panel__legal), @@ -3759,27 +3760,24 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* 📋 Lists tab */ .app-body .column-inline-form { - background-color: var(--color-accent-bg); - border: 1px solid var(--color-accent-lines); -} -@media screen and (max-width:1174px) { - .app-body .column-inline-form { - margin-top: 10px; - } + background-color: var(--color-content-secondary-bg); + border: 1px solid var(--color-lines); + border-bottom: 0; } @media screen and (max-width:889px) { .app-body .column-inline-form { - margin-left: 10px; - margin-right: 10px; + border-left: 0; + border-right: 0; } } .app-body .column-inline-form label :is(input, input:focus) { background-color: var(--color-content-bg); color: var(--color-content-fg); border-radius: 8px; + border: 1px solid var(--color-lines); } .app-body .column-inline-form label input:focus { - box-shadow: 0 0 0 1px var(--color-accent); + border-color: var(--color-accent); } .app-body :is(.column-subheading, .columns-area__panels__main .column-link) { background-color: var(--color-content-bg); @@ -3801,11 +3799,16 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 0; } } +.app-body .list-editor { + background-color: var(--color-content-bg); +} .app-body .list-editor .drawer__inner { background-color: var(--color-content-bg); + border-radius: 0; } .app-body .list-editor__search { margin: 10px; + background-color: var(--color-content-bg); } .app-body .list-editor .column-inline-form { background-color: var(--color-content-secondary-bg); diff --git a/TangerineUI.css b/TangerineUI.css index fcdff93..843d5e1 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -1088,11 +1088,7 @@ body.app-body { } @media screen and (max-width:1174px) { .app-body .compose-form { - padding: 0 10px 10px; - } - .app-body .navigation-bar { - border-radius: 8px 8px 0 0; - margin: 10px 10px 0; + padding: 15px; } } @@ -1145,7 +1141,7 @@ body.app-body { } .app-body .compose-form__poll__footer { margin-top: 5px; - padding-inline-start: 25px; + padding-inline-start: 51px; } .app-body .compose-form__poll__select__label { color: var(--color-content-fg) @@ -2912,12 +2908,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu align-items: center; box-sizing: border-box; background-color: transparent; + transform-origin: center; + transition: .2s transform; } .app-body .navigation-panel:has(> *:nth-child(4):last-child) :is(.column-link, .navigation-panel__legal) { flex: 50vw; } + .app-body .navigation-panel :is(.column-link, .navigation-panel__legal):active { + transform: scale(.9); + } .app-body .navigation-panel:has(> *:nth-child(5):last-child) :is(.column-link, .navigation-panel__legal), @@ -3759,27 +3760,24 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* 📋 Lists tab */ .app-body .column-inline-form { - background-color: var(--color-accent-bg); - border: 1px solid var(--color-accent-lines); -} -@media screen and (max-width:1174px) { - .app-body .column-inline-form { - margin-top: 10px; - } + background-color: var(--color-content-secondary-bg); + border: 1px solid var(--color-lines); + border-bottom: 0; } @media screen and (max-width:889px) { .app-body .column-inline-form { - margin-left: 10px; - margin-right: 10px; + border-left: 0; + border-right: 0; } } .app-body .column-inline-form label :is(input, input:focus) { background-color: var(--color-content-bg); color: var(--color-content-fg); border-radius: 8px; + border: 1px solid var(--color-lines); } .app-body .column-inline-form label input:focus { - box-shadow: 0 0 0 1px var(--color-accent); + border-color: var(--color-accent); } .app-body :is(.column-subheading, .columns-area__panels__main .column-link) { background-color: var(--color-content-bg); @@ -3801,11 +3799,16 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 0; } } +.app-body .list-editor { + background-color: var(--color-content-bg); +} .app-body .list-editor .drawer__inner { background-color: var(--color-content-bg); + border-radius: 0; } .app-body .list-editor__search { margin: 10px; + background-color: var(--color-content-bg); } .app-body .list-editor .column-inline-form { background-color: var(--color-content-secondary-bg);