Droid Arabic Naskh by Wisdawn

/* ==UserStyle==
@name         Droid Arabic Naskh
@version      20241002.21.00
@namespace    https://userstyles.world/user/Wisdawn
@description  Use Droid Arabic Naskh font on YouTube and Wikipedia for Arabic font, and fall back to Fira Sans for English.
@author       Wisdawn
@license      No License
==/UserStyle== */

@-moz-document domain("youtube.com"), domain("wikipedia.org") {
/* START: YouTube Views, Date, and Tags */
#ytd-watch-info-text,
#yt-animated-rolling-number,
.animated-rolling-number-wiz.style-scope.ytd-watch-info-text {
    font-family: "Droid Arabic Naskh", "Fira Sans" !important;
    font-size: 1.6rem !important;
}

#yt-attributed-string,
.style-scope ytd-text-inline-expander {
    font-family: "Droid Arabic Naskh", "Fira Sans" !important;
    font-size: 1.6rem !important;
}
/* END: YouTube Views, Date, and Tags */
/* Additional CSS for specific YouTube elements */
#comment,
div#contenteditable-root.style-scope.yt-formatted-string,
yt-formatted-string#content-text.style-scope.ytd-backstage-post-renderer,
span.mw-page-title-main {
    font-family: "Droid Arabic Naskh", "Fira Sans" !important;
    font-size: 1.8rem !important;
    line-height: 3rem !important;
}

yt-formatted-string.style-scope.ytd-watch-metadata {
    font-family: "Droid Arabic Naskh", "Fira Sans" !important;
    font-size: 1.8rem !important;
    line-height: 3rem !important;
}

div#mw-content-text.mw-body-content,
/* Wikipedia articles */
div#p-lang-btn.vector-dropdown.mw-portlet.mw-portlet-lang,
div.vector-sitenotice-container {
    font-family: "Droid Arabic Naskh", "Fira Sans" !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
}

div.vector-page-toolbar-container {
    font-family: "Droid Arabic Naskh", "Fira Sans" !important;
    font-size: 0.85rem !important;
    line-height: 2rem !important;
}

yt-formatted-string.segment-text.style-scope.ytd-transcript-segment-renderer,
span#message.style-scope.yt-live-chat-text-message-renderer,
div#input.style-scope.yt-live-chat-text-input-field-renderer,
yt-formatted-string#home-content-text.style-scope.ytd-post-renderer,
div.vector-main-menu-container,
div.vector-sticky-pinned-container {
    font-family: "Droid Arabic Naskh", "Fira Sans" !important;
    font-size: 1.4rem !important;
    line-height: 2.5rem !important;
}

span#author-name.style-scope.yt-live-chat-author-chip {
    font-family: "Cairo" !important;
    font-size: 1.5rem !important;
    line-height: 2.2rem !important;
    padding: 0.5rem !important;
}

span.style-scope.ytd-comment-view-model {
    font-family: "Cairo" !important;
    font-size: 1.6rem !important;
    line-height: 2rem !important;
    padding: 0.4rem !important;
}

.style-scope.ytd-comment-view-model {
    font-family: "Droid Arabic Naskh", "Fira Sans" !important;
    font-size: 1.6rem !important;
    line-height: 2.5rem !important;
}

yt-formatted-string#text.style-scope.ytd-channel-name {
    font-family: "Cairo" !important;
    font-size: 1.2rem !important;
    line-height: 1.6rem !important;
}

span#video-title.style-scope.ytd-compact-video-renderer,
yt-formatted-string#video-title.style-scope.ytd-rich-grid-media,
a.ShortsLockupViewModelHostEndpoint.ShortsLockupViewModelHostOutsideMetadataEndpoint {
    font-family: "Droid Arabic Naskh", "Fira Sans" !important;
    font-size: 1.1rem !important;
    line-height: 2rem !important;
}


/* Specific language direction and alignment */
:lang(ar) {
    direction: rtl;
    text-align: right;
}

:lang(en),
:lang(fr),
:lang(es) {
    direction: ltr;
    text-align: left;
}

/* Additional YouTube and Facebook styling for RTL and LTR */
#comment #body,
#comment #content-text,
#comment #author-text,
#comment #view-count,
#comment .style-scope.ytd-comment-view-model,
#comment #paid-comment-background,
#comment #linked-comment-badge,
#comment #author-thumbnail,
#comment #main,
#comment #header,
#comment #pinned-comment-badge,
#comment #header-author,
#comment #published-time-text,
#comment #expander,
#comment #content,
#comment #paid-comment-chip,
#comment #comment-chip-container,
#comment #comment-chip-price,
#comment .less-button,
#comment .more-button,
#comment .translate-button,
#comment #action-buttons,
#comment #toolbar,
#comment #like-button,
#comment #vote-count-middle,
#comment #dislike-button,
#comment #creator-heart,
#comment #reply-button-end,
#comment #reply-dialog,
#comment #action-menu,
#comment #edit-dialog,
#body .style-scope.ytd-comment-view-model,
#body,
.style-scope.ytd-comment-view-model,
#author-thumbnail,
.style-scope.ytd-comment-view-model,
a.yt-simple-endpoint.style-scope.ytd-comment-view-model,
yt-img-shadow.style-scope.ytd-comment-view-model.no-transition,
img#img.style-scope.yt-img-shadow,
#main,
.style-scope.ytd-comment-view-model,
#header,
.style-scope.ytd-comment-view-model,
#pinned-comment-badge,
.style-scope.ytd-comment-view-model,
#header-author,
.style-scope.ytd-comment-view-model,
h3.style-scope.ytd-comment-view-model,
a#author-text.yt-simple-endpoint.style-scope.ytd-comment-view-model,
span.style-scope.ytd-comment-view-model.style-scope.ytd-comment-view-model,
#author-comment-badge,
.style-scope.ytd-comment-view-model,
#sponsor-comment-badge,
.style-scope.ytd-comment-view-model,
span#published-time-text.style-scope.ytd-comment-view-model,
a.yt-simple-endpoint.style-scope.ytd-comment-view-model,
div.css-1r5gb7q.e1bu1ts10,
ytd-expander#expander.style-scope.ytd-comment-view-model,
#content,
.style-scope.ytd-expander,
yt-pdg-comment-chip-renderer#paid-comment-chip.style-scope.ytd-comment-view-model,
#comment-chip-container,
.style-scope.yt-pdg-comment-chip-renderer,
yt-icon.style-scope.yt-pdg-comment-chip-renderer,
span#comment-chip-price.style-scope.yt-pdg-comment-chip-renderer,
yt-attributed-string#content-text.style-scope.ytd-comment-view-model,
span.yt-core-attributed-string.yt-core-attributed-string--white-space-pre-wrap,
tp-yt-paper-button#less.style-scope.ytd-expander,
span.less-button.style-scope.ytd-comment-view-model,
tp-yt-paper-button#more.style-scope.ytd-expander,
span.more-button.style-scope.ytd-comment-view-model,
ytd-tri-state-button-view-model.translate-button.style-scope.ytd-comment-view-model,
tp-yt-paper-button.style-scope.ytd-tri-state-button-view-model,
ytd-comment-engagement-bar#action-buttons.style-scope.ytd-comment-view-model,
#toolbar,
.style-scope.ytd-comment-engagement-bar,
ytd-toggle-button-renderer#like-button.style-scope.ytd-comment-engagement-bar,
yt-button-shape,
button.yt-spec-button-shape-next.yt-spec-button-shape-next--text.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--size-s.yt-spec-button-shape-next--icon-button.yt-spec-button-shape-next--override-small-size-icon,
div.yt-spec-button-shape-next__icon,
yt-icon.style-scope.ytd-menu-renderer,
yt-icon-shape.style-scope.yt-icon,
icon-shape.yt-spec-icon-shape,
tp-yt-paper-tooltip.fit-to-visible-bounds,
div#tooltip.hidden.style-scope.tp-yt-paper-tooltip,
span#vote-count-middle.style-scope.ytd-comment-engagement-bar,
ytd-toggle-button-renderer#dislike-button.style-scope.ytd-comment-engagement-bar,
button.yt-spec-button-shape-next.yt-spec-button-shape-next--text.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--size-s.yt-spec-button-shape-next--icon-button.yt-spec-button-shape-next--override-small-size-icon,
div#creator-heart.style-scope.ytd-comment-engagement-bar,
ytd-button-renderer#reply-button-end.style-scope.ytd-comment-engagement-bar,
div.studio-beta-comment-templates-dropdown,
div.community-comment-template-dropdown.comment-templates-dropdown,
button.comment-templates-dropdown-button,
div#reply-dialog.style-scope.ytd-comment-engagement-bar,
div#action-menu.style-scope.ytd-comment-view-model,
ytd-menu-renderer.style-scope.ytd-comment-view-model,
div#top-level-buttons-computed.top-level-buttons.style-scope.ytd-menu-renderer,
div#flexible-item-buttons.style-scope.ytd-menu-renderer,
yt-icon-button#button.dropdown-trigger.style-scope.ytd-menu-renderer,
button#button.style-scope.yt-icon-button,
yt-interaction.circular.style-scope.yt-icon-button,
div.stroke.style-scope.yt-interaction,
div.fill.style-scope.yt-interaction,
yt-button-shape#button-shape.version-modern.style-scope.ytd-menu-renderer,
#description-inline-expander yt-attributed-string > .yt-core-attributed-string > .yt-core-attributed-string--link-inherit-color,
#description-inline-expander,
div#contenteditable-root.style-scope.yt-formatted-string,
div#input.style-scope.yt-live-chat-text-input-field-renderer,
yt-formatted-string#content-text.style-scope.ytd-backstage-post-renderer,
yt-formatted-string#home-content-text.style-scope.ytd-post-renderer {
    direction: rtl !important;
    text-align: right !important;
}

#yt-animated-rolling-number,
.animated-rolling-number-wiz.style-scope.ytd-watch-info-text {
    direction: ltr !important;
    text-align: left !important;
}
}