From 3c259882eb1c3bdcb0e8122a3094568b2dfd1787 Mon Sep 17 00:00:00 2001 From: Lena Daxenbichler Date: Mon, 12 Jan 2026 17:38:36 +0100 Subject: [PATCH 01/11] rework layout and add css to allow proper layout rendering if config.pathbar is False (no breadcrumbs) --- package.json | 2 +- scss/content.scss | 10 +++++++++- scss/sidebar.scss | 4 ++-- src/cone/app/browser/static/cone/cone.app.css | 14 +++++++++++--- src/cone/app/browser/static/cone/cone.app.min.css | 2 +- src/cone/app/browser/templates/layout.pt | 5 ++++- 6 files changed, 28 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 7868e2d4..46068443 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "rollup": "^2.79.2", "rollup-plugin-cleanup": "^3.2.1", "rollup-plugin-postcss": "^4.0.2", - "sass": "^1.94.2", + "sass": "^1.97.2", "web-test-runner-qunit": "^2.0.0" }, "packageManager": "pnpm@9.3.0+sha512.ee7b93e0c2bd11409c6424f92b866f31d3ea1bef5fbe47d3c7500cdc3c9668833d2e55681ad66df5b640c61fa9dc25d546efa54d76d7f8bf54b13614ac293631" diff --git a/scss/content.scss b/scss/content.scss index 8ab1eb11..7e543323 100644 --- a/scss/content.scss +++ b/scss/content.scss @@ -3,11 +3,19 @@ /* content */ #content { container: main-content / inline-size; - height: calc(100% - 40px); + height: 100%; width: 100%; position: relative; } +#content_area { + height: 100%; +} +// pathbar adds 40px height to layout +#content_area.has-pathbar { + height: calc(100% - 40px); +} + #main-area { width: 0!important; /* prevent 'jumping' between 1400 and 1440px */ } diff --git a/scss/sidebar.scss b/scss/sidebar.scss index a28fec4c..99dab9b4 100644 --- a/scss/sidebar.scss +++ b/scss/sidebar.scss @@ -25,7 +25,7 @@ .lock-state { position: relative; - top: calc(100% - 4.5rem); + top: calc(100% - 2rem); width: min-content; height: 0; // required, as else it will take up space in flexbox z-index: 100; @@ -111,7 +111,7 @@ .collapse_btn { position: absolute; - bottom: 0px; + top: 100%; border-radius: 100%; z-index: 1000; } diff --git a/src/cone/app/browser/static/cone/cone.app.css b/src/cone/app/browser/static/cone/cone.app.css index 4c7b2a78..160ae5cf 100644 --- a/src/cone/app/browser/static/cone/cone.app.css +++ b/src/cone/app/browser/static/cone/cone.app.css @@ -110,11 +110,19 @@ select.form-control.referencebrowser[multiple=multiple] + .referencebrowser_trig /* content */ #content { container: main-content/inline-size; - height: calc(100% - 40px); + height: 100%; width: 100%; position: relative; } +#content_area { + height: 100%; +} + +#content_area.has-pathbar { + height: calc(100% - 40px); +} + #main-area { width: 0 !important; /* prevent 'jumping' between 1400 and 1440px */ } @@ -437,7 +445,7 @@ tr.selectable td { } #sidebar_left .lock-state, #sidebar_right .lock-state { position: relative; - top: calc(100% - 4.5rem); + top: calc(100% - 2rem); width: min-content; height: 0; z-index: 100; @@ -508,7 +516,7 @@ tr.selectable td { } #sidebar_left #sidebar_collapse .collapse_btn, #sidebar_right #sidebar_collapse .collapse_btn { position: absolute; - bottom: 0px; + top: 100%; border-radius: 100%; z-index: 1000; } diff --git a/src/cone/app/browser/static/cone/cone.app.min.css b/src/cone/app/browser/static/cone/cone.app.min.css index 9d2fa4c0..29318352 100644 --- a/src/cone/app/browser/static/cone/cone.app.min.css +++ b/src/cone/app/browser/static/cone/cone.app.min.css @@ -1 +1 @@ -:root{--primary-100: #dde9fb;--primary-100-dark: #2c4265}[data-bs-theme=dark] #content{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #navbar-content-wrapper{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #sidebar_left{background-color:#343b45}[data-bs-theme=dark] #footer{color:#f8f9fa;background-color:#000}[data-bs-theme=dark] #contextmenu{color:#f8f9fa;background-color:#343a40}[data-bs-theme=dark] tr.selectable.selected td{background-color:#344555}[data-bs-theme=dark] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#485f76}[data-bs-theme=dark] .bg-primary-100{background-color:#2c4265}[data-bs-theme=light] #content{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #navbar-content-wrapper{color:#212529;background-color:#fff}[data-bs-theme=light] #sidebar_left{background-color:#414c5b}[data-bs-theme=light] #footer{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #contextmenu{color:#212529;background-color:#fff}[data-bs-theme=light] tr.selectable.selected td{background-color:#dfeefb}[data-bs-theme=light] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#cfdce7}[data-bs-theme=light] .bg-primary-100{background-color:#dde9fb}:root{--sidebar-width: 300px;--navbar-height: 50px}html{height:100%;width:100%}body{height:100%;overflow-y:hidden !important}#footer{z-index:1}.referencebrowser_trigger{cursor:pointer}select.form-control.referencebrowser[multiple=multiple]+.referencebrowser_trigger{max-width:max-content;margin-top:.5rem;margin-bottom:1rem}#referencebrowser{border-bottom:0;border-left:0;border-right:0;border-radius:0;left:calc(-1*var(--bs-modal-padding));width:calc(100% + var(--bs-modal-padding)*2)}#referencebrowser td.title{width:100%}#content{container:main-content/inline-size;height:calc(100% - 40px);width:100%;position:relative}#main-area{width:0 !important}tr.selectable td{user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}#main-area.full .batched_items_slice_size{max-width:max-content}#main-area.full .batched_items_filter{max-width:300px}#input-contentform-save{margin-right:1rem}#header-logo{z-index:4}#header-logo>span,#header-logo-placeholder>span{font-size:1.5rem !important}#main-area.compact:not(.super-compact) #header-logo{order:0}#main-area.compact:not(.super-compact) #personaltools{order:1;margin-left:auto}#main-area.compact:not(.super-compact) .navbar-toggler{order:2}#main-area.compact:not(.super-compact) #navbar-content-wrapper{order:3}#main-area.compact #header-main.mobile-menu-open #navbar-content-wrapper{max-height:calc(100vh - 50px);position:relative;overflow:hidden;padding:0 !important;z-index:3}@media screen and (max-width: 768px){#main-area.compact #header-main.mobile-menu-open #navbar-content-wrapper{z-index:1200}}#main-area.compact #header-main.mobile-menu-open #mainmenu{align-items:baseline}#main-area.compact #header-main.mobile-menu-open #mainmenu .scrollbar{display:none !important}#main-area.compact #header-main.mobile-menu-open #mainmenu .scrollable-content{right:0 !important}#main-area.compact #header-main.mobile-menu-open #mainmenu .dropdown-menu{border:none}#main-area.compact #header-main.mobile-menu-open #mainmenu .dropdown-menu>li .dropdown-item{padding:8px 20px}#main-area.compact #header-main.mobile-menu-open #mainmenu .dropdown-menu>li:first-child .dropdown-item{padding-top:0}#main-area.super-compact #personaltools{height:50px;justify-content:space-between;margin:auto 20px}#main-area.super-compact #personaltools #colortoggler{padding-left:0}#main-area.full #header-logo{order:1}#main-area.full #mainmenu{height:var(--navbar-height)}#main-area.full #mainmenu .dropdown-menu{position:fixed}#main-area.full #personaltools{height:100%}#main-area #header-main{height:var(--navbar-height)}#main-area #header-main.navbar-expand #header-content{flex-direction:row-reverse}#main-area #header-main.navbar-expand #navbar-content-wrapper{box-shadow:none !important;background:none}#main-area #header-main:not(.navbar-expand) #header-content{flex-direction:row}#main-area #header-main:not(.navbar-expand) #navbar-content{flex-direction:column}#main-area #header-main:not(.navbar-expand) #livesearch{order:0;width:100%;padding-left:55px !important;padding-right:15px !important}#main-area #header-main:not(.navbar-expand) #mainmenu{order:1;margin-left:10px !important;margin-top:20px;margin-bottom:20px}#main-area #header-main:not(.navbar-expand) #mainmenu ul>li{display:block !important}#main-area #header-main #navbar-content-wrapper{min-width:0;z-index:1}#main-area #header-main #navbar-content-wrapper #navbar-content{min-width:0}#main-area #header-main #mainmenu>ul{padding-left:8px;white-space:nowrap}#main-area #header-main #mainmenu .nav-item.active .nav-link{color:#4171b6}#main-area #header-main #personaltools #language-dropdown>div.dropdown-toggle>a{height:20px}#main-area #header-main #personaltools #language-dropdown>div.dropdown-toggle>a img{vertical-align:baseline}#main-area #header-main #personaltools #colortoggler #colortoggle-switch{width:2rem;height:1rem}#personaltools-dropdown .dropdown-item a{text-decoration:none;color:var(--bs-secondary-color)}#pathbar{z-index:5}#form-loginform{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%}#form-loginform #field-loginform-user,#form-loginform #field-loginform-password{display:grid;grid-template-columns:1fr 2fr;margin-bottom:.5rem;gap:1rem}@media(max-width: 400px){#form-loginform #field-loginform-user,#form-loginform #field-loginform-password{grid-template-columns:auto;gap:0}}#form-loginform #input-loginform-login{margin-top:1.5rem;width:200px}[data-bs-theme=light] #header-logo #header-logo-light{display:none}[data-bs-theme=dark] #header-logo #header-logo-dark{display:none}.scrollable-x,.scrollable-y{position:relative;overflow:hidden}.scrollable-content{position:relative}.scrollbar{display:none;position:absolute;background:#dee2e6;border-radius:3px;z-index:1000}.scrollbar .scroll-handle{position:relative;border-radius:3px;background:#4171b6}.scrollbar-top .scrollbar{top:0}.scrollbar-bottom .scrollbar{bottom:0}.scrollbar-left .scrollbar{left:0}.scrollbar-right .scrollbar{right:0}:root{--primary-100: #dde9fb;--primary-100-dark: #2c4265}[data-bs-theme=dark] #content{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #navbar-content-wrapper{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #sidebar_left{background-color:#343b45}[data-bs-theme=dark] #footer{color:#f8f9fa;background-color:#000}[data-bs-theme=dark] #contextmenu{color:#f8f9fa;background-color:#343a40}[data-bs-theme=dark] tr.selectable.selected td{background-color:#344555}[data-bs-theme=dark] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#485f76}[data-bs-theme=dark] .bg-primary-100{background-color:#2c4265}[data-bs-theme=light] #content{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #navbar-content-wrapper{color:#212529;background-color:#fff}[data-bs-theme=light] #sidebar_left{background-color:#414c5b}[data-bs-theme=light] #footer{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #contextmenu{color:#212529;background-color:#fff}[data-bs-theme=light] tr.selectable.selected td{background-color:#dfeefb}[data-bs-theme=light] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#cfdce7}[data-bs-theme=light] .bg-primary-100{background-color:#dde9fb}#sidebar_left,#sidebar_right{height:100%;max-height:100%;user-select:none}#sidebar_left ul.list-group,#sidebar_left ul.list-group li,#sidebar_right ul.list-group,#sidebar_right ul.list-group li{background-color:inherit}#sidebar_left .sidebar-controls,#sidebar_right .sidebar-controls{position:absolute;bottom:0}#sidebar_left .sidebar-controls .sidebar-control,#sidebar_right .sidebar-controls .sidebar-control{position:relative;z-index:10;border-bottom-left-radius:0;border-bottom-right-radius:0}#sidebar_left .lock-state,#sidebar_right .lock-state{position:relative;top:calc(100% - 4.5rem);width:min-content;height:0;z-index:100}@media(max-width: 767.98px){#sidebar_left .lock-state,#sidebar_right .lock-state{display:none}}#sidebar_left .lock-state input[type=checkbox]:not(:checked)+.lock-state-btn,#sidebar_right .lock-state input[type=checkbox]:not(:checked)+.lock-state-btn{background-color:var(--bs-border-color);border-color:rgba(0,0,0,0);color:var(--bs-body-color)}#sidebar_left .lock-state input[type=checkbox]:not(:checked)+.lock-state-btn i.bi-lock,#sidebar_right .lock-state input[type=checkbox]:not(:checked)+.lock-state-btn i.bi-lock{display:none}#sidebar_left .lock-state input[type=checkbox]:checked+.lock-state-btn,#sidebar_right .lock-state input[type=checkbox]:checked+.lock-state-btn{background-color:var(--bs-dark-border-subtle);border-color:rgba(0,0,0,0);color:var(--bs-body-color)}#sidebar_left .lock-state input[type=checkbox]:checked+.lock-state-btn i.bi-unlock,#sidebar_right .lock-state input[type=checkbox]:checked+.lock-state-btn i.bi-unlock{display:none}#sidebar_left #navtree,#sidebar_right #navtree{max-width:100%}#sidebar_left #navtree .nav-link,#sidebar_right #navtree .nav-link{z-index:1000;white-space:nowrap}#sidebar_left #navtree .nav-link.active,#sidebar_right #navtree .nav-link.active{background-color:rgba(0,0,0,0);font-weight:bold}#sidebar_left #navtree .nav-link i.btn-closed,#sidebar_right #navtree .nav-link i.btn-closed{vertical-align:text-bottom}#sidebar_left #navtree .nav-link span,#sidebar_right #navtree .nav-link span{display:inline-block;width:calc(100% - 40px);text-overflow:ellipsis;overflow-x:hidden;vertical-align:text-bottom}#sidebar_left #navtree #navigation-collapse.no-collapse>ul>li,#sidebar_right #navtree #navigation-collapse.no-collapse>ul>li{padding-left:0 !important}#sidebar_left #sidebar_resize,#sidebar_right #sidebar_resize{position:relative;width:0;height:0}#sidebar_left #sidebar_resize #sidebar_resizer,#sidebar_right #sidebar_resize #sidebar_resizer{position:absolute;z-index:3;height:100vh;width:20px;transform:translateX(-50%);cursor:col-resize}#sidebar_left #sidebar_collapse,#sidebar_right #sidebar_collapse{position:relative;top:100%;width:0;height:0}#sidebar_left #sidebar_collapse .collapse_btn,#sidebar_right #sidebar_collapse .collapse_btn{position:absolute;bottom:0px;border-radius:100%;z-index:1000}#sidebar_left.collapsed,#sidebar_right.collapsed{width:0px !important;min-width:0 !important}#sidebar_left.collapsed #sidebar_resize,#sidebar_right.collapsed #sidebar_resize{display:none}#sidebar_left.collapsed #sidebar_collapse .collapse_btn .btn-open,#sidebar_right.collapsed #sidebar_collapse .collapse_btn .btn-open{display:none}#sidebar_left.expanded #sidebar_collapse .collapse_btn .btn-closed,#sidebar_right.expanded #sidebar_collapse .collapse_btn .btn-closed{display:none}@media(min-width: 1400px){#sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn,#sidebar_right:not(.collapsed) #sidebar_collapse .collapse_btn{transform:translateX(-20px)}#sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn .btn-closed,#sidebar_right:not(.collapsed) #sidebar_collapse .collapse_btn .btn-closed{display:none}}@media(max-width: 1399.98px){#sidebar_left:not(.expanded),#sidebar_right:not(.expanded){width:0 !important;min-width:0 !important;border:none !important}#sidebar_left:not(.expanded) #sidebar_resize,#sidebar_right:not(.expanded) #sidebar_resize{display:none}#sidebar_left:not(.expanded) #sidebar_collapse .collapse_btn .btn-open,#sidebar_right:not(.expanded) #sidebar_collapse .collapse_btn .btn-open{display:none}}@media(min-width: 768px)and (max-width: 1399.98px){#sidebar_left.expanded #sidebar_collapse .collapse_btn,#sidebar_right.expanded #sidebar_collapse .collapse_btn{transform:translateX(-20px)}}@media(max-width: 767.98px){#sidebar_left #sidebar_resize,#sidebar_right #sidebar_resize{display:none}#sidebar_left.expanded,#sidebar_right.expanded{width:100% !important;z-index:3}}#sidebar_left #sidebar_resize{left:100%}#sidebar_left #sidebar_collapse{left:100%}@media(max-width: 767.98px){#sidebar_left.expanded #sidebar_collapse{left:calc(100% - 50px)}}#sidebar_left.responsive-expanded .lock-state{left:100%;transform:translateX(-10px)}#sidebar_left.expanded .lock-state{left:100% !important;transform:translateX(-10px) !important}#sidebar_left.responsive-collapsed .lock-state{left:calc(100% + 10px)}#sidebar_left.collapsed .lock-state{left:calc(100% + 10px) !important;transform:none !important}#sidebar_right{background-color:var(--bs-body-bg);border-left:1px solid var(--bs-border-color)}#sidebar_right .sidebar-controls{right:0}#sidebar_right #sidebar_collapse{left:0}#sidebar_right.collapsed{border:0}#sidebar_right.collapsed .collapse_btn{right:0}#sidebar_right.responsive-expanded .lock-state{transform:translateX(-10px)}#sidebar_right.expanded .lock-state{transform:translateX(-10px) !important}#sidebar_right.responsive-collapsed .lock-state{transform:translateX(calc(-100% - 10px))}#sidebar_right.collapsed .lock-state{transform:translateX(calc(-100% - 10px)) !important}@media(max-width: 1399.98px){#sidebar_right:not(.expanded) #sidebar_collapse .collapse_btn{right:0}}@media(max-width: 767.98px){#sidebar_right.expanded{transform:translateX(-2rem)}}.table_length,.table_filter{width:unset}#contents>div.card-body div.row>div{flex:1 0 auto;flex-wrap:nowrap}.table-footer{gap:1rem 0}.table-footer .table_info{white-space:nowrap}#main-area.full .table_length{max-width:max-content}#main-area.full .table_filter{max-width:300px}#settings-grid-container .settings-grid a i{font-size:44px}@media(max-width: 450px){#settings-grid-container .settings-grid a i{font-size:30px}} +:root{--primary-100: #dde9fb;--primary-100-dark: #2c4265}[data-bs-theme=dark] #content{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #navbar-content-wrapper{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #sidebar_left{background-color:#343b45}[data-bs-theme=dark] #footer{color:#f8f9fa;background-color:#000}[data-bs-theme=dark] #contextmenu{color:#f8f9fa;background-color:#343a40}[data-bs-theme=dark] tr.selectable.selected td{background-color:#344555}[data-bs-theme=dark] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#485f76}[data-bs-theme=dark] .bg-primary-100{background-color:#2c4265}[data-bs-theme=light] #content{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #navbar-content-wrapper{color:#212529;background-color:#fff}[data-bs-theme=light] #sidebar_left{background-color:#414c5b}[data-bs-theme=light] #footer{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #contextmenu{color:#212529;background-color:#fff}[data-bs-theme=light] tr.selectable.selected td{background-color:#dfeefb}[data-bs-theme=light] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#cfdce7}[data-bs-theme=light] .bg-primary-100{background-color:#dde9fb}:root{--sidebar-width: 300px;--navbar-height: 50px}html{height:100%;width:100%}body{height:100%;overflow-y:hidden !important}#footer{z-index:1}.referencebrowser_trigger{cursor:pointer}select.form-control.referencebrowser[multiple=multiple]+.referencebrowser_trigger{max-width:max-content;margin-top:.5rem;margin-bottom:1rem}#referencebrowser{border-bottom:0;border-left:0;border-right:0;border-radius:0;left:calc(-1*var(--bs-modal-padding));width:calc(100% + var(--bs-modal-padding)*2)}#referencebrowser td.title{width:100%}#content{container:main-content/inline-size;height:100%;width:100%;position:relative}#content_area{height:100%}#content_area.has-pathbar{height:calc(100% - 40px)}#main-area{width:0 !important}tr.selectable td{user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}#main-area.full .batched_items_slice_size{max-width:max-content}#main-area.full .batched_items_filter{max-width:300px}#input-contentform-save{margin-right:1rem}#header-logo{z-index:4}#header-logo>span,#header-logo-placeholder>span{font-size:1.5rem !important}#main-area.compact:not(.super-compact) #header-logo{order:0}#main-area.compact:not(.super-compact) #personaltools{order:1;margin-left:auto}#main-area.compact:not(.super-compact) .navbar-toggler{order:2}#main-area.compact:not(.super-compact) #navbar-content-wrapper{order:3}#main-area.compact #header-main.mobile-menu-open #navbar-content-wrapper{max-height:calc(100vh - 50px);position:relative;overflow:hidden;padding:0 !important;z-index:3}@media screen and (max-width: 768px){#main-area.compact #header-main.mobile-menu-open #navbar-content-wrapper{z-index:1200}}#main-area.compact #header-main.mobile-menu-open #mainmenu{align-items:baseline}#main-area.compact #header-main.mobile-menu-open #mainmenu .scrollbar{display:none !important}#main-area.compact #header-main.mobile-menu-open #mainmenu .scrollable-content{right:0 !important}#main-area.compact #header-main.mobile-menu-open #mainmenu .dropdown-menu{border:none}#main-area.compact #header-main.mobile-menu-open #mainmenu .dropdown-menu>li .dropdown-item{padding:8px 20px}#main-area.compact #header-main.mobile-menu-open #mainmenu .dropdown-menu>li:first-child .dropdown-item{padding-top:0}#main-area.super-compact #personaltools{height:50px;justify-content:space-between;margin:auto 20px}#main-area.super-compact #personaltools #colortoggler{padding-left:0}#main-area.full #header-logo{order:1}#main-area.full #mainmenu{height:var(--navbar-height)}#main-area.full #mainmenu .dropdown-menu{position:fixed}#main-area.full #personaltools{height:100%}#main-area #header-main{height:var(--navbar-height)}#main-area #header-main.navbar-expand #header-content{flex-direction:row-reverse}#main-area #header-main.navbar-expand #navbar-content-wrapper{box-shadow:none !important;background:none}#main-area #header-main:not(.navbar-expand) #header-content{flex-direction:row}#main-area #header-main:not(.navbar-expand) #navbar-content{flex-direction:column}#main-area #header-main:not(.navbar-expand) #livesearch{order:0;width:100%;padding-left:55px !important;padding-right:15px !important}#main-area #header-main:not(.navbar-expand) #mainmenu{order:1;margin-left:10px !important;margin-top:20px;margin-bottom:20px}#main-area #header-main:not(.navbar-expand) #mainmenu ul>li{display:block !important}#main-area #header-main #navbar-content-wrapper{min-width:0;z-index:1}#main-area #header-main #navbar-content-wrapper #navbar-content{min-width:0}#main-area #header-main #mainmenu>ul{padding-left:8px;white-space:nowrap}#main-area #header-main #mainmenu .nav-item.active .nav-link{color:#4171b6}#main-area #header-main #personaltools #language-dropdown>div.dropdown-toggle>a{height:20px}#main-area #header-main #personaltools #language-dropdown>div.dropdown-toggle>a img{vertical-align:baseline}#main-area #header-main #personaltools #colortoggler #colortoggle-switch{width:2rem;height:1rem}#personaltools-dropdown .dropdown-item a{text-decoration:none;color:var(--bs-secondary-color)}#pathbar{z-index:5}#form-loginform{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%}#form-loginform #field-loginform-user,#form-loginform #field-loginform-password{display:grid;grid-template-columns:1fr 2fr;margin-bottom:.5rem;gap:1rem}@media(max-width: 400px){#form-loginform #field-loginform-user,#form-loginform #field-loginform-password{grid-template-columns:auto;gap:0}}#form-loginform #input-loginform-login{margin-top:1.5rem;width:200px}[data-bs-theme=light] #header-logo #header-logo-light{display:none}[data-bs-theme=dark] #header-logo #header-logo-dark{display:none}.scrollable-x,.scrollable-y{position:relative;overflow:hidden}.scrollable-content{position:relative}.scrollbar{display:none;position:absolute;background:#dee2e6;border-radius:3px;z-index:1000}.scrollbar .scroll-handle{position:relative;border-radius:3px;background:#4171b6}.scrollbar-top .scrollbar{top:0}.scrollbar-bottom .scrollbar{bottom:0}.scrollbar-left .scrollbar{left:0}.scrollbar-right .scrollbar{right:0}:root{--primary-100: #dde9fb;--primary-100-dark: #2c4265}[data-bs-theme=dark] #content{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #navbar-content-wrapper{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #sidebar_left{background-color:#343b45}[data-bs-theme=dark] #footer{color:#f8f9fa;background-color:#000}[data-bs-theme=dark] #contextmenu{color:#f8f9fa;background-color:#343a40}[data-bs-theme=dark] tr.selectable.selected td{background-color:#344555}[data-bs-theme=dark] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#485f76}[data-bs-theme=dark] .bg-primary-100{background-color:#2c4265}[data-bs-theme=light] #content{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #navbar-content-wrapper{color:#212529;background-color:#fff}[data-bs-theme=light] #sidebar_left{background-color:#414c5b}[data-bs-theme=light] #footer{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #contextmenu{color:#212529;background-color:#fff}[data-bs-theme=light] tr.selectable.selected td{background-color:#dfeefb}[data-bs-theme=light] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#cfdce7}[data-bs-theme=light] .bg-primary-100{background-color:#dde9fb}#sidebar_left,#sidebar_right{height:100%;max-height:100%;user-select:none}#sidebar_left ul.list-group,#sidebar_left ul.list-group li,#sidebar_right ul.list-group,#sidebar_right ul.list-group li{background-color:inherit}#sidebar_left .sidebar-controls,#sidebar_right .sidebar-controls{position:absolute;bottom:0}#sidebar_left .sidebar-controls .sidebar-control,#sidebar_right .sidebar-controls .sidebar-control{position:relative;z-index:10;border-bottom-left-radius:0;border-bottom-right-radius:0}#sidebar_left .lock-state,#sidebar_right .lock-state{position:relative;top:calc(100% - 2rem);width:min-content;height:0;z-index:100}@media(max-width: 767.98px){#sidebar_left .lock-state,#sidebar_right .lock-state{display:none}}#sidebar_left .lock-state input[type=checkbox]:not(:checked)+.lock-state-btn,#sidebar_right .lock-state input[type=checkbox]:not(:checked)+.lock-state-btn{background-color:var(--bs-border-color);border-color:rgba(0,0,0,0);color:var(--bs-body-color)}#sidebar_left .lock-state input[type=checkbox]:not(:checked)+.lock-state-btn i.bi-lock,#sidebar_right .lock-state input[type=checkbox]:not(:checked)+.lock-state-btn i.bi-lock{display:none}#sidebar_left .lock-state input[type=checkbox]:checked+.lock-state-btn,#sidebar_right .lock-state input[type=checkbox]:checked+.lock-state-btn{background-color:var(--bs-dark-border-subtle);border-color:rgba(0,0,0,0);color:var(--bs-body-color)}#sidebar_left .lock-state input[type=checkbox]:checked+.lock-state-btn i.bi-unlock,#sidebar_right .lock-state input[type=checkbox]:checked+.lock-state-btn i.bi-unlock{display:none}#sidebar_left #navtree,#sidebar_right #navtree{max-width:100%}#sidebar_left #navtree .nav-link,#sidebar_right #navtree .nav-link{z-index:1000;white-space:nowrap}#sidebar_left #navtree .nav-link.active,#sidebar_right #navtree .nav-link.active{background-color:rgba(0,0,0,0);font-weight:bold}#sidebar_left #navtree .nav-link i.btn-closed,#sidebar_right #navtree .nav-link i.btn-closed{vertical-align:text-bottom}#sidebar_left #navtree .nav-link span,#sidebar_right #navtree .nav-link span{display:inline-block;width:calc(100% - 40px);text-overflow:ellipsis;overflow-x:hidden;vertical-align:text-bottom}#sidebar_left #navtree #navigation-collapse.no-collapse>ul>li,#sidebar_right #navtree #navigation-collapse.no-collapse>ul>li{padding-left:0 !important}#sidebar_left #sidebar_resize,#sidebar_right #sidebar_resize{position:relative;width:0;height:0}#sidebar_left #sidebar_resize #sidebar_resizer,#sidebar_right #sidebar_resize #sidebar_resizer{position:absolute;z-index:3;height:100vh;width:20px;transform:translateX(-50%);cursor:col-resize}#sidebar_left #sidebar_collapse,#sidebar_right #sidebar_collapse{position:relative;top:100%;width:0;height:0}#sidebar_left #sidebar_collapse .collapse_btn,#sidebar_right #sidebar_collapse .collapse_btn{position:absolute;top:100%;border-radius:100%;z-index:1000}#sidebar_left.collapsed,#sidebar_right.collapsed{width:0px !important;min-width:0 !important}#sidebar_left.collapsed #sidebar_resize,#sidebar_right.collapsed #sidebar_resize{display:none}#sidebar_left.collapsed #sidebar_collapse .collapse_btn .btn-open,#sidebar_right.collapsed #sidebar_collapse .collapse_btn .btn-open{display:none}#sidebar_left.expanded #sidebar_collapse .collapse_btn .btn-closed,#sidebar_right.expanded #sidebar_collapse .collapse_btn .btn-closed{display:none}@media(min-width: 1400px){#sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn,#sidebar_right:not(.collapsed) #sidebar_collapse .collapse_btn{transform:translateX(-20px)}#sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn .btn-closed,#sidebar_right:not(.collapsed) #sidebar_collapse .collapse_btn .btn-closed{display:none}}@media(max-width: 1399.98px){#sidebar_left:not(.expanded),#sidebar_right:not(.expanded){width:0 !important;min-width:0 !important;border:none !important}#sidebar_left:not(.expanded) #sidebar_resize,#sidebar_right:not(.expanded) #sidebar_resize{display:none}#sidebar_left:not(.expanded) #sidebar_collapse .collapse_btn .btn-open,#sidebar_right:not(.expanded) #sidebar_collapse .collapse_btn .btn-open{display:none}}@media(min-width: 768px)and (max-width: 1399.98px){#sidebar_left.expanded #sidebar_collapse .collapse_btn,#sidebar_right.expanded #sidebar_collapse .collapse_btn{transform:translateX(-20px)}}@media(max-width: 767.98px){#sidebar_left #sidebar_resize,#sidebar_right #sidebar_resize{display:none}#sidebar_left.expanded,#sidebar_right.expanded{width:100% !important;z-index:3}}#sidebar_left #sidebar_resize{left:100%}#sidebar_left #sidebar_collapse{left:100%}@media(max-width: 767.98px){#sidebar_left.expanded #sidebar_collapse{left:calc(100% - 50px)}}#sidebar_left.responsive-expanded .lock-state{left:100%;transform:translateX(-10px)}#sidebar_left.expanded .lock-state{left:100% !important;transform:translateX(-10px) !important}#sidebar_left.responsive-collapsed .lock-state{left:calc(100% + 10px)}#sidebar_left.collapsed .lock-state{left:calc(100% + 10px) !important;transform:none !important}#sidebar_right{background-color:var(--bs-body-bg);border-left:1px solid var(--bs-border-color)}#sidebar_right .sidebar-controls{right:0}#sidebar_right #sidebar_collapse{left:0}#sidebar_right.collapsed{border:0}#sidebar_right.collapsed .collapse_btn{right:0}#sidebar_right.responsive-expanded .lock-state{transform:translateX(-10px)}#sidebar_right.expanded .lock-state{transform:translateX(-10px) !important}#sidebar_right.responsive-collapsed .lock-state{transform:translateX(calc(-100% - 10px))}#sidebar_right.collapsed .lock-state{transform:translateX(calc(-100% - 10px)) !important}@media(max-width: 1399.98px){#sidebar_right:not(.expanded) #sidebar_collapse .collapse_btn{right:0}}@media(max-width: 767.98px){#sidebar_right.expanded{transform:translateX(-2rem)}}.table_length,.table_filter{width:unset}#contents>div.card-body div.row>div{flex:1 0 auto;flex-wrap:nowrap}.table-footer{gap:1rem 0}.table-footer .table_info{white-space:nowrap}#main-area.full .table_length{max-width:max-content}#main-area.full .table_filter{max-width:300px}#settings-grid-container .settings-grid a i{font-size:44px}@media(max-width: 450px){#settings-grid-container .settings-grid a i{font-size:30px}} diff --git a/src/cone/app/browser/templates/layout.pt b/src/cone/app/browser/templates/layout.pt index 7e605193..90cffb7a 100644 --- a/src/cone/app/browser/templates/layout.pt +++ b/src/cone/app/browser/templates/layout.pt @@ -62,7 +62,10 @@ condition="config.pathbar" replace="structure tile('pathbar')" /> -
+