v2.1 lol
This commit is contained in:
Flummi
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);
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user