]>
Commit | Line | Data |
---|---|---|
a5409a6b MF |
1 | /* Copyright 2011 Google Inc. All Rights Reserved. */ |
2 | ||
3 | /** | |
4 | * @fileoverview The styles for elements of the options page | |
5 | * @author arunjit@google.com (Arunjit Singh) | |
6 | */ | |
7 | ||
8 | @CHARSET "UTF-8"; | |
9 | body { | |
10 | background-color: #eef; | |
11 | color: #222; | |
12 | direction: __MSG_@@bidi_dir__; /* Predefined message from Chrome Extension */ | |
13 | font: 13px/18px "Arial"; | |
14 | } | |
15 | header { | |
16 | color: #333; | |
17 | margin: 0 auto; | |
18 | text-align: left; | |
19 | width: 400px; | |
20 | } | |
21 | h1 { | |
22 | color: #dd4b39; | |
23 | font: 20px/24px "Arial" normal; | |
24 | margin: 5px 0 0; | |
25 | padding: 0 5px 3px; | |
26 | } | |
27 | h1 > img, | |
28 | h1 > span { | |
29 | vertical-align: middle; | |
30 | } | |
31 | hr { | |
32 | background-color: #ebebeb; | |
33 | border: none; | |
34 | clear: both; | |
35 | height: 1px; | |
36 | margin: 5px auto; | |
37 | width: 400px; | |
38 | } | |
39 | #content { | |
40 | background-color: #fff; | |
41 | border: 4px solid rgba(0, 0, 0, 0.2); | |
42 | border-radius: 12px; | |
43 | margin: 40px auto 0; | |
44 | padding: 10px 10px 0; | |
45 | width: 500px; | |
46 | } | |
47 | #opt-form { | |
48 | margin: 10px auto; | |
49 | overflow: hidden; | |
50 | width: 400px; | |
51 | } | |
52 | #opt-time, | |
77dffdcd MF |
53 | #opt-prompt, |
54 | #opt-cookies { | |
a5409a6b MF |
55 | background-color: white; |
56 | clear: left; | |
57 | margin: 5px auto; | |
58 | overflow: hidden; | |
59 | padding: 5px 5px; | |
60 | } | |
61 | .opt-name { | |
62 | float: left; | |
63 | width: 175px; | |
64 | } | |
65 | .opt-value { | |
66 | float: left; | |
67 | width: 215px; | |
68 | } | |
69 | .opt-value .opt-option { | |
70 | clear: left; | |
71 | margin-bottom: 5px; | |
72 | overflow: hidden; | |
73 | } | |
74 | .opt-value .opt-option .opt-chk { | |
75 | float: left; | |
76 | } | |
77 | .opt-value .opt-option .opt-label { | |
78 | float: left; | |
79 | margin-top: -3px; | |
80 | padding-left: 6px; | |
81 | } | |
82 | #optionsSaved { | |
83 | clear: left; | |
84 | margin: 10px auto 5px; | |
85 | padding: 5px; | |
86 | text-align: center; | |
87 | } | |
88 | #optionsSaved b { | |
89 | background-color: #f9edbe; | |
90 | border: 1px solid #f0c36d; | |
91 | border-radius: 2px; | |
92 | color: #333; | |
93 | font-weight: normal; | |
94 | opacity: 0; | |
95 | padding: 6px 16px; | |
96 | -webkit-transition: opacity 130ms ease-in-out; | |
97 | } | |
98 | #optionsSaved.show b { | |
99 | opacity: 1; | |
100 | -webkit-transition: opacity 50ms ease-in-out; | |
101 | } | |
102 | input[type="checkbox"], | |
103 | input[type="radio"] { | |
104 | -webkit-appearance: none; | |
105 | background-color: white; | |
106 | border: 1px solid #dcdcdc; | |
107 | height: 13px; | |
108 | margin: 0; | |
109 | width: 13px; | |
110 | } | |
111 | input[type="radio"] { | |
112 | border-radius: 50%; | |
113 | height: 15px; | |
114 | width: 15px; | |
115 | } | |
116 | input[type="checkbox"]:hover, | |
117 | input[type="radio"]:hover { | |
118 | border-color: #c6c6c6; | |
119 | -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1) | |
120 | } | |
121 | input[type="checkbox"]:active, | |
122 | input[type="radio"]:active { | |
123 | background-color: #ebebeb; | |
124 | border-color: #c6c6c6; | |
125 | } | |
126 | input[type="radio"]:checked::after { | |
127 | background: #666; | |
128 | border-radius: 50%; | |
129 | content: ''; | |
130 | display: block; | |
131 | height: 7px; | |
132 | margin: 3px auto; | |
133 | width: 7px; | |
134 | } | |
135 | input[type="checkbox"]:checked::after { | |
136 | content: url('../images/check.png'); | |
137 | display: block; | |
138 | left: -5px; | |
139 | position: relative; | |
140 | top: -6px; | |
141 | } | |
142 | input[type="checkbox"]:focus, | |
143 | input[type="radio"]:focus { | |
144 | outline: none; | |
145 | border-color: #4d90fe; | |
146 | } |