/
pigallery.css
114 lines (113 loc) · 10.6 KB
/
pigallery.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
@font-face { font-family: 'Lato'; font-display: swap; font-style: normal; font-weight: 400; src: local('Lato'), url('/assets/lato.ttf') format('truetype'); }
html { font-size: 16px; }
body { font-size: 1rem; font-family: "Lato", "Segoe UI", "Roboto", sans-serif; font-variant: small-caps; width: 100%; height: 100%; background: var(--background); color: var(--text); scrollbar-color: var(--body); }
::-webkit-scrollbar { width: 20px; border: 0; border-radius: 0; }
::-webkit-scrollbar-thumb { background: var(--body); }
::-webkit-scrollbar-track { margin: 8px; }
::-webkit-scrollbar-button:single-button { display: block; border-style: solid; height: 40px; }
::-webkit-scrollbar-button:single-button:vertical:decrement { border-width: 0 10px 15px 10px; border-color: transparent transparent var(--body) transparent; }
::-webkit-scrollbar-button:single-button:vertical:increment { border-width: 15px 10px 0 10px; border-color: var(--body) transparent transparent transparent; }
h1 { font-size: 1.4rem; margin-top: 1.2rem; font-weight: bold; color: var(--text); }
h2 { font-size: 1.2rem; margin-top: 1.1rem; font-weight: bold; color: var(--text); }
h3 { font-size: 1.0rem; margin-top: 1.0rem; font-weight: bold; color: var(--text); }
a { color: var(--text); }
a:hover { color: var(--link); text-decoration: none; }
p { margin: 0; }
td { vertical-align: top; padding: 10px; }
ul { margin: 0; padding-left: 20px; }
li::marker { font-size: 0; }
.row { width: 100%; margin: 0; align-content: start; }
.col { text-align: left; margin: 0.5rem; width: 100%; box-shadow: var(--shadow); white-space: nowrap; text-overflow: ellipsis; }
.log { width: 100vw; height: 3.6rem; position: fixed; bottom: 0; overflow-y: scroll; overflow-x: hidden; display: block; z-index: 5; cursor: text; pointer-events: none; line-height: 1.2; white-space: nowrap; }
.navbar { background: var(--body); top: 0; position: -webkit-sticky; position: sticky; padding: 0; }
.navbarbutton { font-size: 2.5rem; color: var(--foreground); padding: 0 1.5rem 0 1.5rem; cursor: pointer; text-shadow: 2px 2px var(--title); opacity: 0.1; }
.navbarbutton:hover { color: var(--title); text-shadow: 0; }
.number { font-size: 1.2rem; color: var(--inactive); }
.btntext { text-align: center; margin: 0; white-space: nowrap; }
.navline { background: var(--body); min-height: 4rem; position: fixed; padding-top: 0.5rem; justify-content: center; z-index: 10; align-items: center; }
.navlinebutton { font-size: 1.6rem; color: var(--foreground); padding: 0 2.5rem 0 2.5rem; cursor: pointer; text-shadow: 2px 2px var(--title); }
.navlinebutton:hover { color: var(--title); }
.blank { min-height: 3rem; max-height: 3rem; position: fixed; top: 5rem; }
.input { margin: 0 1rem 0.2rem 1rem; padding: 0 1rem 0 1rem; outline: none; border: none; background: var(--inactive); width: 50%; height: 2.5rem; border-radius: 0; }
.input:hover { background: var(--foreground); }
.input:focus { background: var(--foreground); }
.label { display: flex; margin-left: 30px; align-self: center; min-width: 5rem; }
.options { margin: 0 1rem 0.2rem 1rem; padding: 0 1rem 0 1rem; outline: none; border: none; background: var(--inactive); height: 1.5rem; border-radius: 0; position: -webkit-sticky; position: sticky; left: 220px; }
.options:hover { background: var(--foreground); }
.options:focus { background: var(--foreground); }
.main { height: 100%; display: flex; }
.folderbar { overflow-x: hidden; overflow-y: auto; cursor: pointer; margin-top: 4rem; min-width: 10rem; }
.folderbar::-webkit-scrollbar { display: none; }
.folderlist { margin: 0; min-width: 10rem; max-width: 15rem; line-height: 2.2rem; white-space: nowrap; text-overflow: ellipsis; padding: 0; }
.folders { margin: 0; min-width: 5rem; max-width: 13rem; background: var(--body); line-height: 2.2rem; white-space: nowrap; text-overflow: ellipsis; padding: 0 0 0 0; }
.folder { margin: 0; padding: 0.4rem 200px 0.4rem 0; font-weight: 400; letter-spacing: 1px; }
.folder:hover { background: var(--highlight); color: var(--background); letter-spacing: 2px; }
.folder:active { background: var(--highlight); color: var(--background); letter-spacing: 2px; }
.folderstitle { color: var(--text); letter-spacing: 2px; font-weight: 400; line-height: 2.6rem; padding: 4px; }
.folderstitle:hover { background: var(--highlight); color: var(--background); }
.folderbutton { padding-right: 4px; }
.all { overflow: hidden; width: 100%; display: block; }
.map { overflow: hidden; width: 100%; height: 40%; display: none; z-index: 5; }
.share { overflow: hidden; width: 100%; padding-bottom: 8px; background: var(--body); display: none; z-index: 5; }
.results { overflow-x: hidden; overflow-y: visible; width: 100%; height: 100%; display: flex; padding: 4px; -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; }
.timestamp { background: var(--body); margin-right: 4px; padding-left: 4px; padding-right: 4px; color: var(--text); }
.listitem { display: flex; scroll-snap-align: start; scroll-margin-top: 0; }
.divider { padding: 0.4rem 0 0.4rem 0.6rem; font-size: 1.2rem; margin: 0.4rem; font-weight: bold; height: 2.6rem; display: block; scroll-snap-align: start; scroll-margin-top: 8px; }
.thumbnail { padding: 0; cursor: zoom-in; width: var(--thumbWidth); height: var(--thumbHeight); background: var(--body); }
.thumbnail-img { padding: 0; cursor: zoom-in; width: var(--thumbImgWidth); height: var(--thumbImgHeight); }
.thumbnail:hover { box-shadow: 0 0 8px 8px var(--gradient); filter: grayscale(1); }
.thumb-top { display: flex; position: absolute; top: 0; width: 100%; justify-content: flex-end; }
.thumb-top:hover { background: rgba(0, 0, 0, 0.4); }
.thumb-bottom { display: flex; position: absolute; bottom: 0; width: 100%; justify-content: flex-end; }
.thumb-bottom:hover { background: rgba(0, 0, 0, 0.4); }
.description { min-width: var(--descWidth); max-width: var(--descWidth); padding: 2px 0 0 4px; overflow: hidden; cursor: text; max-height: var(--thumbSize); }
.btn-tiny { font-size: var(--btntiny); color: var(--inactive); padding: 6px; cursor: pointer; z-index: 8; display: none; text-shadow: 1px 1px var(--title); }
.btn-tiny:hover { color: var(--foreground); }
.listtitle { font-weight: bold; margin: -4px 0 4px -4px; padding-left: 4px; padding-right: 24px; word-wrap: break-word; white-space: normal; line-height: 1.4rem; }
.thumbsize { height: 1rem; width: 100px; outline: none; border: none; margin: 0; }
input[type=range] { -webkit-appearance: none; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 1rem; cursor: pointer; background: var(--foreground); border-radius: 0; border: 1px; }
input[type=range]::-moz-range-track { width: 100%; height: 1rem; cursor: pointer; background: var(--foreground); border-radius: 0; border: 1px; }
input[type=range]::-webkit-slider-thumb { border: 1px solid #000000; margin-top: 0.1rem; height: 0.8rem; width: 0.6rem; background: var(--body); cursor: pointer; -webkit-appearance: none; }
input[type=range]::-moz-range-thumb { border: 1px solid #000000; margin-top: 0.1rem; height: 0.8rem; width: 0.6rem; background: var(--body); cursor: pointer; -webkit-appearance: none; }
.popup { background: var(--body); color: var(--background); overflow-x: hidden; overflow-y: auto; position: fixed; top: 5rem; left: 0; width: 100%; height: calc(100vh - 5rem); z-index: 10; display: none; }
.popup-image { width: 100%; height: 100%; }
.popup-canvas { pointer-events: none; z-index: 20; position: relative; }
.popup-details { margin: 0 0 0 10px; overflow: hidden; word-break: break-word; color: var(--text); z-index: 10; position: relative; }
.descicon { font-size: 1.4rem; }
.docs { background: var(--body); height: calc(100vh - 5rem); color: var(--text); overflow: scroll; position: fixed; top: 5rem; left: 0; width: 100%; padding: 10px; z-index: 10; display: none; border: none; }
.iframe { background: var(--body); height: calc(100vh - 5rem); color: var(--text); overflow: scroll; position: fixed; top: 5rem; left: 0; width: 100%; padding: 0; z-index: 10; display: none; border: none; }
.btn-close { float: right; }
.names { position: absolute; top: 15%; left: 10%; width: 80%; z-index: 99; padding: 8px; box-shadow: var(--shadow); background: var(--background); }
.install { font-size: 0.8rem; font-weight: bold; background: var(--foreground); color: black; position: fixed; bottom: 0; right: 0; width: -moz-fit-content; width: fit-content; padding: 6px 23px 4px 4px; text-align: center; cursor: pointer; z-index: 1; display: none; }
.video { background: var(--body); height: calc(100vh - 5rem);color: var(--text); overflow: scroll; position: fixed; top: 5rem; left: 0; width: 100%; padding: 10px; z-index: 10; display: none; }
.video-label { margin: 0; margin-right: 10px; display: block; }
.video-models { margin-right: 10px; }
.animfade { animation: fade 0.3s linear; }
@keyframes fade {
to { background: var(--dominant); }
}
.splash { width: 100%; height: 100%; z-index: 100; position: absolute; top: 0; left: 0; background: black; text-align: center; display: block; }
.palette { font-size: 2rem; line-height: 1.7rem; }
.loading { color: white; position: absolute; top: 220px; left: 50%; transform: translateX(-50%); }
.processing { position: relative; top: -78px; color: grey; font-size: 0.6rem; }
.busy { justify-content: center; text-align: center; align-items: center; position: fixed; bottom: 57px; display: none; padding-top: 20px; background: rgba(0, 0, 0, 0.5) }
.busy-dots { width: 1rem; height: 1rem; border-radius: 100%; margin: 1rem; background-image: linear-gradient(145deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0) 100%); animation: bounce 1.5s 0.5s linear infinite; }
@keyframes bounce {
0%, 50%, 100% { transform: scale(1); filter: blur(0px); }
25% { transform: scale(0.6); filter: blur(3px); }
75% { transform: scale(1.4); filter: blur(3px); }
}
.loader { width: 300px; height: 300px; border: 3px solid transparent; border-radius: 50%; border-top: 4px solid #f15e41; animation: spin 4s linear infinite; position: relative; }
.loader::before, .loader::after { content: ""; position: absolute; top: 6px; bottom: 6px; left: 6px; right: 6px; border-radius: 50%; border: 4px solid transparent; }
.loader::before { border-top-color: #bad375; animation: 3s spin linear infinite; }
.loader::after { border-top-color: #26a9e0; animation: spin 1.5s linear infinite; }
.icon { min-width: 64px; text-align: -webkit-center; text-align: -moz-center; filter: grayscale(1); padding: 0.5rem 1rem 0.5rem 1rem; }
.icon:hover { background: #505050; filter: grayscale(0); }
.iconsmall { min-width: 32px; text-align: -webkit-center; text-align: -moz-center; filter: grayscale(1); padding: 0.2rem 0.2rem 0.2rem 0.2rem; margin-right: 8px; }
.iconsmall:hover { filter: grayscale(0); }
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* fixes for other bundled styles */