mirror of
https://github.com/miniflux/v2.git
synced 2025-08-01 17:38:37 +00:00
Move search form to a dedicated page
This commit is contained in:
Frédéric Guillot
parent
1b5edfc00a
commit
abdd5876a1
27 changed files with 148 additions and 199 deletions
|
|
@ -29,8 +29,8 @@ h1, h2, h3 {
|
|||
}
|
||||
|
||||
main {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
|
|
@ -51,36 +51,36 @@ a:hover {
|
|||
}
|
||||
|
||||
.sr-only {
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
overflow: hidden !important;
|
||||
margin: -1px !important;
|
||||
padding: 0 !important;
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
-webkit-clip-path: inset(50%) !important;
|
||||
clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
overflow: hidden !important;
|
||||
margin: -1px !important;
|
||||
padding: 0 !important;
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.skip-to-content-link {
|
||||
--padding-size: 8px;
|
||||
--border-size: 1px;
|
||||
--padding-size: 8px;
|
||||
--border-size: 1px;
|
||||
|
||||
background-color: var(--category-background-color);
|
||||
color: var(--category-color);
|
||||
border: var(--border-size) solid var(--category-border-color);
|
||||
border-radius: 5px;
|
||||
inset-inline-start: 50%;
|
||||
padding: var(--padding-size);
|
||||
position: absolute;
|
||||
transition: translate 0.3s;
|
||||
translate: -50% calc(-100% - calc(var(--padding-size) * 2) - calc(var(--border-size) * 2));
|
||||
background-color: var(--category-background-color);
|
||||
color: var(--category-color);
|
||||
border: var(--border-size) solid var(--category-border-color);
|
||||
border-radius: 5px;
|
||||
inset-inline-start: 50%;
|
||||
padding: var(--padding-size);
|
||||
position: absolute;
|
||||
transition: translate 0.3s;
|
||||
translate: -50% calc(-100% - calc(var(--padding-size) * 2) - calc(var(--border-size) * 2));
|
||||
}
|
||||
|
||||
.skip-to-content-link:focus {
|
||||
translate: -50% 0;
|
||||
translate: -50% 0;
|
||||
}
|
||||
|
||||
/* Header and main menu */
|
||||
|
|
@ -145,7 +145,7 @@ a:hover {
|
|||
|
||||
/* Page header and footer*/
|
||||
.page-header {
|
||||
padding-inline: 5px;
|
||||
padding-inline: 3px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
|
|
@ -226,44 +226,6 @@ a:hover {
|
|||
color: var(--logo-hover-color-span);
|
||||
}
|
||||
|
||||
/* Search form */
|
||||
.search {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.search-summary-icon {
|
||||
padding: 5px;
|
||||
inline-size: 24px;
|
||||
block-size: 24px;
|
||||
translate: 0 -3px;
|
||||
}
|
||||
|
||||
.search-details {
|
||||
|
||||
&[open] .search-summary-icon {
|
||||
rotate: 180deg;
|
||||
}
|
||||
}
|
||||
|
||||
.search-summary {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
inline-size: fit-content;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.search-summary::marker, /* Latest Chrome, Edge, Firefox */
|
||||
.search-summary::-webkit-details-marker /* Safari */ {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-toggle-switch {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* PWA prompt */
|
||||
#prompt-home-screen {
|
||||
display: none;
|
||||
|
|
@ -318,26 +280,33 @@ a:hover {
|
|||
100% {visibility: hidden; opacity: 0; z-index: 0}
|
||||
}
|
||||
|
||||
/* Hide the logo when there is not enough space to display menus when using languages more verbose than English */
|
||||
@media (min-width: 625px) and (max-width: 830px) {
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 830px) {
|
||||
.logo {
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 620px) {
|
||||
body {
|
||||
margin: auto;
|
||||
max-width: 750px;
|
||||
max-width: 820px;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
text-align: left;
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.header li {
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
padding-right: 15px;
|
||||
padding-right: 12px;
|
||||
line-height: normal;
|
||||
border: none;
|
||||
font-size: 1.0em;
|
||||
|
|
@ -365,32 +334,6 @@ a:hover {
|
|||
display: inline;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
/* Search form */
|
||||
.search {
|
||||
text-align: right;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search details > summary {
|
||||
margin-inline: auto 0;
|
||||
}
|
||||
|
||||
.search-toggle-switch {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-toggle-switch.has-search-query {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-form.has-search-query {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue