klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-11 20:39:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

completely ajaxify the picture page

Browse Source
This commit is contained in:
thomas girod
2024-09-03 20:15:37 +02:00
parent d545becf24
commit bc40b92744
12 changed files with 605 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
sas/static/sas/css/picture.scss
View File

@ -72,44 +72,30 @@
aspect-ratio: 16/9;
background: #333333;
> a {
position: relative;
img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 70%;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 40px;
}
> div {
display: flex;
position: relative;
width: 100%;
height: 100%;
> div {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: white;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
&::before {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, .3);
}
}
}
}
> #prev > a > div::before {
content: '←';
}
> #next > a > div::before {
content: '→';
}
}
> .tags {
@ -304,20 +290,3 @@
}
}
}
.moderation {
box-sizing: border-box;
width: 100%;
border: 2px solid coral;
border-radius: 2px;
padding: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
> div:last-child {
display: flex;
gap: 20px;
}
}