popup.css

body {
	margin: 0;
	width: 380px;
	font-size: 11pt;
	background: var(--colorBgDark);
}
div,
body,
span,
input,
label {
	cursor: pointer;
	transition: background .2s ease-in-out;
}
input {
	margin: 0 5px;
	height: 30px;
	display: none;
}
.host > input {
	display: block;
}
p {
	cursor: default;
	text-align: center;
}
.scopes,
.policies,
.host,
.details,
.frame {
	display: flex;
	overflow: hidden;
}
.scopes div,
.policies div {
	text-align: center;
	flex: 1;
	padding: 5px;
}
#f0 > div:nth-child(even) {
	background-color: rgba(255, 255, 255, .2);
}
.scopes div:hover,
.policies div:hover,
.host:hover,
.frame:hover,
.resources > .resource:hover,
#f0 > div:nth-child(even):hover {
	background-color: rgba(255, 255, 255, 0.4);
}
.details {
	flex: 1;
}
span.domain,
.subdomain,
.resource {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.subdomain {
	flex: 1;
	opacity: .5;
	padding: 5px 0;
	text-align: right;
}
span.domain {
	flex: 1.3;
	padding: 5px 0;
	text-align: left;
}
.number {
	cursor: pointer;
	width: 18px;
	padding: 5px;
	text-align: right;
}
.resources {
	max-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	transition: max-height 500ms ease-out;
}
input:checked + .resources {
	max-height: 200px;
}
.resource {
	color: #000;
	padding: 5px 10px 5px 20px;
	display: block;
	text-align: right;
}
#allowonce,
#preferences {
	height: 30px;
	width: 30px;
	padding: 0;
	flex: none;
}
#preferences {
	background-image: url("/images/preferences.svg");
}
#allowonce {
	background-image: url("/images/allowonce-off.svg");
}
#allowonce.allowonce {
	background-image: url("/images/allowonce-on.svg");
}
.frames {
	width: 16px;
	margin-right: 5px;
}
.websocket {
	width: 16px;
	margin-right: -16px;
}
.hasframe {
	background: url("/images/hasframe.svg") center/100% no-repeat;
}
.haswebsocket {
	background: url("/images/websocket.svg") center/100% no-repeat;
}
.resource.haswebsocket {
	background-size: 16px;
	background-position: 3px center;
}
.frame .resource {
	flex: 1;
	padding-left: 0;
	padding-right: 0;
}
.frame-policy {
	height: 20px;
	padding: 5px;
	transition: transform 200ms ease;
}
.frame-policy:hover {
	transform: scale(1.3);
}
.blocked .domain,
.blocked .number,
.blocked + input + .resources {
	opacity: .6;
}
/* Global selected */
[data-scope="0"] > .scopes > [data-value="0"],
[data-scope="0"] > .policies {
	background: var(--colorScopeGlobal);
}
[data-scope="0"] > .scopes {
	background: var(--colorScopeGlobalLight);
}
/* Domain selected */
[data-scope="1"] > .scopes > [data-value="1"],
[data-scope="1"] > .policies,
[data-scope="1"] > .triangle > div {
	background: var(--colorScopeDomain);
}
[data-scope="1"] > .scopes {
	background: var(--colorScopeDomainLight);
}
/* Site selected */
[data-scope="2"] > .scopes > [data-value="2"],
[data-scope="2"] > .policies,
[data-scope="2"] > .triangle > div {
	background: var(--colorScopeSite);
}
[data-scope="2"] > .scopes {
	background: var(--colorScopeSiteLight);
}
/* Page selected */
[data-scope="3"] > .scopes > [data-value="3"],
[data-scope="3"] > .policies,
[data-scope="3"] > .triangle > div {
	background: var(--colorScopePage);
}
[data-scope="3"] > .scopes {
	background: var(--colorScopePageLight);
}
/* Block All selected */
.blockall,
[data-policy="3"] > .policies > [data-value="3"] {
	background: var(--colorPolicyBlock);
}
[data-policy="3"] .hosts,
[data-policy="3"] > .policies > [data-value="3"] {
	color: #fff;
}
/* Filtered selected */
.filtered,
[data-policy="2"] > .policies > [data-value="2"] {
	background: var(--colorPolicyFiltered);
}
/* Relaxed selected */
.relaxed,
[data-policy="1"] > .policies > [data-value="1"] {
	background: var(--colorPolicyRelaxed);
}
/* Allow All selected */
.allowonce,
.allowall,
[data-policy="0"] > .policies > [data-value="0"] {
	background: var(--colorPolicyAllow);
}
#frame-edit {
	position: absolute;
	width: 270px;
	left: 40px;
	top: -50px;
	box-shadow: 0 0 25px #444;
	transition: 500ms ease-out;
	transition-property: opacity, visibility;
	visibility: visible;
	opacity: 1;
}
#frame-edit[data-hidden="true"] {
	visibility: hidden;
	opacity: 0;
}
#frame-edit .policies label {
	padding-bottom: 0;
}
#frame-edit .policies img {
	width: 25px;
}
#frame-edit .triangle {
	overflow: hidden;
	position: absolute;
	top: 32px;
	left: -20px;
	width: 20px;
	height: 30px;
}
#frame-edit .triangle div {
	transform: rotate(45deg);
	height: 30px;
	width: 30px;
	right: -21px;
	position: absolute;
	box-shadow: 0 0 10px #666;
}
#cancel {
	background: url(images/delete.svg) center/20px var(--colorFg);
	border-radius: 200px;
	width: 24px;
	height: 24px;
	position: absolute;
	left: -12px;
	top: -12px;
	transition: all 200ms ease;
}
#cancel:hover {
	background-size: 26px;
	background-color: var(--colorBgDarker)
}