Index: skin/options.css |
=================================================================== |
--- a/skin/options.css |
+++ b/skin/options.css |
@@ -183,9 +183,9 @@ |
padding: 14px 20px; |
} |
-body[data-tab="general"] #tab-general, |
-body[data-tab="advanced"] #tab-advanced, |
-body[data-tab="help"] #tab-help |
+body[data-tab|="general"] #tab-general, |
+body[data-tab|="advanced"] #tab-advanced, |
+body[data-tab|="help"] #tab-help |
{ |
background-color: #FFFFFF; |
border-radius: 3px 0px 0px 3px; |
@@ -203,9 +203,9 @@ |
-webkit-padding-start: 21px; |
} |
-html[dir="rtl"] body[data-tab="general"] #tab-general, |
-html[dir="rtl"] body[data-tab="advanced"] #tab-advanced, |
-html[dir="rtl"] body[data-tab="help"] #tab-help |
+html[dir="rtl"] body[data-tab|="general"] #tab-general, |
+html[dir="rtl"] body[data-tab|="advanced"] #tab-advanced, |
+html[dir="rtl"] body[data-tab|="help"] #tab-help |
{ |
border-radius: 0px 3px 3px 0px; |
} |
@@ -310,9 +310,9 @@ |
display: none; |
} |
-body[data-tab="general"] #content-general, |
-body[data-tab="advanced"] #content-advanced, |
-body[data-tab="help"] #content-help |
+body[data-tab|="general"] #content-general, |
+body[data-tab|="advanced"] #content-advanced, |
+body[data-tab|="help"] #content-help |
{ |
display: block; |
} |
@@ -344,8 +344,8 @@ |
flex: 1; |
} |
-.table.list li:nth-child(odd), |
-.table.cols li:nth-child(even), |
+.table.list li:nth-of-type(odd), |
+.table.cols li:nth-of-type(odd), |
.table li.empty-placeholder |
{ |
background-color: #F5F5F5; |
@@ -356,27 +356,10 @@ |
vertical-align: top; |
} |
-.table.cols span |
-{ |
- display: inline-block; |
- width: 30%; |
-} |
- |
-.table.cols .col-name |
+.table.cols |
{ |
border-bottom: 1px solid #CDCDCD; |
-} |
- |
-.table.cols .col-name span |
-{ |
- display: inline-block; |
- width: 30%; |
-} |
- |
-.table.cols .col-name span:first-child |
-{ |
- -webkit-padding-start: 38px; |
- -moz-padding-start: 38px; |
+ border-top: 1px solid #CDCDCD; |
} |
.table::-webkit-scrollbar, |
@@ -428,6 +411,12 @@ |
visibility: visible; |
} |
+input[disabled="true"]::before |
+{ |
+ background-color: #ccc; |
+ border-radius: 2px; |
+} |
+ |
.table button.delete |
{ |
background-color: transparent; |
@@ -452,32 +441,31 @@ |
.tabs.horizontal |
{ |
+ display: flex; |
margin-bottom: 0px; |
padding: 0px; |
} |
.tabs.horizontal li |
{ |
+ display: inline-block; |
border-bottom: 1px solid #A1A1A1; |
- display: inline-block; |
color: #3A7BA6; |
- padding: 10px 0px 11px 0px; |
+ padding: 10px 46px; |
text-align: center; |
- width: 50%; |
} |
-.tabs.horizontal li.active |
-{ |
- border-bottom: 2px solid #1E8728; |
- color: black; |
- font-weight: 600; |
- padding-bottom: 10px; |
-} |
- |
-.icon, .table input[type="checkbox"]::before, .table button.delete, |
-#content-help a::before, #dialog-close::before, |
+.icon, |
+.table input[type="checkbox"]::before, |
+.table button.delete, |
+#content-help a::before, |
+#dialog-close::before, |
#custom-filters-add button::after, |
-#dialog-body button::before |
+#dialog-body button::before, |
+.date::before, |
+.time::before, |
+#all-filter-lists .arrow, |
+.context-menu .content a::before |
{ |
background-image: url(options-sprite.png); |
display: inline-block; |
@@ -621,7 +609,7 @@ |
.icon-enter |
{ |
- background-position: -18px -85px; |
+ background-position: -18px -32px; |
cursor: pointer; |
height: 10px; |
position: absolute; |
@@ -643,6 +631,130 @@ |
Advanced tab content |
*/ |
+#filter-lists > div |
+{ |
+ display: none; |
+} |
+ |
+body[data-tab="advanced-allFilterLists"] #all-filter-lists, |
+body[data-tab="advanced-customFilters"] #custom-filters |
+{ |
+ display: block; |
+} |
+ |
+body[data-tab="advanced-allFilterLists"] #content-advanced [data-tab="advanced-allFilterLists"], |
+body[data-tab="advanced-customFilters"] #content-advanced [data-tab="advanced-customFilters"] |
+{ |
+ border-bottom: 2px solid #1E8728; |
+ padding-bottom: 10px; |
+ color: black; |
+ font-weight: 600; |
+} |
+ |
+#all-filter-lists .table |
+{ |
+ display: inline-block; |
+} |
+ |
+#all-filter-lists .table li |
+{ |
+ padding-left: 16px; |
+ padding-right: 16px; |
+} |
+ |
+#all-filter-lists .table li > span:first-of-type |
+{ |
+ display: inline-block; |
+ width: 330px; |
+} |
+ |
+.table-header |
+{ |
+ display: flex; |
+} |
+ |
+#filter-lists h3 |
+{ |
+ display: inline-block; |
+ margin-bottom: 7px; |
+ font-size: 14px; |
+} |
+ |
+.table-header h3:first-child |
+{ |
+ width: 330px; |
+ -webkit-padding-start: 54px; |
+ -moz-padding-start: 54px; |
+} |
+ |
+#all-filter-lists .table li span.display |
+{ |
+ cursor: pointer; |
+} |
+ |
+#all-filter-lists .table .head span:first-child |
+{ |
+ -webkit-padding-start: 38px; |
+ -moz-padding-start: 38px; |
+} |
+ |
+#all-filter-lists .controls |
+{ |
+ padding-top: 0px; |
+ border-top: none; |
+} |
+ |
+#all-filter-lists .controls button |
+{ |
+ margin-top: 14px; |
+} |
+ |
+#all-filter-lists .arrow |
+{ |
+ border-style: none; |
+ padding: 0px; |
+ width: 6px; |
+ height: 4px; |
+ margin: 0px; |
+ background-color: transparent; |
+ background-position: -1px -54px; |
+} |
+ |
+#all-filter-lists .table li:last-of-type a |
+{ |
+ color: #3A7BA6; |
+ text-decoration: none; |
+ cursor: pointer; |
+} |
+ |
+#all-filter-lists .table li:last-of-type span:last-child |
+{ |
+ -webkit-margin-start: auto; |
+ -moz-margin-start: auto; |
+} |
+ |
+.date::before |
+{ |
+ content: ""; |
+ -webkit-margin-end: 6px; |
+ -moz-margin-end: 6px; |
+ height: 12px; |
+ width: 12px; |
+ background-position: -7px -49px; |
+} |
+ |
+.time::before |
+{ |
+ content: ""; |
+ -webkit-margin-end: 6px; |
+ -moz-margin-end: 6px; |
+ -webkit-margin-start: 12px; |
+ -moz-margin-start: 12px; |
+ height: 12px; |
+ width: 12px; |
+ background-position: -20px -49px; |
+} |
+ |
#custom-filters-header |
{ |
padding: 0px 20px; |
@@ -765,7 +877,7 @@ |
#custom-filters-add button::after |
{ |
content: ""; |
- background-position: -28px -85px; |
+ background-position: -28px -32px; |
cursor: pointer; |
height: 10px; |
-webkit-margin-start: 6px; |
@@ -790,6 +902,20 @@ |
text-decoration: none; |
} |
+.context-menu |
+{ |
+ display: inline-block; |
+ position: relative; |
+ border-bottom: none; |
+} |
+ |
+.context-menu a |
+{ |
+ vertical-align: middle; |
+ white-space: nowrap; |
+ color: #FFF; |
+} |
+ |
#content-advanced .tooltip |
{ |
-moz-margin-start: 8px; |
@@ -843,7 +969,8 @@ |
transition-delay: 0ms; |
} |
-div[role="tooltip"]::before |
+div[role="tooltip"]::before, |
+div.context-menu-container::before |
{ |
background-image: url(options-sprite.png); |
background-position: -8px -42px; |
@@ -855,6 +982,94 @@ |
left: 30px; |
} |
+div.context-menu-container |
+{ |
+ position: absolute; |
+ top: 21px; |
+ z-index: 1; |
+ visibility: hidden; |
+} |
+ |
+li.context div.context-menu-container |
+{ |
+ visibility: visible; |
+} |
+ |
+div.context-menu-container::before |
+{ |
+ left: -4px; |
+} |
+ |
+html[dir="rtl"] div.context-menu-container::before |
+{ |
+ left: inherit; |
+ right: -4px; |
+} |
+ |
+.context-menu div.context-menu-container > div |
+{ |
+ position: relative; |
+ left: calc(-50% + 2px); |
+ background-color: rgba(45, 45, 45, 0.95); |
+ padding: 0px 10px; |
+ border-radius: 3px; |
+} |
+ |
+html[dir="rtl"] div.context-menu-container > div |
+{ |
+ left: inherit; |
+ right: -50%; |
+} |
+ |
+div.context-menu-container > div a::before |
+{ |
+ content: ""; |
+ -moz-margin-end: 8px; |
+ -webkit-margin-end: 8px; |
+} |
+ |
+div.context-menu-container > div a |
+{ |
+ display: block; |
+ text-decoration: none; |
+ padding: 6px 0px; |
+ border-bottom: 1px solid #CDCDCD; |
+ cursor: pointer; |
+ vertical-align: middle; |
+} |
+ |
+div.context-menu-container > div a:before |
+{ |
+ vertical-align: middle; |
+ height: 16px; |
+ width: 16px; |
+} |
+ |
+div.context-menu-container > div a:last-child |
+{ |
+ border: none; |
+} |
+ |
+.context-menu .update-now::before |
+{ |
+ background-position: -38px -31px; |
+} |
+ |
+.context-menu .website::before |
+{ |
+ background-position: -33px -47px; |
+} |
+ |
+.context-menu .source::before |
+{ |
+ background-position: -53px -34px; |
+} |
+ |
+.context-menu .delete::before |
+{ |
+ background-position: -71px -34px; |
+} |
+ |
html[dir="ltr"] div[role="tooltip"].flip-vertical::before, |
html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)::before |
{ |