/* === START Dys fonts ========================================================= */ @font-face { font-family: "OpenDyslexic-Regular"; src: url(fonts/OpenDyslexic-Regular.otf); } @font-face { font-family: "OpenDyslexic-Bold"; src: url(fonts/OpenDyslexic-Bold.otf); } @font-face { font-family: "OpenDyslexic-Italic"; src: url(fonts/OpenDyslexic-Italic.otf); } @font-face { font-family: "OpenDyslexicMono-Regular"; src: url(fonts/OpenDyslexicMono-Regular.otf); } @font-face { font-family: "OpenDyslexic-BoldItalic"; src: url(fonts/OpenDyslexic-BoldItalic.otf); } /* === END Dys fonts =========================================================== */ /* === START Dys content styles ================================================ */ .dysFontActive_true { font-family: "OpenDyslexic-Regular"; } .dysFontActive_true #menu ul.mnu, .dysFontActive_true .op_txt_is_quote, .dysFontActive_true .op_labelTxt_is_quote, .dysFontActive_true .op_clozeTxt_is_quote { font-family: "OpenDyslexic-Italic"; } .dysFontActive_true header h1{ line-height:1em; } .dysFontActive_true p{ font-size: inherit; } .dysFontActive_true ul#accessibility{ font-size:6pt; } .dysFontActive_true #titleRoot{ font-size:0.9em; } .dysAltLineColor_true .dysColor_0{ color:#DD0000; } .dysAltLineColor_true .dysColor_1{ color:#00AA00; } .dysAltLineColor_true .dysColor_2{ color:#0000FF; } .dysMoreSpace_true #content{ line-height:1.5; word-spacing:0.6em; } .dysMoreSpace_true.dysFontActive_true #content{ line-height:2; } /* === END Dys content styles ================================================== */ /* === START Dys panel ========================================================= */ div.dysPanel { visibility:hidden; font-size: 0.9em; display:flex; word-spacing: initial; } div.dysPanel > span{ flex: 1 1 auto; display:flex; justify-content: center; gap: 0.7em; color: var(--dysPanelFG); background-color: var(--dysPanelBG); border-radius:0.5em; } .emeraude.dysPanelActive_true .zen_true div.dysPanel, .rubis.dysPanelActive_true .zen_true div.dysPanel, .dysPanelActive_true div.dysPanel { visibility:visible; } .dysPanelActive_true .zen_true div.dysPanel { visibility:hidden; } .dysBtnCheck_true, .dysBtnCheck_false { display: flex; align-items: center; gap: 3px; text-decoration: none; position: relative; color: var(--dysPanelFG); } .dysBtnCheck_true::before, .dysBtnCheck_false::before { display: inline-block; content: ""; width: 1.65em; height: 1em; border-radius: 5em; } .dysBtnCheck_true::before { background-color: var(--dysPanelColor); } .dysBtnCheck_false::before { background-color: color-mix(in oklab, var(--dysPanelFG) 30%, var(--dysPanelFG) 10%); } .dysBtnCheck_true::after, .dysBtnCheck_false::after { display: inline-block; content: ""; position: absolute; width: 0.8em; height: 0.8em; border-radius: 5em; background-color: #fff; } .dysBtnCheck_false::after { left: 0.05em; } .dysBtnCheck_true::after { left: 0.75em; } .dysFontSizer { display:flex; align-items: center; justify-content: center; gap: 10px; position:relative; text-align: center; } .dysBtnFontLarger, .dysBtnFontSmaller { display: inline-block; width:1em; height:1em; } .dysBtnFontSmaller { background-color: var(--dysPanelColor); -webkit-mask-image: url(img/fontSmaller.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .dysBtnFontLarger { background-color: var(--dysPanelColor); -webkit-mask-image: url(img/fontLarger.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .dysBtnFontLarger:hover, .dysBtnFontSmaller:hover { opacity: 0.8; } .dysBtnFontLarger span, .dysBtnFontSmaller span{ display: none; } .dysFontSizer .dysFontSizeLbl { padding: 0.2em; background-color: color-mix(in oklab, var(--dysPanelBG), #fff 40%); border: 1px solid var(--dysPanelColor); border-radius: 3px; } /* === END Dys panel =========================================================== */ /* === START Dys Daylight integration ============================================ */ .dysBtnTogglePanel{ display: inline-block; margin-inline-start: 20px; } .dysBtnTogglePanel a { display: flex; align-items: center; height: 45px; box-sizing: border-box; overflow: hidden; text-decoration: none; text-align: center; padding-inline: 10px; } .dysBtnTogglePanel a:hover{ opacity: 0.8; } .dysBtnTogglePanel a::before { content: ""; display: inline-block; width: 1.3em; height: 1.3em; background-color: var(--linkColor); -webkit-mask-image: url(img/dys.svg); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; } .dysBtnTogglePanel a > span { position: absolute; left: -9999px; } .dysPanelActive_true .dysBtnTogglePanel a { background-color: var(--accentDarkBG); } .dysPanelActive_true .dysBtnTogglePanel a::before { background-color: var(--accentDarkFG); } div.dysPanel{ position:fixed; top:53px; right:1em; z-index: 99; border-radius: 0.5em; box-shadow: 0px 3px 5px -3px rgba(0,0,0,0.3); } div.dysPanel > span { flex-direction: column; padding: 0.8em; } html[data-theme='dark'] .dysAltLineColor_true .dysColor_0 { color: #FF7474; } html[data-theme='dark'] .dysAltLineColor_true .dysColor_2 { color: #9595FF; } /* Overload Daylight */ .default #tools{ display: flex; height: 45px; } .dysMoreSpace_true p{ line-height: 1.8; } .default #navigation a.btnZen { padding-inline-start: 10px; } /* Dys Variables */ :root{ --dysPanelBG : var(--toolboxBG); --dysPanelFG : var(--accentLightFG); --dysPanelColor : var(--linkColor); } /* === END Dys Daylight integration ============================================== */