/** * (C) Copyright Mindus SARL, 2026. * All rights reserved. * * @fileoverview iiziRun version 3 CSS. * * @author Christopher Mindus */ /** * CSS for notch. */ /* It is VERY important NOT to have any spaces in the class definition */ /* Apply notch to root to be able to query it from JS The values for '-left' and '-right' are on purpose not the same (e.g. 40px) because it would otherwise be optimized into the same block */ :root{--sat:env(safe-area-inset-top);--sar:env(safe-area-inset-right);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left)} .mblScrollableViewContainer{padding-bottom:1px !important} .mblEdgeToEdgeList{padding-right:2px;padding-left:2px} .peHead{padding-right:3px;padding-left:3px} .peDescr{padding-right:4px;padding-left:4px} .cacheList{padding-right:5px;padding-left:5px;padding-bottom:5px} .headLeft{border-left:6px solid rgba(0,0,0,0)} .headRight{border-right:7px solid rgba(0,0,0,0)} /* The theme toggle at the far right of every heading (CC-IIZIRUN-LAUNCHER-V5): the icons of the client's theme chooser (iz/ui/UIThemeChooser.js), 20 px in the heading's text colour. The icon is a block at the top of Dojo's 29 px button box: margin-top:6.5px puts its ink on the ink of the heading's other icons, measured on the phone in every family and mode (CC-FIX-IIZIRUN-LOOKS, LK-D-5). */ .izThemeToggle{color:inherit} .izThemeToggle svg{width:20px;height:20px;display:block;margin-top:6.5px} /* The heading as a row (CC-FIX-IIZIRUN-DEVICE-FINDINGS, row 8): Dojo's Heading lays its title inline between floated buttons and cuts it under them when it does not fit, and its theme toggle wore Dojo's text-button padding (10 px each side of the 20 px icon). The heading is a flex row: the left buttons, the title filling the middle and ellipsising, the right buttons, the toggle last with its icon's width only; the buttons keep their 6 px margins and the svg its place (LK-D-5). The centred-title mode of Dojo (mblHeadingCenterTitle, an absolute div) is not used. */ .mblHeading{display:flex;align-items:flex-start} .mblHeading>.mblToolBarButton{flex:none} .mblHeading>.headLeft{order:0} .mblHeading>.mblHeadingSpanTitle{order:1;flex:1 1 auto;min-width:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center} .mblHeading>.mblHeadingDivTitle{display:none} .mblHeading>.headRight{order:2} .mblHeading>.izThemeToggle{order:3;padding:0} .izrEnd{--end:0} /* Always end with 'izrEnd' class */ /** * The launcher follows the appearance and the theme of the settings (CC-IIZIRUN-APPEARANCE-V5): * the theme sheet css/iiziThemes.css and the Dojo token overlay css/iiziDojoOverlay-ios7.css, * copies of iz/css's that izRun.loadSchemeSheets() links before this sheet, give the tokens and * the ios7 skin; this sheet's own colours follow the rule of iz/css/iiziComps.css: every colour * is a role, written var(--iz-,), so the light IIZI theme shows the palette * too. The sheet slots that kept the skin's old literals there (the views' background #efeff4, the * blue-grey description and theme texts, the coloured row icons, the openers' and the auth box's * lines, the disabled button's grey) were converted to their roles by CC-FIX-HEAD-REDS-SIGNIN-GREEN * (FU-D-5 of CC-THEME-PALETTE-FOLLOWUP, 2026-10-25), as that order converted iiziComps.css's. */ /* The launcher's monochrome icons (images/*.svg, each with fill="currentColor": one file per icon) are drawn by an - the icon of a dojox/mobile ListItem, the images of the field labels and of the Downloading dialog - and an draws its SVG as a document of its own, which the text colour of the page never reaches. In the dark mode each is drawn as a mask of its own file, painted in the text colour of its element, and the image's own picture is moved out of its box; the light mode draws the images as before (CC-FIX-OVERLAY-AND-LAUNCHER-ICONS, AP-D-6). The application logos and the coloured icons keep their own colours. */ :root[data-iz-mode="dark"] img[src$="images/add-app.svg"], :root[data-iz-mode="dark"] img[src$="images/address.svg"], :root[data-iz-mode="dark"] img[src$="images/analytics.svg"], :root[data-iz-mode="dark"] img[src$="images/app.svg"], :root[data-iz-mode="dark"] img[src$="images/bug.svg"], :root[data-iz-mode="dark"] img[src$="images/clear.svg"], :root[data-iz-mode="dark"] img[src$="images/download.svg"], :root[data-iz-mode="dark"] img[src$="images/face.svg"], :root[data-iz-mode="dark"] img[src$="images/finger.svg"], :root[data-iz-mode="dark"] img[src$="images/flSwitch.svg"], :root[data-iz-mode="dark"] img[src$="images/flash.svg"], :root[data-iz-mode="dark"] img[src$="images/iizigo.svg"], :root[data-iz-mode="dark"] img[src$="images/intensity.svg"], :root[data-iz-mode="dark"] img[src$="images/language.svg"], :root[data-iz-mode="dark"] img[src$="images/launch.svg"], :root[data-iz-mode="dark"] img[src$="images/list-alt.svg"], :root[data-iz-mode="dark"] img[src$="images/notification.svg"], :root[data-iz-mode="dark"] img[src$="images/openNS.svg"], :root[data-iz-mode="dark"] img[src$="images/palette.svg"], :root[data-iz-mode="dark"] img[src$="images/panel.svg"], :root[data-iz-mode="dark"] img[src$="images/password.svg"], :root[data-iz-mode="dark"] img[src$="images/port.svg"], :root[data-iz-mode="dark"] img[src$="images/privacy.svg"], :root[data-iz-mode="dark"] img[src$="images/qrcode.svg"], :root[data-iz-mode="dark"] img[src$="images/reset.svg"], :root[data-iz-mode="dark"] img[src$="images/secure.svg"], :root[data-iz-mode="dark"] img[src$="images/server.svg"], :root[data-iz-mode="dark"] img[src$="images/session.svg"], :root[data-iz-mode="dark"] img[src$="images/theme.svg"], :root[data-iz-mode="dark"] img[src$="images/user.svg"] { background-color:currentColor; background-clip:content-box; object-position:-10000px 0; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-origin:content-box; mask-origin:content-box; -webkit-mask-clip:content-box; mask-clip:content-box; } :root[data-iz-mode="dark"] img[src$="images/add-app.svg"]{-webkit-mask-image:url(../images/add-app.svg);mask-image:url(../images/add-app.svg)} :root[data-iz-mode="dark"] img[src$="images/address.svg"]{-webkit-mask-image:url(../images/address.svg);mask-image:url(../images/address.svg)} :root[data-iz-mode="dark"] img[src$="images/analytics.svg"]{-webkit-mask-image:url(../images/analytics.svg);mask-image:url(../images/analytics.svg)} :root[data-iz-mode="dark"] img[src$="images/app.svg"]{-webkit-mask-image:url(../images/app.svg);mask-image:url(../images/app.svg)} :root[data-iz-mode="dark"] img[src$="images/bug.svg"]{-webkit-mask-image:url(../images/bug.svg);mask-image:url(../images/bug.svg)} :root[data-iz-mode="dark"] img[src$="images/clear.svg"]{-webkit-mask-image:url(../images/clear.svg);mask-image:url(../images/clear.svg)} :root[data-iz-mode="dark"] img[src$="images/download.svg"]{-webkit-mask-image:url(../images/download.svg);mask-image:url(../images/download.svg)} :root[data-iz-mode="dark"] img[src$="images/face.svg"]{-webkit-mask-image:url(../images/face.svg);mask-image:url(../images/face.svg)} :root[data-iz-mode="dark"] img[src$="images/finger.svg"]{-webkit-mask-image:url(../images/finger.svg);mask-image:url(../images/finger.svg)} :root[data-iz-mode="dark"] img[src$="images/flSwitch.svg"]{-webkit-mask-image:url(../images/flSwitch.svg);mask-image:url(../images/flSwitch.svg)} :root[data-iz-mode="dark"] img[src$="images/flash.svg"]{-webkit-mask-image:url(../images/flash.svg);mask-image:url(../images/flash.svg)} :root[data-iz-mode="dark"] img[src$="images/iizigo.svg"]{-webkit-mask-image:url(../images/iizigo.svg);mask-image:url(../images/iizigo.svg)} :root[data-iz-mode="dark"] img[src$="images/intensity.svg"]{-webkit-mask-image:url(../images/intensity.svg);mask-image:url(../images/intensity.svg)} :root[data-iz-mode="dark"] img[src$="images/language.svg"]{-webkit-mask-image:url(../images/language.svg);mask-image:url(../images/language.svg)} :root[data-iz-mode="dark"] img[src$="images/launch.svg"]{-webkit-mask-image:url(../images/launch.svg);mask-image:url(../images/launch.svg)} :root[data-iz-mode="dark"] img[src$="images/list-alt.svg"]{-webkit-mask-image:url(../images/list-alt.svg);mask-image:url(../images/list-alt.svg)} :root[data-iz-mode="dark"] img[src$="images/notification.svg"]{-webkit-mask-image:url(../images/notification.svg);mask-image:url(../images/notification.svg)} :root[data-iz-mode="dark"] img[src$="images/openNS.svg"]{-webkit-mask-image:url(../images/openNS.svg);mask-image:url(../images/openNS.svg)} :root[data-iz-mode="dark"] img[src$="images/palette.svg"]{-webkit-mask-image:url(../images/palette.svg);mask-image:url(../images/palette.svg)} :root[data-iz-mode="dark"] img[src$="images/panel.svg"]{-webkit-mask-image:url(../images/panel.svg);mask-image:url(../images/panel.svg)} :root[data-iz-mode="dark"] img[src$="images/password.svg"]{-webkit-mask-image:url(../images/password.svg);mask-image:url(../images/password.svg)} :root[data-iz-mode="dark"] img[src$="images/port.svg"]{-webkit-mask-image:url(../images/port.svg);mask-image:url(../images/port.svg)} :root[data-iz-mode="dark"] img[src$="images/privacy.svg"]{-webkit-mask-image:url(../images/privacy.svg);mask-image:url(../images/privacy.svg)} :root[data-iz-mode="dark"] img[src$="images/qrcode.svg"]{-webkit-mask-image:url(../images/qrcode.svg);mask-image:url(../images/qrcode.svg)} :root[data-iz-mode="dark"] img[src$="images/reset.svg"]{-webkit-mask-image:url(../images/reset.svg);mask-image:url(../images/reset.svg)} :root[data-iz-mode="dark"] img[src$="images/secure.svg"]{-webkit-mask-image:url(../images/secure.svg);mask-image:url(../images/secure.svg)} :root[data-iz-mode="dark"] img[src$="images/server.svg"]{-webkit-mask-image:url(../images/server.svg);mask-image:url(../images/server.svg)} :root[data-iz-mode="dark"] img[src$="images/session.svg"]{-webkit-mask-image:url(../images/session.svg);mask-image:url(../images/session.svg)} :root[data-iz-mode="dark"] img[src$="images/theme.svg"]{-webkit-mask-image:url(../images/theme.svg);mask-image:url(../images/theme.svg)} :root[data-iz-mode="dark"] img[src$="images/user.svg"]{-webkit-mask-image:url(../images/user.svg);mask-image:url(../images/user.svg)} /* HTML base */ html { -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; /* Webkit + iOS touch scroll */ -webkit-overflow-scrolling: touch; /* MSIE touch */ -ms-scroll-chaining: none; -ms-overflow-style: -ms-autohiding-scrollbar; } body { /* Webkit + iOS touch scroll */ -webkit-overflow-scrolling: touch; /* MSIE touch */ -ms-scroll-chaining: none; -ms-overflow-style: -ms-autohiding-scrollbar; /* No scrolling */ position:fixed; overflow:hidden; } /* Remove the horrendous focus marking */ :focus { outline: none !important; } /* Remove X in text fields in IE */ input[type=text]::-ms-clear { display: none; } /** * List item table for input fields. */ #selectLanguageSearch { font-size:17px; border:0; } .liTable { width:100%; padding:0; border:0; margin:0; border-spacing:0; table-layout:fixed; } .liTable td { padding:0; } /*.liItemEdit { }*/ .liTableDiv { width:100%; } .liText { border:0; padding:0; font-size:17px; width:100%; box-sizing: border-box; } .mblListItem { font-size: 17px; } .liButton { margin:0 0 1px 0; display:block; } /** * ListItem title and description. */ .lidTable { padding:0; border:0; margin:0; border-spacing:0; padding-right:25px; } .lidTable>table { table-layout:fixed; padding:0; border:0; margin:0; border-spacing:0; width:100%; } .itemIconCol { width:62px; } .itemIcon { width:50px; height:50px; background-size:contain; background-clip:border-box; background-repeat: no-repeat; background-position:center; background-image:var(--izi); } /* The application icon of the dark mode (CC-ICONS-DARK-SAMPLES, LK-D-9): the list item writes its icons as the custom properties --izi (the icon) and --izid (the icon of the dark mode, when the application has one; jsr/comrun.js, the item's template), and the rule above and this one draw .itemIcon from them by the mode - the dark icon in the dark mode when there is one, else the light one - with no script at a mode change. */ :root[data-iz-mode="dark"] .itemIcon { background-image:var(--izid,var(--izi)); } .itemTitle { width:100%; } .itemTitle>div { width:100%; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } .itemDescr { font-size:12px; font-weight:normal; line-height:16px; } .mblDomButtonDeleteRedButton { position: relative; height: 29px; line-height: 29px; padding: 0px 8px; color: white; font-family: '-apple-system',HelveticaNeue,Helvetica,Arial,sans-serif; font-size: 13px; font-weight: bold; border: 1px outset #9cacc0; border-radius: 5px; background: -webkit-gradient(linear, left top, left bottom, from(#d3656d), to(#bc1320), color-stop(0.5, #c9404b), color-stop(0.5, #bc1421)); background-color: #c9404b; text-align: center; margin-top: 11px; } /** * Paragraph header and descriptions. */ .peHead { margin: 20px 9px 8px 9px; font-size:80%; text-transform:uppercase; opacity:.75; } .peDescr, .peDescr0 { margin: 8px 9px 20px 9px; font-size:70%; line-height:1.3em; opacity:.55; } .peDescr0 { margin-bottom:0; } /** * Hyperlinks. */ a, a:visited, a:hover { text-decoration:none; } /** * Dialogs. */ .mblSimpleDialogButton, .mblSimpleDialogButton2l, .mblSimpleDialogButton2r { width: 127px; margin: 7px 0 0; font-size: 17px; font-weight: bold; opacity: 0.95; } .mblSimpleDialogButton { width: 262px; } .mblSimpleDialogButton2l { float: left; } .mblSimpleDialogButton2r { float: right; } .mblSimpleDialog .mblProgressIndicator { position: relative; margin: 14px 0 7px; top: 0; } /** * The launcher's message boxes - dojox/mobile SimpleDialog: the #message box of app.msg(), the Terms of Use box and * every other HTML box of app.confirm(...,1), Reset, Clear cache, Downloading - on the tokens of css/iiziThemes.css, * as IIZI's own prompt boxes are (common/prompt/prompt.css): the box rounded by the large radius on the raised * (card) colour with the normal text colour, a hairline in the divider colour and the dialogs' elevation, its title's * rule the divider too, its buttons rounded by the control radius over the launcher's button gradient above; and the * modal cover the ScrimBackground role itself over the whole viewport, the safe areas included, blocking taps on the * page beneath (the skin drew a black cover at half opacity over the role, a fifth of the scrim in IIZI light). These * rules follow the skin's and the overlay's in the page, so they win by order (CC-FIX-HEAD-REDS-SIGNIN-GREEN, MB-D-1, * MB-D-1b, 2026-10-25). */ .mblSimpleDialog.mblSimpleDialogDecoration { color:var(--iz-fg,#212121); background-color:var(--iz-bg2,#f5f5f5); border:var(--iz-bw,1px) solid var(--iz-div,#bdbdbd); border-radius:var(--iz-r2,12px); box-shadow:var(--iz-sh2,0 8px 32px rgba(0,0,0,.18)); } .mblSimpleDialog .mblSimpleDialogTitle { border-bottom:var(--iz-bw,1px) solid var(--iz-div,#bdbdbd); } .mblSimpleDialog .mblButton { border-radius:var(--iz-r,6px); } .mblSimpleDialogCover { position:fixed; top:0; left:0; right:0; bottom:0; width:auto; height:auto; opacity:1; background-color:var(--iz-scrim,rgba(0,0,0,.4)); } /** * File cache. */ .cacheList { width:100%; font-size:14px; border-spacing:0; border-collapse: collapse; } .cacheList td { border: 1px var(--iz-div,#bdbdbd) solid !important; padding: 2px 4px; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* .cacheName, .cacheTime { }*/ .cacheSize { text-align:right; } /** * List for app selection. */ .selPrompt { min-width:8em; max-width:8em; width :8em; overflow :hidden; } .selMiddle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .selMiddle { width:100%; } .selMiddle span { width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:block; } .selButton { min-width:4em; max-width:4em; width :4em; overflow :hidden; } .liOverflow { overflow: hidden; text-overflow: ellipsis; width:100%; } .selButton button { width:100%; } /** * Remove X in text fields in IE. */ input[type=text]::-ms-clear { display: none; } .htt { line-height:normal !important; } .noDisplay { display:none !important; } /** * List item colors for text spans. */ .izLang { color:var(--iz-link2,#5e35b1); } .izDescr { color:var(--iz-fg2,#616161); } .izTheme { color:var(--iz-link,#0d47a1); } .izIcon { font-size:22px; } /** * Icons for selection: the icon buttons at the right of the Launch App rows - Language, Appearance, Theme * (CC-FIX-IIZIRUN-SETTINGS-ICONS, ruled 2026-10-29). Every button is the same 30 px SQUARE in the launcher's * button decoration (the .mblButton rules below), its icon centred by flex, with 8 px of the 46 px row above and * below it (the cell's middle alignment); the cell is the button's width. Only the icon is coloured: the Language * button keeps its speech bubble in the link colour, the Appearance button shows the icon of the appearance chosen * for the launch - the sun, moon or auto of the headings' toggle (UI_MODE_ICONS), or a checkmark for "Use default" * (UI_CHOICE_ICONS) - in the Warning colour, and the Theme button the palette (the row's own icon, images/palette.svg) * in the OK colour, the same for every choice: the roles of css/iiziThemes.css, at least 3:1 against the button in * every family and mode (measured on pixels). jsc/init.js paints the two SVG buttons (paintUIChoiceButton). Until * this order the buttons were 28/34 x 42 px, filled the row, and showed the half-circle and the drop of the skin's * glyphs at 34 px in the link colour. */ .izIconUser, .izIconSession, .izIconLang, .izIconTheme { margin:0 auto; padding:0; width:30px; height:30px; box-sizing:border-box; line-height:0; display: -webkit-flex; /*@alternate@*/ display: flex; align-items: center; justify-content: center; } .izIconUser i, .izIconSession i, .izIconLang i, .izIconTheme i { width:auto !important; text-align:center !important; line-height:1; } .izIconLang svg, .izIconTheme svg { width:20px; height:20px; display:block; } .izIconUser { font-size:22px; color:var(--iz-ok,#1b5e20); } .izIconSession { font-size:20px; color:var(--iz-wrn,#9a3600); } .izIconLang { font-size:20px; color:var(--iz-link2,#5e35b1); } #appAppearance0Button .izIconTheme { color:var(--iz-wrn,#9a3600); } #appFamily0Button .izIconTheme { color:var(--iz-ok,#1b5e20); } #appUser1Button, #appSession0Button, #appLang0Button, #appTheme0Button, #appAppearance0Button, #appFamily0Button { width:30px; } #clearButton, #resetButton { margin-right:0; } .mblDomButtonGrayKnob, .mblListItemRightIcon2 { margin-top:0; margin-left:10px; } .mblListItemDeleteIcon { margin-top:0; } .mblDomButtonDeleteRedButton { width:4em; } #Open_Panel > .mblListItemDeleteIcon, #Add_App > .mblListItemDeleteIcon { display:none !important; } /** * Corrections for iOS 7 theme. */ /* Views background for iOS 7+, same as the iOS Settings background pages */ /*.ios7_theme*/ .mblView { background-color: var(--iz-bg,#e0e0e0); } .mblListItem.noClickShow.mblListItemSelected { background-color:var(--iz-bg2,#f5f5f5); } .mblListItem.noClickShow.mblListItemSelected .mblListItemLabel { text-shadow:0 0 0 var(--iz-bg2,#f5f5f5); transition-property: color, text-shadow; transition-duration: .3s; } .mblListItem.noClickShow.mblListItemSelected .mblListItemLabel { color:var(--iz-acc,#0d47a1); text-shadow:0 0 1px var(--iz-fg2,#616161); } .mblHeading { line-height:43px; padding-left:10px; padding-right:10px; box-sizing:border-box; height:43px; } /* A fixed heading of a ScrollableView paints in a layer of its own, above the content the view scrolls by a 3D transform (a layer of its own): on iOS 27.2 the list's titles showed through the heading after a theme change (CC-FIX-IIZIRUN-LOOKS, the iOS heading). The hint changes no geometry. */ .mblScrollableView>.mblHeading.mblFixedHeaderBar { will-change:transform; } .mblToolBarButton { padding-top:0; /*height:32px; NOT! newCM 2022-07-27 */ /*line-height:32px; NOT! newCM 2022-07-27 */ } /* The Back buttons of the headings (CC-FIX-IIZIRUN-SETTINGS-ICONS, ruled 2026-10-29): the label's text and the arrow centred on the bar whatever font draws the skin's Helvetica - Arial on Windows, Helvetica or the system font on iOS, Roboto on Android - so no pixel nudge tuned on one of them. The button's 29 px box is centred in the 43 px bar (align-self; the skin's 6 px margins put it 1 px high), the arrow's 24 px box (19 px and its 5 px border) at the box's middle instead of the skin's top:5px (2.5 px low) - the bar's 42 px content box ends half a pixel above the middle of its 43 px border box, and that half pixel goes into the transform, where the rasteriser keeps it (a fractional top is snapped to a whole pixel on a phone: measured 1 px high or 1 px low) - and the label's line box trimmed to its capitals, from the cap height to the alphabetic baseline (text-box-trim), so that the cell's middle alignment centres the capitals, not the font's ascent and descent. A WebView without text-box-trim (Chrome before 133, Safari before 18.2) keeps the skin's line-box centring of the label. */ .mblHeading>.mblToolBarButtonHasLeftArrow { align-self:center; margin-top:0; margin-bottom:0; } .mblHeading .mblToolBarButtonHasLeftArrow .mblToolBarButtonArrow { top:2.5px; -webkit-transform:translateY(.5px) scale(.75) rotate(45deg); transform:translateY(.5px) scale(.75) rotate(45deg); } .mblHeading .mblToolBarButtonHasLeftArrow .mblToolBarButtonLabel { text-box-trim:trim-both; text-box-edge:cap alphabetic; } /*.ios7_theme*/ .mblOverlay.mblOpener > .mblHeading { border-top-color: var(--iz-bd,#bdbdbd); border-top-style: solid; border-top-width: 1px; } /*.ios7_theme*/ .mblListItem .mblBlueButton, /*.ios7_theme*/ .izIconUser :not(.lidTable), /*.ios7_theme*/ .izIconSession :not(.lidTable), /*.ios7_theme*/ .izIconLang :not(.lidTable), /*.ios7_theme*/ .izIconTheme :not(.lidTable) { padding-bottom:2px; /*margin-top:6px;*/ } /*.ios7_theme*/ .lidTable .izIconUser, /*.ios7_theme*/ .lidTable .izIconSession, /*.ios7_theme*/ .lidTable .izIconLang, /*.ios7_theme*/ .lidTable .izIconTheme { margin-top:0; } /*.ios7_theme*/.mblListItemRightText { height: 100%; display: inline-flex; /*@alternate@*/ display: -webkit-inline-flex; margin-top: 0; margin-bottom:0; align-items: center; } /*.ios7_theme*/ .mblEdgeToEdgeList > .mblListItem:not(.mblVariableHeight) { height: 46px; line-height: 45px; } /*.ios7_theme*/ .mblEdgeToEdgeList > .mblListItem:not(.mblVariableHeight) .mblListItemLabel { line-height: 45px; /* Didn't work to center! display: -webit-inline-flex !important; /*@alternate@* display: inline-flex !important; align-items: center; */ } /*.ios7_theme*/ .mblEdgeToEdgeList > .mblListItem:not(.mblVariableHeight) .mblListItemRightIcon, /*.ios7_theme*/ .mblEdgeToEdgeList > .mblListItem:not(.mblVariableHeight) .mblListItemRightIcon2 { margin-top: 8px; margin-bottom: 8px; } /*.ios7_theme*/ .mblSwitchText { line-height:22px !important; /* 22px? Originally 27px (iOS)? */ } /*.ios7_theme*/ .mblListItem.mblVariableHeight { padding:11px 16px 11px 15px; } /*.ios7_theme*/ .peHead, /*.ios7_theme*/ .peDescr, /*.ios7_theme*/ .peDescr0 { margin-left:16px; } .mblListItem .mblSwitch { top:10px; } /* The Switch's round corners are Dojo's SVG overlay (dojox/mobile/_maskUtils.js), painted in the background colour read once at creation: after a mode change in Settings the corners kept the old colour. The track and the knob have their own radius, so the overlay is hidden; the scroll bars' wrapper carries the same overlay (CC-FIX-IIZIRUN-LOOKS, LK-D-6). */ .mblSwitch>svg, .mblScrollBarWrapper>svg { display:none; } /* Fix for no line above opener */ .mblOverlay.mblOpener .mblHeading { border-top:1px solid var(--iz-bd,#bdbdbd); } .authT { margin:10px 0 10px 10px; } .authT > td { padding:4px; } .auth { border:var(--iz-bd,#bdbdbd) solid 1px; padding:10px; font-size:17px; width:200px; } .mblButtonDisabled,.mblButton:disabled { background-color:initial; color:var(--iz-dis-fg,#757575); } /** * The launcher's buttons (dojox/mobile Button: Settings, Select Server, the dialogs) on the decoration tokens of * css/iiziThemes.css (order CC-THEME-PALETTE): the gradient, the border and the shadow of the IIZI client's buttons * (iz/css/iiziComps.css), in every family and mode; the skin's blue and red buttons keep their colours. The * overlay copy css/iiziDojoOverlay-ios7.css is linked before this sheet, so these rules win by order. */ .mblButton:not(.mblBlueButton):not(.mblRedButton) { background-color:var(--iz-btn-b,#e0e0e0); background-image:linear-gradient(to bottom,var(--iz-btn-t,#ffffff) 0%,var(--iz-btn-b,#e0e0e0) 100%); border:1px solid var(--iz-btn-bd,#bdbdbd); box-shadow:var(--iz-sh-btn,0 1px 1px rgba(0,0,0,.25)); } .mblButton.mblButtonSelected:not(.mblBlueButton):not(.mblRedButton) { background-color:var(--iz-btn-pb,#f5f5f5); background-image:linear-gradient(to bottom,var(--iz-btn-pt,#e0e0e0) 0%,var(--iz-btn-pb,#f5f5f5) 100%); border-color:var(--iz-btn-bd,#bdbdbd); } .mblButton.mblButtonDisabled:not(.mblBlueButton):not(.mblRedButton), .mblButton:disabled:not(.mblBlueButton):not(.mblRedButton) { background-color:var(--iz-btn-b,#e0e0e0); background-image:linear-gradient(to bottom,var(--iz-btn-t,#ffffff) 0%,var(--iz-btn-b,#e0e0e0) 100%); border:1px solid var(--iz-btn-bd,#bdbdbd); box-shadow:var(--iz-sh-btn,0 1px 1px rgba(0,0,0,.25)); color:var(--iz-dis-fg,#757575); } /** * Every button of the launcher is rounded by the control radius, as the dialogs' buttons are (HR-D-5 of * CC-FIX-HEAD-REDS-SIGNIN-GREEN, ruled 2026-10-25, staged by CC-MERGE-297-305-FOLLOWUP): the Launch App view's * language and theme buttons (dojox/mobile Button, .mblButton) and the Settings view's Clear and Reset buttons * (dojox/mobile ToolBarButton with a label, the skin's blue buttons) read border-radius 0 until now. */ .mblButton, .mblToolBarButton.mblBlueButton { border-radius:var(--iz-r,6px); } /** * The invalid field of Add Server and Add iiziGo (jsr/comrun.js valid(): the address and the port, marked with the class * izInvalid on the row; CC-FIX-IIZIRUN-NIGHT-BUGS): the row and its field on the Error background of css/iiziThemes.css * in the family and mode, light or dark, and a 4 px bar in the Error colour at the row's left edge - the indication that * reads 3:1 or better against the page in every family and mode, where the tinted background alone reads 1.1-1.4:1. * The field's placeholder (shown while it is empty, which is invalid) is painted in the Error colour too: the mode's * grey placeholder read 3.5-3.8:1 on the tinted background. The script painted a hard-coded light pink (#f6e1e1) on the * input and the row inline: a pale grey over the dark page, 1.5:1 under the field's light text. These rules follow the * skin's and the overlay's in the page, so they win by order. */ .liItemEdit.izInvalid, .liItemEdit.izInvalid .liText { background-color:var(--iz-err-bg,#fbe9e7); } .liItemEdit.izInvalid { box-shadow:inset 4px 0 0 var(--iz-err,#a72f0a); } .liItemEdit.izInvalid .liText::placeholder { color:var(--iz-err,#a72f0a); }