Sith/core/static/sas/album.scss
Julien Constant 28f397574f
Amélioration des pages utilisateurs pour les petits écrans (#578, #520)
- Refonte de l'organisation des pages utilisateurs (principalement du front)
  - Page des parrains/fillots
  - Page d'édition du profil
  - Page du profil
  - Page des outils
  - Page des préférences
  - Page des stats utilisateurs

- Refonte du CSS / organisation de la navbar principale (en haut de l'écran)
- Refonte du CSS de la navbar bleu clair (le menu)
- Refonte du CSS du SAS :
  - Page de photo
  - Page d'albums
2023-03-30 14:38:40 +02:00

249 lines
4.3 KiB
SCSS

main {
box-sizing: border-box;
padding: 10px;
}
.navbar {
margin-top: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
justify-content: space-between;
}
.toolbar {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 5px;
> a,
> input {
padding: 0.4em;
margin: 0.1em;
font-size: 1.2em;
line-height: 1.2em;
color: black;
background-color: #f2f2f2;
border-radius: 5px;
font-weight: bold;
&:hover {
background-color: #d4d4d4;
}
&:disabled {
background-color: #f2f2f2;
color: #d4d4d4;
}
}
}
.add-files {
display: flex;
flex-direction: column;
> .inputs {
align-items: flex-end;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
> p {
box-sizing: border-box;
max-width: 300px;
width: 100%;
@media (max-width: 500px) {
max-width: 100%;
}
> input {
box-sizing: border-box;
max-width: 100%;
width: 100%;
height: 40px;
line-height: normal;
font-size: 16px;
}
}
> div > input,
> input {
box-sizing: border-box;
height: 40px;
width: 100%;
max-width: 300px;
@media (max-width: 500px) {
max-width: 100%;
}
}
> div {
width: 100%;
max-width: 300px;
}
> input[type=submit]:hover {
background-color: #287fb8;
color: white;
}
}
}
.clipboard {
margin-top: 10px;
padding: 10px;
background-color: rgba(0,0,0,.1);
border-radius: 10px;
}
.paginator {
display: flex;
justify-content: center;
gap: 10px;
width: -moz-fit-content;
width: fit-content;
background-color: rgba(0,0,0,.1);
border-radius: 10px;
padding: 10px;
margin: 10px 0 10px auto;
}
.photos,
.albums {
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 5px;
> div {
background: rgba(0, 0, 0, .5);
cursor: not-allowed;
}
> div,
> a {
box-sizing: border-box;
position: relative;
height: 128px;
@media (max-width: 500px) {
width: calc(50% - 5px);
height: 108px;
}
@media (max-width: 300px) {
width: 100%;
}
&:hover {
background: rgba(0, 0, 0, .5);
}
> input[type=checkbox] {
position: absolute;
top: 0;
right: 0;
height: 15px;
width: 15px;
margin: 5px;
cursor: pointer;
}
> .photo,
> .album {
box-sizing: border-box;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: calc(16 / 9 * 128px);
height: 128px;
margin: 0;
padding: 0;
box-shadow: none;
border: 1px solid rgba(0, 0, 0, .3);
@media (max-width: 500px) {
width: 100%;
height: 100%;
}
&:hover > .text {
background-color: rgba(0, 0, 0, .5);
}
&:hover > .overlay {
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
~ .text {
background-color: transparent;
}
}
> .text {
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 10px;
color: white;
}
> .overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
&::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '⚠️';
color: white;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, .5);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
}
}
> .album > div {
background: rgba(0, 0, 0, .5);
background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
text-align: left;
word-break: break-word;
}
> .photo > .text {
align-items: center;
padding-bottom: 30px;
}
}
}