Home | History | Annotate | Download | only in css 
      1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
      2  * Use of this source code is governed by a BSD-style license that can be
      3  * found in the LICENSE file. */
      4 
      5 /* Styles common to WebUI pages that share the options pages style */
      6 body {
      7   cursor: default;
      8   font-size: 13px;
      9 }
     10 
     11 a:link {
     12   color: rgb(63, 110, 194);
     13 }
     14 
     15 a:active {
     16   color: rgb(37, 64, 113);
     17 }
     18 
     19 #navbar-content-title {
     20   -webkit-padding-end: 24px;
     21   -webkit-user-select: none;
     22   color: #333;
     23   cursor: pointer;
     24   font-size: 200%;
     25   font-weight: normal;
     26   margin: 0;
     27   padding-bottom: 14px;
     28   padding-top: 13px;
     29   text-align: end;
     30   text-shadow: white 0 1px 2px;
     31 }
     32 
     33 #main-content {
     34   bottom: 0;
     35   display: -webkit-box;
     36   left: 0;
     37   position: absolute;
     38   right: 0;
     39   top: 0;
     40 }
     41 
     42 #navbar {
     43   margin: 0;
     44 }
     45 
     46 #navbar-container {
     47   -webkit-border-end: 1px solid rgb(198, 201, 206);
     48   background-color: #f1f1f1;
     49   bottom: 0;
     50   /* We set both left and right for the sake of RTL. */
     51   left: 0;
     52   position: fixed;
     53   right: 0;
     54   top: 0;
     55   width: 216px;
     56   z-index: 2;
     57 }
     58 
     59 html.hide-menu #navbar-container {
     60   display: none;
     61 }
     62 
     63 #navbar-container > ul {
     64   -webkit-user-select: none;
     65   list-style-type: none;
     66   margin: 0;
     67   padding: 0;
     68 }
     69 
     70 .navbar-item {
     71   -webkit-padding-end: 24px;
     72   -webkit-padding-start: 0;
     73   border-bottom: 1px solid transparent;
     74   border-top: 1px solid transparent;
     75   color: #333;
     76   cursor: pointer;
     77   display: block;
     78   font-size: 105%;
     79   outline: none;
     80   padding-bottom: 7px;
     81   padding-top: 7px;
     82   text-align: end;
     83   text-shadow: white 0 1px 1px;
     84 }
     85 
     86 .navbar-item:focus,
     87 .navbar-item-selected {
     88   border-bottom: 1px solid rgb(143, 170, 217);
     89   border-top: 1px solid rgb(143, 170, 217);
     90 }
     91 
     92 .navbar-item-selected {
     93   -webkit-box-shadow: 0 1px 0 #f7f7f7;
     94   background-color: rgb(187, 206, 233);
     95   color: black;
     96   text-shadow: rgb(187, 206, 233) 0 1px 1px;
     97 }
     98 
     99 #mainview {
    100   -webkit-box-align: stretch;
    101   -webkit-padding-start: 216px;
    102   bottom: 0;
    103   left: 0;
    104   margin: 0;
    105   position: absolute;
    106   right: 0;
    107   top: 0;
    108   z-index: 1;
    109 }
    110 
    111 html.hide-menu #mainview {
    112   -webkit-padding-start: 0;
    113 }
    114 
    115 #mainview-content {
    116   min-height: 100%;
    117   position: relative;
    118 }
    119 
    120 #page-container {
    121   box-sizing: border-box;
    122   max-width: 888px;
    123   min-width: 600px;
    124   padding: 0 24px;
    125 }
    126 
    127 div.disabled {
    128   color: #888;
    129 }
    130 
    131 /* TEXT */
    132 input[type='password'],
    133 input[type='text'],
    134 input[type='url'],
    135 input:not([type]) {
    136   -webkit-border-radius: 2px;
    137   border: 1px solid #aaa;
    138   box-sizing: border-box;
    139   font: inherit;
    140   height: 2em;
    141   padding: 4px;
    142 }
    143 
    144 input[type='text']:disabled {
    145   color: #888;
    146 }
    147 
    148 /* Elements that need to be LTR even in an RTL context, but should align
    149  * right. (Namely, URLs, search engine names, etc.)
    150  */
    151 html[dir='rtl'] .weakrtl {
    152   direction: ltr;
    153   text-align: right;
    154 }
    155 
    156 /* Input fields in search engine table need to be weak-rtl. Since those input
    157  * fields are generated for all cr.ListItem elements (and we only want weakrtl
    158  * on some), the class needs to be on the enclosing div.
    159  */
    160 html[dir='rtl'] div.weakrtl input {
    161   direction: ltr;
    162   text-align: right;
    163 }
    164 
    165 html[dir='rtl'] .favicon-cell.weakrtl {
    166   -webkit-padding-end: 22px;
    167   -webkit-padding-start: 0;
    168 }
    169 
    170 /* weakrtl for selection drop downs needs to account for the fact that
    171  * Webkit does not honor the text-align attribute for the select element.
    172  * (See Webkit bug #40216)
    173  */
    174 html[dir='rtl'] select.weakrtl {
    175   direction: rtl;
    176 }
    177 
    178 html[dir='rtl'] select.weakrtl option {
    179   direction: ltr;
    180 }
    181 
    182 /* WebKit does not honor alignment for text specified via placeholder attrib.
    183  * This CSS is a workaround. Please remove once WebKit bug is fixed.
    184  * https://bugs.webkit.org/show_bug.cgi?id=63367
    185  */
    186 html[dir='rtl'] input.weakrtl::-webkit-input-placeholder,
    187 html[dir='rtl'] .weakrtl input::-webkit-input-placeholder {
    188   direction: rtl;
    189 }
    190 
    191 .page h1 {
    192   -webkit-padding-end: 24px;
    193   -webkit-user-select: none;
    194   border-bottom: 1px solid #eee;
    195   color: #333;
    196   font-size: 200%;
    197   font-weight: normal;
    198   margin: 0;
    199   padding-bottom: 4px;
    200   padding-top: 13px;
    201   text-shadow: white 0 1px 2px;
    202 }
    203