معرّب المظاهر

/* Arabic Adaptations by Abdallah Amr */
 
/* Arabic Font (Amiri) */
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 
/* Title & Logo */
:root {
    --logo-image: url("http://ar-backrooms-wiki.wikidot.com/local--files/component:theme/logo.png");
    --header-title: "الغرف الخلفية";
    --header-subtitle: "لقد كنت هنا من قبل.";
 
    /* Typefaces */
    --body-font: 'Public Sans', 'Amiri', Inter, Verdana, Geneva, "Helvetica Neue", "Helvetica", sans-serif;
    --UI-font: 'Fantasque Sans Mono', 'Amiri', Courier New, Ubuntu Mono, Consolas, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --header-font: 'Fantasque Sans Mono', 'Amiri', Courier New, Ubuntu Mono, Consolas, monospace;
    --title-font: var(--header-font);
    --mono-font: 'Fantasque Sans Mono', 'Amiri', Recursive, Consolas, monaco, monospace;
}
 
/* Setting everything to rtl */
html, body, #header, #main-content, #page-content div[style="text-align: right;"], #page-content div[style="text-align: right;"] ul, :is(#page-title, .meta-title), #page-content div[style="text-align: right;"] div, #page-content div[style="text-align: right;"] p, #top-bar, #top-bar ul, .hovertip, .footnotes-footer, .bibitems, #edit-page-form:has(.do-not-notify > label > input:checked) #edit-page-textarea, div.page-rate-widget-box, #page-content div.rate-box-with-credit-button, #main-content .page-tags, #page-options-container, :is(form#edit-page-form, form#edit-post-form, form#new-post-form, form#new-thread-form) :not(#edit-page-textarea), #footer {
  direction: rtl;
}
 
#page-content {
  direction: rtl;
  text-align: right;
}
 
.ltr-content, #page-content div[style="text-align: left;"] {
  direction: ltr;
}
 
:not(.rtl-code) .code, .page-source {
  direction: ltr;
  text-align: left;
}
 
/* making header stuff rtl */
#login-status {
  inset: 1.5em auto auto calc(3% + var(--search-height) - .25em);
  margin: 0 .5em 0 0;
}
 
#search-top-box {
  right: auto;
  left: calc(3% - .25em);
}
 
#search-top-box:is(:hover, :active)::after {
  --clip-path: polygon(100% 0,0% 0,0% 100%,100% 100%);
}
#search-top-box::after {
  --clip-path: polygon(0% 0,0% 0,0% 100%,0% 100%);
}
 
#login-status span.printuser {
  margin-right: unset;
  margin-left: .5ch;
}
 
#login-status span.printuser a {
  margin-left: inherit;
  margin-right: unset;
}
 
#login-status #account-options {
  left: 0;
  right: auto;
}
 
/* making top bar rtl */
#header div[class*="top-bar"] > ul > li > ul > li ul {
  right: calc(100% - .0625rem);
  left: auto;
}
 
#header div[class*="top-bar"] > ul > li > ul li:is(:hover, :active, :focus-within) > a::before {
  --clip-path: polygon(115% 0,-15% 0,0% 100%,100% 100%);
}
#header div[class*="top-bar"] > ul > li > ul li > a::before {
  --clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%);
}
 
/* making title rtl */
:is(#page-title, .meta-title)::after {
  margin: auto 1.25rem auto auto;
}
 
/* making user images rtl */
span.printuser a:first-of-type:not(:last-of-type) {
  margin: 0 0 0 .25ch;
}
 
/* making footnotes rtl */
.footnotes-footer, .bibitems {
  box-shadow: inset -.5em 0 0 0 rgb(var(--footnotes-footer-colorbar-color));
  padding: .15em 0 1em 1em;
}
.footnotes-footer .footnote-footer {
  margin: .25em 6ch 0 0;
}
:is(.footnotes-footer, .bibitems) a[href*="javascript"]::before {
  left: -20%;
  right: auto;
}
.footnotes-footer a[href*="javascript"] {
  margin: 0 -3ch 0 0;
}
 
/* rtl Wikidot Footer */
#footer .options {
  padding: 0 0 0 .25rem;
}
 
#footer .options a {
  box-shadow: -.0625rem 0 0 0 rgb(var(--swatch-text-secondary-color));
  padding-left: .4em;
  padding-right: 0;
}
 
div#footer::after {
  border-right: solid 1px;
  padding-right: 0.5em;
  margin-right: 0.3em;
  border-left: none;
  padding-left: 0;
  margin-left: 0;
}
 
#footer a:is(:hover, :active, :focus, :focus-within)::before {
  --clip-path: polygon(115% 0,-15% 0,0% 100%,100% 100%);
}
#footer a::before {
  --clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%);
}
 
#license-area a:is(:hover, :active, :focus, :focus-within)::before {
  --clip-path: polygon(115% 0,-15% 0,0% 100%,100% 100%);
}
#license-area a::before {
  --clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%);
}
 
/* Fixing Header width bug on mobile */
@media only screen and (max-width: 56.25rem) {
  :root, body, #skrollr-body, #container, #container-wrap, #container-wrap-wrap {
    width: -webkit-fill-available;
    width: -moz-fill-available;
    width: 100dvw;
  }
 
  #container {
    overflow-x: clip;
  }
 
  body {
    max-width: -webkit-fill-available;
    max-width: -moz-fill-available;
  }
}
 
/* Sidebar Element Hover animation */
:is(#side-bar, #interwiki) div.menu-item a::before {
  --clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%);
}
 
/* breadcrumbs link stuff */
:is(#breadcrumbs, .pseudocrumbs) a::before {
  box-shadow: -00.0625rem .0625rem 0 0 rgb(var(--swatch-primary)), -0.25rem .0625rem 0 0 rgba(var(--background-gradient-color),.7), -0.25rem .0625rem 0 0 rgb(var(--swatch-background)), -0.3125rem .0625rem 0 0 rgb(var(--swatch-primary));
  -webkit-transform: skew(25deg);
  transform: skew(25deg);
}
 
/* rtl text bar trick */
#edit-page-form #edit-page-textarea {
  direction: ltr;
  text-align: left;
}
 
#edit-page-form:has(.do-not-notify > label > input:checked) #edit-page-textarea {
  text-align: right;
}
 
/* rtl tags */
#main-content .page-tags::before {
  right: 0;
  left: auto;
}
#main-content .page-tags span a:not([href^="/system:page-tags/tag/_"]):not(:last-child) {
  border-left: .0625rem dotted rgba(var(--pagetags-text-color),.5);
  border-right: none;
}
#main-content .page-tags span a:visited:not([href^="/system:page-tags/tag/_"]):not(:last-child) {
  border-left: .0625rem dotted rgba(var(--pagetags-text-color),.5);
  border-right: none;
}
 
/* rtl ToC Title */
#toc #toc-action-bar a::after {
  right: 102%;
  left: auto;
}
 
/* rtl ToC Contents */
#toc #toc-list div[style*="margin-left"] {
  margin-right: 1em !important;
  margin-left: 0 !important;
}
 
#toc #toc-list a:is(:hover, :active, :focus, :focus-within) {
  translate: -.25rem;
}
 
#toc #toc-list a::before {
  right: 0;
  left: auto;
  translate: 1.25em -50%;
  rotate: y 205deg;
}
 
#toc #toc-list a:is(:hover, :active, :focus, :focus-within)::before {
  translate: 1em calc(.0625em - 50%);
  rotate: y 180deg;
}
 
/* rtl unordered lists */
#page-content ul:not(.yui-nav) {
  padding-right: 1rem;
  padding-left: unset;
}
 
/* rtl bottom stuff */
div#page-info, div.page-watch-options {
  text-align: left;
}
 
/* rtl site actions button images */
div[id*="page-options-bottom"]:not(:is(.page-rate-widget-box, #search-top-box-form)) > a.btn {
  padding-right: calc(var(--icon-size) + .5em);
  padding-left: var(--button-padding);
  box-shadow: .125rem 0 .25rem 0 rgba(var(--swatch-tertiary-color),.25), inset 0 -.0625rem 0 0 rgba(var(--swatch-tertiary-color),.75), 0 0 0 0 rgb(var(--ui-button-hover-outline)), inset calc(-1 * var(--icon-size) )0 0 0 rgb(var(--ui-icon-bg));
}
 
div[id*="page-options-bottom"] > a::after {
  left: auto;
  right: 0;
}
 
div[id*="page-options-bottom"]:not(:is(.page-rate-widget-box, #search-top-box-form)) > a.btn:is(:hover, :active, :focus, :focus-within) {
  box-shadow: .125rem 0 .25rem 0 rgba(var(--swatch-tertiary-color),0), inset .0625rem 0 0 0 rgba(var(--swatch-tertiary-color),0), inset 0 .0625rem 0 0 rgba(var(--swatch-tertiary-color),0), 0 0 0 .125rem rgb(var(--ui-button-hover-outline)), inset calc(-1* var(--icon-size)) 0 0 0 rgb(var(--ui-icon-hover-bg));
}
 
/* action area forms */
#action-area :is(h1, h2, h3, h4) {
  direction: rtl;
}
 
#action-area :is(h1, h2, h3, h4)::after {
  margin: auto 1.25rem auto auto;
}
 
:is(form#edit-page-form, form#edit-post-form, form#new-post-form, form#new-thread-form) div.do-not-notify label input {
  margin-left: .5em;
  margin-right: auto;
}
 
#action-area a.action-area-close {
  float: left;
}
 
/* edit form */
:is(form#edit-page-form, form#edit-post-form, form#new-post-form, form#new-thread-form) table.form:first-of-type tr td:first-of-type {
  right: .75rem;
  left: auto;
  direction: rtl;
}
 
:is(form#edit-page-form, form#edit-post-form, form#new-post-form, form#new-thread-form) .edit-page-bottomtable tr > td:first-of-type > div:first-of-type::before {
  right: 1rem;
  left: auto;
  direction: rtl;
}
 
:is(form#edit-page-form, form#edit-post-form, form#new-post-form, form#new-thread-form) .edit-help-34 > a:first-of-type {
  margin: 0 .5em 0 1.5em;
}
 
:is(form#edit-page-form, form#edit-post-form, form#new-post-form, form#new-thread-form) .edit-help-34 > a:nth-of-type(2)::before {
  right: -1em;
  left: auto;
}
 
:is(form#edit-page-form, form#edit-post-form, form#new-post-form, form#new-thread-form) .edit-help-34 > a:nth-of-type(2)::before, :is(form#edit-page-form, form#edit-post-form, form#new-post-form, form#new-thread-form) .edit-help-34 > a:nth-of-type(2):is(a, :hover, :active, :focus, :focus-within)::before {
  right: -1em;
  left: auto;
}
 
:is(form#edit-page-form, form#edit-post-form, form#new-post-form, form#new-thread-form) .edit-help-34 > a:first-of-type {
  margin: 0 .5em 0 1.5em;
}
 
/* edit form buttons */
:is(form#edit-page-form, form#edit-post-form, form#new-post-form, form#new-thread-form) .wd-editor-toolbar-panel a::after {
  --clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%);
}
:is(form#edit-page-form, form#edit-post-form, form#new-post-form, form#new-thread-form) .wd-editor-toolbar-panel li:is(:hover, :active, :focus-within) > a::after {
  --clip-path: polygon(115% 0,-15% 0,0 100%,100% 100%);
}
:is(form#edit-page-form, form#edit-post-form, form#new-post-form, form#new-thread-form) .wd-editor-toolbar-panel div > ul > li > ul {
  --clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%);
  inset: 0 var(--icon-size) auto auto;
  -webkit-transition: clip-path .2s var(--ease-in-out),box-shadow .1s var(--ease-in-out).25s,padding-right .1s var(--ease-in-out).25s;
  transition: clip-path .2s var(--ease-in-out),box-shadow .1s var(--ease-in-out).25s,padding-right .1s var(--ease-in-out).25s;
  padding-right: 0;
  padding-left: unset;
}
:is(form#edit-page-form, form#edit-post-form, form#new-post-form, form#new-thread-form) .wd-editor-toolbar-panel div > ul > li:is(:hover, :active, :focus-within, .sfhover) > ul {
  --clip-path: polygon(100% 0,0 0,0 100%,100% 100%);
  right: var(--icon-size);
  -webkit-transition: clip-path .2s var(--ease-in-out)50ms,box-shadow .1s var(--ease-in-out),padding-right .1s var(--ease-in-out);
  transition: clip-path .2s var(--ease-in-out)50ms,box-shadow .1s var(--ease-in-out),padding-right .1s var(--ease-in-out);
  box-shadow: inset -.125em 0 0 0 rgb(var(--swatch-tertiary-color));
  padding-right: .125em;
  left: auto;
  padding-left: unset;
}
 
/* AR bhl strings */
:root {
  --text-tags: "الأوسمة⬐";
  --text-editor-desc: "وصف قصير للتغييرات:";
  --text-pagehistory-rev: "rev.";
  --text-pagehistory-flags: "flags";
  --text-pagehistory-actions: "actions";
  --text-pagehistory-by: "by";
  --text-pagehistory-date: "التاريخ";
  --text-sitetools: "أدوات الموقع";
  --text-creditview-back: "عودة";
  --text-tableofcontents: "قائمة المحتويات";
  --text-messages: "الرسائل";
}
 
/* Logged in user info */
@media only screen and (max-width: 56.25rem) {
  #login-status::before {
    -webkit-mask: var(--user-account-mask)center left/calc(var(--account-height) - .5em)no-repeat;
    mask: var(--user-account-mask)center left/calc(var(--account-height) - .5em)no-repeat;
  }
}
@media only screen and (max-width: 56.25rem) {
  #login-status {
    inset: 2em auto auto calc(3% + var(--account-height) + .25em);
  }
}
 
/* ==== MODALS ==== */
/* User Info Modal */
#odialog-container div.owindow > div.modal-body > img[style*="padding: 2px 8px;"]:first-child + h1 {
  margin-right: 7.5rem;
  margin-left: .25em;
}
 
#odialog-container div.owindow > div.modal-body > img[style*="padding: 2px 8px;"]:first-child {
  margin: 1em .25rem .25em 0;
}
 
#odialog-container .modal-footer.button-bar {
  text-align: left;
}
 
#odialog-container .modal-footer {
  padding: 1rem 0 0 1rem;
}