API tools faq
paste
SergioRP

Google CSS

SergioRP
May 1st, 2012
128
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.25 KB | None | 0 0
raw download clone embed print report
  1. input[type=checkbox],
  2.   input[type=radio] {
  3.   -webkit-appearance: none;
  4.   appearance: none;
  5.   width: 13px;
  6.   height: 13px;
  7.   margin: 0;
  8.   cursor: pointer;
  9.   vertical-align: bottom;
  10.   background: #fff;
  11.   border: 1px solid #dcdcdc;
  12.   -webkit-border-radius: 1px;
  13.   -moz-border-radius: 1px;
  14.   border-radius: 1px;
  15.   -webkit-box-sizing: border-box;
  16.   -moz-box-sizing: border-box;
  17.   box-sizing: border-box;
  18.   position: relative;
  19.   }
  20.   input[type=checkbox]:active,
  21.   input[type=radio]:active {
  22.   border-color: #c6c6c6;
  23.   background: #ebebeb;
  24.   }
  25.   input[type=checkbox]:hover {
  26.   border-color: #c6c6c6;
  27.   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
  28.   -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
  29.   box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
  30.   }
  31.   input[type=radio] {
  32.   -webkit-border-radius: 1em;
  33.   -moz-border-radius: 1em;
  34.   border-radius: 1em;
  35.   width: 15px;
  36.   height: 15px;
  37.   }
  38.   input[type=checkbox]:checked,
  39.   input[type=radio]:checked {
  40.   background: #fff;
  41.   }
  42.   input[type=radio]:checked::after {
  43.   content: '';
  44.   display: block;
  45.   position: relative;
  46.   top: 3px;
  47.   left: 3px;
  48.   width: 7px;
  49.   height: 7px;
  50.   background: #666;
  51.   -webkit-border-radius: 1em;
  52.   -moz-border-radius: 1em;
  53.   border-radius: 1em;
  54.   }
  55.   input[type=checkbox]:checked::after {
  56.   content: url(//ssl.gstatic.com/ui/v1/menu/checkmark.png);
  57.   display: block;
  58.   position: absolute;
  59.   top: -6px;
  60.   left: -5px;
  61.   }
  62.   input[type=checkbox]:focus {
  63.   outline: none;
  64.   border-color:#4d90fe;
  65.   }
  66.   input[type=email],
  67.   input[type=number],
  68.   input[type=password],
  69.   input[type=text],
  70.   input[type=url] {
  71.   display: inline-block;
  72.   height: 29px;
  73.   margin: 0;
  74.   padding-left: 8px;
  75.   background: #fff;
  76.   border: 1px solid #d9d9d9;
  77.   border-top: 1px solid #c0c0c0;
  78.   -webkit-box-sizing: border-box;
  79.   -moz-box-sizing: border-box;
  80.   box-sizing: border-box;
  81.   -webkit-border-radius: 1px;
  82.   -moz-border-radius: 1px;
  83.   border-radius: 1px;
  84.   }
  85.   input[type=email]:hover,
  86.   input[type=number]:hover,
  87.   input[type=password]:hover,
  88.   input[type=text]:hover,
  89.   input[type=url]:hover {
  90.   border: 1px solid #b9b9b9;
  91.   border-top: 1px solid #a0a0a0;
  92.   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  93.   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  94.   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  95.   }
  96.   input[type=email]:focus,
  97.   input[type=number]:focus,
  98.   input[type=password]:focus,
  99.   input[type=text]:focus,
  100.   input[type=url]:focus {
  101.   outline: none;
  102.   border: 1px solid #4d90fe;
  103.   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  104.   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  105.   box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  106.   }
  107.   input[type=email][disabled=disabled],
  108.   input[type=number][disabled=disabled],
  109.   input[type=password][disabled=disabled],
  110.   input[type=text][disabled=disabled],
  111.   input[type=url][disabled=disabled] {
  112.   border: 1px solid #e5e5e5;
  113.   background: #f5f5f5;
  114.   }
  115.   input[type=email][disabled=disabled]:hover,
  116.   input[type=number][disabled=disabled]:hover,
  117.   input[type=password][disabled=disabled]:hover,
  118.   input[type=text][disabled=disabled]:hover,
  119.   input[type=url][disabled=disabled]:hover {
  120.   -webkit-box-shadow: none;
  121.   -moz-box-shadow: none;
  122.   box-shadow: none;
  123.   }
  124. .input {
  125.     padding:3px;
  126.     -moz-border-radius:3px;
  127.     border-radius:3px;
  128.     font-family:Verdana, Geneva, sans-serif;
  129.     font-size:12px;
  130.     outline:0px #000 solid;
  131.     border:1px #666 solid;
  132.     background:#00bfff;
  133.     color:#000;
  134.     font-weight:bold;
  135.     text-align:center;
  136.     cursor:crosshair;
  137. }
  138. .g-button {
  139.   display: inline-block;
  140.   min-width: 54px;
  141.   text-align: center;
  142.   color: #555;
  143.   font-size: 11px;
  144.   font-weight: bold;
  145.   height: 27px;
  146.   padding: 0 8px;
  147.   line-height: 27px;
  148.   -webkit-border-radius: 2px;
  149.   -moz-border-radius: 2px;
  150.   border-radius: 2px;
  151.   -webkit-transition: all 0.218s;
  152.   -moz-transition: all 0.218s;
  153.   -ms-transition: all 0.218s;
  154.   -o-transition: all 0.218s;
  155.   transition: all 0.218s;
  156.   border: 1px solid #dcdcdc;
  157.   border: 1px solid rgba(0,0,0,0.1);
  158.   background-color: #f5f5f5;
  159.   background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));
  160.   background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
  161.   background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
  162.   background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
  163.   background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
  164.   background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
  165.   -webkit-user-select: none;
  166.   -moz-user-select: none;
  167.   user-select: none;
  168.   cursor: default;
  169.   }
  170.   *+html .g-button {
  171.   min-width: 70px;
  172.   }
  173.   button.g-button,
  174.   input[type=submit].g-button {
  175.   height: 29px;
  176.   line-height: 29px;
  177.   vertical-align: bottom;
  178.   margin: 0;
  179.   }
  180.   *+html button.g-button,
  181.   *+html input[type=submit].g-button {
  182.   overflow: visible;
  183.   }
  184.   .g-button:hover {
  185.   border: 1px solid #c6c6c6;
  186.   color: #333;
  187.   text-decoration: none;
  188.   -webkit-transition: all 0.0s;
  189.   -moz-transition: all 0.0s;
  190.   -ms-transition: all 0.0s;
  191.   -o-transition: all 0.0s;
  192.   transition: all 0.0s;
  193.   background-color: #f8f8f8;
  194.   background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));
  195.   background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
  196.   background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
  197.   background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
  198.   background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
  199.   background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
  200.   -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  201.   -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  202.   box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  203.   }
  204.   .g-button:active {
  205.   background-color: #f6f6f6;
  206.   background-image: -webkit-gradient(linear,left top,left bottom,from(#f6f6f6),to(#f1f1f1));
  207.   background-image: -webkit-linear-gradient(top,#f6f6f6,#f1f1f1);
  208.   background-image: -moz-linear-gradient(top,#f6f6f6,#f1f1f1);
  209.   background-image: -ms-linear-gradient(top,#f6f6f6,#f1f1f1);
  210.   background-image: -o-linear-gradient(top,#f6f6f6,#f1f1f1);
  211.   background-image: linear-gradient(top,#f6f6f6,#f1f1f1);
  212.   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  213.   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  214.   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  215.   }
  216.   .g-button:visited {
  217.   color: #666;
  218.   }
  219.   .g-button-submit {
  220.   border: 1px solid #3079ed;
  221.   color: #fff;
  222.   text-shadow: 0 1px rgba(0,0,0,0.1);
  223.   background-color: #4d90fe;
  224.   background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
  225.   background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
  226.   background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
  227.   background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
  228.   background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
  229.   background-image: linear-gradient(top,#4d90fe,#4787ed);
  230.   }
  231.   .g-button-submit:hover {
  232.   border: 1px solid #2f5bb7;
  233.   color: #fff;
  234.   text-shadow: 0 1px rgba(0,0,0,0.3);
  235.   background-color: #357ae8;
  236.   background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#357ae8));
  237.   background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
  238.   background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
  239.   background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
  240.   background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
  241.   background-image: linear-gradient(top,#4d90fe,#357ae8);
  242.   }
  243.   .g-button-submit:active {
  244.   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  245.   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  246.   box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  247.   }
  248.   .g-button-share {
  249.   border: 1px solid #29691d;
  250.   color: #fff;
  251.   text-shadow: 0 1px rgba(0,0,0,0.1);
  252.   background-color: #3d9400;
  253.   background-image: -webkit-gradient(linear,left top,left bottom,from(#3d9400),to(#398a00));
  254.   background-image: -webkit-linear-gradient(top,#3d9400,#398a00);
  255.   background-image: -moz-linear-gradient(top,#3d9400,#398a00);
  256.   background-image: -ms-linear-gradient(top,#3d9400,#398a00);
  257.   background-image: -o-linear-gradient(top,#3d9400,#398a00);
  258.   background-image: linear-gradient(top,#3d9400,#398a00);
  259.   }
  260.   .g-button-share:hover {
  261.   border: 1px solid #2d6200;
  262.   color: #fff;
  263.   text-shadow: 0 1px rgba(0,0,0,0.3);
  264.   background-color: #368200;
  265.   background-image: -webkit-gradient(linear,left top,left bottom,from(#3d9400),to(#368200));
  266.   background-image: -webkit-linear-gradient(top,#3d9400,#368200);
  267.   background-image: -moz-linear-gradient(top,#3d9400,#368200);
  268.   background-image: -ms-linear-gradient(top,#3d9400,#368200);
  269.   background-image: -o-linear-gradient(top,#3d9400,#368200);
  270.   background-image: linear-gradient(top,#3d9400,#368200);
  271.   }
  272.   .g-button-share:active {
  273.   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  274.   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  275.   box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  276.   }
  277.   .g-button-red {
  278.   border: 1px solid transparent;
  279.   color: #fff;
  280.   text-shadow: 0 1px rgba(0,0,0,0.1);
  281.   text-transform: uppercase;
  282.   background-color: #d14836;
  283.   background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#d14836));
  284.   background-image: -webkit-linear-gradient(top,#dd4b39,#d14836);
  285.   background-image: -moz-linear-gradient(top,#dd4b39,#d14836);
  286.   background-image: -ms-linear-gradient(top,#dd4b39,#d14836);
  287.   background-image: -o-linear-gradient(top,#dd4b39,#d14836);
  288.   background-image: linear-gradient(top,#dd4b39,#d14836);
  289.   }
  290.   .g-button-red:hover {
  291.   border: 1px solid #b0281a;
  292.   color: #fff;
  293.   text-shadow: 0 1px rgba(0,0,0,0.3);
  294.   background-color: #c53727;
  295.   background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#c53727));
  296.   background-image: -webkit-linear-gradient(top,#dd4b39,#c53727);
  297.   background-image: -moz-linear-gradient(top,#dd4b39,#c53727);
  298.   background-image: -ms-linear-gradient(top,#dd4b39,#c53727);
  299.   background-image: -o-linear-gradient(top,#dd4b39,#c53727);
  300.   background-image: linear-gradient(top,#dd4b39,#c53727);
  301.   -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  302.   -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  303.   -ms-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  304.   -o-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  305.   box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  306.   }
  307.   .g-button-red:active {
  308.   border: 1px solid #992a1b;
  309.   background-color: #b0281a;
  310.   background-image: -webkit-gradient(linear,left top,left bottom,from(#dd4b39),to(#b0281a));
  311.   background-image: -webkit-linear-gradient(top,#dd4b39,#b0281a);
  312.   background-image: -moz-linear-gradient(top,#dd4b39,#b0281a);
  313.   background-image: -ms-linear-gradient(top,#dd4b39,#b0281a);
  314.   background-image: -o-linear-gradient(top,#dd4b39,#b0281a);
  315.   background-image: linear-gradient(top,#dd4b39,#b0281a);
  316.   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  317.   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  318.   box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  319.   }
  320.   .g-button-white {
  321.   border: 1px solid #dcdcdc;
  322.   color: #666;
  323.   background: #fff;
  324.   }
  325.   .g-button-white:hover {
  326.   border: 1px solid #c6c6c6;
  327.   color: #333;
  328.   background: #fff;
  329.   -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  330.   -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  331.   box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  332.   }
  333.   .g-button-white:active {
  334.   background: #fff;
  335.   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  336.   -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  337.   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  338.   }
  339.   .g-button-red:visited,
  340.   .g-button-share:visited,
  341.   .g-button-submit:visited {
  342.   color: #fff;
  343.   }
  344.   .g-button-submit:focus,
  345.   .g-button-share:focus,
  346.   .g-button-red:focus {
  347.   -webkit-box-shadow: inset 0 0 0 1px #fff;
  348.   -moz-box-shadow: inset 0 0 0 1px #fff;
  349.   box-shadow: inset 0 0 0 1px #fff;
  350.   }
  351.   .g-button-share:focus {
  352.   border-color: #29691d;
  353.   }
  354.   .g-button-red:focus {
  355.   border-color: #d14836;
  356.   }
  357.   .g-button-submit:focus:hover,
  358.   .g-button-share:focus:hover,
  359.   .g-button-red:focus:hover {
  360.   -webkit-box-shadow: inset 0 0 0 1px #fff, 0 1px 1px rgba(0,0,0,0.1);
  361.   -moz-box-shadow: inset 0 0 0 1px #fff, 0 1px 1px rgba(0,0,0,0.1);
  362.   box-shadow: inset 0 0 0 1px #fff, 0 1px 1px rgba(0,0,0,0.1);
  363.   }
  364.   .g-button img {
  365.   display: inline-block;
  366.   margin: -3px 0 0;
  367.   opacity: .55;
  368.   vertical-align: middle;
  369.   }
  370.   *+html .g-button img {
  371.   margin: 4px 0 0;
  372.   }
  373.   .g-button:hover img {
  374.   opacity: .72;
  375.   }
  376.   .g-button:active img {
  377.   opacity: 1;
  378.   }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!