mirror of
https://github.com/gorhill/uBlock.git
synced 2024-09-18 17:02:27 +02:00
This commit is contained in:
Raymond Hill
parent
ee36b3ddd5
commit
35f939f993
304
src/epicker.html
304
src/epicker.html
@ -1,198 +1,202 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<title>uBlock Origin Element Picker</title>
|
||||||
<style>
|
<style>
|
||||||
:focus {
|
html#ublock0-epicker,
|
||||||
outline: none;
|
#ublock0-epicker body {
|
||||||
}
|
|
||||||
html, body {
|
|
||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
color: black;
|
color: black !important;
|
||||||
font: 12px sans-serif;
|
font: 12px sans-serif !important;
|
||||||
height: 100%;
|
height: 100% !important;
|
||||||
margin: 0;
|
margin: 0 !important;
|
||||||
overflow: hidden;
|
overflow: hidden !important;
|
||||||
width: 100%;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
ul, li, div {
|
#ublock0-epicker :focus {
|
||||||
display: block;
|
outline: none !important;
|
||||||
}
|
}
|
||||||
ul {
|
#ublock0-epicker ul,
|
||||||
margin: 0.25em 0 0 0;
|
#ublock0-epicker li,
|
||||||
|
#ublock0-epicker div {
|
||||||
|
display: block !important;
|
||||||
}
|
}
|
||||||
button {
|
#ublock0-epicker ul {
|
||||||
background-color: #ccc;
|
margin: 0.25em 0 0 0 !important;
|
||||||
border: 1px solid #aaa;
|
|
||||||
border-radius: 3px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
box-shadow: none;
|
|
||||||
color: #000;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 0 0 0 2px;
|
|
||||||
opacity: 0.7;
|
|
||||||
padding: 4px 6px;
|
|
||||||
}
|
}
|
||||||
button:first-of-type {
|
#ublock0-epicker button {
|
||||||
margin-left: 0;
|
background-color: #ccc !important;
|
||||||
|
border: 1px solid #aaa !important;
|
||||||
|
border-radius: 3px !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
color: #000 !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
margin: 0 0 0 2px !important;
|
||||||
|
opacity: 0.7 !important;
|
||||||
|
padding: 4px 6px !important;
|
||||||
}
|
}
|
||||||
button:disabled {
|
#ublock0-epicker button:first-of-type {
|
||||||
color: #999;
|
margin-left: 0 !important;
|
||||||
background-color: #ccc;
|
|
||||||
}
|
}
|
||||||
button:not(:disabled):hover {
|
#ublock0-epicker button:disabled {
|
||||||
opacity: 1;
|
color: #999 !important;
|
||||||
|
background-color: #ccc !important;
|
||||||
}
|
}
|
||||||
#create:not(:disabled) {
|
#ublock0-epicker button:not(:disabled):hover {
|
||||||
background-color: hsl(36, 100%, 83%);
|
opacity: 1 !important;
|
||||||
border-color: hsl(36, 50%, 60%);
|
|
||||||
}
|
}
|
||||||
#preview {
|
#ublock0-epicker #create:not(:disabled) {
|
||||||
float: left;
|
background-color: hsl(36, 100%, 83%) !important;
|
||||||
|
border-color: hsl(36, 50%, 60%) !important;
|
||||||
}
|
}
|
||||||
body.preview #preview {
|
#ublock0-epicker #preview {
|
||||||
background-color: hsl(204, 100%, 83%);
|
float: left !important;
|
||||||
border-color: hsl(204, 50%, 60%);
|
|
||||||
}
|
}
|
||||||
section {
|
#ublock0-epicker body.preview #preview {
|
||||||
border: 0;
|
background-color: hsl(204, 100%, 83%) !important;
|
||||||
box-sizing: border-box;
|
border-color: hsl(204, 50%, 60%) !important;
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
section > div:first-child {
|
#ublock0-epicker section {
|
||||||
border: 1px solid #aaa;
|
border: 0 !important;
|
||||||
margin: 0;
|
box-sizing: border-box !important;
|
||||||
position: relative;
|
display: inline-block !important;
|
||||||
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
section.invalidFilter > div:first-child {
|
#ublock0-epicker section > div:first-child {
|
||||||
border-color: red;
|
border: 1px solid #aaa !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
position: relative !important;
|
||||||
}
|
}
|
||||||
section > div:first-child > textarea {
|
#ublock0-epicker section.invalidFilter > div:first-child {
|
||||||
background-color: #fff;
|
border-color: red !important;
|
||||||
border: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: #000;
|
|
||||||
font: 11px monospace;
|
|
||||||
height: 8em;
|
|
||||||
margin: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 2px;
|
|
||||||
resize: none;
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
#resultsetCount {
|
#ublock0-epicker section > div:first-child > textarea {
|
||||||
background-color: #aaa;
|
background-color: #fff !important;
|
||||||
bottom: 0;
|
border: none !important;
|
||||||
color: white;
|
box-sizing: border-box !important;
|
||||||
padding: 2px 4px;
|
color: #000 !important;
|
||||||
position: absolute;
|
font: 11px monospace !important;
|
||||||
right: 0;
|
height: 8em !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
overflow-y: auto !important;
|
||||||
|
padding: 2px !important;
|
||||||
|
resize: none !important;
|
||||||
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
section.invalidFilter #resultsetCount {
|
#ublock0-epicker #resultsetCount {
|
||||||
background-color: red;
|
background-color: #aaa !important;
|
||||||
|
bottom: 0 !important;
|
||||||
|
color: white !important;
|
||||||
|
padding: 2px 4px !important;
|
||||||
|
position: absolute !important;
|
||||||
|
right: 0 !important;
|
||||||
}
|
}
|
||||||
section > div:first-child + div {
|
#ublock0-epicker section.invalidFilter #resultsetCount {
|
||||||
direction: ltr;
|
background-color: red !important;
|
||||||
margin: 2px 0;
|
|
||||||
text-align: right;
|
|
||||||
}
|
}
|
||||||
ul {
|
#ublock0-epicker section > div:first-child + div {
|
||||||
padding: 0;
|
direction: ltr !important;
|
||||||
list-style-type: none;
|
margin: 2px 0 !important;
|
||||||
text-align: left;
|
text-align: right !important;
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
aside > ul {
|
#ublock0-epicker ul {
|
||||||
max-height: 16em;
|
padding: 0 !important;
|
||||||
overflow-y: auto;
|
list-style-type: none !important;
|
||||||
|
text-align: left !important;
|
||||||
|
overflow: hidden !important;
|
||||||
}
|
}
|
||||||
aside > ul > li:first-of-type {
|
#ublock0-epicker aside > ul {
|
||||||
margin-bottom: 0.5em;
|
max-height: 16em !important;
|
||||||
|
overflow-y: auto !important;
|
||||||
}
|
}
|
||||||
ul > li > span:nth-of-type(1) {
|
#ublock0-epicker aside > ul > li:first-of-type {
|
||||||
font-weight: bold;
|
margin-bottom: 0.5em !important;
|
||||||
}
|
}
|
||||||
ul > li > span:nth-of-type(2) {
|
#ublock0-epicker ul > li > span:nth-of-type(1) {
|
||||||
font-size: smaller;
|
font-weight: bold !important;
|
||||||
color: gray;
|
|
||||||
}
|
}
|
||||||
ul > li > ul {
|
#ublock0-epicker ul > li > span:nth-of-type(2) {
|
||||||
list-style-type: none;
|
font-size: smaller !important;
|
||||||
margin: 0 0 0 1em;
|
color: gray !important;
|
||||||
overflow: hidden;
|
|
||||||
text-align: left;
|
|
||||||
}
|
}
|
||||||
ul > li > ul > li {
|
#ublock0-epicker ul > li > ul {
|
||||||
font: 11px monospace;
|
list-style-type: none !important;
|
||||||
white-space: nowrap;
|
margin: 0 0 0 1em !important;
|
||||||
cursor: pointer;
|
overflow: hidden !important;
|
||||||
direction: ltr;
|
text-align: left !important;
|
||||||
}
|
}
|
||||||
ul > li > ul > li:hover {
|
#ublock0-epicker ul > li > ul > li {
|
||||||
background-color: white;
|
font: 11px monospace !important;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
direction: ltr !important;
|
||||||
}
|
}
|
||||||
svg {
|
#ublock0-epicker ul > li > ul > li:hover {
|
||||||
position: fixed;
|
background-color: white !important;
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
cursor: crosshair;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
.paused > svg {
|
#ublock0-epicker svg {
|
||||||
cursor: not-allowed;
|
position: fixed !important;
|
||||||
|
top: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
cursor: crosshair !important;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
}
|
}
|
||||||
svg > path:first-child {
|
#ublock0-epicker .paused > svg {
|
||||||
fill: rgba(0,0,0,0.5);
|
cursor: not-allowed !important;
|
||||||
fill-rule: evenodd;
|
|
||||||
}
|
}
|
||||||
svg > path + path {
|
#ublock0-epicker svg > path:first-child {
|
||||||
stroke: #F00;
|
fill: rgba(0,0,0,0.5) !important;
|
||||||
stroke-width: 0.5px;
|
fill-rule: evenodd !important;
|
||||||
fill: rgba(255,63,63,0.20);
|
|
||||||
}
|
}
|
||||||
body.zap svg > path + path {
|
#ublock0-epicker svg > path + path {
|
||||||
stroke: #FF0;
|
stroke: #F00 !important;
|
||||||
stroke-width: 0.5px;
|
stroke-width: 0.5px !important;
|
||||||
fill: rgba(255,255,63,0.20);
|
fill: rgba(255,63,63,0.20) !important;
|
||||||
}
|
}
|
||||||
body.preview svg > path {
|
#ublock0-epicker body.zap svg > path + path {
|
||||||
fill: rgba(0,0,0,0.10);
|
stroke: #FF0 !important;
|
||||||
|
stroke-width: 0.5px !important;
|
||||||
|
fill: rgba(255,255,63,0.20) !important;
|
||||||
}
|
}
|
||||||
body.preview svg > path + path {
|
#ublock0-epicker body.preview svg > path {
|
||||||
stroke: none;
|
fill: rgba(0,0,0,0.10) !important;
|
||||||
}
|
}
|
||||||
aside {
|
#ublock0-epicker body.preview svg > path + path {
|
||||||
background-color: #eee;
|
stroke: none !important;
|
||||||
border: 1px solid #aaa;
|
|
||||||
bottom: 4px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
min-width: 24em;
|
|
||||||
padding: 4px;
|
|
||||||
position: fixed;
|
|
||||||
right: 4px;
|
|
||||||
visibility: hidden;
|
|
||||||
width: calc(40% - 4px);
|
|
||||||
}
|
}
|
||||||
body.paused > aside {
|
#ublock0-epicker aside {
|
||||||
opacity: 0.1;
|
background-color: #eee !important;
|
||||||
visibility: visible;
|
border: 1px solid #aaa !important;
|
||||||
z-index: 100;
|
bottom: 4px !important;
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
min-width: 24em !important;
|
||||||
|
padding: 4px !important;
|
||||||
|
position: fixed !important;
|
||||||
|
right: 4px !important;
|
||||||
|
visibility: hidden !important;
|
||||||
|
width: calc(40% - 4px) !important;
|
||||||
}
|
}
|
||||||
body.paused > aside:hover {
|
#ublock0-epicker body.paused > aside {
|
||||||
opacity: 1;
|
opacity: 0.1 !important;
|
||||||
|
visibility: visible !important;
|
||||||
|
z-index: 100 !important;
|
||||||
}
|
}
|
||||||
body.paused > aside.show {
|
#ublock0-epicker body.paused > aside:hover {
|
||||||
opacity: 1;
|
opacity: 1 !important;
|
||||||
}
|
}
|
||||||
body.paused > aside.hide {
|
#ublock0-epicker body.paused > aside.show {
|
||||||
opacity: 0.1;
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
#ublock0-epicker body.paused > aside.hide {
|
||||||
|
opacity: 0.1 !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body direction="{{bidi_dir}}">
|
<body direction="{{bidi_dir}}">
|
||||||
<svg><path></path><path></path></svg>
|
<svg><path d></path><path d></path></svg>
|
||||||
<aside>
|
<aside>
|
||||||
<section>
|
<section>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user