-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlightbox.css
79 lines (71 loc) · 7.65 KB
/
lightbox.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/*dizzyzane.github.io/lightbox*/
/*Resetti*/
[lightbox],[lightbox] *,[lightbox] *:before,[lightbox] *:after{all:initial;color:snow;background:rgba(0,0,0,0)}
[lightbox] p,[lightbox] div,[lightbox] h1,[lightbox] h2,[lightbox] h3,[lightbox] h4,[lightbox] h5,[lightbox] h6,[lightbox] iframe{display:block}
/*Basic defs*/
[lightbox]:not([lightbox*="inline"]),[lightbox*="inline"]:target,input:checked+[lightbox*="inline"]{position:fixed;left:100%;left:100vw;width:100%;width:100vw;background:rgba(0,0,0,0);height:100%;height:100vh;z-index:999999999;top:0;padding:0!important;margin:0!important;-o-transition:transition: .6s ease-out 0s,background .2s linear .6s;-webkit-transition: .6s ease-out 0s,background .6s linear 0s;transition: .6s ease-out 0s,background .2s linear .6s}
[lightbox*="inline"]{position:relative;left:0!important;top:0!important}
[lightbox*="inline"][id]:not(:target)>:not(label),input:not(:checked)+[lightbox*="inline"]:not(:target)>:not(label){display:none}
input:checked+[lightbox],[lightbox]:target {background: rgba(0, 0, 0, 0.75);left: 0%!important;z-index: 9999999999;top:0!important}
[lightbox] >label[for] > img[src],[lightbox] > article,[lightbox] > section,[lightbox] > iframe,[lightbox] > video,[lightbox] > canvas,[lightbox] > img {margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;border: 3px solid snow;border-radius:3px;max-width:70vw;max-height:70vh}
[lightbox] > article,[lightbox] > section{width:100%;height:100%;color:snow;overflow-y:auto;padding:5px;white-space:pre-wrap;display:block;background:#000}
[lightbox] > article>iframe,[lightbox] > section>iframe{margin:10px -5px 5px;width:calc(100% + 10px);background:#fff;}
[lightbox] > iframe{padding:0;overflow-y:auto;background:#000;color:snow}
[lightbox] > article *,[lightbox] > section *,[lightbox] > article,[lightbox] > section{font:19px/22px helvetica,arial,freesans,clean,sans-serif}
[lightbox] h1,[lightbox] h2,[lightbox] h3,[lightbox] h4,[lightbox] h5,[lightbox] h6{font-weight:bold;text-align:center}
[lightbox] h1{font-size:2em;margin:.67em 0}
[lightbox] h2{font-size:1.5em;margin:.83em 0}
[lightbox] h3{font-size:1.17em;margin:1em 0}
[lightbox] h4{font-size:1em;margin:1.33em 0}
[lightbox] h5{font-size:.83em;margin:1.67em 0}
[lightbox] h6{font-size:.67em;margin:2em 0}
[lightbox] > article p,[lightbox] > section p{margin-bottom:1em}
[lightbox] > article p::first-letter,[lightbox] > section p::first-letter,[lightbox] > article::first-letter,[lightbox] > section::first-letter{margin-left:.4em;font-size:20px;font-weight:bold}
[lightbox] > article code,[lightbox] > section code{color:red;font:bold 16px Monaco,Andale Mono,Courier New,monospace}
[lightbox] > article label,[lightbox] > section label{background:#333;color:lime}
[lightbox] > article a,[lightbox] > section a{background:#333;color:aqua}
[lightbox] > article a:hover,[lightbox] > section a:hover{text-decoration:underline}
[lightbox] img {
width: 100%;
height: auto;}
/*Directional buttons*/
[lightbox] button{cursor:pointer;text-align:center;font:4em helvetica,arial,freesans,clean,sans-serif;color:snow;border:1px solid snow;background:#000;height:70%;width:10%;position:absolute;top:15%}
[lightbox] button[lbleft]{left:5%}
[lightbox] button[lbright]{right:5%}
[lightbox] button[lbup]{top:5%;height:10%;width:70%}
[lightbox] button[lbdown]{bottom:5%;height:10%;width:70%}
[lightbox] button[lbleft]:before{content:"\002039"}
[lightbox] button[lbright]:before{content:"\00203A"}
[lightbox] button[lbup]:before{content:"\00290A"}
[lightbox] button[lbdown]:before{content:"\00290B"}
/*Titles.*/
[lightbox] > h1,[lightbox] > h2,[lightbox] > h3{position:absolute;left:15%;right:15%;top:-5px;color:snow;text-shadow: -2px -2px #000, 2px 2px #000, 2px -2px #000, -2px 2px #000, -1px -1px #000;font:29px 'Product Sans',Roboto,roboto,Helvetica,helvetica,arial,freesans,clean,sans-serif}
/*Use your GPU mate*/
[lightbox],[lightbox] *{-webkit-transform:translate3D(0,0,0);-ms-transform:translate3D(0,0,0);transform:translate3D(0,0,0);}
/*Closing and screenarea*/
label[for]{cursor:pointer}
/*input+[lightbox]>label[for="remove_lightbox"],[lightbox] > a[href="#screenarea"]/*:first-child*/{width: 0%;height:100%;background:0 0;background:-webkit-linear-gradient(315deg,rgba(0,0,0,0) 90%,rgb(255,255,255) 0);background:-webkit-linear-gradient(45deg, rgba(0,0,0,0) 90%, rgb(255,255,255) 0);background:linear-gradient(45deg,rgba(0,0,0,0) 90%,rgb(255,255,255) 0);position: absolute;top:0;right:0;nav-index:-1;cursor:context-menu;-webkit-transition:0s .6s;transition:0s .6s;outline-style:none}*/
/*input:checked+[lightbox]>label[for="remove_lightbox"],[lightbox]:target > a[href="#screenarea"]/*:first-child*/{width:100%;}*/
/*input+[lightbox]>label[for="remove_lightbox"]:after,[lightbox] > a[href="#screenarea"]/*:first-child*/:after{content:"回到問卷";position:absolute;top:-40px;right:-50px;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);font-size:5vm;font-size:5vh;color:black;text-align:right;cursor:pointer;display:none;margin:2vm -70vm -6vm 80vm;padding:9vm 80vm 7vm;margin:2vh -70vh -6vh 80vh;padding:9vh 80vh 7vh}*/
/*input:checked+[lightbox]>label[for="remove_lightbox"]:after,[lightbox]:target > a[href="#screenarea"]/*first-child*/:after{display:block}*/
#screenarea{z-index:-1000000;width:1px;height:1px;visibility:hidden;position:fixed;top:0;left:0;color:rgba(255,255,255,0);opacity:0}
input[name="lightbox"]{display:none}
/*Starting conditionals*/
input[id$="-l"]+[lightbox]:not(p),[lightbox*=left]:not(p),[lightbox][id$="-l"]:not(p){left:-100vw}
input[id$="-t"]+[lightbox]:not(p),[lightbox*=top]:not(ul),[lightbox][id$="-t"]:not(p){left:0;top:-100vh}
input[id$="-b"]+[lightbox]:not(p),[lightbox*=bottom]:not(ul),[lightbox][id$="-b"]:not(p){left:0;top:100vh}
input:checked+[lightbox*="left"],[lightbox*="left"]:target,input[id$="-l"]:checked+[lightbox],[lightbox][id$="-l"]:target{left:0vw}
input:checked+[lightbox*="top"],[lightbox*="top"]:target,input[id$="-t"]:checked+[lightbox],[lightbox][id$="-t"]:target{left:0;top:0vw}
input:checked+[lightbox*="bottom"],[lightbox*=bottom]:target,input[id$="-b"]:checked+[lightbox],[lightbox][id$="-b"]:target{left:0;top:0vw}
[lightbox*=left] a[href~="#screenarea"],[lightbox][id$="-l"] a[href~="#screenarea"],[lightbox*=bottom] a[href~="#screenarea"],[lightbox][id$="-b"] a[href~="#screenarea"]
{background: rgba(0,0,0,0);background: -webkit-linear-gradient(45deg, rgba(0, 0, 0,0) 90%, white 0%);background: linear-gradient(45deg, rgba(0, 0, 0,0) 90%, white 0%);}
[lightbox*=left] a[href~="#screenarea"]:after,[lightbox][id$="-l"] a[href~="#screenarea"]:after,[lightbox*=bottom] a[href~="#screenarea"]:after,[lightbox][id$="-b"] a[href~="#screenarea"]:after
{;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);text-align:right}
[lightbox*=left] a[href~="#screenarea"]:after,[lightbox][id$="-l"] a[href~="#screenarea"]:after,[lightbox*=bottom] a[href~="#screenarea"]:after,[lightbox][id$="-b"] a[href~="#screenarea"]:after*/
/*Unselectable*/
[lightbox*="nosel"] *{-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;cursor:context-menu}
[lightbox*="inst"]{-webkit-transition:0s 0s;transition:0s 0s}
[lightbox*="fast"]{-webkit-transition-duration:.3s;transition-duration:.3s}[lightbox*="fast"]>a[href~="#screenarea"]{-webkit-transition-delay:.3s;transition-delay:.3s}
[lightbox*="slow"]{-webkit-transition-duration:1s;transition-duration:1s}[lightbox*="slow"]>a[href~="#screenarea"]{-webkit-transition-delay:.5s;transition-delay:.5s}
input:checked+[lightbox]>label[for="remove_lightbox"],[lightbox]:target > a[href="#screenarea"]{-webkit-transition:0s 0s;transition:0s 0s}
input[name="lightbox"][id="remove_lightbox"][type="radio"]:not(:checked)~.page-container{overflow:hidden}