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