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

Unified Diff: skin/desktop-options.css

Issue 29601581: Issue 5872 - apply style changes (Closed)
Patch Set: Created Nov. 15, 2017, 10:37 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
« no previous file with comments | « desktop-options.html ('k') | skin/icons/checkbox.svg » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: skin/desktop-options.css
===================================================================
--- a/skin/desktop-options.css
+++ b/skin/desktop-options.css
@@ -58,26 +58,27 @@
overflow-y: scroll;
margin: 1.2rem 0.3rem;
ire 2017/11/15 13:49:28 The vertical margin should be 1rem
saroyanm 2017/11/15 14:51:23 Done.
font-family: "Source Sans Pro", sans-serif;
- font-size: 1.25rem;
- color: #494949;
+ font-size: 1rem;
+ line-height: 1.5rem;
+ color: #4A4A4A;
}
h1
{
font-size: 3rem;
font-weight: 300;
+ line-height: 3rem;
}
h2
{
- font-size: 1.375rem;
+ font-size: 1.125rem;
font-weight: 700;
}
a
{
- color: #099CD0;
- text-decoration: none;
+ color: #077CA6;
}
a:hover
@@ -106,6 +107,21 @@
}
/*
+ Normalization
+ */
+
+input,
+button
+{
+ font-family: inherit;
+}
+
+button
+{
+ border-radius: 0rem;
+}
+
+/*
Buttons and links
*/
@@ -113,9 +129,9 @@
.button
{
display: block;
- padding: 0.8rem 1.2rem;
+ padding: 0.6rem 0.8rem;
background-color: transparent;
- font-size: 1.125rem;
+ font-size: 1rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
@@ -127,7 +143,7 @@
{
border: 0px;
color: #FFF;
- background-color: #099CD0;
+ background-color: #077CA6;
}
button.primary:not([disabled]):hover,
@@ -144,20 +160,20 @@
button.secondary,
.button.secondary
{
- border: 1px solid #099CD0;
- color: #099CD0;
+ border: 2px solid #077CA6;
+ color: #077CA6;
}
button.secondary:hover,
.button.secondary:hover
{
- box-shadow: inset 0 0 0 2px #099CD0;
+ box-shadow: inset 0 0 0 1px #077CA6;
}
button[role="checkbox"]
{
- width: 18px;
- height: 18px;
+ width: 1.2rem;
+ height: 1.2rem;
padding: 0px;
border: 0px;
background-color: transparent;
@@ -165,13 +181,13 @@
button[role="checkbox"]:not(.toggle)
{
- background-image: url(icons/checkbox.png);
+ background-image: url(icons/checkbox.svg#off);
display: inline-block;
}
button[role="checkbox"][aria-checked="true"]:not(.toggle)
{
- background-position: 0px 18px;
+ background-image: url(icons/checkbox.svg#on);
}
button[role="checkbox"][disabled],
@@ -199,8 +215,9 @@
button[role="checkbox"].toggle
{
background-position: initial;
- width: 2.25rem;
- height: 1.3rem;
+ width: 1.9rem;
+ height: 1rem;
+ vertical-align: middle;
}
button[role="checkbox"][disabled].toggle
@@ -241,23 +258,27 @@
{
content: "";
display: block;
- height: 1.9rem;
- width: 1.9rem;
+ height: 1rem;
+ width: 1rem;
+ border: 0.2rem solid transparent;
+ background-repeat: no-repeat;
+ background-position: center;
}
button.link,
button.list
{
- color: #099CD0;
+ color: #077CA6;
}
button.link
{
border: 0px;
background-color: transparent;
- font-weight: 300;
+ font-weight: 400;
font-family: inherit;
text-transform: none;
+ text-decoration: underline;
padding: 0.2rem;
}
@@ -270,7 +291,7 @@
{
border-style: solid;;
border-color: #CDCDCD;
- border-width: 0px 1px 1px 1px;
+ border-width: 1px;
width: 100%;
background-color: #E1F2FA;
text-align: initial;
@@ -278,8 +299,8 @@
button.list:hover
{
- box-shadow: inset 0 0 0 3px #099CD0;
- border-color: #099CD0;
+ box-shadow: inset 0 0 0 3px #077CA6;
+ border-color: #077CA6;
}
.side-controls:not(.wrap)
@@ -319,7 +340,7 @@
border-color: #CDCDCD;
border-width: 0px 0px 1px 0px;
outline: none;
- font-size: 1.3rem;
+ font-size: 1rem;
padding: 5px;
width: 100%;
}
@@ -331,7 +352,7 @@
position: absolute;
top: 0.9rem;
left: 0.3rem;
- font-size: 1.3rem;
+ font-size: 1rem;
}
.floating-input input + label,
@@ -448,6 +469,7 @@
{
margin: 0rem;
font-size: 2.4rem;
+ line-height: 2.6rem;
}
html[dir="rtl"] #sidebar header
@@ -473,7 +495,7 @@
margin: 0rem;
padding: 0rem;
position: relative;
- font-size: 1.25rem;
+ font-size: 1rem;
}
[role="tablist"] li a
@@ -516,7 +538,7 @@
{
display: flex;
justify-content: center;
- margin: 1.2rem 0rem;
+ margin: 1rem 0rem;
}
/* This is a stopgap solution of footer overlapping tabs on low resolutions */
@@ -550,7 +572,7 @@
{
background-color: #FFFFFF;
border: 1px solid #CDCDCD;
- max-width: 46.3rem;
+ width: 46.3rem;
padding: 0px 0rem 1.4rem 0rem;
}
@@ -571,7 +593,7 @@
[role="tabpanel"] > section,
[role="tabpanel"] > .section
{
- padding: 2rem;
+ padding: 1.4rem 2rem;
border-top: 1px solid #CDCDCD;
}
@@ -623,14 +645,14 @@
#acceptable-ads ul
{
position: relative;
- padding-left: 2rem;
+ padding-left: 2.2rem;
list-style: none;
}
html[dir="rtl"] #acceptable-ads ul
{
padding-left: 0rem;
- padding-right: 2rem;
+ padding-right: 2.2rem;
}
#acceptable-ads button
@@ -649,25 +671,26 @@
#acceptable-ads label
{
font-weight: 700;
- font-size: 1.375rem;
+ font-size: 1rem;
+ -moz-margin-end: 0.5rem;
+ -webkit-margin-end: 0.5rem;
}
#dnt
{
padding: 0.8rem;
- border: 1px solid #099CD0;
+ border: 1px solid #077CA6;
}
.new
{
display: inline-block;
- margin: 0rem 0.5rem;
- padding: 0.3rem 0.6rem;
+ padding: 0.2rem 0.5rem;
border-radius: 0.2rem;
- background-color: #099CD0;
+ background-color: #077CA6;
color: #FFF;
line-height: 100%;
- font-size: 1rem;
+ font-size: 0.8rem;
text-transform: uppercase;
}
@@ -701,7 +724,7 @@
.list li
{
padding: 0rem;
- margin: 0rem 0rem 1.3rem 0rem;
+ margin-bottom: 0.8rem;
}
.list li [role="checkbox"]
@@ -716,10 +739,15 @@
.table.list li
{
- padding: 0.5rem 1.1rem;
+ padding: 0.5rem 1rem;
margin: 0rem;
}
+.table.list.bottom-control li:last-of-type
+{
+ border-bottom: 0px;
+}
+
li .display
{
margin: 0rem 1rem;
@@ -728,6 +756,7 @@
.table.list li .display
{
flex: 1;
+ margin: 0rem;
}
.table.list li.empty-placeholder
@@ -740,15 +769,11 @@
border-bottom: 0px;
}
-#blocking-languages-table .display
-{
- font-weight: 700;
-}
-
.table.list button.link
{
font-weight: 700;
text-transform: uppercase;
+ text-decoration: none;
}
.table:not(.list):not(.cols) li
@@ -773,43 +798,48 @@
display: flex;
}
-.col4 > *
+.col5 > *
{
display: inline-block;
}
-.col4
+.col5
{
- margin: 0rem 0.9rem;
+ margin: 0rem 1rem;
}
-.th .col4:nth-of-type(1),
-.table .col4:nth-of-type(1)
+.th .col5:nth-of-type(1),
+.table .col5:nth-of-type(1)
{
- flex: 2;
+ flex: 4;
}
-.th .col4:nth-of-type(2),
-.table .col4:nth-of-type(2)
+.th .col5:nth-of-type(2),
+.table .col5:nth-of-type(2)
{
- flex: 3;
+ flex: 8;
}
-.th .col4:nth-of-type(3),
-.table .col4:nth-of-type(3)
+.th .col5:nth-of-type(3),
+.table .col5:nth-of-type(3)
{
- flex: 2;
+ flex: 4;
}
-.th .col4:nth-of-type(4),
-.table .col4:nth-of-type(4)
+.th .col5:nth-of-type(4),
+.table .col5:nth-of-type(4)
{
flex: 1;
}
-.table.cols
+.th .col5:nth-of-type(5),
+.table .col5:nth-of-type(5)
{
- font-size: 1.1rem;
+ flex: 1;
+ -moz-margin-start: 0;
+ -webkit-margin-start: 0;
+ -moz-margin-end: 1.8rem;
+ -webkit-margin-end: 1.8rem;
}
.table.cols .display
@@ -900,8 +930,8 @@
.tooltip::before
{
content: "";
- width: 1.3rem;
- height: 1.3rem;
+ width: 1.1rem;
+ height: 1.1rem;
display: block;
background-image: url(icons/tooltip.svg);
}
@@ -951,9 +981,10 @@
#content-whitelist form input
{
flex: 1;
+ height: 100%;
padding: 0.5rem 1rem;
- font-size: 1.25rem;
- border: 2px solid #099CD0;
+ font-size: 1rem;
+ border: 2px solid #077CA6;
}
#content-whitelist form button
@@ -964,6 +995,8 @@
#whitelisting-table li
{
+ padding-left: 1.4rem;
+ padding-right: 1.4rem;
border-left: 0rem;
border-right: 0rem;
}
@@ -1014,7 +1047,7 @@
#custom-filters-raw:focus
{
outline: none;
- border: 2px solid #099CD0;
+ border: 2px solid #077CA6;
}
#empty-custom-filters
@@ -1037,7 +1070,7 @@
right: -1rem;
margin-top: 1rem;
opacity: 1;
- padding: 1.3rem;
+ padding: 0.2rem 1rem;
position: absolute;
-webkit-transition: opacity 200ms ease-in-out 400ms,
visibility 0ms linear 400ms;
@@ -1057,7 +1090,7 @@
[role="tooltip"],
.context-menu .content
{
- border: 1px solid #099CD0;
+ border: 1px solid #077CA6;
border-radius: 3px;
background-color: #FFFFFF;
}
@@ -1075,8 +1108,8 @@
.context-menu
{
position: absolute;
- right: 3rem;
- top: -3rem;
+ right: 2.5rem;
+ top: -2.7rem;
z-index: 1;
visibility: hidden;
}
@@ -1084,7 +1117,7 @@
html[dir="rtl"] .context-menu
{
right: auto;
- left: 3rem;
+ left: 2.5rem;
}
.context-menu .content
@@ -1112,7 +1145,7 @@
{
border-left: 10px solid transparent;
border-right: 10px solid transparent;
- border-bottom: 10px solid #099CD0;
+ border-bottom: 10px solid #077CA6;
top: -10px;
right: 15px;
}
@@ -1125,7 +1158,7 @@
.context-menu::before
{
- border-left: 10px solid #099CD0;
+ border-left: 10px solid #077CA6;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
top: 22px;
@@ -1135,7 +1168,7 @@
html[dir="rtl"] .context-menu::before
{
border-left: 0rem;
- border-right: 10px solid #099CD0;
+ border-right: 10px solid #077CA6;
right: auto;
left: -0.5rem;
}
@@ -1152,11 +1185,13 @@
width: 100%;
display: flex;
border: 0rem;
- padding: 1rem 0rem;
- color: #099CD0;
- font-size: 1.1rem;
- font-weight: 700;
+ padding: 0.7rem 0rem;
+ color: #077CA6;
+ align-items: center;
+ font-size: 1rem;
+ font-weight: 400;
text-transform: none;
+ text-decoration: none;
}
.context-menu li[role="menuitem"] > *:hover,
@@ -1169,9 +1204,10 @@
.context-menu li[role="menuitem"] > *::before
{
content: "";
- height: 1.5rem;
- width: 1.5rem;
+ height: 1rem;
+ width: 1rem;
margin: 0rem 1.1rem;
+ border: 0rem;
}
.context-menu .update-subscription::before
@@ -1221,6 +1257,7 @@
{
display: block;
text-align: center;
+ text-decoration: none;
}
#social ul li a::before
@@ -1286,13 +1323,13 @@
{
display: flex;
padding: 0.7rem 1.5rem;
- background-color: #099CD0;
+ background-color: #077CA6;
}
#dialog header h3
{
margin: 0rem;
- font-size: 1.375rem;
+ font-size: 1rem;
font-weight: 700;
}
@@ -1354,11 +1391,6 @@
margin: 0.5rem 0rem;
}
-#abp-version
-{
- margin-bottom: 2rem;
-}
-
[data-dialog="import"] .side-controls
{
margin-top: 2.45rem;
@@ -1424,7 +1456,7 @@
box-sizing: border-box;
opacity: 0.8;
font-size: 1rem;
- color: #099CD0;
+ color: #077CA6;
background-color: #E1F2FA;
}
« no previous file with comments | « desktop-options.html ('k') | skin/icons/checkbox.svg » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld