imagine

a simple image editor
git clone git://source.orangerot.dev:/university/imagine.git
Log | Files | Refs | README | LICENSE

bulma-slider.css (6273B)

      1 input[type=range].slider {
      2   height: 25px;
      3   -webkit-appearance: none;
      4   margin: 10px 0;
      5   background-color: inherit;
      6 }
      7 
      8 input[type=range].slider.is-fullwidth {
      9   display: block;
     10   width: 100%;
     11 }
     12 input[type=range].slider:focus {
     13   outline: none;
     14 }
     15 
     16 input[type=range].slider.has-output + output {
     17   width: 4rem;
     18   background-color: #4a4a4a;
     19   border-radius: 4px;
     20   padding: .4rem .8rem;
     21   font-size: .75rem;
     22   line-height: .75rem;
     23   text-align: center;
     24   text-overflow: ellipsis;
     25   white-space: nowrap;
     26   color: #fff;
     27   overflow: hidden;
     28   pointer-events: none;
     29   z-index:200;
     30 }
     31 
     32 input[type=range].slider.has-output {
     33   display: inline-block;
     34   vertical-align: middle;
     35 }
     36 
     37 input[type=range].slider.is-fullwidth.has-output {
     38   width: calc(100% - 5.2rem);
     39 }
     40 
     41 input[type=range].slider.has-output + output {
     42   display: inline-block;
     43   margin-left: .75rem;
     44   vertical-align: middle;
     45 }
     46 
     47 input[type=range].slider::-webkit-slider-runnable-track {
     48   width: 100%;
     49   height: 5px;
     50   cursor: pointer;
     51   animate: 0.2s;
     52   box-shadow: 0px 0px 0px #000000;
     53   background-color: #dbdbdb;
     54   border-radius: 4px;
     55   border: 0px solid #000000;
     56 }
     57 input[type=range].slider::-webkit-slider-thumb {
     58   box-shadow: 0px 0px 0px #000000;
     59   border: 1px solid #b5b5b5;
     60   height: 18px;
     61   width: 18px;
     62   border-radius: 25px;
     63   background-color: #ffffff;
     64   cursor: pointer;
     65   -webkit-appearance: none;
     66   margin-top: -7px;
     67 }
     68 input[type=range].slider:focus::-webkit-slider-runnable-track {
     69   background-color: #dbdbdb;
     70 }
     71 
     72 input[type=range].slider::-moz-range-track {
     73   width: 100%;
     74   height: 5px;
     75   cursor: pointer;
     76   animate: 0.2s;
     77   box-shadow: 0px 0px 0px #000000;
     78   background-color: #dbdbdb;
     79   border-radius: 4px;
     80   border: 0px solid #000000;
     81 }
     82 input[type=range].slider::-moz-range-thumb {
     83   box-shadow: 0px 0px 0px #000000;
     84   border: 1px solid #b5b5b5;
     85   height: 18px;
     86   width: 18px;
     87   border-radius: 25px;
     88   background-color: #ffffff;
     89   cursor: pointer;
     90 }
     91 
     92 input[type=range].slider::-ms-track {
     93   width: 100%;
     94   height: 5px;
     95   cursor: pointer;
     96   animate: 0.2s;
     97   background-color: transparent;
     98   border-color: transparent;
     99   color: transparent;
    100 }
    101 input[type=range].slider::-ms-fill-lower {
    102   background-color: #dbdbdb;
    103   border: 0px solid #000000;
    104   border-radius: 8px;
    105   box-shadow: 0px 0px 0px #000000;
    106 }
    107 input[type=range].slider::-ms-fill-upper {
    108   background-color: #dbdbdb;
    109   border: 0px solid #000000;
    110   border-radius: 4px;
    111   box-shadow: 0px 0px 0px #000000;
    112 }
    113 input[type=range].slider::-ms-thumb {
    114   margin-top: 1px;
    115   box-shadow: 0px 0px 0px #000000;
    116   border: 1px solid #b5b5b5;
    117   height: 18px;
    118   width: 18px;
    119   border-radius: 25px;
    120   background-color: #ffffff;
    121   cursor: pointer;
    122 }
    123 input[type=range].slider:focus::-ms-fill-lower {
    124   background-color: #dbdbdb;
    125 }
    126 input[type=range].slider:focus::-ms-fill-upper {
    127   background-color: #dbdbdb;
    128 }
    129 
    130 input[type=range].slider.is-primary::-webkit-slider-runnable-track {
    131   background-color: #00d1b2 !important;
    132 }
    133 input[type=range].slider.is-primary::-moz-range-track {
    134   background-color: #00d1b2 !important;
    135 }
    136 input[type=range].slider.is-primary::-ms-fill-lower {
    137   background-color: #00d1b2 !important;
    138 }
    139 input[type=range].slider.is-primary::-ms-fill-upper {
    140   background-color: #00d1b2 !important;
    141 }
    142 
    143 input[type=range].slider.is-link::-webkit-slider-runnable-track {
    144   background-color: #3273dc !important;
    145 }
    146 input[type=range].slider.is-link::-moz-range-track {
    147   background-color: #3273dc !important;
    148 }
    149 input[type=range].slider.is-link::-ms-fill-lower {
    150   background-color: #3273dc !important;
    151 }
    152 input[type=range].slider.is-link::-ms-fill-upper {
    153   background-color: #3273dc !important;
    154 }
    155 
    156 input[type=range].slider.is-info::-webkit-slider-runnable-track {
    157   background-color: #209cee !important;
    158 }
    159 input[type=range].slider.is-info::-moz-range-track {
    160   background-color: #209cee !important;
    161 }
    162 input[type=range].slider.is-info::-ms-fill-lower {
    163   background-color: #209cee !important;
    164 }
    165 input[type=range].slider.is-info::-ms-fill-upper {
    166   background-color: #209cee !important;
    167 }
    168 
    169 input[type=range].slider.is-success::-webkit-slider-runnable-track {
    170   background-color: #23d160 !important;
    171 }
    172 input[type=range].slider.is-success::-moz-range-track {
    173   background-color: #23d160 !important;
    174 }
    175 input[type=range].slider.is-success::-ms-fill-lower {
    176   background-color: #23d160 !important;
    177 }
    178 input[type=range].slider.is-success::-ms-fill-upper {
    179   background-color: #23d160 !important;
    180 }
    181 
    182 input[type=range].slider.is-warning::-webkit-slider-runnable-track {
    183   background-color: #ffdd57 !important;
    184 }
    185 input[type=range].slider.is-warning::-moz-range-track {
    186   background-color: #ffdd57 !important;
    187 }
    188 input[type=range].slider.is-warning::-ms-fill-lower {
    189   background-color: #ffdd57 !important;
    190 }
    191 input[type=range].slider.is-warning::-ms-fill-upper {
    192   background-color: #ffdd57 !important;
    193 }
    194 
    195 input[type=range].slider.is-danger::-webkit-slider-runnable-track {
    196   background-color: #ff3860 !important;
    197 }
    198 input[type=range].slider.is-danger::-moz-range-track {
    199   background-color: #ff3860 !important;
    200 }
    201 input[type=range].slider.is-danger::-ms-fill-lower {
    202   background-color: #ff3860 !important;
    203 }
    204 input[type=range].slider.is-danger::-ms-fill-upper {
    205   background-color: #ff3860 !important;
    206 }
    207 
    208 input[type=range].slider.is-white.has-output + output {
    209   background-color: #fff;
    210   color: #0a0a0a;
    211 }
    212 
    213 input[type=range].slider.is-black.has-output + output {
    214   background-color: #0a0a0a;
    215   color: #ffffff;
    216 }
    217 
    218 input[type=range].slider.is-light.has-output + output {
    219   background-color: #f5f5f5;
    220   color: #363636;
    221 }
    222 
    223 input[type=range].slider.is-dark.has-output + output {
    224   background-color: #363636;
    225   color: #f5f5f5;
    226 }
    227 
    228 input[type=range].slider.is-primary.has-output + output {
    229   background-color: #00d1b2;
    230   color: #ffffff;
    231 }
    232 
    233 input[type=range].slider.is-link.has-output + output {
    234   background-color: #3273dc;
    235   color: #ffffff;
    236 }
    237 
    238 input[type=range].slider.is-info.has-output + output {
    239   background-color: #209cee;
    240   color: #ffffff;
    241 }
    242 
    243 input[type=range].slider.is-success.has-output + output {
    244   background-color: #23d160;
    245   color: #ffffff;
    246 }
    247 
    248 input[type=range].slider.is-warning.has-output + output {
    249   background-color: #ffdd57;
    250   color: rgba(0, 0, 0, .7);
    251 }
    252 
    253 input[type=range].slider.is-danger.has-output + output {
    254   background-color: #ff3860;
    255   color: #ffffff;
    256 }