css/options.css

   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,
  53 #opt-prompt,
  54 #opt-cookies,
  55 #opt-downloads,
  56 #opt-autoclear {
  57   background-color: white;
  58   clear: left;
  59   margin: 5px auto;
  60   overflow: hidden;
  61   padding: 5px 5px;
  62 }
  63 .opt-name {
  64   float: left;
  65   width: 175px;
  66 }
  67 .opt-value {
  68   float: left;
  69   width: 215px;
  70 }
  71 .opt-value .opt-option {
  72   clear: left;
  73   margin-bottom: 5px;
  74   overflow: hidden;
  75 }
  76 .opt-value .opt-option .opt-chk {
  77   float: left;
  78 }
  79 .opt-value .opt-option .opt-label {
  80   float: left;
  81   margin-top: -3px;
  82   padding-left: 6px;
  83 }
  84 #optionsSaved {
  85   clear: left;
  86   margin: 10px auto 5px;
  87   padding: 5px;
  88   text-align: center;
  89 }
  90 #optionsSaved b {
  91   background-color: #f9edbe;
  92   border: 1px solid #f0c36d;
  93   border-radius: 2px;
  94   color: #333;
  95   font-weight: normal;
  96   opacity: 0;
  97   padding: 6px 16px;
  98   -webkit-transition: opacity 130ms ease-in-out;
  99 }
 100 #optionsSaved.show b {
 101   opacity: 1;
 102   -webkit-transition: opacity 50ms ease-in-out;
 103 }
 104 input[type="checkbox"],
 105 input[type="radio"] {
 106   -webkit-appearance: none;
 107   background-color: white;
 108   border: 1px solid #dcdcdc;
 109   height: 13px;
 110   margin: 0;
 111   width: 13px;
 112 }
 113 input[type="radio"] {
 114   border-radius: 50%;
 115   height: 15px;
 116   width: 15px;
 117 }
 118 input[type="checkbox"]:hover,
 119 input[type="radio"]:hover {
 120   border-color: #c6c6c6;
 121   -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1)
 122 }
 123 input[type="checkbox"]:active,
 124 input[type="radio"]:active {
 125   background-color: #ebebeb;
 126   border-color: #c6c6c6;
 127 }
 128 input[type="radio"]:checked::after {
 129   background: #666;
 130   border-radius: 50%;
 131   content: '';
 132   display: block;
 133   height: 7px;
 134   margin: 3px auto;
 135   width: 7px;
 136 }
 137 input[type="checkbox"]:checked::after {
 138   content: url('../images/check.png');
 139   display: block;
 140   left: -5px;
 141   position: relative;
 142   top: -6px;
 143 }
 144 input[type="checkbox"]:focus,
 145 input[type="radio"]:focus {
 146   outline: none;
 147   border-color: #4d90fe;
 148 }