@import url('pwa/font.css'); /* Page layout **************************************************************/ html{ height:100%; width: 100%; font-family: var(--fontStyle); font-size: var(--fontSize); overflow: hidden; position: fixed; } body{ margin: 0; background-color: var(--contentBG); color: var(--contentFG); } #frame { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--contentBG); -webkit-overflow-scrolling: touch; scroll-padding-block-start:250px; scroll-behavior: smooth; display: flex; flex-direction: column; } [data-theme="light"] a:hover { color: color-mix(in oklab, var(--accentColor), #000 40%)!important; } [data-theme="dark"] a:hover { color: color-mix(in oklab, var(--accentColor), #fff 40%)!important; } #header { display: flex; flex-direction: column; width: -moz-available; width: -webkit-fill-available; width: -fill-available; } #header .titleLayer { display: flex; align-items: center; gap: 10px; background-color: var(--headerBG); border-block-end: 1px solid var(--borderColor); padding-inline: 1em; } .oneColumn #header .titleLayer { flex-wrap: wrap; row-gap: 0; padding-block: 0.5em; } .oneColumn.menuOpen #header .titleLayer { padding-block: 0.5em 0; } #header .toolLayer { display: flex; align-items: center; gap: 10px; background-color: var(--menuBG); border-block-end: 1px solid var(--borderColor); padding-inline-end: 0.5em; } #main{ position: relative; flex: 1; margin: 0; } #main > main{ display: contents; } #footer { background-color: var(--footerBG); border-block-start: 1px solid var(--borderColor); width: 100%; max-width: -moz-available; max-width: -webkit-fill-available; max-width: -fill-available; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: 0.3em; padding-block: 0.2em; padding-inline: 1em; font-size: 0.9rem; } a.btnSc { padding-inline: 0.5em; } /* ============= No Script ============= */ #noscript{ position: absolute; top: 30%; left: 20%; right: 20%; font-size: 2em; color: silver; } #noscript span{ display: block; padding-inline-start:2rem; } #noscript span::before{ content: "\26A0"; position: absolute; font-size: 2rem; margin-inline-start: -1rem; } /* ============= isLocal ============= */ .isLocal .tplSchBox, .isLocal aside.tplQuestionnaire{ display:none; } .isLocal #main{ display: flex; } .isLocal main, .isLocal #content, .isLocal .tplContentFrame{ flex: 1 1 auto; display: flex; } /* ============= Cookie warn bar ============= */ .cookieWarnBar{ position: fixed; left: 0; right: 0; bottom: 0; border-block-start: 1px solid var(--borderColor); background-color: var(--contentBG); padding: 0.5em; opacity:1; z-index: 1000; display:flex; align-items: center; column-gap: 0.5em; } .cookieWarnBar.acknowledged { bottom: -30vh; opacity:0; transition: all 0.5s ease-out; } a.cookieWarnBtnOk, a.cookieWarnBtnNok { font-size: 0.9em; padding-block: 6px; padding-inline: 10px; text-decoration: none; color: var(--accentDarkFG); background-color: var(--accentColor); border-radius: var(--borderRadius); width: fit-content; } a.cookieWarnBtnOk:hover, a.cookieWarnBtnNok:hover { background-color: color-mix(in oklab, var(--accentColor), transparent 45%); } .cookieWarnBar_on #page { filter: brightness(0.6); } /** Header ********************************************************************/ #header .tplTitle { flex: 1; margin: 0; font-size: var(--fontSize); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color:var(--headerFG); } #header .tplTitle a{ text-decoration: none; color: var(--headerFG); } .tplContextMenu { order: 2; font-size: 0.9em; flex:1; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; column-gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tplContextMenu .ctx_root > span{ font-size: 80%; color:var(--contentLightFG); } .tplContextMenu > .ctx_root{ display: contents; } .tplContextMenu > .ctx_root li { margin: 0; } body.planClosed .tplContextMenu > .ctx_root { padding-inline-start: 327px; } .tplContextMenu > .ctx_root:empty{ padding: 0; } .ctx_root a{ color: var(--accentColor); text-decoration: none; min-width: 22px; overflow: hidden; text-overflow: ellipsis; } .ctx_root a:hover{ text-decoration: underline; } .tplContextMenu .ctx_root > span:last-child{ font-size:100%; color:var(--contentFG); min-width: fit-content; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* --- Anchor --- */ .blockAnchor{ text-decoration: none; color:var(--accentColor); font-size: 0.9rem; margin-inline-start:10px; } .blockAnchor::before{ font-family:"fontello"; content:"\E809"; } .blockAnchor span{ display:none; } *:hover>.blockAnchor, .blockAnchor:focus, .isMobile_true .blockAnchor{ visibility:visible; } .isMobile_true .blockAnchor{ visibility:hidden; } /* ============= Accessibility menu ============= */ #accessibility{ position: absolute; top: 0; right:40px; margin-block: 0; margin-inline: 0; font-size: 60%; list-style-type: none; padding-block: 0; padding-inline: 0; z-index:10; } #accessibility li{ display:inline-block; margin-block: 0; margin-inline: 1rem; } #accessibility a{ opacity:0; color: #8a6493; text-decoration: none; transition:0.2s all; } #accessibility:hover a{ opacity:0.2; } #accessibility a:focus{ opacity:1; } menu{ margin-block: 0; padding-inline-start: 0; list-style: none; display: flex; gap: 0.1rem; } menu > li{ margin-block: 0; } button.planBtn, button.menuBtn { padding-block: 0; padding-inline: 0; text-align: center; color: var(--accentColor); cursor:pointer; } button.planBtn { width: 35px; height: 35px; background-color: var(--accentLightColor); border: 0; } button.menuBtn { background-color: var(--contentBG); border-radius: 5px; border: 1px solid var(--borderColor); width: 32px; height: 32px; } .planClosed button.planBtn::before, button.menuBtn::before { content: "\E83B"; font-family:"fontello"; } button.planBtn::before, .menuOpen button.menuBtn::before { content: "\E83A"; font-family:"fontello"; font-size: 1.1em; } button.planBtn span, button.menuBtn span { display:none; } button.planBtn:hover, button.menuBtn:hover { background-color: color-mix(in oklab, var(--contentBG), transparent 85%); color:var(--accentColor); } .oneColumn button.planBtn, .twoColumn button.menuBtn { display: none; } .twoColumn button.planBtn, .oneColumn button.menuBtn { display: block; } /**Footer ********************************************************************/ a.cookieWarnBtnBar, span.copyright{ color:var(--footerFG); display:inline-block; margin-inline-end: 0.7em; font-size:0.8em; } a.btnSc{ float:right; } a.btnSc img{ vertical-align: middle; } a.btnAbout { color: var(--accentColor); text-decoration: none; } a.btnAbout::before{ content:"\E821"; font-family:"fontello"; margin-inline-end:5px; } a.btnAbout:hover{ color: var(--footerFG); } /** Menus : root **************************************************************/ .oneColumn #menu { display: none; flex: 100%; order: 5; } .oneColumn.menuOpen #menu { display: block; } #menu ul{ margin: 0; padding:0; } .oneColumn #menu ul { display: flex; flex-wrap: wrap; } #menu a{ color: var(--accentColor); text-decoration: none; padding: 0 0.4rem; display:block; line-height: 45px; } #menu a:hover{ color: color-mix(in oklab, var(--accentColor), #000 50%); } .oneColumn #menu a { height: auto; line-height: 40px; } #menu li{ display: inline-block; margin:0; } #menu div.mnu_sel_yes a, .home_yes #menu div.toolHome a, .documentation_yes #menu div.toolHome a { color:var(--headerFG); border-block-end: 4px solid var(--headerFG); font-weight: 800; } .documentation_yes #menu div.mnu_sel_yes a, .home_yes #menu div.toolHome a, .documentation_yes #menu div.toolHome a { cursor: initial; } #menu div.mnu_sel_yes a:hover, .home_yes #menu div.toolHome a:hover, .documentation_yes #menu div.toolHome a:hover { background-color: transparent; } #menu a.mnu_ret_yes::before{ font-family: "fontello"; content: "\E81A"; margin-inline-end: 0.5rem; } .documentation_yes #menu div.mnu_sel_yes > a.mnu_lnk:hover { cursor: default; } /** Menus : outline ***********************************************************/ .twoColumn #outline { position: absolute; width: var(--menuWidth); height: 100%; top: 0; display: flex; flex-direction: column; box-sizing: border-box; z-index: 999; background-color: var(--menuBG); font-size: 1rem; border-inline-end: 1px solid var(--borderColor); left: 0; transition: left 0.3s ease; } .twoColumn.planClosed #outline { left: calc(var(--menuWidth) * -1); } .oneColumn #outline { position: absolute; top: 0; bottom: 0; left: calc(100% * -1); display: flex; flex-direction: column; padding-block-end: 10px; padding-inline: 0; background-color: var(--menuBG); border-inline-end: 1px solid var(--borderColor); z-index: 99; transition: left 0.3s ease; } .oneColumn.menuOpen #outline { left: 0; width: -moz-available; width: -webkit-fill-available; } .schDisplay_on #outline{ background-image: url("img/filtered.svg"); } #outline:target{ box-shadow:none; } .tplQuestionnaire button { background-color: var(--accentColor); color: var(--accentDarkFG); cursor: pointer; padding: .3rem .5rem; border: none; width: 100%; border-radius: 5px; order: 2; flex: 0; } .tplQuestionnaire button.btnReset { background-color: var(--accentLightColor); color: var(--accentColor); } .questShow_yes .tplQuestionnaire button{ margin-inline-start:0.5rem; width: auto; padding: 0.5rem; font-size:1em; } .tplQuestionnaire button:hover{ color: var(--contentBG); background-color:var(--accentDarkColor); } .tplQuestionnaire ul.questions{ list-style: none; padding:0; margin:0; overflow: auto; } .tplQuestionnaire{ flex: 0 0 auto; } .questShow_no .tplQuestionnaire { background-color: var(--accentLightColor); padding: 0.5rem; border: 1px 0 1px 0 solid var(--borderColorAlpha); order: 1; } .questShow_no .tplQuestionnaire > .questionnaire { display: flex; flex-wrap: wrap; align-items: baseline; } .questShow_no ul.questions{ padding: 0; list-style: none; margin: 0; overflow:initial; order: 3; flex: 100%; } .questShow_no ul.choiceList{ margin-block: 0; font-size: 0.9em; } .questShow_no ul.questions li{ margin:0; } li.qcu .isSelected_true { display: flex; flex-direction: row; align-items: center; font-weight: 500; } .questShow_no .tplQuestionnaire .access{ font-size: 0.9em; display: block; margin: 1rem 0; color: var(--contentFG); } body.planClosed .questShow_no .tplQuestionnaire .access{ display:none; } .questShow_no .tplQuestionnaire .questionnaire_ti{ font-size: 1em; font-weight: 900; margin: 0; flex: 1; order: 1; } .questShow_no .tplQuestionnaire .questionnaire_co, .questShow_no .tplQuestionnaire footer { display: contents; } .questShow_no .tplQuestionnaire header, .questShow_no .tplQuestionnaire label, .questShow_no .tplQuestionnaire .label, .questShow_no .tplQuestionnaire .btnClose, .questShow_no .tplQuestionnaire .btnReset, .questShow_no .tplQuestionnaire .isSelected_false, .questShow_no.questActive_true .tplQuestionnaire .access, .questShow_no.questActive_false .tplQuestionnaire .questions { display:none; } .questShow_yes .tplQuestionnaire{ position:fixed; top:0; bottom:0; left:0; right:0; width:auto; height:auto; background-color: rgba(0, 0, 0, 0.4); z-index: 100; } .questShow_yes .tplQuestionnaire .questionnaire{ position: absolute; top: 8%; bottom: 8%; left: 8%; right: 8%; max-width: 1000px; margin: 0 auto; background-color: var(--contentBG); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; border-radius: 10px; font-size: var(--fontSize); } .questShow_yes .tplQuestionnaire .questionnaire_ti{ border-block-end: 1px solid var(--accentLightColor); text-align: center; font-size: 1.3rem; font-weight: 500; line-height:3rem; margin:0; } .questShow_yes .tplQuestionnaire .questionnaire_co{ padding: 1.5rem 1rem; display: grid; align-items: start; row-gap:1rem; overflow: auto; margin-block-end: 55px; } .questShow_yes .tplQuestionnaire .questionnaire_co header{ } .questShow_yes .tplQuestionnaire .questionnaire_co div.label { font-weight: 500; margin-block-end: 0.5rem; } .tplQuestionnaire fieldset{ border: none; padding: 0; margin: 0; } .choiceList { padding-inline-start: 0.5rem; } .choiceList label input{ position:absolute; left:-9999px; } .choiceList label span::before { font-family: "fontello"; content: "\E804"; cursor: pointer; font-size: 1.2rem; margin-inline-end: 0.5rem; color: var(--accentColor); } .choiceList label input:checked + span::before{ content:"\E803"; } .questShow_yes .tplQuestionnaire .questionnaire_co label { display: inline-block; align-items: center; margin: 0.2rem 0; padding: 0.3rem 0.5rem; border-radius: 8px; background-color: var(--elmtBG); } .questShow_yes .tplQuestionnaire .questionnaire_co label:hover { cursor: pointer; background-color: var(--accentLightColor); } .choiceList div.isSelected_true label { background-color: var(--accentLightColor)!important; } .questShow_yes #outline .tplQuestionnaire ul.questions li { margin:0; } .questShow_yes #outline .tplQuestionnaire ul.questions li:last-child{ margin-block-end:1.5rem; } .questShow_yes .tplQuestionnaire .result, .questShow_yes .tplQuestionnaire .access, .questShow_yes .tplQuestionnaire .btnOpen{ display:none; } .questShow_yes .tplQuestionnaire .questionnaire_co footer{ position: absolute; bottom: 0; right: 0; left: 0; height:55px; border: 1px solid var(--accentLightColor); background: var(--contentBG); display:grid; grid-template-columns: auto auto; align-items: center; justify-content: end; padding:0 1rem; } .tplMenuTop{ order: 3; padding: 0 0.5rem 0.5rem 0.5rem; } .tplMenuTop.mnu_top_no, .planClosed .tplMenuTop { display: none; } .tplMenuTop.mnu_top_yes{ border-block-end: 1px solid var(--borderColor); } .tplMenuScroll{ display: block; position: relative; flex: 2 1 auto; padding: 0.5rem 0.5rem 3rem 0.5rem; order: 4; font-weight:500; overflow: auto!important; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-bgcolor); } /* Scrollbar for global */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--scrollbar-bgcolor); } ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); border-radius: 5rem; border: 3px solid var(--scrollbar-bgcolor); } /** Menus : outline ***********************************************************/ #outline .topList{ border: 1px solid var(--resultsBG); border-radius: 0.5em 0.5em 0 0; } #outline .topList_ti{ background-color: var(--resultsBG); padding: 0.2rem; text-align: center; } #outline .topList_co{ max-height: 15vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-bgcolor); } #outline ul.mnu_top{ background-color: var(--contentBG); padding: 0.3em; margin: 0; list-style: none; } #outline ul.mnu_top li{ margin: 0; } #outline ul.mnu_top .mnuLbl.mnu_l{ padding-inline-start:0; } #outline ul.mnu_dynamic{ position:relative; order: 2; flex: 2 1 auto; } #outline .mnuSrlUpFra, #outline .mnuSrlDwnFra{ display: none; } #outline .tplMenuScroll > ul { width: fit-content; } #outline .tplMenuScroll ul{ list-style: none; margin: 0; padding: 0; } #outline .tplMenuScroll ul.mnu_sub_o{ padding-inline-start: 0.5rem; margin-inline-start: 0.8rem; } #outline .tplMenuScroll li{ margin:0; } #outline .mnuLbl { position: relative; display: flex; flex-direction: row; font-size: 95%; gap: 3px; align-items: baseline; padding: 0.15em; } #outline .mnuLbl.mnu_l { padding-inline-start: 1.45em; } /*#outline .mnuLbl:hover { background-color: color-mix(in oklab, var(--contentBG), #000 50%); text-decoration: none; border-radius: 6px; }*/ #outline a.mnu_tgle_o span, #outline a.mnu_tgle_c span{ display:none; } #outline a.mnu_tgle_o, #outline a.mnu_tgle_c { display: flex; align-items: center; justify-content: center; color:var(--menuFG); text-decoration:none; min-height: 22px; } #outline a.mnu_tgle_c::before{ font-family: "fontello"; content: "\E817"; } #outline a.mnu_tgle_o::before{ font-family:"fontello"; content:"\E816"; } #outline a.mnu_lnk { width: 100%; color:var(--menuFG); text-decoration: none; min-height: 22px; white-space: pre-wrap; text-overflow: clip; } #outline div.mnu_sel_yes { background-color: var(--accentLightColor); color:var(--contentFG); cursor:default; border-radius: 6px; } #outline div.mnu_sel_yes:hover { background: var(--accentLightColor); } .schDisplay_on #outline .mnu_sch_no > a.mnu_lnk { color:var(--contentLightFG); cursor: default; } .schDisplay_on #outline .mnuLbl.mnu_sch_no:hover { background-color: unset; } #outline a.mnu_tgle_c + a.mnu_lnk, #outline a.mnu_tgle_o + a.mnu_lnk { margin-inline-start: 0; } #outline div.mnu_sel_yes > a.mnu_lnk { color:var(--contentFG); } #outline div.mnu_sel_yes > a.mnu_lnk:hover { cursor: default; } #outline li > .mnu_sel_same{ background-color: var(--contentLightBG); border-radius:5px; } #outline .mnu_coef > span { display: none; } #outline .coef_9 .mnu_coef, #outline .coef_8 .mnu_coef, #outline .coef_7 .mnu_coef { color: var(--schCoef-3); } #outline .coef_6 .mnu_coef, #outline .coef_5 .mnu_coef, #outline .coef_4 .mnu_coef { color: var(--schCoef-2); } #outline .coef_3 .mnu_coef, #outline .coef_2 .mnu_coef, #outline .coef_1 .mnu_coef, #outline .coef_0 .mnu_coef { color: var(--schCoef-1); } #outline .mnu_coef::before { font-family: "fontello"; font-size: 1.5em; line-height: 1rem; } #outline .coef_9 .mnu_coef::before { content: "\E854"; } #outline .coef_8 .mnu_coef::before, #outline .coef_7 .mnu_coef::before { content: "\E852"; } #outline .coef_6 .mnu_coef::before, #outline .coef_5 .mnu_coef::before, #outline .coef_4 .mnu_coef::before { content: "\E853"; } #outline .coef_3 .mnu_coef::before, #outline .coef_2 .mnu_coef::before { content: "\E855"; } #outline .coef_1 .mnu_coef::before, #outline .coef_0 .mnu_coef::before { content: "\E82C"; } /* if outline menu is hidden */ body.planClosed .questShow_no .tplQuestionnaire{ position: fixed; top: 50px; left: 46px; height: 35px; padding-inline: 0.5em; padding-block: 0; width: 300px; } body.planClosed .questShow_no .tplQuestionnaire div.questionnaire{ display: flex; align-items: center; height: 35px; } body.planClosed .questShow_no .tplQuestionnaire .questionnaire_ti{ padding-inline-end: 0; flex: 1; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.planClosed .questShow_no .tplQuestionnaire ul.questions{ display: none; } body.planClosed .tplSchBox, body.planClosed .tplMenuScroll{ display: none; } /* end if outline menu is hidden */ /** Content *********************************************************************/ .tplContentFrame { position: absolute; top: 0; bottom: 0; left: 0; right: 0; min-height: -webkit-fill-available; min-height: -moz-available; min-height: fill-available; padding-inline-start: var(--menuWidth); transition: padding 0.3s ease; } .twoColumn.planClosed .tplContentFrame, .oneColumn .tplContentFrame { padding-inline-start: 0; } #contentFrame{ width:100%; height: 100%; border:none; } /* Search */ .tplSchBox{ flex: 0 0 auto; position: relative; order: 2; display: flex; align-items: center; gap: 0.5em; padding: 0.5em; } .schCmds{ align-items: center; display: flex; justify-content: center; position:relative; flex: 1 1 auto; } input.schInput{ border-radius: .3rem; padding: 0 2rem 0 0.5rem; height: 30px; width: 100%; font-size: 1em; color: var(--headerFG); background-color: var(--contentBG); border: 1px solid var(--borderColor); cursor: auto; } a.schBtnLaunch{ width: 1em; height: 1em; -webkit-mask-image: url("img/btnSearch.svg"); -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; background-color: var(--schFG); color: transparent; border: none; padding: 0; cursor: pointer; position: absolute; right: 8px; top: 7px; } a.schBtnLaunch span{ display: none; } a.schBtnLaunch:hover{ background-color: var(--accentColor); } .schPropose{ position:absolute; top: 31px; width: 100%; box-shadow: 0 3px 6px rgb(0 0 0 / 20%); background-color: var(--contentBG); z-index:100; border-radius: 0 0 .3rem .3rem; } .schBtnPropose, .schProposeExceeded{ display:block; color: var(--headerFG); padding:0.5rem; text-decoration: none; } .schBtnPropose:hover, .schBtnPropose:focus{ background-color: var(--accentLightColor); } .schProp_no{ display:none; } .tplSchResults{ display:none; } .schDisplay_on .tplSchResults { max-width: calc(var(--maxWidth) - 4em); margin-inline: auto; position: absolute; bottom: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; background-color: var(--resultsBG); color: var(--schFG); border-inline: 1px solid var(--borderColor); border-block-start: 1px solid var(--borderColor); border-radius: 8px 8px 0 0; z-index: 99; } [dir="ltr"] .schDisplay_on .tplSchResults{ left: var(--menuWidth); right: 0; } [dir="ltr"] body.planClosed .schDisplay_on .tplSchResults{ left: 0; right: 0; } [dir="rtl"] .schDisplay_on .tplSchResults{ right: var(--menuWidth); left: 0; } [dir="rtl"] body.planClosed .schDisplay_on .tplSchResults{ right: 0; left: 0; } /* ============= tooltip help ============= */ .tooltip_a.help { appearance: none; border-radius: 5px; width: 32px; height: 32px; padding: 0; color: var(--accentColor); background-color: var(--contentBG); border: 1px solid var(--borderColor); cursor: pointer; display: flex; align-items: center; justify-content: center; } .tooltip_a.help:hover { background-color: color-mix(in oklab, var(--contentBG), transparent 85%); } .tooltip_a.help.tooltip_act { background-color: var(--accentColor); color: #fff; } .tooltip_a.help::before { font-family: "fontello"; content: "\E812"; font-size: 1.1em; } .tooltip_a.help span { display: none; } /* ============= scImageMgr ============= */ .scImgZmOver{ background-color: #000; width:100% !important; height:100% !important; position: fixed !important; } .scImgZmCvs { position: fixed; z-index: 1000; overflow: visible; width:auto; height:auto; top:0; left:0; bottom:0; right:0; } .scImgZmTi span.zoneNumber{ display: inline-block; border-radius: 50px; box-shadow: 0 0 5px 0 black; background-color: black; color: white; padding: 3px 3px 0 3px; min-width:12px; min-height:15px; text-align: center; font-size: 80%; position: absolute; top: -10px; left: -10px; z-index:10; } .scImgAnmCtrl{ border-radius: 5px; border: 1px solid gray; box-shadow: 0 0 10px 0 #555; background-color:white; bottom:20px; position:absolute; right:5px; padding: 5px; width: 115px; height: 16px; z-index: 101; } .scImgAnmCtrl a span, .scImgSep{ display:none; } .scImgAnmCtrIdx{ position:absolute; left:80px; width:15px; height:13px; } .scImgAnmCtrSep{ position:absolute; left:95px; width:10px; height:13px; } .scImgAnmCtrCnt{ position:absolute; left:105px; width:15px; height:13px; } /* === START - PWA ====================== =========================*/ :root{ --pwa-ok-color: var(--blockFocus); --pwa-nok-color: var(--blockImportant); --pwa-ukn-color: var(--blockDiscrete); --pwa-button-size: 1.5rem; --pwa-button-color: var(--accentColor); --pwa-button-color-hover: var(--accentColor); --pwa-button-bgcolor: transparent; --pwa-button-bgcolor-hover: transparent; --pwa-button-radius: 0.3rem; --pwa-button-border-color: var(--borderColor); --pwa-button-border-color-hover: var(--borderColor); --pwa-button-fontsize: 120%; --pwa-tooltip-color: var(--contentFG); --pwa-tooltip-bgcolor: var(--menuBG); --pwa-tooltip-border: var(--borderColor); --pwa-popup-color: var(--contentFG); --pwa-popup-bgcolor: var(--contentBG); --pwa-popup-border: var(--borderColor); --pwa-popup-button-color: var(--contentLightFG); --pwa-popup-button-bgcolor: var(--contentLightBG); --pwa-popup-button-inv-bgcolor: var(--accentColor); --pwa-popup-button-inv-color: var(--accentDarkFG); } li.pwaInstallBtnParent { order: 2; } li.pwaCacheBtnParent { order: 2; display: flex; gap: 0.3rem; } /* === STOP - PWA =============================================== */ /* === START - THEME PREFERENCES ============================================= */ li.themeBtnParent { margin: 0; order: 1; } button.themeBtn { appearance: none; cursor: pointer; border: 0; position: relative; height: 25px; line-height: 25px; padding-block: 0; margin: 0; border-radius: 50em; display: flex; align-items: center; justify-content: center; gap: 5px; background-color: var(--accentColor); color: var(--accentDarkFG); opacity: 1; text-decoration: none; z-index: 20; } button.themeBtn span { display: none; } button.themeBtn:hover { opacity: 0.7; } @media (prefers-color-scheme: dark) { button.themeBtn, html[data-theme='dark'] button.themeBtn { padding-inline: 5px 6px; } html[data-theme='light'] button.themeBtn { padding-inline: 6px 5px; } button.themeBtn:after, html[data-theme='dark'] button.themeBtn:after { font-family: "fontello"; font-size: 1.2em; content: "\E842"; width: auto; height: auto; border-radius: 0; background-color: transparent; } html[data-theme='light'] button.themeBtn:before { font-family: "fontello"; font-size: 1.2em; content: "\E843"; width: auto; height: auto; border-radius: 0; background-color: transparent; } button.themeBtn:before, html[data-theme='dark'] button.themeBtn:before, html[data-theme='light'] button.themeBtn:after { content: ""; display: inline-block; border-radius: 50em; width: 15px; height: 15px; background-color: var(--accentDarkFG); } } @media (prefers-color-scheme: light) { button.themeBtn, html[data-theme='light'] button.themeBtn { padding-inline: 6px 5px; } html[data-theme='dark'] button.themeBtn { padding-inline: 5px 6px; } button.themeBtn:before, html[data-theme='light'] button.themeBtn:before { font-family: "fontello"; font-size: 1.2em; content: "\E842"; width: auto; height: auto; border-radius: 0; background-color: transparent; } html[data-theme='dark'] button.themeBtn:after { font-family: "fontello"; font-size: 1.2em; content: "\E843"; width: auto; height: auto; border-radius: 0; background-color: transparent; } button.themeBtn:after, html[data-theme='light'] button.themeBtn:after, html[data-theme='dark'] button.themeBtn:before { content: ""; display: inline-block; border-radius: 50em; width: 15px; height: 15px; background-color: var(--accentDarkFG); } } /* === END - THEME PREFERENCES ============================================= */ /* === START - RESPONSIVE =================================================== */ @media (max-width: 900px){ /* Mode "mobile" (prop responsiveWidth) */ .schDisplay_on #accessibility{ display:none; } .questShow_yes .tplQuestionnaire { z-index: 999; } .questShow_yes .tplQuestionnaire .questionnaire { max-width: 100%; border-radius: 0; top: 125px; bottom: 2%; left: 2%; right: 2%; } .questShow_yes .tplQuestionnaire .questionnaire_ti{ padding: 0; } a.btnAbout{ z-index: 98; } .schDisplay_on .tplSchResults{ margin-inline-start:0; } } @media (max-width: 700px){ .tplContentFrame{ padding-inline-start: 1em; } #main { z-index: 100; } #footer { left:0; } #menu ~ div.scCommentToolBar{ margin:0!important; } } @media (max-width: 580px){ #outline .mnuLbl{ font-size:1.1em; } } @media (max-height: 730px){ .questShow_no ul.questions { display: none; } .questShow_no .questionnaire{ cursor: help; } .questShow_no .questionnaire:hover ul.questions { display: block; position: fixed; background-color: var(--contentBG); z-index: 100; box-shadow: 0 3px 6px rgb(0 0 0 / 20%); font-size:0.9em; margin-block: 2rem 1rem; margin-inline: 1rem; padding: 0.5rem; border-radius: 10px; } } /* === STOP - RESPONSIVE ==================================================== /* Preview */ #menu ~ div.scCommentToolBar { margin-inline-end:60px; } .scCommentToolBar .activationCommentDiv { top: 8px; } #header:has(.scCommentToolBar) .titleLayer { padding-inline-start: 65px; }