Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: skin/options.css

Issue 29333819: Issue 2375 - Implement "Blocking lists" section in new options page (Closed)
Patch Set: Addressed Thomas comments Created Jan. 22, 2016, 9:53 a.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« options.js ('K') | « options.js ('k') | skin/options-sprite.png » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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;
}
@@ -345,7 +345,7 @@
}
.table.list li:nth-child(odd),
Thomas Greiner 2016/01/25 15:40:38 I guess you'd also want to do change it here.
saroyanm 2016/01/26 18:36:20 Done.
-.table.cols li:nth-child(even),
+.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,
+#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,129 @@
Advanced tab content
*/
+#blocking-lists > div
+{
+ display: none;
+}
+
+body[data-tab*="filter-lists"] #filter-lists,
+body[data-tab*="custom-filters"] #custom-filters
+{
+ display: block;
+}
+
+body[data-tab*="filter-lists"] #content-advanced [data-tab="advanced,filter-lists"],
+body[data-tab*="custom-filters"] #content-advanced [data-tab="advanced,custom-filters"]
+{
+ border-bottom: 2px solid #1E8728;
+ padding-bottom: 10px;
+ color: black;
+ font-weight: 600;
+}
+
+#filter-lists .table
+{
+ display: inline-block;
+}
+
+#filter-lists .table li
+{
+ padding-left: 16px;
+ padding-right: 16px;
+}
+
+#filter-lists .table li > span:first-of-type
+{
+ display: inline-block;
+ width: 330px;
+}
+
+.table-header
+{
+ display: flex;
+}
+
+.table-header 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;
+}
+
+#filter-lists .table li span.display
+{
+ cursor: pointer;
+}
+
+#filter-lists .table .head span:first-child
+{
+ -webkit-padding-start: 38px;
+ -moz-padding-start: 38px;
+}
+
+#filter-lists .controls
+{
+ padding-top: 0px;
+ border-top: none;
+}
+
+#filter-lists .controls button
+{
+ margin-top: 14px;
+}
+
+#filter-lists .arrow
+{
+ border-style: none;
+ padding: 0px;
+ width: 6px;
+ height: 4px;
+ margin: 0px;
+ background-color: transparent;
+ background-position: -1px -54px;
+}
+
+#filter-lists .table li:last-of-type a
+{
+ color: #3A7BA6;
+ text-decoration: none;
+}
+
+#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 +876,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 +901,20 @@
text-decoration: none;
}
+.context-menu
Thomas Greiner 2016/01/27 17:16:58 According to the style guide there should be 6px b
saroyanm 2016/01/28 17:00:12 Sorry, from some point I missed the style-guide an
Thomas Greiner 2016/01/29 17:48:08 There's still no 6px between the title and the arr
saroyanm 2016/01/29 18:56:17 my fault, were thinking about the 6px vertically b
+{
+ 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 +968,8 @@
transition-delay: 0ms;
}
-div[role="tooltip"]::before
+div[role="tooltip"]::before,
+div.container::before
Thomas Greiner 2016/01/25 15:40:38 Was it intentional to call the class "container" e
saroyanm 2016/01/26 18:36:20 Not sure why I named it so, but I agree with you t
{
background-image: url(options-sprite.png);
background-position: -8px -42px;
@@ -855,6 +981,94 @@
left: 30px;
}
+div.container
+{
+ position: absolute;
+ top: 21px;
+ z-index: 1;
+ visibility: hidden;
+}
+
+li.context div.container
+{
+ visibility: visible;
+}
+
+div.container::before
+{
+ left: -4px;
+}
+
+html[dir="rtl"] div.container::before
+{
+ left: inherit;
+ right: -4px;
+}
+
+.context-menu div.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.container > div
+{
+ left: inherit;
+ right: -50%;
+}
+
+div.container > div a::before
+{
+ content: "";
+ -moz-margin-end: 8px;
+ -webkit-margin-end: 8px;
+}
+
+div.container > div a
+{
+ display: block;
+ text-decoration: none;
+ padding: 6px 0px;
+ border-bottom: 1px solid #CDCDCD;
+ cursor: pointer;
+ vertical-align: middle;
+}
+
+div.container > div a:before
+{
+ vertical-align: middle;
+ height: 16px;
+ width: 16px;
+}
+
+div.container > div a:last-child
+{
+ border: none;
+}
+
+div.container [data-action="update-now"]::before
+{
+ background-position: -38px -31px;
+}
+
+div.container [data-action="website"]::before
+{
+ background-position: -33px -47px;
+}
+
+div.container [data-action="source"]::before
+{
+ background-position: -53px -34px;
+}
+
+div.container [data-action="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
{
« options.js ('K') | « options.js ('k') | skin/options-sprite.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld