solrkit
Version:
 
159 lines (140 loc) • 3.2 kB
CSS
/*! Kuler D3 by Benjamin Knight */
/** Base & Generic */
html {
min-height: 100%; }
body {
background: black;
margin: 0 auto; }
/** Components */
.colorwheel {
position: relative;
z-index: 1;
display: block;
width: 400px;
height: 400px;
margin: 60px auto 0; }
.colorwheel-marker:first-child circle {
stroke-opacity: 1;
stroke-width: 5px; }
.colorwheel-marker text {
text-shadow: 1px 1px 1px black, 0 0 3px rgba(0, 0, 0, 0.25); }
[data-mode=Shades] .colorwheel-marker text {
display: none; }
.colorwheel-theme {
display: flex;
text-align: center;
max-width: 450px;
min-width: 350px;
margin: 10px auto 0; }
.colorwheel-theme-swatch {
flex: 1;
padding: 0 0.6% 20px; }
.colorwheel-theme-swatch input {
opacity: 0.3; }
.colorwheel-theme-swatch:hover input {
opacity: 0.75; }
.colorwheel-theme-color {
position: relative;
border-radius: 50%;
padding-top: 100%;
box-shadow: 2px 2px 0 black; }
.colorwheel-theme-slider {
position: relative;
display: block;
width: 100%;
margin: 0 0 15px;
-webkit-appearance: none;
outline: none;
background: transparent; }
.colorwheel-theme-slider:before {
content: attr(value) "%";
display: block;
position: absolute;
z-index: -1;
top: 30px;
width: 100%;
font-size: 10px;
text-align: center;
color: white;
text-shadow: 1px 0 1px rgba(0, 0, 0, 0.5); }
.colorwheel-theme-value {
outline: none;
width: 100%;
border: none;
font-family: Monaco, monospace;
text-align: center;
background: transparent;
color: white; }
.colorwheel-mode-toggle {
position: absolute;
z-index: 2;
top: 20px;
right: 20px;
height: 2em;
border: none;
background: #000;
color: rgba(255, 255, 255, 0.75);
font-size: 20px; }
.colorwheel-mode-toggle:hover {
color: rgba(255, 255, 255, 0.9); }
.colorwheel-gradient {
z-index: -1;
opacity: 0.5;
-webkit-filter: url(#blur);
filter: url(#blur);
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateZ(0); }
/** Trumps */
::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 2px;
border: none;
margin: 1em 0;
background: #fff;
color: #fff; }
::-moz-range-track {
height: 2px;
border: none;
margin: 1em 0;
background: #fff;
color: #fff; }
::-ms-track {
height: 2px;
border: none;
margin: 1em 0;
background: #fff;
color: #fff; }
::-ms-fill-lower,
::-ms-fill-upper,
::-ms-ticks-before,
::-ms-ticks-after,
::-ms-tooltip {
display: none; }
::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -7px;
background: black;
border: 2px solid #fff;
height: 15px;
width: 15px;
border-radius: 99px;
cursor: ew-resize; }
::-moz-range-thumb {
background: black;
border: 2px solid #fff;
height: 15px;
width: 15px;
border-radius: 99px;
cursor: ew-resize; }
::-ms-thumb {
background: black;
border: 2px solid #fff;
height: 15px;
width: 15px;
border-radius: 99px;
cursor: ew-resize; }