LCARStrek/global/checkbox.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /* ===== checkbox.css ===================================================
   6   == Styles used by the XUL checkbox element.
   7   ======================================================================= */
   8
   9 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  10
  11 /* ::::: checkbox ::::: */
  12
  13 checkbox {
  14   -moz-box-align: center;
  15   margin: 1px 2px;
  16   padding-top: 0;
  17   padding-bottom: 0;
  18   padding-inline-start: 2px;
  19   padding-inline-end: 0;
  20 }
  21
  22 .checkbox-label-box {
  23   border: 1px solid transparent;
  24   color: #FF9F00;
  25 }
  26
  27 .checkbox-icon {
  28   margin-inline-end: 2px;
  29 }
  30
  31 .checkbox-label {
  32   margin: 0 !important;
  33 }
  34
  35 /* ..... focused state ..... */
  36
  37 checkbox:-moz-focusring > .checkbox-label-box {
  38   border: 1px dotted #008484;
  39 }
  40
  41 /* ..... disabled state ..... */
  42
  43 checkbox[disabled="true"] > .checkbox-check {
  44   border: 1px solid #8050B0;
  45   background-color: #000000;
  46 }
  47
  48 checkbox[disabled="true"] > .checkbox-label-box {
  49   color: #8050B0;
  50 }
  51
  52 /* ::::: checkmark image ::::: */
  53
  54 .checkbox-check {
  55   border-radius: 2px;
  56   border: 1px solid #FF9F00;
  57   width: 1em;
  58   height: 1em;
  59   min-width: 12px;
  60   min-height: 12px;
  61   background: #000000 no-repeat 50% 50%;
  62   margin-inline-end: 3px;
  63 }
  64
  65 checkbox:not([disabled="true"]):hover > .checkbox-check,
  66 checkbox:not([disabled="true"]):hover:active > .checkbox-check {
  67   border: 1px solid #FFCF00;
  68 }
  69
  70 checkbox:not([disabled="true"]):hover > .checkbox-label-box,
  71 checkbox:not([disabled="true"]):hover:active > .checkbox-label-box {
  72   color: #FFCF00;
  73 }
  74
  75 /* ..... checked state ..... */
  76
  77 checkbox[checked="true"] > .checkbox-check {
  78   background-image: url("chrome://global/skin/checkbox/cbox-check.gif");
  79 }
  80
  81 checkbox[checked="true"]:hover > .checkbox-check,
  82 checkbox[checked="true"]:hover:active > .checkbox-check {
  83   background-image: url("chrome://global/skin/checkbox/cbox-check-hover.gif");
  84 }
  85
  86 checkbox[checked="true"][disabled="true"] .checkbox-check {
  87   background-image: url("chrome://global/skin/checkbox/cbox-check-disabled.gif") !important;
  88 }
  89
  90 /* ..... checkbox in groupbox caption ..... */
  91
  92 caption > checkbox {
  93   border-radius: 7px;
  94   border: 0;
  95   margin: 0 -3px;
  96   padding: 0 5px;
  97 }
  98
  99 caption > checkbox:hover {
 100   background-color: #FFCF00;
 101 }
 102
 103 caption > checkbox:hover:active {
 104   background-color: #FF9F00;
 105 }
 106
 107 caption > checkbox:not([disabled="true"]) > .checkbox-label-box,
 108 caption > checkbox:not([disabled="true"]):hover > .checkbox-label-box,
 109 caption > checkbox:not([disabled="true"]):hover:active > .checkbox-label-box {
 110   color: inherit;
 111 }
 112
 113 caption > checkbox:not([disabled="true"]) > .checkbox-check,
 114 caption > checkbox:not([disabled="true"]):hover > .checkbox-check,
 115 caption > checkbox:not([disabled="true"]):hover:active > .checkbox-check {
 116   border-color: #000000;
 117 }
 118
 119 caption > checkbox[checked="true"] > .checkbox-check,
 120 caption > checkbox[checked="true"]:hover > .checkbox-check,
 121 caption > checkbox[checked="true"]:hover:active > .checkbox-check {
 122   background-image: url("chrome://global/skin/checkbox/cbox-check-inverted.gif");
 123 }