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