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: white; |
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: #000000; |
141 | color: #636363; |
142 | float: left; |
143 | |
144 | } |
145 | |
146 | body {
|
147 | background-color: #000000; |
148 | font-family: 'PT Sans', sans-serif; |
149 | color: #FFFFFF; |
150 | } |
151 | |
152 | .talk-h2 {
|
153 | font-family: 'PT Sans', sans-serif; |
154 | font-size: 72px; |
155 | text-align: center; |
156 | } |
157 | |
158 | .talk-h3 {
|
159 | font-family: 'PT Sans', sans-serif; |
160 | font-size: 40px; |
161 | text-align: center; |
162 | } |
163 | |
164 | .content p {
|
165 | font-family: 'PT Sans', sans-serif; |
166 | font-size: 24px; |
167 | color: #636363; |
168 | margin-left: 5%; |
169 | } |
170 | |
171 | .talk-li {
|
172 | color: #FE6363; |
173 | font-size: 30px; |
174 | list-style-type: none; |
175 | font-family: 'PT Sans', sans-serif; |
176 | } |
177 | |
178 | span {
|
179 | color: #FE6363; |
180 | } |
181 | |
182 | .submit {
|
183 | border: 0.5px solid #FE6363; |
184 | -webkit-box-shadow: #A7A8A8 1px 1px 1px; |
185 | -moz-box-shadow: #A7A8A8 1px 1px 1px; |
186 | box-shadow: #A7A8A8 1px 1px 1px; |
187 | -webkit-border-radius: 8px; |
188 | -moz-border-radius: 8px; |
189 | border-radius: 8px; |
190 | font-size: 20px; |
191 | font-family: 'PT Sans', sans-serif; |
192 | padding: 10px 10px 10px 10px; |
193 | text-decoration: none; |
194 | display: inline-block; |
195 | text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); |
196 | font-weight: bold; |
197 | color: #FFFFFF; |
198 | background-color: #FE6363; |
199 | background-image: -webkit-gradient(linear, left top, left bottom, from(#FE6363), to(#D45353)); |
200 | background-image: -webkit-linear-gradient(top, #FE6363, #D45353); |
201 | background-image: -moz-linear-gradient(top, #FE6363, #D45353); |
202 | background-image: -ms-linear-gradient(top, #FE6363, #D45353); |
203 | background-image: -o-linear-gradient(top, #FE6363, #D45353); |
204 | background-image: linear-gradient(to bottom, #FE6363, #D45353); |
205 | filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FE6363, endColorstr=#D45353); |
206 | float: right; |
207 | } |
208 | |
209 | .submit:hover {
|
210 | border: 1px solid #FE6363; |
211 | background-color: #FE6363; |
212 | background-image: -webkit-gradient(linear, left top, left bottom, from(#FE6363), to(#FE6363)); |
213 | background-image: -webkit-linear-gradient(top, #FE6363, #FE6363); |
214 | background-image: -moz-linear-gradient(top, #FE6363, #FE6363); |
215 | background-image: -ms-linear-gradient(top, #FE6363, #FE6363); |
216 | background-image: -o-linear-gradient(top, #FE6363, #FE6363); |
217 | background-image: linear-gradient(to bottom, #FE6363, #FE6363); |
218 | filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#FE6363, endColorstr=#FE6363); |
219 | } |
220 | |
221 | #img {
|
222 | width:100%; |
223 | text-align:center; |
224 | } |
225 | img{
|
226 | width:auto; |
227 | height:auto; |
228 | display:inline-block; |
229 | } |
230 | form{
|
231 | width:100%; |
232 | } |
233 | .coolbox{
|
234 | border: solid 2px #c9c9c9; |
235 | width:300px; |
236 | height:150px; |
237 | display:table; |
238 | font-family:'PT Sans', sans-serif; |
239 | margin-top:12%; |
240 | } |
241 | .coolbox .boxtitle{
|
242 | background: #c9c9c9; |
243 | text-align:center; |
244 | height:20px; |
245 | display:table-cell; |
246 | font-size:10px; |
247 | font-family:'PT Sans', sans-serif; |
248 | vertical-align: middle; |
249 | width:300px; |
250 | padding:0; |
251 | } |
252 | .coolbox .boxtitle h1{
|
253 | -webkit-transform: rotate(-90deg); |
254 | -moz-transform: rotate(-90deg); |
255 | -ms-transform: rotate(-90deg); |
256 | -o-transform: rotate(-90deg); |
257 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); |
258 | } |
259 | .coolbox .boxcontent{
|
260 | background:#fcfcfc |
261 | height:130px; |
262 | display:table-row; |
263 | font-size:16px; |
264 | font-family:'PT Sans', sans-serif; |
265 | vertical-align: middle; |
266 | display:flex; |
267 | align-items:center; |
268 | width:300px; |
269 | } |
270 | .coolbox p{
|
271 | font-size:16px; |
272 | font-family:'PT Sans', sans-serif; |
273 | } |
Began life as a copy of #1002160
Travelled to 12 computer(s): aoiabmzegqzx, bhatertpkbcr, cbybwowwnfue, gwrvuhgaqvyk, ishqpsrjomds, lpdgvwnxivlt, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tslmcundralx, tvejysmllsmz, vouqrxazstgt
No comments. add comment
| Snippet ID: | #1002603 |
| Snippet name: | talk-stylesheet sister (black background) |
| Eternal ID of this version: | #1002603/1 |
| Text MD5: | 593bfc1aa5b0190a7c275c600613480a |
| Author: | stefan |
| Category: | |
| Type: | Document |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2016-02-05 01:36:57 |
| Source code size: | 6341 bytes / 273 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 597 / 662 |
| Referenced in: | [show references] |