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