body { width: 200px; font-size: 13px; font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; } input[type=checkbox] { outline: none; } #no-styles { font-style: italic; } #popup-shortcuts-button { margin-left: 4px; } .checker { display: inline; } .style-name { cursor: default; font-weight: bold; margin-bottom: 2px; display: block; } .actions { font-size: x-small; } a, a:visited { color: black; } .left-gutter { display: table-cell; width: 16px; vertical-align: top; } .left-gutter input { margin-top: 0; margin-left: 0; } .main-controls { display: table-cell; } .entry { padding: 0.5em 0; border-bottom: 1px solid black; } .entry:first-child { padding-top: 0; } .entry:last-child { border-bottom: none; } body > DIV { border-bottom: 1px solid black; padding-bottom: 2px; } body > DIV:last-of-type, body.blocked > DIV { border-bottom: none; } #installed { margin-top: 0.5em; } #installed.disabled .style-name { text-decoration: line-through; } #installed .actions a { margin-right: 0.2em; } body > .actions { margin-top: 0.5em; } .actions > div:not(:last-child):not(#disable-all-wrapper), .actions > .main-controls > div:not(:last-child), #unavailable:not(:last-child), #unavailable + .actions { margin-bottom: 0.75em; } .actions input, .actions label { vertical-align: middle; } #unavailable { border: none; display: none; font-size: 14px; text-indent: 6px; } body.blocked #installed, body.blocked #find-styles, body.blocked #write-style, body:not(.blocked) #unavailable { display: none; } /* Never shown, but can be enabled with a style */ .enable, .disable { display: none; } /* 'New style' links */ #write-style-for {margin-right: .6ex} .write-style-link {margin-left: .6ex} .write-style-link::before, .write-style-link::after {font-size: x-small} .write-style-link::before {content: "\00ad"} /* "soft" hyphen */ #match {overflow-wrap: break-word;} /* "breadcrumbs" 'new style' links */ .breadcrumbs > .write-style-link {margin-left: 0} .breadcrumbs:hover a {color: #bbb; text-decoration: none} /* use just the subdomain name instead of the full domain name */ .breadcrumbs > .write-style-link[subdomain]:not(:nth-last-child(2)) {font-size: 0} .breadcrumbs > .write-style-link[subdomain]:not(:nth-last-child(2))::before { content: attr(subdomain); } /* "dot" after each subdomain name */ .breadcrumbs > .write-style-link[subdomain]::after {content: "."} /* no "dot" after top-level domain */ .breadcrumbs > .write-style-link:nth-last-child(2)::after {content: none} /* "forward slash" before path ("this URL") */ .breadcrumbs > .write-style-link:last-child::before {content: "\200b/"} .breadcrumbs > .write-style-link:last-child:first-child::before, .breadcrumbs > .write-style-link[subdomain=""] + .write-style-link::before {content: none} /* suppress TLD-only link */ .breadcrumbs > .write-style-link[subdomain=""] {display: none} /* :hover style */ .breadcrumbs.url\(\) > .write-style-link, /* :hover or :focus on "this URL" sets class="url()" */ .breadcrumbs > .write-style-link:hover, .breadcrumbs > .write-style-link:focus, .breadcrumbs > .write-style-link:hover ~ .write-style-link[subdomain], .breadcrumbs > .write-style-link:focus ~ .write-style-link[subdomain] { color: inherit; text-decoration: underline; }