onara
This commit is contained in:
+300
-22
@@ -9111,7 +9111,7 @@ input#s_avatar {
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: 10001;
|
||||
z-index: 100100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -11765,7 +11765,7 @@ input:checked+.slider:before {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
z-index: 100100;
|
||||
}
|
||||
|
||||
body.modal-open {
|
||||
@@ -12941,7 +12941,7 @@ body.layout-modern>.pagewrapper:not(:has(.index-layout-wrapper)):not(:has(.item-
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 10000;
|
||||
z-index: 100100;
|
||||
overflow: auto;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
@@ -14866,29 +14866,16 @@ span.gchat-post-card--loading {
|
||||
}
|
||||
}
|
||||
|
||||
body.layout-modern .gapRight {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body.layout-modern .gapRight>svg.iconset,
|
||||
body.layout-modern .gapRight>i.iconset {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 5px;
|
||||
padding: 5px;
|
||||
right: 0px;
|
||||
background: var(--badge-tag);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.gapRight,
|
||||
body.layout-modern .gapRight,
|
||||
body.layout-legacy .gapRight {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gapRight>svg.iconset,
|
||||
.gapRight>i.iconset,
|
||||
body.layout-modern .gapRight>svg.iconset,
|
||||
body.layout-modern .gapRight>i.iconset,
|
||||
body.layout-legacy .gapRight>svg.iconset,
|
||||
body.layout-legacy .gapRight>i.iconset {
|
||||
height: 30px;
|
||||
@@ -14904,6 +14891,7 @@ body.layout-legacy .gapRight>i.iconset {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.gapRight>.iconset#a_favo,
|
||||
body.layout-legacy .gapRight>.iconset#a_favo {
|
||||
fill: #ff009b;
|
||||
}
|
||||
@@ -18613,4 +18601,294 @@ a.lazy-thumb.filtered-upload-ghost:hover::after {
|
||||
.item-main-content {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
ONARA ALTERNATIVE FLAVOR: Fullscreen See-Through Modal Wrapper
|
||||
========================================================================== */
|
||||
|
||||
/* Prevent scrolling on background document when Onara modal is active */
|
||||
body.onara-modal-open {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* Background main page elements (outside posts) are dimmed and softly blurred */
|
||||
body.onara-modal-open .pagewrapper {
|
||||
pointer-events: none !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
body.onara-modal-open .pagewrapper > *:not(.index-layout-wrapper):not(#main),
|
||||
body.onara-modal-open .index-container > *:not(.posts),
|
||||
body.onara-modal-open #footbar,
|
||||
body.onara-modal-open .pagination-container-fluid {
|
||||
opacity: 0.25 !important;
|
||||
filter: blur(1.5px) !important;
|
||||
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
filter 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
|
||||
}
|
||||
|
||||
/* All non-active background thumbnails are strictly dimmed, blurred, with no outlines or badges */
|
||||
body.onara-modal-open .posts > a.thumb:not(.onara-active) {
|
||||
opacity: 0.25 !important;
|
||||
filter: blur(1.5px) !important;
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
filter 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
|
||||
}
|
||||
|
||||
body.onara-modal-open .posts > a.thumb:not(.onara-active)::after {
|
||||
visibility: hidden !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* ONLY the single currently active thumbnail in the background shines through with TAB highlight */
|
||||
body.onara-modal-open .posts > a.thumb.onara-active {
|
||||
opacity: 1 !important;
|
||||
filter: none !important;
|
||||
box-shadow: 0 0 0 2px var(--white, #fff), 0 0 16px rgba(255, 255, 255, 0.6) !important;
|
||||
z-index: 25 !important;
|
||||
}
|
||||
|
||||
body.onara-modal-open .posts > a.thumb.onara-active::after {
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Navbar and right sidebar stay fully visible, sharp, and interactive */
|
||||
body.onara-modal-open nav.navbar {
|
||||
opacity: 1 !important;
|
||||
filter: none !important;
|
||||
pointer-events: auto !important;
|
||||
z-index: 10060 !important;
|
||||
}
|
||||
|
||||
body.onara-modal-open .global-sidebar-right {
|
||||
opacity: 1 !important;
|
||||
filter: none !important;
|
||||
pointer-events: auto !important;
|
||||
z-index: 10060 !important;
|
||||
}
|
||||
|
||||
body.onara-modal-open #sidebar-drag-zone {
|
||||
opacity: 1 !important;
|
||||
pointer-events: auto !important;
|
||||
z-index: 10061 !important;
|
||||
}
|
||||
|
||||
/* Modal wrapper covers main content area with subtle dark glassmorphism, respecting sidebar */
|
||||
.onara-modal-wrapper {
|
||||
position: fixed !important;
|
||||
top: var(--navbar-h, 50px) !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 300px !important;
|
||||
width: auto !important;
|
||||
height: calc(100vh - var(--navbar-h, 50px)) !important;
|
||||
z-index: 10050 !important;
|
||||
display: none;
|
||||
flex-direction: column !important;
|
||||
background: rgba(10, 12, 16, 0.72) !important;
|
||||
backdrop-filter: blur(5px) saturate(130%) !important;
|
||||
-webkit-backdrop-filter: blur(5px) saturate(130%) !important;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
animation: onaraFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
transition: right 0.3s ease-in-out !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body.onara-modal-open .onara-modal-wrapper {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
/* Sidebar hidden: modal expands to right edge */
|
||||
body.sidebar-right-hidden .onara-modal-wrapper {
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
/* Tablet (600px - 999px): sidebar is min(280px, 80vw) */
|
||||
@media (min-width: 600px) and (max-width: 999px) {
|
||||
.onara-modal-wrapper {
|
||||
right: min(280px, 80vw) !important;
|
||||
}
|
||||
body.sidebar-right-hidden .onara-modal-wrapper {
|
||||
right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile (<= 599px): sidebar is pure overlay, modal uses full width */
|
||||
@media (max-width: 599px) {
|
||||
.onara-modal-wrapper {
|
||||
right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes onaraFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.99);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.onara-backdrop {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
min-height: 100% !important;
|
||||
z-index: 1 !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.onara-modal-content {
|
||||
position: relative !important;
|
||||
z-index: 2 !important;
|
||||
width: 100% !important;
|
||||
min-height: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
flex: 1 0 auto !important;
|
||||
padding: 20px 0 80px 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#onara-item-mount {
|
||||
width: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Center the item layout inside modal and make it 100% scrollable */
|
||||
#onara-modal .item-layout-container,
|
||||
body.layout-legacy #onara-modal .item-layout-container,
|
||||
body.layout-modern #onara-modal .item-layout-container {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
min-height: auto !important;
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
margin: 0 auto !important;
|
||||
padding: 0 15px !important;
|
||||
box-sizing: border-box !important;
|
||||
grid-template-columns: none !important;
|
||||
grid-template-rows: none !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#onara-modal .item-main-content,
|
||||
body.layout-legacy #onara-modal .item-layout-container .item-main-content,
|
||||
body.layout-modern #onara-modal .item-layout-container .item-main-content {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
#onara-modal .item-main-content,
|
||||
body.layout-legacy #onara-modal .item-layout-container .item-main-content,
|
||||
body.layout-modern #onara-modal .item-layout-container .item-main-content {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
max-width: 850px !important;
|
||||
height: auto !important;
|
||||
min-height: auto !important;
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
margin: 0 auto !important;
|
||||
padding: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
grid-column: auto !important;
|
||||
}
|
||||
|
||||
#onara-modal .item-main-content::before,
|
||||
#onara-modal .item-main-content::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#onara-modal .item-main-content > * {
|
||||
width: 100% !important;
|
||||
max-width: 800px !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
#onara-modal .item-main-content .metadata {
|
||||
width: 100% !important;
|
||||
max-width: 600px !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
#onara-modal #comments-container {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
flex: 0 0 auto !important;
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
width: 100% !important;
|
||||
max-width: 600px !important;
|
||||
}
|
||||
|
||||
/* Modern layout: left sidebar flows below media inside modal */
|
||||
body.layout-modern #onara-modal .item-sidebar-left {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
width: 100% !important;
|
||||
max-width: 600px !important;
|
||||
height: auto !important;
|
||||
max-height: none !important;
|
||||
position: static !important;
|
||||
order: 2 !important;
|
||||
margin: 20px auto 0 auto !important;
|
||||
border-right: none !important;
|
||||
box-shadow: none !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
body.layout-modern #onara-modal .item-main-content {
|
||||
order: 1 !important;
|
||||
}
|
||||
|
||||
/* Auxiliary modals, overlays, and dialogs MUST open in front of Onara modal and fixed bars */
|
||||
body.onara-modal-open .modal-overlay,
|
||||
body.onara-modal-open .image-modal-overlay,
|
||||
body.onara-modal-open .dm-modal-overlay,
|
||||
body.onara-modal-open .swal2-container,
|
||||
body.onara-modal-open .modal-backdrop,
|
||||
body.onara-modal-open .modal,
|
||||
body.onara-modal-open #image-modal,
|
||||
body.onara-modal-open #report-modal,
|
||||
body.onara-modal-open #info-modal,
|
||||
body.onara-modal-open #visibility-modal,
|
||||
body.onara-modal-open #halls-modal,
|
||||
body.onara-modal-open #mod-action-modal,
|
||||
body.onara-modal-open #warning-modal,
|
||||
body.onara-modal-open #content-warning-modal,
|
||||
body.onara-modal-open #login-modal,
|
||||
body.onara-modal-open #register-modal,
|
||||
body.onara-modal-open #shortcuts-modal,
|
||||
body.onara-modal-open #excluded-tags-overlay,
|
||||
body.onara-modal-open #upload-drag-modal,
|
||||
body.onara-modal-open #rethumb-capture-modal,
|
||||
body.onara-modal-open #gchat-img-modal {
|
||||
z-index: 100100 !important;
|
||||
}
|
||||
Reference in New Issue
Block a user