wp-admin/css/widgets.css

   1 /* General Widgets Styles */
   2
   3 .widget {
   4         margin: 0 auto 10px;
   5         position: relative;
   6         -webkit-box-sizing: border-box;
   7         -moz-box-sizing: border-box;
   8         box-sizing: border-box;
   9 }
  10
  11 .widget-top {
  12         font-size: 13px;
  13         font-weight: 600;
  14         background: #f7f7f7;
  15 }
  16
  17 .widget-top a.widget-action,
  18 .widget-top a.widget-action:hover {
  19         -webkit-box-shadow: none;
  20         box-shadow: none;
  21         outline: none;
  22         text-decoration: none;
  23 }
  24
  25 .widget-title h3,
  26 .widget-title h4 {
  27         margin: 0;
  28         padding: 15px;
  29         font-size: 1em;
  30         line-height: 1;
  31         overflow: hidden;
  32         white-space: nowrap;
  33         text-overflow: ellipsis;
  34         -webkit-user-select: none;
  35         -moz-user-select: none;
  36         -ms-user-select: none;
  37         user-select: none;
  38 }
  39
  40 .widgets-holder-wrap .widget-inside {
  41         border-top: none;
  42         padding: 1px 15px 15px 15px;
  43         line-height: 16px;
  44 }
  45
  46 .in-widget-title,
  47 #widgets-right a.widget-control-edit,
  48 #available-widgets .widget-description {
  49         color: #666;
  50 }
  51
  52 .deleting .widget-title,
  53 .deleting .widget-top a.widget-action:after {
  54         color: #a0a5aa;
  55 }
  56
  57 /* Widget Dragging Helpers */
  58 .widget.ui-draggable-dragging {
  59         min-width: 100%;
  60 }
  61
  62 .widget.ui-sortable-helper {
  63         opacity: 0.8;
  64 }
  65
  66 .widget-placeholder {
  67         border: 1px dashed #b4b9be;
  68         margin: 0 auto 10px;
  69         height: 45px;
  70         width: 100%;
  71         -webkit-box-sizing: border-box;
  72         -moz-box-sizing: border-box;
  73         box-sizing: border-box;
  74 }
  75
  76 #widgets-right .widget-placeholder {
  77         margin-top: 0;
  78 }
  79
  80 #widgets-right .closed .widget-placeholder {
  81         height: 0;
  82         border: 0;
  83         margin-top: -10px;
  84 }
  85
  86 /* Widget Sidebars */
  87 .sidebar-name {
  88         position: relative;
  89         -webkit-box-sizing: border-box;
  90         -moz-box-sizing: border-box;
  91         box-sizing: border-box;
  92 }
  93
  94 .sidebar-name-arrow {
  95         position: absolute;
  96         top: 0;
  97         right: 0;
  98         bottom: 0;
  99 }
 100
 101 .js .sidebar-name {
 102         cursor: pointer;
 103 }
 104
 105 .sidebar-name h2,
 106 .sidebar-name h3 {
 107         margin: 0;
 108         padding: 8px 10px;
 109         overflow: hidden;
 110         white-space: nowrap;
 111 }
 112
 113 .widgets-holder-wrap .description {
 114         padding: 0 0 15px;
 115         margin: 0;
 116         font-style: normal;
 117         color: #72777c;
 118 }
 119
 120 .widget-holder .description,
 121 .inactive-sidebar .description {
 122         color: #555d66;
 123 }
 124
 125 #widgets-right .widgets-holder-wrap .description {
 126         padding-left: 7px;
 127         padding-right: 7px;
 128 }
 129
 130 /* Widgets 2-col Layout */
 131 div.widget-liquid-left {
 132         margin: 0;
 133         width: 38%;
 134         float: left;
 135 }
 136
 137 div.widget-liquid-right {
 138         float: right;
 139         width: 58%;
 140 }
 141
 142 /* Widgets Left - Available Widgets */
 143
 144 div#widgets-left {
 145         padding-top: 12px;
 146 }
 147
 148 div#widgets-left .closed .sidebar-name,
 149 div#widgets-left .inactive-sidebar.closed .sidebar-name {
 150         margin-bottom: 10px;
 151 }
 152
 153 div#widgets-left .sidebar-name h2,
 154 div#widgets-left .sidebar-name h3 {
 155         padding: 10px 0;
 156         margin: 0 10px 0 0;
 157 }
 158
 159 #widgets-left .sidebar-name .sidebar-name-arrow:before {
 160         padding: 9px;
 161 }
 162
 163 #widgets-left .widgets-holder-wrap,
 164 div#widgets-left .widget-holder {
 165         background: transparent;
 166         border: none;
 167 }
 168
 169 #widgets-left .widgets-holder-wrap {
 170         border: none;
 171         -webkit-box-shadow: none;
 172         box-shadow: none;
 173 }
 174
 175 #available-widgets .widget-action {
 176         display: none;
 177 }
 178
 179 #available-widgets .widget {
 180         margin: 0;
 181 }
 182
 183 #available-widgets .widget:nth-child(odd) {
 184         clear: both;
 185 }
 186
 187 #available-widgets .widget .widget-description {
 188         display: block;
 189         padding: 10px 15px;
 190         font-size: 12px;
 191 }
 192
 193 #available-widgets #widget-list {
 194         position: relative;
 195 }
 196
 197 /* Inactive Sidebars */
 198 #widgets-left .inactive-sidebar {
 199         clear: both;
 200         width: 100%;
 201         background: transparent;
 202         padding: 0;
 203         margin: 0 0 20px 0;
 204         border: none;
 205         -webkit-box-shadow: none;
 206         box-shadow: none;
 207 }
 208
 209 #widgets-left .inactive-sidebar.first {
 210         margin-top: 40px;
 211 }
 212
 213 /* Not sure what this is for... */
 214 div#widgets-left .inactive-sidebar .widget.expanded {
 215         left: auto;
 216 }
 217
 218 .widget-title-action {
 219         float: right;
 220         position: relative;
 221 }
 222
 223 div#widgets-left .inactive-sidebar .widgets-sortables {
 224         min-height: 42px;
 225         padding: 0;
 226         background: transparent;
 227         margin: 0;
 228         position: relative;
 229 }
 230
 231 /* Widgets Right */
 232
 233 div#widgets-right .sidebars-column-1,
 234 div#widgets-right .sidebars-column-2 {
 235         max-width: 450px;
 236 }
 237
 238 div#widgets-right .widgets-holder-wrap {
 239         margin: 10px 0 0 0;
 240 }
 241
 242 div#widgets-right .sidebar-description {
 243         min-height: 20px;
 244         margin-top: -5px;
 245 }
 246
 247 div#widgets-right .sidebar-name h2,
 248 div#widgets-right .sidebar-name h3 {
 249         padding: 15px 7px;
 250 }
 251
 252 div#widgets-right .sidebar-name .sidebar-name-arrow:before {
 253         top: 2px;
 254 }
 255
 256 div#widgets-right .widget-top {
 257         padding: 0;
 258 }
 259
 260 div#widgets-right .widgets-sortables {
 261         padding: 0 8px;
 262         margin-bottom: 9px;
 263         position: relative;
 264         min-height: 123px;
 265 }
 266
 267 div#widgets-right .closed .widgets-sortables {
 268         min-height: 0;
 269         margin-bottom: 0;
 270 }
 271
 272 .sidebar-name .spinner,
 273 .remove-inactive-widgets .spinner {
 274         float: none;
 275         position: relative;
 276         top: -2px;
 277         margin: -5px 5px;
 278 }
 279
 280 /* Dragging a widget over a closed sidebar */
 281 #widgets-right .widgets-holder-wrap.widget-hover {
 282         border-color: #72777c;
 283         -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3);
 284         box-shadow: 0 1px 2px rgba(0,0,0,0.3);
 285 }
 286
 287 /* Accessibility Mode */
 288 .widgets_access #widgets-left .widget .widget-top {
 289         cursor: auto;
 290 }
 291
 292 .widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description,
 293 .widgets_access #wpwrap .widgets-holder-wrap.closed .widget,
 294 .widgets_access #wpwrap .widget-control-edit {
 295         display: block;
 296 }
 297
 298 .widgets_access #widgets-left .widget .widget-top:hover,
 299 .widgets_access #widgets-right .widget .widget-top:hover {
 300         border-color: #ddd;
 301 }
 302
 303 #available-widgets .widget-control-edit .edit,
 304 #widgets-left .inactive-sidebar .widget-control-edit .add,
 305 #widgets-right .widget-control-edit .add {
 306         display: none;
 307 }
 308
 309 .widget-control-edit {
 310         display: block;
 311         color: #666;
 312         background: #EEE;
 313         padding: 0 15px;
 314         line-height: 43px;
 315         border-left: 1px solid #DDD;
 316 }
 317
 318 #widgets-left .widget-control-edit:hover,
 319 #widgets-right .widget-control-edit:hover {
 320         color: #fff;
 321         background: #444;
 322         border-left: 0;
 323         outline: 1px solid #444;
 324 }
 325
 326 .widgets-holder-wrap .sidebar-name,
 327 .widgets-holder-wrap .sidebar-description {
 328         -webkit-user-select: none;
 329         -moz-user-select: none;
 330         -ms-user-select: none;
 331         user-select: none;
 332 }
 333
 334 .editwidget {
 335         margin: 0 auto;
 336 }
 337
 338 .editwidget .widget-inside {
 339         display: block;
 340         padding: 0 15px;
 341 }
 342
 343 .editwidget .widget-control-actions {
 344         margin-top: 20px;
 345 }
 346
 347 .js .widgets-holder-wrap.closed .widget,
 348 .js .widgets-holder-wrap.closed .sidebar-description,
 349 .js .widgets-holder-wrap.closed .remove-inactive-widgets,
 350 .js .closed br.clear {
 351         display: none;
 352 }
 353
 354 .js .widgets-holder-wrap.closed .widget.ui-sortable-helper {
 355         display: block;
 356 }
 357
 358 /* Hide Widget Settings by Default */
 359 .widget-inside,
 360 .widget-description {
 361         display: none;
 362 }
 363
 364 .widget-inside {
 365         background: #fff;
 366 }
 367
 368 /* Dragging widgets over the available widget area show's a "Deactivate" message */
 369 #removing-widget {
 370         display: none;
 371         font-weight: normal;
 372         padding-left: 15px;
 373         font-size: 12px;
 374         line-height: 1;
 375         color: black;
 376 }
 377
 378 .js #removing-widget {
 379         color: #00a0d2;
 380 }
 381
 382 .widget-control-noform,
 383 #access-off,
 384 .widgets_access .widget-action,
 385 .widgets_access .sidebar-name-arrow,
 386 .widgets_access #access-on,
 387 .widgets_access .widget-holder .description,
 388 .no-js .widget-holder .description {
 389         display: none;
 390 }
 391
 392 .widgets_access .widget-holder,
 393 .widgets_access #widget-list {
 394         padding-top: 10px;
 395 }
 396
 397 .widgets_access #access-off {
 398         display: inline;
 399 }
 400
 401 .widgets_access .sidebar-name,
 402 .widgets_access .widget .widget-top {
 403         cursor: default;
 404 }
 405
 406
 407 /* Widgets Area Chooser */
 408 .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
 409 .widget-liquid-left #widgets-left.chooser .inactive-sidebar {
 410         -webkit-transition: opacity 0.1s linear;
 411         transition: opacity 0.1s linear;
 412 }
 413
 414 .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
 415 .widget-liquid-left #widgets-left.chooser .inactive-sidebar {
 416         /* -webkit-filter: blur(1px); */
 417         opacity: 0.2;
 418         pointer-events: none;
 419 }
 420
 421 .widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question {
 422         /* -webkit-filter: none; */
 423         opacity: 1;
 424         pointer-events: auto;
 425 }
 426
 427 .widgets-chooser ul,
 428 #widgets-left .widget-in-question .widget-top,
 429 #available-widgets .widget-top:hover,
 430 div#widgets-right .widget-top:hover,
 431 #widgets-left .widget-top:hover {
 432         border-color: #999;
 433         -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 434         box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 435 }
 436
 437 .widgets-chooser ul.widgets-chooser-sidebars {
 438         margin: 0;
 439         list-style-type: none;
 440         max-height: 300px;
 441         overflow: auto;
 442 }
 443
 444 .widgets-chooser {
 445         display: none;
 446 }
 447
 448 .widgets-chooser ul {
 449         border: 1px solid #ccc;
 450 }
 451
 452 .widgets-chooser li {
 453         padding: 10px 15px 10px 35px;
 454         border-bottom: 1px solid #ccc;
 455         background: #fff;
 456         margin: 0;
 457         cursor: pointer;
 458         outline: none;
 459         position: relative;
 460         -webkit-transition: background 0.2s ease-in-out;
 461         transition: background 0.2s ease-in-out;
 462 }
 463
 464  /* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */
 465 .widgets-chooser li:hover,
 466 .widgets-chooser li:focus {
 467         background: rgba(255,255,255,0.7);
 468 }
 469
 470 .widgets-chooser li:focus:before {
 471         content: "\f147";
 472         display: block;
 473         -webkit-font-smoothing: antialiased;
 474         font: normal 26px/1 dashicons;
 475         color: #555d66;
 476         position: absolute;
 477         top: 7px;
 478         left: 5px;
 479 }
 480
 481 .widgets-chooser li:last-child {
 482         border: none;
 483 }
 484
 485 .widgets-chooser li.widgets-chooser-selected {
 486         background: #00a0d2;
 487         color: #fff;
 488 }
 489
 490 .widgets-chooser li.widgets-chooser-selected:before,
 491 .widgets-chooser li.widgets-chooser-selected:focus:before {
 492         content: "\f147";
 493         display: block;
 494         -webkit-font-smoothing: antialiased;
 495         font: normal 26px/1 dashicons;
 496         color: #fff;
 497         position: absolute;
 498         top: 7px;
 499         left: 5px;
 500 }
 501
 502 .widgets-chooser .widgets-chooser-actions {
 503         padding: 10px 0 12px 0;
 504         text-align: center;
 505 }
 506
 507 .widgets-chooser button {
 508         margin-right: 5px;
 509 }
 510
 511 #available-widgets .widget .widget-top {
 512         cursor: pointer;
 513 }
 514
 515 #available-widgets .widget.ui-draggable-dragging .widget-top {
 516         cursor: move;
 517 }
 518
 519 /* =Media Queries
 520 -------------------------------------------------------------- */
 521
 522 @media screen and (max-width: 480px) {
 523         div.widget-liquid-left {
 524                 width: 100%;
 525                 float: none;
 526                 border-right: none;
 527                 padding-right: 0;
 528         }
 529
 530         #widgets-left .sidebar-name {
 531                 margin-right: 0;
 532         }
 533
 534         #widgets-left #available-widgets .widget-top {
 535                 margin-right: 0;
 536         }
 537
 538         #widgets-left .inactive-sidebar .widgets-sortables {
 539                 margin-right: 0;
 540         }
 541
 542         div.widget-liquid-right {
 543                 width: 100%;
 544                 float: none;
 545         }
 546
 547         div.widget {
 548                 margin: 0 auto 10px !important;
 549                 max-width: 480px;
 550         }
 551 }
 552
 553 @media screen and (max-width: 320px) {
 554         div.widget {
 555                 max-width: 320px;
 556         }
 557 }
 558
 559 @media only screen and (min-width: 1250px) {
 560         #widgets-left #available-widgets .widget {
 561                 width: 49%;
 562                 float: left;
 563         }
 564
 565         .widget.ui-draggable-dragging {
 566                 min-width: 49%;
 567         }
 568
 569         #widgets-left #available-widgets .widget:nth-child(even) {
 570                 float: right;
 571         }
 572
 573         #widgets-right .sidebars-column-1,
 574         #widgets-right .sidebars-column-2 {
 575                 float: left;
 576                 width: 49%;
 577         }
 578
 579         #widgets-right .sidebars-column-1 {
 580                 margin-right: 2%;
 581         }
 582
 583         #widgets-right.single-sidebar .sidebars-column-1,
 584         #widgets-right.single-sidebar .sidebars-column-2 {
 585                 float: none;
 586                 width: 100%;
 587                 margin: 0;
 588         }
 589 }