Unified Diff: skin/desktop-options.css
Issue 29674584:
Issue 5549 - Implement missing error handlings for custom filter lists (Closed)
Patch Set: fixed linting typos
Created Jan. 23, 2018, 10:46 a.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« desktop-options.js ('K')
|
« locale/en_US/desktop-options.json ('k')
|
no next file »
|
no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: skin/desktop-options.css |
| =================================================================== |
| --- a/skin/desktop-options.css |
| +++ b/skin/desktop-options.css |
| @@ -15,1506 +15,1566 @@ |
| * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>. |
| */ |
| -@font-face |
| -{ |
| - font-family: "Source Sans Pro"; |
| - src: url(fonts/SourceSansPro-Light.woff); |
| - /* local("Ø") forces using no local font called Source Sans Pro */ |
| - src: local("Ø"), url(fonts/SourceSansPro-Light.woff) format("woff"); |
| - font-weight: 300; |
| - font-style: normal; |
| -} |
| - |
| -@font-face |
| -{ |
| - font-family: "Source Sans Pro"; |
| - src: url(fonts/SourceSansPro-Regular.woff); |
| - /* local("Ø") forces using no local font called Source Sans Pro */ |
| - src: local("Ø"), url(fonts/SourceSansPro-Regular.woff) format("woff"); |
| - font-style: normal; |
| -} |
| - |
| -@font-face |
| -{ |
| - font-family: "Source Sans Pro"; |
| - src: url(fonts/SourceSansPro-bold.woff); |
| - /* local("Ø") forces using no local font called Source Sans Pro */ |
| - src: local("Ø"), url(fonts/SourceSansPro-bold.woff) format("woff"); |
| - font-weight: 700; |
| - font-style: normal; |
| -} |
| - |
| -html |
| -{ |
| - font-size: 16px; |
| -} |
| - |
| -body |
| -{ |
| - background-color: #F3F3F3; |
| - display: flex; |
| - justify-content: center; |
| - /* We force vertical scrollbars to keep the content centered */ |
| - overflow-y: scroll; |
| - margin: 1rem 0.3rem; |
| - font-family: "Source Sans Pro", sans-serif; |
| - font-size: 1rem; |
| - line-height: 1.3rem; |
| - color: #4A4A4A; |
| -} |
| - |
| -h1 |
| -{ |
| - font-size: 3rem; |
| - font-weight: 300; |
| - line-height: 3rem; |
| -} |
| - |
| -h2 |
| -{ |
| - font-size: 1.125rem; |
| - font-weight: 700; |
| -} |
| - |
| -a |
| -{ |
| - color: #077CA6; |
| -} |
| - |
| -a:hover |
| -{ |
| - color: #5CBCE1; |
| -} |
| - |
| -ul |
| -{ |
| - margin: 0rem; |
| -} |
| - |
| -main h3 |
| -{ |
| - margin-top: 0rem; |
| - margin-bottom: 0.5rem; |
| -} |
| - |
| -[aria-hidden="true"] |
| -{ |
| - display: none !important; |
| -} |
| - |
| -input[type="text"], |
| -input[type="url"], |
| -textarea, |
| -main |
| -{ |
| - -webkit-box-sizing: border-box; |
| - -moz-box-sizing: border-box; |
| - box-sizing: border-box; |
| -} |
| - |
| -/* |
| - Normalization |
| - */ |
| - |
| -input, |
| -button |
| -{ |
| - font-family: inherit; |
| -} |
| - |
| -button |
| -{ |
| - border-radius: 0rem; |
| -} |
| - |
| -/* |
| - Buttons and links |
| - */ |
| - |
| -button, |
| -.button |
| -{ |
| - display: block; |
| - padding: 0.6rem 0.8rem; |
| - background-color: transparent; |
| - font-size: 1rem; |
| - font-weight: 700; |
| - text-decoration: none; |
| - text-transform: uppercase; |
| - cursor: pointer; |
| -} |
| - |
| -/* Ignore .icon to avoid overriding "specific" (primary, secondary) styles */ |
| -button.primary:not(.icon), |
| -.button.primary:not(.icon) |
| -{ |
| - border: 0px; |
| - color: #FFF; |
| - background-color: #077CA6; |
| -} |
| - |
| -button.primary:not([disabled]):not(.icon):hover, |
| -.button.primary:not(.icon):hover |
| -{ |
| - box-shadow: inset 0 0 0 3px #005D80; |
| -} |
| - |
| -button.primary[disabled]:not(.icon) |
| -{ |
| - background-color: #5CBCE1; |
| -} |
| - |
| -button.secondary:not(.icon), |
| -.button.secondary:not(.icon) |
| -{ |
| - border: 2px solid #077CA6; |
| - color: #077CA6; |
| -} |
| - |
| -button.secondary:not(.icon):hover, |
| -.button.secondary:not(.icon):hover |
| -{ |
| - box-shadow: inset 0 0 0 1px #077CA6; |
| -} |
| - |
| -button.link, |
| -button.list |
| -{ |
| - color: #077CA6; |
| -} |
| - |
| -button.link |
| -{ |
| - border: 0px; |
| - background-color: transparent; |
| - font-weight: 400; |
| - font-family: inherit; |
| - text-transform: none; |
| - text-decoration: underline; |
| - padding: 0.2rem; |
| -} |
| - |
| -button.link:hover |
| -{ |
| - color: #5CBCE1; |
| -} |
| - |
| -button.list |
| -{ |
| - border-style: solid; |
| - border-color: #CDCDCD; |
| - border-width: 1px; |
| - width: 100%; |
| - background-color: #E1F2FA; |
| - text-align: initial; |
| -} |
| - |
| -button.list:hover |
| -{ |
| - box-shadow: inset 0 0 0 3px #077CA6; |
| - border-color: #077CA6; |
| -} |
| - |
| -.side-controls:not(.wrap) |
| -{ |
| - margin: 0.8rem 0rem; |
| - display: flex; |
| - justify-content: flex-end; |
| -} |
| - |
| -.side-controls button |
| -{ |
| - margin: 0rem; |
| - -moz-margin-start: 1rem; |
| - -webkit-margin-start: 1rem; |
| -} |
| - |
| -.side-controls.wrap button |
| -{ |
| - margin: 0.6rem 0rem; |
| - -moz-margin-start: auto; |
| - -webkit-margin-start: auto; |
| -} |
| - |
| -/* |
| - icons |
| - */ |
| - |
| -.icon |
| -{ |
| - border: 0px; |
| - padding: 0px; |
| - background-color: transparent; |
| -} |
| - |
| -.icon:hover |
| -{ |
| - box-shadow: none; |
| -} |
| - |
| -.icon::before |
| -{ |
| - content: ""; |
| - display: block; |
| - border: 0.2rem solid transparent; |
| - background-repeat: no-repeat; |
| -} |
| - |
| -button[role="checkbox"].icon::before |
| -{ |
| - width: 1.2rem; |
| - height: 1.2rem; |
| - padding: 0px; |
| -} |
| - |
| -button[role="checkbox"][disabled].icon:not(.toggle)::before, |
| -button[role="checkbox"][aria-disabled="true"].icon:not(.toggle)::before |
| -{ |
| - border: 0rem; |
| - margin: 0.2rem; |
| - border-radius: 2px; |
| - background-color: #ccc; |
| -} |
| - |
| -button[role="checkbox"].icon:not(.toggle)::before |
| -{ |
| - /* Using ?query as a workaround to chromium bug #643716 */ |
| - background-image: url(icons/checkbox.svg?off#off); |
| -} |
| - |
| -button[role="checkbox"][aria-checked="true"].icon:not(.toggle)::before |
| -{ |
| - background-image: url(icons/checkbox.svg?on#on); |
| -} |
| - |
| -button[role="checkbox"].icon.toggle::before |
| -{ |
| - background-image: url(icons/toggle.svg?on#on); |
| -} |
| - |
| -button[role="checkbox"][aria-checked="false"].icon.toggle::before |
| -{ |
| - background-image: url(icons/toggle.svg?off#off); |
| -} |
| - |
| -button[role="checkbox"].icon.toggle::before |
| -{ |
| - width: 1.9rem; |
| - height: 1rem; |
| -} |
| - |
| -button[role="checkbox"][disabled].icon.toggle::before |
| -{ |
| - background: none; |
| -} |
| - |
| -.icon.delete::before |
| -{ |
| - background-image: url(icons/trash.svg?default#default); |
| -} |
| - |
| -.icon.delete:hover::before |
| -{ |
| - background-image: url(icons/trash.svg?hover#hover); |
| -} |
| - |
| -.icon.gear::before |
| -{ |
| - background-image: url(icons/gear.svg?default#default); |
| -} |
| - |
| -.icon.gear:hover::before |
| -{ |
| - background-image: url(icons/gear.svg?hover#hover); |
| -} |
| - |
| -.icon.gear::before, |
| -.icon.delete::before |
| -{ |
| - height: 1rem; |
| - width: 1rem; |
| -} |
| - |
| -[data-validation] .floating-input input:focus:invalid ~ .icon.attention::before |
| -{ |
| - background-image: url(icons/attention.svg); |
| -} |
| - |
| -[data-validation] .floating-input input:valid ~ .icon.attention::before |
| -{ |
| - top: 0.5rem; |
| - background-image: url(icons/checkmark.svg?approved#approved); |
| -} |
| - |
| -.context-menu .icon.update-subscription::before |
| -{ |
| - background-image: url(icons/reload.svg); |
| -} |
| - |
| -.context-menu .icon.website::before |
| -{ |
| - background-image: url(icons/globe.svg); |
| -} |
| - |
| -.context-menu .icon.source::before |
| -{ |
| - background-image: url(icons/code.svg); |
| -} |
| - |
| -.context-menu .icon.delete::before |
| -{ |
| - background-image: url(icons/trash.svg?default#default); |
| -} |
| - |
| -.close.icon::before |
| -{ |
| - height: 1rem; |
| - width: 1rem; |
| -} |
| - |
| -.icon.close.primary::before |
| -{ |
| - background-image: url(icons/delete.svg?primary#primary); |
| -} |
| - |
| -.icon.close.primary:hover::before |
| -{ |
| - background-image: url(icons/delete.svg?primary-hover#primary-hover); |
| -} |
| - |
| -.icon.close.secondary::before |
| -{ |
| - background-image: url(icons/delete.svg?secondary#secondary); |
| -} |
| - |
| -.icon.close.tertiary::before |
| -{ |
| - background-image: url(icons/delete.svg?tertiary#tertiary); |
| -} |
| - |
| -.icon.close.secondary:hover::before |
| -{ |
| - background-image: url(icons/delete.svg?secondary-hover#secondary-hover); |
| -} |
| - |
| -.icon.close.tertiary:hover::before |
| -{ |
| - background-image: url(icons/delete.svg?tertiary-hover#tertiary-hover); |
| -} |
| - |
| -.tooltip::before |
| -{ |
| - width: 1.1rem; |
| - height: 1.1rem; |
| -} |
| - |
| -.icon.tooltip::before |
| -{ |
| - background-image: url(icons/tooltip.svg); |
| -} |
| - |
| -#dialog .table.list li button.icon::before |
| -{ |
| - width: 1.3rem; |
| - height: 1.3rem; |
| - margin: 0rem; |
| - border: 0rem; |
| - background-image: none; |
| -} |
| - |
| -#dialog .table.list li button[aria-checked="true"].icon::before |
| -{ |
| - background-image: url(icons/checkmark.svg?default#default); |
| -} |
| - |
| -#social ul li .icon::before |
| -{ |
| - margin: 0em auto; |
| - width: 2.5rem; |
| - height: 2.5rem; |
| -} |
| - |
| -.icon#twitter::before |
| -{ |
| - background-image: url("social/twitter.svg"); |
| -} |
| - |
| -.icon#facebook::before |
| -{ |
| - background-image: url("social/facebook.svg"); |
| -} |
| - |
| -.icon#google-plus::before |
| -{ |
| - background-image: url("social/googleplus.svg"); |
| -} |
| - |
| -/* |
| - Forms |
| - */ |
| - |
| -.floating-input |
| -{ |
| - position: relative; |
| - padding-top: 0.7rem; |
| - margin: 1.8rem 0rem 0.5rem 0rem; |
| -} |
| - |
| -.floating-input input |
| -{ |
| - border-color: #CDCDCD; |
| - border-width: 0px 0px 1px 0px; |
| - outline: none; |
| - font-size: 1rem; |
| - padding: 5px; |
| - width: 100%; |
| -} |
| - |
| -.floating-input input:placeholder-shown ~ label, |
| -.floating-input input + label, |
| -.floating-input input:focus + label |
| -{ |
| - position: absolute; |
| - top: 0.9rem; |
| - left: 0.3rem; |
| - font-size: 1rem; |
| -} |
| - |
| -.floating-input input + label, |
| -.floating-input input:focus + label |
| -{ |
| - top: -0.5rem; |
| - font-size: 0.9rem; |
| -} |
| - |
| -html[dir="rtl"] .floating-input input:placeholder-shown ~ label, |
| -html[dir="rtl"] .floating-input input ~ label, |
| -html[dir="rtl"] .floating-input input:focus ~ label |
| -{ |
| - right: 0.3rem; |
| - left: auto; |
| -} |
| - |
| -[data-validation] .floating-input input:focus:invalid |
| -{ |
| - border-color: #C11D27; |
| -} |
| - |
| -[data-validation] .floating-input input:focus:invalid ~ .attention::before, |
| -[data-validation] .floating-input input:valid ~ .attention::before |
| -{ |
| - position: absolute; |
| - margin: 0.3rem; |
| - height: 1.5rem; |
| - width: 1.5rem; |
| - top: 0.3rem; |
| - right: 0rem; |
| -} |
| - |
| -html[dir="rtl"] [data-validation] .floating-input input:focus:invalid ~ .attention::before, |
| -html[dir="rtl"] [data-validation] .floating-input input:valid ~ .attention::before |
| -{ |
| - left: 0rem; |
| - right: auto; |
| -} |
| - |
| -[data-validation] .floating-input input ~ .error-msg |
| -{ |
| - margin-top: 0.5rem; |
| - color: #C11D27; |
| - display: block; |
| - visibility: hidden; |
| -} |
| - |
| -[data-validation] .floating-input input:focus:invalid ~ .error-msg |
| -{ |
| - visibility: visible; |
| -} |
| - |
| -/* |
| - Sidebar |
| - */ |
| - |
| -#sidebar, |
| -#sidebar .fixed, |
| -[role="tablist"] |
| -{ |
| - width: 14.3rem; |
| -} |
| - |
| -#sidebar |
| -{ |
| - flex-shrink: 0; |
| -} |
| - |
| -#sidebar .fixed |
| -{ |
| - top: 1.2rem; |
| - bottom: 0rem; |
| - height: auto; |
| -} |
| - |
| -#sidebar header |
| -{ |
| - text-align: right; |
| - margin-right: 2rem; |
| -} |
| - |
| -html[dir="rtl"] #sidebar header |
| -{ |
| - margin-left: 2rem; |
| -} |
| - |
| -#sidebar header h1 |
| -{ |
| - margin: 0rem; |
| - font-size: 1.5rem; |
| - line-height: 2rem; |
| -} |
| - |
| -#sidebar header h1 strong |
| -{ |
| - font-weight: 700; |
| -} |
| - |
| -#sidebar header p |
| -{ |
| - margin: 0rem; |
| - font-size: 1.8rem; |
| - line-height: 2.6rem; |
| -} |
| - |
| -html[dir="rtl"] #sidebar header |
| -{ |
| - text-align: left; |
| -} |
| - |
| -#sidebar-logo |
| -{ |
| - width: 3rem; |
| - margin-bottom: 0.7rem; |
| -} |
| - |
| -#sidebar nav, |
| -#sidebar footer |
| -{ |
| - margin: 1.4rem 0rem; |
| -} |
| - |
| -[role="tablist"] |
| -{ |
| - list-style: none; |
| - margin: 0rem; |
| - padding: 0rem; |
| - position: relative; |
| - font-size: 1rem; |
| -} |
| - |
| -[role="tablist"] li a |
| -{ |
| - display: flex; |
| - margin-top: -1px; |
| - padding: 1rem 0.8rem; |
| - -moz-margin-end: -1px; |
| - -webkit-margin-end: -1px; |
| - -moz-margin-start: -1px; |
| - -webkit-margin-start: -1px; |
| - border-color: #CDCDCD transparent; |
| - border-style: solid; |
| - border-width: 1px; |
| - text-decoration: none; |
| - color: inherit; |
| - cursor: pointer; |
| -} |
| - |
| -li a[role="tab"][aria-selected] |
| -{ |
| - -moz-border-start-color: #CDCDCD; |
| - -webkit-border-start-color: #CDCDCD; |
| - font-weight: 700; |
| - background-color: #FFF; |
| -} |
| - |
| -#sidebar footer |
| -{ |
| - width: 100%; |
| -} |
| - |
| -#sidebar footer p |
| -{ |
| - display: flex; |
| - justify-content: center; |
| - margin: 1rem 0rem; |
| -} |
| - |
| -/* This is a stopgap solution of footer overlapping tabs on low resolutions */ |
| -@media (min-height: 37rem) |
| -{ |
| - #sidebar .fixed |
| - { |
| - position: fixed; |
| - } |
| - |
| - #sidebar footer |
| - { |
| - bottom: 0px; |
| - position: absolute; |
| - } |
| -} |
| - |
| -/* |
| - Main content |
| - */ |
| - |
| -body[data-tab|="general"] #content-general, |
| -body[data-tab|="advanced"] #content-advanced, |
| -body[data-tab|="whitelist"] #content-whitelist, |
| -body[data-tab|="help"] #content-help |
| -{ |
| - display: block; |
| -} |
| - |
| -main |
| -{ |
| - background-color: #FFFFFF; |
| - border: 1px solid #CDCDCD; |
| - width: 46.3rem; |
| - padding: 0px 0rem 1.4rem 0rem; |
| -} |
| - |
| -main > div |
| -{ |
| - display: none; |
| -} |
| - |
| -main p |
| -{ |
| - margin: 0.8rem 0rem; |
| -} |
| - |
| -/* |
| - Sections |
| - */ |
| - |
| -[role="tabpanel"] > section, |
| -[role="tabpanel"] > .section |
| -{ |
| - padding: 1.4rem 2rem; |
| - border-top: 1px solid #CDCDCD; |
| -} |
| - |
| -[role="tabpanel"] > header h1, |
| -[role="tabpanel"] > header p |
| -{ |
| - padding: 0rem 2rem; |
| - margin: 1.4rem 0rem; |
| -} |
| - |
| -section h2, |
| -.section h2 |
| -{ |
| - margin: 0rem; |
| -} |
| - |
| -section h2 |
| -{ |
| - text-transform: uppercase; |
| -} |
| - |
| -section, |
| -.section |
| -{ |
| - clear: both; |
| -} |
| - |
| -section.cols |
| -{ |
| - display: flex; |
| -} |
| - |
| -section.cols > *:first-child |
| -{ |
| - flex: 1; |
| - -moz-margin-end: 2rem; |
| - -webkit-margin-end: 2rem; |
| -} |
| - |
| -section.cols > *:last-child |
| -{ |
| - flex: 3; |
| -} |
| - |
| -/* |
| - Acceptable ads |
| + @font-face |
|
saroyanm
2018/01/23 15:26:06
Any Idea what causes this diff showing change on e
a.giammarchi
2018/01/23 15:43:19
Visual Studio Code sometimes is very dumb and caus
|
| + { |
| + font-family: "Source Sans Pro"; |
| + src: url(fonts/SourceSansPro-Light.woff); |
| + /* local("Ø") forces using no local font called Source Sans Pro */ |
| + src: local("Ø"), url(fonts/SourceSansPro-Light.woff) format("woff"); |
| + font-weight: 300; |
| + font-style: normal; |
| + } |
| + |
| + @font-face |
| + { |
| + font-family: "Source Sans Pro"; |
| + src: url(fonts/SourceSansPro-Regular.woff); |
| + /* local("Ø") forces using no local font called Source Sans Pro */ |
| + src: local("Ø"), url(fonts/SourceSansPro-Regular.woff) format("woff"); |
| + font-style: normal; |
| + } |
| + |
| + @font-face |
| + { |
| + font-family: "Source Sans Pro"; |
| + src: url(fonts/SourceSansPro-bold.woff); |
| + /* local("Ø") forces using no local font called Source Sans Pro */ |
| + src: local("Ø"), url(fonts/SourceSansPro-bold.woff) format("woff"); |
| + font-weight: 700; |
| + font-style: normal; |
| + } |
| + |
| + html |
| + { |
| + font-size: 16px; |
| + } |
| + |
| + body |
| + { |
| + background-color: #F3F3F3; |
| + display: flex; |
| + justify-content: center; |
| + /* We force vertical scrollbars to keep the content centered */ |
| + overflow-y: scroll; |
| + margin: 1rem 0.3rem; |
| + font-family: "Source Sans Pro", sans-serif; |
| + font-size: 1rem; |
| + line-height: 1.3rem; |
| + color: #4A4A4A; |
| + } |
| + |
| + h1 |
| + { |
| + font-size: 3rem; |
| + font-weight: 300; |
| + line-height: 3rem; |
| + } |
| + |
| + h2 |
| + { |
| + font-size: 1.125rem; |
| + font-weight: 700; |
| + } |
| + |
| + a |
| + { |
| + color: #077CA6; |
| + } |
| + |
| + a:hover |
| + { |
| + color: #5CBCE1; |
| + } |
| + |
| + ul |
| + { |
| + margin: 0rem; |
| + } |
| + |
| + main h3 |
| + { |
| + margin-top: 0rem; |
| + margin-bottom: 0.5rem; |
| + } |
| + |
| + [aria-hidden="true"] |
| + { |
| + display: none !important; |
| + } |
| + |
| + input[type="text"], |
| + input[type="url"], |
| + textarea, |
| + main |
| + { |
| + -webkit-box-sizing: border-box; |
| + -moz-box-sizing: border-box; |
| + box-sizing: border-box; |
| + } |
| + |
| + /* |
| + Normalization |
| + */ |
| + |
| + input, |
| + button |
| + { |
| + font-family: inherit; |
| + } |
| + |
| + button |
| + { |
| + border-radius: 0rem; |
| + } |
| + |
| + /* |
| + Buttons and links |
| + */ |
| + |
| + button, |
| + .button |
| + { |
| + display: block; |
| + padding: 0.6rem 0.8rem; |
| + background-color: transparent; |
| + font-size: 1rem; |
| + font-weight: 700; |
| + text-decoration: none; |
| + text-transform: uppercase; |
| + cursor: pointer; |
| + } |
| + |
| + /* Ignore .icon to avoid overriding "specific" (primary, secondary) styles */ |
| + button.primary:not(.icon), |
| + .button.primary:not(.icon) |
| + { |
| + border: 0px; |
| + color: #FFF; |
| + background-color: #077CA6; |
| + } |
| + |
| + button.primary:not([disabled]):not(.icon):hover, |
| + .button.primary:not(.icon):hover |
| + { |
| + box-shadow: inset 0 0 0 3px #005D80; |
| + } |
| + |
| + button.primary[disabled]:not(.icon) |
| + { |
| + background-color: #5CBCE1; |
| + } |
| + |
| + button.secondary:not(.icon), |
| + .button.secondary:not(.icon) |
| + { |
| + border: 2px solid #077CA6; |
| + color: #077CA6; |
| + } |
| + |
| + button.secondary:not(.icon):hover, |
| + .button.secondary:not(.icon):hover |
| + { |
| + box-shadow: inset 0 0 0 1px #077CA6; |
| + } |
| + |
| + button.link, |
| + button.list |
| + { |
| + color: #077CA6; |
| + } |
| + |
| + button.link |
| + { |
| + border: 0px; |
| + background-color: transparent; |
| + font-weight: 400; |
| + font-family: inherit; |
| + text-transform: none; |
| + text-decoration: underline; |
| + padding: 0.2rem; |
| + } |
| + |
| + button.link:hover |
| + { |
| + color: #5CBCE1; |
| + } |
| + |
| + button.list |
| + { |
| + border-style: solid; |
| + border-color: #CDCDCD; |
| + border-width: 1px; |
| + width: 100%; |
| + background-color: #E1F2FA; |
| + text-align: initial; |
| + } |
| + |
| + button.list:hover |
| + { |
| + box-shadow: inset 0 0 0 3px #077CA6; |
| + border-color: #077CA6; |
| + } |
| + |
| + .side-controls:not(.wrap) |
| + { |
| + margin: 0.8rem 0rem; |
| + display: flex; |
| + align-self: center; |
| + justify-content: flex-end; |
| + } |
| + |
| + .side-controls button |
| + { |
| + margin: 0rem; |
| + -moz-margin-start: 1rem; |
| + -webkit-margin-start: 1rem; |
| + } |
| + |
| + .side-controls.wrap button |
| + { |
| + margin: 0.6rem 0rem; |
| + -moz-margin-start: auto; |
| + -webkit-margin-start: auto; |
| + } |
| + |
| + /* |
| + icons |
| + */ |
| + |
| + .icon |
| + { |
| + border: 0px; |
| + padding: 0px; |
| + background-color: transparent; |
| + } |
| + |
| + .icon:hover |
| + { |
| + box-shadow: none; |
| + } |
| + |
| + .icon::before |
| + { |
| + content: ""; |
| + display: block; |
| + border: 0.2rem solid transparent; |
| + background-repeat: no-repeat; |
| + } |
| + |
| + button[role="checkbox"].icon::before |
| + { |
| + width: 1.2rem; |
| + height: 1.2rem; |
| + padding: 0px; |
| + } |
| + |
| + button[role="checkbox"][disabled].icon:not(.toggle)::before, |
| + button[role="checkbox"][aria-disabled="true"].icon:not(.toggle)::before |
| + { |
| + border: 0rem; |
| + margin: 0.2rem; |
| + border-radius: 2px; |
| + background-color: #ccc; |
| + } |
| + |
| + button[role="checkbox"].icon:not(.toggle)::before |
| + { |
| + /* Using ?query as a workaround to chromium bug #643716 */ |
| + background-image: url(icons/checkbox.svg?off#off); |
| + } |
| + |
| + button[role="checkbox"][aria-checked="true"].icon:not(.toggle)::before |
| + { |
| + background-image: url(icons/checkbox.svg?on#on); |
| + } |
| + |
| + button[role="checkbox"].icon.toggle::before |
| + { |
| + background-image: url(icons/toggle.svg?on#on); |
| + } |
| + |
| + button[role="checkbox"][aria-checked="false"].icon.toggle::before |
| + { |
| + background-image: url(icons/toggle.svg?off#off); |
| + } |
| + |
| + button[role="checkbox"].icon.toggle::before |
| + { |
| + width: 1.9rem; |
| + height: 1rem; |
| + } |
| + |
| + button[role="checkbox"][disabled].icon.toggle::before |
| + { |
| + background: none; |
| + } |
| + |
| + .icon.delete::before |
| + { |
| + background-image: url(icons/trash.svg?default#default); |
| + } |
| + |
| + .icon.delete:hover::before |
| + { |
| + background-image: url(icons/trash.svg?hover#hover); |
| + } |
| + |
| + .icon.gear::before |
| + { |
| + background-image: url(icons/gear.svg?default#default); |
| + } |
| + |
| + .icon.gear:hover::before |
| + { |
| + background-image: url(icons/gear.svg?hover#hover); |
| + } |
| + |
| + .icon.gear::before, |
| + .icon.delete::before |
| + { |
| + height: 1rem; |
| + width: 1rem; |
| + } |
| + |
| + [data-validation] .floating-input input:focus:invalid ~ .icon.attention::before |
| + { |
| + background-image: url(icons/attention.svg); |
| + } |
| + |
| + [data-validation] .floating-input input:valid ~ .icon.attention::before |
| + { |
| + top: 0.5rem; |
| + background-image: url(icons/checkmark.svg?approved#approved); |
| + } |
| + |
| + .context-menu .icon.update-subscription::before |
| + { |
| + background-image: url(icons/reload.svg); |
| + } |
| + |
| + .context-menu .icon.website::before |
| + { |
| + background-image: url(icons/globe.svg); |
| + } |
| + |
| + .context-menu .icon.source::before |
| + { |
| + background-image: url(icons/code.svg); |
| + } |
| + |
| + .context-menu .icon.delete::before |
| + { |
| + background-image: url(icons/trash.svg?default#default); |
| + } |
| + |
| + .close.icon::before |
| + { |
| + height: 1rem; |
| + width: 1rem; |
| + } |
| + |
| + .icon.close.primary::before |
| + { |
| + background-image: url(icons/delete.svg?primary#primary); |
| + } |
| + |
| + .icon.close.primary:hover::before |
| + { |
| + background-image: url(icons/delete.svg?primary-hover#primary-hover); |
| + } |
| + |
| + .icon.close.secondary::before |
| + { |
| + background-image: url(icons/delete.svg?secondary#secondary); |
| + } |
| + |
| + .icon.close.tertiary::before |
| + { |
| + background-image: url(icons/delete.svg?tertiary#tertiary); |
| + } |
| + |
| + .icon.close.secondary:hover::before |
| + { |
| + background-image: url(icons/delete.svg?secondary-hover#secondary-hover); |
| + } |
| + |
| + .icon.close.tertiary:hover::before |
| + { |
| + background-image: url(icons/delete.svg?tertiary-hover#tertiary-hover); |
| + } |
| + |
| + .tooltip::before |
| + { |
| + width: 1.1rem; |
| + height: 1.1rem; |
| + } |
| + |
| + .icon.tooltip::before |
| + { |
| + background-image: url(icons/tooltip.svg); |
| + } |
| + |
| + #dialog .table.list li button.icon::before |
| + { |
| + width: 1.3rem; |
| + height: 1.3rem; |
| + margin: 0rem; |
| + border: 0rem; |
| + background-image: none; |
| + } |
| + |
| + #dialog .table.list li button[aria-checked="true"].icon::before |
| + { |
| + background-image: url(icons/checkmark.svg?default#default); |
| + } |
| + |
| + #social ul li .icon::before |
| + { |
| + margin: 0em auto; |
| + width: 2.5rem; |
| + height: 2.5rem; |
| + } |
| + |
| + .icon#twitter::before |
| + { |
| + background-image: url("social/twitter.svg"); |
| + } |
| + |
| + .icon#facebook::before |
| + { |
| + background-image: url("social/facebook.svg"); |
| + } |
| + |
| + .icon#google-plus::before |
| + { |
| + background-image: url("social/googleplus.svg"); |
| + } |
| + |
| + /* |
| + Forms |
| + */ |
| + |
| + .floating-input |
| + { |
| + position: relative; |
| + padding-top: 0.7rem; |
| + margin: 1.8rem 0rem 0.5rem 0rem; |
| + } |
| + |
| + .floating-input input |
| + { |
| + border-color: #CDCDCD; |
| + border-width: 0px 0px 1px 0px; |
| + outline: none; |
| + font-size: 1rem; |
| + padding: 5px; |
| + width: 100%; |
| + } |
| + |
| + .floating-input input:placeholder-shown ~ label, |
| + .floating-input input + label, |
| + .floating-input input:focus + label |
| + { |
| + position: absolute; |
| + top: 0.9rem; |
| + left: 0.3rem; |
| + font-size: 1rem; |
| + } |
| + |
| + .floating-input input + label, |
| + .floating-input input:focus + label |
| + { |
| + top: -0.5rem; |
| + font-size: 0.9rem; |
| + } |
| + |
| + html[dir="rtl"] .floating-input input:placeholder-shown ~ label, |
| + html[dir="rtl"] .floating-input input ~ label, |
| + html[dir="rtl"] .floating-input input:focus ~ label |
| + { |
| + right: 0.3rem; |
| + left: auto; |
| + } |
| + |
| + [data-validation] .floating-input input:focus:invalid |
| + { |
| + border-color: #C11D27; |
| + } |
| + |
| + [data-validation] .floating-input input:focus:invalid ~ .attention::before, |
| + [data-validation] .floating-input input:valid ~ .attention::before |
| + { |
| + position: absolute; |
| + margin: 0.3rem; |
| + height: 1.5rem; |
| + width: 1.5rem; |
| + top: 0.3rem; |
| + right: 0rem; |
| + } |
| + |
| + html[dir="rtl"] [data-validation] .floating-input input:focus:invalid ~ .attention::before, |
| + html[dir="rtl"] [data-validation] .floating-input input:valid ~ .attention::before |
| + { |
| + left: 0rem; |
| + right: auto; |
| + } |
| + |
| + [data-validation] .floating-input input ~ .error-msg |
| + { |
| + margin-top: 0.5rem; |
| + color: #C11D27; |
| + display: block; |
| + visibility: hidden; |
| + } |
| + |
| + [data-validation] .floating-input input:focus:invalid ~ .error-msg |
| + { |
| + visibility: visible; |
| + } |
| + |
| + /* |
| + Sidebar |
| + */ |
| + |
| + #sidebar, |
| + #sidebar .fixed, |
| + [role="tablist"] |
| + { |
| + width: 14.3rem; |
| + } |
| + |
| + #sidebar |
| + { |
| + flex-shrink: 0; |
| + } |
| + |
| + #sidebar .fixed |
| + { |
| + top: 1.2rem; |
| + bottom: 0rem; |
| + height: auto; |
| + } |
| + |
| + #sidebar header |
| + { |
| + text-align: right; |
| + margin-right: 2rem; |
| + } |
| + |
| + html[dir="rtl"] #sidebar header |
| + { |
| + margin-left: 2rem; |
| + } |
| + |
| + #sidebar header h1 |
| + { |
| + margin: 0rem; |
| + font-size: 1.5rem; |
| + line-height: 2rem; |
| + } |
| + |
| + #sidebar header h1 strong |
| + { |
| + font-weight: 700; |
| + } |
| + |
| + #sidebar header p |
| + { |
| + margin: 0rem; |
| + font-size: 1.8rem; |
| + line-height: 2.6rem; |
| + } |
| + |
| + html[dir="rtl"] #sidebar header |
| + { |
| + text-align: left; |
| + } |
| + |
| + #sidebar-logo |
| + { |
| + width: 3rem; |
| + margin-bottom: 0.7rem; |
| + } |
| + |
| + #sidebar nav, |
| + #sidebar footer |
| + { |
| + margin: 1.4rem 0rem; |
| + } |
| + |
| + [role="tablist"] |
| + { |
| + list-style: none; |
| + margin: 0rem; |
| + padding: 0rem; |
| + position: relative; |
| + font-size: 1rem; |
| + } |
| + |
| + [role="tablist"] li a |
| + { |
| + display: flex; |
| + margin-top: -1px; |
| + padding: 1rem 0.8rem; |
| + -moz-margin-end: -1px; |
| + -webkit-margin-end: -1px; |
| + -moz-margin-start: -1px; |
| + -webkit-margin-start: -1px; |
| + border-color: #CDCDCD transparent; |
| + border-style: solid; |
| + border-width: 1px; |
| + text-decoration: none; |
| + color: inherit; |
| + cursor: pointer; |
| + } |
| + |
| + li a[role="tab"][aria-selected] |
| + { |
| + -moz-border-start-color: #CDCDCD; |
| + -webkit-border-start-color: #CDCDCD; |
| + font-weight: 700; |
| + background-color: #FFF; |
| + } |
| + |
| + #sidebar footer |
| + { |
| + width: 100%; |
| + } |
| + |
| + #sidebar footer p |
| + { |
| + display: flex; |
| + justify-content: center; |
| + margin: 1rem 0rem; |
| + } |
| + |
| + /* This is a stopgap solution of footer overlapping tabs on low resolutions */ |
| + @media (min-height: 37rem) |
| + { |
| + #sidebar .fixed |
| + { |
| + position: fixed; |
| + } |
| + |
| + #sidebar footer |
| + { |
| + bottom: 0px; |
| + position: absolute; |
| + } |
| + } |
| + |
| + /* |
| + Main content |
| + */ |
| + |
| + body[data-tab|="general"] #content-general, |
| + body[data-tab|="advanced"] #content-advanced, |
| + body[data-tab|="whitelist"] #content-whitelist, |
| + body[data-tab|="help"] #content-help |
| + { |
| + display: block; |
| + } |
| + |
| + main |
| + { |
| + background-color: #FFFFFF; |
| + border: 1px solid #CDCDCD; |
| + width: 46.3rem; |
| + padding: 0px 0rem 1.4rem 0rem; |
| + } |
| + |
| + main > div |
| + { |
| + display: none; |
| + } |
| + |
| + main p |
| + { |
| + margin: 0.8rem 0rem; |
| + } |
| + |
| + /* |
| + Sections |
| + */ |
| + |
| + [role="tabpanel"] > section, |
| + [role="tabpanel"] > .section |
| + { |
| + padding: 1.4rem 2rem; |
| + border-top: 1px solid #CDCDCD; |
| + } |
| + |
| + [role="tabpanel"] > header h1, |
| + [role="tabpanel"] > header p |
| + { |
| + padding: 0rem 2rem; |
| + margin: 1.4rem 0rem; |
| + } |
| + |
| + section h2, |
| + .section h2 |
| + { |
| + margin: 0rem; |
| + } |
| + |
| + section h2 |
| + { |
| + text-transform: uppercase; |
| + } |
| + |
| + section, |
| + .section |
| + { |
| + clear: both; |
| + } |
| + |
| + section.cols |
| + { |
| + display: flex; |
| + } |
| + |
| + section.cols > *:first-child |
| + { |
| + flex: 1; |
| + -moz-margin-end: 2rem; |
| + -webkit-margin-end: 2rem; |
| + } |
| + |
| + section.cols > *:last-child |
| + { |
| + flex: 3; |
| + } |
| + |
| + /* |
| + Acceptable ads |
| + */ |
| + |
| + #tracking-warning |
| + { |
| + position: relative; |
| + padding: 1.5rem; |
| + margin-bottom: 1rem; |
| + border: 2px solid #ffd7a3; |
| + background-color: #fefbe3; |
| + } |
| + |
| + #acceptable-ads:not(.show-warning) #tracking-warning |
| + { |
| + display: none; |
| + } |
| + |
| + #hide-tracking-warning |
| + { |
| + position: absolute; |
| + right: 0.8rem; |
| + top: 0.8rem; |
| + } |
| + |
| + html[dir="rtl"] #hide-tracking-warning |
| + { |
| + left: 1rem; |
| + right: auto; |
| + } |
| + |
| + #tracking-warning .link |
| + { |
| + color: inherit; |
| + text-decoration: underline; |
| + font-weight: 700; |
| + } |
| + |
| + #acceptable-ads ul |
| + { |
| + position: relative; |
| + padding-left: 2.2rem; |
| + list-style: none; |
| + } |
| + |
| + html[dir="rtl"] #acceptable-ads ul |
| + { |
| + padding-left: 0rem; |
| + padding-right: 2.2rem; |
| + } |
| + |
| + #acceptable-ads ul button |
| + { |
| + position: absolute; |
| + left: 0rem; |
| + } |
| + |
| + html[dir="rtl"] button |
| + { |
| + left: auto; |
| + right: 0rem; |
| + } |
| + |
| + #acceptable-ads label |
| + { |
| + font-weight: 700; |
| + font-size: 1rem; |
| + -moz-margin-end: 0.5rem; |
| + -webkit-margin-end: 0.5rem; |
| + } |
| + |
| + #dnt |
| + { |
| + padding: 0.8rem; |
| + border: 1px solid #077CA6; |
| + } |
| + |
| + .new |
| + { |
| + display: inline-block; |
| + padding: 0.2rem 0.5rem; |
| + border-radius: 0.2rem; |
| + background-color: #077CA6; |
| + color: #FFF; |
| + line-height: 100%; |
| + font-size: 0.8rem; |
| + text-transform: uppercase; |
| + } |
| + |
| + /* |
| + Tables |
| + */ |
| + |
| + ul.table, |
| + ul.list |
| + { |
| + list-style: none; |
| + margin: 0rem; |
| + padding: 0rem; |
| + } |
| + |
| + .table li, |
| + .list li |
| + { |
| + display: flex; |
| + align-items: center; |
| + } |
| + |
| + .table li |
| + { |
| + margin: 0rem; |
| + border-style: solid; |
| + border-color: #CDCDCD; |
| + border-width: 0px 1px 1px 1px; |
| + } |
| + |
| + .list li |
| + { |
| + padding: 0rem; |
| + margin-bottom: 0.8rem; |
| + } |
| + |
| + .list li [role="checkbox"] |
| + { |
| + flex-shrink: 0; |
| + } |
| + |
| + .table li:first-of-type |
| + { |
| + border-top: 1px solid #CDCDCD; |
| + } |
| + |
| + .table.list li |
| + { |
| + padding: 0.5rem 1rem; |
| + margin: 0rem; |
| + } |
| + |
| + .table.list.bottom-control li:last-of-type |
| + { |
| + border-bottom: 0px; |
| + } |
| + |
| + .list li > span |
| + { |
| + margin: 0rem 1rem; |
| + } |
| + |
| + .table.list li > span |
| + { |
| + flex: 1; |
| + margin: 0rem; |
| + } |
| + |
| + .table.list li.empty-placeholder |
| + { |
| + padding: 1rem 1.4rem; |
| + } |
| + |
| + .table.list li.empty-placeholder:not(:last-of-type) |
| + { |
| + border-bottom: 0px; |
| + } |
| + |
| + .table.list button.link |
| + { |
| + font-weight: 700; |
| + text-transform: uppercase; |
| + text-decoration: none; |
| + } |
| + |
| + .table:not(.list):not(.cols) li |
| + { |
| + padding-top: 0px; |
| + padding-bottom: 6px; |
| + } |
| + |
| + .table li [data-single="visible"], |
| + .table li:first-of-type:last-of-type [data-single="hidden"] |
| + { |
| + display: none; |
| + } |
| + |
| + .table li:first-of-type:last-of-type [data-single="visible"] |
| + { |
| + display: block; |
| + } |
| + |
| + .th |
| + { |
| + display: flex; |
| + } |
| + |
| + .col5 > * |
| + { |
| + display: inline-block; |
| + vertical-align: middle; |
| + } |
| + |
| + .cols .col5 |
| + { |
| + margin: 0rem 1rem; |
| + } |
| + |
| + .th .col5:nth-of-type(1), |
| + .table .col5:nth-of-type(1) |
| + { |
| + flex: 4; |
| + } |
| + |
| + .th .col5:nth-of-type(2), |
| + .table .col5:nth-of-type(2) |
| + { |
| + flex: 8; |
| + } |
| + |
| + .th .col5:nth-of-type(3), |
| + .table .col5:nth-of-type(3) |
| + { |
| + flex: 4; |
| + } |
| + |
| + .th .col5:nth-of-type(4), |
| + .table .col5:nth-of-type(4) |
| + { |
| + flex: 1; |
| + } |
| + |
| + .th .col5:nth-of-type(5), |
| + .table .col5:nth-of-type(5) |
| + { |
| + flex: 1; |
| + -moz-margin-start: 0; |
| + -webkit-margin-start: 0; |
| + -moz-margin-end: 1.8rem; |
| + -webkit-margin-end: 1.8rem; |
| + } |
| + |
| + .table.cols > span |
| + { |
| + margin: 0rem; |
| + } |
| + |
| + .table.cols li |
| + { |
| + padding: 0.5rem 0rem; |
| + } |
| + |
| + .table.cols .state |
| + { |
| + -moz-margin-start: 1rem; |
| + -webkit-margin-start: 1rem; |
| + } |
| + |
| + .table.cols .gear |
| + { |
| + margin: 0rem |
| + } |
| + |
| + #dialog .table.list li |
| + { |
| + display: block; |
| + border-width: 1px 0px 0px 0px; |
| + padding: 0rem; |
| + } |
| + |
| + #dialog .table.list li:first-of-type |
| + { |
| + border: 0px; |
| + } |
| + |
| + #dialog .table.list li button |
| + { |
| + display: flex; |
| + background-image: none; |
| + width: 100%; |
| + height: auto; |
| + padding: 1.1rem 1rem; |
| + } |
| + |
| + #dialog .table.list li button:hover, |
| + #dialog .table.list li button:focus |
| + { |
| + background-color: #E1F2FA; |
| + } |
| + |
| + #dialog .table.list li button[aria-checked="true"], |
| + .table.list li .dimmed |
| + { |
| + color: #BBB; |
| + } |
| + |
| + #dialog .table.list li button > span |
| + { |
| + flex: none; |
| + margin: 0rem 0.8rem; |
| + text-transform: none; |
| + font-weight: 400; |
| + } |
| + |
| + /* |
| + Tooltips |
| */ |
| - |
| -#tracking-warning |
| -{ |
| - position: relative; |
| - padding: 1.5rem; |
| - margin-bottom: 1rem; |
| - border: 2px solid #ffd7a3; |
| - background-color: #fefbe3; |
| -} |
| - |
| -#acceptable-ads:not(.show-warning) #tracking-warning |
| -{ |
| - display: none; |
| -} |
| - |
| -#hide-tracking-warning |
| -{ |
| - position: absolute; |
| - right: 0.8rem; |
| - top: 0.8rem; |
| -} |
| - |
| -html[dir="rtl"] #hide-tracking-warning |
| -{ |
| - left: 1rem; |
| - right: auto; |
| -} |
| - |
| -#tracking-warning .link |
| -{ |
| - color: inherit; |
| - text-decoration: underline; |
| - font-weight: 700; |
| -} |
| - |
| -#acceptable-ads ul |
| -{ |
| - position: relative; |
| - padding-left: 2.2rem; |
| - list-style: none; |
| -} |
| - |
| -html[dir="rtl"] #acceptable-ads ul |
| -{ |
| - padding-left: 0rem; |
| - padding-right: 2.2rem; |
| -} |
| - |
| -#acceptable-ads ul button |
| -{ |
| - position: absolute; |
| - left: 0rem; |
| -} |
| - |
| -html[dir="rtl"] button |
| -{ |
| - left: auto; |
| - right: 0rem; |
| -} |
| - |
| -#acceptable-ads label |
| -{ |
| - font-weight: 700; |
| - font-size: 1rem; |
| - -moz-margin-end: 0.5rem; |
| - -webkit-margin-end: 0.5rem; |
| -} |
| - |
| -#dnt |
| -{ |
| - padding: 0.8rem; |
| - border: 1px solid #077CA6; |
| -} |
| - |
| -.new |
| -{ |
| - display: inline-block; |
| - padding: 0.2rem 0.5rem; |
| - border-radius: 0.2rem; |
| - background-color: #077CA6; |
| - color: #FFF; |
| - line-height: 100%; |
| - font-size: 0.8rem; |
| - text-transform: uppercase; |
| -} |
| - |
| -/* |
| - Tables |
| + |
| + .tooltip |
| + { |
| + position: relative; |
| + margin: 0rem; |
| + -moz-margin-end: 1rem; |
| + -webkit-margin-end: 1rem; |
| + line-height: 1.5rem; |
| + text-decoration: none; |
| + cursor: help; |
| + } |
| + |
| + /* |
| + Used for translatable screen reader only content. |
| + e.g.: Use instead of aria-label to avoid complex attribute value translation |
| + */ |
| + .sr-only |
| + { |
| + position: absolute; |
| + overflow: hidden; |
| + clip: rect(0, 0, 0, 0); |
| + width: 1px; |
| + height: 1px; |
| + margin: -1px; |
| + padding: 0px; |
| + border: 0px; |
| + } |
| + |
| + /* |
| + General tab content |
| */ |
| - |
| -ul.table, |
| -ul.list |
| -{ |
| - list-style: none; |
| - margin: 0rem; |
| - padding: 0rem; |
| -} |
| - |
| -.table li, |
| -.list li |
| -{ |
| - display: flex; |
| - align-items: center; |
| -} |
| - |
| -.table li |
| -{ |
| - margin: 0rem; |
| - border-style: solid; |
| - border-color: #CDCDCD; |
| - border-width: 0px 1px 1px 1px; |
| -} |
| - |
| -.list li |
| -{ |
| - padding: 0rem; |
| - margin-bottom: 0.8rem; |
| -} |
| - |
| -.list li [role="checkbox"] |
| -{ |
| - flex-shrink: 0; |
| -} |
| - |
| -.table li:first-of-type |
| -{ |
| - border-top: 1px solid #CDCDCD; |
| -} |
| - |
| -.table.list li |
| -{ |
| - padding: 0.5rem 1rem; |
| - margin: 0rem; |
| -} |
| - |
| -.table.list.bottom-control li:last-of-type |
| -{ |
| - border-bottom: 0px; |
| -} |
| - |
| -.list li > span |
| -{ |
| - margin: 0rem 1rem; |
| -} |
| - |
| -.table.list li > span |
| -{ |
| - flex: 1; |
| - margin: 0rem; |
| -} |
| - |
| -.table.list li.empty-placeholder |
| -{ |
| - padding: 1rem 1.4rem; |
| -} |
| - |
| -.table.list li.empty-placeholder:not(:last-of-type) |
| -{ |
| - border-bottom: 0px; |
| -} |
| - |
| -.table.list button.link |
| -{ |
| - font-weight: 700; |
| - text-transform: uppercase; |
| - text-decoration: none; |
| -} |
| - |
| -.table:not(.list):not(.cols) li |
| -{ |
| - padding-top: 0px; |
| - padding-bottom: 6px; |
| -} |
| - |
| -.table li [data-single="visible"], |
| -.table li:first-of-type:last-of-type [data-single="hidden"] |
| -{ |
| - display: none; |
| -} |
| - |
| -.table li:first-of-type:last-of-type [data-single="visible"] |
| -{ |
| - display: block; |
| -} |
| - |
| -.th |
| -{ |
| - display: flex; |
| -} |
| - |
| -.col5 > * |
| -{ |
| - display: inline-block; |
| - vertical-align: middle; |
| -} |
| - |
| -.cols .col5 |
| -{ |
| - margin: 0rem 1rem; |
| -} |
| - |
| -.th .col5:nth-of-type(1), |
| -.table .col5:nth-of-type(1) |
| -{ |
| - flex: 4; |
| -} |
| - |
| -.th .col5:nth-of-type(2), |
| -.table .col5:nth-of-type(2) |
| -{ |
| - flex: 8; |
| -} |
| - |
| -.th .col5:nth-of-type(3), |
| -.table .col5:nth-of-type(3) |
| -{ |
| - flex: 4; |
| -} |
| - |
| -.th .col5:nth-of-type(4), |
| -.table .col5:nth-of-type(4) |
| -{ |
| - flex: 1; |
| -} |
| - |
| -.th .col5:nth-of-type(5), |
| -.table .col5:nth-of-type(5) |
| -{ |
| - flex: 1; |
| - -moz-margin-start: 0; |
| - -webkit-margin-start: 0; |
| - -moz-margin-end: 1.8rem; |
| - -webkit-margin-end: 1.8rem; |
| -} |
| - |
| -.table.cols > span |
| -{ |
| - margin: 0rem; |
| -} |
| - |
| -.table.cols li |
| -{ |
| - padding: 0.5rem 0rem; |
| -} |
| - |
| -.table.cols .state |
| -{ |
| - -moz-margin-start: 1rem; |
| - -webkit-margin-start: 1rem; |
| -} |
| - |
| -.table.cols .gear |
| -{ |
| - margin: 0rem |
| -} |
| - |
| -#dialog .table.list li |
| -{ |
| - display: block; |
| - border-width: 1px 0px 0px 0px; |
| - padding: 0rem; |
| -} |
| - |
| -#dialog .table.list li:first-of-type |
| -{ |
| - border: 0px; |
| -} |
| - |
| -#dialog .table.list li button |
| -{ |
| - display: flex; |
| - background-image: none; |
| - width: 100%; |
| - height: auto; |
| - padding: 1.1rem 1rem; |
| -} |
| - |
| -#dialog .table.list li button:hover, |
| -#dialog .table.list li button:focus |
| -{ |
| - background-color: #E1F2FA; |
| -} |
| - |
| -#dialog .table.list li button[aria-checked="true"], |
| -.table.list li .dimmed |
| -{ |
| - color: #BBB; |
| -} |
| - |
| -#dialog .table.list li button > span |
| -{ |
| - flex: none; |
| - margin: 0rem 0.8rem; |
| - text-transform: none; |
| - font-weight: 400; |
| -} |
| - |
| -/* |
| - Tooltips |
| -*/ |
| - |
| -.tooltip |
| -{ |
| - position: relative; |
| - margin: 0rem; |
| - -moz-margin-end: 1rem; |
| - -webkit-margin-end: 1rem; |
| - line-height: 1.5rem; |
| - text-decoration: none; |
| - cursor: help; |
| -} |
| - |
| -/* |
| - Used for translatable screen reader only content. |
| - e.g.: Use instead of aria-label to avoid complex attribute value translation |
| -*/ |
| -.sr-only |
| -{ |
| - position: absolute; |
| - overflow: hidden; |
| - clip: rect(0, 0, 0, 0); |
| - width: 1px; |
| - height: 1px; |
| - margin: -1px; |
| - padding: 0px; |
| - border: 0px; |
| -} |
| - |
| -/* |
| - General tab content |
| -*/ |
| - |
| -#blocking-languages-dialog-table |
| -{ |
| - border-bottom: none; |
| -} |
| - |
| -.button-add, .cancel-button |
| -{ |
| - background-color: transparent; |
| - border: 0px; |
| - color: #3A7BA6; |
| - cursor: pointer; |
| -} |
| - |
| -/* |
| - Whitelist tab |
| + |
| + #blocking-languages-dialog-table |
| + { |
| + border-bottom: none; |
| + } |
| + |
| + .button-add, .cancel-button |
| + { |
| + background-color: transparent; |
| + border: 0px; |
| + color: #3A7BA6; |
| + cursor: pointer; |
| + } |
| + |
| + /* |
| + Whitelist tab |
| + */ |
| + |
| + #content-whitelist form |
| + { |
| + display: flex; |
| + } |
| + |
| + #content-whitelist form input |
| + { |
| + flex: 1; |
| + height: 100%; |
| + padding: 0.5rem 1rem; |
| + font-size: 1rem; |
| + border: 2px solid #077CA6; |
| + } |
| + |
| + #content-whitelist form button |
| + { |
| + -moz-margin-start: 0.7rem; |
| + -webkit-margin-start: 0.7rem; |
| + } |
| + |
| + #whitelisting-table li |
| + { |
| + padding-left: 1.4rem; |
| + padding-right: 1.4rem; |
| + border-left: 0rem; |
| + border-right: 0rem; |
| + } |
| + |
| + /* |
| + Advanced tab content |
| + */ |
| + |
| + #all-filter-lists-table li.show-message .last-update, |
| + #all-filter-lists-table li:not(.show-message) .message, |
| + #custom-filters:not([data-mode="empty"]) #empty-custom-filters, |
| + #custom-filters[data-mode="empty"] #custom-filters-raw, |
| + #custom-filters:not([data-mode="write"]) #custom-filters-raw-controls, |
| + #custom-filters:not([data-mode="read"]) #custom-filters-edit, |
| + #custom-filters-edit-filters, |
| + #link-filters-on-edit-error, |
| + .state span, |
| + #acceptable-ads:not(.show-dnt-notification) #dnt |
| + { |
| + display: none; |
| + } |
| + |
| + #all-filter-lists-table button[role="checkbox"][aria-checked="true"] + .state #state-active, |
| + #all-filter-lists-table button[role="checkbox"][aria-checked="false"] + .state #state-disabled, |
| + #link-filters-on-edit-error.visible |
| + { |
| + display: inline; |
| + } |
| + |
| + #all-filter-lists-table |
| + { |
| + margin-bottom: 0.8rem; |
| + } |
| + |
| + #custom-filters-edit { |
| + white-space: nowrap; |
| + } |
| + |
| + #custom-filters-edit-area { |
| + display: flex; |
| + width: 100%; |
| + } |
| + |
| + /* |
| + avoid doubled margin glitchy behavior |
| + as shown in visual specifications |
| + */ |
| + #custom-filters-edit-area .side-controls .side-controls { |
| + margin: 0; |
| + } |
| + |
| + /* |
| + visibility: hidden; |
| + preserves the flex-box meaning, |
| + keeping buttons on the right. |
| */ |
| - |
| -#content-whitelist form |
| -{ |
| - display: flex; |
| -} |
| - |
| -#content-whitelist form input |
| -{ |
| - flex: 1; |
| - height: 100%; |
| - padding: 0.5rem 1rem; |
| - font-size: 1rem; |
| - border: 2px solid #077CA6; |
| -} |
| - |
| -#content-whitelist form button |
| -{ |
| - -moz-margin-start: 0.7rem; |
| - -webkit-margin-start: 0.7rem; |
| -} |
| - |
| -#whitelisting-table li |
| -{ |
| - padding-left: 1.4rem; |
| - padding-right: 1.4rem; |
| - border-left: 0rem; |
| - border-right: 0rem; |
| -} |
| - |
| -/* |
| - Advanced tab content |
| -*/ |
| - |
| -#all-filter-lists-table li.show-message .last-update, |
| -#all-filter-lists-table li:not(.show-message) .message, |
| -#custom-filters:not([data-mode="empty"]) #empty-custom-filters, |
| -#custom-filters[data-mode="empty"] #custom-filters-raw, |
| -#custom-filters:not([data-mode="write"]) #custom-filters-raw-controls, |
| -#custom-filters:not([data-mode="read"]) #custom-filters-edit, |
| -.state span, |
| -#acceptable-ads:not(.show-dnt-notification) #dnt |
| -{ |
| - display: none; |
| -} |
| - |
| -#all-filter-lists-table button[role="checkbox"][aria-checked="true"] + .state #state-active |
| -{ |
| - display: inline; |
| -} |
| - |
| -#all-filter-lists-table button[role="checkbox"][aria-checked="false"] + .state #state-disabled |
| -{ |
| - display: inline; |
| -} |
| - |
| -#all-filter-lists-table |
| -{ |
| - margin-bottom: 0.8rem; |
| -} |
| - |
| -#custom-filters-raw |
| -{ |
| - width: 100%; |
| - height: 23.6rem; |
| - padding: 0.8rem; |
| -} |
| - |
| -#custom-filters-raw:focus |
| -{ |
| - outline: none; |
| - border: 2px solid #077CA6; |
| -} |
| - |
| -#empty-custom-filters |
| -{ |
| - padding: 1.5rem; |
| - border: 1px solid #CDCDCD; |
| -} |
| - |
| -/* |
| - Context menu |
| + #custom-filters-edit-error { |
| + visibility: hidden; |
| + display: flex; |
| + align-self: center; |
| + justify-content: flex-start; |
| + font-weight: bold; |
| + } |
| + |
| + #custom-filters-edit-error.warning, |
| + #custom-filters-edit-filters |
| + { |
| + color: #C11D26; |
| + padding: 0.2rem 0.8rem; |
| + } |
| + |
| + #custom-filters-edit-error.warning { |
| + visibility: visible; |
| + } |
| + |
| + #custom-filters-edit-filters { |
| + display: block; |
| + white-space: pre; |
| + overflow: auto; |
| + } |
| + |
| + #custom-filters-edit-filters.many { |
| + border: 1px solid silver; |
| + max-height: 6.2rem; |
| + } |
| + |
| + #custom-filters-raw |
| + { |
| + width: 100%; |
| + height: 23.6rem; |
| + padding: 0.8rem; |
| + } |
| + |
| + #custom-filters-raw:focus |
| + { |
| + outline: none; |
| + border: 2px solid #077CA6; |
| + } |
| + |
| + #custom-filters-raw.warning |
| + { |
| + outline: none; |
| + border: 2px solid #C11D26; |
| + } |
| + |
| + #empty-custom-filters |
| + { |
| + padding: 1.5rem; |
| + border: 1px solid #CDCDCD; |
| + } |
| + |
| + /* |
| + Context menu |
| + */ |
| + |
| + li [role="menubar"] |
| + { |
| + position: relative; |
| + } |
| + |
| + [role="tooltip"] |
| + { |
| + right: -0.8rem; |
| + margin-top: 0.8rem; |
| + opacity: 1; |
| + padding: 0.2rem 1rem; |
| + position: absolute; |
| + -webkit-transition: opacity 200ms ease-in-out 400ms, |
| + visibility 0ms linear 400ms; |
| + transition: opacity 200ms ease-in-out 400ms, |
| + visibility 0ms linear 400ms; |
| + visibility: visible; |
| + width: 15rem; |
| + z-index: 1; |
| + } |
| + |
| + html[dir="rtl"] [role="tooltip"] |
| + { |
| + right: auto; |
| + left: -0.8rem; |
| + } |
| + |
| + [role="tooltip"], |
| + .context-menu .content |
| + { |
| + border: 1px solid #077CA6; |
| + border-radius: 3px; |
| + background-color: #FFFFFF; |
| + } |
| + |
| + |
| + .tooltip:not(:hover) > [role="tooltip"], |
| + [role="tooltip"]:hover |
| + { |
| + visibility: hidden; |
| + opacity: 0; |
| + -webkit-transition-delay: 0ms; |
| + transition-delay: 0ms; |
| + } |
| + |
| + .context-menu |
| + { |
| + position: absolute; |
| + right: 2.5rem; |
| + top: -2rem; |
| + z-index: 1; |
| + visibility: hidden; |
| + } |
| + |
| + html[dir="rtl"] .context-menu |
| + { |
| + right: auto; |
| + left: 2.5rem; |
| + } |
| + |
| + .context-menu .content |
| + { |
| + padding: 0rem; |
| + position: relative; |
| + cursor: default; |
| + } |
| + |
| + li.show-context-menu .context-menu |
| + { |
| + visibility: visible; |
| + } |
| + |
| + [role="tooltip"]::before, |
| + .context-menu::before |
| + { |
| + content: ""; |
| + width: 0rem; |
| + height: 0rem; |
| + position: absolute; |
| + } |
| + |
| + [role="tooltip"]::before |
| + { |
| + border-left: 10px solid transparent; |
| + border-right: 10px solid transparent; |
| + border-bottom: 10px solid #077CA6; |
| + top: -10px; |
| + right: 15px; |
| + } |
| + |
| + html[dir="rtl"] [role="tooltip"]::before |
| + { |
| + right: auto; |
| + left: 15px; |
| + } |
| + |
| + .context-menu::before |
| + { |
| + border-left: 10px solid #077CA6; |
| + border-top: 10px solid transparent; |
| + border-bottom: 10px solid transparent; |
| + top: 22px; |
| + right: -0.5rem; |
| + } |
| + |
| + html[dir="rtl"] .context-menu::before |
| + { |
| + border-left: 0rem; |
| + border-right: 10px solid #077CA6; |
| + right: auto; |
| + left: -0.5rem; |
| + } |
| + |
| + .context-menu li[role="menuitem"] |
| + { |
| + width: 12.2rem; |
| + border: 0rem; |
| + padding: 0rem; |
| + } |
| + |
| + .context-menu li[role="menuitem"] > * |
| + { |
| + width: 100%; |
| + display: flex; |
| + border: 0rem; |
| + padding: 0.7rem 0rem; |
| + color: #077CA6; |
| + align-items: center; |
| + font-size: 1rem; |
| + font-weight: 400; |
| + text-transform: none; |
| + text-decoration: none; |
| + } |
| + |
| + .context-menu li[role="menuitem"] > *:hover, |
| + .context-menu li[role="menuitem"] > *:focus |
| + { |
| + background-color: #E1F2FA; |
| + cursor: pointer; |
| + } |
| + |
| + .context-menu li[role="menuitem"] .icon::before |
| + { |
| + height: 1rem; |
| + width: 1rem; |
| + margin: 0rem 1.1rem; |
| + border: 0rem; |
| + } |
| + |
| + /* |
| + Help tab content |
| */ |
| - |
| -li [role="menubar"] |
| -{ |
| - position: relative; |
| -} |
| - |
| -[role="tooltip"] |
| -{ |
| - right: -0.8rem; |
| - margin-top: 0.8rem; |
| - opacity: 1; |
| - padding: 0.2rem 1rem; |
| - position: absolute; |
| - -webkit-transition: opacity 200ms ease-in-out 400ms, |
| - visibility 0ms linear 400ms; |
| - transition: opacity 200ms ease-in-out 400ms, |
| - visibility 0ms linear 400ms; |
| - visibility: visible; |
| - width: 15rem; |
| - z-index: 1; |
| -} |
| - |
| -html[dir="rtl"] [role="tooltip"] |
| -{ |
| - right: auto; |
| - left: -0.8rem; |
| -} |
| - |
| -[role="tooltip"], |
| -.context-menu .content |
| -{ |
| - border: 1px solid #077CA6; |
| - border-radius: 3px; |
| - background-color: #FFFFFF; |
| -} |
| - |
| - |
| -.tooltip:not(:hover) > [role="tooltip"], |
| -[role="tooltip"]:hover |
| -{ |
| - visibility: hidden; |
| - opacity: 0; |
| - -webkit-transition-delay: 0ms; |
| - transition-delay: 0ms; |
| -} |
| - |
| -.context-menu |
| -{ |
| - position: absolute; |
| - right: 2.5rem; |
| - top: -2rem; |
| - z-index: 1; |
| - visibility: hidden; |
| -} |
| - |
| -html[dir="rtl"] .context-menu |
| -{ |
| - right: auto; |
| - left: 2.5rem; |
| -} |
| - |
| -.context-menu .content |
| -{ |
| - padding: 0rem; |
| - position: relative; |
| - cursor: default; |
| -} |
| - |
| -li.show-context-menu .context-menu |
| -{ |
| - visibility: visible; |
| -} |
| - |
| -[role="tooltip"]::before, |
| -.context-menu::before |
| -{ |
| - content: ""; |
| - width: 0rem; |
| - height: 0rem; |
| - position: absolute; |
| -} |
| - |
| -[role="tooltip"]::before |
| -{ |
| - border-left: 10px solid transparent; |
| - border-right: 10px solid transparent; |
| - border-bottom: 10px solid #077CA6; |
| - top: -10px; |
| - right: 15px; |
| -} |
| - |
| -html[dir="rtl"] [role="tooltip"]::before |
| -{ |
| - right: auto; |
| - left: 15px; |
| -} |
| - |
| -.context-menu::before |
| -{ |
| - border-left: 10px solid #077CA6; |
| - border-top: 10px solid transparent; |
| - border-bottom: 10px solid transparent; |
| - top: 22px; |
| - right: -0.5rem; |
| -} |
| - |
| -html[dir="rtl"] .context-menu::before |
| -{ |
| - border-left: 0rem; |
| - border-right: 10px solid #077CA6; |
| - right: auto; |
| - left: -0.5rem; |
| -} |
| - |
| -.context-menu li[role="menuitem"] |
| -{ |
| - width: 12.2rem; |
| - border: 0rem; |
| - padding: 0rem; |
| -} |
| - |
| -.context-menu li[role="menuitem"] > * |
| -{ |
| - width: 100%; |
| - display: flex; |
| - border: 0rem; |
| - padding: 0.7rem 0rem; |
| - color: #077CA6; |
| - align-items: center; |
| - font-size: 1rem; |
| - font-weight: 400; |
| - text-transform: none; |
| - text-decoration: none; |
| -} |
| - |
| -.context-menu li[role="menuitem"] > *:hover, |
| -.context-menu li[role="menuitem"] > *:focus |
| -{ |
| - background-color: #E1F2FA; |
| - cursor: pointer; |
| -} |
| - |
| -.context-menu li[role="menuitem"] .icon::before |
| -{ |
| - height: 1rem; |
| - width: 1rem; |
| - margin: 0rem 1.1rem; |
| - border: 0rem; |
| -} |
| - |
| -/* |
| - Help tab content |
| -*/ |
| - |
| -html:not([lang="zh"]) #social-chinese, |
| -html[lang="zh"] #social-general |
| -{ |
| - display: none; |
| -} |
| - |
| -#social ul |
| -{ |
| - list-style: none; |
| - padding: 0px; |
| -} |
| - |
| -#social ul li |
| -{ |
| - display: inline-block; |
| - -moz-margin-end: 1rem; |
| - -webkit-margin-end: 1rem; |
| -} |
| - |
| -#social ul li a |
| -{ |
| - display: block; |
| - text-align: center; |
| - text-decoration: none; |
| -} |
| - |
| -/* |
| - Dialog |
| -*/ |
| - |
| -#dialog-background |
| -{ |
| - display: none; |
| - position: fixed; |
| - top: 0px; |
| - right: 0px; |
| - bottom: 0px; |
| - left: 0px; |
| - z-index: 2; |
| - background-color: #000; |
| - opacity: 0.7; |
| -} |
| - |
| -body[data-dialog] #dialog-background |
| -{ |
| - display: block; |
| -} |
| - |
| -#dialog |
| -{ |
| - position: fixed; |
| - top: 100px; |
| - left: 0px; |
| - right: 0px; |
| - z-index: 2; |
| - width: 50vw; |
| - margin: auto; |
| - border-radius: 3px; |
| - background-color: #FFFFFF; |
| -} |
| - |
| -#dialog header |
| -{ |
| - display: flex; |
| - padding: 0.7rem 1.5rem; |
| - background-color: #077CA6; |
| -} |
| - |
| -#dialog header h3 |
| -{ |
| - margin: 0rem; |
| - font-size: 1rem; |
| - font-weight: 700; |
| -} |
| - |
| -.close |
| -{ |
| - margin: 0rem; |
| - cursor: pointer; |
| -} |
| - |
| -#dialog #dialog-body |
| -{ |
| - max-height: 60vh; |
| - overflow: auto; |
| -} |
| - |
| -.dialog-content |
| -{ |
| - margin: 1rem 1.8rem; |
| -} |
| - |
| -[data-dialog="language-change"] .dialog-content, |
| -[data-dialog="language-add"] .dialog-content |
| -{ |
| - margin: 0rem; |
| -} |
| - |
| -[data-dialog="about"] .dialog-content |
| -{ |
| - text-align: center; |
| -} |
| - |
| -[data-dialog="about"] .content button |
| -{ |
| - margin: 1.5rem auto 1.8rem auto; |
| -} |
| - |
| -[data-dialog="about"] p |
| -{ |
| - margin: 0.5rem 0rem; |
| -} |
| - |
| -[data-dialog="import"] .side-controls |
| -{ |
| - margin-top: 2.45rem; |
| -} |
| - |
| -#dialog .table |
| -{ |
| - width: 100%; |
| -} |
| - |
| -#dialog .section:not(:first-child) |
| -{ |
| - margin-top: 24px; |
| -} |
| - |
| -#dialog-title |
| -{ |
| - flex: 1; |
| - font-size: 16px; |
| - color: #FFFFFF; |
| -} |
| - |
| -#dialog-body .dialog-content-block |
| -{ |
| - padding: 12px 0px; |
| -} |
| - |
| -#dialog .url |
| -{ |
| - margin-top: 10px; |
| - margin-bottom: 20px; |
| - word-wrap: break-word; |
| -} |
| - |
| -body:not([data-dialog="about"]) #dialog-title-about, |
| -body:not([data-dialog="about"]) #dialog-content-about, |
| -body:not([data-dialog="import"]) #dialog-title-import, |
| -body:not([data-dialog="import"]) #dialog-content-import, |
| -body:not([data-dialog="language-add"]) #dialog-title-language-add, |
| -body:not([data-dialog="language-change"]) #dialog-title-language-change, |
| -body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dialog-content-language-add, |
| -body:not([data-dialog="language-add"]) #dialog-body button.add, |
| -body:not([data-dialog="language-change"]) #dialog-body button.change, |
| -body:not([data-dialog="predefined"]) #dialog-title-predefined, |
| -body:not([data-dialog="predefined"]) #dialog-content-predefined, |
| -body:not([data-dialog]) #dialog |
| -{ |
| - display: none; |
| -} |
| - |
| -/* |
| - Notification |
| -*/ |
| - |
| -#notification |
| -{ |
| - position: fixed; |
| - top: 0rem; |
| - left: 0rem; |
| - display: flex; |
| - padding: 1rem 1.9rem; |
| - width: 100%; |
| - box-sizing: border-box; |
| - opacity: 0.8; |
| - font-size: 1rem; |
| - color: #077CA6; |
| - background-color: #E1F2FA; |
| -} |
| - |
| -#notification strong |
| -{ |
| - flex: 1; |
| - text-align: center; |
| -} |
| + |
| + html:not([lang="zh"]) #social-chinese, |
| + html[lang="zh"] #social-general |
| + { |
| + display: none; |
| + } |
| + |
| + #social ul |
| + { |
| + list-style: none; |
| + padding: 0px; |
| + } |
| + |
| + #social ul li |
| + { |
| + display: inline-block; |
| + margin-right: 1rem; |
| + -moz-margin-end: 1rem; |
| + -webkit-margin-end: 1rem; |
| + } |
| + |
| + #social ul li a |
| + { |
| + display: block; |
| + text-align: center; |
| + text-decoration: none; |
| + } |
| + |
| + /* |
| + Dialog |
| + */ |
| + |
| + #dialog-background |
| + { |
| + display: none; |
| + position: fixed; |
| + top: 0px; |
| + right: 0px; |
| + bottom: 0px; |
| + left: 0px; |
| + z-index: 2; |
| + background-color: #000; |
| + opacity: 0.7; |
| + } |
| + |
| + body[data-dialog] #dialog-background |
| + { |
| + display: block; |
| + } |
| + |
| + #dialog |
| + { |
| + position: fixed; |
| + top: 100px; |
| + left: 0px; |
| + right: 0px; |
| + z-index: 2; |
| + width: 50vw; |
| + margin: auto; |
| + border-radius: 3px; |
| + background-color: #FFFFFF; |
| + } |
| + |
| + #dialog header |
| + { |
| + display: flex; |
| + padding: 0.7rem 1.5rem; |
| + background-color: #077CA6; |
| + } |
| + |
| + #dialog header h3 |
| + { |
| + margin: 0rem; |
| + font-size: 1rem; |
| + font-weight: 700; |
| + } |
| + |
| + .close |
| + { |
| + margin: 0rem; |
| + cursor: pointer; |
| + } |
| + |
| + #dialog #dialog-body |
| + { |
| + max-height: 60vh; |
| + overflow: auto; |
| + } |
| + |
| + .dialog-content |
| + { |
| + margin: 1rem 1.8rem; |
| + } |
| + |
| + [data-dialog="language-change"] .dialog-content, |
| + [data-dialog="language-add"] .dialog-content |
| + { |
| + margin: 0rem; |
| + } |
| + |
| + [data-dialog="about"] .dialog-content |
| + { |
| + text-align: center; |
| + } |
| + |
| + [data-dialog="about"] .content button |
| + { |
| + margin: 1.5rem auto 1.8rem auto; |
| + } |
| + |
| + [data-dialog="about"] p |
| + { |
| + margin: 0.5rem 0rem; |
| + } |
| + |
| + [data-dialog="import"] .side-controls |
| + { |
| + margin-top: 2.45rem; |
| + } |
| + |
| + #dialog .table |
| + { |
| + width: 100%; |
| + } |
| + |
| + #dialog .section:not(:first-child) |
| + { |
| + margin-top: 24px; |
| + } |
| + |
| + #dialog-title |
| + { |
| + flex: 1; |
| + font-size: 16px; |
| + color: #FFFFFF; |
| + } |
| + |
| + #dialog-body .dialog-content-block |
| + { |
| + padding: 12px 0px; |
| + } |
| + |
| + #dialog .url |
| + { |
| + margin-top: 10px; |
| + margin-bottom: 20px; |
| + word-wrap: break-word; |
| + } |
| + |
| + body:not([data-dialog="about"]) #dialog-title-about, |
| + body:not([data-dialog="about"]) #dialog-content-about, |
| + body:not([data-dialog="import"]) #dialog-title-import, |
| + body:not([data-dialog="import"]) #dialog-content-import, |
| + body:not([data-dialog="language-add"]) #dialog-title-language-add, |
| + body:not([data-dialog="language-change"]) #dialog-title-language-change, |
| + body:not([data-dialog="language-add"]):not([data-dialog="language-change"]) #dialog-content-language-add, |
| + body:not([data-dialog="language-add"]) #dialog-body button.add, |
| + body:not([data-dialog="language-change"]) #dialog-body button.change, |
| + body:not([data-dialog="predefined"]) #dialog-title-predefined, |
| + body:not([data-dialog="predefined"]) #dialog-content-predefined, |
| + body:not([data-dialog]) #dialog |
| + { |
| + display: none; |
| + } |
| + |
| + /* |
| + Notification |
| + */ |
| + |
| + #notification |
| + { |
| + position: fixed; |
| + top: 0rem; |
| + left: 0rem; |
| + display: flex; |
| + padding: 1rem 1.9rem; |
| + width: 100%; |
| + box-sizing: border-box; |
| + opacity: 0.8; |
| + font-size: 1rem; |
| + color: #077CA6; |
| + background-color: #E1F2FA; |
| + } |
| + |
| + #notification strong |
| + { |
| + flex: 1; |
| + text-align: center; |
| + } |
| + |
« desktop-options.js ('K')
|
« locale/en_US/desktop-options.json ('k')
|
no next file »
|
no next file with comments »
