diff options
Diffstat (limited to 'css/popup.css')
| -rw-r--r-- | css/popup.css | 691 |
1 files changed, 691 insertions, 0 deletions
diff --git a/css/popup.css b/css/popup.css new file mode 100644 index 0000000..b5a468b --- /dev/null +++ b/css/popup.css @@ -0,0 +1,691 @@ +body { + background-color: white; + border: 0; + float: left; + font: 14px httpsb,sans-serif; + margin: 0; + min-height: 16em; + min-width: 32em; + opacity: 1; + overflow-x: hidden; + overflow-y: auto; + padding: 0; + position: relative; + } +*:focus { + outline: none; + } +a { + color: inherit; + text-decoration: none; + } + +#version { + font-size: 10px; + font-weight: normal; + } +#gotoDashboard { + background-color: #444; + border: 0; + color: #bbb; + cursor: pointer; + display: block; + font-size: 12px; + line-height: 12px; + margin: 0; + padding: 3px 0; + position: relative; + text-align: center; + } +#gotoDashboard > span:last-of-type { + opacity: 0.5; + position: absolute; + } +body[dir="ltr"] #gotoDashboard > span:last-of-type { + left: 3px; + } +body[dir="rtl"] #gotoDashboard > span:last-of-type { + right: 3px; + } + +.paneHead { + background-color: white; + left: 0; + padding: 0; + position: fixed; + right: 0; + top: 0; + z-index: 100; + } +.paneContent { + padding-top: 5.5em; + } + + +.paneHead > a:first-child { + background-color: #444; + border: 0; + border-bottom: 1px solid white; + color: #bbb; + cursor: pointer; + display: block; + font-family: sans-serif; + line-height: 12px; + margin: 0; + padding: 2px 0; + text-align: center; + } +#toolbarContainer { + display: flex; + justify-content: space-between; +} +.toolbar { + border: 0; + display: inline-flex; + margin: 0; + padding: 0; + } + +body .toolbar button { + background-color: white; + border: 0; + color: black; + cursor: pointer; + margin: 0; + padding: 0.2em 0.2em 0.1em 0.2em; + position: relative; + } +body .toolbar button:hover { + background-color: #eee; + } +body .toolbar button.disabled { + color: #ccc; + } +body .toolbar button.fa { + font: 1.7em FontAwesome; + min-width: 1.4em; + } +#mtxSwitch_matrix-off.switchTrue { + color: #a00; + } + +#mtxSwitches > li { + align-items: center; + color: #888; + display: flex; + } +#mtxSwitches > li.switchTrue { + color: #000; + } +#mtxSwitches > li > svg { + display: inline; + height: 1em; + margin-right: 0.4em; + width: 1.5em; + } +#mtxSwitches > li > svg * { + fill-opacity: 1; + opacity: 1; + stroke: none; + } +#mtxSwitches > li.relevant > svg .dot { + fill: #aaa; + } +#mtxSwitches > li.switchTrue.relevant > svg .dot { + fill: #eee; + } +#mtxSwitches > li > svg .off, +#mtxSwitches > li.switchTrue > svg .on, +#mtxSwitches > li.relevant > svg .dot { + display: block; + } +#mtxSwitches > li > svg .on, +#mtxSwitches > li > svg .dot, +#mtxSwitches > li.switchTrue > svg .off { + display: none; + } +#mtxSwitches > li > span[data-i18n] { + flex-grow: 1; + } +#mtxSwitches > li > a { + color: #000; + opacity: 0; + } +#mtxSwitches > li:hover > a { + opacity: 0.1; + } +#mtxSwitches > li > a:hover { + opacity: 0.8; + } + +.dropdown-menu-capture { + background-color: transparent; + border: 0; + bottom: 0; + display: none; + left: 0; + margin: 0; + padding: 0; + position: fixed; + right: 0; + top: 0; + z-index: 300; + } +.dropdown-menu-capture.show { + display: block; + } +.dropdown-menu { + border: 0; + display: inline-block; + margin: 0; + padding: 3px 0 0 0; + position: absolute; + white-space: normal; + } +.dropdown-menu > ul { + margin: 0; + border: 0; + border: 1px solid #ccc; + border-radius: 4px; + padding: 0; + background-color: white; + list-style-type: none; + } +.dropdown-menu > ul > li.dropdown-menu-entry { + border: 0; + color: black; + cursor: pointer; + margin: 0; + padding: 0.2em 0.25em; + white-space: nowrap; + } +.dropdown-menu > ul > li.dropdown-menu-entry:hover { + background: #eee; + } +.dropdown-menu > ul > li.dropdown-menu-entry-divider { + border-top: 1px solid #ccc; + margin: 0.5em 0; + } +.dropdown-menu.show { + display: block; + } + +#buttonReload { + margin-left: 1em; + } + +button > span.badge { + padding: 1px 1px; + display: inline-block; + font-size: 40%; + position: absolute; + right: 1px; + bottom: 1px; + color: #000; + background-color: rgba(240,240,240,0.75) + } +button.disabled > span.badge { + display: none; + } +#buttonPresets + .dropdown-menu { + position: fixed; + left: 10vw; + width: 80vw; + } +.presetInfo { + margin: 0.25em 0.5em; + text-align: center; + } +.presetEntry { + margin: 0.25em 0.25em; + border-radius: 3px; + padding: 0.5em; + display: inline-block; + cursor: pointer; + background-color: #eee; + } +.presetEntry .fa { + margin-right: 0.25em; + font-size: 110%; + } +.presetEntry:hover { + background-color: #80e2ff; + } +#presetMore > *:first-child { + margin: 0; + padding: 0; + text-align: center; + color: #888; + cursor: pointer; + font-size: 13px; + } +#presetMore > *:first-child + div { + margin: 0.25em 0 0 0; + padding: 0.25em 0 0 0; + display: none; + text-align: center; + } +#presetMore > *:first-child + div.show { + display: block; + } +#presetMore > *:first-child + div > * { + vertical-align: middle; + } +#presetMoreRecipe { + border: 1px solid #aaa; + width: 75%; + height: 4em; + overflow: hidden; + resize: none; + font-size: 10px; + color: #888; + } +#presetMoreRecipe.bad { + border: 1px solid #fcc; + color: #aaa; + } +#presetMoreWrite.bad { + visibility: hidden; + } + +/* I think this is obsolete */ +.dropdown-menu > li > a > i { + padding: 0 6px; + font-size: 1.2em; + } + +body .toolbar .scope { + background-color: #ccc; + border: 1px solid #ccc; + box-sizing: content-box; + -moz-box-sizing: content-box; + display: inline-flex; + color: white; + margin: 0; + padding: 1px; + cursor: pointer; + } +body .toolbar .scope > span { + align-items: center; + display: inline-flex; + } +body .toolbar .scope > span > span { + pointer-events: none; + white-space: nowrap; + } +body .toolbar #specificScope { + direction: ltr; + justify-content: flex-end; + width: 16em; + } +body .toolbar #specificScope.on { + background-color: #24c; + border-color: #24c; + } +body .toolbar #specificScope > span { + background-color: #ccc; + justify-content: flex-end; + } +body .toolbar #specificScope > span.on { + background-color: #24c; + } +body .toolbar #specificScope > span:first-of-type:not(.on):hover, +body .toolbar #specificScope > span:first-of-type:not(.on):hover ~ span:not(.on), +body .toolbar #specificScope > span:not(.on) + span:not(.on):hover, +body .toolbar #specificScope > span:not(.on) + span:not(.on):hover ~ span:not(.on) { + background-color: #999; + } +body .toolbar #specificScope > span:first-of-type:not(.on):hover ~ span, +body .toolbar #specificScope > span:not(.on) + span:not(.on):hover ~ span, +body .toolbar #specificScope > span.on + span:hover, +body .toolbar #specificScope > span.on + span:hover ~ span { + background-color: #139; + } +body .toolbar #specificScope > span:first-of-type { + flex: 1; + } +body .toolbar #globalScope { + justify-content: center; + margin-left: 1px; + width: 1.8em; + } +body .toolbar #globalScope.on { + background-color: #000; + border-color: #000; + } +body .toolbar #globalScope:not(.on):hover { + background-color: #999; + border-color: #999; + } +body .toolbar .scopeRel { + color: #24c; + } +body.globalScope .toolbar .scopeRel { + color: #000; + } +body.globalScope .toolbar .scopeRel.disabled { + color: #ccc; + } + +.matrix { + text-align: left; + } +.matRow { + white-space: nowrap; + } +.matCell { + margin: 1px 1px 0 0; + border: 1px dotted rgba(0,0,0,0.2); + padding: 6px 1px 3px 1px; + display: inline-block; + box-sizing: content-box; + -moz-box-sizing: content-box; + width: 2.6em; + white-space: nowrap; + text-align: center; + line-height: 110%; + position: relative; + } + +#matHead { + border-top: 1px dotted #ccc; + padding-top: 1px; + margin: 1px 0 0 0; + } +.paneHead .matCell:nth-child(2) { + letter-spacing: -0.3px; + } + +.paneContent .matrix .matRow > .matCell:first-child { + font-weight: 100; + } +.paneContent .matrix .matRow > .matCell:first-child > b { + font-weight: normal; + } + +/* RFC 3987 Internationalized Resource Identifiers (IRIs) -- 4.4 */ +.matrix .matRow > .matCell:first-child { + direction: ltr; + text-align: right; + unicode-bidi: embed; + width: 16em; + } +.matrix .matGroup.g4 .matRow.ro > .matCell:first-child { + direction: inherit; + } +.matrix .matRow.l2 > .matCell:first-child { + margin-left: 1px; + width: calc(16em - 1px); + } +.matrix .matRow > .matCell:hover { + border-style: solid; + } +.matrix .matGroup .matSection { + margin: 2px 0 0 0; + border: 0; + padding: 0; + /* background-color: rgba(0,0,0,0.05); */ + } +.matrix .matGroup.g0 .matSection:first-child { + margin-top: 0; + } +.matrix .matGroup.g4 .matSection:first-child { + margin-top: 0; + } +/* Collapsing of domains */ +.matrix .matSection .matRow.meta { + display: none; + } +.matrix .matSection.collapsible.collapsed .matRow.meta { + display: block; + } +.matrix .matSection.collapsible.collapsed .matRow.l1:not(.meta) { + display: none; + } +.matrix .matSection.collapsible.collapsed .matRow.l2.collapsible { + display: none; + } + +/* Collapsing of blacklisted */ +.matrix .g4Meta { + margin: 0; + padding: 0; + border: 0; + height: 6px; + background: url('../img/matrix-group-hide.png') no-repeat center top, + url('../img/matrix-group-hline.png') repeat-x center top 3px; + opacity: 0.2; + cursor: pointer; + } +.matrix .g4Meta:hover { + opacity: 0.4; + } +.matrix .g4Meta.g4Collapsed { + background: url('../img/matrix-group-show.png') no-repeat center top, + url('../img/matrix-group-hline.png') repeat-x center top 3px; + } +.matrix .g4Meta.g4Collapsed ~ .matSection { + display: none; + } +body.powerOff .matrix .g4Meta.g4Collapsed ~ .matSection { + display: block; + } +.matrix .g4Meta ~ .matRow.ro { + display: none; + } +.matrix .g4Meta.g4Collapsed ~ .matRow.ro { + display: block; + } +body.powerOff .matrix .g4Meta.g4Collapsed ~ .matRow.ro { + display: none; + } +.matrix .matGroup .g4Meta + *,.matrix .matGroup .g4Meta + * + * { + margin-top: 0; + padding-top: 0; + } + +/* Cell coloring */ +.t81 { + color: white; + background-color: #c00; + } +.t82 { + color: white; + background-color: #080; + } +.t1 { + border-color: #debaba; + color: black; + background-color: #f8d0d0; + } +.t2 { + border-color: #bad6ba; + color: black; + background-color: #d0f0d0; + } +.matCell.p81 { + background-image: url('../img/permanent-black-small.png'); + background-repeat: no-repeat; + background-position: -1px -1px; + } +.matCell.p82 { + background-image: url('../img/permanent-white-small.png'); + background-repeat: no-repeat; + background-position: -1px -1px; + } + +/* Cell coloring for color blind-friendly (hopefully) */ +body.colorblind .t81 { + color: white; + background-color: rgb(0, 19, 110); + } +body.colorblind .t82 { + border-color: rgb(255, 194, 57); + color: black; + background-color: rgb(255, 194, 57); + } +body.colorblind .t1 { + border-color: rgba(0, 19, 110, 0.3); + color: black; + background-color: rgba(0, 19, 110, 0.2); + } +body.colorblind .t2 { + border-color: rgba(255, 194, 57, 0.3); + color: black; + background-color: rgba(255, 194, 57, 0.2); + } +body.colorblind .matCell.p81 { + background-image: url('../img/permanent-black-small-cb.png'); + } +body.colorblind .matCell.p82 { + background-image: url('../img/permanent-white-small-cb.png'); + } + + +.matRow.rw .matCell { + cursor: pointer; + } +body.powerOff .matRow.rw .matCell { + cursor: auto; + opacity: 0.6; + } + +.top { + font-weight: bold; + } + +#cellHotspots { + margin: 0; + border: 0; + padding: 0; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 10; + } +#whitelist, #blacklist { + margin: 0; + border: 0; + padding: 0; + position: absolute; + left: 0; + width: 100%; + height: 50%; + background: transparent; + } +#whitelist { + top: 0; + } +#blacklist { + top: 50%; + } +body.powerOff #whitelist, body.powerOff #blacklist { + display: none; + } +.rw .matCell.t1 #whitelist:hover { + background-color: #080; + opacity: 0.25; + } +body.colorblind .rw .matCell.t1 #whitelist:hover, +body.colorblind .rw .matCell.t2 #whitelist:hover { + background-color: rgb(255, 194, 57); + opacity: 0.6; + } +.rw .matCell.t2 #whitelist:hover { + background-color: #080; + opacity: 0.25; + } +.matCell.t81 #whitelist:hover { + background-color: transparent; + } +.matCell.t82 #whitelist:hover { + background-color: transparent; + } +.rw .matCell.t1 #blacklist:hover { + background-color: #c00; + opacity: 0.25; + } +body.colorblind .rw .matCell.t1 #blacklist:hover, +body.colorblind .rw .matCell.t2 #blacklist:hover { + background-color: rgb(0, 19, 110); + opacity: 0.4; + } +.rw .matCell.t2 #blacklist:hover { + background-color: #c00; + opacity: 0.25; + } +.matCell.t81 #blacklist:hover { + background-color: transparent; + } +.matCell.t82 #blacklist:hover { + background-color: transparent; + } +#domainOnly { + margin: 0; + border: 1px solid gray; + border-radius: 3px; + padding: 0 1px; + position: absolute; + font-size: 1.1em; + left: 20%; + bottom: -20%; + display: none; + color: black; + background-color: white; + opacity: 0.25; + z-index: 10000; + cursor: pointer; + } +.matSection #domainOnly .fa:before { + content: '\f106'; + } +.matSection.collapsed #domainOnly .fa:before { + content: '\f107'; + } +.matSection.collapsible .matRow.l1 .matCell:nth-of-type(1):hover #domainOnly { + display: block; + } +#matHead #domainOnly .fa:before { + content: '\f106'; + } +#matHead.collapsed #domainOnly .fa:before { + content: '\f107'; + } +#matHead.collapsible .matRow .matCell:nth-of-type(1):hover #domainOnly { + display: block; + } +#domainOnly:hover { + opacity: 1; + } + +/* No data was found for the tab */ + +body.noTabFound .paneHead, +body.noTabFound .paneContent { + display: none; + } +body.noTabFound #noTabFound { + align-items: center; + color: gray; + display: flex; + font-size: xx-large; + height: 100vh; + justify-content: center; + } + +/* Mobile-friendly rules */ + +body.hConstrained { + overflow-x: auto; + } +body.hConstrained .paneHead { + left: auto; + position: absolute; + right: auto; + width: 100%; + } +body[data-touch="true"] .matCell { + line-height: 200%; + } |