|
1 | | -/*! |
2 | | - * Hux Blog v1.7.0 (http://huxpro.github.io) |
3 | | - * Copyright 2017 Hux <[email protected]> |
4 | | - */ |
5 | | - |
6 | 1 | @media (min-width: 1200px) { |
7 | 2 | .post-container, |
8 | 3 | .sidebar-container { |
|
19 | 14 | font-size: 14px; |
20 | 15 | } |
21 | 16 | .sidebar-container h5 { |
22 | | - color: #808080; |
| 17 | + color: #cccccc; |
23 | 18 | padding-bottom: 1em; |
24 | 19 | } |
25 | 20 | .sidebar-container h5 a { |
26 | | - color: #808080 !important; |
| 21 | + color: #cccccc !important; |
27 | 22 | text-decoration: none; |
28 | 23 | } |
29 | 24 | .sidebar-container a { |
|
134 | 129 | display: none; |
135 | 130 | } |
136 | 131 | } |
| 132 | +/* |
| 133 | + Please note this CSS is currently in prototype form. We'll implement a cleaned up version in Web Starter Kit. |
| 134 | +*/ |
| 135 | +.paper-snackbar { |
| 136 | + transition-property: opacity, bottom, left, right, width, margin, border-radius; |
| 137 | + transition-duration: 0.5s; |
| 138 | + transition-timing-function: ease; |
| 139 | + /*font-family: RobotoDraft;*/ |
| 140 | + font-size: 14px; |
| 141 | + min-height: 14px; |
| 142 | + background-color: #323232; |
| 143 | + background-color: #0085a1; |
| 144 | + position: fixed; |
| 145 | + display: flex; |
| 146 | + justify-content: space-between; |
| 147 | + align-items: center; |
| 148 | + color: white; |
| 149 | + line-height: 22px; |
| 150 | + padding: 18px 24px; |
| 151 | + bottom: 0px; |
| 152 | + opacity: 0; |
| 153 | +} |
| 154 | +@media (min-width: 640px) { |
| 155 | + .paper-snackbar { |
| 156 | + /* |
| 157 | + Desktop: |
| 158 | + Single-line snackbar height: 48 dp tall |
| 159 | + Minimum width: 288 dp |
| 160 | + Maximum width: 568 dp |
| 161 | + 2 dp rounded corner |
| 162 | + Text: Roboto Regular 14 sp |
| 163 | + Action button: Roboto Medium 14 sp, all-caps text |
| 164 | + Default background fill: #323232 100% |
| 165 | + */ |
| 166 | + min-width: 288px; |
| 167 | + max-width: 568px; |
| 168 | + display: inline-flex; |
| 169 | + border-radius: 2px; |
| 170 | + margin: 24px; |
| 171 | + bottom: -100px; |
| 172 | + } |
| 173 | +} |
| 174 | +@media (max-width: 640px) { |
| 175 | + .paper-snackbar { |
| 176 | + /* |
| 177 | + Mobile: |
| 178 | + Single-line snackbar height: 48 dp |
| 179 | + Multi-line snackbar height: 80 dp |
| 180 | + Text: Roboto Regular 14 sp |
| 181 | + Action button: Roboto Medium 14 sp, all-caps text |
| 182 | + Default background fill: #323232 100% |
| 183 | + */ |
| 184 | + left: 0px; |
| 185 | + right: 0px; |
| 186 | + } |
| 187 | +} |
| 188 | +.paper-snackbar .action { |
| 189 | + background: inherit; |
| 190 | + display: inline-block; |
| 191 | + border: none; |
| 192 | + font-size: inherit; |
| 193 | + text-transform: uppercase; |
| 194 | + color: #ffeb3b; |
| 195 | + margin: 0px 0px 0px 24px; |
| 196 | + padding: 0px; |
| 197 | + min-width: min-content; |
| 198 | + outline: 0px; |
| 199 | +} |
| 200 | +/* Everything from here down is actually just for the demo - the material buttons and card, and various other pieces of styling */ |
| 201 | +/* Variables */ |
| 202 | +/* Buttons */ |
| 203 | +.paper-button { |
| 204 | + position: relative; |
| 205 | + padding: 4px 0; |
| 206 | + margin: 1em; |
| 207 | + width: 160px; |
| 208 | + overflow: hidden; |
| 209 | + user-select: none; |
| 210 | + color: #000000; |
| 211 | + text-transform: uppercase; |
| 212 | + border-radius: 3px; |
| 213 | + outline-color: #cccccc; |
| 214 | +} |
| 215 | +.paper-button:hover { |
| 216 | + cursor: pointer; |
| 217 | +} |
| 218 | +.paper-button button, |
| 219 | +.paper-button input[type="submit"] { |
| 220 | + background: inherit; |
| 221 | + border: none; |
| 222 | + display: block; |
| 223 | + width: 100%; |
| 224 | + height: 100%; |
| 225 | + /*font-family: 'Roboto';*/ |
| 226 | + font-size: 1em; |
| 227 | + color: #000000; |
| 228 | + text-transform: uppercase; |
| 229 | +} |
| 230 | +.paper-button.colored, |
| 231 | +.paper-button.colored button { |
| 232 | + color: #4285f4; |
| 233 | +} |
| 234 | +.paper-button.raised-button.colored { |
| 235 | + background-color: #4285f4; |
| 236 | +} |
| 237 | +.paper-button .raised-button { |
| 238 | + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); |
| 239 | +} |
| 240 | +.paper-button.raised-button.colored { |
| 241 | + background: #4285f4; |
| 242 | + color: #fff; |
| 243 | +} |
| 244 | +.paper-button[disabled] { |
| 245 | + background-color: #EAEAEA !important; |
| 246 | + color: #A8A8A8 !important; |
| 247 | + cursor: auto; |
| 248 | +} |
| 249 | +.paper-button:hover { |
| 250 | + background-color: #EAEAEA; |
| 251 | +} |
| 252 | +.paper-button.raised-button.colored:hover { |
| 253 | + background-color: #3367d6; |
| 254 | +} |
| 255 | +button.paper-button { |
| 256 | + border: 0; |
| 257 | + /*font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;*/ |
| 258 | + font-size: 1em; |
| 259 | + line-height: 25px; |
| 260 | + background-color: #ffffff; |
| 261 | +} |
| 262 | +.paper-button input[type="submit"] { |
| 263 | + outline-color: #cccccc; |
| 264 | +} |
| 265 | +.paper-button.colored.raised-button input[type="submit"] { |
| 266 | + color: #ffffff; |
| 267 | +} |
| 268 | +/** Shadows **/ |
| 269 | +.paper-shadow-animated.paper-shadow { |
| 270 | + transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); |
| 271 | +} |
| 272 | +.paper-shadow-top-z-1 { |
| 273 | + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16); |
| 274 | +} |
| 275 | +.paper-shadow-bottom-z-1 { |
| 276 | + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); |
| 277 | +} |
| 278 | +.paper-shadow-top-z-2 { |
| 279 | + box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19); |
| 280 | +} |
| 281 | +.paper-shadow-bottom-z-2 { |
| 282 | + box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); |
| 283 | +} |
| 284 | +.paper-shadow-top-z-3 { |
| 285 | + box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.19); |
| 286 | +} |
| 287 | +.paper-shadow-bottom-z-3 { |
| 288 | + box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24); |
| 289 | +} |
| 290 | +.paper-shadow-top-z-4 { |
| 291 | + box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21); |
| 292 | +} |
| 293 | +/** Card **/ |
| 294 | +.card { |
| 295 | + background: white; |
| 296 | + width: 300px; |
| 297 | + height: 300px; |
| 298 | + position: relative; |
| 299 | + margin: 16px; |
| 300 | + border-radius: 2px; |
| 301 | +} |
137 | 302 | body { |
138 | 303 | /* Hux learn from |
139 | 304 | * TypeIsBeautiful, |
@@ -181,7 +346,7 @@ article { |
181 | 346 | overflow-x: hidden; |
182 | 347 | } |
183 | 348 | blockquote { |
184 | | - color: #808080; |
| 349 | + color: #cccccc; |
185 | 350 | font-style: italic; |
186 | 351 | font-size: 0.95em; |
187 | 352 | margin: 20px 0 20px; |
@@ -315,7 +480,7 @@ pre code { |
315 | 480 | width: 100%; |
316 | 481 | } |
317 | 482 | .post-container .pager li > a > span { |
318 | | - color: #808080; |
| 483 | + color: #cccccc; |
319 | 484 | font-weight: normal; |
320 | 485 | letter-spacing: 0.5px; |
321 | 486 | } |
@@ -503,7 +668,7 @@ pre code { |
503 | 668 | } |
504 | 669 | .intro-header { |
505 | 670 | background: no-repeat center center; |
506 | | - background-color: #808080; |
| 671 | + background-color: #cccccc; |
507 | 672 | background-attachment: scroll; |
508 | 673 | -webkit-background-size: cover; |
509 | 674 | -moz-background-size: cover; |
@@ -633,7 +798,7 @@ pre code { |
633 | 798 | } |
634 | 799 | .post-preview > .post-meta { |
635 | 800 | font-family: 'Lora', 'Times New Roman', serif; |
636 | | - color: #808080; |
| 801 | + color: #cccccc; |
637 | 802 | font-size: 16px; |
638 | 803 | font-style: italic; |
639 | 804 | margin-top: 0; |
@@ -826,7 +991,7 @@ form .row:first-child .floating-label-form-group { |
826 | 991 | .pager .disabled > a:hover, |
827 | 992 | .pager .disabled > a:focus, |
828 | 993 | .pager .disabled > span { |
829 | | - color: #808080; |
| 994 | + color: #cccccc; |
830 | 995 | background-color: #404040; |
831 | 996 | cursor: not-allowed; |
832 | 997 | } |
|
0 commit comments