style.css - webgbcam - [fork] gameboy webcam
HTML git clone git://src.adamsgaard.dk/webgbcam
DIR Log
DIR Files
DIR Refs
DIR README
DIR LICENSE
---
style.css (2659B)
---
1 html, body{
2 margin: 0;
3 padding: 0;
4 height: 100%;
5 width: 100%;
6 touch-action: manipulation;
7 }
8
9 body {
10 background: url("ui/bg.png");
11 text-align: center;
12 font: 12px sans-serif;
13 }
14
15 .centered {
16 text-align: center !important;
17 }
18
19 .maple-window {
20 margin: 5px;
21 vertical-align: top;
22 display: inline-block;
23 border-width: 26px 12px 20px 12px;
24 border-style: solid;
25 border-image: url("ui/mac-frame.png") 30 40 22 22 fill repeat;
26 border-image-width: 30px 40px 22px 22px;
27 color: #000;
28 position: relative;
29 text-align: left;
30 font-size: 12px;
31 font-family: geneva, sans-serif;
32 min-width: 200px;
33 box-sizing: border-box;
34 }
35
36 .maple-window a {
37 color: #9999cc;
38 text-shadow: none;
39 }
40 .maple-window a:hover {
41 color: #ccccff;
42 }
43
44 .maple-window-title {
45 position: absolute;
46 top: -23px;
47 text-align: center;
48 width: 100%;
49 left: 0;
50 }
51
52 .maple-window-title > span {
53 background: #ccc;
54 padding: 1px 5px 1px 5px;
55 font-size: 12px;
56 font-weight: bold;
57 font-family: chicago, sans-serif;
58 /*vertical-align: middle;*/
59 margin-right: 20px;
60 white-space: nowrap;
61 }
62
63 /*#camera {
64 position: fixed;
65 left: 50%;
66 top: 50%;
67 transform: translate(-50%, -50%);
68 }*/
69
70 #app-view {
71 height: 100%;
72 width: 100%;
73 /*image-rendering: -moz-crisp-edges;
74 image-rendering: -webkit-optimize-contrast;
75 image-rendering: -o-crisp-edges;
76 image-rendering: crisp-edges;*/
77 }
78
79 #camera-stream, #camera-output, #camera-view, .hidden {
80 display: none;
81 }
82
83 .button {
84 width: 200px;
85 background-color: black;
86 color: white;
87 font-size: 16px;
88 border-radius: 30px;
89 border: none;
90 padding: 15px 20px;
91 text-align: center;
92 box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
93 /*position: fixed;
94 bottom: 30px;
95 left: calc(50% - 100px);*/
96 }
97 .right {
98 float: right;
99 }
100
101 .modal {
102 position: absolute;
103 top: 0;
104 left: 0;
105 max-width: 80%;
106 max-height: 80%;
107 transform: translate(calc(50vw - 50%),calc(50vh - 50%));
108 }
109
110 #gif-img {
111 object-fit: scale-down;
112 max-width:100%;
113 display: block;
114 margin: auto;
115 }
116 #gif-buttons {
117 margin: .5em;
118 }
119
120 .blink {
121 color: #f00;
122 text-align: center;
123 animation: blink-animation 1s steps(5, start) 4;
124 -webkit-animation: blink-animation 1s steps(5, start) 4;
125 }
126 @keyframes blink-animation {
127 to {
128 visibility: hidden;
129 }
130 }
131 @-webkit-keyframes blink-animation {
132 to {
133 visibility: hidden;
134 }
135 }
136
137 ul {
138 margin-top: -1em;
139 padding: 0;
140 list-style: none;
141 }
142
143 #main-app-window {
144 width: 98%;
145 top: 48%;
146 transform: translateY(-50%);
147 }
148
149 #camera {
150 display: inline-block;
151 width: 100%;
152 }
153
154 @media (orientation:landscape) {
155 #main-app-window {
156 width: unset;
157 height: 98%;
158 top: unset;
159 transform: unset;
160 }
161
162 #camera {
163 width: unset;
164 height: calc(100% - 2rem);
165 }
166