app/javascript/flavours/glitch/styles/rtl.scss

   1 body.rtl {
   2   direction: rtl;
   3
   4   .column-header > button {
   5     text-align: right;
   6     padding-left: 0;
   7     padding-right: 15px;
   8   }
   9
  10   .landing-page__logo {
  11     margin-right: 0;
  12     margin-left: 20px;
  13   }
  14
  15   .landing-page .features-list .features-list__row .visual {
  16     margin-left: 0;
  17     margin-right: 15px;
  18   }
  19
  20   .column-link__icon,
  21   .column-header__icon {
  22     margin-right: 0;
  23     margin-left: 5px;
  24   }
  25
  26   .compose-form .compose-form__buttons-wrapper .character-counter__wrapper {
  27     margin-right: 0;
  28     margin-left: 4px;
  29   }
  30
  31   .navigation-bar__profile {
  32     margin-left: 0;
  33     margin-right: 8px;
  34   }
  35
  36   .search__input {
  37     padding-right: 10px;
  38     padding-left: 30px;
  39   }
  40
  41   .search__icon .fa {
  42     right: auto;
  43     left: 10px;
  44   }
  45
  46   .column-header__buttons {
  47     left: 0;
  48     right: auto;
  49     margin-left: -15px;
  50     margin-right: 0;
  51   }
  52
  53   .column-inline-form .icon-button {
  54     margin-left: 0;
  55     margin-right: 5px;
  56   }
  57
  58   .column-header__links .text-btn {
  59     margin-left: 10px;
  60     margin-right: 0;
  61   }
  62
  63   .account__avatar-wrapper {
  64     float: right;
  65   }
  66
  67   .column-header__back-button {
  68     padding-left: 5px;
  69     padding-right: 0;
  70   }
  71
  72   .column-header__setting-arrows {
  73     float: left;
  74   }
  75
  76   .setting-toggle__label {
  77     margin-left: 0;
  78     margin-right: 8px;
  79   }
  80
  81   .setting-meta__label {
  82     float: left;
  83   }
  84
  85   .status__avatar {
  86     left: auto;
  87     right: 10px;
  88   }
  89
  90   .status,
  91   .activity-stream .status.light {
  92     padding-left: 10px;
  93     padding-right: 68px;
  94   }
  95
  96   .status__info .status__display-name,
  97   .activity-stream .status.light .status__display-name {
  98     padding-left: 25px;
  99     padding-right: 0;
 100   }
 101
 102   .activity-stream .pre-header {
 103     padding-right: 68px;
 104     padding-left: 0;
 105   }
 106
 107   .status__prepend {
 108     margin-left: 0;
 109     margin-right: 68px;
 110   }
 111
 112   .status__prepend-icon-wrapper {
 113     left: auto;
 114     right: -26px;
 115   }
 116
 117   .activity-stream .pre-header .pre-header__icon {
 118     left: auto;
 119     right: 42px;
 120   }
 121
 122   .account__avatar-overlay-overlay {
 123     right: auto;
 124     left: 0;
 125   }
 126
 127   .column-back-button--slim-button {
 128     right: auto;
 129     left: 0;
 130   }
 131
 132   .status__relative-time,
 133   .activity-stream .status.light .status__header .status__meta {
 134     float: left;
 135   }
 136
 137   .activity-stream .detailed-status.light .detailed-status__display-name > div {
 138     float: right;
 139     margin-right: 0;
 140     margin-left: 10px;
 141   }
 142
 143   .activity-stream .detailed-status.light .detailed-status__meta span > span {
 144     margin-left: 0;
 145     margin-right: 6px;
 146   }
 147
 148   .status__action-bar {
 149
 150     &__counter {
 151       margin-right: 0;
 152       margin-left: 11px;
 153
 154       .status__action-bar-button {
 155         margin-right: 0;
 156         margin-left: 4px;
 157       }
 158     }
 159   }
 160
 161   .status__action-bar-button {
 162     float: right;
 163     margin-right: 0;
 164     margin-left: 18px;
 165   }
 166
 167   .status__action-bar-dropdown {
 168     float: right;
 169   }
 170
 171   .privacy-dropdown__dropdown {
 172     margin-left: 0;
 173     margin-right: 40px;
 174   }
 175
 176   .privacy-dropdown__option__icon {
 177     margin-left: 10px;
 178     margin-right: 0;
 179   }
 180
 181   .detailed-status__display-avatar {
 182     margin-right: 0;
 183     margin-left: 10px;
 184     float: right;
 185   }
 186
 187   .detailed-status__favorites,
 188   .detailed-status__reblogs {
 189     margin-left: 0;
 190     margin-right: 6px;
 191   }
 192
 193   .fa-ul {
 194     margin-left: 0;
 195     margin-left: 2.14285714em;
 196   }
 197
 198   .fa-li {
 199     left: auto;
 200     right: -2.14285714em;
 201   }
 202
 203   .admin-wrapper {
 204     direction: rtl;
 205   }
 206
 207   .admin-wrapper .sidebar ul a i.fa,
 208   a.table-action-link i.fa {
 209     margin-right: 0;
 210     margin-left: 5px;
 211   }
 212
 213   .simple_form .check_boxes .checkbox label,
 214   .simple_form .input.with_label.boolean label.checkbox {
 215     padding-left: 0;
 216     padding-right: 25px;
 217   }
 218
 219   .simple_form .check_boxes .checkbox input[type="checkbox"],
 220   .simple_form .input.boolean input[type="checkbox"] {
 221     left: auto;
 222     right: 0;
 223   }
 224
 225   .simple_form .input.radio_buttons .radio {
 226     left: auto;
 227     right: 0;
 228   }
 229
 230   .simple_form .input.radio_buttons .radio > label {
 231     padding-right: 28px;
 232     padding-left: 0;
 233   }
 234
 235   .simple_form .input-with-append .input input {
 236     padding-left: 142px;
 237     padding-right: 0;
 238   }
 239
 240   .simple_form .input.boolean label.checkbox {
 241     left: auto;
 242     right: 0;
 243   }
 244
 245   .simple_form .input.boolean .label_input,
 246   .simple_form .input.boolean .hint {
 247     padding-left: 0;
 248     padding-right: 28px;
 249   }
 250
 251   .simple_form .label_input__append {
 252     right: auto;
 253     left: 3px;
 254
 255     &::after {
 256       right: auto;
 257       left: 0;
 258       background-image: linear-gradient(to left, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%));
 259     }
 260   }
 261
 262   .simple_form select {
 263     background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") no-repeat left 8px center / auto 16px;
 264   }
 265
 266   .table th,
 267   .table td {
 268     text-align: right;
 269   }
 270
 271   .filters .filter-subset {
 272     margin-right: 0;
 273     margin-left: 45px;
 274   }
 275
 276   .landing-page .header-wrapper .mascot {
 277     right: 60px;
 278     left: auto;
 279   }
 280
 281   .landing-page__call-to-action .row__information-board {
 282     direction: rtl;
 283   }
 284
 285   .landing-page .header .hero .floats .float-1 {
 286     left: -120px;
 287     right: auto;
 288   }
 289
 290   .landing-page .header .hero .floats .float-2 {
 291     left: 210px;
 292     right: auto;
 293   }
 294
 295   .landing-page .header .hero .floats .float-3 {
 296     left: 110px;
 297     right: auto;
 298   }
 299
 300   .landing-page .header .links .brand img {
 301     left: 0;
 302   }
 303
 304   .landing-page .fa-external-link {
 305     padding-right: 5px;
 306     padding-left: 0 !important;
 307   }
 308
 309   .landing-page .features #mastodon-timeline {
 310     margin-right: 0;
 311     margin-left: 30px;
 312   }
 313
 314   @media screen and (min-width: 631px) {
 315     .column,
 316     .drawer {
 317       padding-left: 5px;
 318       padding-right: 5px;
 319
 320       &:first-child {
 321         padding-left: 5px;
 322         padding-right: 10px;
 323       }
 324     }
 325
 326     .columns-area > div {
 327       .column,
 328       .drawer {
 329         padding-left: 5px;
 330         padding-right: 5px;
 331       }
 332     }
 333   }
 334
 335   .public-layout {
 336     .header {
 337       .nav-button {
 338         margin-left: 8px;
 339         margin-right: 0;
 340       }
 341     }
 342
 343     .public-account-header__tabs {
 344       margin-left: 0;
 345       margin-right: 20px;
 346     }
 347   }
 348
 349   .landing-page__information {
 350     .account__display-name {
 351       margin-right: 0;
 352       margin-left: 5px;
 353     }
 354
 355     .account__avatar-wrapper {
 356       margin-left: 12px;
 357       margin-right: 0;
 358     }
 359   }
 360
 361   .card__bar .display-name {
 362     margin-left: 0;
 363     margin-right: 15px;
 364     text-align: right;
 365   }
 366 }