Finn.no Darkmode by langbakk

/* ==UserStyle==
@name         Finn.no Darkmode
@version      20220404.20.48
@namespace    userstyles.world/user/langbakk
@description  Darkmode style for Finn.no

This is a WIP, so it's not necessarily complete for all pages, nor is it able to modify the header and footer (which uses a shadow-root variable system for assignment, which Stylus and Stylish doesn't apply to)
@author       langbakk
@license      No License
==/UserStyle== */

@-moz-document domain("finn.no") {
:root {
  /* 1. Defining in Global Scope */
  --dark_1: #111;
  --dark_2: #222;
  --dark_3: #333;
  --dark_4: #444;
  --dark_5: #555;
  --dark_7: #777;
  --medium_1: #aaa;
  --medium_2: #bbb;
  --medium_3: #ccc;
  --medium_4: #ddd;
  --medium_5: #eee;
  --light_1: #fff;
  --success_1: #4a9d57;
  --success_2: #82de91;
  --link_color: #6387bf;
}
.identity,.reputation,.ads--liquid--cols2to3 .ads__unit:hover,.panel--info,input,.input input,.input #search-sorter,#tjm-active-process div {
    background-color: var(--dark_2) !important;
}
body,.banner, .ads__unit,.fp-market-grid,.pageholder:first-of-type,.bg-white,.page-container,.grid__unit button:hover,.grid__unit,h2.grid__unit,.panel--bright,.pageholder .grid__unit a:hover .u-pa8 .flex-align svg,.mt-16 .group {
    background-color: var(--dark_3) !important;
}
.grid:not(.u-ma16),.modal__container,.pageholder .grid__unit a:hover {
    background-color: var(--dark_4) !important;
}
.pageholder,.pageholder .grid__unit,.link--dark:hover,.pageholder .grid__unit .link--dark a:hover,.grid:not(.u-ma16),.modal__container button:hover,.ads__unit,.grid__unit .ad-paging a:hover,.ad-paging a:hover,.truncate:hover,.breadcrumbs a.truncate:hover,.spaden,#activeAds,.inner,.panel--neutral {
    background-color:  var(--dark_5) !important;
}
.msg-header,#messaging-widget-chat-input {
    background-color: var(--medium_1);
    margin: 10px 10px 10px 0;
}
.msg-header__product,.msg-list__edit-bar-primary,#messaging-widget-textarea,.msg-input__textarea::placeholder {
    background-color: var(--medium_1);
    color: var(--dark_1);
}
.msg-layout__secondary,.msg-layout__secondary__chat {
    border-left: none;
    background-color: var(--dark_7);
}
.grid__unit {
    background-color: var(--dark_4) !important;
    color: var(--medium_4) !important;
}
#search-finn-kart strong,.context-box.context-box--down {
    color: var(--dark_7) !important;
}
.frontpage-search__result__link span {
    color: var(--medium_1) !important;
}
.my-32 li a,#last-searches li a,#lastsearch-clear-button {
    color: var(--medium_2) !important;
}
.u-licorice,.u-stone,.u-caption,.fps__input::placeholder {
    color: var(--medium_3) !important;
}
#profile-info,.u-t2,.ads__unit__link,.reacommendation-secondary-content-wrapper,.link--dark,.link--dark a,.link,.breadcrumbs a,.reputation li div,table, .modal__container div h1,.grid__unit button span,.my-32 h2,#last-searches h2,.u-mh16 a,.mt-16 .group h2,.panel p,.panel--info,.page-container h1 span,.fps__input,.input .label,.input #search-sorter,.input-toggle label,.input__sub-text,.market-grid__item a span.text-12,a,a:hover,a:visited,nav.breadcrumbs a + a::before, nav.breadcrumbs a + span::before,#active-ads-header,.ads__unit__content__details,.public-profile {
    color: var(--medium_4) !important;
}
#activeAds {
    padding: 10px;
}
#activeAds > .inner {
    border: 2px dotted var(--light_1);
    border-radius: 10px;
}
.banner a {
    border-color: var(--dark_1) !important;
}
input,.input input,.input #search-sorter {
    border-color: var(--dark_5) !important;
}
.input label {
    color: var(--medium_4);
}
.banners,.afsh-hide-container,#contentboard-container,#ad-stream__native-ad-1,.u-pa0 {
    display: none;
}
#bapDescriptionContent_expand_link {
    display: inline-block;
}
.ads__unit {
    margin: 2px;
}
a,a:visited,a:hover {
    font-weight: bold;
}
.App-module_modalHeader__1qFrS {
    margin-bottom: 20px;
}
.spaden .r-pal, .spaden .r-ptl, .spaden .r-pvl {
    padding: 0 !important;
}
.result-item-heading::after {
    background-image: none !important;
}
.-mx-16 {
    padding-left: 10px;
}
.mt-16 {
    padding-right: 10px;
}
.breadcrumbs,.ad-paging {
    padding: 5px;
}
.ad-paging span {
    vertical-align: baseline;
}
.ad-paging span u {
    text-decoration: none;
}
#last-searches {
    margin-left: 5px;
}
.ads--liquid--cols2to3 .ads__unit,.spaden .cols3from990 > .unit {
    width: 32%;
}
.grid--cols4from990 > .grid__unit {
  width: 24%;
  margin: 2px;
  border-radius: 12px;
}
#emission-expansion-button,#expansion-panel-ac50 {
    background-color: var(--success_1);
    border-radius: 8px;
}
#emission-expansion-button:hover {
    background-color: var(--success_1);
}
.expansion-panel--open #expansion-panel-ac50 {
    border-radius: 0 0 8px 8px;
}
.expansion-panel--open #emission-expansion-button {
    border-radius: 8px 8px 0 0;
}
.read-more::before {
    background: none;
}
.pageholder {
    max-width: 1050px;
}
.unit.flex.align-items-stretch.result-item {
    border: 2px solid var(--light_1);
    border-radius: 5px;
    margin: 0 0 10px 10px;
    background-color: var(--dark_2);
}
.unit.flex.align-items-stretch.result-item > a {
    border-radius: 10px;
    background-color: var(--dark_2);
}
.spaden .mod, .spaden .mod-behaviour {
    margin: 0 !important;
}
.unoverflowify {
    background-color: var(--dark_2);
    padding: 5px;
    color: var(--medium_3);
    min-height: 160px;
}
div[id^=netboard],#netboard_11 {
    display: none;
}
article[id^=Ad] {
    background-color: var(--dark_2);
    margin-bottom: 10px;
}
article .u-t4.u-mt8,article .u-d1 {
    color: var(--medium_3);
}
.button--link,.button--link:active, .button--link:focus, .button--link:hover, a.button--link:active, a.button--link:focus, a.button--link:hover {
  color: var(--link_color);
  padding: 2px 5px;
}
.toast--success,.toast--success .inner,.toast--success .container,.toast--success .mod {
    background-color: var(--success_2) !important;
}
input,#query-filter,.input input,.input button {
    color: var(--medium_4);
}
.grid.grid--auto-height.grid--vertical-center,.grid.grid--auto-height.grid--vertical-center h2 {
    padding: 5px 16px;
    border-radius: 8px;
}
.grid.grid--auto-height.grid--vertical-center h2 {
    min-width: 236px;
}
section.grid__unit.u-r-size1of3.u-ph16 {
    padding-top: 10px;
}
div[data-replace-user-searches] {
    display: none !important;
}
.fps__container {
    background-color: var(--dark_2) !important;
}
.fps__container .selectable__list__item .fps-popular-button {
    background-color: var(--medium_1);
    color: var(--dark_2) !important;
}
.fps-category-title,.button--link.fps-empty-list-cta svg,#remove-last-searches-button {
    color: var(--medium_5);   
}
}

@-moz-document url-prefix("https://www.finn.no/car/") {
.panel {
    margin: 0;
}
.panel div {
    padding: 0 5px;
}
.panel .flex-align+.grid .grid__unit:first-child,.panel .flex-align+.grid .grid__unit:nth-child(2) {
    width:  30%;
    padding: 0;
    margin: 10px 0 !important;
}
.panel .flex-align+.grid .grid__unit:nth-child(3) {
    width: 40%;
    padding: 0;
    margin: 10px 0;
}
.panel .flex-align+.grid .grid__unit:nth-child(3) .input {
    display: flex;
    align-items: center;
}
label[for="query-filter"] {
        display: none !important;
}
labe[for="search-sorter"] {
    width: 20%;
}
label[for="search-sorter"]+.input--select__wrap {
    width: 82%;
    margin-left: 10px;
}
.ads__unit {
    margin: 0;
}
.ads__unit:hover,.ads__unit__img:hover,.ads__unit__content:hover {
    background-color: var(--dark_2) !important;
}
section[aria-label="Lagre søk"] {
    margin-right: 10px;
}
}

@-moz-document url-prefix("https://www.finn.no/meldinger/") {
h1 {
    color: var(--medium_4);
}
.msg-layout {
    background-color: var(--dark_5);
    padding-top: 20px;
}
.msg-list__edit-bar {
    padding: 0;
    margin-bottom: 10px;
}
.msg-list__item {
    background-color: var(--dark_3);
    margin-bottom: 5px;
}
.msg-list__item.selected,.msg-list__item:hover {
    background-color: var(--medium_4);
}
.msg-list__item.selected button,.msg-list__item:hover button {
    color: var(--dark_5);
}
.msg-list__username {
    color: var(--medium_2);
}
.grid__unit {
    padding: 1em;
}
.grid__unit .panel {
    background-color: var(--dark_1);
}
}

@-moz-document url-prefix("https://www.finn.no/mine-annonser") {
 .panel--is-clickable:hover span,.panel--is-clickable:hover a,.panel--is-clickable:hover p {
    color: var(--dark_5) !important;
    background-color: transparent !important;
}
}

@-moz-document url-prefix("https://www.finn.no/innfinn/adselection") {
div[data-hide-values="GIVEAWAY WANTED"],span[data-category-summary-text] {
    color: var(--medium_2);
}
#description {
    min-height: 350px;
}
}

@-moz-document url-prefix("https://www.finn.no/bap/forsale/") {
div.flex.items-center button {
    background-color: var(--dark_4);
}
div.flex.items-center button + button {
    color: var(--light_1);
}
li.selected-filters__item:first-of-type div button {
    background-color: blue;
}
}

@-moz-document url-prefix("https://www.finn.no/job") {
#job-apply-form-root,.job-apply__receipt-container {
    background-color: var(--dark_4);
    border-radius: 10px;
    margin-left: 10px;
    padding-top: 10px;
    color: var(--medium_1);
}
.job-wrapper,.ads__unit__img,.ads__unit__content.u-pa8.u-bg-marble {
    background-color: var(--dark_1);
}
.job-wrapper,.job-object-custom article.ads__unit .job-wrapper {
    border-color: var(--dark_1);
}
}

@-moz-document url-prefix("https://www.finn.no/review") {
.feedback {
    color: var(--medium_1);
}
label,.feedback-step__title {
    text-align: center;
    display: block;
}
.feedback-step__scale-points-container {
    margin-top: 2em;
    margin-bottom: 0;
    padding-top: 15px;
    padding-bottom: 15px;
}
.feedback-step__tooltip.feedback-tooltip {
    margin-top: 3em;
    position: static;
}
}