v2.1 lol
This commit is contained in:
Flummi
parent
d553e71b50
commit
65454961ce
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -2,5 +2,6 @@ node_modules/
|
|||
logs/*.log
|
||||
config.json
|
||||
public/b/*
|
||||
public/ca/*
|
||||
public/t/*
|
||||
tmp/*
|
||||
|
|
|
|||
10224
public/s/css/bootstrap.css
vendored
10224
public/s/css/bootstrap.css
vendored
File diff suppressed because it is too large
Load Diff
10832
public/s/css/bulma.css
vendored
10832
public/s/css/bulma.css
vendored
File diff suppressed because it is too large
Load Diff
|
|
@ -1,23 +0,0 @@
|
|||
/* This is the classic style f0ck */
|
||||
|
||||
.mudderfigg {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
span.id {
|
||||
background: unset;
|
||||
text-align: left;
|
||||
color: #ffffff;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
.id > a {
|
||||
color: #9f0;
|
||||
}
|
||||
|
||||
.options {
|
||||
padding-left: 15px;
|
||||
margin-top: -5px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
|
@ -1,178 +0,0 @@
|
|||
@font-face {
|
||||
font-family: "Cyberfall";
|
||||
src: url(https://dr0p.it/Clgl.otf) format("opentype");
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0em auto 3em auto;
|
||||
background-color: #0B111D;
|
||||
color: #fff;
|
||||
font-family: "Cyberfall";
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00ffed;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #00b4ef;
|
||||
}
|
||||
|
||||
.return {
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #154d71;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
background: #121323;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.controls {
|
||||
text-align: center;
|
||||
color: #00ffed;
|
||||
width: 888px;
|
||||
margin: 0 auto;
|
||||
background: #121323;
|
||||
padding-top: 0;
|
||||
margin-top: 35px;
|
||||
border: 2px solid #154d71;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-weight: bold;
|
||||
position: fixed;
|
||||
overflow: visible;
|
||||
z-index: 999;
|
||||
background-color: #0b111d;
|
||||
border-bottom: 2px solid #207ea4;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.medium, .thumbnail {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 5px;
|
||||
background: #121323;
|
||||
border: 2px solid #154d71;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-bottom: 0;
|
||||
background-color: rgb(18, 19, 35);
|
||||
border: 2px solid #154D71;
|
||||
border-radius: 0px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
width: 25%;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
border: 1px double #00edff;
|
||||
background: #282A2E;
|
||||
color: #f1e3ce;
|
||||
font-family: 'Hack', monospace, sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
border: 2px solid #207ea4;
|
||||
}
|
||||
|
||||
.plyr--video .plyr__controls {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
padding: 0px 0px 0px;
|
||||
background: rgb(11, 17, 29);
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
color: #00edff;
|
||||
transition: opacity .3s cubic-bezier(0.12, 0.63, 0.25, 1);
|
||||
}
|
||||
|
||||
.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large {
|
||||
background: #0b111d;
|
||||
color: #00edff;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.plyr__progress--played, .plyr__volume--display {
|
||||
z-index: 1;
|
||||
color: #00edff;
|
||||
background: 0 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.plyr input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
margin-top: -4px;
|
||||
position: relative;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: #0b111d;
|
||||
border: 1px solid #00edff;
|
||||
border-radius: 100%;
|
||||
transition: background .2s ease,border .2s ease,transform .2s ease;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.15);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plyr input[type=range]:active::-webkit-slider-thumb {
|
||||
background: #0b111d;
|
||||
border-color: #00edff;
|
||||
transform: scale(1.25)
|
||||
}
|
||||
|
||||
/* Feuerfick */
|
||||
.plyr input[type="range"]::-moz-range-thumb {
|
||||
position: relative;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: #0b111d;
|
||||
border: 2px solid #00edff;
|
||||
border-radius: 100%;
|
||||
transition: background .2s ease, border .2s ease, transform .2s ease;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .15);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plyr input[type=range]:active::-moz-range-thumb {
|
||||
background: #0b111d;
|
||||
border-color: #00edff;
|
||||
transform: scale(1.25)
|
||||
}
|
||||
|
||||
.plyr--video .plyr__controls button.tab-focus:focus, .plyr--video .plyr__controls button:hover {
|
||||
background: #154d71;
|
||||
color: #00edff;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.plyr--audio .plyr__controls {
|
||||
padding: 0;
|
||||
border-radius: inherit;
|
||||
background: rgb(11, 17, 29);
|
||||
border: 0;
|
||||
color: #00edff;
|
||||
width: 300px;
|
||||
padding-right: 5;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large {
|
||||
background: #154d71;
|
||||
color: #00edff;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -1,687 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Oswald:700|Press+Start+2P');
|
||||
|
||||
body {
|
||||
margin: 1em auto 3em auto;
|
||||
background-color: rgb(10, 10, 10);
|
||||
color: #01ffbd;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #f300ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
border: 1px double #00ffc4;
|
||||
border-radius: 0;
|
||||
background: #9a0039;
|
||||
color: #04e8bd;
|
||||
font-size: 80%;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.return {
|
||||
text-align: center;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
font-size: 29px;
|
||||
text-decoration: none;
|
||||
animation: glitch2 2s steps(100) infinite;
|
||||
color: white;
|
||||
border-bottom: 2px solid #9a0039;
|
||||
background-color: #061412;
|
||||
margin-top: -60px;
|
||||
}
|
||||
|
||||
ul#posts {
|
||||
width: calc(100% - 210px);
|
||||
margin: 0;
|
||||
margin-left: 100px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
|
||||
.controls {
|
||||
text-align: center;
|
||||
color: #01f4b5;
|
||||
font-weight: bold;
|
||||
width: 888px;
|
||||
margin: 0 auto;
|
||||
background: #061412;
|
||||
padding-top: 0;
|
||||
border: 2px solid #9a0039;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.medium, .thumbnail {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 5px;
|
||||
background: #061412;
|
||||
border: 2px solid #9a0039;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.thumb {
|
||||
border: 2px solid rgb(4, 232, 189);
|
||||
}
|
||||
|
||||
/* Color the Controls */
|
||||
a#next {
|
||||
color: #01f4b5;
|
||||
}
|
||||
|
||||
a#next:hover {
|
||||
animation: glitch2 2s steps(100) infinite;
|
||||
}
|
||||
|
||||
a#random {
|
||||
color: #01f4b5;
|
||||
}
|
||||
|
||||
a#random:hover {
|
||||
animation: glitch2 2s steps(100) infinite;
|
||||
}
|
||||
|
||||
a#prev {
|
||||
color: #01f4b5;
|
||||
}
|
||||
|
||||
a#prev:hover {
|
||||
animation: glitch2 2s steps(100) infinite;
|
||||
}
|
||||
|
||||
a#holland {
|
||||
color: #01f4b5;
|
||||
}
|
||||
|
||||
a#holland:hover {
|
||||
color: #cc0ccb;
|
||||
animation: glitch2 2s steps(100) infinite;
|
||||
}
|
||||
|
||||
/* PANEL */
|
||||
.panel {
|
||||
background-color: rgba(4, 27, 23, 0.61);
|
||||
border: 2px solid #9a0039;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
text-align: center;
|
||||
margin-top: 7px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
border-bottom: 2px solid #9a0039;
|
||||
background: #061412;
|
||||
padding-bottom: 5px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.plyr--audio .plyr__controls {
|
||||
padding: 0;
|
||||
border-radius: inherit;
|
||||
background: #0a0a0a;
|
||||
border: 0;
|
||||
color: #f300ff;
|
||||
width: 300px;
|
||||
padding-right: 5;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.plyr input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
margin-top: -4px;
|
||||
position: relative;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: #061412;
|
||||
border: 1px solid #f300ff;
|
||||
border-radius: 100%;
|
||||
transition: background .2s ease,border .2s ease,transform .2s ease;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.15);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plyr__progress--played, .plyr__volume--display {
|
||||
z-index: 1;
|
||||
color: #00efb1;
|
||||
background: 0 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large {
|
||||
background: #061412;
|
||||
color: #01f4b5;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.plyr--video .plyr__controls button.tab-focus:focus, .plyr--video .plyr__controls button:hover {
|
||||
background: #061412;
|
||||
color: #01f4b5;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.plyr input[type=range]:active::-webkit-slider-thumb {
|
||||
background: #061412;
|
||||
border-color: #01f4b5;
|
||||
transform: scale(1.25)
|
||||
}
|
||||
|
||||
.plyr--video .plyr__controls {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
padding: 0px 0px 0px;
|
||||
background: rgba(10, 10, 10, 0.73);
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
color: #01f4b5;
|
||||
transition: opacity .3s cubic-bezier(0.12, 0.63, 0.25, 1);
|
||||
}
|
||||
|
||||
/* Feuerfick */
|
||||
.plyr input[type="range"]::-moz-range-thumb {
|
||||
position: relative;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: #061412;
|
||||
border: 2px solid #01f4b5;
|
||||
border-radius: 100%;
|
||||
transition: background .2s ease, border .2s ease, transform .2s ease;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .15);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plyr input[type=range]:active::-moz-range-thumb {
|
||||
background: #061412;
|
||||
border-color: #01f4b5;
|
||||
transform: scale(1.25)
|
||||
}
|
||||
|
||||
@keyframes noise-anim {
|
||||
0% {
|
||||
clip: rect(2px, 9999px, 94px, 0);
|
||||
}
|
||||
5% {
|
||||
clip: rect(89px, 9999px, 60px, 0);
|
||||
}
|
||||
10% {
|
||||
clip: rect(66px, 9999px, 50px, 0);
|
||||
}
|
||||
15% {
|
||||
clip: rect(3px, 9999px, 54px, 0);
|
||||
}
|
||||
20% {
|
||||
clip: rect(26px, 9999px, 19px, 0);
|
||||
}
|
||||
25% {
|
||||
clip: rect(20px, 9999px, 66px, 0);
|
||||
}
|
||||
30% {
|
||||
clip: rect(18px, 9999px, 43px, 0);
|
||||
}
|
||||
35% {
|
||||
clip: rect(54px, 9999px, 48px, 0);
|
||||
}
|
||||
40% {
|
||||
clip: rect(33px, 9999px, 66px, 0);
|
||||
}
|
||||
45% {
|
||||
clip: rect(24px, 9999px, 61px, 0);
|
||||
}
|
||||
50% {
|
||||
clip: rect(30px, 9999px, 18px, 0);
|
||||
}
|
||||
55% {
|
||||
clip: rect(16px, 9999px, 96px, 0);
|
||||
}
|
||||
60% {
|
||||
clip: rect(2px, 9999px, 20px, 0);
|
||||
}
|
||||
65% {
|
||||
clip: rect(84px, 9999px, 19px, 0);
|
||||
}
|
||||
70% {
|
||||
clip: rect(50px, 9999px, 5px, 0);
|
||||
}
|
||||
75% {
|
||||
clip: rect(60px, 9999px, 80px, 0);
|
||||
}
|
||||
80% {
|
||||
clip: rect(26px, 9999px, 96px, 0);
|
||||
}
|
||||
85% {
|
||||
clip: rect(100px, 9999px, 74px, 0);
|
||||
}
|
||||
90% {
|
||||
clip: rect(82px, 9999px, 29px, 0);
|
||||
}
|
||||
95% {
|
||||
clip: rect(34px, 9999px, 97px, 0);
|
||||
}
|
||||
100% {
|
||||
clip: rect(91px, 9999px, 44px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.return:after {
|
||||
content: attr(class="return");
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
text-shadow: -1px 0 red;
|
||||
top: 0;
|
||||
color: white;
|
||||
background: black;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 900px, 0, 0);
|
||||
animation: noise-anim 2s infinite linear alternate-reverse;
|
||||
}
|
||||
|
||||
@keyframes noise-anim-2 {
|
||||
0% {
|
||||
clip: rect(76px, 9999px, 52px, 0);
|
||||
}
|
||||
5% {
|
||||
clip: rect(5px, 9999px, 11px, 0);
|
||||
}
|
||||
10% {
|
||||
clip: rect(25px, 9999px, 9px, 0);
|
||||
}
|
||||
15% {
|
||||
clip: rect(56px, 9999px, 30px, 0);
|
||||
}
|
||||
20% {
|
||||
clip: rect(63px, 9999px, 93px, 0);
|
||||
}
|
||||
25% {
|
||||
clip: rect(84px, 9999px, 63px, 0);
|
||||
}
|
||||
30% {
|
||||
clip: rect(55px, 9999px, 54px, 0);
|
||||
}
|
||||
35% {
|
||||
clip: rect(53px, 9999px, 52px, 0);
|
||||
}
|
||||
40% {
|
||||
clip: rect(40px, 9999px, 66px, 0);
|
||||
}
|
||||
45% {
|
||||
clip: rect(50px, 9999px, 15px, 0);
|
||||
}
|
||||
50% {
|
||||
clip: rect(90px, 9999px, 31px, 0);
|
||||
}
|
||||
55% {
|
||||
clip: rect(33px, 9999px, 4px, 0);
|
||||
}
|
||||
60% {
|
||||
clip: rect(18px, 9999px, 57px, 0);
|
||||
}
|
||||
65% {
|
||||
clip: rect(2px, 9999px, 21px, 0);
|
||||
}
|
||||
70% {
|
||||
clip: rect(38px, 9999px, 93px, 0);
|
||||
}
|
||||
75% {
|
||||
clip: rect(61px, 9999px, 44px, 0);
|
||||
}
|
||||
80% {
|
||||
clip: rect(83px, 9999px, 27px, 0);
|
||||
}
|
||||
85% {
|
||||
clip: rect(80px, 9999px, 51px, 0);
|
||||
}
|
||||
90% {
|
||||
clip: rect(91px, 9999px, 39px, 0);
|
||||
}
|
||||
95% {
|
||||
clip: rect(59px, 9999px, 36px, 0);
|
||||
}
|
||||
100% {
|
||||
clip: rect(74px, 9999px, 80px, 0);
|
||||
}
|
||||
}
|
||||
.return:before {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
text-shadow: 1px 0 blue;
|
||||
top: 0;
|
||||
color: white;
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 900px, 0, 0);
|
||||
animation: noise-anim-2 3s infinite linear alternate-reverse;
|
||||
}
|
||||
|
||||
@keyframes glitch2 {
|
||||
0% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
1% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
2% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
3% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
4% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
5% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
6% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
7% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
8% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
9% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
10% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
11% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
12% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
13% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
14% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
15% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
16% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
17% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
18% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
19% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
20% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
21% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
22% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
23% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
24% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
25% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
26% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
27% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
28% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
29% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
30% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
31% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
32% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
33% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
34% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
35% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
36% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
37% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
38% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
39% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
40% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
41% {
|
||||
text-shadow: 50px 0 0 blue, -50px 0 0 lime;
|
||||
}
|
||||
42% {
|
||||
text-shadow: 0 0 0 blue, 0 0 0 lime;
|
||||
}
|
||||
43% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
44% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
45% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
46% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
47% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
48% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
49% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
50% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
51% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
52% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
53% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
54% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
55% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
56% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
57% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
58% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
59% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
60% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
61% {
|
||||
text-shadow: 30px 0 0 red, -30px 0 0 lime;
|
||||
}
|
||||
62% {
|
||||
text-shadow: 0 0 0 red, 0 0 0 lime;
|
||||
}
|
||||
63% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
|
||||
}
|
||||
64% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
|
||||
}
|
||||
65% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
|
||||
}
|
||||
66% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
|
||||
}
|
||||
67% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
68% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
69% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
70% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
71% {
|
||||
text-shadow: 70px 0 0 red, -70px 0 0 blue;
|
||||
}
|
||||
72% {
|
||||
text-shadow: 0 0 0 red, 0 0 0 blue;
|
||||
}
|
||||
73% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
74% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
75% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
76% {
|
||||
text-shadow: 1px 0 0 red, -1px 0 0 blue;
|
||||
}
|
||||
77% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
78% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
79% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
80% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 blue;
|
||||
}
|
||||
81% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
82% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
83% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
84% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
85% {
|
||||
text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
|
||||
}
|
||||
86% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
87% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
88% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
89% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
90% {
|
||||
text-shadow: -1px 0 0 red, 1px 0 0 lime;
|
||||
}
|
||||
91% {
|
||||
text-shadow: 60px 0 0 lime, -60px 0 0 blue;
|
||||
}
|
||||
92% {
|
||||
text-shadow: 0 0 0 lime, 0 0 0 blue;
|
||||
}
|
||||
92% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
93% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
94% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
95% {
|
||||
text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
|
||||
}
|
||||
96% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
97% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
98% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
99% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
100% {
|
||||
text-shadow: -1px 0 0 blue, 1px 0 0 lime;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,657 +0,0 @@
|
|||
/* written by sirx for f0ck.me */
|
||||
/* use whatever you like */
|
||||
ul#posts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
grid-gap: 1em;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #1b1b1b;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
font-family: monospace;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 1px 1px black;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.container.is-fluid {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
li.post {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
span.item-mime {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
color: #68da20;
|
||||
text-shadow: 1px 1px black;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
background: #000000b8;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
li.post:hover > span.item-mime {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, .navbar-link.is-active {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a#next, a#prev {
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
top: 0px;
|
||||
bottom: 932px;
|
||||
margin: unset;
|
||||
font-size: 30px;
|
||||
color: #9f0;
|
||||
padding: 140px 40px 140px 40px;
|
||||
cursor: pointer;
|
||||
align-content: inherit;
|
||||
align-self: center;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
a#next, a#prev {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
justify-content: space-around;
|
||||
grid-template-columns: 0fr 1fr 0fr;
|
||||
}
|
||||
|
||||
.previous-post, .next-post {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
img#f0ck-image {
|
||||
max-width: 100%;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
text-align: center;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #99ff00;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #99ff00;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar-item, .navbar-link {
|
||||
color: white;
|
||||
text-shadow: 1px 1px black;
|
||||
}
|
||||
|
||||
.media-object {
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/*a.id-link {
|
||||
padding-right: 5;
|
||||
}*/
|
||||
|
||||
div#my-video {
|
||||
max-height: unset;
|
||||
}
|
||||
|
||||
.box:not(:last-child),
|
||||
.content:not(:last-child),
|
||||
.notification:not(:last-child),
|
||||
.progress:not(:last-child),
|
||||
.table:not(:last-child),
|
||||
.table-container:not(:last-child),
|
||||
.title:not(:last-child),
|
||||
.subtitle:not(:last-child),
|
||||
.block:not(:last-child),
|
||||
.highlight:not(:last-child),
|
||||
.breadcrumb:not(:last-child),
|
||||
.level:not(:last-child),
|
||||
.list:not(:last-child),
|
||||
.message:not(:last-child),
|
||||
.pagination:not(:last-child),
|
||||
.tabs:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
/*16:9*/
|
||||
padding-top: 30px;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-container video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.irc {
|
||||
padding: 10px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
a#next:hover {
|
||||
box-shadow: -1px 0px #99ff001c;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
a#prev:hover {
|
||||
box-shadow: 1px 0px #99ff001c;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.navbar-brand a.navbar-item:focus, .navbar-brand a.navbar-item:hover {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.controls {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 517px;
|
||||
}
|
||||
|
||||
#themeselector {
|
||||
color: #fff;
|
||||
background-color: #343a40;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
border-radius: 0.25rem;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
a#next, a#prev {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
img#biohaz {
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
background: #1b1b1b;
|
||||
border-top: 1px solid #262626;
|
||||
}
|
||||
|
||||
.content {
|
||||
border-left: 1px solid #1b1b1b;
|
||||
border-right: 1px solid #1b1b1b;
|
||||
}
|
||||
|
||||
.controls {
|
||||
border-left: 1px solid #1b1b1b;
|
||||
border-right: 1px solid #1b1b1b;
|
||||
}
|
||||
|
||||
#themeselector {
|
||||
padding: 0.04em 0.2em;
|
||||
vertical-align: top;
|
||||
font-weight: 560;
|
||||
}
|
||||
|
||||
span.badge.badge-dark {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.badge-dark, #themeselector {
|
||||
color: #fff;
|
||||
background-color: #000000;
|
||||
border-radius: 0;
|
||||
border-left: 1px solid #262626;
|
||||
border-right: 1px solid #262626;
|
||||
border-top: 1px solid #000;
|
||||
border-bottom: 1px solid #262626;
|
||||
}
|
||||
|
||||
.video-js .vjs-control-bar {
|
||||
background-color: #1b1b1b !important;
|
||||
}
|
||||
|
||||
a#rndbtn {
|
||||
color: #fff;
|
||||
background-color: #1b1b1b;
|
||||
border-radius: 0;
|
||||
border-left: 1px solid #262626;
|
||||
border-right: 1px solid #262626;
|
||||
border-top: 1px solid #262626;
|
||||
border-bottom: 1px solid #262626;
|
||||
padding: 0px 5px 0px 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.contact {
|
||||
border-left: 1px solid #1b1b1b;
|
||||
border-right: 1px solid #1b1b1b;
|
||||
border-bottom: 1px solid #1b1b1b;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.irc {
|
||||
border-left: 1px solid #1b1b1b;
|
||||
border-right: 1px solid #1b1b1b;
|
||||
border-bottom: 1px solid #1b1b1b;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Testing Area */
|
||||
.content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a#next {
|
||||
top: 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
background: transparent;
|
||||
width: 25%;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
a#prev {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
background: transparent;
|
||||
width: 25%;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
.vjs-control-bar {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.arrow-prev {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.arrow-next {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
a#next:hover {
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
a#next {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
a#prev:hover {
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
a#prev {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
/* pagination */
|
||||
.pagination {
|
||||
padding: 8px;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid;
|
||||
border-color: #070809 #0d0e0f #131517;
|
||||
border-color: rgba(0, 0, 0, 0.8) rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.5);
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
zoom: 1; *display: inline;
|
||||
*vertical-align: auto;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
|
||||
box-shadow: 0 1px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.pagination > a, .pagination > span {
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
padding: 0 6px;
|
||||
min-width: 17px;
|
||||
line-height: 27px;
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #68da20;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid black;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.pagination :first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pagination > a {
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px black;
|
||||
background-clip: padding-box;
|
||||
border-color: rgba(0, 0, 0, 0.9);
|
||||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px rgba(255, 255, 255, 0.04), inset 0 -1px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
transition: 0.1s ease-out;
|
||||
}
|
||||
|
||||
.pagination > a:hover {
|
||||
background-color: #333;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.pagination > span, .pagination > a:active {
|
||||
color: #68da20;
|
||||
text-shadow: 0 -1px black;
|
||||
background: #1c1c1c;
|
||||
background: rgba(255, 255, 255, 0.01);
|
||||
border-color: black rgba(0, 0, 0, 0.65) rgba(0, 0, 0, 0.6);
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.pagination .prev, .pagination .next {
|
||||
font-family: Noteworthy, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'VCR';
|
||||
src: url('/s/vcr.ttf') format('truetype');
|
||||
}
|
||||
|
||||
span#f0ck {
|
||||
font-family: 'VCR';
|
||||
font-size: xx-large;
|
||||
text-shadow: 1px 1px 1px black, 0px 0px 0px #9f0, -1px -1px 0px black, 1px -1px 0px black, -1px 1px 0px black, 0px 0px 0px #9f0;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* nav overhaul */
|
||||
.nav-item {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.navbar-nav.mr-auto {
|
||||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.navbar.navbar-expand-lg {
|
||||
background: #242424;
|
||||
}
|
||||
|
||||
.navigation-links {
|
||||
display: flex;
|
||||
background: #232323;
|
||||
background-image: none;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #000;
|
||||
background-image: linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,0));
|
||||
box-shadow: 0 1px rgba(255,255,255,.05);
|
||||
border: 1px solid;
|
||||
border-top-color: currentcolor;
|
||||
border-right-color: currentcolor;
|
||||
border-bottom-color: currentcolor;
|
||||
border-left-color: currentcolor;
|
||||
border-top-color: currentcolor;
|
||||
border-right-color: currentcolor;
|
||||
border-bottom-color: currentcolor;
|
||||
border-left-color: currentcolor;
|
||||
border-color: #070809 #0d0e0f #131517;
|
||||
border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
border: 1px solid #000;
|
||||
border-radius: 3px;
|
||||
transition: .1s ease-out;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
min-width: 17px;
|
||||
line-height: 27px;
|
||||
background-image: linear-gradient(to bottom,rgba(255,255,255,.04),rgba(255,255,255,0));
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
.nav-item:hover>a:hover {
|
||||
background-color: #333;
|
||||
background-color: rgba(255,255,255,.05);
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#navbarSupportedContent {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.pagination-container-fluid {
|
||||
display: flex;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.navbar-expand-lg .navbar-nav .nav-link {
|
||||
padding-right: .5rem;
|
||||
padding-left: .5rem;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 5px;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid;
|
||||
border-color: #070809 #0d0e0f #131517;
|
||||
border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
zoom: 1;
|
||||
background-image: linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,0));
|
||||
box-shadow: 0 1px rgba(255,255,255,.05);
|
||||
}
|
||||
|
||||
.pagination>a,.pagination>span {
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
padding: 0 10px;
|
||||
min-width: 17px;
|
||||
line-height: 27px;
|
||||
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #68da20;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid #000;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.pagination > span {
|
||||
border: 1px solid #68da20 !important;
|
||||
}
|
||||
|
||||
.pagination :first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pagination>a {
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px #000;
|
||||
background-clip: padding-box;
|
||||
border-color: rgba(0,0,0,.9);
|
||||
background-image: linear-gradient(top,rgba(255,255,255,.04),rgba(255,255,255,0));
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);
|
||||
transition: .1s ease-out;
|
||||
}
|
||||
|
||||
.pagination>a:hover {
|
||||
background-color: #333;
|
||||
background-color: rgba(255,255,255,.05);
|
||||
}
|
||||
|
||||
.pagination>a:active,.pagination>span {
|
||||
color: #68da20;
|
||||
text-shadow: 0 -1px #000;
|
||||
background: #1c1c1c;
|
||||
background: rgba(255,255,255,.01);
|
||||
border-color: #000 rgba(0,0,0,.65) rgba(0,0,0,.6);
|
||||
box-shadow: inset 0 1px rgba(0,0,0,.05),inset 0 2px 2px rgba(0,0,0,.3),0 1px rgba(255,255,255,.06);
|
||||
}
|
||||
|
||||
.pagination .next,.pagination .prev {
|
||||
font-family: Noteworthy,Arial,sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.nav-link-identifier {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
ul#posts {
|
||||
grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
|
||||
text-align: center;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 422px) {
|
||||
ul#posts {
|
||||
grid-column-gap: 0;
|
||||
grid-row-gap: 5px;
|
||||
}
|
||||
|
||||
.container-fluid,.container-lg,.container-md,.container-sm,.container-xl {
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 410px) {
|
||||
ul#posts {
|
||||
grid-column-gap: 15px;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.container-fluid,.container-lg,.container-md,.container-sm,.container-xl {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.navbar-nav {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-expand-lg .navbar-nav .nav-link {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination-container-fluid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: .5rem 1rem 0;
|
||||
}
|
||||
|
||||
.navigation-links {
|
||||
border-color: transparent transparent transparent;
|
||||
}
|
||||
|
||||
.pagination-container-fluid {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
885
public/s/css/f0ck.css
Normal file
885
public/s/css/f0ck.css
Normal file
|
|
@ -0,0 +1,885 @@
|
|||
/* f0ckwork v0.1 alpha */
|
||||
/* written by sirx for f0ck.me */
|
||||
/* use whatever you like */
|
||||
/* once upon a time this was a stiefelstrapse! but no more! */
|
||||
/* Licensed under wtfpl */
|
||||
|
||||
:root {
|
||||
--accent: #9f0;
|
||||
--bg: #171717;
|
||||
--black: #000;
|
||||
--white: #fff;
|
||||
--gray: #262626;
|
||||
--nav-bg: #2b2b2b;
|
||||
--nav-brand-border: inset 1px #242424;
|
||||
--nav-brand-bg: #171717;
|
||||
--navigation-links-bg: #2b2b2b;
|
||||
--navigation-links-background-linear-gradient: rgba(0,0,0,.12),rgba(0,0,0,0);
|
||||
--navigation-links-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--navigation-links-box-shadow: rgba(255,255,255,.05);
|
||||
--nav-link-background-linear-gradient: rgba(255,255,255,.04),rgba(255,255,255,0);
|
||||
--nav-link-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0px rgba(255,255,255,.04),inset 0 0px rgba(0,0,0,.15),0 0px 0px rgba(0,0,0,.1);
|
||||
--nav-link-hover-bg: #333;
|
||||
--nav-border-color: rgba(255,255,255,.05);
|
||||
--dropdown-bg: #232323;
|
||||
--dropdown-item-hover: #0d0d0d;
|
||||
--nav-brand-font: 'VCR';
|
||||
--font: monospace;
|
||||
--pagination-background: #2b2b2b;
|
||||
--pagination-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0px rgba(255,255,255,.04),inset 0 0px rgba(0,0,0,.15),0 0px 0px rgba(0,0,0,.1);
|
||||
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);
|
||||
--pagination-background-hover: #333;
|
||||
--pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--videojs-background: #0d0d0d;
|
||||
--metadata-bg: #0d0d0d;
|
||||
--badge-bg: #171717;
|
||||
--posts-meta-bg: #000000b8;
|
||||
--badge-sfw: #68a728;
|
||||
--badge-nsfw: #a72828;
|
||||
--badge-tag: #6c6c6c;
|
||||
--scrollbar-color: #2b2b2b;
|
||||
--pb-primary: #fff;
|
||||
--pb-secondary: #9f0;
|
||||
}
|
||||
|
||||
html[theme='p1nk'] {
|
||||
--accent: #ff00d0;
|
||||
--bg: #171717;
|
||||
--black: #000;
|
||||
--white: #fff;
|
||||
--gray: #262626;
|
||||
--nav-bg: #2b2b2b;
|
||||
--nav-brand-border: inset 1px #242424;
|
||||
--nav-brand-bg: #171717;
|
||||
--navigation-links-bg: #2b2b2b;
|
||||
--navigation-links-background-linear-gradient: rgba(0,0,0,.12),rgba(0,0,0,0);
|
||||
--navigation-links-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--navigation-links-box-shadow: rgba(255,255,255,.05);
|
||||
--nav-link-background-linear-gradient: rgba(255,255,255,.04),rgba(255,255,255,0);
|
||||
--nav-link-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);
|
||||
--nav-link-hover-bg: #333;
|
||||
--dropdown-bg: #232323;
|
||||
--nav-brand-font: 'VCR';
|
||||
--font: monospace;
|
||||
--pagination-background: #2b2b2b;
|
||||
--pagination-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);;
|
||||
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);
|
||||
--pagination-background-hover: #333;
|
||||
--pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--videojs-background: #0e0d0d;
|
||||
}
|
||||
|
||||
html[theme='orange'] {
|
||||
--accent: #ff6f00;
|
||||
--bg: #1f1e1e;
|
||||
--black: #000;
|
||||
--white: #fff;
|
||||
--gray: #262626;
|
||||
--nav-bg: #2b2b2b;
|
||||
--nav-brand-border: inset 1px #242424;
|
||||
--nav-brand-bg: #1f1e1e;
|
||||
--navigation-links-bg: #2b2b2b;
|
||||
--navigation-links-background-linear-gradient: rgba(0,0,0,.12),rgba(0,0,0,0);
|
||||
--navigation-links-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--navigation-links-box-shadow: rgba(255,255,255,.05);
|
||||
--nav-link-background-linear-gradient: rgba(255,255,255,.04),rgba(255,255,255,0);
|
||||
--nav-link-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);
|
||||
--nav-link-hover-bg: #333;
|
||||
--dropdown-bg: #232323;
|
||||
--dropdown-item-hover: #0d0d0d;
|
||||
--nav-brand-font: 'VCR';
|
||||
--font: monospace;
|
||||
--pagination-background: #2b2b2b;
|
||||
--pagination-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);
|
||||
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1);
|
||||
--pagination-background-hover: #333;
|
||||
--pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--videojs-background: #262626;
|
||||
--metadata-bg: #0d0d0d;
|
||||
--posts-meta-bg: #000000b8;
|
||||
--badge-sfw: #68a728;
|
||||
--badge-nsfw: #a72828;
|
||||
--badge-tag: #6c6c6c;
|
||||
--scrollbar-color: #2b2b2b;
|
||||
}
|
||||
|
||||
html[theme='amoled'] {
|
||||
--accent: #fff;
|
||||
--bg: #000;
|
||||
--black: #000;
|
||||
--white: #fff;
|
||||
--gray: #2f2d2d;
|
||||
--nav-bg: #000;
|
||||
--nav-brand-border: inset 1px #242424;
|
||||
--nav-brand-bg: #000;
|
||||
--navigation-links-bg: #000;
|
||||
--navigation-links-background-linear-gradient: rgba(0,0,0,.12),rgba(0,0,0,0);
|
||||
--navigation-links-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--navigation-links-box-shadow: rgba(255,255,255,.05);
|
||||
--nav-link-background-linear-gradient: rgba(255,255,255,.04),rgba(255,255,255,0);
|
||||
--nav-link-box-shadow: inset 0 0 0 1px rgb(92, 92, 92),inset 0 1px rgb(92, 92, 92),inset 0 -1px rgb(92, 92, 92),0 1px 1px rgba(92, 92, 92, 0);
|
||||
--nav-link-hover-bg: #6a6a6a70;
|
||||
--nav-border-color: rgba(255,255,255,.05);
|
||||
--dropdown-bg: #232323;
|
||||
--dropdown-item-hover: #0d0d0d;
|
||||
--nav-brand-font: 'VCR';
|
||||
--font: monospace;
|
||||
--pagination-background: #000;
|
||||
--pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0),inset 0 0px rgba(255, 255, 255, 0),inset 0 0px rgba(248, 248, 248, 0),0 0px 0px rgba(255, 255, 255, 0);
|
||||
--pagination-anchor-box-shadow: inset 0 0 0 1px rgb(92, 92, 92),inset 0 1px rgb(92, 92, 92),inset 0 -1px rgb(92, 92, 92),0 1px 1px rgba(92, 92, 92, 0);
|
||||
--pagination-background-hover: #6a6a6a70;
|
||||
--pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
|
||||
--videojs-background: #0d0d0d;
|
||||
--metadata-bg: #000;
|
||||
--badge-bg: #000;
|
||||
--posts-meta-bg: #000000b8;
|
||||
--badge-sfw: #68a728;
|
||||
--badge-nsfw: #a72828;
|
||||
--badge-tag: #6c6c6c;
|
||||
--scrollbar-color: #1d1c1c;
|
||||
--pb-primary: #fff;
|
||||
--pb-secondary: #9f0;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-color);
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'VCR';
|
||||
src: url('/s/vcr.ttf') format('truetype');
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background-color: var(--bg);
|
||||
color: var(--white);
|
||||
margin: 0;
|
||||
font-family: var(--font);
|
||||
text-align: center;
|
||||
line-height: 2;
|
||||
scrollbar-color: var(--scrollbar-color) transparent;
|
||||
scrollbar-width: thin;
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
.noscript-badge {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent) !important;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a.post_source:hover, a.id-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a.btn.disabled {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.btn.disabled, .btn:disabled {
|
||||
opacity: 0.65;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: 0;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem !important;
|
||||
}
|
||||
|
||||
ul#posts {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
}
|
||||
|
||||
ul#posts > li {
|
||||
position: relative;
|
||||
height: 128px;
|
||||
width: 128px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul#posts > li:hover {
|
||||
opacity: 0.8;
|
||||
box-shadow: 0 0 0 2px var(--accent);
|
||||
}
|
||||
|
||||
ul#posts > li span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
color: var(--accent);
|
||||
text-shadow: 0px 1px var(--black);
|
||||
font-size: 11px;
|
||||
background: var(--posts-meta-bg);
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-family: vcr;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
ul#posts > li:hover span {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
.nav {
|
||||
background: var(--bg);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
z-index: 3;
|
||||
font-family: var(--font);
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--nav-border-color);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
background: var(--nav-brand-bg);
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.navbar-brand:hover {
|
||||
text-decoration: none;
|
||||
transition: ease all .2s;
|
||||
background: var(--black);
|
||||
}
|
||||
|
||||
span.f0ck {
|
||||
font-family: var(--nav-brand-font);
|
||||
font-size: 20;
|
||||
text-shadow: 1px 1px 1px var(--black), 0px 0px 0px var(--green), -1px -1px 0px var(--black), 1px -1px 0px var(--black), -1px 1px 0px var(--black), 0px 0px 0px var(--green);
|
||||
}
|
||||
|
||||
.navbar.navbar-expand-lg {
|
||||
background: var(--nav-bg);
|
||||
}
|
||||
|
||||
.navbar-expand-lg .navbar-collapse {
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#navbarSupportedContent {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-link-identifier {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar-expand-lg .navbar-nav {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.navigation-links {
|
||||
display: flex;
|
||||
border: 1px solid var(--navigation-links-border-color);
|
||||
background: var(--navigation-links-bg);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
min-width: 17px;
|
||||
border: 1px solid var(--black);
|
||||
border-radius: 3px;
|
||||
transition: .1s ease-out;
|
||||
background-image: linear-gradient(to bottom,var(--nav-link-background-linear-gradient));
|
||||
box-shadow: var(--nav-link-box-shadow);
|
||||
color: transparent;
|
||||
transition: .5s ease;
|
||||
}
|
||||
|
||||
.navbar-expand-lg .navbar-nav .nav-link, .pagination > a, .pagination > span {
|
||||
padding-right: .5rem;
|
||||
padding-left: .5rem;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.nav-item:hover > a:hover, .dropdown-item:hover > a:hover {
|
||||
background-color: var(--nav-link-hover-bg);
|
||||
}
|
||||
|
||||
span.placeholder {
|
||||
border-left: 1px solid var(--accent);
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
.navbar .nav-item .dropdown-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropup, .dropright, .dropdown, .dropleft {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar .nav-item:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
background: var(--dropdown-bg);
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 5;
|
||||
z-index: 1000;
|
||||
min-width: calc(100% - 10px);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
border-left: 1px solid;
|
||||
border-right: 1px solid;
|
||||
border-bottom: 1px solid;
|
||||
border-color: var(--black);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-menu > li:hover {
|
||||
background: var(--dropdown-item-hover);
|
||||
}
|
||||
/* Navbar media queries */
|
||||
@media (max-width: 1056px) {
|
||||
.navbar {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
justify-content: normal;
|
||||
}
|
||||
.pagination-wrapper {
|
||||
width: 100%;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.pagination > a, .pagination > span {
|
||||
font-size: 10px !important;
|
||||
margin-right: 0px;
|
||||
padding: 5px !important;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.media-object {
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination-wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
background: var(--pagination-background);
|
||||
border: 1px solid var(--pagination-border-color);
|
||||
}
|
||||
|
||||
.pagination-container-fluid {
|
||||
display: flex;
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
color: transparent;
|
||||
transition: .5s ease;
|
||||
}
|
||||
|
||||
.pagination > a, .pagination > span {
|
||||
float: left;
|
||||
padding: 0 10px;
|
||||
min-width: 17px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--accent);
|
||||
text-align: center;
|
||||
border: 1px solid var(--black);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.pagination > span {
|
||||
border: 1px solid var(--accent) !important;
|
||||
}
|
||||
|
||||
.pagination :first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pagination > a {
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px var(--black);
|
||||
border-color: var(--black);
|
||||
background-clip: padding-box;
|
||||
box-shadow: var(--pagination-anchor-box-shadow);
|
||||
transition: .1s ease-out;
|
||||
background-image: linear-gradient(to bottom,var(--nav-link-background-linear-gradient));
|
||||
}
|
||||
|
||||
.pagination>a:hover {
|
||||
background-color: var(--pagination-background-hover);
|
||||
}
|
||||
|
||||
.pagination>a:active,.pagination>span {
|
||||
color: var(--accent);
|
||||
text-shadow: 0 -1px var(--black);
|
||||
box-shadow: var(--pagination-anchor-box-shadow);
|
||||
}
|
||||
|
||||
/* Content */
|
||||
@media (max-width: 999px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
justify-content: space-around;
|
||||
grid-template-columns: 0fr 1fr 0fr;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.index-container {
|
||||
width: 100%;
|
||||
padding-right: 15;
|
||||
padding-left: 15;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 361px) {
|
||||
.embed-responsive-image {
|
||||
bottom: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.embed-responsive-image {
|
||||
bottom: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.embed-responsive-image {
|
||||
bottom: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
.embed-responsive-image {
|
||||
bottom: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
.embed-responsive-16by9::before {
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
.embed-responsive::before {
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.embed-responsive .embed-responsive-item, .embed-responsive video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.embed-responsive-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: content-box;
|
||||
scrollbar-color: var(--scrollbar-color) transparent;
|
||||
scrollbar-width: thin;
|
||||
background: var(--black);
|
||||
}
|
||||
|
||||
.previous-post, .next-post {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#prev {
|
||||
z-index: 1;
|
||||
font-size: 30;
|
||||
opacity: 0.6;
|
||||
text-shadow: 2px 2px 2px var(--black);
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
#prev::before {
|
||||
content: "»";
|
||||
}
|
||||
|
||||
#next::before {
|
||||
content: "«";
|
||||
}
|
||||
|
||||
#next {
|
||||
z-index: 1;
|
||||
font-size: 30;
|
||||
opacity: 0.6;
|
||||
text-shadow: 2px 2px 2px var(--black);
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
#next:hover, #prev:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.arrow-next {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.arrow-prev {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* image */
|
||||
#f0ck-image {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
a#elfe {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* metadata */
|
||||
.badge:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.metadata {
|
||||
text-align: center;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
background-color: var(--metadata-bg);
|
||||
}
|
||||
|
||||
#themeselector {
|
||||
color: var(--white);
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: var(--font);
|
||||
background-color: var(--metadata-bg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.badge-dark, #themeselector {
|
||||
background-color: var(--badge-bg);
|
||||
border: 1px solid var(--black);
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
span#tags {
|
||||
grid-column: 1/4;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
color: var(--white);
|
||||
background-color: var(--badge-sfw);
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
padding-top: 1.5px;
|
||||
padding-bottom: 1.5px;
|
||||
border-radius: 3px;
|
||||
text-shadow: 1px 1px var(--black);
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
color: var(--white);
|
||||
background-color: var(--badge-nsfw);
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
padding-top: 1.5px;
|
||||
padding-bottom: 1.5px;
|
||||
border-radius: 3px;
|
||||
text-shadow: 1px 1px var(--black);
|
||||
}
|
||||
|
||||
.badge-light {
|
||||
color: var(--white);
|
||||
background-color: var(--badge-tag);
|
||||
border-radius: 3px;
|
||||
text-shadow: 1px 1px var(--black);
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
padding-top: 1.5px;
|
||||
padding-bottom: 1.5px;
|
||||
}
|
||||
|
||||
.irc, .contact {
|
||||
padding: 10px;
|
||||
color: white;
|
||||
word-break: break-word;
|
||||
background: var(--navigation-links-bg);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 999px) {
|
||||
ul#posts {
|
||||
grid-column-gap: 5px;
|
||||
grid-row-gap: 5px;
|
||||
}
|
||||
|
||||
.index-container {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.pbwork {
|
||||
animation: pulsate 1s infinite linear;
|
||||
box-shadow: 0px 2px var(--accent);
|
||||
}
|
||||
@keyframes pulsate {
|
||||
0% { box-shadow: 0px 2px var(--white); }
|
||||
40% { box-shadow: 0px 2px var(--accent); }
|
||||
60% { box-shadow: 0px 2px var(--accent); }
|
||||
100% { box-shadow: 0px 2px var(--white); }
|
||||
}
|
||||
|
||||
@media(max-height: 768px) {
|
||||
.embed-responsive-16by9::before {
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-height: 755px) {
|
||||
.embed-responsive-16by9::before {
|
||||
padding-top: 46.25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-height: 640px) {
|
||||
.embed-responsive-16by9::before {
|
||||
padding-top: 36.25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-height: 525px) {
|
||||
.embed-responsive-16by9::before {
|
||||
padding-top: 26.25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-height: 414px) {
|
||||
.embed-responsive-16by9::before {
|
||||
padding-top: 16.25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-height: 300px) {
|
||||
.embed-responsive-16by9::before {
|
||||
padding-top: 14.5%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 580px) {
|
||||
.embed-responsive-16by9::before {
|
||||
padding-top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 555px) {
|
||||
.metadata {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
span#tags {
|
||||
grid-column: 1/3;
|
||||
}
|
||||
|
||||
a#prev:focus, a#next:focus {
|
||||
background: var(--nav-bg);
|
||||
border-radius: 350px;
|
||||
opacity: 0.6;
|
||||
transition: .2s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.post_source {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 20ch;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*.embed-responsive-image img {
|
||||
animation: fadein 1.5s;
|
||||
}
|
||||
|
||||
.embed-responsive .embed-responsive-item, .embed-responsive video {
|
||||
animation: fadein 1.5s;
|
||||
}*/
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* logik überdenken sobald anderer player!*/
|
||||
video {
|
||||
background: black !important;
|
||||
}
|
||||
|
||||
audio::-webkit-media-controls{
|
||||
filter: invert(100%) contrast(2) opacity(95%) hue-rotate(180deg);
|
||||
}
|
||||
|
||||
audio::-webkit-media-controls-timeline {
|
||||
filter: contrast(0);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +0,0 @@
|
|||
* {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
|
@ -1,237 +0,0 @@
|
|||
body {
|
||||
margin: 0em auto 3em auto;
|
||||
background-color: #eeeeee;
|
||||
color: #fff;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3333cc;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #3d3dff;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
border: 2px solid #313370;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin: 0 auto;
|
||||
width: 888px;
|
||||
}
|
||||
|
||||
|
||||
.navbar {
|
||||
margin-top: 7px;
|
||||
color: #313370;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
border-bottom: 2px solid;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-weight: bold;
|
||||
background: #aaaacc;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
||||
input, select, textarea {
|
||||
border: 1px double #3333cc;
|
||||
background: #eeeeee;
|
||||
color: #3333cc;
|
||||
font-family: sans-serif;
|
||||
font-size: 80%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-bottom: 0;
|
||||
background-color: #aaaacc;
|
||||
border: 2px solid #313370;
|
||||
border-radius: 0px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
width: 25%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.contact {
|
||||
margin: 20px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.irc {
|
||||
margin: 20px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #3d3dff;
|
||||
}
|
||||
|
||||
.return {
|
||||
text-align: center;
|
||||
border-bottom: 2px solid #313370;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
background: #aaaacc;
|
||||
margin-bottom: 5px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.controls {
|
||||
text-align: center;
|
||||
color: #3333cc;
|
||||
font-weight: bold;
|
||||
width: 888px;
|
||||
margin: 0 auto;
|
||||
background: #aaaacc;
|
||||
padding-top: 0;
|
||||
border: 2px solid #313370;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.medium, .thumbnail {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 5px;
|
||||
background: #aaaacc;
|
||||
border: 2px solid #313370;
|
||||
}
|
||||
|
||||
.panel.info {
|
||||
margin: 0 auto;
|
||||
margin-top: 5px;
|
||||
float: none;
|
||||
width: 888px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large {
|
||||
background: #eeeeee;
|
||||
color: #3535cb;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.plyr--video .plyr__controls {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
padding: 0px 0px 0px;
|
||||
background: rgb(238, 238, 238);
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
color: #3535cb;
|
||||
transition: opacity .3s cubic-bezier(0.12, 0.63, 0.25, 1);
|
||||
}
|
||||
|
||||
span.plyr__time--current {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.plyr__progress--played, .plyr__volume--display {
|
||||
z-index: 1;
|
||||
color: #3535cb;
|
||||
background: 0 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.plyr--video .plyr__progress--buffer {
|
||||
color: rgb(49, 51, 112);
|
||||
}
|
||||
|
||||
.plyr--video .plyr__progress--buffer, .plyr--video .plyr__volume--display {
|
||||
background: rgb(170, 170, 204);
|
||||
}
|
||||
|
||||
.plyr--video .plyr__controls button.tab-focus:focus, .plyr--video .plyr__controls button:hover {
|
||||
background: #3535cb;
|
||||
color: #eeeeee;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.plyr input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
margin-top: -4px;
|
||||
position: relative;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: #eeeeee;
|
||||
border: 2px solid #3535cb;
|
||||
border-radius: 100%;
|
||||
transition: background .2s ease,border .2s ease,transform .2s ease;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.15);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plyr input[type=range]:active::-webkit-slider-thumb {
|
||||
background: #eeeeee;
|
||||
border-color: #3535cb;
|
||||
transform: scale(1.25)
|
||||
}
|
||||
|
||||
.plyr__controls button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
overflow: visible;
|
||||
vertical-align: middle;
|
||||
padding: 7px;
|
||||
border: 0;
|
||||
background: 0 0;
|
||||
border-radius: 0px;
|
||||
cursor: pointer;
|
||||
transition: background .3s ease,color .3s ease,opacity .3s ease;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Feuerfick */
|
||||
.plyr input[type="range"]::-moz-range-thumb {
|
||||
position: relative;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: #eeeeee;
|
||||
border: 2px solid #3535cb;
|
||||
border-radius: 100%;
|
||||
transition: background .2s ease, border .2s ease, transform .2s ease;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .15);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plyr input[type=range]:active::-moz-range-thumb {
|
||||
background: #eeeeee;
|
||||
border-color: #3535cb;
|
||||
transform: scale(1.25)
|
||||
}
|
||||
|
||||
/* Audio */
|
||||
.plyr--audio .plyr__controls {
|
||||
padding: 0;
|
||||
border-radius: inherit;
|
||||
background: #eeeeee;
|
||||
border: 0;
|
||||
color: #3333cc;
|
||||
width: 300px;
|
||||
padding-right: 5;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large {
|
||||
background: #3535cb;
|
||||
color: #eeeeee;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.plyr--audio .plyr__progress--buffer, .plyr--audio .plyr__volume--display {
|
||||
background: rgb(170, 170, 204);
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,187 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Space+Mono');
|
||||
|
||||
body {
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mudderfigg {
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.id {
|
||||
text-align: center;
|
||||
background: #262626;
|
||||
padding: 5px;
|
||||
border-radius: 0;
|
||||
color: white;
|
||||
vertical-align: baseline;
|
||||
border: 1px solid #99ff00;
|
||||
}
|
||||
|
||||
.id > a {
|
||||
color: #99ff00;
|
||||
}
|
||||
|
||||
|
||||
.panel {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
border-top: 2px dotted #99ff00;
|
||||
}
|
||||
|
||||
.panel.info {
|
||||
margin-top: 0px;
|
||||
width: 1200px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin: 0 auto;
|
||||
width: 1200px;
|
||||
border-left: 1px solid black;
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
|
||||
.medium, .thumbnail {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 0px;
|
||||
background: #484747;
|
||||
border: 0px solid #99ff00;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
border-bottom: 1px solid;
|
||||
width: 1200px;
|
||||
margin-top: 35px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
a#next, a#prev {
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
top: 0px;
|
||||
bottom: 932px;
|
||||
margin: unset;
|
||||
font-size: 18px;
|
||||
color: #99ff00;
|
||||
padding: 140px 40px 140px 40px;
|
||||
cursor: pointer;
|
||||
-webkit-transform: translateZ(0);
|
||||
align-content: inherit;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
a#next, a#prev {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
img.van {
|
||||
width: 171px;
|
||||
height: 28px;
|
||||
background-image: url(/s/img/f0ck_small.png);
|
||||
background-position: 0px -1px;
|
||||
border: 1px solid transparent;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
.van {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.navbar {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.return {
|
||||
padding: 0;
|
||||
margin-top: -35px;
|
||||
top: inherit;
|
||||
}
|
||||
|
||||
.audiojs {
|
||||
height: 360px;
|
||||
width: 640px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
border: unset;
|
||||
background: #262626;
|
||||
color: #f1e3ce;
|
||||
font-family: 'Space Mono', monospace;
|
||||
font-size: 99%;
|
||||
}
|
||||
|
||||
/* Blöde Box */
|
||||
/*body:after {
|
||||
content: "gemaked vong 1 spast, 1 nudelsuppe unt 1 hunt. hypfer isd doof.";
|
||||
position: fixed;
|
||||
background: #484747;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
color: #9f0;
|
||||
border-left: 1px solid black;
|
||||
border-top: 1px solid black;
|
||||
padding: 5px;
|
||||
}*/
|
||||
|
||||
.my-video-dimensions {
|
||||
width: 900px;
|
||||
height: auto;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
img#f0ck-image {
|
||||
max-width: 100%;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.vjs-audio.vjs-has-started .vjs-poster {
|
||||
display: block;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.vjs-poster {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
a#elfe {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
max-height: fit-content;
|
||||
max-height: -moz-fit-content;
|
||||
}
|
||||
|
||||
.return-how {
|
||||
position: unset;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.f0ckme {
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* RIP TERRY */
|
||||
.thumb[src="./t/34449.png"] {
|
||||
transition-duration: 0.2s;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
background-color: gold;
|
||||
border-width: medium;
|
||||
border-color: gold;
|
||||
font-size: 18px;
|
||||
font-style: italic;
|
||||
vertical-align: middle;
|
||||
height: 128px;
|
||||
}
|
||||
|
|
@ -1,197 +0,0 @@
|
|||
body {
|
||||
background-color: #0b0b0e;
|
||||
font-family: monospace;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
ul#posts {
|
||||
padding-top: 3.2em;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
border: 1px solid #1dadb04d;
|
||||
}
|
||||
|
||||
.id > a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #1dadb0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-shadow: 2px 1px 15px #1dadb0;
|
||||
color: #1dadb0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a#next, a#prev {
|
||||
color: #1dadb0;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
|
||||
border-bottom-color: currentcolor;
|
||||
border-bottom-style: none;
|
||||
border-bottom-width: 0px;
|
||||
background-color: #121212;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAA4GpVBAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90GBgMqHcZ0EYUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAF0lEQVQI12NgYGAwZsAECDEWBgYGBgYACpwAazfG694AAAAASUVORK5CYII=");
|
||||
color: #1dadb0;
|
||||
text-shadow: 0 1px 1px #000;
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid;
|
||||
box-shadow: 0 0 5px rgb(0, 0, 0);
|
||||
|
||||
}
|
||||
|
||||
.return {
|
||||
border-bottom-color: currentcolor;
|
||||
border-bottom-style: none;
|
||||
border-bottom-width: 0px;
|
||||
background-color: #121212;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAA4GpVBAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90GBgMqHcZ0EYUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAF0lEQVQI12NgYGAwZsAECDEWBgYGBgYACpwAazfG694AAAAASUVORK5CYII=");
|
||||
color: #1dadb0;
|
||||
text-shadow: 0 1px 1px #000;
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid;
|
||||
box-shadow: 0 0 5px rgb(0, 0, 0);
|
||||
margin-top: -55px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
border: 0;
|
||||
border-bottom-color: currentcolor;
|
||||
border-bottom-style: none;
|
||||
border-bottom-width: 0px;
|
||||
background-color: #121212;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAA4GpVBAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90GBgMqHcZ0EYUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAF0lEQVQI12NgYGAwZsAECDEWBgYGBgYACpwAazfG694AAAAASUVORK5CYII=");
|
||||
color: #1dadb0;
|
||||
text-shadow: 0 1px 1px #000;
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid;
|
||||
box-shadow: 0 0 5px rgb(0, 0, 0);
|
||||
margin-top: 55px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.medium {
|
||||
background-color: #121212;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAA4GpVBAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90GBgMqHcZ0EYUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAF0lEQVQI12NgYGAwZsAECDEWBgYGBgYACpwAazfG694AAAAASUVORK5CYII=");
|
||||
color: #1dadb0;
|
||||
text-shadow: 0 1px 1px #000;
|
||||
overflow: auto;
|
||||
box-shadow: 0 0 5px rgb(0, 0, 0);
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.panel.info {
|
||||
border-bottom-color: currentcolor;
|
||||
border-bottom-style: none;
|
||||
border-bottom-width: 0px;
|
||||
background-color: #121212;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAA4GpVBAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90GBgMqHcZ0EYUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAF0lEQVQI12NgYGAwZsAECDEWBgYGBgYACpwAazfG694AAAAASUVORK5CYII=");
|
||||
color: #1dadb0;
|
||||
text-shadow: 0 1px 1px #000;
|
||||
overflow: auto;
|
||||
box-shadow: 0 0 5px rgb(0, 0, 0);
|
||||
border: 0;
|
||||
margin-top: 10px;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
.id {
|
||||
background: #090909;
|
||||
background-image: none;
|
||||
color: #1dadb0;
|
||||
border: 0;
|
||||
align-self: center;
|
||||
font-size: 90%;
|
||||
border-radius: 5px;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAYAAAA4GpVBAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90GBgMqHcZ0EYUAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAF0lEQVQI12NgYGAwZsAECDEWBgYGBgYACpwAazfG694AAAAASUVORK5CYII=");
|
||||
box-shadow: 0 0 5px rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
img {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
border: 1px solid transparent;
|
||||
background: #090909;
|
||||
color: #1dadb0;
|
||||
font-family: 'Hack', monospace, sans-serif;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #1dadb0;
|
||||
padding: 5px;
|
||||
background: black;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
img.van {
|
||||
width: 276px;
|
||||
height: 45px;
|
||||
background-image: url(/s/img/f0xy.png);
|
||||
background-position: 0px -1px;
|
||||
border: 1px solid transparent;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.return > a {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.video-js .vjs-control-bar {
|
||||
background-color: #161618 !important;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.video-js .vjs-big-play-button {
|
||||
background-color: #1dadb04d;
|
||||
}
|
||||
|
||||
.video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus, .video-js .vjs-big-play-button:active {
|
||||
background-color: #1dadb0;
|
||||
}
|
||||
|
||||
.video-js .vjs-play-progress, .video-js .vjs-volume-level {
|
||||
background-color: #1dadb0;
|
||||
}
|
||||
|
||||
.video-js {
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.video-js .vjs-control:focus::before, .video-js .vjs-control:hover::before {
|
||||
text-shadow: 0px 0px 0.2em #fff,0 0 0.2em #262626,0 0 0.2em #262626;
|
||||
}
|
||||
|
||||
.video-js .vjs-loading-spinner {
|
||||
border-color: #1dadb0;
|
||||
}
|
||||
|
||||
div#my-video {
|
||||
border-radius: 0px;
|
||||
box-shadow: none;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
border: 2px solid #161618;
|
||||
}
|
||||
|
||||
.navbar > a {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
|
@ -1,181 +0,0 @@
|
|||
.thumb {
|
||||
border: 2px solid #ff008d;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0em auto 3em auto;
|
||||
background-color: #1b1a1a;
|
||||
color: #848484;
|
||||
font-family: Monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #ff008d;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
border: 1px double #ff008d;
|
||||
background: #2f2f2f;
|
||||
color: #ffffff;
|
||||
font-family: 'Hack', monospace, sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.return {
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
border-bottom: 2px solid #ff008d;
|
||||
margin-top: -55px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
text-align: center;
|
||||
color: #ff008d;
|
||||
font-weight: bold;
|
||||
width: 888px;
|
||||
margin: 0 auto;
|
||||
background: #484747;
|
||||
padding-top: 0;
|
||||
margin-top: 55px;
|
||||
border: 2px solid #ff008d;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-weight: bold;
|
||||
position: fixed;
|
||||
overflow: visible;
|
||||
z-index: 999;
|
||||
background-color: #484747;
|
||||
border-bottom: 2px solid #ff008d;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
color: #ff008d;
|
||||
}
|
||||
|
||||
.medium, .thumbnail {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 5px;
|
||||
background: #484747;
|
||||
border: 2px solid #ff008d;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
span.id {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
a#holland {
|
||||
color: #ff008d;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #ff008d;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-bottom: 0;
|
||||
background-color: rgb(72, 71, 71);
|
||||
border: 2px solid #ff008d;
|
||||
border-radius: 0px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
width: 25%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.plyr--audio .plyr__controls {
|
||||
padding: 0;
|
||||
border-radius: inherit;
|
||||
background: #1b1a1a;
|
||||
border: 0;
|
||||
color: #ff008d;
|
||||
width: 300px;
|
||||
padding-right: 5;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.plyr input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
margin-top: -4px;
|
||||
position: relative;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: #262626;
|
||||
border: 1px solid #ff008d;
|
||||
border-radius: 100%;
|
||||
transition: background .2s ease,border .2s ease,transform .2s ease;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.15);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plyr__progress--played, .plyr__volume--display {
|
||||
z-index: 1;
|
||||
color: #ff008d;
|
||||
background: 0 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large {
|
||||
background: #484747;
|
||||
color: #ff008d;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.plyr input[type=range]:active::-webkit-slider-thumb {
|
||||
background: #262626;
|
||||
border-color: #ff008d;
|
||||
transform: scale(1.25)
|
||||
}
|
||||
|
||||
.plyr--video .plyr__controls {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
padding: 0px 0px 0px;
|
||||
background: rgba(38, 38, 38, 0.97);
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
color: #ff008d;
|
||||
transition: opacity .3s cubic-bezier(0.12, 0.63, 0.25, 1);
|
||||
}
|
||||
|
||||
/* Feuerfick */
|
||||
.plyr input[type="range"]::-moz-range-thumb {
|
||||
position: relative;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: #ff008d;
|
||||
border: 2px solid #262626;
|
||||
border-radius: 100%;
|
||||
transition: background .2s ease, border .2s ease, transform .2s ease;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .15);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plyr input[type=range]:active::-moz-range-thumb {
|
||||
background: #ff008d;
|
||||
border-color: #262626;
|
||||
transform: scale(1.25)
|
||||
}
|
||||
|
||||
.plyr--video .plyr__controls button.tab-focus:focus, .plyr--video .plyr__controls button:hover {
|
||||
background: #484747;
|
||||
color: #ff008d;
|
||||
border-radius: 0;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,323 +0,0 @@
|
|||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0em auto 3em auto;
|
||||
background-color: #262626;
|
||||
color: #fff;
|
||||
font-family: Monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.42857143;
|
||||
}
|
||||
|
||||
.contact {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
border: 1px double #99ff00;
|
||||
background: #282A2E;
|
||||
color: #f1e3ce;
|
||||
font-family: 'Hack', monospace, sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
ul#posts {
|
||||
width: calc(100% - 210px);
|
||||
margin: 0;
|
||||
margin-left: 100px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
padding-top: 2.2em;
|
||||
}
|
||||
li.post {
|
||||
padding: 5px;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
margin-top: 5px;
|
||||
line-height: 128px;
|
||||
-webkit-flex: 1 1 auto;
|
||||
ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.thumb {
|
||||
border: 2px solid #4c4a4a;
|
||||
}
|
||||
.thumb:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.clear {
|
||||
clear: both;
|
||||
padding: 1em 0;
|
||||
}
|
||||
a {
|
||||
color: #9f0;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
color: #74c100;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.medium, .thumbnail {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 5px;
|
||||
background: #484747;
|
||||
border: 0px solid #99ff00;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.id {
|
||||
text-align: center;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
width: 888px;
|
||||
margin: 0 auto;
|
||||
padding-top: 0;
|
||||
margin-top: 35px;
|
||||
border: 0px solid #99ff00;
|
||||
color: #99ff00;
|
||||
background: #484747;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-weight: bold;
|
||||
position: fixed;
|
||||
overflow: visible;
|
||||
z-index: 999;
|
||||
background-color: #484747;
|
||||
border-bottom: 2px solid #99ff00;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.return {
|
||||
text-align: center;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 5px;
|
||||
margin-top: -35px;
|
||||
position: fixed;
|
||||
overflow: visible;
|
||||
z-index: 999;
|
||||
border-bottom: 1px solid #99ff00;
|
||||
padding: 5px;
|
||||
background: #484747;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.irc {
|
||||
margin: 20px;
|
||||
}
|
||||
code {
|
||||
color: #9df943;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-bottom: 0;
|
||||
background-color: #484747;
|
||||
border: 0px solid #99ff00;
|
||||
border-radius: 0px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
width: 25%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
color: #ffffff;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.panel.info {
|
||||
margin: 0 auto;
|
||||
margin-top: 5px;
|
||||
float: none;
|
||||
width: 888px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
max-height: 770px;
|
||||
border: 1px solid black;
|
||||
box-shadow: 0 0 5px #000;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin: 0 auto;
|
||||
width: 888px;
|
||||
}
|
||||
|
||||
video#player {
|
||||
max-width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
/* Plyr */
|
||||
.plyr--audio .plyr__controls {
|
||||
padding: 0;
|
||||
border-radius: inherit;
|
||||
background: #262626;
|
||||
border: 0;
|
||||
color: #99ff00;
|
||||
width: 300px;
|
||||
padding-right: 5;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.plyr audio, .plyr video {
|
||||
width: 100%;
|
||||
height: auto!important;
|
||||
vertical-align: middle;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
/* Video Player Style */
|
||||
.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large {
|
||||
background: #484747;
|
||||
color: #9f0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.plyr--video .plyr__controls {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
padding: 0px 0px 0px;
|
||||
background: rgba(38, 38, 38, 0.97);
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
color: #91ee06;
|
||||
transition: opacity .3s cubic-bezier(0.12, 0.63, 0.25, 1);
|
||||
}
|
||||
|
||||
.plyr {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
min-width: 200px;
|
||||
font-family: Avenir,'Avenir Next','Helvetica Neue','Segoe UI',Helvetica,Arial,sans-serif;
|
||||
direction: ltr;
|
||||
border: 1px solid #0c0d0c;
|
||||
box-shadow: 0 0 15px #000;
|
||||
}
|
||||
|
||||
.plyr--video .plyr__controls button.tab-focus:focus, .plyr--video .plyr__controls button:hover {
|
||||
background: #484747;
|
||||
color: #9f0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.plyr__progress--played, .plyr__volume--display {
|
||||
z-index: 1;
|
||||
color: #99ff00;
|
||||
background: 0 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.plyr input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
margin-top: -4px;
|
||||
position: relative;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: #262626;
|
||||
border: 1px solid #99ff00;
|
||||
border-radius: 100%;
|
||||
transition: background .2s ease,border .2s ease,transform .2s ease;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.15);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plyr input[type=range]:active::-webkit-slider-thumb {
|
||||
background: #262626;
|
||||
border-color: #99ff00;
|
||||
transform: scale(1.25)
|
||||
}
|
||||
|
||||
.plyr--fullscreen-active video {
|
||||
height: 100%!important;
|
||||
max-width: 100%!important;
|
||||
}
|
||||
|
||||
.plyr--fullscreen-active {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10000000;
|
||||
background: #000;
|
||||
border-radius: 0!important;
|
||||
border: 0!important;
|
||||
}
|
||||
|
||||
/* Feuerfick */
|
||||
.plyr input[type="range"]::-moz-range-thumb {
|
||||
position: relative;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background: #9f0;
|
||||
border: 2px solid #262626;
|
||||
border-radius: 100%;
|
||||
transition: background .2s ease, border .2s ease, transform .2s ease;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .15);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.plyr input[type=range]:active::-moz-range-thumb {
|
||||
background: #9f0;
|
||||
border-color: #262626;
|
||||
transform: scale(1.25)
|
||||
}
|
||||
|
||||
.savetheinternet {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.f0ckme {
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
pre {
|
||||
letter-spacing: 7px;
|
||||
}
|
||||
|
|
@ -1,277 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=VT323');
|
||||
|
||||
body {
|
||||
margin: 0em auto 3em auto;
|
||||
background-color: #040404;
|
||||
color: #fff;
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
span.id {
|
||||
color: #00DF00;
|
||||
text-shadow: 0 0 20px #00DF00;
|
||||
background: #040404;
|
||||
box-shadow: 0 0 7px 0px #00df00;
|
||||
border-radius: 5px;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
img.van {
|
||||
width: 171px;
|
||||
height: 28px;
|
||||
background-image: url(/s/img/term_f0ck_logo.png);
|
||||
background-position: 0px -1px;
|
||||
border: 1px solid transparent;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
.id > a {
|
||||
color: rgba(255,0,247,1);
|
||||
}
|
||||
|
||||
span.src>a {
|
||||
color: #ff00f7;
|
||||
text-shadow: 0 0 20px #ff00f7;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
border: 1px double #ff00f7;
|
||||
background: #282A2E;
|
||||
color: #f1e3ce;
|
||||
font-family: 'VT323', 'Courier', monospace;
|
||||
font-size: 80%;
|
||||
-moz-box-shadow: 0px 0px 37px 5px rgba(43,255,0,1);
|
||||
-webkit-box-shadow: 0px 0px 10px 0px rgba(255,0,247,1);
|
||||
-moz-box-shadow: 0px 0px 10px 0px rgba(255,0,247,1);
|
||||
box-shadow: 0px 0px 10px 0px rgba(255,0,247,1);
|
||||
}
|
||||
|
||||
.return {
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
color: #00DF00;
|
||||
text-shadow: 0 0 20px #00DF00;
|
||||
background: #0b0b0b;
|
||||
border-bottom: 2px solid #03dc03;
|
||||
margin-top: -35px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
text-align: center;
|
||||
color: #00d500;
|
||||
font-weight: bold;
|
||||
margin: 0 auto;
|
||||
background: #0b0b0b;
|
||||
padding-top: 0;
|
||||
margin-top: 35px;
|
||||
border: 2px solid #03dc03;
|
||||
}
|
||||
|
||||
.medium, .thumbnail {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 5px;
|
||||
background: #0b0b0b;
|
||||
border: 2px solid #03dc03;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
div#my-video {
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 20px #000000;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
a#elfe {
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
a#next {
|
||||
color: #00DF00;
|
||||
text-shadow: 0 0 20px #00DF00;
|
||||
}
|
||||
|
||||
a#random {
|
||||
color: #00DF00;
|
||||
text-shadow: 0 0 20px #00DF00;
|
||||
}
|
||||
|
||||
a#prev {
|
||||
color: #00DF00;
|
||||
text-shadow: 0 0 20px #00DF00;
|
||||
}
|
||||
|
||||
.panel {
|
||||
margin-bottom: 0;
|
||||
background-color: rgba(16, 16, 16, 0.61);
|
||||
border: 2px solid #0b842b;
|
||||
border-radius: 0px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
width: 25%;
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.thumb:hover {
|
||||
opacity: 0.7;
|
||||
-webkit-box-shadow: 0px 0px 6px 0px rgba(0,255,30,1)
|
||||
-moz-box-shadow: 0px 0px 6px 0px rgba(0,255,30,1);
|
||||
box-shadow: 0px 0px 6px 0px rgba(0,255,30,1);
|
||||
}
|
||||
|
||||
.thumb {
|
||||
border: 2px solid #00df00;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
font-weight: bold;
|
||||
position: fixed;
|
||||
overflow: visible;
|
||||
z-index: 999;
|
||||
background-color: #0b0b0b;
|
||||
border-bottom: 2px solid #00df00;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
color: #00df00;
|
||||
}
|
||||
|
||||
.navbar>a {
|
||||
color: rgba(43,255,0,1);
|
||||
text-shadow: 0 0 20px #00DF00;
|
||||
}
|
||||
|
||||
.navbar>a:hover {
|
||||
color: #00b700;
|
||||
}
|
||||
|
||||
.contact>a {
|
||||
color: rgba(43,255,0,1);
|
||||
text-shadow: 0 0 20px #00DF00;
|
||||
}
|
||||
|
||||
.contact>a:hover {
|
||||
color: #00b700;
|
||||
}
|
||||
|
||||
code {
|
||||
color: rgba(43,255,0,1);
|
||||
text-shadow: 0 0 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00df00;
|
||||
text-shadow: 0 0 20px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #00b700;
|
||||
}
|
||||
|
||||
.plyr__progress--played, .plyr__volume--display {
|
||||
z-index: 1;
|
||||
color: #00df00;
|
||||
background: 0 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
select#themeSelector {
|
||||
color: #00DF00;
|
||||
text-shadow: 0 0 20px #00DF00;
|
||||
background: #040404;
|
||||
border-radius: 0;
|
||||
border: unset;
|
||||
box-shadow: unset;
|
||||
padding-bottom: 3px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
border: #00df00;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin: 0 auto;
|
||||
border-left: 0px solid black;
|
||||
border-right: 0px solid black;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
box-shadow: 0px 0px 20px 0px black;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border-top: 0px;
|
||||
}
|
||||
|
||||
.panel.info {
|
||||
border: 0;
|
||||
border-left: 2px solid #03dc03;
|
||||
border-right: 2px solid #03dc03;
|
||||
border-bottom: 2px solid #03dc03;
|
||||
}
|
||||
|
||||
.options {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.video-js .vjs-loading-spinner {
|
||||
border-color: #03dc03;
|
||||
}
|
||||
|
||||
.video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before {
|
||||
text-shadow: 0 0 0.8em #03dc03, 0 0 0.8em #03dc03, 0 0 0.8em #03dc03;
|
||||
}
|
||||
|
||||
.video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before, .video-js .vjs-control:focus {
|
||||
text-shadow: 0 0 1em #03dc03;
|
||||
}
|
||||
|
||||
.video-js .vjs-control-bar {
|
||||
background-color: rgba(4, 4, 4, 0.82) !important;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.video-js .vjs-control-bar {
|
||||
background-color: rgba(4, 4, 4, 0.82) !important;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
i.fa.fa-cog {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.video-js .vjs-play-progress, .video-js .vjs-volume-level {
|
||||
background-color: #03dc03;
|
||||
box-shadow: 0 0 20px 0px #01de01;
|
||||
}
|
||||
|
||||
.video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus, .video-js .vjs-big-play-button:active {
|
||||
background-color: #00df00;
|
||||
box-shadow: 0 0 10px 0px #00df00;
|
||||
}
|
||||
|
||||
.video-js.vjs-fullscreen, .video-js.vjs-fullscreen .vjs-tech {
|
||||
margin-bottom: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
197
public/s/css/v0ck.css
Normal file
197
public/s/css/v0ck.css
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
.v0ck {
|
||||
position: relative;
|
||||
font-size: 0;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.v0ck_fullscreen {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.v0ck_fullscreen video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.v0ck_video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.v0ck_overlay {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.v0ck_overlay > svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
filter: drop-shadow(0 0 9px var(--accent));
|
||||
stroke: var(--accent);
|
||||
stroke-width: 20px;
|
||||
}
|
||||
|
||||
.v0ck_player_button {
|
||||
background: none;
|
||||
border: 0;
|
||||
line-height: 1;
|
||||
color: white;
|
||||
text-align: center;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
margin: 2px;
|
||||
cursor: pointer;
|
||||
min-width: 40px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.v0ck_player_button.v0ck_tplay > svg {
|
||||
height: 17px;
|
||||
}
|
||||
.v0ck_player_button svg:hover {
|
||||
filter: drop-shadow(0 0 9px var(--accent));
|
||||
fill: #000;
|
||||
stroke: var(--accent);
|
||||
stroke-width: 30px;
|
||||
}
|
||||
|
||||
.v0ck_hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: #fff;
|
||||
stroke: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.v0ck_player_controls {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
transform: translateY(100%) translateY(-2px);
|
||||
transition: all .5s;
|
||||
flex-wrap: wrap;
|
||||
z-index: 2;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.v0ck:hover .v0ck_player_controls, .v0ck_paused .v0ck_player_controls {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.v0ck:hover .v0ck_progress, .v0ck_paused .v0ck_progress {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.v0ck_player_controls > * {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.v0ck_progress {
|
||||
flex: 10;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-basis: 100%;
|
||||
height: 5px;
|
||||
transition: height 0.4s;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.v0ck_progress_filled {
|
||||
width: 50%;
|
||||
background: var(--accent);
|
||||
flex: 0;
|
||||
flex-basis: 0%;
|
||||
}
|
||||
|
||||
.v0ck_player_controls > input[type="range"][name="volume"]::after {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
text-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5);
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.v0ck_player_controls > input[type="range"][name="volume"] {
|
||||
position: relative;
|
||||
height: 5px;
|
||||
margin: auto;
|
||||
-webkit-appearance: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
max-width: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
transition: all .6s;
|
||||
}
|
||||
|
||||
.v0ck_player_controls:hover > input[type="range"][name="volume"] {
|
||||
min-width: 70px;
|
||||
max-width: 70px;
|
||||
}
|
||||
|
||||
.v0ck_player_controls > input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.v0ck_player_button.v0ck_playtime {
|
||||
max-width: none;
|
||||
cursor: default;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.v0ck_player_controls > input[type="range"][name="volume"]::-webkit-slider-runnable-track {
|
||||
background-color: rgb(65, 65, 65);
|
||||
}
|
||||
|
||||
.v0ck_player_controls > input[type="range"][name="volume"]::-moz-range-track {
|
||||
height: 5px;
|
||||
background-color: rgb(65, 65, 65);
|
||||
}
|
||||
|
||||
.v0ck_player_controls > input[type="range"][name="volume"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
background: var(--accent);
|
||||
height: 5px;
|
||||
width: 0.1px;
|
||||
border: 0;
|
||||
box-shadow: -100vw 0 0 100vw var(--accent);
|
||||
}
|
||||
|
||||
.v0ck_player_controls > input[type="range"][name="volume"]::-moz-range-thumb {
|
||||
background: var(--accent);
|
||||
height: 5px;
|
||||
width: 0.1px;
|
||||
border: 0;
|
||||
box-shadow: -100vw 0 0 100vw var(--accent);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.v0ck_player_controls > input[type="range"][name="volume"],
|
||||
.v0ck_player_button.v0ck_volume {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
1
public/s/css/video-js.min.css
vendored
1
public/s/css/video-js.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,276 +0,0 @@
|
|||
.video-js .vjs-menu-button-inline.vjs-slider-active,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline:hover,.video-js.vjs-no-flex .vjs-menu-button-inline {
|
||||
width: 10em
|
||||
}
|
||||
|
||||
.video-js .vjs-controls-disabled .vjs-big-play-button {
|
||||
display: none!important
|
||||
}
|
||||
|
||||
.video-js .vjs-control {
|
||||
width: 3em
|
||||
}
|
||||
|
||||
.video-js .vjs-menu-button-inline:before {
|
||||
width: 1.5em
|
||||
}
|
||||
|
||||
.vjs-menu-button-inline .vjs-menu {
|
||||
left: 3em
|
||||
}
|
||||
|
||||
.vjs-paused.vjs-has-started.video-js .vjs-big-play-button,.video-js.vjs-ended .vjs-big-play-button,.video-js.vjs-paused .vjs-big-play-button {
|
||||
display: block
|
||||
}
|
||||
|
||||
.video-js .vjs-load-progress div,.vjs-seeking .vjs-big-play-button,.vjs-waiting .vjs-big-play-button {
|
||||
display: none!important
|
||||
}
|
||||
|
||||
.video-js .vjs-mouse-display:after,.video-js .vjs-play-progress:after {
|
||||
padding: 0 .4em .3em
|
||||
}
|
||||
|
||||
.video-js.vjs-ended .vjs-loading-spinner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.video-js.vjs-ended .vjs-big-play-button {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.video-js *,.video-js:after,.video-js:before {
|
||||
box-sizing: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
line-height: inherit
|
||||
}
|
||||
|
||||
.video-js.vjs-fullscreen,.video-js.vjs-fullscreen .vjs-tech {
|
||||
width: 100%!important;
|
||||
height: 100%!important
|
||||
}
|
||||
|
||||
.video-js {
|
||||
font-size: 14px;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.video-js .vjs-control {
|
||||
color: inherit
|
||||
}
|
||||
|
||||
.video-js .vjs-menu-button-inline:hover,.video-js.vjs-no-flex .vjs-menu-button-inline {
|
||||
width: 8.35em
|
||||
}
|
||||
|
||||
.video-js .vjs-volume-menu-button.vjs-volume-menu-button-horizontal:hover .vjs-menu .vjs-menu-content {
|
||||
height: 3em;
|
||||
width: 6.35em
|
||||
}
|
||||
|
||||
.video-js .vjs-control:focus:before,.video-js .vjs-control:hover:before {
|
||||
text-shadow: 0 0 1em #fff,0 0 1em #fff,0 0 1em #fff
|
||||
}
|
||||
|
||||
.video-js .vjs-spacer,.video-js .vjs-time-control {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-flex: 1 1 auto;
|
||||
-moz-box-flex: 1 1 auto;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto
|
||||
}
|
||||
|
||||
.video-js .vjs-time-control {
|
||||
-webkit-box-flex: 0 1 auto;
|
||||
-moz-box-flex: 0 1 auto;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
width: auto
|
||||
}
|
||||
|
||||
.video-js .vjs-time-control.vjs-time-divider {
|
||||
width: 14px
|
||||
}
|
||||
|
||||
.video-js .vjs-time-control.vjs-time-divider div {
|
||||
width: 100%;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.video-js .vjs-time-control.vjs-current-time {
|
||||
margin-left: 1em
|
||||
}
|
||||
|
||||
.video-js .vjs-time-control .vjs-current-time-display,.video-js .vjs-time-control .vjs-duration-display {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.video-js .vjs-time-control .vjs-current-time-display {
|
||||
text-align: right
|
||||
}
|
||||
|
||||
.video-js .vjs-time-control .vjs-duration-display {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.video-js .vjs-play-progress:before,.video-js .vjs-progress-control .vjs-play-progress:before,.video-js .vjs-remaining-time,.video-js .vjs-volume-level:after,.video-js .vjs-volume-level:before,.video-js.vjs-live .vjs-time-control.vjs-current-time,.video-js.vjs-live .vjs-time-control.vjs-duration,.video-js.vjs-live .vjs-time-control.vjs-time-divider,.video-js.vjs-no-flex .vjs-time-control.vjs-remaining-time {
|
||||
display: none
|
||||
}
|
||||
|
||||
.video-js.vjs-no-flex .vjs-time-control {
|
||||
display: table-cell;
|
||||
width: 4em
|
||||
}
|
||||
|
||||
.video-js .vjs-progress-control {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: .5em;
|
||||
top: -.5em
|
||||
}
|
||||
|
||||
.video-js .vjs-progress-control .vjs-load-progress,.video-js .vjs-progress-control .vjs-play-progress,.video-js .vjs-progress-control .vjs-progress-holder {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.video-js .vjs-progress-control .vjs-progress-holder {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.video-js .vjs-progress-control:hover {
|
||||
height: 1.5em;
|
||||
top: -1.5em
|
||||
}
|
||||
|
||||
.video-js .vjs-control-bar {
|
||||
-webkit-transition: -webkit-transform .1s ease 0s;
|
||||
-moz-transition: -moz-transform .1s ease 0s;
|
||||
-ms-transition: -ms-transform .1s ease 0s;
|
||||
-o-transition: -o-transform .1s ease 0s;
|
||||
transition: transform .1s ease 0s
|
||||
}
|
||||
|
||||
.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-control-bar,.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-control-bar,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-control-bar,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar,.video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-transform: translateY(3em);
|
||||
-moz-transform: translateY(3em);
|
||||
-ms-transform: translateY(3em);
|
||||
-o-transform: translateY(3em);
|
||||
transform: translateY(3em);
|
||||
-webkit-transition: -webkit-transform 1s ease 0s;
|
||||
-moz-transition: -moz-transform 1s ease 0s;
|
||||
-ms-transition: -ms-transform 1s ease 0s;
|
||||
-o-transition: -o-transform 1s ease 0s;
|
||||
transition: transform 1s ease 0s
|
||||
}
|
||||
|
||||
.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control,.video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control {
|
||||
height: .25em;
|
||||
top: -.25em;
|
||||
pointer-events: none;
|
||||
-webkit-transition: height 1s,top 1s;
|
||||
-moz-transition: height 1s,top 1s;
|
||||
-ms-transition: height 1s,top 1s;
|
||||
-o-transition: height 1s,top 1s;
|
||||
transition: height 1s,top 1s
|
||||
}
|
||||
|
||||
.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active.vjs-fullscreen .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive.vjs-fullscreen .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active.vjs-fullscreen .vjs-progress-control,.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control,.video-js.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 1s ease 1s;
|
||||
-moz-transition: opacity 1s ease 1s;
|
||||
-ms-transition: opacity 1s ease 1s;
|
||||
-o-transition: opacity 1s ease 1s;
|
||||
transition: opacity 1s ease 1s
|
||||
}
|
||||
|
||||
.video-js.vjs-live .vjs-live-control {
|
||||
margin-left: 1em
|
||||
}
|
||||
|
||||
.video-js .vjs-big-play-button {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -1em;
|
||||
margin-top: -1em;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
font-size: 3.5em;
|
||||
background-color: rgba(0,0,0,.45);
|
||||
color: #fff;
|
||||
-webkit-transition: border-color .4s,outline .4s,background-color .4s;
|
||||
-moz-transition: border-color .4s,outline .4s,background-color .4s;
|
||||
-ms-transition: border-color .4s,outline .4s,background-color .4s;
|
||||
-o-transition: border-color .4s,outline .4s,background-color .4s;
|
||||
transition: border-color .4s,outline .4s,background-color .4s
|
||||
}
|
||||
|
||||
.video-js .vjs-menu-button-popup .vjs-menu {
|
||||
left: -3em
|
||||
}
|
||||
|
||||
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
|
||||
background-color: transparent;
|
||||
width: 12em;
|
||||
left: -1.5em;
|
||||
padding-bottom: .5em
|
||||
}
|
||||
|
||||
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item,.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-title {
|
||||
background-color: #151b17;
|
||||
margin: .3em 0;
|
||||
padding: .5em;
|
||||
border-radius: .3em
|
||||
}
|
||||
|
||||
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected {
|
||||
background-color: #2483d5
|
||||
}
|
||||
|
||||
.video-js .vjs-big-play-button {
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
font-size: 2.5em;
|
||||
border-radius: 20%;
|
||||
height: 1.4em !important;
|
||||
line-height: 1.4em !important;
|
||||
margin-top: -0.7em !important
|
||||
}
|
||||
|
||||
.video-js:hover .vjs-big-play-button,.video-js .vjs-big-play-button:focus,.video-js .vjs-big-play-button:active {
|
||||
background-color: #99ff00
|
||||
}
|
||||
|
||||
.video-js .vjs-loading-spinner {
|
||||
border-color: #99ff00
|
||||
}
|
||||
|
||||
.video-js .vjs-control-bar2 {
|
||||
background-color: #262626
|
||||
}
|
||||
|
||||
.video-js .vjs-control-bar {
|
||||
background-color: #262626 !important;
|
||||
color: #ffffff;
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
.video-js .vjs-play-progress,.video-js .vjs-volume-level {
|
||||
background-color: #99ff00
|
||||
}
|
||||
|
||||
.video-js .vjs-load-progress {
|
||||
background: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Orbitron');
|
||||
|
||||
body {
|
||||
background: black;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
|
||||
.navbar, .return {
|
||||
background-color: #000000;
|
||||
border-bottom: 2px solid #f50083;
|
||||
box-shadow: 0px -2px 20px #f600c1;
|
||||
}
|
||||
|
||||
img.van {
|
||||
width: 171px;
|
||||
height: 28px;
|
||||
background-image: url(/s/img/x34_f0ck_logo.png);
|
||||
background-position: 0px -1px;
|
||||
border: 1px solid transparent;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
a, a:hover {
|
||||
color: #f50083;
|
||||
text-shadow: 0px 0px 10px #f50083;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
box-shadow: 0 0 10px #f50083;
|
||||
border: 2px solid #f50083;
|
||||
}
|
||||
|
||||
.return {
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-top: 50px;
|
||||
background: #050505;
|
||||
border: 1px solid #f50083;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
border-left: 1px solid #f50083;
|
||||
border-right: 1px solid #f50083;
|
||||
}
|
||||
|
||||
.panel.info {
|
||||
border: 1px solid #f50083;
|
||||
}
|
||||
|
||||
.medium, .thumbnail {
|
||||
background: #050505;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background-color: #050505;
|
||||
}
|
||||
|
||||
.id {
|
||||
background: #000000;
|
||||
border: 1px solid #f50083;
|
||||
}
|
||||
|
||||
a#next, a#prev {
|
||||
color: #f50083;
|
||||
}
|
||||
|
||||
.id > a {
|
||||
color: #f50083;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
background: #000000;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
|
||||
.video-js .vjs-play-progress, .video-js .vjs-volume-level {
|
||||
background-color: #f50083;
|
||||
}
|
||||
|
||||
.video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus, .video-js .vjs-big-play-button:active {
|
||||
background-color: #f50083;
|
||||
}
|
||||
|
||||
.video-js .vjs-control-bar {
|
||||
background-color: #000000 !important;
|
||||
}
|
||||
BIN
public/s/img/music.webp
Normal file
BIN
public/s/img/music.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 634 KiB |
|
|
@ -1 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="plyr-captions-off" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd" fill-opacity=".5"/></symbol><symbol id="plyr-captions-on" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd"/></symbol><symbol id="plyr-enter-fullscreen" viewBox="0 0 18 18"><path d="M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"/></symbol><symbol id="plyr-exit-fullscreen" viewBox="0 0 18 18"><path d="M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"/></symbol><symbol id="plyr-fast-forward" viewBox="0 0 18 18"><path d="M7.875 7.171L0 1v16l7.875-6.171V17L18 9 7.875 1z"/></symbol><symbol id="plyr-muted" viewBox="0 0 18 18"><path d="M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol><symbol id="plyr-pause" viewBox="0 0 18 18"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM12 1c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"/></symbol><symbol id="plyr-play" viewBox="0 0 18 18"><path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"/></symbol><symbol id="plyr-restart" viewBox="0 0 18 18"><path d="M9.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6 2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9l-6.3-.7z"/></symbol><symbol id="plyr-rewind" viewBox="0 0 18 18"><path d="M10.125 1L0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"/></symbol><symbol id="plyr-volume" viewBox="0 0 18 18"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"/><path d="M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-.992-.319-2.005-1.522-3.208a.909.909 0 0 0-1.316 0zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol></svg>
|
||||
|
Before Width: | Height: | Size: 3.7 KiB |
16
public/s/img/v0ck.svg
Normal file
16
public/s/img/v0ck.svg
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
|
||||
<defs>
|
||||
<symbol id="pause" viewBox="0 0 448 512"><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z"/></symbol>
|
||||
<symbol id="play" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"/></symbol>
|
||||
<symbol id="fullscreen" viewBox="0 0 448 512"><path d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"/></symbol>
|
||||
<symbol id="backward" viewBox="0 0 512 512"><path d="M11.5 280.6l192 160c20.6 17.2 52.5 2.8 52.5-24.6V96c0-27.4-31.9-41.8-52.5-24.6l-192 160c-15.3 12.8-15.3 36.4 0 49.2zm256 0l192 160c20.6 17.2 52.5 2.8 52.5-24.6V96c0-27.4-31.9-41.8-52.5-24.6l-192 160c-15.3 12.8-15.3 36.4 0 49.2z"/></symbol>
|
||||
<symbol id="forward" viewBox="0 0 512 512"><path d="M500.5 231.4l-192-160C287.9 54.3 256 68.6 256 96v320c0 27.4 31.9 41.8 52.5 24.6l192-160c15.3-12.8 15.3-36.4 0-49.2zm-256 0l-192-160C31.9 54.3 0 68.6 0 96v320c0 27.4 31.9 41.8 52.5 24.6l192-160c15.3-12.8 15.3-36.4 0-49.2z"/></symbol>
|
||||
<symbol id="volume_mute" viewBox="0 0 512 512"><path d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM461.64 256l45.64-45.64c6.3-6.3 6.3-16.52 0-22.82l-22.82-22.82c-6.3-6.3-16.52-6.3-22.82 0L416 210.36l-45.64-45.64c-6.3-6.3-16.52-6.3-22.82 0l-22.82 22.82c-6.3 6.3-6.3 16.52 0 22.82L370.36 256l-45.63 45.63c-6.3 6.3-6.3 16.52 0 22.82l22.82 22.82c6.3 6.3 16.52 6.3 22.82 0L416 301.64l45.64 45.64c6.3 6.3 16.52 6.3 22.82 0l22.82-22.82c6.3-6.3 6.3-16.52 0-22.82L461.64 256z"/></symbol>
|
||||
<symbol id="volume_mid" viewBox="0 0 384 512"><path d="M215.03 72.04L126.06 161H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V89.02c0-21.47-25.96-31.98-40.97-16.98zm123.2 108.08c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 229.28 336 242.62 336 257c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.87z"/></symbol>
|
||||
<symbol id="volume_full" viewBox="0 0 500 512"><path d="M232.35938,64.009766 c -0.39117,-0.0089 -0.78371,-0.0083 -1.17579,0.002 -5.70289,0.149548 -11.46367,2.348437 -16.15429,7.039062 L 126.06055,160 H 24 C 10.74,160 0,170.74 0,184 v 144 c 0,13.25 10.74,24 24,24 h 102.06055 l 88.96875,88.94922 c 15.03,15.03 40.9707,4.47125 40.9707,-16.96875 V 88.019531 C 256,73.726836 244.48559,64.2867 232.35938,64.009766 Z m 149.5,31.99414 c -8.10621,-0.16023 -16.09723,3.814342 -20.75,11.216794 -7.09002,11.28 -3.77985,26.20938 7.41015,33.35938 C 408.2695,165.97008 432,209.11 432,256 c 0,46.89 -23.73047,90.02992 -63.48047,115.41992 -11.19,7.14 -14.50015,22.06938 -7.41015,33.35938 6.50999,10.36 21.12109,15.14093 33.12109,7.46093 C 447.94047,377.94023 480,319.54 480,256 480,192.47 447.94047,134.05977 394.23047,99.759766 c -3.84656,-2.454375 -8.125,-3.67193 -12.37109,-3.75586 z m -55.03126,80.173824 c -8.5099,-0.0456 -16.79523,4.42047 -21.20898,12.40235 -6.39,11.61 -2.15883,26.19937 9.45117,32.60937 C 327.98028,228.27945 336,241.63 336,256 c 0,14.38 -8.01992,27.72055 -20.91992,34.81055 -11.61,6.41 -15.83922,20.99937 -9.44922,32.60937 6.43,11.66 21.04937,15.79922 32.60937,9.44922 28.23,-15.55 45.76954,-44.99891 45.76954,-76.87891 0,-31.88 -17.5393,-61.31937 -45.7793,-76.85937 -3.61875,-1.97813 -7.53414,-2.9324 -11.40235,-2.95313 z"/></symbol>
|
||||
<symbol id="ol_play" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"/></symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
2
public/s/js/bootstrap-native.min.js
vendored
2
public/s/js/bootstrap-native.min.js
vendored
File diff suppressed because one or more lines are too long
109
public/s/js/f0ck.js
Normal file
109
public/s/js/f0ck.js
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
(() => {
|
||||
if(elem = document.querySelector("#my-video")) {
|
||||
const video = new v0ck(elem);
|
||||
}
|
||||
|
||||
let tt = false;
|
||||
const stimeout = 500;
|
||||
const changePage = (e, pbwork = true) => {
|
||||
pbwork && document.querySelector("nav.navbar").classList.add("pbwork");
|
||||
!tt && (tt = setTimeout(() => e.click(), stimeout));
|
||||
};
|
||||
|
||||
// <keybindings>
|
||||
const clickOnElementBinding = selector => () => (elem = document.querySelector(selector)) ? elem.click() : null;
|
||||
const keybindings = {
|
||||
"ArrowLeft": clickOnElementBinding("#next"),
|
||||
"d": clickOnElementBinding("#next"),
|
||||
"ArrowRight": clickOnElementBinding("#prev"),
|
||||
"a": clickOnElementBinding("#prev"),
|
||||
"r": clickOnElementBinding("#random")
|
||||
};
|
||||
document.addEventListener("keydown", e => {
|
||||
if(e.key in keybindings) {
|
||||
e.preventDefault();
|
||||
keybindings[e.key]();
|
||||
}
|
||||
});
|
||||
// </keybindings>
|
||||
|
||||
// <image-responsive>
|
||||
if(f0ckimage = document.querySelector("#f0ck-image")) {
|
||||
f0ckimage.addEventListener("click", e => {
|
||||
e.preventDefault();
|
||||
f0ckimage.hasAttribute("style")
|
||||
? f0ckimage.removeAttribute("style")
|
||||
: f0ckimage.setAttribute("style", "max-height: none; height: auto; width: 100%; position: absolute; left: 0;");
|
||||
});
|
||||
}
|
||||
// </image-responsive>
|
||||
|
||||
// <scroll-event-adder>
|
||||
if(f0ckimagescroll = document.querySelector("#image-scroll")) {
|
||||
f0ckimagescroll.addEventListener("click", e => {
|
||||
e.preventDefault();
|
||||
f0ckimagescroll.hasAttribute("style")
|
||||
? f0ckimagescroll.removeAttribute("style")
|
||||
: f0ckimagescroll.setAttribute("style", "overflow-y: scroll");
|
||||
});
|
||||
}
|
||||
// </scroll-event-adder>
|
||||
|
||||
// <scroller>
|
||||
if(document.querySelector("ul#posts")) {
|
||||
document.addEventListener("wheel", e => {
|
||||
if((window.innerHeight + window.scrollY) >= document.body.offsetHeight && e.deltaY > 0) {
|
||||
if(elem = document.querySelector(".pagination > .next:not(.disabled)"))
|
||||
changePage(elem);
|
||||
}
|
||||
else if(window.scrollY <= 0 && e.deltaY < 0) {
|
||||
if(elem = document.querySelector(".pagination > .prev:not(.disabled)"))
|
||||
changePage(elem);
|
||||
}
|
||||
});
|
||||
}
|
||||
// </scroller>
|
||||
|
||||
// <swipe>
|
||||
let lastTap = 0;
|
||||
let xDown = null;
|
||||
let yDown = null;
|
||||
document.addEventListener('touchstart', e => {
|
||||
const firstTouch = (e.touches ?? e.originalEvent.touches)[0];
|
||||
xDown = firstTouch.clientX;
|
||||
yDown = firstTouch.clientY;
|
||||
|
||||
const currentTime = new Date().getTime();
|
||||
const tapLength = currentTime - lastTap;
|
||||
if(tapLength < 500 && tapLength > 0)
|
||||
if(elem = document.querySelector("#random"))
|
||||
changePage(elem);
|
||||
lastTap = currentTime;
|
||||
}, false);
|
||||
|
||||
document.addEventListener('touchmove', e => {
|
||||
if(!xDown || !yDown)
|
||||
return;
|
||||
const xDiff = xDown - e.touches[0].clientX;
|
||||
const yDiff = yDown - e.touches[0].clientY;
|
||||
let elem = false;
|
||||
if(Math.abs(xDiff) > Math.abs(yDiff)) {
|
||||
if(xDiff > 0) // left
|
||||
elem = document.querySelector(".pagination > .next:not(.disabled)");
|
||||
else // right
|
||||
elem = document.querySelector(".pagination > .prev:not(.disabled)");
|
||||
}
|
||||
else {
|
||||
if(navbar = document.querySelector("nav.navbar") && document.querySelector("ul#posts")) {
|
||||
if(yDiff > 0 && (window.innerHeight + window.scrollY) >= document.body.offsetHeight) // up
|
||||
elem = document.querySelector(".pagination > .next:not(.disabled)");
|
||||
else if(yDiff <= 0 && window.scrollY <= 0 && document.querySelector("ul#posts")) // down
|
||||
elem = document.querySelector(".pagination > .prev:not(.disabled)");
|
||||
}
|
||||
}
|
||||
if(elem)
|
||||
changePage(elem);
|
||||
xDown = yDown = null;
|
||||
}, false);
|
||||
// </swipe>
|
||||
})();
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
const epochs = [
|
||||
["year", 31536000],
|
||||
["month", 2592000],
|
||||
["day", 86400],
|
||||
["hour", 3600],
|
||||
["minute", 60],
|
||||
["second", 1]
|
||||
];
|
||||
const getDuration = timeAgoInSeconds => {
|
||||
for(let [name, seconds] of epochs) {
|
||||
const interval = ~~(timeAgoInSeconds / seconds);
|
||||
if(interval >= 1) return {
|
||||
interval: interval,
|
||||
epoch: name
|
||||
};
|
||||
}
|
||||
};
|
||||
const timeAgo = date => {
|
||||
const { interval, epoch } = getDuration(~~((new Date() - new Date(date)) / 1000));
|
||||
return `${interval} ${epoch}${interval === 1 ? "" : "s"} ago`;
|
||||
};
|
||||
const clickOnElementBinding = selector => () => (elem = document.querySelector(selector))?elem.click():null;
|
||||
const keybindings = {
|
||||
"ArrowLeft": clickOnElementBinding("#next"),
|
||||
"ArrowRight": clickOnElementBinding("#prev"),
|
||||
"r": clickOnElementBinding("#random")
|
||||
};
|
||||
|
||||
(() => {
|
||||
if(video = document.querySelector(".video-js")) {
|
||||
const vid1 = videojs(video);
|
||||
vid1.persistvolume({
|
||||
namespace: "f0ck"
|
||||
});
|
||||
if(vid1.autoplay() && !vid1.paused() && vid1.hasClass("vjs-paused")) {
|
||||
vid1.pause();
|
||||
vid1.play();
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll("time.timeago").forEach(e => e.innerHTML = timeAgo(e.title));
|
||||
|
||||
document.addEventListener("keydown", e => {
|
||||
if(e.key in keybindings) {
|
||||
e.preventDefault();
|
||||
keybindings[e.key]();
|
||||
}
|
||||
});
|
||||
|
||||
if(f0ckimage = document.querySelector("#f0ck-image"))
|
||||
f0ckimage.addEventListener("click", e => {
|
||||
e.preventDefault();
|
||||
f0ckimage.hasAttribute("style")?f0ckimage.removeAttribute("style"):f0ckimage.setAttribute("style", "max-height: unset;");
|
||||
});
|
||||
})();
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
let load = false;
|
||||
(() => {
|
||||
const posts = document.querySelector("#posts");
|
||||
if(posts) {
|
||||
document.addEventListener("wheel", e => {
|
||||
if((((document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop + window.innerHeight) + 310
|
||||
>= ((document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight)) && !load) {
|
||||
load = true;
|
||||
fetch(`./api/v1/p/${posts.dataset.last}`)
|
||||
.then(res => res.json())
|
||||
.then((msg, html = "") => {
|
||||
for(let i = 0; i < msg.items.length; i++)
|
||||
if(msg.items[i].id)
|
||||
html += `<li class="post"><a href="./${msg.items[i].id}" title="${msg.items[i].mime}"><img class="thumb" src="./t/${msg.items[i].id}.png" onerror="this.onerror=null;this.src='/s/img/mp3.png';" /></a></li>\n`;
|
||||
posts.insertAdjacentHTML("beforeend", html);
|
||||
posts.dataset.last = msg.last;
|
||||
load = false;
|
||||
})
|
||||
.catch(err => console.log(err));
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
|
@ -1,97 +1,22 @@
|
|||
/* Thanks to StephenLynx, I modified his Theme Changer from the Penumbra Lynx Frontend for the Lynxchan Software https://gitgud.io/LynxChan/LynxChan and reused it to make f0ck a nicer place. */
|
||||
var themes = [ {
|
||||
file : 'f0ck95.css',
|
||||
label : 'f0ck95',
|
||||
id : 'f0ck95'
|
||||
}];
|
||||
|
||||
let interval = null;
|
||||
const clocklol = () => {
|
||||
const l = document.querySelector("body");
|
||||
if(localStorage.selectedTheme && localStorage.selectedTheme === "f0ck95")
|
||||
interval = setInterval((d = new Date()) => l.setAttribute("data-clock", d.toLocaleTimeString()), 1e3);
|
||||
else {
|
||||
clearInterval(interval);
|
||||
l.removeAttribute("data-clock");
|
||||
(() => {
|
||||
const themes = [ 'f0ck', 'p1nk', 'orange', 'amoled' ];
|
||||
const acttheme = localStorage.getItem('theme') ?? "f0ck";
|
||||
document.documentElement.setAttribute("theme", acttheme);
|
||||
if(themecontainer = document.querySelector("#themes")) {
|
||||
const sb = document.createElement("select");
|
||||
sb.id = "themeselector";
|
||||
themes.forEach(o => {
|
||||
const option = document.createElement("option");
|
||||
option.text = o;
|
||||
if(acttheme === o)
|
||||
option.selected = true;
|
||||
sb.add(option);
|
||||
});
|
||||
themecontainer.insertAdjacentElement("afterend", sb);
|
||||
sb.addEventListener("change", e => {
|
||||
const s = e.target.options[e.target.selectedIndex].innerText;
|
||||
document.documentElement.setAttribute("theme", s);
|
||||
localStorage.setItem("theme", s);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const speaker = () => {
|
||||
const k = document.querySelector("body");
|
||||
if(localStorage.selectedTheme && localStorage.selectedTheme === "f0ck95")
|
||||
k.document.createElement("div");
|
||||
else
|
||||
return;
|
||||
};
|
||||
|
||||
var customCss;
|
||||
var addedTheme;
|
||||
function updateCss() {
|
||||
if (addedTheme) {
|
||||
addedTheme.parentNode.removeChild(addedTheme);
|
||||
addedTheme = null;
|
||||
}
|
||||
for (var i = 0; i < themes.length; i++) {
|
||||
var theme = themes[i];
|
||||
if (theme.id === localStorage.selectedTheme) {
|
||||
addedTheme = theme.element;
|
||||
document.head.insertBefore(theme.element, customCss);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < document.head.children.length; i++) {
|
||||
var element = document.head.children[i];
|
||||
if (element.rel === 'stylesheet' && element.href.indexOf('/css/custom.css') > -1) {
|
||||
customCss = element;
|
||||
break;
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < themes.length; i++) {
|
||||
themes[i].element = document.createElement('link');
|
||||
themes[i].element.type = 'text/css';
|
||||
themes[i].element.rel = 'stylesheet';
|
||||
themes[i].element.href = './s/css/' + themes[i].file;
|
||||
}
|
||||
|
||||
clocklol();
|
||||
updateCss();
|
||||
var postingLink = document.getElementById('themes');
|
||||
if (postingLink) {
|
||||
var divider = document.createElement('span');
|
||||
divider.style = ('display: none;');
|
||||
divider.innerHTML = '';
|
||||
var referenceNode = postingLink.nextSibling;
|
||||
postingLink.parentNode.insertBefore(divider, referenceNode);
|
||||
var themeSelector = document.createElement('select');
|
||||
themeSelector.id = 'themeSelector';
|
||||
var vanillaOption = document.createElement('option');
|
||||
vanillaOption.innerHTML = 'Default';
|
||||
themeSelector.appendChild(vanillaOption);
|
||||
for (i = 0; i < themes.length; i++) {
|
||||
var theme = themes[i];
|
||||
var themeOption = document.createElement('option');
|
||||
themeOption.innerHTML = theme.label;
|
||||
if (theme.id === localStorage.selectedTheme) {
|
||||
themeOption.selected = true;
|
||||
}
|
||||
themeSelector.appendChild(themeOption);
|
||||
}
|
||||
themeSelector.onchange = function() {
|
||||
if (!themeSelector.selectedIndex) {
|
||||
if (localStorage.selectedTheme) {
|
||||
delete localStorage.selectedTheme;
|
||||
clocklol();
|
||||
updateCss();
|
||||
}
|
||||
return;
|
||||
}
|
||||
var selectedTheme = themes[themeSelector.selectedIndex - 1];
|
||||
if (selectedTheme.id === localStorage.selectedTheme) {
|
||||
return;
|
||||
}
|
||||
localStorage.selectedTheme = selectedTheme.id;
|
||||
clocklol();
|
||||
updateCss();
|
||||
};
|
||||
postingLink.parentNode.insertBefore(themeSelector, referenceNode);
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
172
public/s/js/v0ck.js
Normal file
172
public/s/js/v0ck.js
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
const tpl_player = svg => `<div class="v0ck_player_controls">
|
||||
<div class="v0ck_progress">
|
||||
<div class="v0ck_progress_filled"></div>
|
||||
</div>
|
||||
<button class="v0ck_player_button v0ck_tplay v0ck_toggle" title="Play">
|
||||
<svg style="width: 20px; height: 20px;">
|
||||
<use id="v0ck_svg_play" href="${svg}#play"></use>
|
||||
<use id="v0ck_svg_pause" class="v0ck_hidden" href="${svg}#pause"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="v0ck_player_button v0ck_volume">
|
||||
<svg style="width: 20px; height: 20px;">
|
||||
<use id="v0ck_svg_volume_full" href="${svg}#volume_full"></use>
|
||||
<use id="v0ck_svg_volume_mid" class="v0ck_hidden" href="${svg}#volume_mid"></use>
|
||||
<use id="v0ck_svg_volume_mute" class="v0ck_hidden" href="${svg}#volume_mute"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<input type="range" name="volume" min="0" max="1" step="0.05" value="1" />
|
||||
<button class="v0ck_player_button v0ck_playtime">00:00 / 00:00</button>
|
||||
<span style="flex: 30"></span>
|
||||
<button data-skip="-10" class="v0ck_player_button">
|
||||
<svg style="width: 20px; height: 20px;"><use id="v0ck_svg_backward" href="${svg}#backward"></use></svg>
|
||||
</button>
|
||||
<button data-skip="10" class="v0ck_player_button">
|
||||
<svg style="width: 20px; height: 20px;"><use id="v0ck_svg_forward" href="${svg}#forward"></use></svg>
|
||||
</button>
|
||||
<button class="v0ck_player_button v0ck_toggle v0ck_fullscreen" title="Full Screen">
|
||||
<svg style="width: 20px; height: 20px;"><use id="v0ck_svg_fullscreen" href="${svg}#fullscreen"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="v0ck_overlay v0ck_hidden">
|
||||
<svg><use id="v0ck_svg_ol_play" href="${svg}#ol_play"></use></svg>
|
||||
</div>`;
|
||||
|
||||
class v0ck {
|
||||
constructor(elem) {
|
||||
const tagName = elem.tagName.toLowerCase();
|
||||
if(["video", "audio"].includes(tagName)) {
|
||||
const parent = elem.parentElement;
|
||||
parent.classList.add("v0ck", "paused");
|
||||
elem.classList.add("v0ck_video", "viewer");
|
||||
document.head.insertAdjacentHTML("beforeend", `<link rel="stylesheet" href="/s/css/v0ck.css">`); // inject css
|
||||
elem.insertAdjacentHTML("afterend", tpl_player("/s/img/v0ck.svg"));
|
||||
|
||||
if(tagName === "audio" && elem.hasAttribute('poster')) { // set cover
|
||||
const player = document.querySelector('.v0ck');
|
||||
player.style.backgroundImage = `url('${elem.getAttribute('poster')}')`;
|
||||
}
|
||||
}
|
||||
else
|
||||
return console.error("nope");
|
||||
this.init(elem);
|
||||
}
|
||||
|
||||
init(elem) {
|
||||
const player = document.querySelector('.v0ck');
|
||||
const video = elem;
|
||||
video.removeAttribute('autoplay');
|
||||
video.removeAttribute('controls');
|
||||
const progress = player.querySelector('.v0ck_progress');
|
||||
const progressBar = player.querySelector('.v0ck_progress_filled');
|
||||
const toggle = player.querySelector('.v0ck_toggle');
|
||||
const skipButtons = player.querySelectorAll('.v0ck [data-skip]');
|
||||
const ranges = player.querySelectorAll('.v0ck input[type="range"]');
|
||||
const volumeSlider = player.querySelector('.v0ck input[type="range"][name="volume"]');
|
||||
const fullscreen = player.querySelector('.v0ck_fullscreen');
|
||||
const playtime = player.querySelector('.v0ck_playtime');
|
||||
const overlay = player.querySelector('.v0ck_overlay');
|
||||
const volumeButton = player.querySelector('.v0ck_volume');
|
||||
const volumeSymbols = volumeButton.querySelectorAll('.v0ck use');
|
||||
|
||||
const defaultVolume = 0.5;
|
||||
let mousedown = false;
|
||||
let _volume;
|
||||
|
||||
function handleVolumeButton(vol) {
|
||||
[...volumeSymbols].forEach(s => !s.classList.contains('v0ck_hidden') ? s.classList.add('v0ck_hidden') : null);
|
||||
switch(true) {
|
||||
case(vol === 0): [...volumeSymbols].filter(s => s.id === "v0ck_svg_volume_mute")[0].classList.toggle('v0ck_hidden'); break;
|
||||
case(vol <= 0.5 && vol > 0): [...volumeSymbols].filter(s => s.id === "v0ck_svg_volume_mid")[0].classList.toggle('v0ck_hidden'); break;
|
||||
case(vol > 0.5): [...volumeSymbols].filter(s => s.id === "v0ck_svg_volume_full")[0].classList.toggle('v0ck_hidden'); break;
|
||||
}
|
||||
localStorage.setItem("volume", vol);
|
||||
}
|
||||
function togglePlay() {
|
||||
const status = video[video.paused ? 'play' : 'pause']();
|
||||
if(status !== undefined) { // todo: merge with updatePlayIcon
|
||||
status
|
||||
.then(_ => {
|
||||
overlay.classList[video.paused ? 'remove' : 'add']('v0ck_hidden');
|
||||
})
|
||||
.catch(err => {
|
||||
overlay.classList.toggle('v0ck_hidden');
|
||||
});
|
||||
}
|
||||
else
|
||||
overlay.classList[video.paused ? 'remove' : 'add']('v0ck_hidden');
|
||||
}
|
||||
function updatePlayIcon() {
|
||||
toggle.classList.toggle('playing');
|
||||
player.classList.toggle('paused');
|
||||
toggle.setAttribute('title', toggle.classList.contains('playing') ? 'Pause' : 'Play');
|
||||
[...toggle.querySelectorAll('use')].forEach(icon => icon.classList.toggle('v0ck_hidden'));
|
||||
}
|
||||
function toggleMute(e) {
|
||||
if(video.volume === 0)
|
||||
video.volume = volumeSlider.value = _volume === 0 ? defaultVolume : _volume;
|
||||
else {
|
||||
_volume = video.volume;
|
||||
video.volume = volumeSlider.value = 0;
|
||||
}
|
||||
handleVolumeButton(video.volume);
|
||||
}
|
||||
function skip() {
|
||||
video.currentTime += +this.dataset.skip;
|
||||
}
|
||||
function handleRangeUpdate() {
|
||||
video[this.name] = this.value;
|
||||
_volume = video.volume;
|
||||
handleVolumeButton(video.volume);
|
||||
}
|
||||
function formatTime(seconds) {
|
||||
const minutes = (~~(seconds / 60)).toString().padStart(2, "0");
|
||||
seconds = (~~(seconds % 60)).toString().padStart(2, "0");
|
||||
return minutes + ":" + seconds;
|
||||
}
|
||||
function handleProgress() {
|
||||
const percent = (video.currentTime / video.duration) * 100;
|
||||
progressBar.style.flexBasis = percent + '%';
|
||||
playtime.innerText = `${formatTime(video.currentTime)} / ${formatTime(video.duration)}`;
|
||||
}
|
||||
function scrub(e) {
|
||||
video.currentTime = (e.offsetX / progress.offsetWidth) * video.duration;
|
||||
}
|
||||
function toggleFullScreen(e) {
|
||||
if(document.fullscreenElement)
|
||||
document.exitFullscreen();
|
||||
else
|
||||
player.requestFullscreen();
|
||||
}
|
||||
function toggleFullScreenClasses() {
|
||||
player.classList.toggle('fullscreen');
|
||||
}
|
||||
|
||||
player.addEventListener('click', e => {
|
||||
const path = e.path || (e.composedPath && e.composedPath());
|
||||
if(!path.filter(f => f.classList?.contains('v0ck_player_controls')).length)
|
||||
togglePlay(e);
|
||||
});
|
||||
toggle.addEventListener('click', togglePlay);
|
||||
video.addEventListener('play', updatePlayIcon);
|
||||
video.addEventListener('pause', updatePlayIcon);
|
||||
video.addEventListener('timeupdate', handleProgress);
|
||||
volumeButton.addEventListener('click', toggleMute);
|
||||
skipButtons.forEach(button => button.addEventListener('click', skip));
|
||||
ranges.forEach(range => range.addEventListener('change', handleRangeUpdate));
|
||||
ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate));
|
||||
progress.addEventListener('click', scrub);
|
||||
progress.addEventListener('mousemove', e => mousedown && scrub(e));
|
||||
progress.addEventListener('mousedown', () => mousedown = true);
|
||||
progress.addEventListener('mouseup', () => mousedown = false);
|
||||
fullscreen.addEventListener('click', toggleFullScreen);
|
||||
document.addEventListener('fullscreenchange', toggleFullScreenClasses);
|
||||
document.addEventListener('mozfullscreenchange', toggleFullScreenClasses);
|
||||
document.addEventListener('webkitfullscreenchange', toggleFullScreenClasses);
|
||||
document.addEventListener('msfullscreenchange', toggleFullScreenClasses);
|
||||
|
||||
video.volume = _volume = volumeSlider.value = +(localStorage.getItem('volume') ?? defaultVolume);
|
||||
handleVolumeButton(video.volume);
|
||||
togglePlay();
|
||||
}
|
||||
}
|
||||
25
public/s/js/video.min.js
vendored
25
public/s/js/video.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,123 +0,0 @@
|
|||
"use strict";
|
||||
(function(factory){
|
||||
/*!
|
||||
* Custom Universal Module Definition (UMD)
|
||||
*
|
||||
* Video.js will never be a non-browser lib so we can simplify UMD a bunch and
|
||||
* still support requirejs and browserify. This also needs to be closure
|
||||
* compiler compatible, so string keys are used.
|
||||
*/
|
||||
if (typeof define === 'function' && define['amd']) {
|
||||
define(['./video'], function(vjs){ factory(window, document, vjs) });
|
||||
// checking that module is an object too because of umdjs/umd#35
|
||||
} else if (typeof exports === 'object' && typeof module === 'object') {
|
||||
factory(window, document, require('video.js'));
|
||||
} else {
|
||||
factory(window, document, videojs);
|
||||
}
|
||||
|
||||
})(function(window, document, vjs) {
|
||||
//cookie functions from https://developer.mozilla.org/en-US/docs/DOM/document.cookie
|
||||
var
|
||||
getCookieItem = function(sKey) {
|
||||
if (!sKey || !hasCookieItem(sKey)) { return null; }
|
||||
var reg_ex = new RegExp(
|
||||
"(?:^|.*;\\s*)" +
|
||||
window.escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") +
|
||||
"\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"
|
||||
);
|
||||
return window.unescape(document.cookie.replace(reg_ex,"$1"));
|
||||
},
|
||||
|
||||
setCookieItem = function(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
|
||||
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return; }
|
||||
var sExpires = "";
|
||||
if (vEnd) {
|
||||
switch (vEnd.constructor) {
|
||||
case Number:
|
||||
sExpires = vEnd === Infinity ? "; expires=Tue, 19 Jan 2038 03:14:07 GMT" : "; max-age=" + vEnd;
|
||||
break;
|
||||
case String:
|
||||
sExpires = "; expires=" + vEnd;
|
||||
break;
|
||||
case Date:
|
||||
sExpires = "; expires=" + vEnd.toGMTString();
|
||||
break;
|
||||
}
|
||||
}
|
||||
document.cookie =
|
||||
window.escape(sKey) + "=" +
|
||||
window.escape(sValue) +
|
||||
sExpires +
|
||||
(sDomain ? "; domain=" + sDomain : "") +
|
||||
(sPath ? "; path=" + sPath : "") +
|
||||
(bSecure ? "; secure" : "");
|
||||
},
|
||||
|
||||
hasCookieItem = function(sKey) {
|
||||
return (new RegExp(
|
||||
"(?:^|;\\s*)" +
|
||||
window.escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") +
|
||||
"\\s*\\=")
|
||||
).test(document.cookie);
|
||||
},
|
||||
|
||||
hasLocalStorage = function() {
|
||||
try {
|
||||
window.localStorage.setItem('persistVolume', 'persistVolume');
|
||||
window.localStorage.removeItem('persistVolume');
|
||||
return true;
|
||||
} catch(e) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
getStorageItem = function(key) {
|
||||
return hasLocalStorage() ? window.localStorage.getItem(key) : getCookieItem(key);
|
||||
},
|
||||
setStorageItem = function(key, value) {
|
||||
return hasLocalStorage() ? window.localStorage.setItem(key, value) : setCookieItem(key, value, Infinity, '/');
|
||||
},
|
||||
|
||||
extend = function(obj) {
|
||||
var arg, i, k;
|
||||
for (i = 1; i < arguments.length; i++) {
|
||||
arg = arguments[i];
|
||||
for (k in arg) {
|
||||
if (arg.hasOwnProperty(k)) {
|
||||
obj[k] = arg[k];
|
||||
}
|
||||
}
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
|
||||
defaults = {
|
||||
namespace: ""
|
||||
},
|
||||
|
||||
volumePersister = function(options) {
|
||||
var player = this;
|
||||
var settings = extend({}, defaults, options || {});
|
||||
|
||||
var key = settings.namespace + '-' + 'volume';
|
||||
var muteKey = settings.namespace + '-' + 'mute';
|
||||
|
||||
player.on("volumechange", function() {
|
||||
setStorageItem(key, player.volume());
|
||||
setStorageItem(muteKey, player.muted());
|
||||
});
|
||||
|
||||
var persistedVolume = getStorageItem(key);
|
||||
if(persistedVolume !== null){
|
||||
player.volume(persistedVolume);
|
||||
}
|
||||
|
||||
var persistedMute = getStorageItem(muteKey);
|
||||
if(persistedMute !== null){
|
||||
player.muted('true' === persistedMute);
|
||||
}
|
||||
};
|
||||
|
||||
vjs.plugin("persistvolume", volumePersister);
|
||||
|
||||
});
|
||||
5
src/inc/config.mjs
Normal file
5
src/inc/config.mjs
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import _config from "../../config.json";
|
||||
|
||||
let config = JSON.parse(JSON.stringify(_config));
|
||||
|
||||
export default config;
|
||||
|
|
@ -1,3 +1,21 @@
|
|||
const epochs = [
|
||||
["year", 31536000],
|
||||
["month", 2592000],
|
||||
["day", 86400],
|
||||
["hour", 3600],
|
||||
["minute", 60],
|
||||
["second", 1]
|
||||
];
|
||||
const getDuration = timeAgoInSeconds => {
|
||||
for(let [name, seconds] of epochs) {
|
||||
const interval = ~~(timeAgoInSeconds / seconds);
|
||||
if(interval >= 1) return {
|
||||
interval: interval,
|
||||
epoch: name
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
export default new class {
|
||||
formatSize(size, i = ~~(Math.log(size) / Math.log(1024))) {
|
||||
return (size / Math.pow(1024, i)).toFixed(2) * 1 + " " + ["B", "kB", "MB", "GB", "TB"][i];
|
||||
|
|
@ -5,4 +23,8 @@ export default new class {
|
|||
calcSpeed(b, s) {
|
||||
return (Math.round((b * 8 / s / 1e6) * 1e4) / 1e4);
|
||||
}
|
||||
timeAgo(date) {
|
||||
const { interval, epoch } = getDuration(~~((new Date() - new Date(date)) / 1e3));
|
||||
return `${interval} ${epoch}${interval === 1 ? "" : "s"} ago`;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
114
src/inc/routes/apiv2.mjs
Normal file
114
src/inc/routes/apiv2.mjs
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
import router from "../router.mjs";
|
||||
import sql from "../sql.mjs";
|
||||
import { parse } from "url";
|
||||
import cfg from "../../../config.json";
|
||||
|
||||
import { mimes, queries } from "./inc/apiv2.mjs";
|
||||
|
||||
router.get("/api/v2", (req, res) => {
|
||||
res.end("api lol");
|
||||
});
|
||||
|
||||
router.get(/^\/api\/v2\/random(\/user\/.+|\/image|\/video|\/audio)?$/, async (req, res) => {
|
||||
const args = [];
|
||||
let q = queries.random.main;
|
||||
|
||||
if(req.url.split[3] === "user") {
|
||||
q += queries.random.where("username like ?");
|
||||
args.push(req.url.split[4] || "flummi");
|
||||
}
|
||||
else
|
||||
q += queries.random.where(mimes[req.url.split[3]] ? mimes[req.url.split[3]].map(mime => `mime = "${mime}"`).join(" or ") : null);
|
||||
|
||||
try {
|
||||
const rows = await sql.query(q, args);
|
||||
res
|
||||
.writeHead(200, { "Content-Type": "application/json" })
|
||||
.end(JSON.stringify(rows.length > 0 ? rows[0] : []), "utf-8");
|
||||
} catch(err) {
|
||||
res
|
||||
.writeHead(500)
|
||||
.end(JSON.stringify(err), "utf-8");
|
||||
}
|
||||
});
|
||||
|
||||
router.get("/api/v2/p", async (req, res) => {
|
||||
let id = parseInt(req.url.qs.id) || 99999999;
|
||||
const eps = Math.min(parseInt(req.url.qs.eps) || 100, 200);
|
||||
let [ order, trend ] = req.url.qs.order === "asc" ? [ "asc", ">" ] : [ "desc", "<" ];
|
||||
|
||||
try {
|
||||
const tmp = (await sql.query("select min(id) as min, max(id) as max from items limit 1"))[0];
|
||||
if((id - 1 + eps) > tmp.max) {
|
||||
id = tmp.max;
|
||||
[ order, trend ] = [ "desc", "<=" ];
|
||||
}
|
||||
if((id + 1 - eps) < tmp.min) {
|
||||
id = tmp.min;
|
||||
[ order, trend ] = [ "asc", ">=" ];
|
||||
}
|
||||
|
||||
const rows = await sql.query(queries.p(trend, order), [ id, eps ]);
|
||||
const items = {
|
||||
items: rows,
|
||||
first: rows[0].id,
|
||||
last: rows[rows.length - 1].id,
|
||||
newest: tmp.max,
|
||||
oldest: tmp.min
|
||||
};
|
||||
res
|
||||
.writeHead(200, { "Content-Type": "application/json" })
|
||||
.end(JSON.stringify(items), "utf-8");
|
||||
} catch(err) {
|
||||
console.error(err);
|
||||
res
|
||||
.writeHead(500)
|
||||
.end(JSON.stringify(err), "utf-8");
|
||||
}
|
||||
});
|
||||
|
||||
router.get(/^\/api\/v2\/p\/([0-9]+)/, async (req, res) => { // legacy
|
||||
let eps = 100;
|
||||
let id = +req.url.split[3];
|
||||
|
||||
const query = await sql.query("select * from items where id < ? order by id desc limit ?", [ id, eps ]);
|
||||
const items = {
|
||||
items: query,
|
||||
last: query[query.length - 1].id
|
||||
};
|
||||
|
||||
res.writeHead(200, { "Content-Type": "application/json" });
|
||||
res.end(JSON.stringify(items), "utf-8");
|
||||
});
|
||||
|
||||
router.get(/^\/api\/v2\/item\/[0-9]+$/, async (req, res) => {
|
||||
try {
|
||||
const rows = await sql.query(queries.item, Array(3).fill(req.url.split[3]));
|
||||
res.reply({
|
||||
type: "application/json",
|
||||
body: JSON.stringify(rows?.shift() || [])
|
||||
});
|
||||
} catch(err) {
|
||||
res.reply({
|
||||
code: 500,
|
||||
body: JSON.stringify(err)
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
router.get(/^\/api\/v2\/user\/.*(\/[0-9]+)?$/, async (req, res) => { // auf qs umstellen
|
||||
const user = req.url.split[3];
|
||||
const eps = Math.min(req.url.split[4] || 50, 50);
|
||||
try {
|
||||
const rows = await sql.query(queries.user, [ user, eps ]);
|
||||
res.reply({
|
||||
type: "application/json",
|
||||
body: JSON.stringify(rows.length > 0 ? rows : [])
|
||||
});
|
||||
} catch(err) {
|
||||
res.reply({
|
||||
code: 500,
|
||||
body: JSON.stringify(err)
|
||||
});
|
||||
}
|
||||
});
|
||||
18
src/inc/routes/inc/apiv2.mjs
Normal file
18
src/inc/routes/inc/apiv2.mjs
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
export const mimes = {
|
||||
image: [ "image/png", "image/gif", "image/jpeg" ],
|
||||
video: [ "video/webm", "video/mp4", "video/quicktime" ],
|
||||
audio: [ "audio/mpeg", "audio/flac", "audio/x-flac", "audio/ogg" ]
|
||||
};
|
||||
|
||||
export const queries = {
|
||||
random: {
|
||||
main: "select id, mime, size, username, userchannel, usernetwork, stamp, dest, src from items ",
|
||||
where: where => `${where?`where ${where}`:""} order by rand() limit 1`
|
||||
},
|
||||
item: "select id, mime, dest, size, src, stamp, userchannel, username, usernetwork, "
|
||||
+ "(select id from items where id = (select min(id) from items where id > ?)) as next, "
|
||||
+ "(select id from items where id = (select max(id) from items where id < ?)) as prev "
|
||||
+ "from items where items.id = ? limit 1",
|
||||
p: (trend, order) => `select id, mime from items where id ${trend} ? order by id ${order} limit ?`,
|
||||
user: "select id, mime, size, src, stamp, userchannel, username, usernetwork from items where username = ? limit ?"
|
||||
};
|
||||
|
|
@ -1,6 +1,12 @@
|
|||
export const queries = {
|
||||
item: "select items.*, "
|
||||
+ "(select id from items where id = (select min(id) from items where id > ?)) as next, "
|
||||
+ "(select id from items where id = (select max(id) from items where id < ?)) as prev "
|
||||
+ "from items where items.id = ? limit 1"
|
||||
export const mimes = {
|
||||
image: [ "image/png", "image/gif", "image/jpeg" ],
|
||||
video: [ "video/webm", "video/mp4", "video/quicktime" ],
|
||||
audio: [ "audio/mpeg", "audio/flac", "audio/x-flac", "audio/ogg" ]
|
||||
};
|
||||
|
||||
export const queries = {
|
||||
random: {
|
||||
main: "select id, mime, size, username, userchannel, usernetwork, stamp, dest, src from items ",
|
||||
where: where => `${where?`where ${where}`:""} order by rand() limit 1`
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,22 +2,28 @@ import router from "../router.mjs";
|
|||
import cfg from "../../../config.json";
|
||||
import url from "url";
|
||||
import fs from "fs";
|
||||
import { queries } from "./inc/index.mjs";
|
||||
import { mimes } from "./inc/index.mjs";
|
||||
import sql from "../sql.mjs";
|
||||
import lib from "../lib.mjs";
|
||||
import tpl from "../tpl.mjs";
|
||||
|
||||
tpl.readdir("views");
|
||||
|
||||
router.get(/\/(p\/\d+)?$/, async (req, res) => {
|
||||
router.get(/^\/(audio\/?|image\/?|video\/?)?(p\/\d+)?$/, async (req, res) => {
|
||||
try {
|
||||
const total = (await sql.query("select count(*) as total from items"))[0].total;
|
||||
const limit = 299;
|
||||
const pages = +Math.ceil(total / limit);
|
||||
const page = Math.min(pages, +req.url.split[1] || 1);
|
||||
const offset = (page - 1) * limit;
|
||||
let mime = false;
|
||||
let q = false;
|
||||
if(['audio', 'image', 'video'].includes(req.url.split[0])) {
|
||||
mime = req.url.split[0];
|
||||
q = " where " + (mimes[mime] ? mimes[mime].map(_mime => `mime = "${_mime}"`).join(" or ") : null);
|
||||
}
|
||||
|
||||
const query = await sql.query("select id, mime from items order by id desc limit ?, ?", [ offset, limit ]);
|
||||
const total = (await sql.query("select count(*) as total from items" + (mime ? q : "")))[0].total;
|
||||
const pages = +Math.ceil(total / cfg.websrv.eps);
|
||||
const page = Math.min(pages, +req.url.split[mime ? 2 : 1] || 1);
|
||||
const offset = (page - 1) * cfg.websrv.eps;
|
||||
|
||||
const query = await sql.query(`select id, mime from items ${mime ? q : ""} order by id desc limit ?, ?`, [ offset, cfg.websrv.eps ]);
|
||||
|
||||
let cheat = [];
|
||||
for(let i = Math.max(1, page - 3); i <= Math.min(page + 3, pages); i++)
|
||||
|
|
@ -37,27 +43,49 @@ router.get(/\/(p\/\d+)?$/, async (req, res) => {
|
|||
next: (page < pages) ? page + 1 : null,
|
||||
page: page,
|
||||
cheat: cheat,
|
||||
link: "/p/"
|
||||
link: `/${mime ? mime + "/" : ""}p/`
|
||||
},
|
||||
last: query[query.length - 1].id
|
||||
last: query[query.length - 1].id,
|
||||
filter: mime ? mime : undefined
|
||||
};
|
||||
|
||||
res.reply({ body: tpl.render("views/index", data) });
|
||||
} catch(err) {
|
||||
res.reply({ body: "error :(" });
|
||||
console.log(err);
|
||||
res.reply({ body: "sorry bald wieder da lol :(" });
|
||||
}
|
||||
});
|
||||
|
||||
router.get(/^\/([0-9]+)$/, async (req, res) => {
|
||||
const query = (await sql.query(queries.item, Array(3).fill(req.url.split[0])))?.shift();
|
||||
const qmax = (await sql.query("select id from items order by id desc limit 1"))[0].id;
|
||||
router.get(/^\/((audio\/|video\/|image\/)?[0-9]+)$/, async (req, res) => {
|
||||
let id = false;
|
||||
let mime = false;
|
||||
let q = false;
|
||||
|
||||
if(['audio', 'video', 'image'].includes(req.url.split[0])) {
|
||||
mime = req.url.split[0];
|
||||
id = +req.url.split[1];
|
||||
q = mimes[mime] ? mimes[mime].map(_mime => `mime = "${_mime}"`).join(" or ") : null;
|
||||
}
|
||||
else
|
||||
id = +req.url.split[0];
|
||||
|
||||
const query = (await sql.query(`select items.* from items where items.id = ? ${mime ? "and ("+q+")" : ""} limit 1`, [ id ]))?.shift();
|
||||
|
||||
if(!query?.id)
|
||||
return res.redirect("/404");
|
||||
|
||||
let cheat = [];
|
||||
for(let i = Math.min(query.id + 3, qmax); i >= Math.max(1, query.id - 3); i--)
|
||||
cheat.push(i);
|
||||
const tags = (await sql.query(`select tags.tag from tags_assign left join tags on tags.id = tags_assign.tag_id where tags_assign.item_id = ?`, [ id ]));
|
||||
|
||||
const qmin = (await sql.query(`select id from items ${mime ? "where "+q : ""} order by id asc limit 1`))[0].id;
|
||||
const qmax = (await sql.query(`select id from items ${mime ? "where "+q : ""} order by id desc limit 1`))[0].id;
|
||||
|
||||
const qnext = (await sql.query(`select id from items where id > ? ${mime ? "and ("+q+")" : ""} order by id asc limit 3`, [ id ])).reverse();
|
||||
const qprev = (await sql.query(`select id from items where id < ? ${mime ? "and ("+q+")" : ""} order by id desc limit 3`, [ id ]));
|
||||
|
||||
const cheat = qnext.concat([{ id: id }].concat(qprev)).map(e => +e.id);
|
||||
|
||||
const next = qnext[qnext.length - 1] ? qnext[qnext.length - 1].id : false;
|
||||
const prev = qprev[0] ? qprev[0].id : false;
|
||||
|
||||
const data = {
|
||||
user: {
|
||||
|
|
@ -72,23 +100,24 @@ router.get(/^\/([0-9]+)$/, async (req, res) => {
|
|||
short: url.parse(query.src).hostname,
|
||||
},
|
||||
thumbnail: `${cfg.websrv.paths.thumbnails}/${query.id}.png`,
|
||||
coverart: `${cfg.websrv.paths.coverarts}/${query.id}.png`,
|
||||
dest: `${cfg.websrv.paths.images}/${query.dest}`,
|
||||
mime: query.mime,
|
||||
size: lib.formatSize(query.size),
|
||||
timestamp: new Date(query.stamp * 1000).toISOString()
|
||||
timestamp: lib.timeAgo(new Date(query.stamp * 1000).toISOString()),
|
||||
tags: tags
|
||||
},
|
||||
next: query.next ? query.next : null,
|
||||
prev: query.prev ? query.prev : null,
|
||||
title: `${query.id} - f0ck.me`,
|
||||
pagination: {
|
||||
start: qmax,
|
||||
end: 1,
|
||||
prev: query.id + 1,
|
||||
next: Math.max(query.id - 1, 1),
|
||||
end: qmin,
|
||||
prev: next,
|
||||
next: prev,
|
||||
page: query.id,
|
||||
cheat: cheat,
|
||||
link: "/"
|
||||
}
|
||||
link: `/${mime ? mime + "/" : ""}`
|
||||
},
|
||||
filter: mime ? mime : undefined
|
||||
};
|
||||
res.reply({ body: tpl.render("views/item", data) });
|
||||
});
|
||||
|
|
@ -96,7 +125,3 @@ router.get(/^\/([0-9]+)$/, async (req, res) => {
|
|||
router.get(/^\/(contact|help|about)$/, (req, res) => {
|
||||
res.reply({ body: tpl.render(`views/${req.url.split[0]}`) });
|
||||
});
|
||||
|
||||
router.get("/random", async (req, res) => {
|
||||
res.redirect("/" + (await sql.query("select id from items order by rand() limit 1"))[0].id)
|
||||
});
|
||||
|
|
|
|||
19
src/inc/routes/random.mjs
Normal file
19
src/inc/routes/random.mjs
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import router from "../router.mjs";
|
||||
import { mimes, queries } from "./inc/index.mjs";
|
||||
import sql from "../sql.mjs";
|
||||
|
||||
router.get(/^\/random(\/image|\/video|\/audio)?$/, async (req, res) => {
|
||||
const args = [];
|
||||
let q = queries.random.main;
|
||||
|
||||
q += queries.random.where(mimes[req.url.split[1]] ? mimes[req.url.split[1]].map(mime => `mime = "${mime}"`).join(" or ") : null);
|
||||
|
||||
try {
|
||||
const rows = await sql.query(q, args);
|
||||
res.redirect(`/${req.url.split[1] ? req.url.split[1] + "/" : ""}${rows[0].id}`);
|
||||
} catch(err) {
|
||||
res
|
||||
.writeHead(500)
|
||||
.end(JSON.stringify(err), "utf-8");
|
||||
}
|
||||
});
|
||||
|
|
@ -15,3 +15,8 @@ router.static({
|
|||
dir: path.resolve() + "/public/t",
|
||||
route: /^\/t\//
|
||||
});
|
||||
|
||||
router.static({
|
||||
dir: path.resolve() + "/public/ca",
|
||||
route: /^\/ca\//
|
||||
});
|
||||
51
src/inc/routes/tags.mjs
Normal file
51
src/inc/routes/tags.mjs
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import router from "../router.mjs";
|
||||
import sql from "../sql.mjs";
|
||||
import tpl from "../tpl.mjs";
|
||||
|
||||
tpl.readdir("views");
|
||||
|
||||
router.get(/^\/tags(\/\w+)?/, async (req, res) => {
|
||||
try {
|
||||
const tag = req.url;
|
||||
|
||||
console.log(tag);
|
||||
|
||||
return res.reply({ body: "wip" });
|
||||
const total = (await sql.query("select count(*) as total from items" + (mime ? q : "")))[0].total;
|
||||
const limit = 299;
|
||||
const pages = +Math.ceil(total / limit);
|
||||
const page = Math.min(pages, +req.url.split[mime ? 2 : 1] || 1);
|
||||
const offset = (page - 1) * limit;
|
||||
|
||||
const query = await sql.query(`select id, mime from items ${mime ? q : ""} order by id desc limit ?, ?`, [ offset, limit ]);
|
||||
|
||||
let cheat = [];
|
||||
for(let i = Math.max(1, page - 3); i <= Math.min(page + 3, pages); i++)
|
||||
cheat.push(i);
|
||||
|
||||
query.forEach(e => {
|
||||
if(!fs.existsSync(`public/t/${e.id}.png`))
|
||||
fs.copyFileSync("public/s/img/broken.png", `public/t/${e.id}.png`);
|
||||
});
|
||||
|
||||
const data = {
|
||||
items: query,
|
||||
pagination: {
|
||||
start: 1,
|
||||
end: pages,
|
||||
prev: (page > 1) ? page - 1 : null,
|
||||
next: (page < pages) ? page + 1 : null,
|
||||
page: page,
|
||||
cheat: cheat,
|
||||
link: `/${mime ? mime + "/" : ""}p/`
|
||||
},
|
||||
last: query[query.length - 1].id,
|
||||
filter: mime ? mime : undefined
|
||||
};
|
||||
|
||||
res.reply({ body: tpl.render("views/index", data) });
|
||||
} catch(err) {
|
||||
console.log(err);
|
||||
res.reply({ body: "sorry bald wieder da lol :(" });
|
||||
}
|
||||
});
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import fs from "fs";
|
||||
import path from "path";
|
||||
import cfg from "./config.mjs";
|
||||
|
||||
export default new class {
|
||||
#templates = {};
|
||||
|
|
@ -10,15 +11,18 @@ export default new class {
|
|||
[ "elseif", t => `}else if(${t.slice(6).trim()}){` ],
|
||||
[ "else", () => "}else{" ],
|
||||
[ "/if", () => "}" ],
|
||||
[ "include", (t, data) => `html+='${this.render(t.slice(7).trim(), data)}';` ],
|
||||
[ "include", (t, data) => `html+='${this.render(cfg.websrv.cache ? t.slice(7).trim() : `views/${t.slice(7).trim()}`, data)}';` ],
|
||||
[ "=", t => `html+=${t.slice(1).trim()};` ]
|
||||
];
|
||||
readdir(dir, root = dir, rel = dir.replace(`${root}/`, "")) {
|
||||
for(const d of fs.readdirSync(`${path.resolve()}/${dir}`))
|
||||
d.endsWith(".html")
|
||||
? this.#templates[`${rel}/${d.split(".")[0]}`] = fs.readFileSync(`${dir}/${d}`, "utf-8").replace(/\'/g, "\\'")
|
||||
? this.#templates[`${rel}/${d.split(".")[0]}`] = this.readtpl(dir, d)
|
||||
: this.readdir(`${dir}/${d}`, root);
|
||||
}
|
||||
readtpl(dir, d) {
|
||||
return fs.readFileSync(`${dir}/${d}`, "utf-8").replace(/\'/g, "\\'");
|
||||
}
|
||||
forEach(o, f) {
|
||||
if(Array.isArray(o))
|
||||
o.forEach(f);
|
||||
|
|
@ -28,7 +32,7 @@ export default new class {
|
|||
throw new Error(`${o} is not a iterable object`);
|
||||
}
|
||||
render(tpl, data = {}, f) {
|
||||
return new Function("util", "data", "let html = \"\";with(data){" + this.#templates[tpl]
|
||||
return new Function("util", "data", "let html = \"\";with(data){" + (cfg.websrv.cache ? this.#templates[tpl] : this.readtpl(path.resolve(), `${tpl}.html`))
|
||||
.trim()
|
||||
.replace(/[\n\r]/g, "")
|
||||
.split(/{{\s*([^}]+)\s*}}/)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { promises as fs } from "fs";
|
||||
import cfg from "../../../config.json";
|
||||
import { exec } from "child_process";
|
||||
import cfg from "../../inc/config.mjs";
|
||||
import sql from "../sql.mjs";
|
||||
import lib from "../lib.mjs";
|
||||
|
||||
|
|
@ -27,13 +28,25 @@ export default async bot => {
|
|||
case "thumb":
|
||||
const rows = await sql.query("select id from items");
|
||||
const dir = (await fs.readdir("./public/t")).filter(d => d.endsWith(".png")).map(e => +e.split(".")[0]);
|
||||
|
||||
const tmp = [];
|
||||
for(let row of rows) {
|
||||
for(let row of rows)
|
||||
!dir.includes(row.id) ? tmp.push(row.id) : null;
|
||||
}
|
||||
e.reply(`${tmp.length}, ${rows.length}, ${dir.length}`);
|
||||
break;
|
||||
case "cache":
|
||||
cfg.websrv.cache = !cfg.websrv.cache;
|
||||
return e.reply(`Cache is ${cfg.websrv.cache ? "enabled" : "disabled"}`);
|
||||
break;
|
||||
case "uptime":
|
||||
exec('sudo systemctl status f0ck', (err, stdout) => {
|
||||
if(!err)
|
||||
return e.reply(stdout.split('\n')[2].trim().replace("Active: active (running)", "i'm active"));
|
||||
});
|
||||
break;
|
||||
case "restart":
|
||||
e.reply("hay hay patron, hemen!");
|
||||
exec("sudo systemctl restart f0ck");
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,9 +19,8 @@ export default async bot => {
|
|||
f: e => {
|
||||
const links = e.message.match(regex)?.filter(link => !link.includes("f0ck.me")) || [];
|
||||
|
||||
if(e.photo) {
|
||||
if(e.photo)
|
||||
links.push(e.photo);
|
||||
}
|
||||
|
||||
if(links.length === 0)
|
||||
return false;
|
||||
|
|
@ -32,7 +31,7 @@ export default async bot => {
|
|||
if(!e.channel.includes("f0ck") && !e.message.match(/(!|-)f0ck/i))
|
||||
return false;
|
||||
|
||||
//e.reply(`parsing ${links.length} link${links.length > 1 ? "s" : ""}...`);
|
||||
console.log(`parsing ${links.length} link${links.length > 1 ? "s" : ""}...`);
|
||||
|
||||
links.forEach(async link => {
|
||||
// check repost (link)
|
||||
|
|
@ -43,28 +42,41 @@ export default async bot => {
|
|||
// generate uuid
|
||||
const uuid = (await sql.query("select left(uuid(), 8) as uuid"))[0].uuid;
|
||||
|
||||
const maxfilesize = ( getLevel(e.user).level > 50 ? cfg.main.maxfilesize * 2.5 : cfg.main.maxfilesize ) / 1024;
|
||||
const maxfilesize = (getLevel(e.user).level > 50 ? cfg.main.maxfilesize * 2.5 : cfg.main.maxfilesize) / 1024;
|
||||
|
||||
let meta;
|
||||
// read metadata
|
||||
try {
|
||||
meta = JSON.parse((await exec(`youtube-dl -f "bestvideo[ext=mp4,filesize<${maxfilesize}k]+bestaudio/best" --skip-download --dump-json "${link}"`)).stdout);
|
||||
meta = JSON.parse((await exec(`youtube-dl -f "bestvideo[ext=mp4,filesize<${maxfilesize}k][width<2000][height<=1200]+bestaudio[ext=m4a,filesize<${maxfilesize}k]/bestvideo[width<2000][height<=1200]+bestaudio/best[width<2000][height<=1200]/best" --skip-download --dump-json "${link}"`)).stdout);
|
||||
//meta = JSON.parse((await exec(`youtube-dl -f "bestvideo[ext=mp4,filesize<${maxfilesize}k]+bestaudio/best" --skip-download --dump-json "${link}"`)).stdout);
|
||||
}
|
||||
catch(e) {
|
||||
catch(err) {
|
||||
e.reply("666 - kein b0ck!");
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
|
||||
let filename = `${uuid}.${meta.ext}`;
|
||||
|
||||
e.reply(`downloading ${uuid}...`);
|
||||
//e.reply(`downloading ${uuid}...`);
|
||||
e.reply(`[charging the f0cker] downloading: ${uuid}.${meta.ext}`);
|
||||
|
||||
// download data
|
||||
const start = new Date();
|
||||
let source;
|
||||
if(meta.ext === "mp4")
|
||||
source = (await exec(`youtube-dl "${link}" --max-filesize ${maxfilesize}k -f "bestvideo[ext=mp4,filesize<${maxfilesize}k]+bestaudio/best" --merge-output-format mp4 -o ./tmp/${filename}`)).stdout.trim();
|
||||
else
|
||||
source = (await exec(`youtube-dl "${link}" --max-filesize ${maxfilesize}k -f "bestvideo[ext=mp4,filesize<${maxfilesize}k]+bestaudio/best" -o ./tmp/${filename}`)).stdout.trim();
|
||||
if(meta.ext === "mp4") {
|
||||
//source = (await exec(`youtube-dl "${link}" --max-filesize ${maxfilesize}k -f "bestvideo[ext=mp4,filesize<${maxfilesize}k]+bestaudio/best" --merge-output-format mp4 -o ./tmp/${filename}`)).stdout.trim();
|
||||
source = (await exec(`youtube-dl "${link}" --max-filesize ${maxfilesize}k -f "bestvideo[ext=mp4,filesize<${maxfilesize}k][width<2000][height<=1200]+bestaudio[ext=m4a,filesize<${maxfilesize}k]/bestvideo[width<2000][height<=1200]+bestaudio/best[width<2000][height<=1200]/best" --merge-output-format mp4 -o ./tmp/${filename}`)).stdout.trim();
|
||||
console.log("mp4 lol");
|
||||
}
|
||||
else {
|
||||
//source = (await exec(`youtube-dl "${link}" --max-filesize ${maxfilesize}k -f "bestvideo[filesize<${maxfilesize}k][width<2000][height<=1200]+bestaudio[ext=${meta.ext},filesize<${maxfilesize}k]/bestvideo[width<2000][height<=1200]+bestaudio/best[ext=${meta.ext},width<2000][height<=1200]/best" --merge-output-format ${meta.ext} -o ./tmp/${filename}`)).stdout.trim();
|
||||
source = (await exec(`youtube-dl "${link}" --max-filesize ${maxfilesize}k -f "bestvideo[filesize<${maxfilesize}k][width<2000][height<=1200][ext=${meta.ext}]+bestaudio[filesize<${maxfilesize}k][ext=${meta.ext}]/best" -o ./tmp/${filename}`)).stdout.trim();
|
||||
//source = (await exec(`youtube-dl "${link}" --max-filesize ${maxfilesize}k -f "bestvideo[ext=mp4,filesize<${maxfilesize}k][width<2000][height<=1200]+bestaudio[ext=m4a,filesize<${maxfilesize}k]/bestvideo[width<2000][height<=1200]+bestaudio/best[width<2000][height<=1200]/best" -o ./tmp/${filename}`)).stdout.trim();
|
||||
//source = (await exec(`youtube-dl "${link}" --max-filesize ${maxfilesize}k -f "bestvideo[ext=mp4,filesize<${maxfilesize}k]+bestaudio/best" -o ./tmp/${filename}`)).stdout.trim();
|
||||
console.log("alles andere lol");
|
||||
}
|
||||
console.log(source);
|
||||
|
||||
if(source.match(/larger than/))
|
||||
return e.reply("too large lol");
|
||||
|
|
@ -116,7 +128,8 @@ export default async bot => {
|
|||
);
|
||||
|
||||
// generate thumbnail
|
||||
let thumb_orig = (await exec(`youtube-dlc -f "bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best" --get-thumbnail "${link}"`)).stdout.trim();
|
||||
try {
|
||||
let thumb_orig = (await exec(`youtube-dl -f "bestvideo[ext=mp4]+bestaudio[ext=m4a]/best[ext=mp4]/best" --get-thumbnail "${link}"`)).stdout.trim();
|
||||
if(!thumb_orig.startsWith("http")) {
|
||||
if(mime.startsWith("image") && mime !== "image/gif")
|
||||
thumb_orig = `./public/b/${filename}`;
|
||||
|
|
@ -124,9 +137,18 @@ export default async bot => {
|
|||
await exec(`ffmpegthumbnailer -i./public/b/${filename} -s1024 -o./tmp/${insertq.insertId}`);
|
||||
thumb_orig = `./tmp/${insertq.insertId}`;
|
||||
}
|
||||
else if(mime.startsWith("audio")) {
|
||||
await exec(`ffmpeg -i ./public/b/${filename} -update 1 -map 0:v -map 0:1 -c copy ./tmp/${insertq.insertId}.png`)
|
||||
await exec(`cp ./tmp/${insertq.insertId}.png ./public/ca/${insertq.insertId}.png`)
|
||||
thumb_orig = `./tmp/${insertq.insertId}.png`;
|
||||
}
|
||||
}
|
||||
await exec(`convert "${thumb_orig}" -resize "200x200^" -gravity center -crop 128x128+0+0 +repage ./public/t/${insertq.insertId}.png`);
|
||||
await fs.promises.unlink(`./tmp/${insertq.insertId}`).catch(_=>{});
|
||||
} catch(err) {
|
||||
e.reply("\x033>no thumb lol");
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
let speed = lib.calcSpeed(size, end);
|
||||
speed = !Number.isFinite(speed) ? "yes" : `${speed.toFixed(2)} Mbit/s`;
|
||||
|
|
|
|||
118
src/inc/trigger/tags.mjs
Normal file
118
src/inc/trigger/tags.mjs
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
import sql from "../sql.mjs";
|
||||
import cfg from "../config.mjs";
|
||||
import { getLevel } from "../admin.mjs";
|
||||
|
||||
const queries = {
|
||||
getTags: "select tags.id, tags.tag from tags_assign left join tags on tags.id = tags_assign.tag_id where tags_assign.item_id = ?",
|
||||
assignTag: "insert into tags_assign (tag_id, item_id, prefix) values (?, ?, ?)"
|
||||
};
|
||||
|
||||
const getTags = async itemid => {
|
||||
return await sql.query(queries.getTags, [ itemid ]);
|
||||
};
|
||||
|
||||
export default async bot => {
|
||||
return [{
|
||||
name: "tags show",
|
||||
call: /^\!tags show \d+$/i,
|
||||
active: true,
|
||||
level: 100,
|
||||
f: async e => {
|
||||
const id = +e.args[1];
|
||||
if(!id)
|
||||
return e.reply("lol no");
|
||||
const tags = await getTags(id).map(t => t.tag);
|
||||
if(tags.length === 0)
|
||||
return e.reply(`item ${cfg.main.url}/${id} has no tags!`);
|
||||
return e.reply(`item ${cfg.main.url}/${id} is tagged as: ${tags.join(', ')}`);
|
||||
}
|
||||
}, {
|
||||
name: "tags add",
|
||||
call: /^\!tags add \d+ .*/i,
|
||||
active: true,
|
||||
level: 100,
|
||||
f: async e => {
|
||||
const id = +e.args[1];
|
||||
if(!id)
|
||||
return e.reply("lol no");
|
||||
|
||||
const tags = (await getTags(id)).map(t => t.tag);
|
||||
|
||||
const newtags = (e.message.includes(",")
|
||||
? e.args.splice(2).join(" ").trim().split(",")
|
||||
: e.args.splice(2)).filter(t => !tags.includes(t) && t.length > 0);
|
||||
|
||||
if(newtags.length === 0)
|
||||
return e.reply("no (new) tags provided");
|
||||
|
||||
await Promise.all(newtags.map(async ntag => {
|
||||
try {
|
||||
let tagid;
|
||||
const tag_exists = (await sql.query(`select id, tag from tags where tag = ?`, [ ntag ]));
|
||||
if(tag_exists.length === 0) // create new tag
|
||||
tagid = (await sql.query("insert into tags (tag) values (?)", [ ntag ])).insertId;
|
||||
else
|
||||
tagid = tag_exists[0].id;
|
||||
|
||||
return await sql.query(queries.assignTag, [ tagid, id, `${e.user.prefix}${e.channel}` ]);
|
||||
} catch(err) {
|
||||
console.error(err);
|
||||
}
|
||||
}));
|
||||
|
||||
const ntags = (await getTags(id)).map(t => t.tag);
|
||||
if(ntags.length === 0)
|
||||
return e.reply(`item ${cfg.main.url}/${id} has no tags!`);
|
||||
return e.reply(`item ${cfg.main.url}/${id} is now tagged as: ${ntags.join(', ')}`);
|
||||
}
|
||||
}, {
|
||||
name: "tags remove",
|
||||
call: /^\!tags remove \d+ .*/i,
|
||||
active: true,
|
||||
level: 100,
|
||||
f: async e => {
|
||||
const id = +e.args[1];
|
||||
if(!id)
|
||||
return e.reply("lol no");
|
||||
|
||||
const tags = await getTags(id);
|
||||
|
||||
const removetags = (e.message.includes(",")
|
||||
? e.args.splice(2).join(" ").trim().split(",")
|
||||
: e.args.splice(2)).filter(t => t.length > 0);
|
||||
|
||||
if(removetags.length === 0)
|
||||
return e.reply("no tags provided");
|
||||
|
||||
const res = await Promise.all(removetags.map(async rtag => {
|
||||
const tagid = tags.filter(t => t.tag === rtag)[0]?.id ?? null;
|
||||
if(!tagid || tagid?.length === 0) {
|
||||
return {
|
||||
success: false,
|
||||
tag: rtag,
|
||||
msg: "tag is not assigned"
|
||||
};
|
||||
}
|
||||
|
||||
let q;
|
||||
if(getLevel(e.user).level > 50)
|
||||
q = !!(await sql.query("delete from tags_assign where tag_id = ? and item_id = ? limit 1", [ tagid, id ])).affectedRows;
|
||||
else
|
||||
q = !!(await sql.query("delete from tags_assign where tag_id = ? and item_id = ? and prefix = ? limit 1", [ tagid, id, `${e.user.prefix}${e.channel}` ])).affectedRows;
|
||||
|
||||
return {
|
||||
success: q,
|
||||
tag: rtag,
|
||||
tagid: tagid
|
||||
};
|
||||
}));
|
||||
|
||||
e.reply(JSON.stringify(res));
|
||||
|
||||
const ntags = (await getTags(id)).map(t => t.tag);
|
||||
if(ntags.length === 0)
|
||||
return e.reply(`item ${cfg.main.url}/${id} has no tags!`);
|
||||
return e.reply(`item ${cfg.main.url}/${id} is now tagged as: ${ntags.join(', ')}`);
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
|
@ -1,40 +1,39 @@
|
|||
{{include main/header}}
|
||||
<div class="container">
|
||||
<div class="irc">
|
||||
<h4>irc.n0xy.net +6697 (ssl only) #f0ck</h4>
|
||||
<p>More information: <a href="https://n0xy.net">n0xy.net</a></p>
|
||||
<div class="page-header">
|
||||
<h4>IRC Rules</h4>
|
||||
</div>
|
||||
<p>Constitution:</p>
|
||||
<h5>About f0ck</h5>
|
||||
<p>f0ck is your friendly IRC shitposting bot, it's built for catching urls that are passed to it and displays the content of passed urls on a simple and accessible web gallery reachable at <a href="/">f0ck.me</a></p>
|
||||
<h5>WTF is a f0ck?</h5>
|
||||
<p>A f0ck is basically giving a fuck about some internet bullshit, like stupid images, videos and so on, but also for great things like good music taste and shit, it's basically "a f0ck was given" and f0ck and it's users gave a lot of f0cks over the past years, it's not hard to finally start giving a damn f0ck about something, just f0ck it dood!</p>
|
||||
<h5>Where to f0ck?</h5>
|
||||
<p>You can invite f0ck to your channel on the following supported networks by simply typing<br><code>/invite f0ck</code></p>
|
||||
<ul>
|
||||
<li>§ 1 The dignity of the IRCd is inviolable.</li>
|
||||
<li>§ 2 The distribution of Child Pornography is strictly prohibited in any of our networks and will lead to an immediate ban.</li>
|
||||
<li>§ 3 Do not attack users in this network in any way, shape, or form.</li>
|
||||
<li>§ 4 Do not transmit any personal/financial information without permission.</li>
|
||||
<li>§ 5 Do not share any malware on this network.</li>
|
||||
<li><a href="https://n0xy.net">n0xy.net</a></li>
|
||||
<li><a href="https://www.rizon.net/">rizon.net</a></li>
|
||||
<li><a href="https://freenode.net/">freenode.net</a></li>
|
||||
</ul>
|
||||
<p>#f0ck specific don'ts:</p>
|
||||
<p>To start f0cking the shit out of something simply add a <code>!f0ck</code> behind the url you want to f0ck, that's it</p>
|
||||
<p>#f0ck specific: to have f0ck ignore a link add <code>!ignore</code> at the end <br>Example: <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">https://www.youtube.com/watch?v=dQw4w9WgXcQ</a> !ignore</p>
|
||||
<p>f0ck supports a variety of websites, in fact all websites supported by <code>youtube-dl</code> are supported by f0ck aswell!</p>
|
||||
<h5>f0ck Rules</h5>
|
||||
<ul>
|
||||
<li>Animal cruelty is forbidden and will lead to an immediate ban</li>
|
||||
<li>All kinds of terrorist shit, we dont want any of it, f0ck off k?</li>
|
||||
<li>Snuff/Beastiality is not welcome here</li>
|
||||
<li>pictures of you grandmas furburger also might be too hardcore for us</li>
|
||||
<li>You must be 18 years or older to visit or post</li>
|
||||
<li>You shall not post animal cruelty, we like our animals alive and well, living a happy life until they are ready for our Schnitzel!</li>
|
||||
<li>You shall not post under <b>ANY</b> circumstances: Snuff, Beastiality, Rape, Terrorist stuff (Beheadings, First person shootings, warcrimes), Childporn, Childmodeling</li>
|
||||
</ul>
|
||||
<h4>What the f0ck is a f0ck?</h4>
|
||||
<p>A f0ck is basically giving a fuck about some internet bullshit, like stupid images, videos and so on, but also
|
||||
for great things like good music taste and shit, it's basically "a f0ck was given" and f0ck and it's users gave
|
||||
a lot of f0cks over the past years, it's not hard to finally start giving a damn f0ck about something, just
|
||||
f0ck.it dood!</p>
|
||||
<h4>how the f0ck to f0ck, you ask?</h4>
|
||||
<p>f0ck will f0ck any media link posted in the channel ending with: jpg|gif|png|webm|mp3|mp4|ogg|flac</p>
|
||||
<p>If you don't want f0ck to f0ck it put !ignore behind your link. Example:
|
||||
https://retard-journal.com/stupidshit.png !ignore</a>
|
||||
<p>f0ck will only f0ck media links with the maximum size of 40MB for cool people ??MB</p>
|
||||
<h4>Alternative domains</h4>
|
||||
<h5>f0cked up?</h5>
|
||||
<p>To have something removed in case you accidentally f0cked something that actually shouldn't be f0cked you can always contact the admins either via IRC or Email</p>
|
||||
<ul>
|
||||
<li>irc.n0xy.net #f0ck</li>
|
||||
<li>admin@f0ck.me</li>
|
||||
</ul>
|
||||
<h5>Compatibility</h5>
|
||||
<p>f0ck is developed and tested for Firefox and Chromium in their latest versions</p>
|
||||
<p>If you encounter bugs please report them so we can fix them.</p>
|
||||
<p>Microsoft Edgy is not actively supported, but if it werks, great! Same for anything apple related.</p>
|
||||
<h5>Tinfoil f0ckers listen!</h5>
|
||||
<p>f0ck onions and moons, but fockulite!</p>
|
||||
<p>http://fockmoonsb24iczs7odozzy5uktlzbcgp337nabrgffzxv5ihabgpvyd.onion</p>
|
||||
<p>http://fockulite74atso2xsxxw6q2gzqrgck572tiwvkyf5vdxictjn2vmlyd.onion</p>
|
||||
</div>
|
||||
<p>f0ck is completely functional without javascript enabled, you can be the beardiest neckbeard of all, we got you m'gentleman</p>
|
||||
</div>
|
||||
{{include main/footer}}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
{{include main/header}}
|
||||
<div class="container">
|
||||
<div class="contact">
|
||||
<p>Got a problem? We have the answer: <a href="mailto:admin@f0ck.me">admin@f0ck.me</a></p>
|
||||
</div>
|
||||
<h5>f0ck Contact</h5>
|
||||
<p>Whatever it is, we might have a answer, even though it might not be the one you were looking for: <a href="mailto:admin@f0ck.me">admin@f0ck.me</a></p>
|
||||
</div>
|
||||
{{include main/footer}}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{{include main/header}}
|
||||
<div class="container-fluid">
|
||||
<div class="index-container">
|
||||
<ul id="posts">
|
||||
{{each items as item}}
|
||||
<li class="post">
|
||||
<a href="/{{=item.id}}" title="{{=item.mime}}">
|
||||
<img class="thumb" src="/t/{{=item.id}}.png" />
|
||||
<span class="item-mime">{{=item.mime}}</span>
|
||||
<li>
|
||||
<a href="/{{if typeof filter !== "undefined"}}{{=filter}}/{{/if}}{{=item.id}}">
|
||||
<img src="/t/{{=item.id}}.png" loading="lazy" />
|
||||
<span>{{=item.mime}}</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
|
|
|
|||
|
|
@ -2,53 +2,61 @@
|
|||
<div class="container">
|
||||
<div class="content">
|
||||
<div class="next-post">
|
||||
{{if next}}
|
||||
<a id="next" href="/{{=next}}">
|
||||
<div class="arrow-next">«</div>
|
||||
</a>
|
||||
{{if pagination.prev}}
|
||||
<div class="arrow-next">
|
||||
<a id="next" href="{{=pagination.link}}{{=pagination.prev}}"></a>
|
||||
</div>
|
||||
{{else}}
|
||||
<a id="next" href="#" style="color: #ccc !important;">
|
||||
<div class="arrow-next">«</div>
|
||||
</a>
|
||||
<div class="arrow-next">
|
||||
<a id="next" href="#" style="color: #ccc !important;"></a>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="media-object">
|
||||
{{if item.mime.startsWith("video")}}
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<video id="my-video" class="video-js embed-responsive-item" width="640" height="360" src="{{=item.dest}}"
|
||||
preload="auto" autoplay controls loop data-setup="{}"></video>
|
||||
<video id="my-video" class="embed-responsive-item" width="640" height="360" src="{{=item.dest}}"
|
||||
preload="auto" autoplay controls loop></video>
|
||||
</div>
|
||||
{{elseif item.mime.startsWith("audio")}}
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<audio id="my-video" class="embed-responsive-item video-js audiojs" autoplay controls loop
|
||||
src="{{=item.dest}}" data-setup="{}"
|
||||
poster="{{if item.thumbnail}}{{=item.thumbnail}}{{else}}/s/200.gif{{/if}}" type="audio/mp3"></audio>
|
||||
<div class="embed-responsive embed-responsive-16by9" style="background: url('{{if item.coverart}}{{=item.coverart}}{{else}}/s/img/200.gif{{/if}}') no-repeat center / contain black;">
|
||||
<audio id="my-video" class="embed-responsive-item" autoplay controls loop src="{{=item.dest}}" data-setup="{}" poster="{{if item.coverart}}{{=item.coverart}}{{else}}/s/img/200.gif{{/if}}" type="{{=item.mime}}"></audio>
|
||||
</div>
|
||||
{{elseif item.mime.startsWith("image")}}
|
||||
<a href="{{=item.dest}}" id="elfe" target="_blank"><img id="f0ck-image" src="{{=item.dest}}" /></a>
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<div class="embed-responsive-image" id="image-scroll">
|
||||
<a href="{{=item.dest}}" id="elfe" target="_blank"><img id="f0ck-image" class="img-fluid" src="{{=item.dest}}" loading="lazy"/></a>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<h1>404 - Not f0cked</h1>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="previous-post">
|
||||
{{if prev}}
|
||||
<a id="prev" href="/{{=prev}}">
|
||||
<div class="arrow-prev">»</div>
|
||||
</a>
|
||||
{{if pagination.next}}
|
||||
<div class="arrow-prev">
|
||||
<a id="prev" href="{{=pagination.link}}{{=pagination.next}}"></a>
|
||||
</div>
|
||||
{{else}}
|
||||
<a id="prev" href="#" style="color: #ccc !important;">
|
||||
<div class="arrow-prev">»</div>
|
||||
</a>
|
||||
<div class="arrow-prev">
|
||||
<a id="prev" href="#" style="color: #ccc !important;"></a>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="metadata">
|
||||
<span class="badge badge-dark"><a href="/{{=item.id}}" class="id-link">{{=item.id}}</a></span>
|
||||
<span class="badge badge-dark">{{=user.network}} / {{=user.channel}}</span>
|
||||
<span class="badge badge-dark"><a id="post_source" href="{{=item.src.long}}" target="_blank">{{=item.src.short}}</a></span>
|
||||
<span class="badge badge-dark">{{=item.mime}} / {{=item.size}}</span>
|
||||
<span class="badge badge-dark"><time class="timeago" title="{{=item.timestamp}}" datetime="{{=item.timestamp}}"></time></span>
|
||||
<span class="badge badge-dark image-source"><a class="post_source" title="{{=item.src.long}}" href="{{=item.src.long}}" target="_blank">{{=item.src.short}}</a></span>
|
||||
<span class="badge badge-dark"><a href="{{=item.dest}}" target="_blank">{{=item.mime}}</a> / {{=item.size}}</span>
|
||||
<span class="badge badge-dark"><time class="timeago" title="{{=item.timestamp}}" datetime="{{=item.timestamp}}">{{=item.timestamp}}</time></span>
|
||||
<span class="badge badge-dark" id="themes"></span>
|
||||
<span class="badge badge-dark" id="tags">
|
||||
{{if typeof item.tags !== "undefined"}}
|
||||
{{each item.tags as tag}}
|
||||
<span class="badge badge-{{=(tag.tag === "nsfw" ? "danger" : tag.tag === "sfw" ? "success" : "light")}} mr-2">{{=tag.tag}}</span>
|
||||
{{/each}}
|
||||
{{/if}}</span>
|
||||
</div>
|
||||
</div>
|
||||
{{include main/footer}}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<script src="/s/js/video.min.js"></script>
|
||||
<script src="/s/js/videojs.persistvolume.js"></script>
|
||||
<script src="/s/js/item.js"></script>
|
||||
<script src="/s/js/theme.js"></script>
|
||||
<script src="/s/js/bootstrap-native.min.js"></script>
|
||||
<script async src="/s/js/theme.js"></script>
|
||||
<script src="/s/js/v0ck.js"></script>
|
||||
<script src="/s/js/f0ck.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
<!doctype f0ck>
|
||||
<html>
|
||||
<!cocktype big f0ck>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{{if data.title}}{{=data.title}}{{else}}f0ck!{{/if}}</title>
|
||||
<link rel="icon" type="image/gif" href="/s/img/favicon.gif" />
|
||||
<link rel="stylesheet" type="text/css" href="/s/css/video-js.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/s/css/vsg-skin.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/s/css/bootstrap.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/s/css/f0ck-custom.css" />
|
||||
<link rel="stylesheet" href="/s/css/f0ck.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="f0ck.me is the place where internet purists gather to celebrate content of all kinds">
|
||||
{{if data.item}}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
{{if typeof pagination !== "undefined"}}
|
||||
<nav class="pagination">
|
||||
<a href="{{=pagination.link}}{{=pagination.start}}" class="btn start{{if !pagination.prev}} disabled{{/if}}">⮜⮜</a>
|
||||
<a href="{{=pagination.link}}{{=pagination.prev}}" class="btn prev{{if !pagination.prev}} disabled{{/if}}">⮜</a>
|
||||
<a href="{{=pagination.link}}{{=pagination.start}}" class="page-item-1 btn start{{if !pagination.prev}} disabled{{/if}}">«</a>
|
||||
<a href="{{=pagination.link}}{{=pagination.prev}}" class="page-item-2 btn prev{{if !pagination.prev}} disabled{{/if}}">‹</a>
|
||||
{{each pagination.cheat as i}}
|
||||
{{if i == pagination.page}}
|
||||
<span class="btn disabled">{{=i}}</span>
|
||||
{{else}}
|
||||
<a href="{{=pagination.link}}{{=i}}" class="btn">{{=i}}</a>
|
||||
<a href="{{=pagination.link}}{{=i}}" class="pagination-int-item btn">{{=i}}</a>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
<a href="{{=pagination.link}}{{=pagination.next}}" class="btn next{{if !pagination.next}} disabled{{/if}}">⯈</a>
|
||||
<a href="{{=pagination.link}}{{=pagination.end}}" class="btn start{{if !pagination.next}} disabled{{/if}}">⯈⯈</a>
|
||||
<a href="{{=pagination.link}}{{=pagination.next}}" class="page-item-3 btn next{{if !pagination.next}} disabled{{/if}}">›</a>
|
||||
<a href="{{=pagination.link}}{{=pagination.end}}" class="page-item-4 btn start{{if !pagination.next}} disabled{{/if}}">»</a>
|
||||
</nav>
|
||||
{{/if}}
|
||||
|
|
@ -1,27 +1,35 @@
|
|||
<nav class="navbar navbar-expand-lg">
|
||||
<a class="navbar-brand" href="/">
|
||||
<span id="f0ck" width="" height="">F0CK</span>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse show" id="navbarSupportedContent">
|
||||
<a class="navbar-brand" href="/"><span class="f0ck" width="" height="">F0CK</span></a>
|
||||
<div class="navigation-links">
|
||||
<ul class="navbar-nav ">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/random"><span class="nav-link-identifier">Random</span></a>
|
||||
</li>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/about"><span class="nav-link-identifier">About</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/contact"><span class="nav-link-identifier">Contact</span></a>
|
||||
</li>
|
||||
<span class="placeholder"> </span>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" href="#" data-toggle="dropdown">Filter{{if typeof filter !== "undefined"}} ({{=filter}}){{/if}} ▼</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="/">All</a></li>
|
||||
<li><a class="dropdown-item" href="/audio">Audio</a></li>
|
||||
<li><a class="dropdown-item" href="/video">Video</a></li>
|
||||
<li><a class="dropdown-item" href="/image">Image</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a id="random" class="nav-link" href="/random{{if typeof filter !== "undefined"}}/{{=filter}}{{/if}}">
|
||||
<span class="nav-link-identifier">Random</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse show" id="navbarSupportedContent">
|
||||
<div class="pagination-container-fluid">
|
||||
<div class="pagination-wrapper">
|
||||
{{include partials/pagination}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
Loading…
Reference in New Issue
Block a user