1/** 2 * Colors 3 */ 4/** 5 * Breakpoints & Media Queries 6 */ 7/** 8 * SCSS Variables. 9 * 10 * Please use variables from this sheet to ensure consistency across the UI. 11 * Don't add to this sheet unless you're pretty sure the value will be reused in many places. 12 * For example, don't add rules to this sheet that affect block visuals. It's purely for UI. 13 */ 14/** 15 * Colors 16 */ 17/** 18 * Fonts & basic variables. 19 */ 20/** 21 * Grid System. 22 * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ 23 */ 24/** 25 * Dimensions. 26 */ 27/** 28 * Shadows. 29 */ 30/** 31 * Editor widths. 32 */ 33/** 34 * Block & Editor UI. 35 */ 36/** 37 * Block paddings. 38 */ 39/** 40 * React Native specific. 41 * These variables do not appear to be used anywhere else. 42 */ 43/** 44 * Breakpoint mixins 45 */ 46/** 47 * Long content fade mixin 48 * 49 * Creates a fading overlay to signify that the content is longer 50 * than the space allows. 51 */ 52/** 53 * Focus styles. 54 */ 55/** 56 * Applies editor left position to the selector passed as argument 57 */ 58/** 59 * Styles that are reused verbatim in a few places 60 */ 61/** 62 * Allows users to opt-out of animations via OS-level preferences. 63 */ 64/** 65 * Reset default styles for JavaScript UI based pages. 66 * This is a WP-admin agnostic reset 67 */ 68/** 69 * Reset the WP Admin page styles for Gutenberg-like pages. 70 */ 71.wp-block-social-links { 72 display: flex; 73 flex-wrap: wrap; 74 padding-left: 0; 75 padding-right: 0; 76 text-indent: 0; 77 margin-left: 0; 78} 79.wp-block-social-links .wp-social-link a, 80.wp-block-social-links .wp-social-link a:hover { 81 text-decoration: none; 82 border-bottom: 0; 83 box-shadow: none; 84} 85.wp-block-social-links .wp-social-link.wp-social-link.wp-social-link { 86 margin: 4px 8px 4px 0; 87} 88.wp-block-social-links .wp-social-link a { 89 padding: 0.25em; 90} 91.wp-block-social-links .wp-social-link svg { 92 width: 1em; 93 height: 1em; 94} 95.wp-block-social-links.has-small-icon-size { 96 font-size: 16px; 97} 98.wp-block-social-links, .wp-block-social-links.has-normal-icon-size { 99 font-size: 24px; 100} 101.wp-block-social-links.has-large-icon-size { 102 font-size: 36px; 103} 104.wp-block-social-links.has-huge-icon-size { 105 font-size: 48px; 106} 107.wp-block-social-links.aligncenter { 108 justify-content: center; 109 display: flex; 110} 111.wp-block-social-links.alignright { 112 justify-content: flex-end; 113} 114 115.wp-block-social-link { 116 display: block; 117 border-radius: 9999px; 118 transition: transform 0.1s ease; 119 height: auto; 120} 121@media (prefers-reduced-motion: reduce) { 122 .wp-block-social-link { 123 transition-duration: 0s; 124 transition-delay: 0s; 125 } 126} 127.wp-block-social-link a { 128 display: block; 129 line-height: 0; 130 transition: transform 0.1s ease; 131} 132.wp-block-social-link:hover { 133 transform: scale(1.1); 134} 135 136.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor, .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:hover, .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:active, .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:visited, 137.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor svg { 138 color: currentColor; 139 fill: currentColor; 140} 141 142.wp-block-social-links:not(.is-style-logos-only) .wp-social-link { 143 background-color: #f0f0f0; 144 color: #444; 145} 146.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-amazon { 147 background-color: #f90; 148 color: #fff; 149} 150.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-bandcamp { 151 background-color: #1ea0c3; 152 color: #fff; 153} 154.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-behance { 155 background-color: #0757fe; 156 color: #fff; 157} 158.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-codepen { 159 background-color: #1e1f26; 160 color: #fff; 161} 162.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-deviantart { 163 background-color: #02e49b; 164 color: #fff; 165} 166.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-dribbble { 167 background-color: #e94c89; 168 color: #fff; 169} 170.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-dropbox { 171 background-color: #4280ff; 172 color: #fff; 173} 174.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-etsy { 175 background-color: #f45800; 176 color: #fff; 177} 178.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-facebook { 179 background-color: #1778f2; 180 color: #fff; 181} 182.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-fivehundredpx { 183 background-color: #000; 184 color: #fff; 185} 186.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-flickr { 187 background-color: #0461dd; 188 color: #fff; 189} 190.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-foursquare { 191 background-color: #e65678; 192 color: #fff; 193} 194.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-github { 195 background-color: #24292d; 196 color: #fff; 197} 198.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-goodreads { 199 background-color: #eceadd; 200 color: #382110; 201} 202.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-google { 203 background-color: #ea4434; 204 color: #fff; 205} 206.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-instagram { 207 background-color: #f00075; 208 color: #fff; 209} 210.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-lastfm { 211 background-color: #e21b24; 212 color: #fff; 213} 214.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-linkedin { 215 background-color: #0d66c2; 216 color: #fff; 217} 218.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-mastodon { 219 background-color: #3288d4; 220 color: #fff; 221} 222.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-medium { 223 background-color: #02ab6c; 224 color: #fff; 225} 226.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-meetup { 227 background-color: #f6405f; 228 color: #fff; 229} 230.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-patreon { 231 background-color: #ff424d; 232 color: #fff; 233} 234.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-pinterest { 235 background-color: #e60122; 236 color: #fff; 237} 238.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-pocket { 239 background-color: #ef4155; 240 color: #fff; 241} 242.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-reddit { 243 background-color: #fe4500; 244 color: #fff; 245} 246.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-skype { 247 background-color: #0478d7; 248 color: #fff; 249} 250.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-snapchat { 251 background-color: #fefc00; 252 color: #fff; 253 stroke: #000; 254} 255.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-soundcloud { 256 background-color: #ff5600; 257 color: #fff; 258} 259.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-spotify { 260 background-color: #1bd760; 261 color: #fff; 262} 263.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-telegram { 264 background-color: #2aabee; 265 color: #fff; 266} 267.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-tiktok { 268 background-color: #000; 269 color: #fff; 270} 271.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-tumblr { 272 background-color: #011835; 273 color: #fff; 274} 275.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-twitch { 276 background-color: #6440a4; 277 color: #fff; 278} 279.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-twitter { 280 background-color: #1da1f2; 281 color: #fff; 282} 283.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-vimeo { 284 background-color: #1eb7ea; 285 color: #fff; 286} 287.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-vk { 288 background-color: #4680c2; 289 color: #fff; 290} 291.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-wordpress { 292 background-color: #3499cd; 293 color: #fff; 294} 295.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-yelp { 296 background-color: #d32422; 297 color: #fff; 298} 299.wp-block-social-links:not(.is-style-logos-only) .wp-social-link-youtube { 300 background-color: #f00; 301 color: #fff; 302} 303 304.wp-block-social-links.is-style-logos-only .wp-social-link { 305 background: none; 306 padding: 4px; 307} 308.wp-block-social-links.is-style-logos-only .wp-social-link-amazon { 309 color: #f90; 310} 311.wp-block-social-links.is-style-logos-only .wp-social-link-bandcamp { 312 color: #1ea0c3; 313} 314.wp-block-social-links.is-style-logos-only .wp-social-link-behance { 315 color: #0757fe; 316} 317.wp-block-social-links.is-style-logos-only .wp-social-link-codepen { 318 color: #1e1f26; 319} 320.wp-block-social-links.is-style-logos-only .wp-social-link-deviantart { 321 color: #02e49b; 322} 323.wp-block-social-links.is-style-logos-only .wp-social-link-dribbble { 324 color: #e94c89; 325} 326.wp-block-social-links.is-style-logos-only .wp-social-link-dropbox { 327 color: #4280ff; 328} 329.wp-block-social-links.is-style-logos-only .wp-social-link-etsy { 330 color: #f45800; 331} 332.wp-block-social-links.is-style-logos-only .wp-social-link-facebook { 333 color: #1778f2; 334} 335.wp-block-social-links.is-style-logos-only .wp-social-link-fivehundredpx { 336 color: #000; 337} 338.wp-block-social-links.is-style-logos-only .wp-social-link-flickr { 339 color: #0461dd; 340} 341.wp-block-social-links.is-style-logos-only .wp-social-link-foursquare { 342 color: #e65678; 343} 344.wp-block-social-links.is-style-logos-only .wp-social-link-github { 345 color: #24292d; 346} 347.wp-block-social-links.is-style-logos-only .wp-social-link-goodreads { 348 color: #382110; 349} 350.wp-block-social-links.is-style-logos-only .wp-social-link-google { 351 color: #ea4434; 352} 353.wp-block-social-links.is-style-logos-only .wp-social-link-instagram { 354 color: #f00075; 355} 356.wp-block-social-links.is-style-logos-only .wp-social-link-lastfm { 357 color: #e21b24; 358} 359.wp-block-social-links.is-style-logos-only .wp-social-link-linkedin { 360 color: #0d66c2; 361} 362.wp-block-social-links.is-style-logos-only .wp-social-link-mastodon { 363 color: #3288d4; 364} 365.wp-block-social-links.is-style-logos-only .wp-social-link-medium { 366 color: #02ab6c; 367} 368.wp-block-social-links.is-style-logos-only .wp-social-link-meetup { 369 color: #f6405f; 370} 371.wp-block-social-links.is-style-logos-only .wp-social-link-patreon { 372 color: #ff424d; 373} 374.wp-block-social-links.is-style-logos-only .wp-social-link-pinterest { 375 color: #e60122; 376} 377.wp-block-social-links.is-style-logos-only .wp-social-link-pocket { 378 color: #ef4155; 379} 380.wp-block-social-links.is-style-logos-only .wp-social-link-reddit { 381 color: #fe4500; 382} 383.wp-block-social-links.is-style-logos-only .wp-social-link-skype { 384 color: #0478d7; 385} 386.wp-block-social-links.is-style-logos-only .wp-social-link-snapchat { 387 color: #fff; 388 stroke: #000; 389} 390.wp-block-social-links.is-style-logos-only .wp-social-link-soundcloud { 391 color: #ff5600; 392} 393.wp-block-social-links.is-style-logos-only .wp-social-link-spotify { 394 color: #1bd760; 395} 396.wp-block-social-links.is-style-logos-only .wp-social-link-telegram { 397 color: #2aabee; 398} 399.wp-block-social-links.is-style-logos-only .wp-social-link-tiktok { 400 color: #000; 401} 402.wp-block-social-links.is-style-logos-only .wp-social-link-tumblr { 403 color: #011835; 404} 405.wp-block-social-links.is-style-logos-only .wp-social-link-twitch { 406 color: #6440a4; 407} 408.wp-block-social-links.is-style-logos-only .wp-social-link-twitter { 409 color: #1da1f2; 410} 411.wp-block-social-links.is-style-logos-only .wp-social-link-vimeo { 412 color: #1eb7ea; 413} 414.wp-block-social-links.is-style-logos-only .wp-social-link-vk { 415 color: #4680c2; 416} 417.wp-block-social-links.is-style-logos-only .wp-social-link-wordpress { 418 color: #3499cd; 419} 420.wp-block-social-links.is-style-logos-only .wp-social-link-yelp { 421 color: #d32422; 422} 423.wp-block-social-links.is-style-logos-only .wp-social-link-youtube { 424 color: #f00; 425} 426 427.wp-block-social-links.is-style-pill-shape .wp-social-link { 428 width: auto; 429} 430.wp-block-social-links.is-style-pill-shape .wp-social-link a { 431 padding-left: calc((2/3) * 1em); 432 padding-right: calc((2/3) * 1em); 433}