diff --git a/src/css/popup.css b/src/css/popup.css index eb604b3d2..e72f934a7 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -148,10 +148,13 @@ body.off #switch .fa-icon { color: #888; display: flex; fill: #888; - justify-content: space-evenly; + justify-content: center; margin: 0.8em 0 0 0; padding: 0.2em 0; } +body.responsive #extraTools { + justify-content: space-evenly; + } #extraTools > span { cursor: pointer; font-size: 1.2em; @@ -279,7 +282,7 @@ body[dir="rtl"] #tooltip { text-overflow: ellipsis; width: calc(100% - 4em); } -#firewallContainer > div.isDomain > span.isIDN:first-of-type > sup:before { +#firewallContainer > div.isDomain > span.isIDN:first-of-type > sup::before { color: #666; content: '\0416\2002'; font-size: 80%; @@ -303,12 +306,12 @@ body[dir="rtl"] #tooltip { #firewallContainer > div.isDomain > span:first-of-type { font-weight: bold; } -#firewallContainer > div:first-of-type > span:first-of-type:before { +#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 { +#firewallContainer.minimized > div:first-of-type > span:first-of-type::before { content: '+'; } #firewallContainer.minimized > div.isDomain > span:nth-of-type(3) { @@ -317,32 +320,32 @@ body[dir="rtl"] #tooltip { #firewallContainer.minimized > div.isDomain > span:nth-of-type(4) { display: inline-block; } -#firewallContainer > div > span[data-acount]:before, -#firewallContainer > div > span[data-bcount]:after { +#firewallContainer > div > span[data-acount]::before, +#firewallContainer > div > span[data-bcount]::after { position: absolute; } -#firewallContainer > div > span[data-acount]:before { +#firewallContainer > div > span[data-acount]::before { left: 0.1em; } -#firewallContainer > div > span[data-acount="1"]:before { +#firewallContainer > div > span[data-acount="1"]::before { content: '+'; } -#firewallContainer > div > span[data-acount="2"]:before { +#firewallContainer > div > span[data-acount="2"]::before { content: '++'; } -#firewallContainer > div > span[data-acount="3"]:before { +#firewallContainer > div > span[data-acount="3"]::before { content: '+++'; } -#firewallContainer > div > span[data-bcount]:after { +#firewallContainer > div > span[data-bcount]::after { right: 0.1em; } -#firewallContainer > div > span[data-bcount="1"]:after { +#firewallContainer > div > span[data-bcount="1"]::after { content: '\2212'; } -#firewallContainer > div > span[data-bcount="2"]:after { +#firewallContainer > div > span[data-bcount="2"]::after { content: '\2212\2212'; } -#firewallContainer > div > span[data-bcount="3"]:after { +#firewallContainer > div > span[data-bcount="3"]::after { content: '\2212\2212\2212'; } @@ -362,10 +365,10 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span { /** 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 { +#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; @@ -379,24 +382,24 @@ body.advancedUser #firewallContainer > div > span:first-of-type ~ span { 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 { +#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 { +#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 { +#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 { +#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 { +#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 */