From b94d05d14f638aac24282492a16a556e794d0895 Mon Sep 17 00:00:00 2001 From: gorhill Date: Tue, 26 May 2015 08:43:46 -0400 Subject: [PATCH] minor epicker dialog restyling --- src/background.html | 2 +- src/css/logger-ui.css | 2 +- src/epicker.html | 63 +++++++++++++++++++++---------------- src/js/url-net-filtering.js | 2 +- 4 files changed, 39 insertions(+), 30 deletions(-) diff --git a/src/background.html b/src/background.html index 786cd81c2..b3d0820f3 100644 --- a/src/background.html +++ b/src/background.html @@ -2,7 +2,7 @@ -uBlock +uBlock Origin diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css index 7ad418de4..d21fe8d83 100644 --- a/src/css/logger-ui.css +++ b/src/css/logger-ui.css @@ -342,7 +342,7 @@ body[dir="rtl"] #popupContainer > div { } #urlFilteringMenu .dialog > table.toolbar select { font: 14px; - height: 1.8em; + height: 2em; } #urlFilteringMenu .dialog > table.toolbar .fa { cursor: pointer; diff --git a/src/epicker.html b/src/epicker.html index 0d51f2690..d493aa8a4 100644 --- a/src/epicker.html +++ b/src/epicker.html @@ -19,57 +19,59 @@ ul { margin: 0.25em 0 0 0; } button { - margin: 0 0 0 2px; + background-color: #ccc; border: 1px solid #aaa; - padding: 4px 6px; + border-radius: 3px; box-sizing: border-box; box-shadow: none; - border-radius: 3px; - color: #444; - background-color: #ccc; + color: #000; cursor: pointer; + margin: 0 0 0 2px; + opacity: 0.7; + padding: 4px 6px; } -button:hover { - background-color: #eee; +button:first-of-type { + margin-left: 0; } button:disabled { color: #999; background-color: #ccc; } +button:not(:disabled):hover { + opacity: 1; +} #create:not(:disabled) { background-color: #ffdca8; } +aside { + background-color: #eee; +} section { - border: 1px solid #ccc; + border: 0; box-sizing: border-box; display: inline-block; - height: 8em; position: relative; width: 100%; } -textarea { +section > textarea { background-color: #fff; - border: 0; + border: 1px solid #ccc; box-sizing: border-box; font: 11px monospace; - height: 100%; + height: 6em; overflow: hidden; padding: 0; resize: none; width: 100%; } -div { - bottom: 1px; +section > div { direction: ltr; - opacity: 1; + margin: 2px 0; + text-align: right; +} +section > div > span:last-of-type { position: absolute; - right: 1px; -} -textarea:focus + div { - opacity: 0.2; -} -textarea:focus + div:hover { - opacity: 1; + right: 0; } ul { padding: 0; @@ -77,8 +79,12 @@ ul { text-align: left; overflow: hidden; } -body > ul > li { - padding-top: 3px; +aside > ul { + height: 12em; + overflow-y: auto; +} +aside > ul > li:first-of-type { + margin-bottom: 0.5em; } ul > li > span:nth-of-type(1) { font-weight: bold; @@ -101,7 +107,7 @@ ul > li > ul > li { direction: ltr; } ul > li > ul > li:hover { - background-color: rgba(255,255,255,1); + background-color: white; } svg { position: fixed; @@ -124,7 +130,6 @@ svg > path + path { fill: rgba(255,31,31,0.25); } aside { - background-color: rgba(255,255,255,0.9); bottom: 4px; padding: 4px; display: none; @@ -147,7 +152,11 @@ body.paused > aside:hover {