customize-widgets.css (12565B)
1 .wp-full-overlay-sidebar { 2 overflow: visible; 3 } 4 5 /** 6 * Hide all sidebar sections by default, only show them (via JS) once the 7 * preview loads and we know whether the sidebars are used in the template. 8 */ 9 10 .control-section.control-section-sidebar, 11 .customize-control-sidebar_widgets label, 12 .customize-control-sidebar_widgets .hide-if-js { 13 /* The link in .customize-control-sidebar_widgets .hide-if-js will fail if it ever gets used. */ 14 display: none; 15 } 16 17 .control-section.control-section-sidebar .accordion-section-content.ui-sortable { 18 overflow: visible; 19 } 20 21 /* Note: widget-tops are more compact when (max-height: 700px) and (min-width: 981px). */ 22 .customize-control-widget_form .widget-top { 23 background: #fff; 24 transition: opacity 0.5s; 25 } 26 27 .customize-control .widget-action { 28 color: #787c82; 29 } 30 31 .customize-control .widget-top:hover .widget-action, 32 .customize-control .widget-action:focus { 33 color: #1d2327; 34 } 35 36 .customize-control-widget_form:not(.widget-rendered) .widget-top { 37 opacity: 0.5; 38 } 39 40 .customize-control-widget_form .widget-control-save { 41 display: none; 42 } 43 44 .customize-control-widget_form .spinner { 45 visibility: hidden; 46 margin-top: 0; 47 } 48 49 .customize-control-widget_form.previewer-loading .spinner { 50 visibility: visible; 51 } 52 53 .customize-control-widget_form.widget-form-disabled .widget-content { 54 opacity: 0.7; 55 pointer-events: none; 56 -webkit-user-select: none; 57 user-select: none; 58 } 59 60 .customize-control-widget_form .widget { 61 margin-bottom: 0; 62 } 63 64 .customize-control-widget_form.wide-widget-control .widget-inside { 65 position: fixed; 66 left: 299px; 67 top: 25%; 68 border: 1px solid #dcdcde; 69 overflow: auto; 70 } 71 .customize-control-widget_form.wide-widget-control .widget-inside > .form { 72 padding: 20px; 73 } 74 75 .customize-control-widget_form.wide-widget-control .widget-top { 76 transition: background-color 0.4s; 77 } 78 .customize-control-widget_form.wide-widget-control.expanding .widget-top, 79 .customize-control-widget_form.wide-widget-control.expanded:not(.collapsing) .widget-top { 80 background-color: #dcdcde; 81 } 82 83 .widget-inside { 84 padding: 1px 10px 10px 10px; 85 border-top: none; 86 line-height: 1.23076923; 87 } 88 89 .customize-control-widget_form.expanded .widget-action .toggle-indicator:before { 90 content: "\f142"; 91 } 92 93 .customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before { 94 content: "\f139"; 95 } 96 97 .customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before { 98 content: "\f141"; 99 } 100 101 .widget-title-action { 102 cursor: pointer; 103 } 104 105 .widget-top, 106 .customize-control-widget_form .widget .customize-control-title { 107 cursor: move; 108 } 109 110 .control-section.accordion-section.highlighted > .accordion-section-title, 111 .customize-control-widget_form.highlighted { 112 outline: none; 113 box-shadow: 0 0 2px rgba(79, 148, 212, 0.8); 114 position: relative; 115 z-index: 1; 116 } 117 118 #widget-customizer-control-templates { 119 display: none; 120 } 121 122 /** 123 * Widget reordering styles 124 */ 125 126 #customize-theme-controls .widget-reorder-nav { 127 display: none; 128 float: right; 129 background-color: #f6f7f7; 130 } 131 132 .move-widget:before { 133 content: "\f504"; 134 } 135 136 #customize-theme-controls .move-widget-area { 137 display: none; 138 background: #fff; 139 border: 1px solid #c3c4c7; 140 border-top: none; 141 cursor: auto; 142 } 143 144 #customize-theme-controls .reordering .move-widget-area.active { 145 display: block; 146 } 147 148 #customize-theme-controls .move-widget-area .description { 149 margin: 0; 150 padding: 15px 20px; 151 font-weight: 400; 152 } 153 154 #customize-theme-controls .widget-area-select { 155 margin: 0; 156 padding: 0; 157 list-style: none; 158 } 159 160 #customize-theme-controls .widget-area-select li { 161 position: relative; 162 margin: 0; 163 padding: 13px 15px 15px 42px; 164 color: #50575e; 165 border-top: 1px solid #c3c4c7; 166 cursor: pointer; 167 -webkit-user-select: none; 168 user-select: none; 169 } 170 171 #customize-theme-controls .widget-area-select li:before { 172 display: none; 173 content: "\f147"; 174 position: absolute; 175 top: 12px; 176 left: 10px; 177 font: normal 20px/1 dashicons; 178 -webkit-font-smoothing: antialiased; 179 -moz-osx-font-smoothing: grayscale; 180 } 181 182 #customize-theme-controls .widget-area-select li:last-child { 183 border-bottom: 1px solid #c3c4c7; 184 } 185 186 #customize-theme-controls .widget-area-select .selected { 187 color: #fff; 188 background: #2271b1; 189 } 190 191 #customize-theme-controls .widget-area-select .selected:before { 192 display: block; 193 } 194 195 #customize-theme-controls .move-widget-actions { 196 text-align: right; 197 padding: 12px; 198 } 199 200 #customize-theme-controls .reordering .widget-title-action { 201 display: none; 202 } 203 204 #customize-theme-controls .reordering .widget-reorder-nav { 205 display: block; 206 } 207 208 /* Text Widget */ 209 .wp-customizer div.mce-inline-toolbar-grp, 210 .wp-customizer div.mce-tooltip { 211 z-index: 500100 !important; 212 } 213 .wp-customizer .ui-autocomplete.wplink-autocomplete { 214 z-index: 500110; /* originally 100110, but z-index of .wp-full-overlay is 500000 */ 215 } 216 .wp-customizer #wp-link-backdrop { 217 z-index: 500100; /* originally 100100, but z-index of .wp-full-overlay is 500000 */ 218 } 219 .wp-customizer #wp-link-wrap { 220 z-index: 500105; /* originally 100105, but z-index of .wp-full-overlay is 500000 */ 221 } 222 223 /** 224 * Styles for new widget addition panel 225 */ 226 227 /* override widgets admin page rules in wp-admin/css/widgets.css */ 228 #widgets-left #available-widgets .widget { 229 float: none !important; 230 width: auto !important; 231 } 232 233 /* Keep rule that is no longer necessary on widgets.php. */ 234 #available-widgets .widget-action { 235 display: none; 236 } 237 238 .ios #available-widgets { 239 transition: left 0s; 240 } 241 242 #available-widgets .widget-tpl:hover, 243 #available-widgets .widget-tpl.selected { 244 background: #f6f7f7; 245 border-bottom-color: #c3c4c7; 246 color: #2271b1; 247 border-left: 4px solid #2271b1; 248 } 249 250 #customize-controls .widget-title h3 { 251 font-size: 1em; 252 } 253 254 #available-widgets .widget-title h3 { 255 padding: 0 0 5px; 256 font-size: 14px; 257 } 258 259 #available-widgets .widget .widget-description { 260 padding: 0; 261 color: #646970; 262 } 263 264 #customize-preview { 265 transition: all 0.2s; 266 } 267 268 body.adding-widget #available-widgets { 269 left: 0; 270 visibility: visible; 271 } 272 273 body.adding-widget .wp-full-overlay-main { 274 left: 300px; 275 } 276 277 body.adding-widget #customize-preview { 278 opacity: 0.4; 279 } 280 281 282 /** 283 * Widget Icon styling 284 * No plurals in naming. 285 * Ordered from lowest to highest specificity. 286 */ 287 288 #available-widgets .widget-title { 289 position: relative; 290 } 291 292 #available-widgets .widget-title:before { 293 content: "\f132"; 294 position: absolute; 295 top: -3px; 296 right: 100%; 297 margin-right: 20px; 298 width: 20px; 299 height: 20px; 300 color: #2c3338; 301 font: normal 20px/1 dashicons; 302 text-align: center; 303 box-sizing: border-box; 304 -webkit-font-smoothing: antialiased; 305 -moz-osx-font-smoothing: grayscale; 306 } 307 308 /* dashicons-smiley */ 309 #available-widgets [class*="easy"] .widget-title:before { content: "\f328"; top: -4px; } 310 311 /* dashicons-star-filled */ 312 #available-widgets [class*="super"] .widget-title:before, 313 #available-widgets [class*="like"] .widget-title:before { content: "\f155"; top: -4px; } 314 315 /* dashicons-wordpress */ 316 #available-widgets [class*="meta"] .widget-title:before { content: "\f120"; } 317 318 /* dashicons-archive */ 319 #available-widgets [class*="archives"] .widget-title:before { content: "\f480"; top: -4px; } 320 321 /* dashicons-category */ 322 #available-widgets [class*="categor"] .widget-title:before { content: "\f318"; top: -4px; } 323 324 /* dashicons-admin-comments */ 325 #available-widgets [class*="comment"] .widget-title:before, 326 #available-widgets [class*="testimonial"] .widget-title:before, 327 #available-widgets [class*="chat"] .widget-title:before { content: "\f101"; } 328 329 /* dashicons-admin-post */ 330 #available-widgets [class*="post"] .widget-title:before { content: "\f109"; } 331 332 /* dashicons-admin-page */ 333 #available-widgets [class*="page"] .widget-title:before { content: "\f105"; } 334 335 /* dashicons-text */ 336 #available-widgets [class*="text"] .widget-title:before { content: "\f478"; } 337 338 /* dashicons-admin-links */ 339 #available-widgets [class*="link"] .widget-title:before { content: "\f103"; } 340 341 /* dashicons-search */ 342 #available-widgets [class*="search"] .widget-title:before { content: "\f179"; } 343 344 /* dashicons-menu */ 345 #available-widgets [class*="menu"] .widget-title:before, 346 #available-widgets [class*="nav"] .widget-title:before { content: "\f333"; } 347 348 /* dashicons-tagcloud */ 349 #available-widgets [class*="tag"] .widget-title:before { content: "\f479"; } 350 351 /* dashicons-rss */ 352 #available-widgets [class*="rss"] .widget-title:before { content: "\f303"; top: -6px; } 353 354 /* dashicons-calendar */ 355 #available-widgets [class*="event"] .widget-title:before, 356 #available-widgets [class*="calendar"] .widget-title:before { content: "\f145"; top: -4px;} 357 358 /* dashicons-format-image */ 359 #available-widgets [class*="image"] .widget-title:before, 360 #available-widgets [class*="photo"] .widget-title:before, 361 #available-widgets [class*="slide"] .widget-title:before, 362 #available-widgets [class*="instagram"] .widget-title:before { content: "\f128"; } 363 364 /* dashicons-format-gallery */ 365 #available-widgets [class*="album"] .widget-title:before, 366 #available-widgets [class*="galler"] .widget-title:before { content: "\f161"; } 367 368 /* dashicons-format-video */ 369 #available-widgets [class*="video"] .widget-title:before, 370 #available-widgets [class*="tube"] .widget-title:before { content: "\f126"; } 371 372 /* dashicons-format-audio */ 373 #available-widgets [class*="music"] .widget-title:before, 374 #available-widgets [class*="radio"] .widget-title:before, 375 #available-widgets [class*="audio"] .widget-title:before { content: "\f127"; } 376 377 /* dashicons-admin-users */ 378 #available-widgets [class*="login"] .widget-title:before, 379 #available-widgets [class*="user"] .widget-title:before, 380 #available-widgets [class*="member"] .widget-title:before, 381 #available-widgets [class*="avatar"] .widget-title:before, 382 #available-widgets [class*="subscriber"] .widget-title:before, 383 #available-widgets [class*="profile"] .widget-title:before, 384 #available-widgets [class*="grofile"] .widget-title:before { content: "\f110"; } 385 386 /* dashicons-cart */ 387 #available-widgets [class*="commerce"] .widget-title:before, 388 #available-widgets [class*="shop"] .widget-title:before, 389 #available-widgets [class*="cart"] .widget-title:before { content: "\f174"; top: -4px; } 390 391 /* dashicons-shield */ 392 #available-widgets [class*="secur"] .widget-title:before, 393 #available-widgets [class*="firewall"] .widget-title:before { content: "\f332"; } 394 395 /* dashicons-chart-bar */ 396 #available-widgets [class*="analytic"] .widget-title:before, 397 #available-widgets [class*="stat"] .widget-title:before, 398 #available-widgets [class*="poll"] .widget-title:before { content: "\f185"; } 399 400 /* dashicons-feedback */ 401 #available-widgets [class*="form"] .widget-title:before { content: "\f175"; } 402 403 /* dashicons-email-alt */ 404 #available-widgets [class*="subscribe"] .widget-title:before, 405 #available-widgets [class*="news"] .widget-title:before, 406 #available-widgets [class*="contact"] .widget-title:before, 407 #available-widgets [class*="mail"] .widget-title:before { content: "\f466"; } 408 409 /* dashicons-share */ 410 #available-widgets [class*="share"] .widget-title:before, 411 #available-widgets [class*="socia"] .widget-title:before { content: "\f237"; } 412 413 /* dashicons-translation */ 414 #available-widgets [class*="lang"] .widget-title:before, 415 #available-widgets [class*="translat"] .widget-title:before { content: "\f326"; } 416 417 /* dashicons-location-alt */ 418 #available-widgets [class*="locat"] .widget-title:before, 419 #available-widgets [class*="map"] .widget-title:before { content: "\f231"; } 420 421 /* dashicons-download */ 422 #available-widgets [class*="download"] .widget-title:before { content: "\f316"; } 423 424 /* dashicons-cloud */ 425 #available-widgets [class*="weather"] .widget-title:before { content: "\f176"; top: -4px;} 426 427 /* dashicons-facebook */ 428 #available-widgets [class*="facebook"] .widget-title:before { content: "\f304"; } 429 430 /* dashicons-twitter */ 431 #available-widgets [class*="tweet"] .widget-title:before, 432 #available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; } 433 434 @media screen and (max-height: 700px) and (min-width: 981px) { 435 /* Compact widget-tops on smaller laptops, but not tablets. See ticket #27112#comment:4 */ 436 .customize-control-widget_form { 437 margin-bottom: 0; 438 } 439 440 .widget-top { 441 box-shadow: none; 442 margin-top: -1px; 443 } 444 445 .widget-top:hover { 446 position: relative; 447 z-index: 1; 448 } 449 450 .last-widget { 451 margin-bottom: 15px; 452 } 453 454 .widget-title h3 { 455 padding: 13px 15px; 456 } 457 458 .widget-top .widget-action { 459 padding: 8px 10px; 460 } 461 462 .widget-reorder-nav span { 463 height: 39px; 464 } 465 466 .widget-reorder-nav span:before { 467 line-height: 39px; 468 } 469 470 /* Compact the move widget areas. */ 471 #customize-theme-controls .widget-area-select li { 472 padding: 9px 15px 11px 42px; 473 } 474 475 #customize-theme-controls .widget-area-select li:before { 476 top: 8px; 477 } 478 }