body { width: 240px; font-size: 12px; font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; } input[type=checkbox] { outline: none; } #disable-all-wrapper { padding: 0.7em 0 0.7em; } #disable-all-wrapper .main-controls { padding-top: 0.1em; } #no-styles { font-style: italic; } #popup-shortcuts-button { margin-left: 3px; } .checker { display: inline; } .style-name { cursor: default; font-weight: bold; margin-bottom: 2px; display: block; } 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; } .entry:first-child { padding-top: 0; } 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; } /* action buttons */ #popup-options { display: flex; flex-direction: row; justify-content: space-around; padding: 1.2em 0; } #popup-options button { margin: 0 2px; width: 33%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* margins */ body { margin: 0; } body>div:not(#installed) { margin-left:0.75em; margin-right:0.75em; } #unavailable { margin-top: 0.75em; } #installed .entry { } /* entries */ #installed .entry { display: flex; align-items: center; padding: 5px 0.75em; } #installed .entry:nth-child(even) { background-color: rgba(0, 0, 0, 0.05); } #installed .main-controls { display: flex; flex: 1; width: calc(100% - 20px); align-items: center; } #installed .main-controls label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 5px; }