body.MCP_init {
cursor: wait; }
body.MCP_drag {
cursor: move; }
body.MCP_dragMyPaletteColor {
cursor: not-allowed; }
/*hate to do it, but MSIE10 puts us in a pickle. Besides, the layout IS dependent on fixed-pixel canvas-graphics*/
#MasterColorPicker {
font-family: serif;
font-size: 16px; } /*lock down the font-size*/
#MasterColorPicker input {
font-family: "consolas", monospace;
font-size: 13px; } /*lock down the font-size. Help keep MSIE10’s range-bar in line with others*/
#MasterColorPicker input[type="range"] {
vertical-align: middle; /*fix Google’s Chrome*/
width: 12em; /*align Google’s Chrome (now Blink) and MSIE10 with the smart central-balance of Opera(12.16)’s native size.*/
}
#MasterColorPicker input[type="range"]:focus {
border: none; }
/*------*
span.MCP_fix_Safari {
background-color: lightGray;
border-radius: 1em / .618em; }
/*------*/
#MasterColorPicker input[type="range"] {
/*removes default webkit styles*/
-webkit-appearance: none; }
#MasterColorPicker input[type="range"]::-webkit-slider-runnable-track {
/* width: 12em; */
height: 5px;
background: #808080;
border: none;
border-radius: 3px; }
#MasterColorPicker input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -4px;
border: 1px solid black;
height: 16px;
width: 16px;
border-radius: 50%;
background: white; }
#MasterColorPicker input[type="range"]:focus::-webkit-slider-runnable-track {
background: lightSteelBlue; }
#MasterColorPicker input[type="range"]::-ms-fill-lower,
#MasterColorPicker input[type="range"]::-ms-fill-upper {
/* width: 12em; */
height: 5px;
background: #808080;
border: none;
border-radius: 3px; }
#MasterColorPicker input[type="range"]::-ms-thumb {
margin-top: -4px;
border: 1px solid black;
height: 16px;
width: 16px;
border-radius: 50%;
background: white; }
#MasterColorPicker input[type="range"]::-ms-fill-lower:focus,
#MasterColorPicker input[type="range"]::-ms-fill-upper:focus {
background: lightSteelBlue; }
#MasterColorPicker input[type="range"]::-moz-range-track {
/* width: 12em; */
height: 5px;
background: #808080;
border: none;
border-radius: 3px; }
#MasterColorPicker input[type="range"]::-moz-range-thumb {
margin-top: -4px;
border: 1px solid black;
height: 16px;
width: 16px;
border-radius: 50%;
background: white; }
#MasterColorPicker input[type="range"]:focus::-moz-range-track {
background: lightSteelBlue; }
/*------*/
#MasterColorPicker button {
background-color: lightSkyBlue;
font-variant: small-caps;
border-radius: .618em / 1em; }
#MasterColorPicker span.swatch {
display: inline-block;
width: 2.618em;
height: 1.1618em;
padding: 0;
margin: 0;
vertical-align: text-bottom; }
#MasterColorPicker_debugLog {
position: fixed;
top: .618em;
left: .618em;
width: 37em;
height: 27em;
overflow: auto; /*Opera is the only legacy browser that will properly auto-scroll this fixed-position window as a new event is logged*/
white-space: pre;
background-color: white;
color: black;
z-index: 10000; }
/* These classes are dynamically applied to ALL registered panels when you:
• activate/deactivate the MasterColorPicker
• click on one of the panels.
The one clicked on gets moved to the highest level. */
#MasterColorPicker .pickerPanelZLevel1 {z-index: 3142;} /* adjust base level to your needs */
#MasterColorPicker .pickerPanelZLevel2 {z-index: 3143;} /* …and so on… for each new panel you register */
#MasterColorPicker .pickerPanelZLevel3 {z-index: 3144;} /* …and so on… for each new panel you register */
#MasterColorPicker .pickerPanelZLevel4 {z-index: 3145;} /* …and so on… for each new panel you register */
#MasterColorPicker .pickerPanelZLevel5 {z-index: 3146;} /* …and so on… for each new panel you register */
#MasterColorPicker .pickerPanelZLevel6 {z-index: 3147;} /* …and so on… for each new panel you register */
#MasterColorPicker .pickerPanelZLevel7 {z-index: 3148;} /* …and so on… for each new panel you register */
#MasterColorPicker .pickerPanel:hover {z-index: 6180;}
#MasterColorPicker .pickerPanel.dragging {z-index: 7000;}
#MasterColorPicker input.activeInterface,
#MasterColorPicker select.activeInterface,
#MasterColorPicker textarea.activeInterface,
#MasterColorPicker button.activeInterface {
outline: red double medium; }
#MasterColorPicker .pickerPanel {
position: fixed; /** DEFAULT POSITION **/
display: none; /** DEFAULT DISPLAY STATE (when picker is not active) **/
padding: .382em;
color: black;
background-color: white;
border: 2px solid gray;
border-radius: .618em / 1em; }
#MasterColorPicker .pickerPanel.init, /*older browsers require the named-color-tables be displayed while initializing/setting the swatch background colors*/
#MasterColorPicker .pickerPanel.activePicker,
#MasterColorPicker .pickerPanel.activeInterface {
display: block; }
#MasterColorPicker .pickerPanel.disabled {
display: none; }
/* These two classnames below may be added to the default HTML file as deemed by the page-developer. */
/* They are added and removed dynamically by JavaScript when the end-user drags and “sticks/thumbtacks” a panel */
#MasterColorPicker .pickerPanel.floating {
position: fixed; }
#MasterColorPicker .pickerPanel.scrollable {
position: absolute; }
/* “expanding” panels have no set max-height based on the dynamically expanding HTML */
#MasterColorPicker .pickerPanel.expanding {
overflow: auto;
max-height: 85.4%; /* ≈ Φ + (1-Φ)*Φ; for default position-fixed (floating) */ }
#MasterColorPicker .pickerPanel.expanding.scrollable {
max-height: 1080px; /* max height of most monitors */ }
/* the <span>s are the “drag handles” for most panels (the auxilary panels). Most stick up like file-tabs so all panels may cluster in the top-right corner… */
#MasterColorPicker h2 {
font-size: 1.1618em;
text-align: center; }
#MasterColorPicker h2 span {
position: absolute;
top: -2em;
left: auto;
padding: .382em;
background-color: white;
color: black;
border: 2px solid gray;
border-bottom: none;
border-radius: .618em / 1em;
z-index: inherit;
cursor: move; }
#MasterColorPicker h2 span:hover {
z-index: 6182; }
#MasterColorPicker h2 span img { /* thumbtack */
position: absolute;
top: -22px;
right: -22px; }
#MasterColorPicker .pickerPanel.activeInterface {
background-color: lightBlue; }
#MasterColorPicker .pickerPanel.activeInterface.activePickerPanel {
background-color: lightYellow; }
#MasterColorPicker .pickerPanel:hover,
#MasterColorPicker .pickerPanel:hover h2 span {
border-color: skyBlue; }
#MasterColorPicker .pickerPanel.activePickerPanel,
#MasterColorPicker .pickerPanel.activePickerPanel h2 span {
border-color: red; }
#MasterColorPicker_options.pickerPanel,
#MasterColorPicker_options.pickerPanel.activeInterface,
#MasterColorPicker_options.pickerPanel.activeInterface.activePickerPanel {
top: 0;
right: 0;
margin: 0;
padding: 2.382em .618em .382em;
color: white;
background-color: black;
border: none;
border-radius: 0;
border-top-left-radius: .618em; }
#MasterColorPicker_options > label {
position: absolute;
top: .27em;
left: .618em; }
select#palette_select {
color: black;
background-color: white;
position: relative; }
#MasterColorPicker_options header {
text-align: center;
font-weight: normal;
font-family: serif;
font-style: italic;
font-size: .618em;
cursor: move;
white-space: noWrap; }
#MasterColorPicker_options header img { /*this is the thumb-tack when “sticking” panels to the window/page*/
position: absolute;
top: -22px;
right: -22px; }
#MasterColorPicker_options header h1 {
font-size: 1.38em;
font-style: normal;
font-weight: bold;
font-variant: small-caps;
font-family: sans-serif;
display: inline;
margin: 0;
padding: 0;
position: static; }
#MasterColorPicker_options header address {
display: inline;
margin: 0;
padding: 0;
position: static;
font-weight: bold;
font-family: sans-serif;
font-style: normal;
font-size: 1.16em; }
#MasterColorPicker_options > div {
display: block;
position: absolute;
top: .27em;
right: .618em;
/* left: auto;
width: auto; */
background-color: white;
color: black;
padding: 0 .1em;
border-top-left-radius: .382em;
}
#MasterColorPicker_options > div > h3 {
position: relative;
display: block;
font-size: inherit;
margin: 0;
padding: 0 0 1px 0;
background-color: inherit;
border-top-left-radius: .382em;
z-index: 2; }
#MasterColorPicker_options > div div {
display: none;
position: absolute;
top: 90%;
top: calc(100% - 2px);
right: -2px;
left: auto;
padding: .618em 1.618em;
background-color: inherit;
color: inherit;
border-left: 2px solid gray;
border-bottom: 2px solid gray;
border: 2px solid gray;
border-radius: .618em / 1em;
border-top-right-radius: 0;
z-index: 1; }
#MasterColorPicker_options > div:hover div,
#MasterColorPicker_options > div.activeInterface div {
display: block; }
/*
#MasterColorPicker_options > div label {
display: block; }
#MasterColorPicker_options > div div label {
display: inline-block; }
*/
#MasterColorPicker_options > div div p,
#MasterColorPicker_options > div div label span {
display: none; }
#MasterColorPicker_options.activePicker > div div label:hover p,
#MasterColorPicker_options.activePicker > div div fieldset:hover > p,
#MasterColorPicker_options.activePicker > div div div:hover > p,
#MasterColorPicker_options > div div label:hover span {
display: block;
position: absolute;
bottom: 100%;
top: auto;
width: 10.618em;
margin: 0;
padding: .618em;
font-size: inherit;
white-space: normal;
background-color: white;
color: black;
border: 1px solid red;
border-bottom: none; }
#MasterColorPicker_options.activePicker > div div fieldset:hover > p,
#MasterColorPicker_options.activePicker > div div label:hover p {
top: 100%;
bottom: auto;
right: -1px;
left: -1px;
width: auto;
border-bottom: 1px solid red;
border-top: none; }
#MasterColorPicker_options > div div div {
position: relative;
padding: 0;
margin: .618em 0;
border: none; }
#MasterColorPicker_options.activePicker > div div div:hover > p {
top: -0.382em;
left: -18.618em;
bottom: -0.618em;
width: 17.618em;
padding-top: .162em;
line-height: 1.162em;
border: 1px solid red;
border-right: none; }
#MasterColorPicker_options > div div fieldset label:first-child {
position: relative;
z-index: 1; }
#MasterColorPicker_options > div div fieldset {
z-index: 2;
display: block;
margin: .618em 0;
padding: 0;
border: none; }
#MasterColorPicker_options > div div div fieldset:last-child {
margin-bottom: 0; }
#MasterColorPicker_options > div div fieldset:hover,
#MasterColorPicker_options > div div fieldset label:first-child:hover,
#MasterColorPicker_options > div div fieldset:first-child label:nth-child(3):hover {
z-index: 3; }
#MasterColorPicker_options > div div fieldset label {
display: block;
margin: 0; }
#MasterColorPicker_options .disabled {
opacity: .27; }
#MasterColorPicker_options > div div fieldset {
position: relative; }
#MasterColorPicker_options > div div fieldset:first-child {
border: 1px solid;
margin: 0 -.854em 1em -.854em;
padding: .382em;
white-space: nowrap;
opacity: .27; }
#MasterColorPicker_options.activePicker > div div fieldset:first-child {
opacity: 1; }
#MasterColorPicker_options > div div fieldset:first-child > label:nth-child(2),
#MasterColorPicker_options > div div fieldset:first-child > label:nth-child(3) {
display: inline; }
#MasterColorPicker_options > div div fieldset:first-child > label:nth-child(3) {
margin-left: .2em; }
#MasterColorPicker_options > div div fieldset:first-child legend {
font-size: 1.01618em;
font-weight: bold; }
#MasterColorPicker_options > div div fieldset:first-child fieldset {
margin: .382em 0;
padding: 0; }
#MasterColorPicker_options > div div fieldset:first-child fieldset fieldset {
margin: 0 .382em;
padding: 0;
display: inline-block; }
#MasterColorPicker_options > div div fieldset fieldset label {
margin: 0 .618em; }
#MasterColorPicker_options > div div fieldset:first-child fieldset label {
margin: 0; }
#MasterColorPicker_options > div div fieldset:first-child > label:last-child {
position: absolute;
top: 0;
right: .382em;
left: auto;
color: black;
background-color: white; }
#MasterColorPicker_options p span {
/* display: inline-block; */
white-space: noWrap; }
#MasterColorPicker_MyPalette.pickerPanel {
margin: 0;
top: 2em;
bottom: auto;
right: 19.618em;
left: auto;
padding: .382em 1.618em .382em .382em; }
#MasterColorPicker_MyPalette h2 {
margin-left: .382em;
text-align: left; }
#MasterColorPicker_MyPalette h2 span {
position: absolute;
top: 3.382em;
left: -1.27em;
right: auto;
padding: 0;
border: none;
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg); }
#MasterColorPicker_MyPalette fieldset,
#MasterColorPicker_MyPalette p {
margin-left: 1.618em; }
#MasterColorPicker_MyPalette fieldset label {
display: block;
padding-top: 0.382em;
text-align: right; }
#MasterColorPicker_MyPalette button {
margin-left: .618em; }
#MasterColorPicker_MyPalette table {
margin: 0;
padding: 0;
position: relative;
max-height: 7.618em;
overflow: auto; }
#MasterColorPicker_MyPalette tr {
cursor: n-resize; }
#MasterColorPicker_MyPalette tr:first-child,
#MasterColorPicker_MyPalette tr:last-child {
cursor: auto; }
#MasterColorPicker_MyPalette td:first-child {
cursor: pointer; }
#MasterColorPicker_MyPalette tbody.subPalette tr:first-child,
body.MCP_dragMyPaletteColor #MasterColorPicker_MyPalette tbody tr:last-child,
body.MCP_dragMyPaletteColor #MasterColorPicker_MyPalette td:first-child,
body.MCP_dragMyPaletteColor #MasterColorPicker_MyPalette td input,
body.MCP_dragMySubPalette #MasterColorPicker_MyPalette tbody tr:last-child,
body.MCP_dragMySubPalette #MasterColorPicker_MyPalette td:first-child,
body.MCP_dragMySubPalette #MasterColorPicker_MyPalette tbody input,
body.MCP_dragMySubPalette #MasterColorPicker_MyPalette tbody button {
cursor: n-resize; }
body.MCP_dragMyPaletteColor #MasterColorPicker_MyPalette tr:hover td,
body.MCP_dragMySubPalette #MasterColorPicker_MyPalette tbody.subPalette:hover th {
/*Blink/(Webkit?) browsers: the hover state does not change until the button is released - so this does not work properly*/
border-top: 2px solid red; }
#MasterColorPicker_MyPalette tr:hover .dragHandle {
color: red; }
#MasterColorPicker_MyPalette .dragHandle {
margin-left: .162em;
position: relative; }
#MasterColorPicker_MyPalette tr:last-child .dragHandle {
visibility: hidden; }
#MasterColorPicker_MyPalette td {
white-space: nowrap; }
#MasterColorPicker_MyPalette tbody th {
position: relative;
padding: 0 0 0 .382em;
border: 1px solid;
border-bottom: none;
text-align: left; }
#MasterColorPicker_MyPalette tbody th label:last-child {
position: absolute;
left: auto;
right: .382em;
top: auto;
bottom: 0; }
#MasterColorPicker_MyPalette tbody.subPalette th label:first-child {
display: block; }
#MasterColorPicker_MyPalette tbody.subPalette th label:first-child input {
width: 20em; }
#MasterColorPicker_MyPalette tbody.subPalette th button {
position: absolute;
left: auto;
right: .382em;
top: 0;
bottom: auto; }
#MasterColorPicker_MyPalette tbody.subPalette th label:nth-child(4) {
margin-left: 1.618em; }
#MasterColorPicker_MyPalette td:first-child {
padding: 0 1.618em 0 .382em;
border: 1px solid; }
#MasterColorPicker_MyPalette td input[type="text"] {
width: 17em; }
#MasterColorPicker_MyPalette .dragHandle ul {
position: absolute;
top: 0;
left: 0;
color: black;
background-color: paleGreen;
list-style-type: none;
cursor: default;
padding: .162em .27em;
z-index: 13; }
#MasterColorPicker_MyPalette .dragHandle ul ul {
display: none; }
#MasterColorPicker_MyPalette .dragHandle ul li:hover {
position: relative; }
#MasterColorPicker_MyPalette .dragHandle ul li:hover ul {
display: block;
position: absolute;
top: -.162em;
left: 100%; }
#MasterColorPicker_Filter {
margin-top: 2em;
margin-top: calc(2em + 2px);
top: 0;
right: 18em; }
#MasterColorPicker_Filter h2 span {
right: 5em; }
#MasterColorPicker_Filter fieldset {
border: none;
padding: 0 .162em;
margin: 0;
text-align: right; }
#MasterColorPicker_Filter fieldset,
#MasterColorPicker_Filter label {
position: relative;
z-index: 1; }
#MasterColorPicker_Filter fieldset:hover,
#MasterColorPicker_Filter label:hover {
z-index: 2; }
#MasterColorPicker_Filter label span {
display: none;
position: absolute;
top: 100%;
bottom: auto;
left: auto;
right: 0;
background-color: white;
color: black;
border: 1px solid red;
/* border-top: none; */
padding: .382em;
width: 10em;
text-align: left; }
#MasterColorPicker_Filter fieldset > label:last-child span,
#MasterColorPicker_Filter th:last-child label span {
left: 0;
right: auto; }
#MasterColorPicker_Filter label:hover span {
display: block; }
#MasterColorPicker_Filter label.disabled:hover span {
display: none; }
#MasterColorPicker_Filter table {
margin: 0;
padding: 0; }
#MasterColorPicker_Filter td:first-child {
white-space: noWrap; }
#MasterColorPicker_Filter td:first-child input {
width: 17em; }
#MasterColorPicker_Filter td:nth-child(2) input {
width: 7em; }
#MasterColorPicker_Filter span.swatch {
border: 2px solid black;
margin-left: .382em; }
#MasterColorPicker_Lab {
margin-top: 2em;
margin-top: calc(2em + 2px);
top: 0;
right: 19em; }
#MasterColorPicker_Lab h2 {
text-align: center; }
#MasterColorPicker_Lab h2 span {
right: 10em; }
#MasterColorPicker_Lab table {
border: 1px solid;
margin: 0 0 .618em; }
#MasterColorPicker_Lab caption acronym:first-child {
margin-right: 1.618em; }
#MasterColorPicker_Lab caption acronym:last-child {
margin-left: 1.618em; }
#MasterColorPicker_Lab td {
padding: 0;}
#MasterColorPicker_Lab table .even th,
#MasterColorPicker_Lab table .even td {
padding-top: .382em;
margin-top: .382em;
border-top: 1px solid; }
#MasterColorPicker_Lab input {
padding: 0 .162em; }
#MasterColorPicker_Lab input[type="number"] {
width: 5.618em; }
#MasterColorPicker_Lab input[type="range"] {
width: 16.18em; }
#MasterColorPicker_Lab .primaries input[type="range"]::-webkit-slider-runnable-track {
height: .618em; }
#MasterColorPicker_Lab .primaries input[type="range"]::-ms-track {
height: .618em; }
#MasterColorPicker_Lab .primaries input[type="range"]::-moz-range-track {
height: .618em; }
#MasterColorPicker_Lab tr.red input[type="range"]::-moz-range-thumb,
#MasterColorPicker_Lab tr.red input[type="range"]::-moz-range-track {
background-color: red; }
#MasterColorPicker_Lab tr.red input[type="range"]::-ms-thumb,
#MasterColorPicker_Lab tr.red input[type="range"]::-ms-track,
#MasterColorPicker_Lab tr.red input[type="range"]::-ms-fill-lower,
#MasterColorPicker_Lab tr.red input[type="range"]::-ms-fill-upper {
background-color: red; }
#MasterColorPicker_Lab tr.red input[type="range"]::-webkit-slider-thumb,
#MasterColorPicker_Lab tr.red input[type="range"]::-webkit-slider-runnable-track {
background-color: red; }
#MasterColorPicker_Lab tr.green input[type="range"]::-moz-range-thumb,
#MasterColorPicker_Lab tr.green input[type="range"]::-moz-range-track {
background-color: lime; }
#MasterColorPicker_Lab tr.green input[type="range"]::-ms-thumb,
#MasterColorPicker_Lab tr.green input[type="range"]::-ms-track,
#MasterColorPicker_Lab tr.green input[type="range"]::-ms-fill-lower,
#MasterColorPicker_Lab tr.green input[type="range"]::-ms-fill-upper {
background-color: lime; }
#MasterColorPicker_Lab tr.green input[type="range"]::-webkit-slider-thumb,
#MasterColorPicker_Lab tr.green input[type="range"]::-webkit-slider-runnable-track {
background-color: lime; }
#MasterColorPicker_Lab tr.blue input[type="range"]::-moz-range-thumb,
#MasterColorPicker_Lab tr.blue input[type="range"]::-moz-range-track {
background-color: blue; }
#MasterColorPicker_Lab tr.blue input[type="range"]::-ms-thumb,
#MasterColorPicker_Lab tr.blue input[type="range"]::-ms-track,
#MasterColorPicker_Lab tr.blue input[type="range"]::-ms-fill-lower,
#MasterColorPicker_Lab tr.blue input[type="range"]::-ms-fill-upper {
background-color: blue; }
#MasterColorPicker_Lab tr.blue input[type="range"]::-webkit-slider-thumb,
#MasterColorPicker_Lab tr.blue input[type="range"]::-webkit-slider-runnable-track {
background-color: blue; }
/* The thumb’s color of the Hue range is controlled with JavaScript.
* Since its color can not be directly scripted through the DOM, this stylesheet must be dynamically altered.
* Therefore, if you change the following CSS-descriptors, you must accordingly change the MasterColorPicker.js file.
/*******/
#MasterColorPicker_Lab tr.hue input[type="range"]::-webkit-slider-thumb {
background-color: white; }
#MasterColorPicker_Lab tr.hue input[type="range"]::-ms-thumb {
background-color: white; }
#MasterColorPicker_Lab tr.hue input[type="range"]::-moz-range-thumb {
background-color: white; }
/*******/
#MasterColorPicker_Lab tr.hue input[type="range"]::-moz-range-track {
background: -moz-linear-gradient(left, #FF0000 0%, #FFFF00 16.7%, #00FF00 33.3%, #00FFFF 50%, #0000FF 66.7%, #FF00FF 83.3%, #FF0000 100%);
height: .618em; }
#MasterColorPicker_Lab tr.hue input[type="range"]::-ms-track {
background: -ms-linear-gradient(left, #FF0000 0%, #FFFF00 16.7%, #00FF00 33.3%, #00FFFF 50%, #0000FF 66.7%, #FF00FF 83.3%, #FF0000 100%);
height: .618em; }
#MasterColorPicker_Lab tr.hue input[type="range"]::-ms-fill-lower,
#MasterColorPicker_Lab tr.hue input[type="range"]::-ms-fill-upper {
color: transparent;
background-color: transparent; }
#MasterColorPicker_Lab tr.hue input[type="range"]::-webkit-slider-runnable-track {
background: -webkit-linear-gradient(left, #FF0000 0%, #FFFF00 16.7%, #00FF00 33.3%, #00FFFF 50%, #0000FF 66.7%, #FF00FF 83.3%, #FF0000 100%);
background: -o-linear-gradient(left, #FF0000 0%, #FFFF00 16.7%, #00FF00 33.3%, #00FFFF 50%, #0000FF 66.7%, #FF00FF 83.3%, #FF0000 100%);
height: .618em; }
#MasterColorPicker_Lab tr.cyan input[type="range"]::-moz-range-thumb,
#MasterColorPicker_Lab tr.cyan input[type="range"]::-moz-range-track {
background-color: cyan; }
#MasterColorPicker_Lab tr.cyan input[type="range"]::-ms-thumb,
#MasterColorPicker_Lab tr.cyan input[type="range"]::-ms-track,
#MasterColorPicker_Lab tr.cyan input[type="range"]::-ms-fill-lower,
#MasterColorPicker_Lab tr.cyan input[type="range"]::-ms-fill-upper {
background-color: cyan; }
#MasterColorPicker_Lab tr.cyan input[type="range"]::-webkit-slider-thumb,
#MasterColorPicker_Lab tr.cyan input[type="range"]::-webkit-slider-runnable-track {
background-color: cyan; }
#MasterColorPicker_Lab tr.magenta input[type="range"]::-moz-range-thumb,
#MasterColorPicker_Lab tr.magenta input[type="range"]::-moz-range-track {
background-color: magenta; }
#MasterColorPicker_Lab tr.magenta input[type="range"]::-ms-thumb,
#MasterColorPicker_Lab tr.magenta input[type="range"]::-ms-track,
#MasterColorPicker_Lab tr.magenta input[type="range"]::-ms-fill-lower,
#MasterColorPicker_Lab tr.magenta input[type="range"]::-ms-fill-upper {
background-color: magenta; }
#MasterColorPicker_Lab tr.magenta input[type="range"]::-webkit-slider-thumb,
#MasterColorPicker_Lab tr.magenta input[type="range"]::-webkit-slider-runnable-track {
background-color: magenta; }
#MasterColorPicker_Lab tr.yellow input[type="range"]::-moz-range-thumb,
#MasterColorPicker_Lab tr.yellow input[type="range"]::-moz-range-track {
background-color: yellow; }
#MasterColorPicker_Lab tr.yellow input[type="range"]::-ms-thumb,
#MasterColorPicker_Lab tr.yellow input[type="range"]::-ms-track,
#MasterColorPicker_Lab tr.yellow input[type="range"]::-ms-fill-lower,
#MasterColorPicker_Lab tr.yellow input[type="range"]::-ms-fill-upper {
background-color: yellow; }
#MasterColorPicker_Lab tr.yellow input[type="range"]::-webkit-slider-thumb,
#MasterColorPicker_Lab tr.yellow input[type="range"]::-webkit-slider-runnable-track {
background-color: yellow; }
#MasterColorPicker_Lab tr.black input[type="range"]::-moz-range-thumb,
#MasterColorPicker_Lab tr.black input[type="range"]::-moz-range-track {
background-color: black; }
#MasterColorPicker_Lab tr.black input[type="range"]::-ms-thumb,
#MasterColorPicker_Lab tr.black input[type="range"]::-ms-track,
#MasterColorPicker_Lab tr.black input[type="range"]::-ms-fill-lower,
#MasterColorPicker_Lab tr.black input[type="range"]::-ms-fill-upper {
background-color: black; }
#MasterColorPicker_Lab tr.black input[type="range"]::-webkit-slider-thumb,
#MasterColorPicker_Lab tr.black input[type="range"]::-webkit-slider-runnable-track {
background-color: black; }
#MasterColorPicker_Lab table + table.primaries th label {
text-shadow: -1px -1px 5px gray; }
#MasterColorPicker_Lab span.swatch {
position: absolute;
right: .618em;
bottom: .618em;
left: auto;
top: auto;
width: 3.82em;
height: 3.82em;
text-align: center;
padding-top: .382em;
font-size: 1.618em;
cursor: default; }
#MasterColorPicker_Gradientor {
margin-top: 2em;
margin-top: calc(2em + 2px);
top: 0;
right: 15em; }
#MasterColorPicker_Gradientor h2 span {
right: 2em; }
#MasterColorPicker_Gradientor fieldset {
position: relative;
white-space: noWrap; }
#MasterColorPicker_Gradientor fieldset label {
display: inline-block;
text-align: center;
position: relative; }
#MasterColorPicker_Gradientor fieldset label input,
#MasterColorPicker_Gradientor fieldset label select {
display: block;
margin: auto; }
#MasterColorPicker_Gradientor label:last-child {
padding-left: 1em; }
#MasterColorPicker_Gradientor fieldset label:last-child {
position: absolute;
top: 100%;
right: -1px;
left: auto;
border: 1px solid;
border-top: none;
background-color: white;
padding: .618em; }
#MasterColorPicker_Gradientor fieldset label:last-child.disabled {
display: none; }
#MasterColorPicker_Gradientor fieldset label span.swatch {
position: absolute;
top: -.382em;
right: auto;
left: 0; }
#MasterColorPicker_Gradientor fieldset label:nth-child(2) span.swatch {
right: 0;
left: auto; }
#MasterColorPicker_Gradientor fieldset label:last-child span.swatch {
top: .2em; }
#MasterColorPicker_Gradientor div {
padding: .618em; }
#MasterColorPicker_Gradientor canvas { border: 1px solid black; }
#MasterColorPicker_Thesaurus {
margin-top: 2em;
margin-top: calc(2em + 2px);
top: 0;
right: 20em;
width: 28em; }
#MasterColorPicker_Thesaurus h2 span {
right: auto;
left: 0; }
#MasterColorPicker_Thesaurus label {
display: block; }
#MasterColorPicker_Thesaurus input {
width: 17em; }
#MasterColorPicker_mainPanel.pickerPanel,
#MasterColorPicker_mainPanel.pickerPanel.activeInterface,
#MasterColorPicker_mainPanel.pickerPanel.activeInterface.activePickerPanel {
margin-top: 3.7em; /*3.618em; 3.72em; 5.57%; ≈ (100% - 85.4%) - (100% - 85.4%)*Φ */
top: 0;
bottom: auto;
right: 0;
left: auto;
max-width: 100%;
min-width: 17.618em;
padding: .618em 0 0 1em;
color: white;
background-color: black;
border: none;
border-radius: 0;
border-top-left-radius: .618em;
border-bottom-left-radius: .618em; }
table.color_chart,
table.palette {
border: 1px solid;
margin-bottom: 1.618em; }
table.color_chart caption,
table.palette caption {
color: inherit;
background-color: inherit;
font-size: .764em } /* ≈ Φ + ((1-Φ) - (1-Φ)*Φ) */
table.color_chart caption h6,
table.palette caption h6 {
font-size: 1.618em; /* ≈ 1/Φ = 1+Φ */
margin: 0;
padding: 0; }
table.color_chart caption strong,
table.palette caption h6 {
font-variant: small-caps; }
table.color_chart th {
white-space: normal;
width: auto; }
table.color_chart tr.noColor td,
table.color_chart tbody td {
white-space: nowrap;
font-size: 1em;
padding: 0 0 0 .382em;
cursor: default; } /* you may want to use “cursor: pointer” */
table.color_chart tr.noColor td:first-child,
table.color_chart tbody td:first-child {
width: 2.618em;
position: relative; }
table.color_chart tbody td:first-child div {
display: none; }
table.color_chart tbody td:first-child:hover div {
display: block;
position: absolute;
left: 0;
top: 0;
background-color: inherit;
padding: 2px; }
table.color_chart tbody td:nth-child(2) {
min-width: 10.618em; }
table.color_chart tbody td:nth-child(3) {
font-family: "consolas", monospace, sans-serif; }
table.color_chart tfoot td {
font-size: .7em;
white-space: normal;
width: 1em; /* without this, white-space acts like nowrap… */
}
table.palette {
border-spacing: 0;
border-collapse: collapse;}
table.palette table tr:first-child { }
table.palette table td:first-child {
font-weight: bold; }
table.palette table tr:first-child td:first-child {
font-weight: normal; }
table.palette table tr:first-child td:first-child label {
display: inline-block;
width: 32%;
text-align: center; }
table.palette > tbody td {
height: .618em;
margin: 0;
padding: 0;
line-height: 1em; }
table.palette {
position: relative; }
table.palette input {
margin: 2px;
padding: 0; }
table.palette mark.footmark {
font-size: .618em;
position: relative;
bottom: .382em;
top: auto;
display: inline;
margin: 0;
padding: 0;
color: inherit;
background-color: inherit; }
table.palette > tfoot td {
text-align: center; }
/* #Spectral, #BeezEye, #RainbowMaestro, #Simple², #YinYangNíHóng; color charts after initialization */
.picker {
display: none; /* JavaScript will display these when the time comes */
}
.picker:hover,
.picker.activePicker,
.picker.activePickerInterface,
.init .color_chart.picker {
display: block; }
table#Spectral caption > span {
position: absolute;
top: 1em;
right: .382em;
padding-left: 1.382em;
font-family: "consolas", monospace, sans-serif;
font-size: 1.618em;
color: inherit;
background-color: inherit; }
table#Spectral caption > span span {
display: block;
position: absolute;
top: -1em;
right: -.382em;
width: 1.618em;
height: 1em;
color: black;
border-left: 1px solid;
border-bottom: 1px solid; }
table#Spectral td {
white-space: noWrap; }
table#BeezEye {
padding-left: 7px;
position: relative;
overflow: hidden; /*fix Opera*/
}
table#BeezEye caption {
width: 360px;
padding-bottom: 1em; }
table#BeezEye canvas {
width: 360px;
height: 360px;
margin: 0; }
table#BeezEye td {
text-align: center;
vertical-align: middle;
padding: 0; }
table#BeezEye label {
margin: 0;
padding: 0;
display: inline-block; }
table#BeezEye fieldset label input {
display: inline; }
table#BeezEye input[name='BeezEye_twist_value'],
table#BeezEye fieldset label input[name='BeezEye_curve_value'],
table#BeezEye input[name='BeezEye_value'],
table#BeezEye tr:first-child td:first-child span.MCP_fix_Safari,
table#BeezEye tr:nth-child(3) fieldset label:first-child span.MCP_fix_Safari {
display: block; }
table#BeezEye tr:first-child td:first-child span.MCP_fix_Safari input[name='BeezEye_twist_value'],
table#BeezEye tr:nth-child(3) fieldset label:first-child span.MCP_fix_Safari input[name='BeezEye_curve_value'],
table#BeezEye input[name='BeezEye_variety'] {
display: inline; }
table#BeezEye input[name='BeezEye_value'] {
background-color: transparent; }
table#BeezEye fieldset {
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: auto;
margin: 0;
padding: .618em;
text-align: left;
overflow: visible;
z-index: 2; }
table#BeezEye fieldset dl {
display: none; }
table#BeezEye fieldset:hover dl {
display: block;
position: absolute;
top: .618em;
right: 100%;
bottom: auto;
left: auto;
margin: 0;
padding: .618em;
width: 16.18em;
font-weight: bold;
color: white;
background-color: rgba(0,0,0, .7); }
table#BeezEye fieldset label {
display: block; }
table#BeezEye .disabled {
visibility: hidden; }
table#BeezEye tr:first-child td:first-child label {
position: absolute;
top: 3em;
left: 5px;
transform: rotate(330deg); }
table#BeezEye tr:first-child td:first-child label {
-webkit-transform: rotate(330deg); }
table#BeezEye tr:first-child td:first-child label {
-moz-transform: rotate(330deg); }
table#BeezEye tr:first-child td:first-child label {
-ms-transform: rotate(330deg); }
table#BeezEye tr:nth-child(2) label {
position: absolute;
top: 13.62em;
left: 327px;
color: white;
margin: 0;
z-index: 2;
transform: rotate(270deg);
background: linear-gradient(left, #000000, #FFFFFF); }
table#BeezEye tr:nth-child(2) label {
-webkit-transform: rotate(270deg);
background: -webkit-linear-gradient(left, #000000, #FFFFFF); }
table#BeezEye tr:nth-child(2) label {
-moz-transform: rotate(270deg);
background: -moz-linear-gradient(left, #000000, #FFFFFF); }
table#BeezEye tr:nth-child(2) label {
-ms-transform: rotate(270deg);
background: -ms-linear-gradient(0deg, black, white); }
table#BeezEye tr:nth-child(2) label span {
color: black;
padding-left: 1.618em; }
table#BeezEye tr:nth-child(3) td {
position: relative; /* ignored by FireFox - but it’s whacked anyway… */
vertical-align: bottom;
}
table#BeezEye tr:nth-child(3) fieldset {
position: static;
margin: 0 0 0 0;
padding: 0;
border: none; }
table#BeezEye tr:nth-child(3) fieldset label:first-child {
position: absolute;
top: auto;
bottom: 1.618em;
left: -5em;
padding: 0;
text-align: center;
transform: rotate(315deg);
z-index: 2; }
table#BeezEye tr:nth-child(3) fieldset label:first-child {
-webkit-transform: rotate(315deg); }
table#BeezEye tr:nth-child(3) fieldset label:first-child {
-moz-transform: rotate(315deg); }
table#BeezEye tr:nth-child(3) fieldset label:first-child {
-ms-transform: rotate(315deg); }
table#BeezEye tr:nth-child(3) fieldset label:last-child {
margin: .382em;
white-space: nowrap; }
table#BeezEye tr:nth-child(4) td:last-child {
color: black;
border: 1px solid;
border-bottom-color: inherit; }
table#BeezEye tr:last-child td {
height: 1.618em;
white-space: pre;
font-family: "consolas", monospace;
font-weight: bold;
font-size: 1.27em; }
table#RainbowMaestro {padding-right: 1em;} /* ←↓ band-aid fix for lame layout engines: Opera, Google Chrome, Firefox */
table#RainbowMaestro.no_colorblind {padding-right: 0;}
table#RainbowMaestro thead {
text-align: center; }
table#RainbowMaestro thead label {
margin-right: .618em; }
table#RainbowMaestro thead label:last-child {
margin-right: 0; }
table#RainbowMaestro tbody th {
border-top: 1px solid;
border-left: 1px solid; }
table#RainbowMaestro tbody td {
border-left: 1px solid;
text-align: center;
position: relative;
padding: 7px; }
table#RainbowMaestro tbody th:first-child,
table#RainbowMaestro tbody td:first-child {
border-left: none; }
table#RainbowMaestro.no_colorblind .colorblind {
display: none; }
table#RainbowMaestro canvas {
display: block;
position: relative;
padding: 0;
margin: -106px auto 0 auto;
z-index: 2; }
table#RainbowMaestro tr:nth-child(2) td:first-child canvas {
cursor: crosshair; }
table#RainbowMaestro div.subpalette_swatch {
display: block;
position: relative;
top: 127px;
margin: 0 auto;
width: 106px;
height: 106px;
border-radius: 53px;
z-index: 1; }
#RainbowMaestro_hueIndicator {
position: relative; }
#RainbowMaestro_hueIndicator input {
width: 6.618em;
margin-left: .618em; }
#RainbowMaestro_hueIndicator span {
display: none;
position: absolute;
right: 0;
bottom: -.2em;
left: auto;
top: auto;
width: 6.618em;
padding: .2em 0 .2em 0;
font-family: "consolas", monospace;
font-weight: bold;
font-size: 1.0618em;
color: white;
background-color: black; }
td#RainbowMaestro_swatch {
text-align: center;
height: 2em; }
span#RainbowMaestro_indicator {
color: white;
background-color: black;
font-family: "consolas", monospace;
font-weight: bold;
font-size: 1.27em; }
table#Simple² {
text-align: center;
padding-right: 1em; /* ←↓ band-aid fix for lame layout engines: Opera, Google Chrome, Firefox */
overflow: hidden; /*fix MSIE*/ }
table#Simple² .lft {float: left;}
table#Simple² .rt {float: right;}
table#Simple² td:nth-child(2) td:nth-child(2),
table#Simple² td:nth-child(2) td:nth-child(3),
table#Simple² td:nth-child(2) td:nth-child(4) {
padding: 0;
vertical-align: bottom;
line-height: 100%; }
table#Simple² tr:nth-child(2) td:first-child,
table#Simple² tr:nth-child(2) td:nth-child(5),
table#Simple² tr:nth-child(2) td:nth-child(6) {
padding-left: 2em;
position: relative; }
table#Simple² tr:nth-child(3) td:first-child {
padding: 0 0 .618em 0;
position: relative; }
table#Simple² tr:nth-child(2) td:nth-child(2) canvas,
table#Simple² tr:nth-child(2) td:nth-child(3) canvas {
margin: 0 2px;
background-color: black; }
table#Simple² div,
table#Simple² label {
position: absolute;
width: 360px; /* width/height of the canvas */
margin: -.5em -195px;
font-weight: bold;
padding: 0;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg); }
table#Simple² tr:nth-child(3) td:first-child label {
width: auto;
margin: -2.618em -1.27em; } /* adjust if content changes */
table#Simple² tr:nth-child(3) td:nth-child(2) div,
table#Simple² tr:nth-child(3) td:nth-child(3) div {
width: auto;
margin: .5em -.382em; } /* adjust if content changes */
table#Simple² div.indicator {
text-align: left;
width: 3.2em;
margin: -1.3em 0em;
background-color: black;
transform: rotate(290deg);
-webkit-transform: rotate(290deg);
-ms-transform: rotate(290deg); }
table#Simple² div#Simple²lvl.indicator {
margin: -1.7em -.5em;
border: 1px dotted; }
table#Simple² tr:nth-child(5) td:nth-child(3),
table#Simple² tr:nth-child(7) td:nth-child(3) {
padding: .1em 0 .2em 0; }
td#Simple²indicator {
padding: .2em;
font-family: "consolas", monospace;
font-weight: bold;
font-size: 116.18% }
table#YinYangNíHóng {
padding-right: 1em; /* ←↓ band-aid fix for lame layout engines: Opera, Google Chrome, Firefox */
}
table#YinYangNíHóng h6 span {
display: block;
padding-left: 4.618em;
font-size: 85.4%; } /* ≈ Φ + (1-Φ)*Φ */
table#YinYangNíHóng thead tr {
position: relative;
z-index: 618; }
table#YinYangNíHóng thead td {
width: 33.3% }
table#YinYangNíHóng label {
display: block;
text-align: center; }
table#YinYangNíHóng label dfn {
display: none; }
table#YinYangNíHóng label:hover dfn {
display: block;
position: absolute;
top: 100%;
left: .618em;
color: white;
background-color: black;
border: 1px solid;
border-top: none; }
table#YinYangNíHóng td:nth-child(2) label:hover dfn {
left: 7.618em; }
table#YinYangNíHóng td:last-child label:hover dfn {
left: auto;
right: .618em; }
table#YinYangNíHóng tbody td {
position: relative;
text-align: center; }
table#YinYangNíHóng tbody td div {
position: relative;
display: inline-block; }
table#YinYangNíHóng canvas:nth-child(2) {
display: block;
position: absolute;
top: 62px;
left: 167px; }
table#YinYangNíHóng canvas:nth-child(3) {
display: block;
position: absolute;
top: 82px;
left: 82px; }
td#YinYangNíHóng_indicator {
height: 2em;
padding: .2em;
font-family: "consolas", monospace;
font-weight: bold;
font-size: 116.18%;
text-align: center; }
table#YinYangNíHóng tfoot {
font-size: .7em; }
table#YinYangNíHóng tfoot dfn {
font-weight: bold; }
div#paletteLoadingAlert {
position: fixed;
min-width: 27.618em;
top: 38.2%;
left: 38.2%;
right: auto;
left: calc(50% - 13.809em);
padding: .618em;
border: 1px solid;
background-color: white;
color: black;
z-index: 7000; }
div#paletteLoadingAlert.disabled {
display: none; }
div#paletteLoadingAlert h3 {
color: black;
text-align: center;
padding: 0;
margin: 0; }
div#paletteLoadingAlert > div {
max-width: 19.618em;
font-size: 1.618em;
font-weight: bold;
color: red;
padding-top: .618em;
text-align: center; }
div#paletteLoadingAlert > div span {
display: block;
font-size: .618em; }
div#paletteLoadingAlert strong {
font-variant: small-caps;
text-decoration: underline; }
div#paletteLoadingAlert pre {
font-size: .72em;
min-height: 10em; }
div#paletteLoadingAlert pre .loaded {
color: green;
font-weight: bold; }
div#paletteLoadingAlert pre .reload {
color: orange;
font-weight: bold; }
div#paletteLoadingAlert pre .failed {
color: red;
font-weight: bold; }
|
Download
