studio-variable/botascopia-webiste-static
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

search

Browse source
This commit is contained in:
Julie Blanc 2026-02-16 14:04:45 +01:00
parent 1b76727eff
commit 3c10e88b18
14 changed files with 272 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

174
assets/style.css
View file

@ -38,6 +38,7 @@
--color-green-x-light: #eef7f4;
--color-green-black: #016042;
--color-txt: rgb(41, 41, 41);
--color-txt: #0D2846;
--color-txt-light: #a5a9a9;
--color-light: #DCDDDD;
--color-x-light: #eaebeb;
@ -150,60 +151,6 @@ figure, picture, img {
list-style: none;
}
/*----------------*/
/* search bar */
/*----------------*/
.search {
display: flex;
flex-direction: row-reverse;
height: calc(var(--unit) * 1.5);
flex-grow: 2;
}
.search__toggle {
display: none;
}
.search__label {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: calc(var(--unit) * 1.5);
height: calc(var(--unit) * 1.5);
display: flex;
justify-content: center;
align-items: center;
}
.search__input {
display: none;
}
.search__icon {
width: var(--unit);
}
.search__icon--open {
display: block;
}
.search__icon--close {
display: none;
}
.search__toggle:checked ~ .search__input {
display: block;
}
.search__toggle:checked ~ .search__label .search__icon--open {
display: none;
}
.search__toggle:checked ~ .search__label .search__icon--close {
display: block;
}
#btn__connexion {
font-weight: 500;
font-size: 1rem;
@ -309,6 +256,108 @@ figure, picture, img {
padding: var(--padding-body);
}
.search {
display: flex;
height: calc(var(--unit) * 1.5);
flex-grow: 2;
flex-direction: row-reverse;
align-items: center;
gap: calc(var(--padding-inner) * 0.5);
}
.search svg {
display: inline-block;
width: 18px;
height: 18px;
}
.search svg svg {
width: 100%;
height: 100%;
}
.search svg {
stroke-width: 1px;
stroke: var(--color-txt);
}
.search .search__input-group {
display: grid;
grid-template-columns: var(--unit) 1fr;
width: 100%;
height: calc(var(--unit) * 1.5);
}
.search .search__input-group input {
grid-column: 1/end;
grid-row: 1;
padding-left: calc(var(--padding-inner) * 2.5);
font-family: sans-serif;
font-family: var(--font);
font-size: var(--fs-normal);
font-weight: 500;
border-radius: var(--radius-small);
border: 1px solid var(--color-txt-light);
outline: none;
}
.search .search__input-group input::-moz-placeholder {
font-family: var(--font);
font-size: var(--fs-normal);
}
.search .search__input-group input::placeholder {
font-family: var(--font);
font-size: var(--fs-normal);
}
.search .search__input-group input:focus {
outline: 1px solid var(--color-violet);
}
.search .search__input-group button {
grid-column: 1;
grid-row: 1;
z-index: 10;
align-self: center;
position: relative;
left: 10px;
top: 2px;
}
.search .search__icon {
width: calc(var(--unit) * 1.25);
height: calc(var(--unit) * 1.25);
border-radius: var(--radius-btn);
border: 1px solid var(--color-txt);
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.search .search__icon:hover {
background-color: var(--color-x-light);
}
#search-toggle {
display: none;
}
#search-toggle ~ [for=search-toggle] .search__icon--open {
display: flex;
}
#search-toggle ~ [for=search-toggle] .search__icon--close {
display: none;
}
#search-toggle ~ .search__input-group {
display: none;
}
#search-toggle:checked ~ [for=search-toggle] .search__icon--open {
display: none;
}
#search-toggle:checked ~ [for=search-toggle] .search__icon--close {
display: flex;
}
#search-toggle:checked ~ .search__input-group {
display: grid;
}
.btn--solid {
font-weight: 600;
font-size: 1.2rem;
@ -318,6 +367,7 @@ figure, picture, img {
align-items: center;
justify-content: center;
height: calc(var(--unit) * 1.5);
min-width: calc(var(--unit) * 1.5);
border-radius: var(--radius-btn);
cursor: pointer;
}
@ -1546,13 +1596,6 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
#view-list:checked ~ .page-species-list .species-list .taxon:first-of-type::before {
border-color: var(--color-green-light);
}
#view-edit:checked ~ .page-species-list .family .species-list .taxon .chart-edit,
#view-edit:checked ~ .page-species-list .species-list .taxon .chart-edit,
#view-list:checked ~ .page-species-list .family .species-list .taxon .chart-edit,
#view-list:checked ~ .page-species-list .species-list .taxon .chart-edit {
display: block;
margin-right: var(--padding-inner);
}
#view-edit:checked ~ .page-species-list .family .species-list .taxon figure,
#view-edit:checked ~ .page-species-list .species-list .taxon figure,
#view-list:checked ~ .page-species-list .family .species-list .taxon figure,
@ -1644,6 +1687,11 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
display: block !important;
z-index: 30;
}
#view-edit:checked ~ .page-species-list .family .species-list .taxon .chart-edit,
#view-edit:checked ~ .page-species-list .species-list .taxon .chart-edit {
display: block;
margin-right: var(--padding-inner);
}
.item-nav {
border: 1.5px solid var(--color-txt);
@ -1655,6 +1703,7 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
min-height: calc(var(--unit) * 5);
display: flex;
flex-direction: column;
text-decoration: none;
cursor: pointer;
}
.item-nav .title {
@ -1731,6 +1780,9 @@ input#view-grid:checked ~ .view-toggle label[for=view-grid] svg {
#main_home .species-list {
margin-bottom: calc(var(--spacing) * 3);
}
#main_home .species-list .taxon:hover {
border-color: red !important;
}
#main_home .species-list .title {
grid-column: 1/end;
font-size: var(--fs-medium);