body { display: flex; flex-direction: column; overflow: hidden; white-space: nowrap; width: fit-content; width: -moz-fit-content; } h2 { background-color: var(--bg-popup-cell-1); border: 0; color: var(--fg-0-70); cursor: pointer; font-size: 100%; font-weight: normal; padding: 0.2em; text-align: center; } a { color: inherit; text-decoration: none; } :focus { outline: 0; } #appinfo { align-items: flex-end; background-color: #444; border: 0; color: #bbb; display: flex; font-size: smaller; justify-content: center; margin: 0; padding: 1px 0; width: 100%; } #panes { display: flex; flex-direction: row-reverse; } #panes > div { display: inline-block; position: relative; vertical-align: top; } body[dir="ltr"] #panes > div { direction: ltr; } body[dir="rtl"] #panes > div { direction: rtl; } #panes > div:nth-of-type(2) { flex-shrink: 0; font-family: "Noto Sans", sans-serif; overflow-y: auto; overflow-x: hidden; width: 24em; } /** Scroll bar to the left. */ body[dir="ltr"] #panes > div:nth-of-type(2) { direction: rtl; margin-right: 1px; } body[dir="rtl"] #panes > div:nth-of-type(2) { direction: ltr; margin-left: 1px; } #panes:not(.dfEnabled) > div:nth-of-type(2) { display: none; } #panes > div:first-of-type { min-width: 11em; padding: 0; } p { display: flex; justify-content: center; } .fa-icon { font-size: 120%; } .fa { font-size: 120%; } #switch { margin: 0.8em 0; } #switch .fa-icon { color: var(--popup-power-ink); fill: var(--popup-power-ink); cursor: pointer; font-size: 700%; margin: 0; padding: 0; } #switch .fa-icon:hover { color: var(--popup-power-ink-hover); fill: var(--popup-power-ink-hover); } body.off #switch .fa-icon { color: var(--fg-0-20); fill: var(--fg-0-20); } #basicTools { margin: 1.2em 0 0.5em 0; } .tool:first-child { margin-left: 0; } .tool { color: var(--fg-0-40); cursor: pointer; fill: var(--fg-0-40); margin-left: 0.8em; min-width: 1em; padding: 0 0.2em; unicode-bidi: embed; visibility: hidden; } .tool.enabled { visibility: visible; } .tool.enabled:hover { color: inherit; fill: inherit; } #page-blocked { font-size: 1.25em; } .statName { color: var(--fg-0-70); font-size: 85%; margin: 0.8em 0.2em 0.4em 0.2em; } .statValue { margin: 0; } #extraTools { background-color: var(--bg-popup-cell-1); border: 0; display: flex; justify-content: center; margin: 0.8em 0 0 0; padding: 0.2em 0; } body.responsive #extraTools { justify-content: space-evenly; } #extraTools > span { color: var(--fg-0-40); cursor: pointer; fill: var(--fg-0-40); font-size: 1.2em; margin: 0 0.8em 0 0; position: relative; } #extraTools > span:first-of-type { margin-left: 0.9em; } #extraTools > span > .nope { left: 50%; position: absolute; stroke: var(--popup-icon-x-ink); stroke-width: 2; transform: translateX(-50%); visibility: hidden; width: 1em; } #extraTools > span.on > .nope { visibility: visible; } #extraTools > span:hover { color: inherit; fill: inherit; } #refresh { background-color: var(--bg-transient-notice); border: 1px solid #ddc; border-radius: 4px; cursor: pointer; display: none; fill: var(--fg-0-50); font-size: 3em; justify-content: center; left: 4px; line-height: 1; padding: 0.15em; position: absolute; right: 4px; } body.dirty #refresh { display: flex; } body.dirty #refresh:hover { fill: inherit; } #tooltip { background-color: var(--bg-tooltip); border: 1px solid gray; border-radius: 3px; box-shadow: 1px 1px 3px gray; box-sizing: border-box; color: var(--fg-tooltip); cursor: pointer; direction: ltr; font: 12px sans-serif; left: 5%; line-height: 130%; margin: 0.5em 0; opacity: 0; padding: 4px 6px; pointer-events: none; position: absolute; text-align: center; visibility: hidden; white-space: pre-line; width: 90%; z-index: 100; } body[dir="rtl"] #tooltip { direction: rtl; } #tooltip.show { transition: opacity 0.15s 0.5s; -webkit-transition: opacity 0.15s 0.5s; visibility: visible; opacity: 1; } #firewallContainer { border: 0; font-size: 85%; line-height: 1.4; margin: 0; padding: 0; text-align: right; } #firewallContainer > div { border: 0; direction: ltr; display: flex; justify-content: flex-end; margin: 0; margin-top: 1px; padding: 0; } #firewallContainer > div:first-child { margin-top: 0; } #firewallContainer > div:first-child ~ div[data-des="*"] { display: none; } #firewallContainer:not(.expanded) > div.isSubDomain:not(.expandException):not(.isRootContext), #firewallContainer.expanded > div.isSubDomain.expandException:not(.isRootContext) { display: none; } #firewallContainer > div > span { background-color: var(--bg-popup-cell-1); border: none; box-sizing: border-box; display: inline-flex; flex-shrink: 0; padding: 0.33em 0; position: relative; } #firewallContainer > div:first-of-type > span:first-of-type { cursor: pointer; flex-direction: unset; } #firewallContainer > div > span:first-of-type { align-items: flex-end; flex-direction: column; justify-content: flex-end; padding-right: 2px; white-space: normal; width: calc(100% - 4em); word-break: break-word; } #firewallContainer > div.isCname > span:first-of-type { color: var(--fg-popup-cell-cname); } #firewallContainer > div > span:first-of-type > sub { display: inline-block; font-size: 85%; font-weight: normal; padding: 0.25em 0 0 0; } #firewallContainer > div > span:first-of-type > sub:empty { display: none; } #firewallContainer > div > span:first-of-type ~ span { margin-left: 1px; width: 4em; } #firewallContainer > div > span:nth-of-type(2) { display: none; } #firewallContainer > div > span:nth-of-type(3), #firewallContainer > div > span:nth-of-type(4) { color: var(--fg-0-70); display: none; font-family: monospace; text-align: center; } #firewallContainer > div.isDomain > span:first-of-type { font-weight: bold; } #firewallContainer > div:first-of-type > span:first-of-type::before { color: var(--fg-0-50); content: '+'; padding-right: 0.25em; } #firewallContainer.expanded > div:first-of-type > span:first-of-type::before { content: '\2012'; } #firewallContainer > div[data-des="*"] > span:nth-of-type(3), #firewallContainer > div.isSubDomain > span:nth-of-type(3), #firewallContainer > div.isSubDomain.isRootContext > span:nth-of-type(3), #firewallContainer.expanded > div:not(.expandException) > span:nth-of-type(3), #firewallContainer:not(.expanded) > div.expandException > span:nth-of-type(3), #firewallContainer:not(.expanded) > div.isDomain:not(.expandException) > span:nth-of-type(4), #firewallContainer.expanded > div.isDomain.expandException > span:nth-of-type(4) { display: inline-flex; justify-content: space-between; } #firewallContainer > div > span[data-acount]::before, #firewallContainer > div > span[data-bcount]::after, #firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::before, #firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::after { content: ' '; } #firewallContainer > div > span[data-acount]::before, #firewallContainer > div > span[data-acount] > #actionSelector > #dynaCounts::before { padding-left: 0.1em; } #firewallContainer > div > span[data-acount="1"]::before, #firewallContainer > div > span[data-acount="1"] > #actionSelector > #dynaCounts::before { content: '+'; } #firewallContainer > div > span[data-acount="2"]::before, #firewallContainer > div > span[data-acount="2"] > #actionSelector > #dynaCounts::before { content: '++'; } #firewallContainer > div > span[data-acount="3"]::before, #firewallContainer > div > span[data-acount="3"] > #actionSelector > #dynaCounts::before { content: '+++'; } #firewallContainer > div > span[data-bcount]::after, #firewallContainer > div > span[data-bcount] > #actionSelector > #dynaCounts::after { padding-right: 0.1em; } #firewallContainer > div > span[data-bcount="1"]::after, #firewallContainer > div > span[data-bcount="1"] > #actionSelector > #dynaCounts::after { content: '\2212'; } #firewallContainer > div > span[data-bcount="2"]::after, #firewallContainer > div > span[data-bcount="2"] > #actionSelector > #dynaCounts::after { content: '\2212\2212'; } #firewallContainer > div > span[data-bcount="3"]::after, #firewallContainer > div > span[data-bcount="3"] > #actionSelector > #dynaCounts::after { content: '\2212\2212\2212'; } body.advancedUser #firewallContainer > div > span:first-of-type { width: calc(100% - 8em); } body.advancedUser #firewallContainer > div > span:nth-of-type(2) { display: inline-flex; } body.advancedUser #firewallContainer > div:first-child ~ div[data-des="*"] { display: flex; } body.advancedUser #firewallContainer > div > span:first-of-type ~ span { cursor: pointer; } /** Small coloured label at the left of a row */ #firewallContainer > div.isRootContext > span:first-of-type::before, #firewallContainer > div.allowed > span:first-of-type::before, #firewallContainer > div.blocked > span:first-of-type::before, #firewallContainer:not(.expanded) > div.isDomain.totalAllowed:not(.expandException) > span:first-of-type::before, #firewallContainer:not(.expanded) > div.isDomain.totalBlocked:not(.expandException) > span:first-of-type::before, #firewallContainer.expanded > div.isDomain.totalAllowed.expandException > span:first-of-type::before, #firewallContainer.expanded > div.isDomain.totalBlocked.expandException > span:first-of-type::before { box-sizing: border-box; content: ''; display: inline-block; filter: var(--bg-popup-cell-label-filter); height: 100%; left: 0; position: absolute; top: 0; width: 7px; } #firewallContainer > div.isRootContext > span:first-of-type::before { background-color: var(--fg-0-50); width: 14px !important; } #firewallContainer > div.allowed > span:first-of-type::before, #firewallContainer > div.isDomain.totalAllowed > span:first-of-type::before { background-color: var(--bg-popup-cell-allow-own); } #firewallContainer > div.blocked > span:first-of-type::before, #firewallContainer > div.isDomain.totalBlocked > span:first-of-type::before { background-color: var(--bg-popup-cell-block-own); } #firewallContainer > div.allowed.blocked > span:first-of-type::before, #firewallContainer > div.isDomain.totalAllowed.totalBlocked > span:first-of-type::before { background-color: var(--bg-popup-cell-label-mixed); } /* Rule cells */ body.advancedUser #firewallContainer > div > span.allowRule, #actionSelector > #dynaAllow { background-color: var(--bg-popup-cell-allow); } body.advancedUser #firewallContainer > div > span.blockRule, #actionSelector > #dynaBlock { background-color: var(--bg-popup-cell-block); } body.advancedUser #firewallContainer > div > span.noopRule, #actionSelector > #dynaNoop { background-color: var(--bg-popup-cell-noop); } body.advancedUser #firewallContainer > div > span.ownRule, #firewallContainer > div > span.ownRule { color: var(--default-surface); } body.advancedUser #firewallContainer > div > span.allowRule.ownRule, #actionSelector > #dynaAllow:hover { background-color: var(--bg-popup-cell-allow-own); } body.advancedUser #firewallContainer > div > span.blockRule.ownRule, #actionSelector > #dynaBlock:hover { background-color: var(--bg-popup-cell-block-own); } body.advancedUser #firewallContainer > div > span.noopRule.ownRule, #actionSelector > #dynaNoop:hover { background-color: var(--bg-popup-cell-noop-own); } #actionSelector { box-sizing: border-box; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; } #actionSelector > span { display: inline-block; height: 100%; } #actionSelector > #dynaAllow { width: 33%; } #actionSelector > #dynaNoop { width: 33.5%; } #actionSelector > #dynaBlock { width: 33.5%; } #actionSelector > #dynaCounts { align-items: center; background-color: transparent; display: inline-flex; height: 100%; justify-content: space-between; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; } #rulesetTools { background-color: transparent; border: 0; display: none; left: 4px; padding: 0; position: fixed; top: 4px; } #rulesetTools > span { background-color: var(--bg-transient-notice); border: 1px solid #ddc; border-radius: 4px; cursor: pointer; display: inline-block; fill: var(--fg-0-50); font-size: 1.8em; line-height: 1.0; margin: 0; margin-right: 0.1em; padding: 0.2em 0.4em; text-align: center; width: 1em; } #firewallContainer.dirty ~ #rulesetTools { display: block; } #firewallContainer.dirty ~ #rulesetTools > span:hover { fill: inherit; } body.responsive { overflow-y: auto; width: auto; } body.responsive #panes { flex-wrap: wrap; } body.responsive #panes > div:nth-of-type(1) { flex-shrink: 0; flex-grow: 1; } body.responsive #panes > div:nth-of-type(2) { flex-grow: 8; flex-shrink: 1; width: auto; }