DudenAwesome [WIP] by riedler
Details
Authorriedler
LicenseCC BY-SA 4.0
Created atApril 9, 2021 09:01
Updated atApril 9, 2021 09:02
Applies toduden.de
Statistics
Learn how we calculate statistics in the FAQ.
Total views214
Total installs272
Weekly installs7
Description
WIP dark & wide style for duden.de.
Notes
Version: 0.1.0b
Changelog:
- Still work-in-progress
History
Daily snapshots of style statistics.
Source code
/* ==UserStyle==
@name DudenAwesome
@namespace https://RiedleroD/userstyles-riedler/
@version 0.1.0
@description Dark & w i d e style for duden.de
@author Riedler
@preprocessor stylus
@var select thm "Theme" {"black":"black","dark":"dark","light":"light"}
@var checkbox wide "Wide" 1
@var checkbox uwide "Ultra wide" 0
@var checkbox adh "Hide all ads" 0
@var checkbox ovf "Overflow fix" 1
==/UserStyle== */
if thm==black
bgc_main=#000
bgc_secondary=#151515
bgc_ter=#222
txc_main=#DDD
txc_secondary=#969b9f
txc_teritary=#999
txc_header=#EEE
bgc_inputs=#222
bgc_theme=#ca0
bgc_theme_sd=#b90
bgc_theme_l=#cfb050
bgc_theme_op=#A80
bgc_theme_opop=#333
bgc_theme_sec=#a83
bgc_theme_ter=#652
bgc_theme_qad=#652
ft1=invert(0.6) hue-rotate(190deg) brightness(1.4) saturate(10)
if thm==dark
bgc_main=#333
bgc_secondary=#151515
bgc_ter=#555
txc_main=#EEE
txc_secondary=#969b9f
txc_teritary=#999
bgc_inputs=#444
txc_header=#FFF
bgc_theme=#da1
bgc_theme_sd=#db2
bgc_theme_l=#dc6
bgc_theme_op=#A80
bgc_theme_opop=#666
bgc_theme_sec=#A83
bgc_theme_ter=#873
bgc_theme_qad=#873
ft1=invert(0.6) hue-rotate(190deg) brightness(1.4) saturate(10)
if thm==light
bgc_main=#FFF
bgc_secondary=#eFF3F5
bgc_ter=#dadee0
txc_main=#333
txc_secondary=#969b9f
txc_teritary=#999
txc_header=#000
brd_ter=#e5e5e5
bgc_inputs=#FFF
bgc_theme=#ffd008
bgc_theme_sd=#fbb914
bgc_theme_l=#ffda4d
bgc_theme_op=#EFF3F5
bgc_theme_opop=#e2e2e2
bgc_theme_sec=#ffedaa
bgc_theme_ter=#fff6d0
bgc_theme_qad=#fffae9
ft1=none
replace_img(w,h,source){
box-sizing: border-box;
width:w;
height:h;
padding-left:w;
background:url(source) no-repeat;
}
@-moz-document domain("duden.de"){
if ovf{
body{
overflow-x:hidden;}
}
button{
color:txc_main;}
tr{
background-color:rgba(bgc_main,0.2);}
.tabloid{
background-color:bgc_main;
color:txc_main;}
.tabloid__sheet::before{
background-color:bgc_theme;}
.trickle{
color:#000;
.trickle--open,
&:focus-within,
&:not(.trickle--closed):hover{
background-color:bgc_theme_op;}
}
.trickle__children{
background-color:bgc_theme_op;
color:#000;}
.trickle__child-link{
&:focus,&:hover{
background-color:bgc_theme_opop;
color:txc_main;
.trickle__child-icon{
filter:ft1;
}
}
}
.trickle--highlighted{
background-color:bgc_theme_l;}
.form-asap--simple_no{
background-color:bgc_secondary;
& .form-asap__slot{
background-color:bgc_inputs;
&>input{
color:txc_main;}
}
}
.form-asap__tab--active,
:checked+.form-asap__tab{
color:txc_header;}
.form-asap__divider{
color:txc_secondary;}
.form-asap__button{
background-color:bgc_theme;
&:focus,
&:hover{
background-color:bgc_theme_op;
}
}
.form-asap__suggestion{
background-color:bgc_theme_sec;
border-color:bgc_theme_sec;
color:txc_main;
&:focus,
&:hover{
background-color:bgc_theme;}
}
.form-asap__guesses{
background-color:bgc_inputs;
border-color:bgc_secondary;}
.form-asap__guess-title{
background-color:bgc_theme_sec;}
.form-asap__guess-group{
border-bottom-color:bgc_secondary;}
.shelf__main{
background-color:bgc_theme;
.shelf__style_pale>&{
background-color:bgc_theme_sec;}
.shelf__style_paler>&{
background-color:bgc_theme_ter;}
}
.vignette__label{
background-color:bgc_theme_sec;}
.knob{
background-color:txc_main;
color:bgc_main;}
.shifter__next,
.shifter__prev{
background-color:bgc_ter;
&:hover{
background-color:txc_secondary;}
}
.shifter__dot{
color:bgc_ter;}
.shifter__dot.shifter__dot--current{
color:txc_secondary;}
.chirp{
background-color:bgc_secondary;}
.chirp__name{
color:txc_main;}
#block-dudentwitterblock>.essay>.essay__bottom>div>div:not([data-twitter]){
background:linear-gradient(#0000,bgc_main) !important;
}
.essay__title>a:hover{
background-image:linear-gradient(to top,bgc_theme 10%,transparent 10%)}
.more__arrow{
background-color:bgc_theme;
box-shadow:1px 1px 0 1px bgc_theme_sd;}
.more--white .more__arrow{
background-color:bgc_main;}
.scene--style_corp{
background-color:bgc_theme;}
.stage{
background-color:bgc_theme;}
.stage__main{
background-color:bgc_secondary;}
.cc{
background-color:bgc_theme_l;}
.cc__pause,
.cc__play{
background-color:bgc_main;}
.tabloid__masthead{
background-color:bgc_theme;}
.tabloid__footer-top{
background-color:bgc_secondary;}
.tabloid__footer-bottom{
background-color:bgc_theme;}
.rubric{
color:txc_main;}
.pager__item{
background-color:bgc_secondary;
border-bottom-color:bgc_theme;}
.pager__item--current{
border-bottom-color:txc_main;}
.pager__item--skipping{
border-bottom-color:#0000;
background-color:#0000;}
.wrap-table__flexion{
border-top-color:bgc_main;}
.wrap-table__flexions-void,
.wrap-table__flexions-head,
.wrap-table__flexion-head{
background-color:bgc_theme_sec;}
.wrap-table__flexion{
background-color:bgc_theme_ter;}
.wrap-table tr:nth-child(2n){
background-color:rgba(bgc_main,0.75);}
.mere-table{
background-color:bgc_theme_ter;
& tr:nth-child(2n){
background-color:rgba(bgc_main,0.75);}
}
.mere-table__head{
border-right-color:bgc_main;}
.chapters__list{
border-bottom-color:bgc_secondary;
background-color:bgc_main;}
.chapters__chapter{
border-top-color:bgc_secondary;}
.chapters__link{
&:hover{
background-color:bgc_theme_ter;}
&.chapters__link--active{
background-color:bgc_theme_sec;}
}
.gizmo__gadget-icon{
background-color:bgc_secondary;
border-color:bgc_main;}
.gizmo__gadget--prominent .gizmo__gadget-icon{
background-color:bgc_theme;}
.tag-cluster{
background-color:bgc_theme_ter;}
.tag-cluster__filter-label::before{
background-color:bgc_theme;}
.enumeration{
background-color:bgc_main;
box-shadow:-20px 0 0 bgc_main,20px 0 0 bgc_main;}
.note{
background-color:bgc_theme_ter;
outline-color:bgc_main;}
.division::before{
background-color:txc_main;}
.scaffold__head{
background-color:bgc_theme;}
if wide{
.tabloid__side-column,
.tabloid__note{
display:none;
}
.tabloid__sheet--has-sidebar{
grid-template-columns:60px auto minmax(70px,max-content) repeat(6,auto);}
.tabloid__main-column-top,
.tabloid__main-column{
grid-column:2/12;}
}
if uwide{
.tabloid__main-column-top,
.tabloid__main-column{
grid-column:1/13;}
}
if adh{
.tabloid__main-column>div:not(.hidden):not(.views-element-container),
.views-element-container>div>.segment>aside,
.tabloid__wide-top{
display:none;}
aside+.vignette,
script+.vignette{
border-top:none;
margin-top:-30px;}
.tabloid__main-column.tabloid__main-column--has-note>article>div>aside{
display:none;}
.columns:nth-child(6)>.columns__row--width_2{
&>.columns__col--no_1{
display:none;}
&>.columns__col--no_2{
grid-column:4/9;}
}
}
img[src="https://cdn.duden.de/public_files/2020-09/firefox_logo.png?null"]{
replace_img(260px,48px,"https://www.mozilla.org/media/protocol/img/logos/firefox/browser/logo-word-hor-xs.c87882e8c93c.png");}
}
@-moz-document domain("mentor.duden.de"){
.desk,
.desk__background{
background-image:linear-gradient(90deg,bgc_main 50%,bgc_theme_qad 0);}
.pad{
background-color:bgc_main;}
.rim{
background-color:bgc_main;
color:txc_teritary;}
body{
color:txc_main;}
}