diff --git a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss index a5fbfdb..6380e1c 100644 --- a/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss +++ b/mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss @@ -159,8 +159,8 @@ --icon-search-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-user-plus-column-link: var(--icon-user-plus); - --icon-user-plus-column-link-active: var(--icon-user-plus-active); + --icon-user-plus-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z'%3E%3C/path%3E%3C/svg%3E"); + --icon-user-plus-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-accent: var(--icon-user-plus-accent); --icon-user-plus-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d3487f' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); @@ -343,6 +343,8 @@ --icon-search-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); + --icon-user-plus-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z'%3E%3C/path%3E%3C/svg%3E"); + --icon-user-plus-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23d05c8a' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); @@ -552,6 +554,10 @@ body.app-body { --background-filter: none; } +.app-body .account__avatar { + background-color: var(--color-content-secondary-bg); + border-radius: 50%; +} .app-body .account__avatar img { border-radius: 50%; } @@ -2790,14 +2796,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .status__action-bar { justify-content: left; margin-top: 8px; - gap: 8px; + gap: 10px; +} +.app-body .status__action-bar .status__action-bar__button-wrapper { + flex-grow: 0; } .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) :is(button, .status__action-bar__dropdown) { transition: all .3s; } -.app-body .status__action-bar .icon-button:last-child { +.app-body .status__action-bar__button-wrapper:last-child { position: absolute; right: 18px; } @@ -2816,7 +2825,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: transparent; } -.app-body .status__action-bar .icon-button:last-child:is(.active, .active:active, .active:focus), +.app-body .status__action-bar__button-wrapper:last-child .icon-button:is(.active, .active:active, .active:focus), .app-body .detailed-status__action-bar-dropdown .icon-button:is(.active, .active:active, .active:focus) { background-color: var(--color-accent); transform: scale(.9); @@ -3244,10 +3253,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview { outline: 1px solid var(--color-lines-translucent); } -.app-body .media-gallery__actions { - bottom: 10px; - inset-inline-end: 8px; -} .app-body .media-gallery__actions__pill { border-radius: 6px; padding: 3px 8px; @@ -3660,6 +3665,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu box-shadow: none; border-radius: 0; } + .app-body .column-header__select-row { + border-color: var(--color-lines); + background-color: var(--color-content-secondary-bg); + position: absolute; + inset-inline-start: -45px; + inset-inline-end: -55px; + border-width: 0 0 1px; + } } .app-body .column-header__collapsible-inner { border: 0; @@ -3940,62 +3953,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* 📍 Navigation panel ------------------- */ -@media screen and (min-width:1175px) { - /* Order of the side nav items */ - .app-body .navigation-panel__logo { - order: 1; - } - .app-body .column-link[href="/home"] { - order: 2; - } - .app-body .column-link[href="/notifications"] { - order: 3; - } - .app-body .column-link:is([href="/explore"],[href="/search"]) { - order: 4; - } - .app-body .column-link[href="/public/local"] { - order: 5; - } - .app-body .column-link[href="/public"] { - order: 6; - } - .app-body .column-link[href="/conversations"] { - order: 7; - } - .app-body .column-link[href="/follow_requests"] { - order: 8; - } - .app-body .column-link[href="/bookmarks"] { - order: 9; - } - .app-body .column-link[href="/favourites"] { - order: 10; - } - .app-body .column-link[href="/admin/reports"] { - order: 12; - } - .app-body .column-link[href="/admin/dashboard"] { - order: 13; - } - .app-body .column-link[href="/lists"] { - order: 14; - } - .app-body .list-panel { - order: 15; - } - .app-body .column-link[href="/settings/preferences"] { - order: 11; - } - .app-body .navigation-panel__sign-in-banner, - .app-body .navigation-panel__legal { - order: 14; - } - .app-body *:not(.compose-panel) > .flex-spacer { - order: 15; - } - .app-body .getting-started__trends { - order: 16; +.app-body .navigation-panel__menu { + display: flex; + flex-flow: column; +} +@media screen and (max-width:1174px) { + .app-body .navigation-panel__menu { + flex-flow: row; } } .app-body .column-link--transparent { @@ -4129,27 +4093,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .column-link span { vertical-align: middle; } -.app-body .list-panel { - padding: 5px 9px 50px 27px; - margin: 0 0 5px; - display: none; -} -.app-body .list-panel .icon { - display: none; -} -.app-body .list-panel .column-link span::before { - left: -15px; - top: -10px; - right: -15px; - bottom: -10px; -} -@media screen and (min-width:1175px) { - .app-body .column-link[href="/lists"]:is(.active, :hover) + .list-panel, - .app-body .list-panel:hover { - display: block; - animation: fadein .5s 1; - } -} @media screen and (max-width:1174px) { .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { width: 100vw; @@ -4161,7 +4104,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .columns-area__panels__pane--navigational .navigation-panel { width: 100vw; height: 4.2em; - padding-right: 20vw; padding-bottom: var(--safe-area-bottom); flex-direction: row; overflow-x: auto; @@ -4171,6 +4113,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } + .app-body .navigation-panel__menu { + padding-right: 20vw; + } .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner::before { content: " "; position: fixed; @@ -4210,23 +4155,23 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transition: .2s transform; } .app-body - .navigation-panel:has(> *:nth-child(4):last-child) + .navigation-panel__menu: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 { + .app-body .navigation-panel__menu :is(.column-link, .navigation-panel__legal):active { transform: scale(.8); } .app-body - .navigation-panel:has(> *:nth-child(5):last-child) + .navigation-panel__menu:has(> *:nth-child(5):last-child) :is(.column-link, .navigation-panel__legal), .app-body - .navigation-panel:has(> *:nth-child(7):last-child):has(.getting-started__trends) + .navigation-panel__menu:has(> *:nth-child(7):last-child):has(.getting-started__trends) :is(.column-link, .navigation-panel__legal) { flex: calc(100vw / 3); } .app-body - .navigation-panel:has(> *:nth-child(6):last-child) + .navigation-panel__menu:has(> *:nth-child(6):last-child) :is(.column-link, .navigation-panel__legal) { flex: 25vw; } @@ -5470,6 +5415,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .notification-request { padding-top: 15px; } +@media screen and (max-width:1174px) { + .app-body .notification-request { + margin-top: 60px; + } +} .app-body .notification-group { padding: 16px 23px; } diff --git a/mastodon/app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss b/mastodon/app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss index 10f3423..fba4613 100644 --- a/mastodon/app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss +++ b/mastodon/app/javascript/styles/tangerineui-lagoon/tangerineui-lagoon.scss @@ -159,8 +159,8 @@ --icon-search-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-user-plus-column-link: var(--icon-user-plus); - --icon-user-plus-column-link-active: var(--icon-user-plus-active); + --icon-user-plus-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z'%3E%3C/path%3E%3C/svg%3E"); + --icon-user-plus-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-accent: var(--icon-user-plus-accent); --icon-user-plus-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23008CB4' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); @@ -343,6 +343,8 @@ --icon-search-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); + --icon-user-plus-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z'%3E%3C/path%3E%3C/svg%3E"); + --icon-user-plus-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2308A6B7' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); @@ -552,6 +554,10 @@ body.app-body { --background-filter: none; } +.app-body .account__avatar { + background-color: var(--color-content-secondary-bg); + border-radius: 50%; +} .app-body .account__avatar img { border-radius: 50%; } @@ -2790,14 +2796,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .status__action-bar { justify-content: left; margin-top: 8px; - gap: 8px; + gap: 10px; +} +.app-body .status__action-bar .status__action-bar__button-wrapper { + flex-grow: 0; } .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) :is(button, .status__action-bar__dropdown) { transition: all .3s; } -.app-body .status__action-bar .icon-button:last-child { +.app-body .status__action-bar__button-wrapper:last-child { position: absolute; right: 18px; } @@ -2816,7 +2825,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: transparent; } -.app-body .status__action-bar .icon-button:last-child:is(.active, .active:active, .active:focus), +.app-body .status__action-bar__button-wrapper:last-child .icon-button:is(.active, .active:active, .active:focus), .app-body .detailed-status__action-bar-dropdown .icon-button:is(.active, .active:active, .active:focus) { background-color: var(--color-accent); transform: scale(.9); @@ -3244,10 +3253,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview { outline: 1px solid var(--color-lines-translucent); } -.app-body .media-gallery__actions { - bottom: 10px; - inset-inline-end: 8px; -} .app-body .media-gallery__actions__pill { border-radius: 6px; padding: 3px 8px; @@ -3660,6 +3665,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu box-shadow: none; border-radius: 0; } + .app-body .column-header__select-row { + border-color: var(--color-lines); + background-color: var(--color-content-secondary-bg); + position: absolute; + inset-inline-start: -45px; + inset-inline-end: -55px; + border-width: 0 0 1px; + } } .app-body .column-header__collapsible-inner { border: 0; @@ -3940,62 +3953,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* 📍 Navigation panel ------------------- */ -@media screen and (min-width:1175px) { - /* Order of the side nav items */ - .app-body .navigation-panel__logo { - order: 1; - } - .app-body .column-link[href="/home"] { - order: 2; - } - .app-body .column-link[href="/notifications"] { - order: 3; - } - .app-body .column-link:is([href="/explore"],[href="/search"]) { - order: 4; - } - .app-body .column-link[href="/public/local"] { - order: 5; - } - .app-body .column-link[href="/public"] { - order: 6; - } - .app-body .column-link[href="/conversations"] { - order: 7; - } - .app-body .column-link[href="/follow_requests"] { - order: 8; - } - .app-body .column-link[href="/bookmarks"] { - order: 9; - } - .app-body .column-link[href="/favourites"] { - order: 10; - } - .app-body .column-link[href="/admin/reports"] { - order: 12; - } - .app-body .column-link[href="/admin/dashboard"] { - order: 13; - } - .app-body .column-link[href="/lists"] { - order: 14; - } - .app-body .list-panel { - order: 15; - } - .app-body .column-link[href="/settings/preferences"] { - order: 11; - } - .app-body .navigation-panel__sign-in-banner, - .app-body .navigation-panel__legal { - order: 14; - } - .app-body *:not(.compose-panel) > .flex-spacer { - order: 15; - } - .app-body .getting-started__trends { - order: 16; +.app-body .navigation-panel__menu { + display: flex; + flex-flow: column; +} +@media screen and (max-width:1174px) { + .app-body .navigation-panel__menu { + flex-flow: row; } } .app-body .column-link--transparent { @@ -4129,27 +4093,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .column-link span { vertical-align: middle; } -.app-body .list-panel { - padding: 5px 9px 50px 27px; - margin: 0 0 5px; - display: none; -} -.app-body .list-panel .icon { - display: none; -} -.app-body .list-panel .column-link span::before { - left: -15px; - top: -10px; - right: -15px; - bottom: -10px; -} -@media screen and (min-width:1175px) { - .app-body .column-link[href="/lists"]:is(.active, :hover) + .list-panel, - .app-body .list-panel:hover { - display: block; - animation: fadein .5s 1; - } -} @media screen and (max-width:1174px) { .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { width: 100vw; @@ -4161,7 +4104,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .columns-area__panels__pane--navigational .navigation-panel { width: 100vw; height: 4.2em; - padding-right: 20vw; padding-bottom: var(--safe-area-bottom); flex-direction: row; overflow-x: auto; @@ -4171,6 +4113,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } + .app-body .navigation-panel__menu { + padding-right: 20vw; + } .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner::before { content: " "; position: fixed; @@ -4210,23 +4155,23 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transition: .2s transform; } .app-body - .navigation-panel:has(> *:nth-child(4):last-child) + .navigation-panel__menu: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 { + .app-body .navigation-panel__menu :is(.column-link, .navigation-panel__legal):active { transform: scale(.8); } .app-body - .navigation-panel:has(> *:nth-child(5):last-child) + .navigation-panel__menu:has(> *:nth-child(5):last-child) :is(.column-link, .navigation-panel__legal), .app-body - .navigation-panel:has(> *:nth-child(7):last-child):has(.getting-started__trends) + .navigation-panel__menu:has(> *:nth-child(7):last-child):has(.getting-started__trends) :is(.column-link, .navigation-panel__legal) { flex: calc(100vw / 3); } .app-body - .navigation-panel:has(> *:nth-child(6):last-child) + .navigation-panel__menu:has(> *:nth-child(6):last-child) :is(.column-link, .navigation-panel__legal) { flex: 25vw; } @@ -5470,6 +5415,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .notification-request { padding-top: 15px; } +@media screen and (max-width:1174px) { + .app-body .notification-request { + margin-top: 60px; + } +} .app-body .notification-group { padding: 16px 23px; } diff --git a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss index caea246..4dd47fc 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss @@ -159,8 +159,8 @@ --icon-search-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-user-plus-column-link: var(--icon-user-plus); - --icon-user-plus-column-link-active: var(--icon-user-plus-active); + --icon-user-plus-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z'%3E%3C/path%3E%3C/svg%3E"); + --icon-user-plus-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-accent: var(--icon-user-plus-accent); --icon-user-plus-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%236364ff' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); @@ -343,6 +343,8 @@ --icon-search-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); + --icon-user-plus-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z'%3E%3C/path%3E%3C/svg%3E"); + --icon-user-plus-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%237a7af9' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); @@ -552,6 +554,10 @@ body.app-body { --background-filter: none; } +.app-body .account__avatar { + background-color: var(--color-content-secondary-bg); + border-radius: 50%; +} .app-body .account__avatar img { border-radius: 50%; } @@ -2790,14 +2796,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .status__action-bar { justify-content: left; margin-top: 8px; - gap: 8px; + gap: 10px; +} +.app-body .status__action-bar .status__action-bar__button-wrapper { + flex-grow: 0; } .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) :is(button, .status__action-bar__dropdown) { transition: all .3s; } -.app-body .status__action-bar .icon-button:last-child { +.app-body .status__action-bar__button-wrapper:last-child { position: absolute; right: 18px; } @@ -2816,7 +2825,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: transparent; } -.app-body .status__action-bar .icon-button:last-child:is(.active, .active:active, .active:focus), +.app-body .status__action-bar__button-wrapper:last-child .icon-button:is(.active, .active:active, .active:focus), .app-body .detailed-status__action-bar-dropdown .icon-button:is(.active, .active:active, .active:focus) { background-color: var(--color-accent); transform: scale(.9); @@ -3244,10 +3253,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview { outline: 1px solid var(--color-lines-translucent); } -.app-body .media-gallery__actions { - bottom: 10px; - inset-inline-end: 8px; -} .app-body .media-gallery__actions__pill { border-radius: 6px; padding: 3px 8px; @@ -3660,6 +3665,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu box-shadow: none; border-radius: 0; } + .app-body .column-header__select-row { + border-color: var(--color-lines); + background-color: var(--color-content-secondary-bg); + position: absolute; + inset-inline-start: -45px; + inset-inline-end: -55px; + border-width: 0 0 1px; + } } .app-body .column-header__collapsible-inner { border: 0; @@ -3940,62 +3953,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* 📍 Navigation panel ------------------- */ -@media screen and (min-width:1175px) { - /* Order of the side nav items */ - .app-body .navigation-panel__logo { - order: 1; - } - .app-body .column-link[href="/home"] { - order: 2; - } - .app-body .column-link[href="/notifications"] { - order: 3; - } - .app-body .column-link:is([href="/explore"],[href="/search"]) { - order: 4; - } - .app-body .column-link[href="/public/local"] { - order: 5; - } - .app-body .column-link[href="/public"] { - order: 6; - } - .app-body .column-link[href="/conversations"] { - order: 7; - } - .app-body .column-link[href="/follow_requests"] { - order: 8; - } - .app-body .column-link[href="/bookmarks"] { - order: 9; - } - .app-body .column-link[href="/favourites"] { - order: 10; - } - .app-body .column-link[href="/admin/reports"] { - order: 12; - } - .app-body .column-link[href="/admin/dashboard"] { - order: 13; - } - .app-body .column-link[href="/lists"] { - order: 14; - } - .app-body .list-panel { - order: 15; - } - .app-body .column-link[href="/settings/preferences"] { - order: 11; - } - .app-body .navigation-panel__sign-in-banner, - .app-body .navigation-panel__legal { - order: 14; - } - .app-body *:not(.compose-panel) > .flex-spacer { - order: 15; - } - .app-body .getting-started__trends { - order: 16; +.app-body .navigation-panel__menu { + display: flex; + flex-flow: column; +} +@media screen and (max-width:1174px) { + .app-body .navigation-panel__menu { + flex-flow: row; } } .app-body .column-link--transparent { @@ -4129,27 +4093,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .column-link span { vertical-align: middle; } -.app-body .list-panel { - padding: 5px 9px 50px 27px; - margin: 0 0 5px; - display: none; -} -.app-body .list-panel .icon { - display: none; -} -.app-body .list-panel .column-link span::before { - left: -15px; - top: -10px; - right: -15px; - bottom: -10px; -} -@media screen and (min-width:1175px) { - .app-body .column-link[href="/lists"]:is(.active, :hover) + .list-panel, - .app-body .list-panel:hover { - display: block; - animation: fadein .5s 1; - } -} @media screen and (max-width:1174px) { .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { width: 100vw; @@ -4161,7 +4104,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .columns-area__panels__pane--navigational .navigation-panel { width: 100vw; height: 4.2em; - padding-right: 20vw; padding-bottom: var(--safe-area-bottom); flex-direction: row; overflow-x: auto; @@ -4171,6 +4113,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } + .app-body .navigation-panel__menu { + padding-right: 20vw; + } .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner::before { content: " "; position: fixed; @@ -4210,23 +4155,23 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transition: .2s transform; } .app-body - .navigation-panel:has(> *:nth-child(4):last-child) + .navigation-panel__menu: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 { + .app-body .navigation-panel__menu :is(.column-link, .navigation-panel__legal):active { transform: scale(.8); } .app-body - .navigation-panel:has(> *:nth-child(5):last-child) + .navigation-panel__menu:has(> *:nth-child(5):last-child) :is(.column-link, .navigation-panel__legal), .app-body - .navigation-panel:has(> *:nth-child(7):last-child):has(.getting-started__trends) + .navigation-panel__menu:has(> *:nth-child(7):last-child):has(.getting-started__trends) :is(.column-link, .navigation-panel__legal) { flex: calc(100vw / 3); } .app-body - .navigation-panel:has(> *:nth-child(6):last-child) + .navigation-panel__menu:has(> *:nth-child(6):last-child) :is(.column-link, .navigation-panel__legal) { flex: 25vw; } @@ -5470,6 +5415,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .notification-request { padding-top: 15px; } +@media screen and (max-width:1174px) { + .app-body .notification-request { + margin-top: 60px; + } +} .app-body .notification-group { padding: 16px 23px; } diff --git a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss index d3e86a7..8636bda 100644 --- a/mastodon/app/javascript/styles/tangerineui/tangerineui.scss +++ b/mastodon/app/javascript/styles/tangerineui/tangerineui.scss @@ -159,8 +159,8 @@ --icon-search-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); - --icon-user-plus-column-link: var(--icon-user-plus); - --icon-user-plus-column-link-active: var(--icon-user-plus-active); + --icon-user-plus-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z'%3E%3C/path%3E%3C/svg%3E"); + --icon-user-plus-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%232a2d37' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-accent: var(--icon-user-plus-accent); --icon-user-plus-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23f76902' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); @@ -343,6 +343,8 @@ --icon-search-column-link-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'%3E%3C/path%3E%3C/svg%3E"); --icon-search-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z'%3E%3C/path%3E%3C/svg%3E"); + --icon-user-plus-column-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M168,100a60,60,0,1,1-60-60A60,60,0,0,1,168,100Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136Zm-57.87,58.85a8,8,0,0,1-12.26,10.3C165.75,181.19,138.09,168,108,168s-57.75,13.19-77.87,37.15a8,8,0,0,1-12.25-10.3c14.94-17.78,33.52-30.41,54.17-37.17a68,68,0,1,1,71.9,0C164.6,164.44,183.18,177.07,198.13,194.85ZM108,152a52,52,0,1,0-52-52A52.06,52.06,0,0,0,108,152Z'%3E%3C/path%3E%3C/svg%3E"); + --icon-user-plus-column-link-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-user-plus-column-link-accent-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23e68933' viewBox='0 0 256 256'%3E%3Cpath d='M256,136a8,8,0,0,1-8,8H232v16a8,8,0,0,1-16,0V144H200a8,8,0,0,1,0-16h16V112a8,8,0,0,1,16,0v16h16A8,8,0,0,1,256,136ZM144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17A8,8,0,0,0,24,208H192a8,8,0,0,0,6.13-13.15C183.18,177.07,164.6,164.44,144,157.68Z'%3E%3C/path%3E%3C/svg%3E"); --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M216,64V192H40V64Z' opacity='0.2'%3E%3C/path%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'%3E%3C/path%3E%3C/svg%3E"); @@ -552,6 +554,10 @@ body.app-body { --background-filter: none; } +.app-body .account__avatar { + background-color: var(--color-content-secondary-bg); + border-radius: 50%; +} .app-body .account__avatar img { border-radius: 50%; } @@ -2790,14 +2796,17 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .status__action-bar { justify-content: left; margin-top: 8px; - gap: 8px; + gap: 10px; +} +.app-body .status__action-bar .status__action-bar__button-wrapper { + flex-grow: 0; } .app-body :is(.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer) :is(button, .status__action-bar__dropdown) { transition: all .3s; } -.app-body .status__action-bar .icon-button:last-child { +.app-body .status__action-bar__button-wrapper:last-child { position: absolute; right: 18px; } @@ -2816,7 +2825,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: transparent; } -.app-body .status__action-bar .icon-button:last-child:is(.active, .active:active, .active:focus), +.app-body .status__action-bar__button-wrapper:last-child .icon-button:is(.active, .active:active, .active:focus), .app-body .detailed-status__action-bar-dropdown .icon-button:is(.active, .active:active, .active:focus) { background-color: var(--color-accent); transform: scale(.9); @@ -3244,10 +3253,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .spoiler-button:hover ~ .media-gallery__item > .media-gallery__preview { outline: 1px solid var(--color-lines-translucent); } -.app-body .media-gallery__actions { - bottom: 10px; - inset-inline-end: 8px; -} .app-body .media-gallery__actions__pill { border-radius: 6px; padding: 3px 8px; @@ -3660,6 +3665,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu box-shadow: none; border-radius: 0; } + .app-body .column-header__select-row { + border-color: var(--color-lines); + background-color: var(--color-content-secondary-bg); + position: absolute; + inset-inline-start: -45px; + inset-inline-end: -55px; + border-width: 0 0 1px; + } } .app-body .column-header__collapsible-inner { border: 0; @@ -3940,62 +3953,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* 📍 Navigation panel ------------------- */ -@media screen and (min-width:1175px) { - /* Order of the side nav items */ - .app-body .navigation-panel__logo { - order: 1; - } - .app-body .column-link[href="/home"] { - order: 2; - } - .app-body .column-link[href="/notifications"] { - order: 3; - } - .app-body .column-link:is([href="/explore"],[href="/search"]) { - order: 4; - } - .app-body .column-link[href="/public/local"] { - order: 5; - } - .app-body .column-link[href="/public"] { - order: 6; - } - .app-body .column-link[href="/conversations"] { - order: 7; - } - .app-body .column-link[href="/follow_requests"] { - order: 8; - } - .app-body .column-link[href="/bookmarks"] { - order: 9; - } - .app-body .column-link[href="/favourites"] { - order: 10; - } - .app-body .column-link[href="/admin/reports"] { - order: 12; - } - .app-body .column-link[href="/admin/dashboard"] { - order: 13; - } - .app-body .column-link[href="/lists"] { - order: 14; - } - .app-body .list-panel { - order: 15; - } - .app-body .column-link[href="/settings/preferences"] { - order: 11; - } - .app-body .navigation-panel__sign-in-banner, - .app-body .navigation-panel__legal { - order: 14; - } - .app-body *:not(.compose-panel) > .flex-spacer { - order: 15; - } - .app-body .getting-started__trends { - order: 16; +.app-body .navigation-panel__menu { + display: flex; + flex-flow: column; +} +@media screen and (max-width:1174px) { + .app-body .navigation-panel__menu { + flex-flow: row; } } .app-body .column-link--transparent { @@ -4129,27 +4093,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .column-link span { vertical-align: middle; } -.app-body .list-panel { - padding: 5px 9px 50px 27px; - margin: 0 0 5px; - display: none; -} -.app-body .list-panel .icon { - display: none; -} -.app-body .list-panel .column-link span::before { - left: -15px; - top: -10px; - right: -15px; - bottom: -10px; -} -@media screen and (min-width:1175px) { - .app-body .column-link[href="/lists"]:is(.active, :hover) + .list-panel, - .app-body .list-panel:hover { - display: block; - animation: fadein .5s 1; - } -} @media screen and (max-width:1174px) { .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { width: 100vw; @@ -4161,7 +4104,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .columns-area__panels__pane--navigational .navigation-panel { width: 100vw; height: 4.2em; - padding-right: 20vw; padding-bottom: var(--safe-area-bottom); flex-direction: row; overflow-x: auto; @@ -4171,6 +4113,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } + .app-body .navigation-panel__menu { + padding-right: 20vw; + } .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner::before { content: " "; position: fixed; @@ -4210,23 +4155,23 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transition: .2s transform; } .app-body - .navigation-panel:has(> *:nth-child(4):last-child) + .navigation-panel__menu: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 { + .app-body .navigation-panel__menu :is(.column-link, .navigation-panel__legal):active { transform: scale(.8); } .app-body - .navigation-panel:has(> *:nth-child(5):last-child) + .navigation-panel__menu:has(> *:nth-child(5):last-child) :is(.column-link, .navigation-panel__legal), .app-body - .navigation-panel:has(> *:nth-child(7):last-child):has(.getting-started__trends) + .navigation-panel__menu:has(> *:nth-child(7):last-child):has(.getting-started__trends) :is(.column-link, .navigation-panel__legal) { flex: calc(100vw / 3); } .app-body - .navigation-panel:has(> *:nth-child(6):last-child) + .navigation-panel__menu:has(> *:nth-child(6):last-child) :is(.column-link, .navigation-panel__legal) { flex: 25vw; } @@ -5470,6 +5415,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .app-body .notification-request { padding-top: 15px; } +@media screen and (max-width:1174px) { + .app-body .notification-request { + margin-top: 60px; + } +} .app-body .notification-group { padding: 16px 23px; }