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 .widgets-holder-wrap.closed .description,
 351 .js .closed br.clear {
 352         display: none;
 353 }
 354
 355 .js .widgets-holder-wrap.closed .widget.ui-sortable-helper {
 356         display: block;
 357 }
 358
 359 /* Hide Widget Settings by Default */
 360 .widget-inside,
 361 .widget-description {
 362         display: none;
 363 }
 364
 365 .widget-inside {
 366         background: #fff;
 367 }
 368
 369 /* Dragging widgets over the available widget area show's a "Deactivate" message */
 370 #removing-widget {
 371         display: none;
 372         font-weight: 400;
 373         padding-left: 15px;
 374         font-size: 12px;
 375         line-height: 1;
 376         color: black;
 377 }
 378
 379 .js #removing-widget {
 380         color: #00a0d2;
 381 }
 382
 383 .widget-control-noform,
 384 #access-off,
 385 .widgets_access .widget-action,
 386 .widgets_access .sidebar-name-arrow,
 387 .widgets_access #access-on,
 388 .widgets_access .widget-holder .description,
 389 .no-js .widget-holder .description {
 390         display: none;
 391 }
 392
 393 .widgets_access .widget-holder,
 394 .widgets_access #widget-list {
 395         padding-top: 10px;
 396 }
 397
 398 .widgets_access #access-off {
 399         display: inline;
 400 }
 401
 402 .widgets_access .sidebar-name,
 403 .widgets_access .widget .widget-top {
 404         cursor: default;
 405 }
 406
 407
 408 /* Widgets Area Chooser */
 409 .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
 410 .widget-liquid-left #widgets-left.chooser .inactive-sidebar {
 411         -webkit-transition: opacity 0.1s linear;
 412         transition: opacity 0.1s linear;
 413 }
 414
 415 .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
 416 .widget-liquid-left #widgets-left.chooser .inactive-sidebar {
 417         /* -webkit-filter: blur(1px); */
 418         opacity: 0.2;
 419         pointer-events: none;
 420 }
 421
 422 .widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question {
 423         /* -webkit-filter: none; */
 424         opacity: 1;
 425         pointer-events: auto;
 426 }
 427
 428 .widgets-chooser ul,
 429 #widgets-left .widget-in-question .widget-top,
 430 #available-widgets .widget-top:hover,
 431 div#widgets-right .widget-top:hover,
 432 #widgets-left .widget-top:hover {
 433         border-color: #999;
 434         -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 435         box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 436 }
 437
 438 .widgets-chooser ul.widgets-chooser-sidebars {
 439         margin: 0;
 440         list-style-type: none;
 441         max-height: 300px;
 442         overflow: auto;
 443 }
 444
 445 .widgets-chooser {
 446         display: none;
 447 }
 448
 449 .widgets-chooser ul {
 450         border: 1px solid #ccc;
 451 }
 452
 453 .widgets-chooser li {
 454         padding: 10px 15px 10px 35px;
 455         border-bottom: 1px solid #ccc;
 456         background: #fff;
 457         margin: 0;
 458         cursor: pointer;
 459         outline: none;
 460         position: relative;
 461         -webkit-transition: background 0.2s ease-in-out;
 462         transition: background 0.2s ease-in-out;
 463 }
 464
 465  /* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */
 466 .widgets-chooser li:hover,
 467 .widgets-chooser li:focus {
 468         background: rgba(255,255,255,0.7);
 469 }
 470
 471 .widgets-chooser li:focus:before {
 472         content: "\f147";
 473         display: block;
 474         -webkit-font-smoothing: antialiased;
 475         font: normal 26px/1 dashicons;
 476         color: #555d66;
 477         position: absolute;
 478         top: 7px;
 479         left: 5px;
 480 }
 481
 482 .widgets-chooser li:last-child {
 483         border: none;
 484 }
 485
 486 .widgets-chooser li.widgets-chooser-selected {
 487         background: #00a0d2;
 488         color: #fff;
 489 }
 490
 491 .widgets-chooser li.widgets-chooser-selected:before,
 492 .widgets-chooser li.widgets-chooser-selected:focus:before {
 493         content: "\f147";
 494         display: block;
 495         -webkit-font-smoothing: antialiased;
 496         font: normal 26px/1 dashicons;
 497         color: #fff;
 498         position: absolute;
 499         top: 7px;
 500         left: 5px;
 501 }
 502
 503 .widgets-chooser .widgets-chooser-actions {
 504         padding: 10px 0 12px 0;
 505         text-align: center;
 506 }
 507
 508 .widgets-chooser button {
 509         margin-right: 5px;
 510 }
 511
 512 #available-widgets .widget .widget-top {
 513         cursor: pointer;
 514 }
 515
 516 #available-widgets .widget.ui-draggable-dragging .widget-top {
 517         cursor: move;
 518 }
 519
 520 /* =Media Queries
 521 -------------------------------------------------------------- */
 522
 523 @media screen and (max-width: 480px) {
 524         div.widget-liquid-left {
 525                 width: 100%;
 526                 float: none;
 527                 border-right: none;
 528                 padding-right: 0;
 529         }
 530
 531         #widgets-left .sidebar-name {
 532                 margin-right: 0;
 533         }
 534
 535         #widgets-left #available-widgets .widget-top {
 536                 margin-right: 0;
 537         }
 538
 539         #widgets-left .inactive-sidebar .widgets-sortables {
 540                 margin-right: 0;
 541         }
 542
 543         div.widget-liquid-right {
 544                 width: 100%;
 545                 float: none;
 546         }
 547
 548         div.widget {
 549                 margin: 0 auto 10px !important;
 550                 max-width: 480px;
 551         }
 552 }
 553
 554 @media screen and (max-width: 320px) {
 555         div.widget {
 556                 max-width: 320px;
 557         }
 558 }
 559
 560 @media only screen and (min-width: 1250px) {
 561         #widgets-left #available-widgets .widget {
 562                 width: 49%;
 563                 float: left;
 564         }
 565
 566         .widget.ui-draggable-dragging {
 567                 min-width: 49%;
 568         }
 569
 570         #widgets-left #available-widgets .widget:nth-child(even) {
 571                 float: right;
 572         }
 573
 574         #widgets-right .sidebars-column-1,
 575         #widgets-right .sidebars-column-2 {
 576                 float: left;
 577                 width: 49%;
 578         }
 579
 580         #widgets-right .sidebars-column-1 {
 581                 margin-right: 2%;
 582         }
 583
 584         #widgets-right.single-sidebar .sidebars-column-1,
 585         #widgets-right.single-sidebar .sidebars-column-2 {
 586                 float: none;
 587                 width: 100%;
 588                 margin: 0;
 589         }
 590 }