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

Side by Side Diff: skin/options.css

Issue 29322581: Issue 2356 - Implemented tooltip functionality (Closed)
Patch Set: Created July 29, 2015, 10:01 a.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 | « options.html ('k') | skin/options-sprite.png » ('j') | 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-2015 Eyeo GmbH 3 * Copyright (C) 2006-2015 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 77 matching lines...) Expand 10 before | Expand all | Expand 10 after
88 input[type="text"], input[type="search"] 88 input[type="text"], input[type="search"]
89 { 89 {
90 -webkit-box-sizing: border-box; 90 -webkit-box-sizing: border-box;
91 -moz-box-sizing: border-box; 91 -moz-box-sizing: border-box;
92 box-sizing: border-box; 92 box-sizing: border-box;
93 } 93 }
94 94
95 .option-name 95 .option-name
96 { 96 {
97 display: flex; 97 display: flex;
98 margin-bottom: 16px;
99 margin-top: 24px;
98 } 100 }
99 101
100 .option-name > * 102 .option-name > :first-child
101 { 103 {
102 -moz-margin-end: 6px; 104 flex: 1;
103 -webkit-margin-end: 6px; 105 overflow: hidden;
106 text-overflow: ellipsis;
107 white-space: nowrap;
104 } 108 }
105 109
106 #nav-sidebar 110 #nav-sidebar
107 { 111 {
108 min-width: 198px; 112 min-width: 198px;
109 } 113 }
110 114
111 #nav-sidebar .fixed 115 #nav-sidebar .fixed
112 { 116 {
113 top: 40px; 117 top: 40px;
(...skipping 13 matching lines...) Expand all
127 font-size: 16px; 131 font-size: 16px;
128 line-height: 1em; 132 line-height: 1em;
129 } 133 }
130 134
131 #page-title h1 135 #page-title h1
132 { 136 {
133 margin: 0px; 137 margin: 0px;
134 padding: 8px 0px 16px 0px; 138 padding: 8px 0px 16px 0px;
135 } 139 }
136 140
137 .flex-container 141 .hbox
138 { 142 {
139 display: flex; 143 display: flex;
140 flex-flow: row wrap; 144 flex-direction: row;
145 }
146
147 .hbox > div
148 {
149 flex: 1;
141 } 150 }
142 151
143 .tabs li 152 .tabs li
144 { 153 {
145 cursor: pointer; 154 cursor: pointer;
146 display: flex; 155 display: flex;
147 } 156 }
148 157
149 .tabs li a 158 .tabs li a
150 { 159 {
(...skipping 95 matching lines...) Expand 10 before | Expand all | Expand 10 after
246 #tab-contribute .icon 255 #tab-contribute .icon
247 { 256 {
248 background-position: -31px -18px; 257 background-position: -31px -18px;
249 } 258 }
250 259
251 #tab-content 260 #tab-content
252 { 261 {
253 background-color: #FFFFFF; 262 background-color: #FFFFFF;
254 border: 1px solid #CDCDCD; 263 border: 1px solid #CDCDCD;
255 border-radius: 8px; 264 border-radius: 8px;
265 box-sizing: border-box;
266 min-width: 960px;
256 padding: 0px 60px 40px 60px; 267 padding: 0px 60px 40px 60px;
257 width: 960px; 268 width: 960px;
saroyanm 2015/07/29 10:12:21 nit: It's doesn't make any sense to have specified
258 } 269 }
259 270
260 #tab-content h1 271 #tab-content h1
261 { 272 {
262 border-bottom: 1px solid #CDCDCD; 273 border-bottom: 1px solid #CDCDCD;
263 margin: 0px; 274 margin: 0px;
264 padding: 40px 0px 16px 0px; 275 padding: 40px 0px 16px 0px;
265 } 276 }
266 277
267 #link-version 278 #link-version
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
300 cursor: pointer; 311 cursor: pointer;
301 display: flex; 312 display: flex;
302 } 313 }
303 314
304 .table 315 .table
305 { 316 {
306 list-style: none; 317 list-style: none;
307 margin: 0px; 318 margin: 0px;
308 padding: 0px; 319 padding: 0px;
309 position: relative; 320 position: relative;
310 width: 400px;
311 } 321 }
312 322
313 .table li 323 .table li
314 { 324 {
315 display: flex; 325 display: flex;
316 padding: 14px 0px; 326 padding: 14px 0px;
317 -webkit-padding-start: 16px; 327 -webkit-padding-start: 16px;
318 -moz-padding-start: 16px; 328 -moz-padding-start: 16px;
319 } 329 }
320 330
(...skipping 218 matching lines...) Expand 10 before | Expand all | Expand 10 after
539 549
540 #blocking-languages, 550 #blocking-languages,
541 #acceptable-ads 551 #acceptable-ads
542 { 552 {
543 -moz-padding-end: 40px; 553 -moz-padding-end: 40px;
544 -webkit-padding-end: 40px; 554 -webkit-padding-end: 40px;
545 } 555 }
546 556
547 #custom-wrapper 557 #custom-wrapper
548 { 558 {
549 width: 400px;
550 height: 290px; 559 height: 290px;
551 overflow: auto; 560 overflow: auto;
552 } 561 }
553 562
554 #custom-wrapper .table 563 #custom-wrapper .table
555 { 564 {
556 width: 100%; 565 width: 100%;
557 } 566 }
558 567
559 #whitelisting .controls 568 #whitelisting .controls
(...skipping 180 matching lines...) Expand 10 before | Expand all | Expand 10 after
740 { 749 {
741 content: ""; 750 content: "";
742 background-position: -28px -85px; 751 background-position: -28px -85px;
743 cursor: pointer; 752 cursor: pointer;
744 height: 10px; 753 height: 10px;
745 -webkit-margin-start: 6px; 754 -webkit-margin-start: 6px;
746 -moz-margin-start: 6px; 755 -moz-margin-start: 6px;
747 width: 10px; 756 width: 10px;
748 } 757 }
749 758
759 /*
760 Tooltips
761 */
762
750 .tooltip, #block-element-explanation a 763 .tooltip, #block-element-explanation a
751 { 764 {
752 border-bottom: dotted 2px; 765 border-bottom: dashed 1px;
753 color: #3A7BA6; 766 color: #3A7BA6;
767 cursor: default;
754 font-size: 12px; 768 font-size: 12px;
769 height: 15px;
770 line-height: 19px;
771 margin: 0px 4px;
772 position: relative;
755 text-decoration: none; 773 text-decoration: none;
756 } 774 }
757 775
758 #content-advanced .tooltip 776 #content-advanced .tooltip
759 { 777 {
760 -moz-margin-start: 8px; 778 -moz-margin-start: 8px;
761 -webkit-margin-start: 8px; 779 -webkit-margin-start: 8px;
762 } 780 }
763 781
764 #block-element-explanation a 782 #block-element-explanation a
765 { 783 {
766 color: black; 784 color: black;
767 border-bottom-color: #3A7BA6; 785 border-bottom-color: #3A7BA6;
768 font-weight: 600; 786 font-weight: 600;
769 -moz-padding-start: 0px; 787 -moz-padding-start: 0px;
770 -webkit-padding-start: 0px; 788 -webkit-padding-start: 0px;
771 } 789 }
772 790
791 div[role="tooltip"]
792 {
793 background-color: rgba(45, 45, 45, 0.95);
794 border-radius: 3px;
795 color: #FFF;
796 font-size: 14px;
797 font-weight: 400;
798 left: -20px;
799 line-height: 18px;
800 margin-top: 14px;
801 opacity: 1;
802 padding: 20px;
803 position: absolute;
804 -webkit-transition: opacity 200ms ease-in-out 400ms,
805 visibility 0ms linear 400ms;
806 transition: opacity 200ms ease-in-out 400ms,
807 visibility 0ms linear 400ms;
808 visibility: visible;
809 width: 400px;
810 z-index: 1;
811 }
812
813 html[dir="ltr"] div[role="tooltip"].flip-vertical,
814 html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)
815 {
816 left: inherit;
817 right: -20px;
818 }
819
820 .tooltip:not(:hover) > div[role="tooltip"],
821 div[role="tooltip"]:hover
822 {
823 visibility: hidden;
824 opacity: 0;
825 -webkit-transition-delay: 0ms;
826 transition-delay: 0ms;
827 }
828
829 div[role="tooltip"]::before
830 {
831 background-image: url(options-sprite.png);
832 background-position: -8px -42px;
833 content: "";
834 height: 6px;
835 position: absolute;
836 top: -6px;
837 width: 14px;
838 left: 30px;
839 }
840
841 html[dir="ltr"] div[role="tooltip"].flip-vertical::before,
842 html[dir="rtl"] div[role="tooltip"]:not(.flip-vertical)::before
843 {
844 left: inherit;
845 right: 30px;
846 }
847
848 div[role="tooltip"] img
849 {
850 float: left;
851 height: 64px;
852 margin-top: -2px;
853 margin-bottom: 10px;
854 width: 64px;
855 -moz-margin-end: 10px;
856 -webkit-margin-end: 10px;
857 }
858
859 html[dir="rtl"] div[role="tooltip"] img
860 {
861 float: right;
862 }
863
864 div[role="tooltip"] p
865 {
866 font-weight: 400;
867 margin: 0px;
868 }
869
870 div[role="tooltip"] p:not(:first-of-type)
871 {
872 margin-top: 18px;
873 }
874
875 div[role="tooltip"] .notes
876 {
877 border-top: 1px solid #717171;
878 font-size: 12px;
879 margin-top: 14px;
880 padding-top: 14px;
881 }
882
883 div[role="tooltip"] .notes p
884 {
885 font-weight: 300;
886 }
887
773 /* 888 /*
774 Help tab content 889 Help tab content
775 */ 890 */
776 891
777 #content-help 892 #content-help
778 { 893 {
779 counter-reset: section; 894 counter-reset: section;
780 } 895 }
781 896
782 #content-help h1::before 897 #content-help h1::before
(...skipping 180 matching lines...) Expand 10 before | Expand all | Expand 10 after
963 -moz-padding-end: 10px; 1078 -moz-padding-end: 10px;
964 -webkit-padding-start: 0px; 1079 -webkit-padding-start: 0px;
965 -moz-padding-start: 0px; 1080 -moz-padding-start: 0px;
966 } 1081 }
967 1082
968 #other-language .display 1083 #other-language .display
969 { 1084 {
970 -webkit-margin-start: 10px; 1085 -webkit-margin-start: 10px;
971 -moz-margin-start: 10px; 1086 -moz-margin-start: 10px;
972 } 1087 }
OLDNEW
« no previous file with comments | « options.html ('k') | skin/options-sprite.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld