diff options
31 files changed, 144 insertions, 110 deletions
diff --git a/app/views/index/global.phtml b/app/views/index/global.phtml index 09264fb65..1a307b513 100644 --- a/app/views/index/global.phtml +++ b/app/views/index/global.phtml @@ -85,6 +85,6 @@ <div id="overlay"> <a class="close" href="#"><?= _i('close') ?></a> + <div id="panel"<?= FreshRSS_Context::$user_conf->display_posts ? '' : ' class="hide_posts"' ?>> </div> -<div id="panel"<?= FreshRSS_Context::$user_conf->display_posts ? '' : ' class="hide_posts"' ?>> </div> diff --git a/p/scripts/global_view.js b/p/scripts/global_view.js index e1afae0b8..2ada3e7a9 100644 --- a/p/scripts/global_view.js +++ b/p/scripts/global_view.js @@ -33,6 +33,7 @@ function load_panel(link) { document.getElementById('overlay').classList.add('visible'); panel.classList.add('visible'); + document.documentElement.classList.add('slider-active'); // Force the initial scroll to the top. // Without it, if one scrolls down in a category (for instance) @@ -70,6 +71,7 @@ function init_close_panel() { panel.innerHTML = ''; panel.classList.remove('visible'); document.getElementById('overlay').classList.remove('visible'); + document.documentElement.classList.remove('slider-active'); return false; }; document.addEventListener('keydown', ev => { diff --git a/p/themes/Alternative-Dark/adark.css b/p/themes/Alternative-Dark/adark.css index 027db127c..eaa91fe97 100644 --- a/p/themes/Alternative-Dark/adark.css +++ b/p/themes/Alternative-Dark/adark.css @@ -1050,7 +1050,7 @@ kbd { } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { background: var(--background-color-light); @@ -1058,14 +1058,14 @@ kbd { } .aside .toggle_aside:hover, - #panel .close:hover, + #overlay .close:hover, .dropdown-menu .toggle_aside:hover, #slider .toggle_aside:hover { background-color: var(--background-color-hover); } .aside .toggle_aside:hover .icon, - #panel .close:hover .icon, + #overlay .close:hover .icon, .dropdown-menu .toggle_aside:hover .icon { filter: brightness(2); } diff --git a/p/themes/Alternative-Dark/adark.rtl.css b/p/themes/Alternative-Dark/adark.rtl.css index 0a127c24a..3fdd66121 100644 --- a/p/themes/Alternative-Dark/adark.rtl.css +++ b/p/themes/Alternative-Dark/adark.rtl.css @@ -1050,7 +1050,7 @@ kbd { } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { background: var(--background-color-light); @@ -1058,14 +1058,14 @@ kbd { } .aside .toggle_aside:hover, - #panel .close:hover, + #overlay .close:hover, .dropdown-menu .toggle_aside:hover, #slider .toggle_aside:hover { background-color: var(--background-color-hover); } .aside .toggle_aside:hover .icon, - #panel .close:hover .icon, + #overlay .close:hover .icon, .dropdown-menu .toggle_aside:hover .icon { filter: brightness(2); } diff --git a/p/themes/Ansum/_mobile.scss b/p/themes/Ansum/_mobile.scss index 6fbca4a52..5256ac636 100644 --- a/p/themes/Ansum/_mobile.scss +++ b/p/themes/Ansum/_mobile.scss @@ -20,7 +20,7 @@ } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { background-color: variables.$main-first; @@ -52,6 +52,13 @@ height: calc(100% - 8rem); } + #panel { + top: 0; + right: 0; + bottom: 0; + left: 0; + } + .post { padding-left: 1rem; padding-right: 1rem; diff --git a/p/themes/Ansum/ansum.css b/p/themes/Ansum/ansum.css index 543bb6c1e..73a26eb3d 100644 --- a/p/themes/Ansum/ansum.css +++ b/p/themes/Ansum/ansum.css @@ -1188,19 +1188,19 @@ main.prompt { padding: 0.5rem 1rem; } .aside .toggle_aside, -#panel .close, +#overlay .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { background-color: #ca7227; } .aside .toggle_aside:hover, -#panel .close:hover, +#overlay .close:hover, .dropdown-menu .toggle_aside:hover, #slider .toggle_aside:hover { background-color: #b7641d; } .aside .toggle_aside .icon, -#panel .close .icon, +#overlay .close .icon, .dropdown-menu .toggle_aside .icon, #slider .toggle_aside .icon { filter: grayscale(100%) brightness(2.5); @@ -1216,6 +1216,12 @@ main.prompt { #global { height: calc(100% - 8rem); } + #panel { + top: 0; + right: 0; + bottom: 0; + left: 0; + } .post { padding-left: 1rem; padding-right: 1rem; diff --git a/p/themes/Ansum/ansum.rtl.css b/p/themes/Ansum/ansum.rtl.css index 1a91c184a..18a185287 100644 --- a/p/themes/Ansum/ansum.rtl.css +++ b/p/themes/Ansum/ansum.rtl.css @@ -1188,19 +1188,19 @@ main.prompt { padding: 0.5rem 1rem; } .aside .toggle_aside, -#panel .close, +#overlay .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { background-color: #ca7227; } .aside .toggle_aside:hover, -#panel .close:hover, +#overlay .close:hover, .dropdown-menu .toggle_aside:hover, #slider .toggle_aside:hover { background-color: #b7641d; } .aside .toggle_aside .icon, -#panel .close .icon, +#overlay .close .icon, .dropdown-menu .toggle_aside .icon, #slider .toggle_aside .icon { filter: grayscale(100%) brightness(2.5); @@ -1216,6 +1216,12 @@ main.prompt { #global { height: calc(100% - 8rem); } + #panel { + top: 0; + left: 0; + bottom: 0; + right: 0; + } .post { padding-right: 1rem; padding-left: 1rem; diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css index 09e662b55..c8449d74a 100644 --- a/p/themes/BlueLagoon/BlueLagoon.css +++ b/p/themes/BlueLagoon/BlueLagoon.css @@ -1104,7 +1104,7 @@ a.btn { } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { background: #171717; diff --git a/p/themes/BlueLagoon/BlueLagoon.rtl.css b/p/themes/BlueLagoon/BlueLagoon.rtl.css index 6eb08d26f..fcce87be4 100644 --- a/p/themes/BlueLagoon/BlueLagoon.rtl.css +++ b/p/themes/BlueLagoon/BlueLagoon.rtl.css @@ -1104,7 +1104,7 @@ a.btn { } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { background: #171717; diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css index b60abb068..781ae2daa 100644 --- a/p/themes/Dark/dark.css +++ b/p/themes/Dark/dark.css @@ -609,7 +609,7 @@ kbd { @media (max-width: 840px) { .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside { background-color: var(--dark-background-color1); border-bottom: 1px solid var(--dark-border-color3); diff --git a/p/themes/Dark/dark.rtl.css b/p/themes/Dark/dark.rtl.css index ef12226ad..6d77428f6 100644 --- a/p/themes/Dark/dark.rtl.css +++ b/p/themes/Dark/dark.rtl.css @@ -609,7 +609,7 @@ kbd { @media (max-width: 840px) { .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside { background-color: var(--dark-background-color1); border-bottom: 1px solid var(--dark-border-color3); diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css index c989511e6..6c51ab583 100644 --- a/p/themes/Flat/flat.css +++ b/p/themes/Flat/flat.css @@ -947,7 +947,7 @@ a.btn { } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside { background: #2c3e50; } diff --git a/p/themes/Flat/flat.rtl.css b/p/themes/Flat/flat.rtl.css index ec0acb18c..e08106e88 100644 --- a/p/themes/Flat/flat.rtl.css +++ b/p/themes/Flat/flat.rtl.css @@ -947,7 +947,7 @@ a.btn { } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside { background: #2c3e50; } diff --git a/p/themes/Mapco/_mobile.scss b/p/themes/Mapco/_mobile.scss index 3faea3d7e..5c57545c1 100644 --- a/p/themes/Mapco/_mobile.scss +++ b/p/themes/Mapco/_mobile.scss @@ -20,7 +20,7 @@ } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { background-color: variables.$main-first; @@ -53,6 +53,13 @@ height: calc(100% - 8rem); } + #panel { + top: 0; + right: 0; + bottom: 0; + left: 0; + } + main.prompt { max-width: 100%; min-width: auto; diff --git a/p/themes/Mapco/mapco.css b/p/themes/Mapco/mapco.css index d34bc4dbc..3a862b4a1 100644 --- a/p/themes/Mapco/mapco.css +++ b/p/themes/Mapco/mapco.css @@ -1202,19 +1202,19 @@ main.prompt { padding: 0.5rem 1rem; } .aside .toggle_aside, -#panel .close, +#overlay .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { background-color: #36c; } .aside .toggle_aside:hover, -#panel .close:hover, +#overlay .close:hover, .dropdown-menu .toggle_aside:hover, #slider .toggle_aside:hover { background-color: #25c; } .aside .toggle_aside .icon, -#panel .close .icon, +#overlay .close .icon, .dropdown-menu .toggle_aside .icon, #slider .toggle_aside .icon { filter: grayscale(100%) brightness(2.5); @@ -1230,6 +1230,12 @@ main.prompt { #global { height: calc(100% - 8rem); } + #panel { + top: 0; + right: 0; + bottom: 0; + left: 0; + } main.prompt { max-width: 100%; min-width: auto; diff --git a/p/themes/Mapco/mapco.rtl.css b/p/themes/Mapco/mapco.rtl.css index 9d37b283c..03f8b71b2 100644 --- a/p/themes/Mapco/mapco.rtl.css +++ b/p/themes/Mapco/mapco.rtl.css @@ -1202,19 +1202,19 @@ main.prompt { padding: 0.5rem 1rem; } .aside .toggle_aside, -#panel .close, +#overlay .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { background-color: #36c; } .aside .toggle_aside:hover, -#panel .close:hover, +#overlay .close:hover, .dropdown-menu .toggle_aside:hover, #slider .toggle_aside:hover { background-color: #25c; } .aside .toggle_aside .icon, -#panel .close .icon, +#overlay .close .icon, .dropdown-menu .toggle_aside .icon, #slider .toggle_aside .icon { filter: grayscale(100%) brightness(2.5); @@ -1230,6 +1230,12 @@ main.prompt { #global { height: calc(100% - 8rem); } + #panel { + top: 0; + left: 0; + bottom: 0; + right: 0; + } main.prompt { max-width: 100%; min-width: auto; diff --git a/p/themes/Nord/nord.css b/p/themes/Nord/nord.css index fc6e654ff..90349b8c6 100644 --- a/p/themes/Nord/nord.css +++ b/p/themes/Nord/nord.css @@ -1019,6 +1019,10 @@ option { position: relative; } + #overlay { + background-color: var(--accent-bg); + } + .notification { top: 0; left: 0; @@ -1029,19 +1033,6 @@ option { width: 100%; } - #panel { - top: 25px; bottom: 30px; - left: 0; right: 0; - } - - #panel .close { - top: 0; right: 0; - left: auto; bottom: auto; - display: inline-block; - width: 30px; - height: 30px; - } - #slider.active { left: 0; top: 50px; diff --git a/p/themes/Nord/nord.rtl.css b/p/themes/Nord/nord.rtl.css index 3935c61e8..9799e1797 100644 --- a/p/themes/Nord/nord.rtl.css +++ b/p/themes/Nord/nord.rtl.css @@ -1019,6 +1019,10 @@ option { position: relative; } + #overlay { + background-color: var(--accent-bg); + } + .notification { top: 0; right: 0; @@ -1029,19 +1033,6 @@ option { width: 100%; } - #panel { - top: 25px; bottom: 30px; - right: 0; left: 0; - } - - #panel .close { - top: 0; left: 0; - right: auto; bottom: auto; - display: inline-block; - width: 30px; - height: 30px; - } - #slider.active { right: 0; top: 50px; diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css index 098e44dd0..4949e78c9 100644 --- a/p/themes/Origine/origine.css +++ b/p/themes/Origine/origine.css @@ -1110,7 +1110,7 @@ a.btn-attention:hover { } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { background-color: var(--background-color-light-shadowed); @@ -1150,6 +1150,10 @@ a.btn-attention:hover { margin-bottom: 3rem; } + #overlay { + background-color: var(--background-color-light); + } + .form-group.form-actions { margin-left: -15px; margin-right: -15px; diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css index 60ea7a89c..b969525f5 100644 --- a/p/themes/Origine/origine.rtl.css +++ b/p/themes/Origine/origine.rtl.css @@ -1110,7 +1110,7 @@ a.btn-attention:hover { } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { background-color: var(--background-color-light-shadowed); @@ -1150,6 +1150,10 @@ a.btn-attention:hover { margin-bottom: 3rem; } + #overlay { + background-color: var(--background-color-light); + } + .form-group.form-actions { margin-right: -15px; margin-left: -15px; diff --git a/p/themes/Pafat/pafat.css b/p/themes/Pafat/pafat.css index 8d87ff8bb..16183a481 100644 --- a/p/themes/Pafat/pafat.css +++ b/p/themes/Pafat/pafat.css @@ -1059,7 +1059,7 @@ a.signin { } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside { background-color: var(--background-color-grey); border-bottom: 1px solid var(--border-color-grey-light); @@ -1110,4 +1110,8 @@ a.signin { padding-left: 15px; padding-right: 15px; } + + #overlay { + background-color: var(--background-color-grey); + } } diff --git a/p/themes/Pafat/pafat.rtl.css b/p/themes/Pafat/pafat.rtl.css index 105e07ddd..8469152a1 100644 --- a/p/themes/Pafat/pafat.rtl.css +++ b/p/themes/Pafat/pafat.rtl.css @@ -1059,7 +1059,7 @@ a.signin { } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside { background-color: var(--background-color-grey); border-bottom: 1px solid var(--border-color-grey-light); @@ -1110,4 +1110,8 @@ a.signin { padding-right: 15px; padding-left: 15px; } + + #overlay { + background-color: var(--background-color-grey); + } } diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css index 8eaa6678a..2da9afe31 100644 --- a/p/themes/Screwdriver/screwdriver.css +++ b/p/themes/Screwdriver/screwdriver.css @@ -1078,7 +1078,7 @@ a.btn { } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside { background: #171717; border-radius: 0 8px 0 8px; diff --git a/p/themes/Screwdriver/screwdriver.rtl.css b/p/themes/Screwdriver/screwdriver.rtl.css index ffe852de1..9ab4e9eb0 100644 --- a/p/themes/Screwdriver/screwdriver.rtl.css +++ b/p/themes/Screwdriver/screwdriver.rtl.css @@ -1078,7 +1078,7 @@ a.btn { } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside { background: #171717; border-radius: 8px 0 8px 0; diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css index 618bc64b3..96f38aa87 100644 --- a/p/themes/Swage/swage.css +++ b/p/themes/Swage/swage.css @@ -865,6 +865,9 @@ form th { #overlay { z-index: 100; } +#overlay .close .icon { + filter: brightness(3); +} #panel { z-index: 100; @@ -1014,7 +1017,7 @@ a.signin { .nav_menu .item.search input { width: 100%; } - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside { background-color: var(--color-background-aside); display: block; @@ -1023,7 +1026,7 @@ a.signin { text-align: center; padding-right: 10px; } - #panel .close:hover, + #overlay .close:hover, .dropdown-menu .toggle_aside:hover { background-color: var(--color-background-nav); } @@ -1184,4 +1187,6 @@ button.as-link { #slider label { min-height: initial; -}
\ No newline at end of file +} + +/*# sourceMappingURL=swage.css.map */ diff --git a/p/themes/Swage/swage.rtl.css b/p/themes/Swage/swage.rtl.css index 3ac5982ae..4d3e3a616 100644 --- a/p/themes/Swage/swage.rtl.css +++ b/p/themes/Swage/swage.rtl.css @@ -865,6 +865,9 @@ form th { #overlay { z-index: 100; } +#overlay .close .icon { + filter: brightness(3); +} #panel { z-index: 100; @@ -1014,7 +1017,7 @@ a.signin { .nav_menu .item.search input { width: 100%; } - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside { background-color: var(--color-background-aside); display: block; @@ -1023,7 +1026,7 @@ a.signin { text-align: center; padding-left: 10px; } - #panel .close:hover, + #overlay .close:hover, .dropdown-menu .toggle_aside:hover { background-color: var(--color-background-nav); } @@ -1184,4 +1187,4 @@ button.as-link { #slider label { min-height: initial; -}
\ No newline at end of file +} diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss index 0c926aaec..667203d99 100644 --- a/p/themes/Swage/swage.scss +++ b/p/themes/Swage/swage.scss @@ -1111,6 +1111,10 @@ form { #overlay { z-index: 100; + + .close .icon { + filter: brightness(3); + } } #panel { @@ -1304,7 +1308,7 @@ a.signin { } } - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside { background-color: var(--color-background-aside); display: block; diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css index 13c1a5965..723eb7722 100644 --- a/p/themes/base-theme/base.css +++ b/p/themes/base-theme/base.css @@ -732,7 +732,7 @@ a.btn { } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { background: #fff; @@ -740,7 +740,7 @@ a.btn { } .aside .toggle_aside:hover, - #panel .close:hover, + #overlay .close:hover, .dropdown-menu .toggle_aside:hover, #slider .toggle_aside:hover { background-color: #ddd; diff --git a/p/themes/base-theme/base.rtl.css b/p/themes/base-theme/base.rtl.css index 341c057a0..4a3b7162c 100644 --- a/p/themes/base-theme/base.rtl.css +++ b/p/themes/base-theme/base.rtl.css @@ -732,7 +732,7 @@ a.btn { } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { background: #fff; @@ -740,7 +740,7 @@ a.btn { } .aside .toggle_aside:hover, - #panel .close:hover, + #overlay .close:hover, .dropdown-menu .toggle_aside:hover, #slider .toggle_aside:hover { background-color: #ddd; diff --git a/p/themes/base-theme/frss.css b/p/themes/base-theme/frss.css index b8b91d1f3..18baaada5 100644 --- a/p/themes/base-theme/frss.css +++ b/p/themes/base-theme/frss.css @@ -1148,8 +1148,8 @@ input[type="search"] { } .aside .toggle_aside:hover, -#panel .close:hover, #slider .toggle_aside:hover, +#overlay .close:hover, .dropdown-menu .toggle_aside:hover { background-color: var(--frss-darken-background-hover-transparent); } @@ -1664,14 +1664,14 @@ a.website:hover .favicon { text-align: left; } -#global > #panel { +#global #panel { bottom: 99vh; display: block; transition: visibility .3s, bottom .3s; visibility: hidden; } -#global > #panel.visible { +#global #panel.visible { bottom: 2%; visibility: visible; } @@ -1707,10 +1707,6 @@ a.website:hover .favicon { display: block; } -#overlay .close img { - display: none; -} - /*=== Slider */ html.slider-active { overflow: hidden; @@ -2111,7 +2107,7 @@ input:checked + .slide-container .properties { } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { padding: 1rem 0; @@ -2121,6 +2117,10 @@ input:checked + .slide-container .properties { text-align: center; } + #overlay .close { + position: relative; + } + .form-group { margin-bottom: 10px; } @@ -2228,14 +2228,12 @@ input:checked + .slide-container .properties { display: none; } - .aside .toggle_aside, .configure .dropdown-header-close, .nav-login { display: block; } - .nav_menu .toggle_aside, - #panel .close img { + .nav_menu .toggle_aside { display: inline-block; } @@ -2313,16 +2311,10 @@ input:checked + .slide-container .properties { } #panel { - top: 25px; bottom: 30px; + top: 0; bottom: 0; left: 0; right: 0; - } - - #panel .close { - top: 0; right: 0; - left: auto; bottom: auto; - display: inline-block; - width: 30px; - height: 30px; + position: relative; + height: calc(100vh - 3.5rem); } #slider.active:target { diff --git a/p/themes/base-theme/frss.rtl.css b/p/themes/base-theme/frss.rtl.css index 4b52704b9..1b22fc5ff 100644 --- a/p/themes/base-theme/frss.rtl.css +++ b/p/themes/base-theme/frss.rtl.css @@ -1148,8 +1148,8 @@ input[type="search"] { } .aside .toggle_aside:hover, -#panel .close:hover, #slider .toggle_aside:hover, +#overlay .close:hover, .dropdown-menu .toggle_aside:hover { background-color: var(--frss-darken-background-hover-transparent); } @@ -1664,14 +1664,14 @@ a.website:hover .favicon { text-align: right; } -#global > #panel { +#global #panel { bottom: 99vh; display: block; transition: visibility .3s, bottom .3s; visibility: hidden; } -#global > #panel.visible { +#global #panel.visible { bottom: 2%; visibility: visible; } @@ -1707,10 +1707,6 @@ a.website:hover .favicon { display: block; } -#overlay .close img { - display: none; -} - /*=== Slider */ html.slider-active { overflow: hidden; @@ -2111,7 +2107,7 @@ input:checked + .slide-container .properties { } .aside .toggle_aside, - #panel .close, + #overlay .close, .dropdown-menu .toggle_aside, #slider .toggle_aside { padding: 1rem 0; @@ -2121,6 +2117,10 @@ input:checked + .slide-container .properties { text-align: center; } + #overlay .close { + position: relative; + } + .form-group { margin-bottom: 10px; } @@ -2228,14 +2228,12 @@ input:checked + .slide-container .properties { display: none; } - .aside .toggle_aside, .configure .dropdown-header-close, .nav-login { display: block; } - .nav_menu .toggle_aside, - #panel .close img { + .nav_menu .toggle_aside { display: inline-block; } @@ -2313,16 +2311,10 @@ input:checked + .slide-container .properties { } #panel { - top: 25px; bottom: 30px; + top: 0; bottom: 0; right: 0; left: 0; - } - - #panel .close { - top: 0; left: 0; - right: auto; bottom: auto; - display: inline-block; - width: 30px; - height: 30px; + position: relative; + height: calc(100vh - 3.5rem); } #slider.active:target { |