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