Unified Diff: skin/options.css
Issue 6088024630755328:
issue 1526 - Implement new options page design for Chrome/Opera/Safari (Closed)
Patch Set:
Created Jan. 21, 2015, 6:10 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« options.js ('k')
|
skin/options-sprite.png » ('j')
|
no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: skin/options.css |
| =================================================================== |
| new file mode 100644 |
| --- /dev/null |
| +++ b/skin/options.css |
| @@ -0,0 +1,751 @@ |
| +body |
| +{ |
| + background-color: #F5F5F5; |
| + display: flex; |
| + font-family: 'Source Sans Pro', sans-serif; |
| + font-size: 14px; |
| + white-space: nowrap; |
| +} |
| + |
| +h1 |
| +{ |
| + font-size: 24px; |
| + font-weight: 100; |
| + margin: 40px 0px 16px 0px; |
| +} |
| + |
| +h2 |
| +{ |
| + font-size: 16px; |
| + font-weight: 500; |
| +} |
| + |
| +p |
| +{ |
| + font-weight: 100; |
| +} |
| + |
| +hr |
| +{ |
| + background-color: #CDCDCD; |
| + border: 0px; |
| + height: 1px; |
| + margin: 0px; |
| +} |
| + |
| +.option-name |
| +{ |
| + display: flex; |
| +} |
| + |
| +.option-name > * |
| +{ |
| + -moz-margin-end: 6px; |
| + -webkit-margin-end: 6px; |
| +} |
| + |
| +#left-sidebar |
| +{ |
| + position: relative; |
| + padding: 0px 0px 16px 0px; |
| + -moz-padding-start: 10px; |
| + -webkit-padding-start: 10px; |
| + min-width: 198px; |
| +} |
| + |
| +#left-sidebar .fixed |
| +{ |
| + height: 100%; |
| + position: fixed; |
| +} |
| + |
| +div.left |
| +{ |
| + -moz-padding-end: 40px; |
| + -webkit-padding-end: 40px; |
| +} |
| + |
| +#page-title |
| +{ |
| + -webkit-margin-start: 10px; |
| + -moz-margin-start: 10px; |
| +} |
| + |
| +#page-title p |
| +{ |
| + margin: 0px; |
| + padding: 40px 0px 0px 0px; |
| + font-size: 16px; |
| +} |
| + |
| +#page-title h1 |
| +{ |
| + margin: 0px; |
| + padding: 8px 0px 16px 0px; |
| +} |
| + |
| +.flex-container |
| +{ |
| + display: flex; |
| + flex-flow: row wrap; |
| +} |
| + |
| +.tabs li |
| +{ |
| + cursor: pointer; |
| + display: flex; |
| +} |
| + |
| +.tabs li span:first-child |
| +{ |
| + flex: 1; |
| +} |
| + |
| +.tabs.vertical |
| +{ |
| + list-style: none; |
| + margin: 0px; |
| + position: relative; |
| + padding: 0px; |
| + width: 198px; |
| +} |
| + |
| +.tabs.vertical li |
| +{ |
| + border-color: #CDCDCD; |
| + border-style: solid; |
| + border-width: 1px 0px 0px 0px; |
| + font-size: 16px; |
| + font-weight: 100; |
| + padding: 16px 0px; |
| + -moz-padding-end: 20px; |
| + -webkit-padding-end: 20px; |
| + -moz-padding-start: 11px; |
| + -webkit-padding-start: 11px; |
| +} |
| + |
| +.tabs.vertical li.active + li |
| +{ |
| + border-width: 0px; |
| +} |
| + |
| +.tabs.vertical li:last-child |
| +{ |
| + border-bottom-width: 1px !important; |
| +} |
| + |
| +.tabs.vertical li.active |
| +{ |
| + background-color: #FFFFFF; |
| + border-radius: 3px 0px 0px 3px; |
| + border-width: 1px; |
| + -moz-border-end: 0px; |
| + -webkit-border-end: 0px; |
| + font-weight: 900; |
| + -moz-margin-end: -1px; |
| + -webkit-margin-end: -1px; |
| + -moz-padding-start: 10px; |
| + -webkit-padding-start: 10px; |
| + position: relative; |
| +} |
| + |
| +.tabs.vertical.bottom |
| +{ |
| + bottom: 0px; |
| + position: absolute; |
| +} |
| + |
| +.tabs.vertical.bottom li:first-child |
| +{ |
| + border-top: 0px; |
| +} |
| + |
| +.tabs.vertical .icon |
| +{ |
| + margin: 2px 0px 0px 0px; |
| +} |
| + |
| +#tab-general .icon |
| +{ |
| + background-position: -15px -17px; |
| + height: 16px; |
| + width: 16px; |
| +} |
| + |
| +#tab-advanced .icon |
| +{ |
| + background-position: -45px -18px; |
| + height: 16px; |
| + width: 16px; |
| +} |
| + |
| +#tab-help .icon |
| +{ |
| + background-position: 0px -17px; |
| + height: 16px; |
| + width: 16px; |
| +} |
| + |
| +#tab-share .icon |
| +{ |
| + background-position: -60px -17px; |
| + height: 16px; |
| + width: 16px; |
| +} |
| + |
| +#tab-donate .icon |
| +{ |
| + background-position: -30px -17px; |
| + height: 16px; |
| + width: 16px; |
| +} |
| + |
| +#tab-content |
| +{ |
| + background-color: #FFFFFF; |
| + border: 1px solid #CDCDCD; |
| + border-radius: 8px; |
| + padding: 0px 60px 40px 60px; |
| + width: 960px; |
| +} |
| + |
| +#modal-background |
| +{ |
| + background-color: white; |
| + position: absolute; |
| + opacity: 0.7; |
| + top: 0px; |
| + right: 0; |
| + bottom: 0px; |
| + left: 0; |
| + z-index: 2; |
| +} |
| + |
| +#content-wrapper |
| +{ |
| + position: relative; |
| +} |
| + |
| +#content-wrapper > div, |
| +#blocking-list > div |
| +{ |
| + display: none; |
| +} |
| + |
| +div.button |
| +{ |
| + cursor: pointer; |
| + display: flex; |
| +} |
| + |
| +.table |
| +{ |
| + list-style: none; |
| + margin: 0px; |
| + padding: 0px; |
| + position: relative; |
| + width: 400px; |
| +} |
| + |
| +.table li |
| +{ |
| + display: flex; |
| + padding: 14px 0px; |
| + -webkit-padding-start: 16px; |
| + -moz-padding-start: 16px; |
| +} |
| + |
| +.table.list li:nth-child(odd) |
| +{ |
| + background-color: #F5F5F5; |
| +} |
| + |
| +.table.list li .display |
| +{ |
| + flex: 1; |
| +} |
| + |
| +.table.cols li:nth-child(even) |
| +{ |
| + background-color: #F5F5F5; |
| +} |
| + |
| +#blocking-list-own .table |
| +{ |
| + height: 290px; |
| + overflow: auto; |
| + width: auto; |
| +} |
| + |
| +.table label |
| +{ |
| + vertical-align: top; |
| +} |
| + |
| +.table.cols span |
| +{ |
| + display: inline-block; |
| + width: 30%; |
| +} |
| + |
| +.table.cols .col-name |
| +{ |
| + border-bottom: 1px solid #CDCDCD; |
| +} |
| + |
| +.table.cols .col-name span |
| +{ |
| + display: inline-block; |
| + width: 30%; |
| +} |
| + |
| +.table.cols .col-name span:first-child |
| +{ |
| + padding-left: 38px; |
| +} |
| + |
| +#further-blocking .table |
| +{ |
| + height: 290px; |
| + overflow: auto; |
| +} |
| + |
| +.table::-webkit-scrollbar |
| +{ |
| + padding-right: 10px; |
| + width: 5px; |
| +} |
| + |
| +.table::-webkit-scrollbar-thumb |
| +{ |
| + background-color: #CDCDCD; |
| + border-radius: 5px; |
| + padding: 0px 40px; |
| +} |
| + |
| +.table::-webkit-scrollbar-thumb:hover |
| +{ |
| + background-color: #A1A1A1; |
| +} |
| + |
| +.table input[type=checkbox] |
| +{ |
| + display:none; |
| +} |
| + |
| +.table input[type=checkbox] + label |
| +{ |
| + background-position: -51px 0px; |
| + height: 18px; |
| + -moz-margin-end: 20px; |
| + -webkit-margin-end: 20px; |
| + padding: 0px 0px 0px 0px; |
| + width: 18px; |
| +} |
| + |
| +.table input[type=checkbox]:checked + label |
| +{ |
| + background-position: -68px 0px; |
| + height: 18px; |
| + padding: 0px; |
| + width: 18px; |
| +} |
| + |
| +.table button.delete |
| +{ |
| + background-color: transparent; |
| + background-position: -9px -32px; |
| + border: 0px; |
| + height: 10px; |
| + margin-top: 5px; |
| + -moz-margin-end: 20px; |
| + -webkit-margin-end: 20px; |
| + padding: 0px; |
| + cursor: pointer; |
| + width: 10px; |
| +} |
| + |
| +.table .popular |
| +{ |
| + color: #1E8728; |
| + font-size: 12px; |
| + -moz-padding-end: 12px; |
| + -webkit-padding-end: 12px; |
| +} |
| + |
| +.tabs.horizontal |
| +{ |
| + margin-bottom: 0px; |
| + padding: 0px; |
| +} |
| + |
| +.tabs.horizontal li |
| +{ |
| + border-bottom: 1px solid #A1A1A1; |
| + display: inline-block; |
| + color: #3A7BA6; |
| + padding: 10px 0px 11px 0px; |
| + text-align: center; |
| + width: 50%; |
| +} |
| + |
| +.tabs.horizontal li.active |
| +{ |
| + border-bottom: 2px solid #1E8728; |
| + color: black; |
| + font-weight: bold; |
| + padding-bottom: 10px; |
| +} |
| + |
| +.icon, .table label, .table button.delete |
| +{ |
| + background-image: url(options-sprite.png); |
| + display: inline-block; |
| +} |
| + |
| +.icon-add |
| +{ |
| + background-position: -0px -0px; |
| + cursor: pointer; |
| + height: 18px; |
| + width: 18px; |
| +} |
| + |
| +.icon-close |
| +{ |
| + background-position: -9px -32px; |
| + cursor: pointer; |
| + height: 10px; |
| + width: 10px; |
| +} |
| + |
| +.icon-update |
| +{ |
| + background-position: -34px -0px; |
| + cursor: pointer; |
| + height: 18px; |
| + width: 18px; |
| +} |
| + |
| +.icon-edit |
| +{ |
| + background-position: -17px -0px; |
| + cursor: pointer; |
| + height: 18px; |
| + width: 18px; |
| +} |
| + |
| +.icon-arrow |
| +{ |
| + background-position: 0px -42px; |
| + cursor: pointer; |
| + height: 11px; |
| + vertical-align: middle; |
| + width: 7px; |
| +} |
| + |
| +.controls |
| +{ |
| + margin-top: 8px; |
| + -moz-margin-start: 16px; |
| + -webkit-margin-start: 16px; |
| + position: relative; |
| +} |
| + |
| +#whitelisting .controls |
| +{ |
| + -moz-margin-start: 12px; |
| + -webkit-margin-start: 12px; |
| +} |
| + |
| +#whitelisting .controls input[type=text], |
| +#whitelisting .controls input[type=text]:focus |
| +{ |
| + border: 0px; |
| + border-bottom: 1px solid #A1A1A1; |
| + -moz-padding-end: 25px; |
| + -webkit-padding-end: 25px; |
| + -moz-margin-start: 14px; |
| + -webkit-margin-start: 14px; |
| + outline: 0px; |
| + vertical-align: text-bottom; |
| + width: 330px; |
| +} |
| + |
| +.text-blue |
| +{ |
| + color: #3A7BA6; |
| + display: inline-block; |
| + -moz-margin-start: 15px; |
| + -webkit-margin-start: 15px; |
| + vertical-align: top; |
| +} |
| + |
| +#content-help .text-blue |
| +{ |
| + margin: 0px 16px 0px 4px; |
| + text-decoration: none; |
| +} |
| + |
| +.nav-blue |
| +{ |
| + color: #3A7BA6; |
| + margin-left: 12px; |
| +} |
| + |
| +#blocking-list-own input[type=text], |
| +#blocking-list-own input[type=text]:focus |
| +{ |
| + border: 0px; |
| + border-bottom: 1px solid; |
| + border-top: 1px solid; |
| + border-color: #1E8728; |
| + box-sizing: border-box; |
| + height: 25px; |
| + outline: 0px; |
| + padding-left: 10px; |
| + width: 100%; |
| +} |
| + |
| +.icon-enter-blue |
| +{ |
| + background-position: -28px -85px; |
| + cursor: pointer; |
| + height: 10px; |
| + margin: 0px 0px -2px 2px; |
| + width: 10px; |
| +} |
| + |
| +#blocking-list-own .input-control |
| +{ |
| + position: absolute; |
| + bottom: 5px; |
| + right: 10px; |
| +} |
| + |
| +#blocking-list-own .input-separator |
| +{ |
| + display: inline-block; |
| + border-right: 1px solid #CDCDCD; |
| + height: 15px; |
| + margin: 0px 4px -4px 0px; |
| + width: 1px; |
| +} |
| + |
| +#blocking-list-own .input-btn-text |
| +{ |
| + font-size: 12px; |
| +} |
| + |
| +.icon-enter |
| +{ |
| + background-position: -18px -85px; |
| + bottom: 10px; |
| + cursor: pointer; |
| + position: absolute; |
| + height: 10px; |
| + -moz-margin-start: -20px; |
| + -webkit-margin-start: -20px; |
| + width: 10px; |
| +} |
| + |
| +.addbtn, .cancelbtn |
| +{ |
| + background-color: transparent; |
| + border: 0px; |
| + color: #3A7BA6; |
| + cursor: pointer; |
| +} |
| + |
| +#other-language .addbtn |
| +{ |
| + -webkit-border-end: 1px solid #CDCDCD; |
| + -moz-border-end: 1px solid #CDCDCD; |
| + -webkit-padding-end: 10px; |
| + -moz-padding-end: 10px; |
| +} |
| + |
| +#other-language .display |
| +{ |
| + -webkit-margin-start: 10px; |
| + -moz-margin-start: 10px; |
| +} |
| + |
| +#whitelisting .addbtn |
| +{ |
| + -moz-margin-start: 46px; |
| + -webkit-margin-start: 46px; |
| +} |
| + |
| +.cancelbtn |
| +{ |
| + float: right; |
| +} |
| + |
| +.dotted |
| +{ |
| + border-bottom: dotted 2px; |
| + color: #3A7BA6; |
| + font-size: 12px; |
| + text-decoration: none; |
| +} |
| + |
| +#content-advanced .dotted |
| +{ |
| + -moz-margin-start: 8px; |
| + -webkit-margin-start: 8px; |
| +} |
| + |
| +#content-advanced h1 |
| +{ |
| + display: inline-block; |
| +} |
| + |
| +#content-advanced .table .dotted |
| +{ |
| + color: black; |
| + border-bottom-color: #3A7BA6; |
| + font-weight: bold; |
| + padding-left: 0px !important; |
| + vertical-align: top; |
| +} |
| + |
| +#modal |
| +{ |
| + left:50%; |
| + top:50%; |
| + margin:0 auto; |
| + margin-left:-200px; |
| + margin-top:-200px; |
| + position:absolute; |
| + z-index: 2; |
| + visibility: hidden; |
| +} |
| + |
| +#modal > div |
| +{ |
| + background-color: #FFFFFF; |
| + border: 2px solid #4D9D4B; |
| + border-radius: 3px; |
| + width: 400px; |
| +} |
| + |
| +#modal .header |
| +{ |
| + background-color: #4D9D4B; |
| + height: 45px; |
| +} |
| + |
| +#modal-close |
| +{ |
| + display: inline-block; |
| +} |
| + |
| +#modal .content |
| +{ |
| + margin: 4px 24px; |
| +} |
| + |
| +#modal h3 |
| +{ |
| + font-size: 14px; |
| + margin: 0px; |
| +} |
| + |
| +#modal .content input[type=text] |
| +{ |
| + -webkit-box-sizing: border-box; |
| + -moz-box-sizing: border-box; |
| + box-sizing: border-box; |
| + font-size: 16px; |
| + margin-top: 10px; |
| + padding: 5px; |
| + width: 100%; |
| +} |
| + |
| +#modal .table |
| +{ |
| + width: 100%; |
| +} |
| + |
| +#modal #other-language .table |
| +{ |
| + height: 200px; |
| + overflow: auto; |
| +} |
| + |
| +#modal .section:not(:first-child) |
| +{ |
| + margin-top: 24px; |
| +} |
| + |
| +#modal .close-wrapper |
| +{ |
| + margin-right: 16px !important; |
| +} |
| + |
| +#modal .header > div |
| +{ |
| + display: flex; |
| +} |
| + |
| +#modal .header > div > div:first-child |
| +{ |
| + flex: 1; |
| + -moz-margin-start: 24px; |
| + -webkit-margin-start: 24px; |
| +} |
| + |
| +#modal .header > div > div |
| +{ |
| + display: inline-block; |
| + margin: 10px; |
| +} |
| + |
| +#modal-title |
| +{ |
| + color: #FFFFFF; |
| +} |
| + |
| +#modal .header .separator |
| +{ |
| + border-right: 1px solid #25612B; |
| + height: 18px; |
| + margin-bottom: -4px; |
| + -moz-margin-end: 4px; |
| + -webkit-margin-end: 4px; |
| + width: 1px; |
| +} |
| + |
| +#modal .header .icon-close |
| +{ |
| + -moz-margin-start: 10px; |
| + -webkit-margin-start: 10px; |
| +} |
| + |
| +#modal .header .close |
| +{ |
| + color: #0F660F; |
| + font-size: 15px; |
| + -moz-margin-start: 6px; |
| + -webkit-margin-start: 6px; |
| +} |
| + |
| +#modal .content > div > div |
| +{ |
| + padding: 12px 0px; |
| +} |
| + |
| +#modal .btn-wrapper |
| +{ |
| + background-color: #F5F5F5; |
| + margin-top: 8px; |
| + padding: 10px 16px; |
| + cursor: pointer; |
| + width: auto; |
| +} |
| + |
| +#modal .btn-wrapper .text-blue |
| +{ |
| + margin-left: 12px; |
| +} |
« no previous file with comments
|
« options.js ('k')
|
skin/options-sprite.png » ('j')
|
no next file with comments »
