Dark theme for the dutch nos.nl website. Makes it easier to read at night.
Donker thema voor de nos.nl website. Maakt het makkelijker om 's avonds te lezen.
nos.nl Dark theme by rob-n-roll
Details
Authorrob-n-roll
LicensePublic Domain
Categorynos.nl
Created
Updated
Size75 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Update 03/09/2023 EOL
Unfortunatly I don't have the time/energy anymore to maintain this theme. The code is Public Domain so if anyone wants to take over, copy/paste it and go for it. Was nice while it lasted (I started December 09, 2019). I'm switching to the app on my phone, and to darktheme extentions for the browser.
Helaas heb ik de tijd/energie niet meer om dit thema te onderhouden. De code is Public Domain dus als iemand het over wil nemen, copy/paste de code en ga er voor. Het was leuk zolang het duurde (ik begon 9 December, 2019). Ik stap over naar de app op mijn telefoon, en naar darktheme extenties voor de browser.
573 installs/installaties overal
Update 25/08/2023
Style is now Public Domain
Style is nu Public Domain
Update 21/08/2023 v3.25.1
Had to fix a lot of things.
Een hoop dingen gerepareerd.
Update 06/08/2023 v3.24.2
Mobile update (sports page), liveblog update.
Mobile update (sport pagina), liveblog update.
Update 04/08/2023 v3.24.1
The weather page and small updates.
De weer pagina en kleine updates.
Update 02/08/2023 v3.24
Quite big updates from the NOS, overhaul of the weather page.
Vrij grote update van de NOS, herbouwde weer pagina.
Update 05/07/2023 v3.23.1
The opacity of the images was too low, upped it to 0.9 (was 0.7). The value is now included in the variables section for easy access.
De opacity van de afbeeldingen was te laag, is nu omhoog naar 0.9 (van 0.7). De waarde is nu bij de variabelen geplaatst voor makkelijke toegang.
Update 29/04/2023 v3.23
Standard updates, some tags got changed.
Standaard updates, een paar tags waren veranderd.
Update 16/03/2023 v3.21
Footer tags got changed.
Footer tags waren veranderd.
Also: I do not work for the NOS, I have nothing to do with the organizational problems they are having. This is just a weird hobby to me.
Ook: Ik werk niet voor de NOS, ik heb niets te maken met de problemen die ze momenteel hebben binnen de organisatie. Dit is slechts een rare hobby voor me.
Update 27/02/2023 v3.20
Just another update. Some tags got changed.
Gewoon een update. Wat tags die veranderd waren.
Update 01/02/2023 v3.19
Sports update. Doesn't include the mobile version.
Sport update. Heeft geen mobiele versie aan boord.
Update 19/01/2023 v3.18
(Double update, since this website was inaccessible when I tried to update last.
Dubbele update, sinds deze website niet toegankelijk was toen ik de vorige update probeerde door te voeren.)
A lot of things broke, hadn't had the time since the holidays.
Veel dingen waren kapot, heb geen tijd gehad sinds de feestdagen.
Update 19/01/2023 v3.17
Important update. I've split all the different pages and screens, so you now click on a page in sections and the extention will bring you there. No more searching with ctrl-f or scrolling.
Belangrijke update. Ik heb al de verschillende pagina's en schermen gesplit, dus als je nu op een pagina klikt binnen sections zal de extentie je daar direct naartoe sturen. Niet meer zoeken via ctrl-f of scrollen.
- Sidenote: userstyles.org is currently bugged so didn't get this update. I can't visit the style page anymore, thus can't get to the edit screen.
Opmerking: userstyles.org is momenteel gebugged dus ontving deze update niet. Ik krijg geen toegang tot de style pagina, dus kan de edit pagina niet bereiken.
Update 13/12/2022 v3.16.11
Split the mobile version and the desktop version using a mediaquery. Should have done that earlier. Things might be broken because of it (or maybe even fixed).
De mobiele en desktop versie zijn nu opgesplitst dmv een mediaquery. Had dat al veel eerder moeten doen. Als gevolg hiervan kunnen zaken stuk zijn gegaan (of misschien wel opgelost).
Update 10/12/2022 v3.16.9
Another quick fix.
Update 09/12/2022 v3.16.8
Quick fix
Update 07/12/2022 v3.16.7
All kinds of small updates.
Allerlei kleine updates.
Update 20/11/2022 v3.16.3
World Cup day 1 unlocked many hidden pages, tried to catch them all. Also simplified the numbering system.
Wereld Kampioenschap dag 1 maakte veel verborgen onderdelen beschikbaar, geprobeerd ze allemaal mee te nemen. Ook het nummering systeem versimpelt.
Update 16/11/2022 v3.0.16
World Cup update. Program pages etc have not (yet) been done.
Wereld Kampioenschap update. Programma etc is nog niet gedaan.
Update 12/11/2022 v3.0.15
Big update. All variables are now concentrated in one field. Last minute update for the American mid-terms.
Grote update. Alle variabelen zijn nu samengevoegd in een veld. Op het laatste moment nog een update voor de Amerikaanse tussentijdse verkiezingen.
Update 18/09/2022
Latest version.
Update 08/08/2022
Just added the style to https://userstyles.world/style/6014/nos-nl-dark-theme. Here at least it works in chrome as well.
De style zojuist toegevoegd aan https://userstyles.world/style/6014/nos-nl-dark-theme. Hier werkt hij tenminste ook in chrome.
Update 08/08/2022
For some reason I can't get the style to work in Chrome, trying to fix it.
Om de een of andere rede werkt de style niet meer in Chrome, probeer het te repareren.
Update: It's either the extention or the website, can't get it to work on my end. Hope you are having better luck.
Update 07/08/2022 Version 3.0
Complete rewrite, everything is based on variables now.
Compleet herschreven, alles is nu gebaseerd op variabelen.
216 Installs.
Update 08/07/2022
Correspondents notes are now darker.
Correspondenten aantekeningen zijn nu donkerder.
Update 04/07/2022
Slight update in the quick fix and header
Kleine verandering in de nieuwe artikel layout en de header
Update 30/06/2022
Quick fix for the new article layout
Snelle oplossing voor de nieuwe artikel layout
Reached 200 installs!!
Update 25/06/2022
Carousel on the frontpage was broken.
Carousel op de frontpage was kapot.
Update 06/06/2022
Updated css labels.
Css label geupdate.
Update 14/05/2022
Updated some changed css labels.
Een paar css labels moeten updaten.
Update 25/02/2022
Fixed some changes in the css.
Wijzigingen in de css bijgewerkt.
Update 07/02/2022
And another olympics update
En nog een olympische update
Update 06/02/2022
Another olympics update
Nog een olympische spelen update
Update 04/02/2022
Sport page got broken, now fixed again.
Sport pagina is gerepareerd.
Update 03/02/2022
Updated the frontpage. Updated the olympics page, which is now a work in progress.
De frontpage geupdate. De olympische spelen pagina geupdate, heeft nog wel wat meer updates nodig.
Update 23/01/2022
Quality of life update. Transforming the style to be based on variables, which makes for easier customizing for everybody.
Quality of life update. De style gebruikt nu variabelen als basis, zodat hij eenvoudiger aan te passen is.
Update 01/01/2022
Happy new year! Gelukkig nieuw jaar!
Updated the visibility of tables in articles
Tabellen een visuele update gegeven zodat de tekst duidelijker is
Update 30/12/2021
Sidebar got some different class names
Zijbar had wat andere class namen gekregen
Update 10/12/2021
Updated the sports scoreboard
Het sport scorebord bijgewerkt.
Update 15/10/2021
Some fixes.
Paar dingen gerepareerd.
Update 13/09/2021
Nos changed some classnames and nesting.
Nos had een paar class namen veranderd en de nesting aangepast.
Update 03/09/2021
Cosmetic fixes. Improvements under the hood.
Cosmetische reparaties. Onder de motorkap de boel aan het verbeteren.
Update 20/08/2021
Popout menu background fixed.
Popout menu achtergrond gefixt.
Update 26/07/2021
Olympic update. Couldn't access certain pages because of iframes.
Olympische update. Sommige pagina's niet helemaal meegenomen doordat het iframes waren.
Update 20/07/2021
Frontpage got a lot of changes in the css. Switched out the header color and background color for better visibility.
Frontpage had een hoop veranderingen in de css. Heb de header kleur en achtergrond kleur gewisselt zodat de pagina's beter leesbaar zijn.
Update 14/07/2021
Updated the cookie notice and regional news pop-outs.
De cookie notificatie en regionale nieuws pop-outs meegenomen.
Update 13/07/2021
Frontpage got changed.
Frontpage was aangepast.
Update 23/06/2021
Some detail work.
Wat detailering bijgewerkt.
Update 03/06/2021 15/06/2021
Background for the footer on the frontpage broke, is now darkened again. Several other small fixes.
Achtergrond van de footer op de frontpage was kapot, is nu weer donkerder. Meerdere kleinere reperaties.
Update 15/05/2021
Small specific updates
Kleine specifieke aanpassingen
Update 30/04/2021
NOS Website got an overhaul, so had to spend a couple of days fixing the menu, header, footer, frontpage and some loose details. Code isn't pretty, but it works.
NOS Website heeft een grote update gekregen, dus heb een paar dagen nodig gehad om het menu, de header, footer, frontpage en andere losse details te repareren. Code is niet mooi maar het werkt.
Also, we reached 100 installations in March!!
Ook, we hebben 100 installaties bereikt in Maart!!
Update 07/11/2020
Bekijk ook was weer eens gesloopt. Afbeeldingen donkerder gemaakt.
Also see/Bekijk ook was broken once again. Added shaded images to the frontpage.
Update 03 Mei 2020
Video speler in artikelen meegenomen.
Video player in articles has been included.
Update 30 Apr 2020
Instagram posts zijn nu ondersteund.
Instagram posts are now supported.
Update 13 Apr 2020
nos.nl Dark Theme 2.0 "New Dark"
I got the flue, so rewrote the entire theme.
Ik kreeg de griep, dus heb het hele theme opnieuw geschreven.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name nos.nl Dark theme
@namespace nos.nl
@version 3.25.1
@description 'Dark theme for the Dutch NOS website. Makes it easier to read at night. Donker thema voor de NOS website. Maakt het makkelijker om 's avonds te lezen.'
@author Rob-n-Roll
@homepageURL https://userstyles.world/style/6014/nos-nl-dark-theme-2-0
@supportURL https://userstyles.world/style/6014/nos-nl-dark-theme-2-0
==/UserStyle== */
@-moz-document domain("nos.nl"), domain("upload-nosooggetuige.triple-it.nl"), domain("localfocuswidgets.net"), url("https://interactives.ap.org/election-results/customers/layouts/organization-layouts/published/63356/5718.html"), url("https://interactives.ap.org/election-results/customers/layouts/organization-layouts/published/63356/4676.html"), url-prefix("https://cookies.nos.nl"), url-prefix("https://cdn.nos.nl"), url("https://app.nos.nl/data/datavisualisatie/foto-vergelijk/444/index.html") {
/*************/
/* Variablen */
/*************/
:root
{
--background-color: #202020;
--background-color-light: #333;
--background-color-dark: #000;
--color: #ababab;
/* --link: #E61E14;*/
/* --link-hover: #E61E14;*/
--devider-line: #444;
--devider-line-nuanced: #333;
--box-shadow: 0 2px 6px 0 #000;
--box-shadow-nuanced: 0 0 3px 0 #000;
--color-dark: #666;
--color-darker: #000;
--color-light: #ddd;
--color-nuanced: #333;
--red: #E61E14;
--red: #e22f26;
--blue: #284bbe;
--color-dem: rgb(13, 52, 183);/*.biyclJ*/
--color-rep: rgb(139, 20, 14);/*.iNLJDY*/
--border: #000;
--border-light: #555;
--border-nuanced: #333;
--art-extra-info-background: #252525;
--art-extra-info-color: #111;
--video-control-bar: /*rgb(171, 171, 171, 50%)*/hsl(0deg 0% 13% / 50%);
--live-video-control-bar: /*rgb(171, 171, 171, 50%)*/hsl(0deg 0% 13% / 50%);
--image-opacity: 0.9;
--image-opacity-hover: 1;
/*header*/
--background-color-header: #181717;
--box-shadow-header: 0 2px 6px 0 #000;
--header-border-bottom: solid 1px #000;
--header-border-color:#000;
--header-menu-devider-line: #666;
--header-dropdown-border: #111;
--header-dropdown-devider-line: #3a3a3a;
--header-popout-devider-line: #3a3a3a;
--header-popout-color: var(--color);
--header-popout-color-dark: var(--color-dark);
--header-popout-color-hover: var(--red);
/*footer*/
--background-color-footer: #1a1a1a;
--fp-footer-border-color: #3b3b3b;
--tips-en-vragen-background: #222;
--tips-en-vragen-border: #555;
--tips-en-vragen-devider-line: #222;
--socialmedia-background-color: #222;
/* Sidebar */
--sidebar-box-shadow: 0px 2px 8px 0px #111;
/* Frontpage */
--fp-color: var(--color);
--fp-color-hover: var(--red);
--fp-color-light: var(--color-light);
--fp-gradient: rgba(51,51,51,0);
--fp-color-dark: #6F6F6F;
--carousel-button-background: #222;
--carousel-button-border: #444;
/* Buttons */
--button-background: var(--background-color);
--button-border: solid 1px #444;
--button-transition: box-shadow 250ms ease-in-out 0s, border 250ms ease-in-out 0s;
--button-transition-box-shadow: #111 0px 2px 6px 0px;
/* Sport */
--background-color-competitions: #ccc;
/* Speciale pagina's */
/* Weer iframe*/
--background-color-weer: #222;
/* Cookies */
--cookie-notice-background: #222;
--cookie-notice-border: #555;
--cookie-notice-boxshadow: 0 2px 6px 0 #333;
}
}
@-moz-document domain("nos.nl"){
/* Global, header, footer */
/************
* Global *
***********/
body { background-color: var(--background-color); }
section.ster-banner.ster-banner--is-visible { background-color: var(--art-extra-info-background); color: var(--art-extra-info-color); }
section.ster-banner { box-shadow: inset 0 0 0 1px var(--border);}
/*Rode tekst banners zoals laatste nieuws, uitgelegd, sport, gemist, etc.*/
h2.XPeck { color: var(--red) !important; }
/* Navigatie buttons */
button.ijIYXe
, button[aria-label="Volgende slide"]
, button[aria-label="Vorige slide"] { background-color: var(--carousel-button-background); border: solid 2px var(--carousel-button-border) !important; }
/* Pill type icoontjes*/
div.pill-type-collection { color: var(--color-darker); }
div.pill-type-video { color: var(--color-darker); }
div.pill-type-liveblog { color: var(--color-darker); }
[data-testid="pill-with-label"],
.pill-type-livestream { color: var(--color-darker); background-color: var(--red); }
/* NOS op 3 pill */
svg.kLVqjH g path:nth-child(2)
,svg.kLVqjH g path:nth-child(4) { fill: var(--color-darker) !important; }
/* Volg het nieuws uit jouw regio */
.gusYBY { border: solid 1px var(--border); box-shadow: var(--box-shadow); }
/*close sluiten*/
svg.gRZIDt { color: var(--color); }
/*schaduw shadow*/
/* div.gusYBY { box-shadow: var(--sidebar-box-shadow) !important; }*/
/*text tekst*/
div.gusYBY h3,
div.gusYBY p { color: var(--color) !important; }
/*kies je omroep knop button*/
button.jWPesa { border: var(--button-border); background: var(--button-background); color: var(--color); }
/*arrow*/
span.iepNNC svg path { fill: var(--color-darker); }
/*transition*/
button.jWPesa:hover { border: solid 1px var(--border); }
button.jWPesa:hover { transition: var(--button-transition); box-shadow: var(--button-transition-bow-shadow); }
/*regionaal nieuws, scoreboard scorebord sport pagina*/
div.fSJCld { border: solid 1px var(--border); box-shadow: var(--box-shadow); background-color: var(--background-color); }
input.liKPcH { border: solid 1px var(--border-light); background-color: var(--background-color-dark); }
label.jHpCLk { color: var(--color) !important; }
/*border lijntje onder de items*/
li.hpwGht { border-color: var(--border-nuanced); }
/*frontpage regio text en menu button*/
span.exiYLn { color: var(--color-dark); }
button.XDuGe svg { color: var(--color-darl); }
/*regio's submenu*/
/*div.eCdcIK { border: solid 1px #0f0 !important; }*/
ul.jfReWM:before { border-color: var(--background-color); box-shadow: var(--box-shadow); }
ul.jfReWM { box-shadow: var(--box-shadow); }
ul.jfReWM li { background-color: var(--background-color); }
/*icons icoontjes*/
div.cobjYj svg { color: var(--color); }
/*text tekst*/
button.hJyWAM { color: var(--color) !important; border-color: var(--devider-line); }
/************
* Header *
***********/
/* Frontpage */
/*general background and right menu*/
header
/*nos logo*/
,li.iQeBHG
/*menu categoriën*/
,li.fyKdDO a
/*menu categoriën landscape modus*/
,li.fyKdDO button { background-color: var(--background-color-header) !important; }
/*text color*/
li.fyKdDO a
,li.fyKdDO button
/*,nav.iPDxxD a*/ { color: var(--color) !important; }
li.fyKdDO a:Hover { color: var(--red) !important; }
/*Icoontjes weer, zoeken*/
li.iQeBHG a.fFitEi svg { color: var(--color) !important; }
/*Icoontjes weer, zoeken:Hover*/
li.iQeBHG:hover a.fFitEi svg { color: var(--red) !important; }
/*Icoontje menu*/
li.fBlPya button svg { color: var(--color) !important; }
li.fBlPya:hover button svg { color: var(--red) !important; }
/*dropdown menu's*/
ol[role="menu"] { border: solid var(--border) !important; box-shadow: var(--box-shadow); background-color: var(--background-color-header); }
li[role="menuitem"]:after { background-color: var(--header-dropdown-devider-line) !important; }
a.active_2wrHqoGw { color: var(--red) !important; }
a.active_2wrHqoGw:hover { color: var(--red) !important; }
a.anchor_2RB5rw-E { color: var(--color) !important; }
a.anchor_2RB5rw-E:hover { color: var(--red) !important; }
/*vertical bar*/
.fyKdDO:before { border-color: var(--header-menu-devider-line); }
/*vertical bar landscape*/
.beLwWz::before { border-left: solid 1px var(--header-menu-devider-line); }
/*pop-out menu / popout menu*/
button[title="Andere NOS sites"] { background-color: var(--background-color-header) !important; color: var(--color); }
ol.eGwmPQ { border: solid 1px var(--header-dropdown-border) !important; background-color: var(--background-color-header); }
li[role="menuitem"] { background-color: var(--background-color-header) !important; }
/*bovenste tekst*/ /*<span class="sc-aa2e6821...