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