Archlinux Nord Theme by SignorBananone

/* ==UserStyle==
@name         Archlinux Nord
@version      20250426.14.50
@namespace    https://userstyles.world/user/SignorBananone
@description  Nordic revamp of the official Arch Linux website, including its forum, wiki, AUR, and all related resources.
@author       SignorBananone
@license      CC-BY-SA-4.0
==/UserStyle== */

@-moz-document domain("archlinux.org"), domain("aur.archlinux.org") {
/* Body */
body {
    min-width: 650px;
    background: #2e3440;
    color: #d8dee9;
    font: 100% sans-serif;
    text-align: center;
}

/* Links */
a:link, a:visited, th a:visited {
    color: #81a1c1;
}

a:hover, a:focus, a:visited:hover {
    color: #5e81ac;
    text-decoration: underline;
}

/* Header */
#news h3 a {
    display: block;
    background: #81a1c1;
    font-size: 15px;
    padding: 2px 10px;
    color: #d8dee9;
}

/* Arrow */
h3 span.arrow {
    display: block;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top: 6px solid #81a1c1;
    margin: 0 auto;
    font-size: 0;
    line-height: 0;
}

/* Navbar */
#archnavbar {
    min-height: 40px;
    padding: 10px 15px;
    background: #2e3440 !important;
    border-bottom: 5px solid #81a1c1 !important;
}



#archnavbarlist li a {
    color: #81a1c1;
    font-weight: bold !important;
    text-decoration: none !important;
}

#archnavbarlist li a:hover {
    color: #5e81ac !important;
    text-decoration: underline !important;
}

#archnavbar.anb-home ul li#anb-home a, #archnavbar.anb-packages ul li#anb-packages a, #archnavbar.anb-download ul li#anb-download a {
    color: #81a1c1 !important;
}



/* Boxes */
div.box {
    margin-bottom: 1.5em;
    padding: 0.65em;
    background: #3b4252;
    border: 1px solid #81a1c1;
}

#pkgsearch {
    padding: 1em .75em;
    background: #81a1c1;
    color: #d8dee9;
    border: 1px solid #5e81ac;
}

div.news-article .article-info {
    margin: 0;
    color: #a3be8c;
}

#news h4 {
    clear: both;
    font-size: 1em;
    margin-top: 1.5em;
    border-bottom: 1px dotted #81a1c1;
}

code {
    font-family: monospace, monospace;
    background: #4c566a;
    padding: .15em .25em;
}

pre {
    font-family: monospace, monospace;
    border: 1px solid #4c566a;
    background: #4c566a;
    padding: .5em;
    margin: 1em;
}

dl dt {
    color: #d8dee9;
    float: left;
    padding-right: 15px;
}

dl dt, dl dd {
    margin-bottom: 4px;
    font-weight: bold;
    border-top: 1px dotted #81a1c1;
}

h2 {
    font-size: 1.5em;
    margin-bottom: .5em;
    border-bottom: 1px solid #81a1c1;
}


/* Packages */
table.results {
    font-size: .846em;
    border-top: 1px dotted #81a1c1;
    border-bottom: 1px dotted #81a1c1;
}

thead {
    display: table-header-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: #81a1c1;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: #81a1c1;
}

.results th {
    padding: .5em 1em .25em .25em;
    border-bottom: 1px solid #81a1c1;
    white-space: nowrap;
    background-color: #434c5e;
}

.results tr:nth-child(odd), #article-list tr:nth-child(odd) {
    background: #4c566a;
}


.results tr:nth-child(even), #article-list tr:nth-child(even) {
    background: #434c5e;
}

#article-list tr:hover, #clocks-table tr:hover, #dev-dashboard tr:hover, #dev-todo-lists tr:hover, #dev-todo-pkglist tr:hover, #pkglist-results tr:hover, #stats-area tr:hover {
    background: #a3be8c;
}

.results .flagged {
    color: #bf616a;
}


.results tr:nth-child(odd of :not([hidden])), #article-list tr:nth-child(odd) {
    background: #4c566a;
}

.results tr:nth-child(even of :not([hidden])), #article-list tr:nth-child(even) {
    background: #434c5e;
}

/* Forums */



/* wiki */

:root {
    --background-color-base: #2e3440;
}

body.skin-vector div.mw-page-container {
    background-color: #2e3440;
}

.cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled {
    color: #d8dee9;
}

.vector-dropdown .vector-dropdown-content {
    position: absolute;
    top: 100%;
    left: -1px;
    opacity: 0;
    height: 0;
    visibility: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 50;
    background-color: #434c5e;
    padding: 16px 16px;
    font-size: 0.875rem;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.2);
    transition-property: opacity;
    transition-duration: 100ms;
    width: max-content;
    max-width: 200px;
    max-height: 75vh;
}

.vector-pinnable-header {
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid #d8dee9;
    line-height: 1.6;
}

.vector-pinnable-header-toggle-button {
    display: none;
    border: 0;
    padding: 4px 8px;
    background-color: #3b4252;
    color: #d8dee9;
    cursor: pointer;
    text-align: left;
    font-size: 0.75rem;
    border-radius: 2px;
}

.vector-pinnable-header-toggle-button:hover {
    background-color: #2e3440;
}



.cdx-text-input__input:enabled {
    background-color: #434c5e;
    color: #d8dee9;
    border-color: #81a1c1;
    box-shadow: inset 0 0 0 1px transparent;
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: .25s;
}

.cdx-text-input__input:enabled:focus {
    border-color: #5e81ac;
    box-shadow: inset 0 0 0 1px #5e81ac;
    outline: 1px solid transparent;
}

.cdx-text-input__input:enabled~.cdx-text-input__icon-vue {
    color: #d8dee9 !important;
}

.cdx-search-input--has-end-button {
    background-color: #434c5e;
    display: flex
;
    border: 1px solid #81a1c1;
    border-radius: 2px;
}

.cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled {
    color: #d8dee9;
}

.cdx-button:enabled, .cdx-button.cdx-button--fake-button--enabled {
    background-color: #81a1c1;
    border-color: #81a1c1;
}

.cdx-button:enabled:hover, .cdx-button.cdx-button--fake-button--enabled:hover {
    background-color: #5e81ac;
    color: #d8dee9;
    cursor: pointer;
}

.cdx-menu {
    background-color: #434c5e;
    display: flex
;
    flex-direction: column;
    position: absolute;
    left: 0;
    z-index: 50;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #81a1c1;
    border-radius: 2px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
}

.cdx-menu-item--highlighted {
    background-color: #2e3440 !important;
    cursor: pointer !important;
}

.cdx-menu--has-footer .cdx-menu-item:last-of-type:not(:first-of-type) {
    border-top: 1px solid #5e81ac;
}

.cdx-icon svg {
    fill: #5e81ac !important;
    width: 100%;
    height: 100%;
}


#content {
    background: #3b4252;
    border: 1px solid #2e3440;
}

body table, body h1, body h2, body h3, body h4, body h5, body pre, body code, body tt {
    color: #d8dee9;
}

#content a:not(.new):not([role=button]):visited, #mw-panel li:not(.new) a:not(.new):not([role=button]):visited {
    color: #a3be8c !important;
}

.cdx-button:enabled.cdx-button--weight-quiet.cdx-button--action-progressive, .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet.cdx-button--action-progressive {
    color: #5e81ac;
}

action-progressive {
    background-color: #2e3440;
}

.catlinks {
    background-color: #3b4252;
    margin-top: 1em;
    border: 1px solid #81a1c1;
    padding: 5px;
    clear: both;
}

.vector-pinned-container {
    background-color: #3b4252;
    padding: 0 16px;
    margin-bottom: 2rem;
}

.vector-pinnable-header {
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid #81a1c1;
    line-height: 1.6;
}

h2 > .mw-headline::before, h3 > .mw-headline::before, h4 > .mw-headline::before, h5 > .mw-headline::before, h6 > .mw-headline::before {
    color: #bf616a;
    font-style: italic;
    margin-right: 1ex;
}

.vector-pinnable-element .vector-menu-heading {
    color: #d8dee9;
    font-weight: normal;
    cursor: default;
    padding: 6px 0;
    margin: 6px 0;
    border-bottom: 1px solid #81a1c1;
}

div.archwiki-template-box.archwiki-template-box-note {
    background-color: #4c566a;
    border-color: #4c566a;
}

.cdx-field:not(.cdx-field--disabled) .cdx-field__help-text {
    color: #d8dee9;
}

body table, body h1, body h2, body h3, body h4, body h5, body pre, body code, body tt {
    color: #d8dee9;
}

table th {
    background: #434c5e none repeat scroll 0 0;
    border-bottom: 1px solid #3b4252;
}

table.styled-table tr td {
    border-top: 1px dotted #3b4252;
}

table.styled-table {
    background: #4c566a none repeat scroll 0 0;
    border: 1px solid #3b4252;
}

table tr:hover {
    background-color: #434c5e !important;
}

.purple {
    color: #b48ead;
}

.red {
    color: #bf616a;
}

.orange {
    color: #d08770;
}

.light_orange {
    color: #ebcb8b;
}

/* AUR */
#pkgsearch input {
    width: 10em;
    float: right;
    font-size: 1em;
    color: #d8dee9;
    background: #434c5e;
    border: 1px solid #81a1c1;
}

.pkgsearch-typeahead {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    padding: 0.15em 0.1em;
    margin: 0;
    min-width: 10em;
    font-size: 1em;
    text-align: left;
    list-style: none;
    background-color: #4c566a;
    border: 1px solid #81a1c1;
}

.pkgsearch-typeahead li a {
    color: #81a1c1;
}

#pkgdetails #detailslinks > div {
    padding: 0.5em;
    margin-bottom: 1em;
    background: #4c566a;
    border: 1px solid #81a1c1;
}

.keyword:link, .keyword:visited {
    float: left;
    margin: 1px .5ex 1px 0;
    padding: 0 1em;
    background-color: #5e81ac;
    border: 1px solid transparent;
    border-radius: 2px;
}

#pkgdetails #metadata h3 {
    background: #2e3440;
    color: #d8dee9;
    font-size: 1em;
    margin-bottom: 0.5em;
    padding: 0.2em 0.35em;
}

.comments-header h3 span.text {
    display: block;
    background: #81a1c1;
    font-size: 15px;
    padding: 2px 10px;
    color: #d8dee9;
}
}

@-moz-document domain("wiki.archlinux.org") {
#archnavbar ul#archnavbarlist li a {
    color: #81a1c1;
    font-weight: bold !important;
    text-decoration: none !important;...