mirror of https://github.com/gorhill/uBlock.git
UI improvements: better, consistent buttons, layout tweaks
This commit is contained in:
Chris
parent
d10312f048
commit
17e307ba2c
|
|
@ -13,13 +13,15 @@
|
|||
<button id="buttonApply" class="custom reloadAll disabled" data-i18n="3pApplyChanges"></button>
|
||||
<ul id="options">
|
||||
<li><input type="checkbox" id="autoUpdate"><label data-i18n="3pAutoUpdatePrompt1" for="autoUpdate"></label> 
|
||||
<button class="custom reloadAll disabled" id="buttonUpdate" data-i18n="3pUpdateNow"></button>
|
||||
<button id="buttonPurgeAll" class="custom disabled" data-i18n="3pPurgeAll"></button>
|
||||
<li><input type="checkbox" id="parseCosmeticFilters"><label data-i18n="3pParseAllABPHideFiltersPrompt1" for="parseCosmeticFilters"></label>
|
||||
<button class="whatisthis"></button>
|
||||
<div class="whatisthis-expandable para" data-i18n="3pParseAllABPHideFiltersInfo"></div>
|
||||
<li><p id="listsOfBlockedHostsPrompt"></p>
|
||||
</ul>
|
||||
<div id="3pActionButtons">
|
||||
<button class="custom reloadAll disabled" id="buttonUpdate" data-i18n="3pUpdateNow"></button>
|
||||
<button id="buttonPurgeAll" class="custom disabled" data-i18n="3pPurgeAll"></button>
|
||||
</div>
|
||||
<p id="listsOfBlockedHostsPrompt"></p>
|
||||
<ul id="lists"></ul>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
"description":"appears as tab name in dashboard"
|
||||
},
|
||||
"popupPowerSwitchInfo":{
|
||||
"message":"Click: disable\/enable uBlock for this site.\n\nCtrl+click: disable uBlock only on this page.",
|
||||
"message":"Click: disable\/enable uBlock for this site.",
|
||||
"description":"English: Click: disable\/enable uBlock for this site.\n\nCtrl+click: disable uBlock only on this page."
|
||||
},
|
||||
"popupBlockedRequestPrompt":{
|
||||
|
|
|
|||
|
|
@ -2,9 +2,15 @@ ul {
|
|||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
label {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
#options li {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
#3pActionButtons {
|
||||
margin-top: 5px;
|
||||
}
|
||||
#lists {
|
||||
margin: 0.5em 0 4em 0;
|
||||
padding-left: 1em;
|
||||
|
|
@ -71,34 +77,6 @@ li.listEntry > a:nth-of-type(2) {
|
|||
.dim {
|
||||
opacity: 0.5;
|
||||
}
|
||||
/* I designed the button with: http://charliepark.org/bootstrap_buttons/ */
|
||||
button.custom {
|
||||
padding: 5px;
|
||||
border: 1px solid transparent;
|
||||
border-color: #80b3ff #80b3ff hsl(216, 100%, 75%);
|
||||
border-radius: 3px;
|
||||
background-color: hsl(216, 100%, 75%);
|
||||
background-image: linear-gradient(#a8cbff, #80b3ff);
|
||||
background-repeat: repeat-x;
|
||||
color: #222;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
}
|
||||
button.custom.disabled {
|
||||
border-color: #dddddd #dddddd hsl(36, 0%, 85%);
|
||||
background-color: hsl(36, 0%, 72%);
|
||||
background-image: linear-gradient(#f2f2f2, #dddddd);
|
||||
color: #aaa;
|
||||
pointer-events: none;
|
||||
}
|
||||
button.custom:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
button.custom.reloadAll:not(.disabled) {
|
||||
border-color: #ffcc7f #ffcc7f hsl(36, 100%, 73%);
|
||||
background-color: hsl(36, 100%, 75%);
|
||||
background-image: linear-gradient(#ffdca8, #ffcc7f);
|
||||
}
|
||||
#buttonApply {
|
||||
display: initial;
|
||||
margin: 1em 0;
|
||||
|
|
@ -115,6 +93,10 @@ body[dir=rtl] #buttonApply {
|
|||
#buttonApply.disabled {
|
||||
display: none;
|
||||
}
|
||||
button.disabled {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
span.status {
|
||||
margin: 0 0 0 1em;
|
||||
border: 1px solid transparent;
|
||||
|
|
@ -176,10 +158,8 @@ body.busy #busyOverlay {
|
|||
top: 0;
|
||||
}
|
||||
#busyOverlay > div:nth-of-type(2) {
|
||||
background-color: #eee;
|
||||
border: 1px solid transparent;
|
||||
border-color: #80b3ff #80b3ff hsl(216, 100%, 75%);
|
||||
border-radius: 3px;
|
||||
background-color: dimgray;
|
||||
border-radius: 1.5em;
|
||||
box-sizing: border-box;
|
||||
height: 3em;
|
||||
left: 10%;
|
||||
|
|
@ -188,10 +168,9 @@ body.busy #busyOverlay {
|
|||
width: 80%;
|
||||
}
|
||||
#busyOverlay > div:nth-of-type(2) > div:nth-of-type(1) {
|
||||
background-color: hsl(216, 100%, 75%);
|
||||
background-image: linear-gradient(#a8cbff, #80b3ff);
|
||||
background-repeat: repeat-x;
|
||||
background: dodgerblue;
|
||||
border: 0;
|
||||
border-radius: 1.5em;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
|
|
@ -202,7 +181,7 @@ body.busy #busyOverlay {
|
|||
transition:0.5s width;
|
||||
}
|
||||
#busyOverlay > div:nth-of-type(2) > div:nth-of-type(2) {
|
||||
color: #222;
|
||||
color: #eee;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -21,19 +21,23 @@ button {
|
|||
padding: 7px;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
background: #ddd;
|
||||
color: #444;
|
||||
background: dimgray;
|
||||
color: #eee;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #aaa;
|
||||
border: 1px solid dimgray;
|
||||
cursor: pointer;
|
||||
-webkit-transition: 0.2s background, 0.2s border-color, 0.2s box-shadow;
|
||||
transition: 0.2s background, 0.2s border-color, 0.2s box-shadow;
|
||||
-webkit-transition: 0.2s background, 0.2s border, 0.2s box-shadow;
|
||||
transition: 0.2s background, 0.2s border, 0.2s box-shadow;
|
||||
}
|
||||
button:hover {
|
||||
border-color: dodgerblue;
|
||||
background: #fafafa;
|
||||
box-shadow: 0 0 15px rgba(0,0,0,0.2);
|
||||
color: black;
|
||||
background: dodgerblue;
|
||||
box-shadow: 0 0 15px rgba(0,0,0,0.4);
|
||||
border-radius: 0;
|
||||
color: white;
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
div > p:first-child {
|
||||
margin-top: 0;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ html, body {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background:#fafafa;
|
||||
background:#fdfdfd;
|
||||
color:#444;
|
||||
}
|
||||
body {
|
||||
|
|
@ -33,6 +33,13 @@ body {
|
|||
font-size: larger;
|
||||
font-weight: bold;
|
||||
}
|
||||
.homepageLink {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.homepageLink:hover {
|
||||
color: dodgerblue;
|
||||
}
|
||||
.tabButton {
|
||||
background-color: #ddd;
|
||||
border: 1px solid #aaa;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<body>
|
||||
<div id="dashboard-nav">
|
||||
<div id="dashboard-nav-widgets">
|
||||
<span data-i18n="extName"></span>
|
||||
<a class="homepageLink" href="https://chrismatic.io/ublock/" target="_blank"><span data-i18n="extName"></span></a>
|
||||
<a class="tabButton" href="#settings.html" data-i18n="settingsPageName"></a>
|
||||
<a class="tabButton" href="#3p-filters.html" data-i18n="3pPageName"></a>
|
||||
<a class="tabButton" href="#1p-filters.html" data-i18n="1pPageName"></a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue