f0ck/f0ckv2
3
4
Fork 1
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

Frontend lul

Browse Source
This commit is contained in:
Flummi
2019-05-11 09:20:48 +00:00
parent 1058d313a1
commit be29734fa4
5 changed files with 157 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
public/css/f0ck.css
View File

@ -76,28 +76,6 @@ button {
}
/* Flummikram lol */
div.pscroll {
opacity: 0.7;
position: fixed;
display: inline-block;
height: 64px;
width: 64px;
left: 50%;
cursor: pointer;
margin-left: -36px;
z-index: 999;
}
div.pscroll:hover {
opacity: 0.9;
}
div#up {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAANlBMVEUiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIjIyP///8iIiLm5uY3NzdKSkpAQEAqKipZf6aEAAAACnRSTlOxIfAAKvPn6quuQpaxIgAAAMZJREFUeF7t17uOwjAYROHjOMCuL0l4/5ddbQU0M4p/RIE8/flkyY1NTr/XNrjrT8qsSwtsWaGFBpcYcKEF9xFgAhMo9xIBytFrP8owUPb6v10JmN4K6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4LiN4LD2Cv53c8AaUPAL08AXVk9zeeoG3nhb69XuP5fdkLZQITmED840kMIP75zonbaH4j5T8NALtW477R3QAAAABJRU5ErkJggg==');
top: 5.8em;
}
div#down {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAANlBMVEUiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIjIyMiIiLm5uY3NzcqKipAQED///9KSkpHtWFIAAAACnRSTlMqACGx8/Cu6uerGsmyTAAAAM9JREFUeF7t1zkOwzAMBVEt3kLK2/0vm3KQivhWigTQ7+dBpZhyeW3+cNtSckqzd2xOafGu1TT1AVPyzv0YMIABDMD0fQB7u9S1HcCNXhAM4CAQZl98gZ8PgNsB3G69NwAEqQdAUHoABKUHQNB6AAStB0DQegAErQdA0HoABK0HQNB6AAShBwgE+gBACHuAWKCPAIS4B4gEegFAoHcFQKBXAAR6BUCgVwAEehlAoNcBt7Nd7TTXAYjD/uKDMYAB9B+etQ+o/cd3Lsv6NF9ryW9/v8EFMSsbFgAAAABJRU5ErkJggg==');
bottom: 5em;
}
footer {
position: fixed;
bottom: 0;
@ -191,4 +169,25 @@ div#itemview {
z-index: 999;
background-color: rgba(0,0,0,0.8);
display: none;
}
flex-direction: row;
width: 100%;
}
div.items {
/*position: relative;*/
flex: 1 1 0px;
width: 100%;
height: 100%;
}
img.item {
position: absolute;
max-height: 100%;
max-width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

88
public/css/icons.css Normal file
View File

@ -0,0 +1,88 @@
.close {
position: absolute;
right: 48px;
top: 48px;
width: 48px;
height: 48px;
opacity: 0.8;
background-color: rgba(0,0,0,0.5);
}
.close:hover {
opacity: 1;
}
.close:before, .close:after {
position: absolute;
left: 23px;
top: 3px;
content: ' ';
height: 40px;
width: 2px;
background-color: #333;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
div.arrow {
position: fixed;
cursor: pointer;
height: 70px;
width: 70px;
background-color: #000;
opacity: .5;
border-radius: 10px;
z-index: 90;
}
div.arrow:hover {
opacity: .9;
box-shadow: 0px 0px 0px 2px #dac8d2;
border-radius: 10px;
transition: .1s ease-in;
}
div.arrow:before {
content: '';
position: absolute;
top: 7%;
left: 7%;
height: 60px;
width: 60px;
background-color: rgba(255, 255, 255, 0.5);
}
div.top:before {
clip-path: polygon(0% 77%, 50% 23%, 100% 77%);
}
div.bottom:before {
clip-path: polygon(0% 23%, 100% 23%, 50% 77%);
}
div.left:before {
clip-path: polygon(23% 50%, 77% 0%, 77% 100%);
}
div.right:before {
clip-path: polygon(23% 0%, 77% 50%, 23% 100%);
}
div.arrow.top {
top: 80px;
left: 50%;
transform: translateX(-50%);
}
div.arrow.bottom {
bottom: 80px;
left: 50%;
transform: translateX(-50%);
}
div.arrow.left {
left: 20px;
top: 50%;
transform: translateY(-50%);
}
div.arrow.right {
right: 20px;
top: 50%;
transform: translateY(-50%);
}