Project

General

Profile

Feature #43681 » rtl-responsive.patch

Go MAEDA, 2026-01-17 10:32

View differences:

app/assets/stylesheets/responsive.css
131 131
  #project-jump.drdn {
132 132
    position: absolute;
133 133
    top: 0px;
134
    left: 0;
134
    inset-inline-start: 0;
135 135

  
136 136
    width: 100%;
137 137
    max-width: 100%;
138 138
    height: 2em;
139 139
    height: 64px;
140
    padding: 5px;
141
    padding-right: 72px;
142
    padding-left: 20px;
140
    padding-block: 5px;
141
    padding-inline: 20px 72px;
143 142
  }
144 143
  #project-jump .drdn-trigger {
145 144
    font-size:1.5em;
......
147 146
    display:block;
148 147
    width:100%;
149 148
    color:var(--oc-white);
150
    padding-left:24px;
149
    padding-inline-start: 24px;
151 150
    background:transparent;
152 151
    height:50px;
153 152
    line-height:40px;
......
159 158
    font-size: 1.5em;
160 159

  
161 160
    position: absolute;
162
    left: 0;
163
    padding: 0 8px;
161
    inset-inline-start: 0;
162
    padding-block: 0;
163
    padding-inline: 8px;
164 164
    /* achieve dropdwon arrow by scaling a caret character */
165 165
    content: '^';
166 166
    -webkit-transform: scale(1,-.8);
167 167
            transform: scale(1,-.8);
168
    text-align: right;
168
    text-align: end;
169 169
    pointer-events: none;
170 170

  
171 171
    opacity: .6;
......
173 173
  #project-jump.expanded .drdn-trigger:before {
174 174
    -webkit-transform: scale(1,.8);
175 175
            transform: scale(1,.8);
176
    padding-top:8px;
176
    padding-block-start: 8px;
177 177
  }
178 178

  
179 179
  #project-jump .drdn-content {
180 180
    position:absolute;
181
    left:0px;
182
    top:64px;
181
    inset-inline-start:0;
182
    inset-block-start:64px;
183 183
    width:100%;
184 184
    font-size:0.9375rem;
185 185
    font-weight:normal;
......
191 191
  #project-jump .drdn-content .autocomplete {
192 192
    height:40px;
193 193
    font-size:1.25rem;
194
    padding-left: 28px !important;
194
    padding-inline-start: 28px !important;
195 195
  }
196 196
  #project-jump .drdn-content a {
197 197
    padding:8px;
......
206 206
  \*----------------------------------------*/
207 207

  
208 208
  #main {
209
    padding: 64px 0 0; /* padding-top equals header height */
209
    padding-block: 64px 0; /* padding-top equals header height */
210
    padding-inline: 0;
210 211
  }
211 212

  
212 213
  #main.nosidebar #content,
......
225 226
  .splitcontentleft, .splitcontentright, .splitcontenttop {
226 227
    width: 100%;
227 228
    flex: auto;
228
    margin-right: 0;
229
    margin-left: 0;
229
    margin-inline: 0;
230 230
  }
231 231

  
232 232
  /*----------------------------------------*\
......
241 241
    z-index: 10;
242 242

  
243 243
    display: block; /* remove display: none; of non-mobile version */
244
    float: right;
244
    float: inline-end;
245 245

  
246 246
    width: 60px;
247 247
    height: 64px;
248
    margin-top: 0;
248
    margin-block-start: 0;
249 249

  
250 250
    text-align: center;
251 251

  
252
    border-left: 1px solid var(--oc-gray-3);
252
    border-inline-start: 1px solid var(--oc-gray-3);
253 253
  }
254 254

  
255 255
  .mobile-toggle-button:hover,
......
260 260
  .mobile-toggle-button:after {
261 261
    font-family: var(--fonts-main);
262 262
    display: block;
263
    margin-top: -3px;
263
    margin-block-start: -3px;
264 264
    content: '\2261';
265 265
  }
266 266

  
267 267
  .search-magnifier--flyout {
268 268
    position: absolute;
269 269
    z-index: 1;
270
    left: 12px;
270
    inset-inline-start: 12px;
271 271
  }
272 272

  
273 273
  /* Flyout Menu */
274 274

  
275 275
  .flyout-menu {
276 276
    position: absolute;
277
    right: -250px;
277
    inset-inline-end: -250px;
278 278

  
279 279
    display: block; /* remove display: none; of non-mobile version */
280 280
    overflow-x: hidden;
......
305 305
    text-transform: uppercase;
306 306

  
307 307
    color: white;
308
    border-top: 1px solid #506a83;
309
    border-bottom: 1px solid #506a83;
308
    border-block: 1px solid #506a83;
310 309
    background-color: #628db6;
311 310
  }
312 311

  
......
326 325
  .flyout-menu__sidebar > form,
327 326
  .flyout-menu > div,
328 327
  .flyout-menu > form {
329
    padding-left: 8px;
328
    padding-inline-start: 8px;
330 329
  }
331 330

  
332 331
  .flyout-menu .flyout-menu__avatar {
333
    margin-top: -1px; /* move avatar up 1px */
334
    padding-left: 0;
332
    margin-block-start: -1px; /* move avatar up 1px */
333
    padding-inline-start: 0;
335 334
  }
336 335

  
337 336
  .flyout-menu__sidebar > form {
......
339 338
  }
340 339

  
341 340
  .flyout-menu__sidebar > form h3 {
342
    margin-left: -8px;
341
    margin-inline-start: -8px;
343 342
  }
344 343

  
345 344
  .flyout-menu__sidebar > form label {
346 345
    display: inline-block;
347
    margin: 8px 0;
346
    margin-block: 8px;
347
    margin-inline: 0;
348 348
  }
349 349

  
350 350
  .flyout-menu__sidebar > form br  br {
......
353 353

  
354 354
  /* Targets list containing checkboxes (e.g. activities sidebar) in flyout menu */
355 355
  .flyout-menu__sidebar form > ul {
356
    margin-left: -8px;
357
    padding-left: 0;
356
    margin-inline-start: -8px;
357
    padding-inline-start: 0;
358 358
  }
359 359

  
360 360
  .flyout-menu__sidebar form > ul li {
361 361
    line-height: 39px;
362 362
    display: block;
363
    padding-left: 8px;
364
    border-top: 1px solid rgba(255,255,255,.1);
363
    padding-inline-start: 8px;
364
    border-block-start: 1px solid rgba(255,255,255,.1);
365 365
  }
366 366

  
367 367
  .flyout-menu__sidebar form > ul li:first-child {
368
    border-top: none;
368
    border-block-start: none;
369 369
  }
370 370

  
371 371
  .flyout-menu__sidebar form > ul li label {
......
375 375
  .flyout-menu__sidebar form > ul li label a {
376 376
    line-height: 1;
377 377
    display: inline;
378
    padding-left: 0;
378
    padding-inline-start: 0;
379 379
    border: none;
380 380
  }
381 381

  
......
403 403
  }
404 404

  
405 405
  #sidebar-wrapper {
406
    margin-left: -8px;
406
    margin-inline-start: -8px;
407 407
  }
408 408

  
409 409
  .flyout-menu #watchers ul li, .flyout-menu ul.queries li {
......
418 418
    -webkit-align-items: center;
419 419
    -webkit-box-align: center;
420 420
    align-items: center;
421
    border-top: 1px solid rgba(255,255,255,.1);
421
    border-block-start: 1px solid rgba(255,255,255,.1);
422 422
  }
423 423

  
424 424
  .flyout-menu #watchers ul li a, .flyout-menu ul.queries li a {
425
    border-top: none;
425
    border-block-start: none;
426 426
  }
427 427

  
428 428
  .flyout-menu ul.queries li a.icon-clear-query {
429 429
    flex-shrink: 0;
430
    padding-right: 8px;
430
    padding-inline-end: 8px;
431 431
  }
432 432

  
433 433
  .flyout-menu ul li a {
......
437 437
    height: 40px;
438 438
    white-space: nowrap;
439 439
    text-overflow: ellipsis;
440
    border-top: 1px solid rgba(255,255,255,.1);
440
    border-block-start: 1px solid rgba(255,255,255,.1);
441 441
  }
442 442

  
443 443
  .flyout-menu ul li:first-child a {
444 444
    line-height: 39px;
445 445
    height: 39px;
446
    border-top: none;
446
    border-block-start: none;
447 447
  }
448 448

  
449 449
  .flyout-menu a {
......
467 467
  .flyout-menu__search {
468 468
    line-height: 54px;
469 469
    height: 64px;
470
    padding-top: 3px;
471
    padding-right: 8px;
470
    padding-block-start: 3px;
471
    padding-inline-end: 8px;
472 472
  }
473 473

  
474 474
  .flyout-menu__search input[type='text'] {
......
476 476

  
477 477
    width: 100%;
478 478
    height: 38px;
479
    padding-left: 27px;
479
    padding-inline-start: 27px;
480 480

  
481 481
    vertical-align: middle;
482 482

  
......
491 491
    display: -webkit-flex;
492 492
    display: flex;
493 493
    width: 100%;
494
    border-top: 1px solid rgba(255,255,255,.1);
494
    border-block-start: 1px solid rgba(255,255,255,.1);
495 495
  }
496 496

  
497 497
  .flyout-menu__avatar img.gravatar {
......
518 518
  }
519 519

  
520 520
  .flyout-menu__avatar .user {
521
    padding-left: 15px;
522
    padding-right: 15px;
521
    padding-inline: 15px;
523 522
    text-overflow: ellipsis;
524 523
    overflow: hidden;
525 524
    white-space: nowrap;
......
530 529
  /* user link when no avatar is present */
531 530
  .flyout-menu__avatar--no-avatar a.user {
532 531
    line-height: 40px;
533
    padding-left: 8px;
532
    padding-inline-start: 8px;
534 533
  }
535 534

  
536 535
  .flyout-is-active body {
......
542 541
  }
543 542

  
544 543
  .flyout-is-active #wrapper, .flyout-is-active #header {
545
    right: 250px; /* when left flyout is active, move body and header to the right (same amount like flyout-menu's width) */
544
    inset-inline-end: 250px; /* when left flyout is active, move body and header to the right (same amount like flyout-menu's width) */
546 545
  }
547 546

  
548 547
  .flyout-is-active #wrapper {
......
563 562
  }
564 563

  
565 564
  #admin-menu {
566
    padding-left: 0;
565
    padding-inline-start: 0;
567 566
  }
568 567

  
569 568
  #admin-menu li {
570
    padding-bottom: 0;
569
    padding-block-end: 0;
571 570
  }
572 571

  
573 572
  #admin-menu a,
......
587 586

  
588 587
  #content>.contextual {
589 588
    width: 100%;
590
    margin-bottom: .5em;
591
    padding-left: 0; /* reset left padding in order to use whole space */
589
    margin-block-end: .5em;
590
    padding-inline-start: 0; /* reset left padding in order to use whole space */
592 591
    white-space: normal;
593 592
  }
594 593

  
......
600 599
    display: inline-flex;
601 600

  
602 601
    margin: 5px 0;
603
    margin-right: 2px;
602
    margin-inline-end: 2px;
604 603
    padding: 9px 9px 9px 9px;
605 604

  
606 605
    border: 1px solid var(--oc-gray-4);
......
613 612
	top:40px;
614 613
  }
615 614
  #content>.contextual .drdn .drdn-content a {
616
    padding-top: 9px;
617
    padding-bottom: 9px;
615
    padding-block: 9px;
618 616
  }
619 617

  
620 618
  .flyout-menu .contextual {
......
624 622
  /* loading indicator */
625 623
  #ajax-indicator {
626 624
    width: 60%;
627
    left: 20%;
625
    inset-inline-start: 20%;
628 626
  }
629 627

  
630 628
  /* jquery ui dialogs */
......
634 632
  }
635 633

  
636 634
  .ui-dialog .ui-dialog-content {
637
    padding-left: 0;
638
    padding-right: 0;
635
    padding-block: 0;
639 636
  }
640 637

  
641 638
  #filters-table {width:100%; float:none;}
642
  .add-filter {width:100%; float:none; text-align: left; margin-top: 8px;}
639
  .add-filter {width:100%; float:none; text-align: start; margin-block-start: 8px;}
643 640

  
644 641
  /*----------------------------------------*\
645 642
    F) PAGE SPECIFIC STYLES
......
650 647
    margin: 0;
651 648
  }
652 649

  
653
  div#activity dl, #search-results {margin-left: 0;}
650
  div#activity dl, #search-results {margin-inline-start: 0;}
654 651

  
655 652
  .version-overview table.progress {width:75%;}
656
  div#version-summary {float:none; width:100%; margin-left:0;}
653
  div#version-summary {float:none; width:100%; margin-inline-start:0;}
657 654
  body.controller-versions.action-show div#roadmap .related-issues {width:100%;}
658 655

  
659 656
  /* History and Changeset */
660 657
  div#issue-changesets {
661 658
    float: none;
662 659
    width: auto;
663
    margin-left: 0;
664
    padding-left: 0;
665
    margin-bottom: 2em;
660
    margin-inline-start: 0;
661
    padding-inline-start: 0;
662
    margin-block-end: 2em;
666 663
  }
667 664

  
668 665
  div#issue-changesets div.changeset {
669
    padding-top: 1em;
666
    padding-block-start: 1em;
670 667
  }
671 668

  
672 669
  /* Gantt charts */
......
687 684

  
688 685
  .gantt_subjects_column .gantt_hdr {
689 686
    width: 100% !important;
690
    right: 0 !important; /* [2] */
691
    border-right: solid 1px var(--oc-gray-4);
687
    inset-inline-end: 0 !important; /* [2] */
688
    border-inline-end: solid 1px var(--oc-gray-4);
692 689
  }
693 690

  
694 691
  #gantt_area {
695
    left: -2px; /* [3] */
696
    margin-right: -2px; /* [4] */
692
    inset-inline-start: -2px; /* [3] */
693
    margin-inline-end: -2px; /* [4] */
697 694
  }
698 695

  
699 696
  /*----------------------------------------*\
......
706 703

  
707 704
  /* tabular forms resets for mobile */
708 705
  .tabular p, .tabular.settings p {
709
    padding-left: 0;
706
    padding-inline-start: 0;
710 707
  }
711 708

  
712 709
  .tabular label, .tabular.settings label {
713 710
    display: block;
714 711
    width: 100%;
715
    margin-left: 0;
716
    text-align: left;
712
    margin-inline-start: 0;
713
    text-align: start;
717 714
  }
718 715

  
719 716
  .tabular input, .tabular select, .tabular textarea {
......
750 747

  
751 748
  /* issues page */
752 749
  body.controller-issues p.query-totals {
753
    margin-top: 0px;
754
    text-align: left;
750
    margin-block-start: 0;
751
    text-align: start;
755 752
  }
756 753

  
757 754
  /* subtasks and related issues list on issue show (without headers) */
......
764 761
  #issue_tree:not(.with-related-issues-table-headers) .issue > td:not(.checkbox),
765 762
  #relations:not(.with-related-issues-table-headers) .issue > td:not(.checkbox) {
766 763
    display: block;
767
    float: left;
768
    text-align: left;
769
    padding-right: 5px;
764
    float: inline-start;
765
    text-align: start;
766
    padding-inline-end: 5px;
770 767
  }
771 768

  
772 769
  #issue_tree:not(.with-related-issues-table-headers) .issue > td.subject,
......
776 773

  
777 774
  #issue_tree:not(.with-related-issues-table-headers) .issue:has(.buttons a) > td.subject,
778 775
  #relations:not(.with-related-issues-table-headers) .issue:has(.buttons a) > td.subject {
779
    padding-right: 40px;
776
    padding-inline-end: 40px;
780 777
  }
781 778

  
782 779
  #issue_tree:not(.with-related-issues-table-headers) .issue > td:not(.subject),
......
792 789
  /* positioniong of unline button */
793 790
  #issue_tree:not(.with-related-issues-table-headers) .issue > td.buttons,
794 791
  #relations:not(.with-related-issues-table-headers) .issue > td.buttons {
795
    text-align: right;
792
    text-align: end;
796 793
    position: absolute;
797
    right: 0;
794
    inset-inline-end: 0;
798 795
    margin: 0;
799
    padding-right: 0;
796
    padding-inline-end: 0;
800 797
  }
801 798

  
802 799
  #issue_tree:not(.with-related-issues-table-headers) .issue .buttons a,
......
819 816
  .attachments_fields span {
820 817
    position: relative;
821 818
    clear: both;
822
    margin-bottom: 1em;
819
    margin-block-end: 1em;
823 820
    white-space: normal;
824 821
  }
825 822
  .attachments_fields span a.remove-upload {
826 823
    position: absolute;
827 824
    top: 0;
828
    right: 0;
825
    inset-inline-end: 0;
829 826
  }
830 827

  
831 828
  .attachments_fields input.description {
832
    margin-left: 0;
829
    margin-inline-start: 0;
833 830
    width: 100%;
834 831
  }
835 832

  
......
851 848

  
852 849
  .cal .week-number {
853 850
    border: 1px solid var(--oc-gray-4);
854
    text-align: left;
851
    text-align: start;
855 852
    font-weight: bold;
856 853
    background-color: var(--oc-blue-0);
857 854
  }
......
862 859

  
863 860
  .cal .calbody p.day-num {
864 861
    font-size: 1.1em;
865
    text-align: left;
862
    text-align: start;
866 863
  }
867 864

  
868 865
  /* Sticky issue header */
......
887 884
  .pagination ul.pages li.previous,
888 885
  .pagination ul.pages li.next {display:inline-block; width:32%; overflow:hidden;}
889 886

  
890
  #login-form {width:100%; margin-top:2em;}
887
  #login-form {width:100%; margin-block-start:2em;}
891 888

  
892 889
  #filters-table .filter .field, #list-definition > div .field { width: 100%; }
893 890
  #filters-table .values { width: auto; max-width: 100%; }
(5-5/5)