body { background-color: white; border: 0; float: left; font: 13px httpsb,sans-serif; margin: 0; min-height: 16em; min-width: 32em; overflow-x: hidden; overflow-y: auto; padding: 0; } *:focus { outline: none; } .paneHead { padding: 0; position: fixed; top: 0; height: 5.5em; left:0; right: 0; background-color: white; z-index: 10; } .paneContent { padding-top: 5.5em; } .toolbar { margin: 0; border: 0; padding: 0; padding-bottom: 0.25em; display: inline-block; white-space: nowrap; vertical-align: top; position: absolute; top: 0; } body[dir="ltr"] .toolbar.alignLeft, body[dir="rtl"] .toolbar.alignRight { left: 0; } body[dir="ltr"] .toolbar.alignRight, body[dir="rtl"] .toolbar.alignLeft { right: 0; } body .toolbar button { margin: 0; border: 0; padding: 4px; font: inherit; background-color: white; opacity: 0.9; cursor: pointer; vertical-align: top; } body .toolbar button:hover { background-color: #eee; opacity: 1; } body .toolbar button.disabled { color: #ccc; } body .toolbar button.fa { font: 1.75em FontAwesome; min-width: 1.1em; } body.tScopeGlobal .scopeRel:not(.disabled) { color: #000; } body.tScopeDomain .scopeRel:not(.disabled) { color: #24c; } body.tScopeSite .scopeRel:not(.disabled) { color: #48c; } #mtxSwitch_matrix-off.switchTrue { color: #a00; } body[dir="ltr"] #buttonMtxSwitches + .dropdown-menu { left: -80%; } body[dir="rtl"] #buttonMtxSwitches + .dropdown-menu { right: -80%; } #mtxSwitches > li { color: #888; } #mtxSwitches > li.switchTrue { color: #000; } #mtxSwitches > li:before { font: 110% FontAwesome; } body[dir="ltr"] #mtxSwitches > li:before { padding-right: 0.5em; } body[dir="rtl"] #mtxSwitches > li:before { padding-left: 0.5em; } #mtxSwitches > li:before { content: '\f204'; } #mtxSwitches > li.switchTrue:before { color: #000; content: '\f205'; } #buttonRevertAll:before { content: '\f122'; font: 110% FontAwesome; padding-right: 0.5em; } [data-i18n="matrixDashboardMenuEntry"]:before { content: '\f085'; font: 110% FontAwesome; padding-right: 0.5em; } .dropdown-menu { margin: 0; border: 0; display: none; font-size: 110%; padding: 3px 0 0 0; position: fixed; white-space: normal; z-index: 50; } .dropdown-menu > ul { margin: 0; border: 0; border: 1px solid #ccc; border-radius: 4px; padding: 0.25em; background-color: white; list-style-type: none; } .dropdown-menu > ul > li.dropdown-menu-entry { border: 0; color: black; cursor: pointer; margin: 0; padding: 4px 0.5em; 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 > ul > li.dropdown-menu-entry > .fa { color: #aaa; font-size: 110%; margin-right: 0.5em; } .dropdown-menu.show { display: block; } .dropdown-menu-capture { margin: 0; border: 0; padding: 0; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: transparent; opacity: 0.1; display: none; z-index: 40; } .dropdown-menu.show ~ .dropdown-menu-capture { 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 button#scopeCell { margin: 0; border: 1px dotted rgba(0,0,0,0.2); padding: 6px 1px 3px 1px; box-sizing: content-box; width: 16em; height: 1.5em; white-space: nowrap; text-align: right; line-height: 100%; color: white; background-repeat: no-repeat; background-position: -1px -1px; } body #scopeCell + .dropdown-menu { padding: 6px 1px 3px 1px; text-align: right; min-width: 50%; max-width: 80%; } body.tScopeGlobal #scopeCell { background-color: #000; } body.tScopeDomain #scopeCell { background-color: #24c; } body.tScopeSite #scopeCell { background-color: #48c; } .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; width: 2.4em; white-space: nowrap; text-align: center; line-height: 110%; position: relative; } .paneHead #matHead { position: absolute; bottom: 3px; } .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; } .matrix .matRow > .matCell:first-child { width: 16em; text-align: right; } .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 .matSection:first-child { margin-top: 2px; border-top: 1px dotted #ccc; padding-top: 1px; } .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; }