1 | @font-face { |
2 | font-family: 'PT Sans'; |
3 | src: url("https://fonts.googleapis.com/css?family=PT+Sans:700&subset=latin,latin-ext"); |
4 | } |
5 | body{font-family:'PT Sans', sans-serif;} |
6 | img{ |
7 | width:100%; |
8 | } |
9 | h1{ |
10 | text-align:center; |
11 | font-size: 5vw; |
12 | } |
13 | h2{ |
14 | font-size:4vw; |
15 | } |
16 | ul{ |
17 | list-style-type:none; |
18 | } |
19 | footer{ |
20 | width:100%; |
21 | text-align:center; |
22 | } |
23 | .conta{ |
24 | display:block; |
25 | text-decoration:none; |
26 | color: #47A7A6; |
27 | text-align:center; |
28 | font-size: 4vw; |
29 | } |
30 | p{ |
31 | text-align:center; |
32 | font-size:4vw; |
33 | } |
34 | input[type="submit"] { |
35 | border: 0.5px solid #FE6363; |
36 | -webkit-box-shadow: #A7A8A8 1px 1px 1px; |
37 | -moz-box-shadow: #A7A8A8 1px 1px 1px; |
38 | box-shadow: #A7A8A8 1px 1px 1px; |
39 | -webkit-border-radius: 8px; |
40 | -moz-border-radius: 8px; |
41 | border-radius: 8px; |
42 | font-size: 5vw; |
43 | font-family: 'PT Sans',sans-serif; |
44 | padding: 7px 7px 7px 7px; |
45 | text-decoration: none; |
46 | text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); |
47 | font-weight: bold; |
48 | color: #FFFFFF; |
49 | background-color: #FE6363; |
50 | background-image: -webkit-gradient(linear, left top, left bottom, from(#FE6363), to(#D45353)); |
51 | background-image: -webkit-linear-gradient(top, #FE6363, #D45353); |
52 | background-image: -moz-linear-gradient(top, #FE6363, #D45353); |
53 | background-image: -ms-linear-gradient(top, #FE6363, #D45353); |
54 | background-image: -o-linear-gradient(top, #FE6363, #D45353); |
55 | background-image: linear-gradient(to bottom, #FE6363, #D45353); |
56 | filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FE6363, endColorstr=#D45353); |
57 | width: 95%; |
58 | height:15%; |
59 | text-align:center; |
60 | margin-top: 20px; |
61 | } |
62 | |
63 | input[type="submit"]:hover { |
64 | border: 1px solid #FE6363; |
65 | background-color: #FE6363; |
66 | background-image: -webkit-gradient(linear, left top, left bottom, from(#FE6363), to(#FE6363)); |
67 | background-image: -webkit-linear-gradient(top, #FE6363, #FE6363); |
68 | background-image: -moz-linear-gradient(top, #FE6363, #FE6363); |
69 | background-image: -ms-linear-gradient(top, #FE6363, #FE6363); |
70 | background-image: -o-linear-gradient(top, #FE6363, #FE6363); |
71 | background-image: linear-gradient(to bottom, #FE6363, #FE6363); |
72 | filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FE6363, endColorstr=#FE6363); |
73 | } |
74 | input[type="text"]{ |
75 | border-left:none; |
76 | border-right:none; |
77 | border-top:none; |
78 | border-bottom: 1px solid black; |
79 | width:104%; |
80 | text-align:center; |
81 | height:20%; |
82 | font-size:7vw; |
83 | margin-left:-5%; |
84 | } |
85 | #talk{ |
86 | text-align:center; |
87 | } |
88 | .lolul{ |
89 | text-align:center; |
90 | width:100%; |
91 | margin:auto; |
92 | } |
93 | li{ |
94 | text-align:left; |
95 | font-size: 4vw; |
96 | } |
97 | [hidden] { |
98 | display: none; |
99 | } |
100 | |
101 | .visually-hidden { |
102 | position: absolute; |
103 | clip: rect(0, 0, 0, 0); |
104 | } |
105 | |
106 | div.awesomplete { |
107 | display: inline-block; |
108 | position: relative; |
109 | text-align:center; |
110 | } |
111 | |
112 | div.awesomplete > input { |
113 | display: block; |
114 | } |
115 | |
116 | div.awesomplete > ul { |
117 | position: absolute; |
118 | left: 0; |
119 | z-index: 1; |
120 | min-width: 112%; |
121 | box-sizing: border-box; |
122 | list-style: none; |
123 | padding: 0; |
124 | border-radius: .3em; |
125 | margin: .2em 0 0; |
126 | background-color: white; |
127 | border: 1px solid rgba(0, 0, 0, .3); |
128 | box-shadow: .05em .2em .6em rgba(0, 0, 0, .2); |
129 | text-shadow: none; |
130 | margin-left:-4%; |
131 | margin-top: 4%; |
132 | display:block; |
133 | } |
134 | |
135 | div.awesomplete > ul[hidden], |
136 | div.awesomplete > ul:empty { |
137 | display: none; |
138 | } |
139 | |
140 | @supports (transform: scale(0)) { |
141 | div.awesomplete > ul { |
142 | transition: .3s cubic-bezier(.4, .2, .5, 1.4); |
143 | transform-origin: 1.43em -.43em; |
144 | } |
145 | div.awesomplete > ul[hidden], |
146 | div.awesomplete > ul:empty { |
147 | opacity: 0; |
148 | transform: scale(0); |
149 | display: block; |
150 | transition-timing-function: ease; |
151 | } |
152 | } |
153 | |
154 | |
155 | /* Pointer */ |
156 | |
157 | div.awesomplete > ul:before { |
158 | content: ""; |
159 | position: absolute; |
160 | top: -.43em; |
161 | left: 1em; |
162 | width: 0; |
163 | height: 0; |
164 | padding: .4em; |
165 | background: white; |
166 | border: inherit; |
167 | border-right: 0; |
168 | border-bottom: 0; |
169 | -webkit-transform: rotate(45deg); |
170 | transform: rotate(45deg); |
171 | } |
172 | |
173 | div.awesomplete > ul > li { |
174 | position: relative; |
175 | padding: .2em .5em; |
176 | cursor: pointer; |
177 | } |
178 | |
179 | div.awesomplete > ul > li:hover { |
180 | background: hsl(200, 40%, 80%); |
181 | color: black; |
182 | } |
183 | |
184 | div.awesomplete > ul > li[aria-selected="true"] { |
185 | background: hsl(205, 40%, 40%); |
186 | color: white; |
187 | } |
188 | |
189 | div.awesomplete mark { |
190 | background: hsl(65, 100%, 50%); |
191 | } |
192 | |
193 | div.awesomplete li:hover mark { |
194 | background: hsl(68, 100%, 41%); |
195 | } |
196 | |
197 | div.awesomplete li[aria-selected="true"] mark { |
198 | background: hsl(86, 100%, 21%); |
199 | color: inherit; |
200 | } |
201 | .result{ |
202 | margin-top: 5%; |
203 | font-size: 4vw; |
204 | } |
205 | .coolbox{ |
206 | border: solid 2px #c9c9c9; |
207 | width:90%; |
208 | height:20%; |
209 | display:table; |
210 | font-family:'PT Sans', sans-serif; |
211 | } |
212 | .coolbox .boxtitle{ |
213 | background: #c9c9c9; |
214 | text-align:center; |
215 | height:10%; |
216 | display:table-cell; |
217 | font-size:3vw; |
218 | font-family:'PT Sans', sans-serif; |
219 | vertical-align: middle; |
220 | width:5%; |
221 | padding:0; |
222 | } |
223 | .coolbox .boxtitle h1{ |
224 | -webkit-transform: rotate(-90deg); |
225 | -moz-transform: rotate(-90deg); |
226 | -ms-transform: rotate(-90deg); |
227 | -o-transform: rotate(-90deg); |
228 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); |
229 | font-size:4vw; |
230 | } |
231 | .coolbox .boxcontent{ |
232 | background:#fcfcfc |
233 | height:5%; |
234 | display:table-row; |
235 | font-size:3vw; |
236 | font-family:'PT Sans', sans-serif; |
237 | vertical-align: middle; |
238 | display:flex; |
239 | align-items:center; |
240 | width:90%; |
241 | } |
242 | .coolbox p{ |
243 | font-size:4vw; |
244 | font-family:'PT Sans', sans-serif; |
245 | } |
246 | .boxcontainer{ |
247 | display:inline-block; |
248 | width:90%; |
249 | margin: 0 auto; |
250 | } |
251 | .boxcontainercontainer{ |
252 | text-align:center |
253 | } |
254 | .coolbox a{ |
255 | text-decoration:none; |
256 | color: #47A7A6; |
257 | } |
Travelled to 12 computer(s): aoiabmzegqzx, bhatertpkbcr, cbybwowwnfue, gwrvuhgaqvyk, ishqpsrjomds, lpdgvwnxivlt, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tslmcundralx, tvejysmllsmz, vouqrxazstgt
No comments. add comment
Snippet ID: | #1002254 |
Snippet name: | mobile stylesheet |
Eternal ID of this version: | #1002254/1 |
Text MD5: | 3df2bc2e80bfd939f7383be7f0ebe76d |
Author: | bgrgndz |
Category: | |
Type: | Document |
Public (visible to everyone): | Yes |
Archived (hidden from active list): | No |
Created/modified: | 2016-01-22 18:16:55 |
Source code size: | 6090 bytes / 257 lines |
Pitched / IR pitched: | No / No |
Views / Downloads: | 765 / 1756 |
Referenced in: | [show references] |