1/* Styles common to WebUI pages that share the options pages style */ 2body { 3 cursor: default; 4 font-size: 13px; 5} 6 7a:link { 8 color: rgb(63, 110, 194); 9} 10 11a:active { 12 color: rgb(37, 64, 113); 13} 14 15#navbar-content-title { 16 -webkit-padding-end: 24px; 17 -webkit-user-select: none; 18 color: #53637d; 19 cursor: pointer; 20 font-size: 200%; 21 font-weight: normal; 22 margin: 0; 23 padding-bottom: 14px; 24 padding-top: 13px; 25 text-align: end; 26 text-shadow: white 0 1px 2px; 27} 28 29#main-content { 30 display: -webkit-box; 31 position: absolute; 32 left: 0; 33 right: 0; 34 top: 0; 35 bottom: 0; 36} 37 38#navbar { 39 margin: 0; 40} 41 42#navbar-container { 43 -webkit-border-end: 1px solid #c6c9ce; 44 background: -webkit-linear-gradient(rgba(234, 238, 243, 0.2), #eaeef3), 45 -webkit-linear-gradient(left, #eaeef3, #eaeef3 97%, #d3d7db); 46 position: fixed; 47 bottom: 0; 48 /* We set both left and right for the sake of RTL. */ 49 left: 0; 50 right: 0; 51 top: 0; 52 width: 216px; 53 z-index: 2; 54} 55 56html[dir='rtl'] #navbar-container { 57 background: -webkit-linear-gradient(rgba(234, 238, 243, 0), #EAEEF3), 58 -webkit-linear-gradient(right, #EAEEF3, #EAEEF3 97%, #D3D7DB); 59} 60 61html.hide-menu #navbar-container { 62 display: none; 63} 64 65#navbar-container > ul { 66 -webkit-user-select: none; 67 list-style-type: none; 68 margin: 0; 69 padding: 0; 70} 71 72.navbar-item { 73 border-bottom: 1px solid transparent; 74 border-top: 1px solid transparent; 75 color: #426dc9; 76 cursor: pointer; 77 display: block; 78 font-size: 105%; 79 outline: none; 80 padding: 7px 0; 81 text-align: end; 82 text-shadow: white 0 1px 1px; 83 -webkit-padding-end: 24px; 84} 85 86.navbar-item:focus { 87 border-bottom: 1px solid #8faad9; 88 border-top: 1px solid #8faad9; 89} 90 91.navbar-item-selected { 92 -webkit-box-shadow: 0px 1px 0px #f7f7f7; 93 background: -webkit-linear-gradient(left, #bbcee9, #bbcee9 97%, #aabedc); 94 border-bottom: 1px solid #8faad9; 95 border-top: 1px solid #8faad9; 96 color: black; 97 text-shadow: #bbcee9 0 1px 1px; 98} 99 100#mainview { 101 -webkit-box-align: stretch; 102 -webkit-padding-start: 216px; 103 margin: 0; 104 position: absolute; 105 left: 0; 106 right: 0; 107 top: 0; 108 bottom: 0; 109 z-index: 1; 110} 111 112html.hide-menu #mainview { 113 -webkit-padding-start: 0; 114} 115 116#mainview-content { 117 min-height: 100%; 118 position: relative; 119} 120 121#page-container { 122 box-sizing: border-box; 123 max-width: 888px; 124 min-width: 600px; 125 padding: 0 24px; 126} 127 128div.checkbox, 129div.radio { 130 margin: 5px 0; 131 color: #444; 132} 133 134div.disabled { 135 color: #888; 136} 137 138/* TEXT */ 139input[type='password'], 140input[type='text'], 141input[type='url'], 142input:not([type]) { 143 -webkit-border-radius: 2px; 144 border: 1px solid #aaa; 145 font-size: inherit; 146 padding: 3px; 147} 148 149/* CHECKBOX, RADIO */ 150input[type=checkbox], 151input[type=radio] { 152 margin-left: 0; 153 margin-right: 0; 154 position: relative; 155 top: 1px; 156} 157 158/* Checkbox and radio buttons have different sizes on different platforms. The 159 * following rules have platform specific tweaks. 160 * TODO(arv): Test the vertical position on Linux and CrOS as well. 161 */ 162 163label > input[type=checkbox], 164label > input[type=radio] { 165 opacity: 0.7; 166 margin-top: 1px; 167} 168 169html[os=mac] label > input[type=checkbox], 170html[os=mac] label > input[type=radio] { 171 margin-top: 2px; 172} 173 174html[os=chromeos] label > input[type=checkbox], 175html[os=chromeos] label > input[type=radio] { 176 top: 2px; 177} 178 179/* Checkbox and radio hover visuals. 180 * Their appearance when checked is set to be the same. 181 */ 182label:hover > input[type=checkbox]:not([disabled]), 183label:hover > input[type=radio]:not([disabled]), 184label > input:not([disabled]):checked { 185 opacity: 1; 186} 187 188label:hover > input[type=checkbox]:not([disabled]) ~ span, 189label:hover > input[type=radio]:not([disabled]) ~ span, 190label > input:not([disabled]):checked ~ span { 191 color: #222; 192} 193 194/* This will 'disable' the label associated with any input whose next sibling is 195 * the span containing the label (usually a checkbox or radio). 196 */ 197label > input[disabled] ~ span { 198 color: #888; 199} 200 201/* Elements that need to be LTR even in an RTL context, but should align 202 * right. (Namely, URLs, search engine names, etc.) 203 */ 204html[dir='rtl'] .weakrtl { 205 direction: ltr; 206 text-align: right; 207} 208 209/* Input fields in search engine table need to be weak-rtl. Since those input 210 * fields are generated for all cr.ListItem elements (and we only want weakrtl 211 * on some), the class needs to be on the enclosing div. 212 */ 213html[dir='rtl'] div.weakrtl input { 214 direction: ltr; 215 text-align: right; 216} 217 218html[dir='rtl'] .favicon-cell.weakrtl { 219 -webkit-padding-end: 22px; 220 -webkit-padding-start: 0; 221} 222 223/* weakrtl for selection drop downs needs to account for the fact that 224 * Webkit does not honor the text-align attribute for the select element. 225 * (See Webkit bug #40216) 226 */ 227html[dir='rtl'] select.weakrtl { 228 direction: rtl; 229} 230 231html[dir='rtl'] select.weakrtl option { 232 direction: ltr; 233} 234 235/* WebKit does not honor alignment for text specified via placeholder attrib. 236 * This CSS is a workaround. Please remove once WebKit bug is fixed. 237 * https://bugs.webkit.org/show_bug.cgi?id=63367 238 */ 239html[dir='rtl'] input.weakrtl::-webkit-input-placeholder, 240html[dir='rtl'] .weakrtl input::-webkit-input-placeholder { 241 direction: rtl; 242} 243 244.page h1 { 245 -webkit-padding-end: 24px; 246 -webkit-user-select: none; 247 border-bottom: 1px solid #eeeeee; 248 color: #53637d; 249 font-size: 200%; 250 font-weight: normal; 251 margin: 0; 252 padding-bottom: 4px; 253 padding-top: 13px; 254 text-shadow: white 0 1px 2px; 255} 256 257 258