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

Side by Side Diff: skin/desktop-options.css

Issue 29674584: Issue 5549 - Implement missing error handlings for custom filter lists (Closed)
Patch Set: fixed extra typo in css Created Jan. 24, 2018, 4:08 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « locale/en_US/desktop-options.json ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * This file is part of Adblock Plus <https://adblockplus.org/>, 2 * This file is part of Adblock Plus <https://adblockplus.org/>,
3 * Copyright (C) 2006-present eyeo GmbH 3 * Copyright (C) 2006-present eyeo GmbH
4 * 4 *
5 * Adblock Plus is free software: you can redistribute it and/or modify 5 * Adblock Plus is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License version 3 as 6 * it under the terms of the GNU General Public License version 3 as
7 * published by the Free Software Foundation. 7 * published by the Free Software Foundation.
8 * 8 *
9 * Adblock Plus is distributed in the hope that it will be useful, 9 * Adblock Plus is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of 10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
(...skipping 96 matching lines...) Expand 10 before | Expand all | Expand 10 after
107 textarea, 107 textarea,
108 main 108 main
109 { 109 {
110 -webkit-box-sizing: border-box; 110 -webkit-box-sizing: border-box;
111 -moz-box-sizing: border-box; 111 -moz-box-sizing: border-box;
112 box-sizing: border-box; 112 box-sizing: border-box;
113 } 113 }
114 114
115 /* 115 /*
116 Normalization 116 Normalization
117 */ 117 */
118 118
119 input, 119 input,
120 button 120 button
121 { 121 {
122 font-family: inherit; 122 font-family: inherit;
123 } 123 }
124 124
125 button 125 button
126 { 126 {
127 border-radius: 0rem; 127 border-radius: 0rem;
128 } 128 }
129 129
130 /* 130 /*
131 Buttons and links 131 Buttons and links
132 */ 132 */
133 133
134 button, 134 button,
135 .button 135 .button
136 { 136 {
137 display: block; 137 display: block;
138 padding: 0.6rem 0.8rem; 138 padding: 0.6rem 0.8rem;
139 background-color: transparent; 139 background-color: transparent;
140 font-size: 1rem; 140 font-size: 1rem;
141 font-weight: 700; 141 font-weight: 700;
142 text-decoration: none; 142 text-decoration: none;
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after
212 button.list:hover 212 button.list:hover
213 { 213 {
214 box-shadow: inset 0 0 0 3px #077CA6; 214 box-shadow: inset 0 0 0 3px #077CA6;
215 border-color: #077CA6; 215 border-color: #077CA6;
216 } 216 }
217 217
218 .side-controls:not(.wrap) 218 .side-controls:not(.wrap)
219 { 219 {
220 margin: 0.8rem 0rem; 220 margin: 0.8rem 0rem;
221 display: flex; 221 display: flex;
222 align-self: center;
222 justify-content: flex-end; 223 justify-content: flex-end;
223 } 224 }
224 225
225 .side-controls button 226 .side-controls button
226 { 227 {
227 margin: 0rem; 228 margin: 0rem;
228 -moz-margin-start: 1rem; 229 -moz-margin-start: 1rem;
229 -webkit-margin-start: 1rem; 230 -webkit-margin-start: 1rem;
230 } 231 }
231 232
232 .side-controls.wrap button 233 .side-controls.wrap button
233 { 234 {
234 margin: 0.6rem 0rem; 235 margin: 0.6rem 0rem;
235 -moz-margin-start: auto; 236 -moz-margin-start: auto;
236 -webkit-margin-start: auto; 237 -webkit-margin-start: auto;
237 } 238 }
238 239
239 /* 240 /*
240 icons 241 icons
241 */ 242 */
242 243
243 .icon 244 .icon
244 { 245 {
245 border: 0px; 246 border: 0px;
246 padding: 0px; 247 padding: 0px;
247 background-color: transparent; 248 background-color: transparent;
248 } 249 }
249 250
250 .icon:hover 251 .icon:hover
251 { 252 {
(...skipping 192 matching lines...) Expand 10 before | Expand all | Expand 10 after
444 background-image: url("social/facebook.svg"); 445 background-image: url("social/facebook.svg");
445 } 446 }
446 447
447 .icon#google-plus::before 448 .icon#google-plus::before
448 { 449 {
449 background-image: url("social/googleplus.svg"); 450 background-image: url("social/googleplus.svg");
450 } 451 }
451 452
452 /* 453 /*
453 Forms 454 Forms
454 */ 455 */
455 456
456 .floating-input 457 .floating-input
457 { 458 {
458 position: relative; 459 position: relative;
459 padding-top: 0.7rem; 460 padding-top: 0.7rem;
460 margin: 1.8rem 0rem 0.5rem 0rem; 461 margin: 1.8rem 0rem 0.5rem 0rem;
461 } 462 }
462 463
463 .floating-input input 464 .floating-input input
464 { 465 {
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after
526 visibility: hidden; 527 visibility: hidden;
527 } 528 }
528 529
529 [data-validation] .floating-input input:focus:invalid ~ .error-msg 530 [data-validation] .floating-input input:focus:invalid ~ .error-msg
530 { 531 {
531 visibility: visible; 532 visibility: visible;
532 } 533 }
533 534
534 /* 535 /*
535 Sidebar 536 Sidebar
536 */ 537 */
537 538
538 #sidebar, 539 #sidebar,
539 #sidebar .fixed, 540 #sidebar .fixed,
540 [role="tablist"] 541 [role="tablist"]
541 { 542 {
542 width: 14.3rem; 543 width: 14.3rem;
543 } 544 }
544 545
545 #sidebar 546 #sidebar
546 { 547 {
547 flex-shrink: 0; 548 flex-shrink: 0;
548 } 549 }
549 550
550 #sidebar .fixed 551 #sidebar .fixed
551 { 552 {
552 top: 1.2rem; 553 top: 1.2rem;
553 bottom: 0rem; 554 bottom: 0rem;
554 height: auto; 555 height: auto;
555 } 556 }
556 557
557 #sidebar header 558 #sidebar header
(...skipping 95 matching lines...) Expand 10 before | Expand all | Expand 10 after
653 #sidebar .fixed 654 #sidebar .fixed
654 { 655 {
655 position: fixed; 656 position: fixed;
656 } 657 }
657 658
658 #sidebar footer 659 #sidebar footer
659 { 660 {
660 bottom: 0px; 661 bottom: 0px;
661 position: absolute; 662 position: absolute;
662 } 663 }
664
663 } 665 }
664 666
665 /* 667 /*
666 Main content 668 Main content
667 */ 669 */
668 670
669 body[data-tab|="general"] #content-general, 671 body[data-tab|="general"] #content-general,
670 body[data-tab|="advanced"] #content-advanced, 672 body[data-tab|="advanced"] #content-advanced,
671 body[data-tab|="whitelist"] #content-whitelist, 673 body[data-tab|="whitelist"] #content-whitelist,
672 body[data-tab|="help"] #content-help 674 body[data-tab|="help"] #content-help
673 { 675 {
674 display: block; 676 display: block;
675 } 677 }
676 678
677 main 679 main
678 { 680 {
679 background-color: #FFFFFF; 681 background-color: #FFFFFF;
680 border: 1px solid #CDCDCD; 682 border: 1px solid #CDCDCD;
681 width: 46.3rem; 683 width: 46.3rem;
682 padding: 0px 0rem 1.4rem 0rem; 684 padding: 0px 0rem 1.4rem 0rem;
683 } 685 }
684 686
685 main > div 687 main > div
686 { 688 {
687 display: none; 689 display: none;
688 } 690 }
689 691
690 main p 692 main p
691 { 693 {
692 margin: 0.8rem 0rem; 694 margin: 0.8rem 0rem;
693 } 695 }
694 696
695 /* 697 /*
696 Sections 698 Sections
697 */ 699 */
698 700
699 [role="tabpanel"] > section, 701 [role="tabpanel"] > section,
700 [role="tabpanel"] > .section 702 [role="tabpanel"] > .section
701 { 703 {
702 padding: 1.4rem 2rem; 704 padding: 1.4rem 2rem;
703 border-top: 1px solid #CDCDCD; 705 border-top: 1px solid #CDCDCD;
704 } 706 }
705 707
706 [role="tabpanel"] > header h1, 708 [role="tabpanel"] > header h1,
707 [role="tabpanel"] > header p 709 [role="tabpanel"] > header p
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
739 -webkit-margin-end: 2rem; 741 -webkit-margin-end: 2rem;
740 } 742 }
741 743
742 section.cols > *:last-child 744 section.cols > *:last-child
743 { 745 {
744 flex: 3; 746 flex: 3;
745 } 747 }
746 748
747 /* 749 /*
748 Acceptable ads 750 Acceptable ads
749 */ 751 */
750 752
751 #tracking-warning 753 #tracking-warning
752 { 754 {
753 position: relative; 755 position: relative;
754 padding: 1.5rem; 756 padding: 1.5rem;
755 margin-bottom: 1rem; 757 margin-bottom: 1rem;
756 border: 2px solid #ffd7a3; 758 border: 2px solid #ffd7a3;
757 background-color: #fefbe3; 759 background-color: #fefbe3;
758 } 760 }
759 761
(...skipping 68 matching lines...) Expand 10 before | Expand all | Expand 10 after
828 border-radius: 0.2rem; 830 border-radius: 0.2rem;
829 background-color: #077CA6; 831 background-color: #077CA6;
830 color: #FFF; 832 color: #FFF;
831 line-height: 100%; 833 line-height: 100%;
832 font-size: 0.8rem; 834 font-size: 0.8rem;
833 text-transform: uppercase; 835 text-transform: uppercase;
834 } 836 }
835 837
836 /* 838 /*
837 Tables 839 Tables
838 */ 840 */
839 841
840 ul.table, 842 ul.table,
841 ul.list 843 ul.list
842 { 844 {
843 list-style: none; 845 list-style: none;
844 margin: 0rem; 846 margin: 0rem;
845 padding: 0rem; 847 padding: 0rem;
846 } 848 }
847 849
848 .table li, 850 .table li,
(...skipping 238 matching lines...) Expand 10 before | Expand all | Expand 10 after
1087 .button-add, .cancel-button 1089 .button-add, .cancel-button
1088 { 1090 {
1089 background-color: transparent; 1091 background-color: transparent;
1090 border: 0px; 1092 border: 0px;
1091 color: #3A7BA6; 1093 color: #3A7BA6;
1092 cursor: pointer; 1094 cursor: pointer;
1093 } 1095 }
1094 1096
1095 /* 1097 /*
1096 Whitelist tab 1098 Whitelist tab
1097 */ 1099 */
1098 1100
1099 #content-whitelist form 1101 #content-whitelist form
1100 { 1102 {
1101 display: flex; 1103 display: flex;
1102 } 1104 }
1103 1105
1104 #content-whitelist form input 1106 #content-whitelist form input
1105 { 1107 {
1106 flex: 1; 1108 flex: 1;
1107 height: 100%; 1109 height: 100%;
(...skipping 19 matching lines...) Expand all
1127 /* 1129 /*
1128 Advanced tab content 1130 Advanced tab content
1129 */ 1131 */
1130 1132
1131 #all-filter-lists-table li.show-message .last-update, 1133 #all-filter-lists-table li.show-message .last-update,
1132 #all-filter-lists-table li:not(.show-message) .message, 1134 #all-filter-lists-table li:not(.show-message) .message,
1133 #custom-filters:not([data-mode="empty"]) #empty-custom-filters, 1135 #custom-filters:not([data-mode="empty"]) #empty-custom-filters,
1134 #custom-filters[data-mode="empty"] #custom-filters-raw, 1136 #custom-filters[data-mode="empty"] #custom-filters-raw,
1135 #custom-filters:not([data-mode="write"]) #custom-filters-raw-controls, 1137 #custom-filters:not([data-mode="write"]) #custom-filters-raw-controls,
1136 #custom-filters:not([data-mode="read"]) #custom-filters-edit, 1138 #custom-filters:not([data-mode="read"]) #custom-filters-edit,
1139 #custom-filters-edit-filters,
1137 .state span, 1140 .state span,
1138 #acceptable-ads:not(.show-dnt-notification) #dnt 1141 #acceptable-ads:not(.show-dnt-notification) #dnt
1139 { 1142 {
1140 display: none; 1143 display: none;
1141 } 1144 }
1142 1145
1143 #all-filter-lists-table button[role="checkbox"][aria-checked="true"] + .state #s tate-active 1146 #all-filter-lists-table button[role="checkbox"][aria-checked="true"] + .state #s tate-active,
1144 {
1145 display: inline;
1146 }
1147
1148 #all-filter-lists-table button[role="checkbox"][aria-checked="false"] + .state # state-disabled 1147 #all-filter-lists-table button[role="checkbox"][aria-checked="false"] + .state # state-disabled
1149 { 1148 {
1150 display: inline; 1149 display: inline;
1151 } 1150 }
1152 1151
1153 #all-filter-lists-table 1152 #all-filter-lists-table
1154 { 1153 {
1155 margin-bottom: 0.8rem; 1154 margin-bottom: 0.8rem;
1156 } 1155 }
1157 1156
1157 #custom-filters-edit
1158 {
1159 white-space: nowrap;
1160 }
1161
1162 #custom-filters-edit-area
1163 {
1164 display: flex;
1165 width: 100%;
1166 }
1167
1168 /*
1169 avoid doubled margin glitchy behavior
1170 as shown in visual specifications
1171 */
1172 #custom-filters-edit-area .side-controls .side-controls
1173 {
1174 margin: 0;
1175 }
1176
1177 /*
1178 visibility: hidden;
1179 preserves the flex-box meaning,
1180 keeping buttons on the right.
1181 */
1182 #custom-filters-edit-error
1183 {
1184 visibility: hidden;
1185 display: flex;
1186 align-self: center;
1187 justify-content: flex-start;
1188 font-weight: bold;
1189 }
1190
1191 #custom-filters.warning #custom-filters-edit-error,
1192 #custom-filters-edit-filters
1193 {
1194 color: #C11D26;
1195 padding: 0.2rem 0.8rem;
1196 }
1197
1198 #custom-filters.warning #custom-filters-edit-error
1199 {
1200 visibility: visible;
1201 }
1202
1203 #custom-filters-edit-filters
1204 {
1205 display: block;
1206 list-style: none;
1207 white-space: pre;
1208 overflow: auto;
1209 }
1210
1211 #custom-filters-edit-filters.many
1212 {
1213 border: 1px solid silver;
1214 max-height: 6.2rem;
1215 }
1216
1158 #custom-filters-raw 1217 #custom-filters-raw
1159 { 1218 {
1160 width: 100%; 1219 width: 100%;
1161 height: 23.6rem; 1220 height: 23.6rem;
1162 padding: 0.8rem; 1221 padding: 0.8rem;
1163 } 1222 }
1164 1223
1165 #custom-filters-raw:focus 1224 #custom-filters-raw:focus
1166 { 1225 {
1167 outline: none; 1226 outline: none;
1168 border: 2px solid #077CA6; 1227 border: 2px solid #077CA6;
1169 } 1228 }
1170 1229
1230 #custom-filters.warning #custom-filters-raw
1231 {
1232 outline: none;
1233 border: 2px solid #C11D26;
1234 }
1235
1171 #empty-custom-filters 1236 #empty-custom-filters
1172 { 1237 {
1173 padding: 1.5rem; 1238 padding: 1.5rem;
1174 border: 1px solid #CDCDCD; 1239 border: 1px solid #CDCDCD;
1175 } 1240 }
1176 1241
1177 /* 1242 /*
1178 Context menu 1243 Context menu
1179 */ 1244 */
1180 1245
1181 li [role="menubar"] 1246 li [role="menubar"]
1182 { 1247 {
1183 position: relative; 1248 position: relative;
1184 } 1249 }
1185 1250
1186 [role="tooltip"] 1251 [role="tooltip"]
1187 { 1252 {
1188 right: -0.8rem; 1253 right: -0.8rem;
1189 margin-top: 0.8rem; 1254 margin-top: 0.8rem;
(...skipping 149 matching lines...) Expand 10 before | Expand all | Expand 10 after
1339 1404
1340 #social ul 1405 #social ul
1341 { 1406 {
1342 list-style: none; 1407 list-style: none;
1343 padding: 0px; 1408 padding: 0px;
1344 } 1409 }
1345 1410
1346 #social ul li 1411 #social ul li
1347 { 1412 {
1348 display: inline-block; 1413 display: inline-block;
1414 margin-right: 1rem;
1349 -moz-margin-end: 1rem; 1415 -moz-margin-end: 1rem;
1350 -webkit-margin-end: 1rem; 1416 -webkit-margin-end: 1rem;
1351 } 1417 }
1352 1418
1353 #social ul li a 1419 #social ul li a
1354 { 1420 {
1355 display: block; 1421 display: block;
1356 text-align: center; 1422 text-align: center;
1357 text-decoration: none; 1423 text-decoration: none;
1358 } 1424 }
(...skipping 152 matching lines...) Expand 10 before | Expand all | Expand 10 after
1511 font-size: 1rem; 1577 font-size: 1rem;
1512 color: #077CA6; 1578 color: #077CA6;
1513 background-color: #E1F2FA; 1579 background-color: #E1F2FA;
1514 } 1580 }
1515 1581
1516 #notification strong 1582 #notification strong
1517 { 1583 {
1518 flex: 1; 1584 flex: 1;
1519 text-align: center; 1585 text-align: center;
1520 } 1586 }
OLDNEW
« no previous file with comments | « locale/en_US/desktop-options.json ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld