body { background-color: white; border: 0; float: left; margin: 0; opacity: 1; overflow: hidden; padding: 0; white-space: nowrap; } body.fullsize { overflow: auto; } body.mobile { overflow-y: auto; } /** https://github.com/gorhill/uBlock/issues/83 .portrait = portrait mode = width is constrained = optimize layout accordingly. */ body.portrait { width: 100%; } h2 { background-color: #eee; border: 0; color: #666; cursor: pointer; font-size: 100%; font-weight: normal; padding: 0.2em; text-align: center; } a { color: inherit; text-decoration: none; } :focus { outline: 0; } #appinfo { background-color: #444; border: 0; color: #bbb; display: block; font-size: 85%; line-height: 1.2; margin: 0; padding: calc(0.1em + 1px) 0; position: relative; text-align: center; } #version { font-size: 90%; font-weight: normal; } body[dir="ltr"] #panes { direction: rtl; } body[dir="rtl"] #panes { direction: ltr; } body, #panes { text-align: right; /* this helps the popup render better at "intermediate" widths */ } #panes > div { display: inline-block; position: relative; vertical-align: top; } body.portrait #panes > div { display: block; width: 100%; } body[dir="ltr"] #panes > div { direction: ltr; } body[dir="rtl"] #panes > div { direction: rtl; } #panes > div:nth-of-type(2) { 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; } /** Scroll bar to the right. Firefox bug: when popup is rendered inside hamburger menu panel, Firefox is unable to render the scroll bar to the left. Maybe ? */ body[dir="rtl"] #panes > div:nth-of-type(2), body.portrait[dir="ltr"] #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 { text-align: center; white-space: nowrap; } .fa { font-size: 120%; } #switch { margin: 8px 0; } #switch .fa { color: #0046ff; cursor: pointer; font-size: 700%; margin: 0; } #switch .fa:hover { opacity: 0.9; } body.off #switch .fa { color: #ccc; } #basicTools { margin: 0.8em 0 0.4em 0; } .tool:first-child { margin-left: 0; } .tool { color: #aaa; cursor: pointer; visibility: hidden; margin-left: 0.4em; min-width: 1em; padding: 0 0.2em; unicode-bidi: embed; } .tool.enabled { visibility: visible; } .tool.enabled:hover { color: #444; } #page-blocked { font-size: 1.25em; } .statName { color: #888; font-size: 85%; margin: 0.8em 0.2em 0.4em 0.2em; text-align: center; } .statValue { margin: 0; text-align: center; } #extraTools { background-color: #eee; border: 0; color: #aaa; margin: 0.8em 0 0 0; padding: 4px 0; text-align: center; } #extraTools > span { cursor: pointer; font-size: 1.2em; margin: 0 0.4em; position: relative; } #extraTools > span > span.badge { color: #222; bottom: -1px; font: x-small sans-serif; position: absolute; } body[dir="ltr"] #extraTools > span > span.badge { left: 100%; } body[dir="rtl"] #extraTools > span > span.badge { right: 100%; } #extraTools > span.on > span:last-of-type { color: #e00; font-size: 1.1em; left: 0; position: absolute; text-align: center; top: 0; width: 100%; } #extraTools > span.on > span:last-of-type:after { content: '\2715'; } #extraTools > span:hover { color: #444; } #refresh { background-color: #ffe; border: 1px solid #ddc; border-radius: 4px; color: #888; cursor: pointer; display: none; font-size: 3.5em; left: 4px; line-height: 1; padding: 4px 8px; position: absolute; right: 4px; text-align: center; } body.dirty #refresh { display: block; } body.dirty #refresh:hover { color: black; } #tooltip { background-color: #ffffee; border: 1px solid gray; border-radius: 3px; box-shadow: 1px 1px 3px gray; box-sizing: border-box; color: black; 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%; margin: 0; padding: 0; text-align: right; } #firewallContainer > div { background-color: #e6e6e6; border: 0; direction: ltr; margin: 0; padding: 0; } #firewallContainer > div:hover { background-color: #f0f0f0; } #firewallContainer > div:first-child ~ div:not([class]) { display: none; } #firewallContainer.minimized > div.isSubDomain { display: none; } #firewallContainer > div > span { background-color: transparent; border: none; border-bottom: 1px solid white; box-sizing: border-box; -moz-box-sizing: border-box; color: #000; display: inline-block; height: 1.9em; line-height: 1.9; overflow: hidden; position: relative; vertical-align: top; } #firewallContainer > div:first-of-type > span:first-of-type { cursor: pointer; } #firewallContainer > div > span:first-of-type { padding-right: 2px; position: relative; text-overflow: ellipsis; width: calc(100% - 4em); } #firewallContainer > div.isDomain > span.isIDN:first-of-type > sup:before { color: #666; content: '\0416\2002'; font-size: 80%; font-weight: normal; } #firewallContainer > div > span:nth-of-type(2) { display: none; } #firewallContainer > div > span:first-of-type ~ span { border-left: 1px solid white; width: 4em; } #firewallContainer > div > span:nth-of-type(3), #firewallContainer > div > span:nth-of-type(4) { color: #444; text-align: center; } #firewallContainer > div > span:nth-of-type(4) { display: none; } #firewallContainer > div.isDomain > span:first-of-type { font-weight: bold; } #firewallContainer > div:first-of-type > span:first-of-type:before { color: #aaa; content: '\2012'; padding-right: 0.25em; } #firewallContainer.minimized > div:first-of-type > span:first-of-type:before { content: '+'; } #firewallContainer.minimized > div.isDomain > span:nth-of-type(3) { display: none; } #firewallContainer.minimized > div.isDomain > span:nth-of-type(4) { display: inline-block; } #firewallContainer > div > span[data-acount]:before, #firewallContainer > div > span[data-bcount]:after { position: absolute; } #firewallContainer > div > span[data-acount]:before { left: 0.1em; } #firewallContainer > div > span[data-acount="1"]:before { content: '+'; } #firewallContainer > div > span[data-acount="2"]:before { content: '++'; } #firewallContainer > div > span[data-acount="3"]:before { content: '+++'; } #firewallContainer > div > span[data-bcount]:after { right: 0.1em; } #firewallContainer > div > span[data-bcount="1"]:after { content: '\2212'; } #firewallContainer > div > span[data-bcount="2"]:after { content: '\2212\2212'; } #firewallContainer > div > span[data-bcount="3"]: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-block; } body.advancedUser #firewallContainer > div:first-child ~ div:not([class]) { display: block; } body.advancedUser #firewallContainer > div > span:first-of-type ~ span { cursor: pointer; } /** Small coloured label at the left of a row */ #firewallContainer > div.allowed > span:first-of-type:before, #firewallContainer > div.blocked > span:first-of-type:before, #firewallContainer.minimized > div.isDomain.totalAllowed > span:first-of-type:before, #firewallContainer.minimized > div.isDomain.totalBlocked > span:first-of-type:before { box-sizing: border-box; content: ''; display: inline-block; height: 100%; left: 0; opacity: 0.4; position: absolute; width: 7px; } /** Source for color-blind color scheme from https://github.com/WyohKnott: https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219 */ #firewallContainer > div.allowed > span:first-of-type:before, #firewallContainer.minimized > div.isDomain.totalAllowed > span:first-of-type:before { background-color: rgb(0, 160, 0); } #firewallContainer.colorBlind > div.allowed > span:first-of-type:before, #firewallContainer.colorBlind.minimized > div.isDomain.totalAllowed > span:first-of-type:before { background-color: rgb(255, 194, 57); } #firewallContainer > div.blocked > span:first-of-type:before, #firewallContainer.minimized > div.isDomain.totalBlocked > span:first-of-type:before { background-color: rgb(192, 0, 0); } #firewallContainer.colorBlind > div.blocked > span:first-of-type:before, #firewallContainer.colorBlind.minimized > div.isDomain.totalBlocked > span:first-of-type:before { background-color: rgb(0, 19, 110); } #firewallContainer > div.allowed.blocked > span:first-of-type:before, #firewallContainer.minimized > div.isDomain.totalAllowed.totalBlocked > span:first-of-type:before { background-color: rgb(192, 160, 0); } /* Rule cells */ body.advancedUser #firewallContainer > div > span.allowRule { background-color: rgba(0, 160, 0, 0.3); } body.advancedUser #firewallContainer.colorBlind > div > span.allowRule { background-color: rgba(255, 194, 57, 0.4); } body.advancedUser #firewallContainer > div > span.blockRule { background-color: rgba(192, 0, 0, 0.3); } body.advancedUser #firewallContainer.colorBlind > div > span.blockRule { background-color: rgba(0, 19, 110, 0.4); } body.advancedUser #firewallContainer > div > span.noopRule { background-color: rgba(108, 108, 108, 0.3); } body.advancedUser #firewallContainer.colorBlind > div > span.noopRule { background-color: rgba(96, 96, 96, 0.4); } body.advancedUser #firewallContainer > div > span.ownRule { color: white; } body.advancedUser #firewallContainer > div > span.allowRule.ownRule { background-color: rgba(0, 160, 0, 1); } body.advancedUser #firewallContainer.colorBlind > div > span.allowRule.ownRule { background-color: rgba(255, 194, 57, 1); } body.advancedUser #firewallContainer > div > span.blockRule.ownRule { background-color: rgba(192, 0, 0, 1); } body.advancedUser #firewallContainer.colorBlind > div > span.blockRule.ownRule { background-color: rgba(0, 19, 110, 1); } body.advancedUser #firewallContainer > div > span.noopRule.ownRule { background-color: rgba(108, 108, 108, 1); } #actionSelector { bottom: 0; left: 0; position: absolute; top: 0; width: 4em; z-index: 1; } #actionSelector > span { display: inline-block; height: 100%; opacity: 0.2; } #actionSelector > span:first-of-type { width: 33%; } #actionSelector > span:nth-of-type(2) { width: 33.5%; } #actionSelector > span:nth-of-type(3) { width: 33.5%; } #actionSelector > span:hover { opacity: 0.75; } #actionSelector > span:first-of-type { background-color: rgb(0, 160, 0); } #actionSelector.colorBlind > span:first-of-type { background-color: rgb(255, 194, 57); } #actionSelector > span:nth-of-type(2) { background-color: rgb(108, 108, 108); } #actionSelector > span:nth-of-type(3) { background-color: rgb(192, 0, 0); } #actionSelector.colorBlind > span:nth-of-type(3) { background-color: rgb(0, 19, 110); } #rulesetTools { background-color: transparent; border: 0; color: #888; display: none; left: 4px; padding: 0; position: fixed; top: 4px; } #rulesetTools > span { background-color: #ffe; border: 1px solid #ddc; border-radius: 4px; cursor: pointer; display: inline-block; 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 { color: black; }