/* charset: UTF-8 * tabspacing: 2 ¡preferred for reading comments! * for: MasterColorPicker release 2.6.13 January 27, 2026 by SoftMoon-WebWare */ body.MCP_init { cursor: wait; } body.MCP_drag { cursor: move; } body.MCP_dragMyPaletteColor, body.MCP_we-be-a-cuttin { cursor: not-allowed; } /* MSIE is no longer supported. This might could be updated.... /*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*/ background-color: transparent; /* google-foo says the scrollbar widths are generally between 12-20, mostly 15-17, mostly 17; I think the OS has final say, and it may be much larger. * If the MasterColorPicker HTML is embedded in a container that changes the standard scrollbar width, ↓ JavaScript may not calculate the correct value */ --scrollbar-width: 17px; /*here we guess…estimate…ASSume the width of a normal scrollbar. This is calsulated by JavaScript and set as an inline-style */ --fore-text: black; --back-text: white; --fore-text-allgood: blue; /* was “green” - blue is more color-blind friendly */ --fore-text-caution: orange; --fore-text-warn: red; --fore-text-standout: red; --back-text-cold: lightBlue; /* inactive picker panel */ --back-text-hot: lightYellow; /* active picker panel */ --fore-text-note: white; --back-text-note: darkBlue; --back-text-note-warn: maroon; --fore-text-note-refer: black; --back-text-note-refer: gold; --fore-text-highlight: black; --back-text-highlight: LemonChiffon; --fore-text-message: black; --back-text-message: HoneyDew; --back-text-message-error: LavenderBlush; --fore-text-popMenu: black; --back-text-popMenu: paleGreen; --fore-text-popMenu-focused: white; --back-text-popMenu-focused: DarkGreen; /* Indigo; */ --fore-text-popMenu-hoveredOver: white; --back-text-popMenu-hoveredOver: Indigo; /* ← HCG(274.62deg, 51%, 0%) *//* DarkBlue; */ --fore-text-popMenu-hoveredSet: black; --back-text-popMenu-hoveredSet: #C97DFF; /* ← HCG(274.62deg, 51%, 100%) *//* LightSkyBlue; */ --fore-text-GenieMenu: black; --back-text-GenieMenu: paleGreen; --fore-text-GenieMenu-focused: white; --back-text-GenieMenu-focused: DarkGreen; /* Indigo; */ --fore-text-GenieMenu-hoveredOver: white; --back-text-GenieMenu-hoveredOver: Indigo; /* ← HCG(274.62deg, 51%, 0%) *//* DarkBlue; */ --fore-text-GenieMenu-hoveredSet: black; --back-text-GenieMenu-hoveredSet: #C97DFF; /* ← HCG(274.62deg, 51%, 100%) *//* LightSkyBlue; */ --fore-text-kbd: white; /* keyboard keys */ --back-text-kbd: #202040; --fore-text-lab: var(--fore-text); --back-text-lab: var(--back-text); --fore-text-luvly: var(--fore-text); --back-text-luvly: pink; --fore-text-ok: var(--fore-text); --back-text-ok: SpringGreen; --fore-text-disabled: LightGray; --fore-palette: white; --back-palette: black; --fore-button: black; --back-button: lightSkyBlue; --back-button-active: paleGreen; --back-button-pressed: lightCyan; --back-button-toggled: orange; --border-cold: gray; /* inactive picker panel */ --border-hot: red; /* active picker panel, etc. */ --border-hover: skyBlue; /* over picker panel */ --border-section: DarkBlue; /* DarkCyan DeepSkyBlue DarkBlue RGB(207, 114, 0) */ --border-fileinput: blue; --border-button-hover: red; --border-kbd: #8080FF; /* keyboard keys */ --border-kbd-shadow: #404080; --drag-highlight: red; /* used when dragging colors in MyPalette */ } #MasterColorPicker input, #MasterColorPicker select, #MasterColorPicker button { border-width: 1px; font-family: monospace; font-size: 13px; } /*lock down the font-size. Help keep MSIE10’s range-bar in line with others*/ #MasterColorPicker select, #MasterColorPicker select option { color: var(--fore-text) !important; background-color: var(--back-text) !important; color-adjust: exact; } #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; background-color: transparent; } #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 input[type="file"] { border: 2px solid var(--border-fileinput); border-top-left-radius: .618em 1em; border-bottom-left-radius: .618em 1em; } #MasterColorPicker input::file-selector-button, #MasterColorPicker button { color: var(--fore-button); background-color: var(--back-button); font-variant: small-caps; border-radius: .618em / 1em; font-size: 15px; } /*lock down the font-size.*/ #MasterColorPicker button[aria-pressed="true"] { background-color: var(--back-button-pressed); } #MasterColorPicker kbd { display: inline-block; } #MasterColorPicker kbd span { display: inline-block; position: relative; border: 1px solid var(--border-kbd); border-bottom: 2px solid var(--border-kbd-shaddow); border-right: 2px solid var(--border-kbd-shaddow); border-radius: 1.618em / 2em; color: var(--fore-text-kbd); background-color: var(--back-text-kbd); text-align: center; margin: 0 .382em; padding: 0 .618em; font-size: 85.4%; line-height: .854em; vertical-align: middle; } #MasterColorPicker mark { background-color: inherit; } #MasterColorPicker footmark, #MasterColorPicker .macronym { display: inline; font-size: .763924em; vertical-align: .236076em; line-height: 100%; } #MasterColorPicker span.swatch { display: inline-block; width: 2.618em; height: 1.1618em; padding: 0; margin: 0; vertical-align: text-bottom; } #MasterColorPicker filepath { font-family: monospace; font-size: 14px; font-weight: bold; white-space: pre; } /* 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 .pickerPanelZLevel8 {z-index: 3149;} /* …and so on… for each new panel you register */ #MasterColorPicker .pickerPanelZLevel9 {z-index: 3150;} /* …and so on… for each new panel you register */ #MasterColorPicker .pickerPanel.pseudoHover, /*applied dynamically by JavaScript. If the CSS ~ combinator matched previous siblings as well as following siblings, we wouldn’t need this*/ #MasterColorPicker_options.pickerPanel:hover ~ #MasterColorPicker_mainPanel, /*these two panels work together as one in this layout*/ #MasterColorPicker_mainPanel.pickerPanel:hover ~ #MasterColorPicker_options {z-index: 6179;} #MasterColorPicker .pickerPanel:focus-within, #MasterColorPicker .pickerPanel:hover {z-index: 6180 !important;} #MasterColorPicker .pickerPanel.dragging {z-index: 7000 !important;} #MasterColorPicker .pickerPanel.activeInterface.activePickerPanel {z-index: 6420 !important;} #MasterColorPicker input.activeInterface, #MasterColorPicker select.activeInterface, #MasterColorPicker textarea.activeInterface, #MasterColorPicker button.activeInterface, #MasterColorPicker legend.activeInterface, #MasterColorPicker table.color_chart td:focus { outline: var(--border-hot) double medium; } #MasterColorPicker .pickerPanel { position: fixed; /** DEFAULT POSITION **/ display: none; /** DEFAULT DISPLAY STATE (when picker is not active) **/ padding: .382em; color: var(--fore-text); background-color: var(--back-text); border: 2px solid var(--border-cold); border-radius: .618em / 1em; } #MasterColorPicker .pickerPanel.activePicker, /* the “currentTarget” input or whatever has focus */ #MasterColorPicker .pickerPanel.activeInterface, /* an input control for the MasterColorPicker user-interface has focus */ #MasterColorPicker.stasis .pickerPanel { /* a user-action is occuring that would normally hide the display */ 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; scrollbar-gutter: stable; max-height: 85.4%; } /* ≈ Φ + (1-Φ)×Φ for default position-fixed (floating) */ #MasterColorPicker .pickerPanel.expanding.scrollable { max-height: 1080px; } /* max height of most monitors */ /* the 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: var(--back-text); color: var(--fore-text); border: 2px solid var(--border-cold); 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: var(--back-text-cold); } #MasterColorPicker .pickerPanel.activeInterface.activePickerPanel { background-color: var(--back-text-hot); } #MasterColorPicker .pickerPanel:hover, #MasterColorPicker .pickerPanel:hover h2 span { border-color: var(--border-hover); } #MasterColorPicker .pickerPanel.activePickerPanel, #MasterColorPicker .pickerPanel.activePickerPanel h2 span { border-color: var(--border-hot); } #MasterColorPicker_Help { margin-top: calc(2em + 2px); top: 0; right: 11.618em; bottom: auto; left: auto; } #MasterColorPicker_Help h2 span { left: 0; } #MasterColorPicker_Help nav { margin: 0; padding: 4px 0 0 0; /* 4px for the outline of a button */ display: block; position: static; overflow: visible; width: 100%; } #MasterColorPicker_Help nav div { margin-left: 1.382em; width: calc( 100% - 1.382em ); } #MasterColorPicker_Help nav button { display: block; border: none; padding: 0 .382em; margin: 0; background-color: inherit; } #MasterColorPicker_Help nav button:hover, #MasterColorPicker_Help nav button:focus { background-color: var(--back-button); } #MasterColorPicker_Help h2, #MasterColorPicker_Help h4, #MasterColorPicker_Help h5, #MasterColorPicker_Help h6, #MasterColorPicker_Help h7, #MasterColorPicker_Help li { margin: 0; padding: 0; } #MasterColorPicker_Help h6 { margin-left: 2.618em; font-size: inherit; } #MasterColorPicker_Help h7 { font-weight: bold; } #MasterColorPicker_Help a { text-decoration: underline; color: var(--fore-button); background-color: var(--back-button); padding: 0 .162em; border-radius: .382em; cursor: pointer; } #MasterColorPicker_Help causion { color: var(--fore-text-warn); } #MasterColorPicker_Help dt causion { font-size: 1.382em; line-height: inherit; } #MasterColorPicker_Help abbr[title='Luv-ly'] { color: var(--fore-text-luvly); background-color: var(--back-text-luvly); } #MasterColorPicker_Help abbr[ok] { color: var(--fore-text-ok); background-color: var(--back-text-ok); } #MasterColorPicker_Help > div.scrollbox { width: 38.2em; height: 38.2em; overflow: auto; scroll-behavior: smooth; margin: 0; padding: 0 .618em .618em .618em; text-align: center; border-radius: .618em; } #MasterColorPicker_Help > div.scrollbox * { text-align: left; } #MasterColorPicker_Help ul, #MasterColorPicker_Help dl, #MasterColorPicker_Help ol { list-style-type: disc; list-style-position: outside; padding: 0; margin: 0 1.618em; } #MasterColorPicker_Help ul ul { list-style-type: circle; margin-right: 0; } #MasterColorPicker_Help ul ul.keybrd { list-style-type: none; margin-left: 0; } #MasterColorPicker_Help ol { list-style-type: decimal; } #MasterColorPicker_Help p { margin: 0; padding: 0; } #MasterColorPicker_Help p + p { margin-top: .618em; } #MasterColorPicker_Help ul ul p + p { margin-top: 0; } #MasterColorPicker_Help ul li > abbr:first-child, #MasterColorPicker_Help ul li > range + abbr, #MasterColorPicker_Help ul ul li > pseudo, #MasterColorPicker_Help dt > span { font-weight: bold; color: var(--fore-text-highlight); background-color: var(--back-text-highlight); } #MasterColorPicker_Help range { font-size: 128%; line-height: 78.125%; color: var(--fore-text-standout); } #MasterColorPicker_Help ul.range li { position: relative; } #MasterColorPicker_Help ul.range range { position: absolute; right: calc(100% + 0.618em); left: auto; top: 0.162em; bottom: auto; } #MasterColorPicker_Help dd { margin: 0 1.168em; } #MasterColorPicker_Help dd specs { display: block; } #MasterColorPicker_Help ul ul li > aka, #MasterColorPicker_Help dd specs span { font-size: 85.4%; /* ≈ Φ + (1-Φ)×Φ */ color: var(--fore-text-highlight); background-color: var(--back-text-highlight); } #MasterColorPicker_Help li:nth-child(3) ul:first-child li kbd { /* text shows XYZ limits */ padding-left: 1.382em; } #MasterColorPicker_Help table { margin: .681em auto; border: 1px solid; } #MasterColorPicker_Help table th, #MasterColorPicker_Help table td { text-align: center !important; } #MasterColorPicker_Help code { white-space: normal; } #MasterColorPicker_Help code.multiline { display: block; white-space: pre-wrap; } #MasterColorPicker_Help filepath { color: CornflowerBlue; } #MasterColorPicker_Help topic { font-weight: bold; font-style: oblique; } /* the browsers insist on inserting a line break before this
element, so I’m not using it; instead */ /* the element-inspector console shows them as inline-static ………? */ /* note they do not do that for the #MasterColorPicker_options header address */ #MasterColorPicker_Help address { display: inline; position: static; margin: 0; padding: 0; font-family: "consolas", monospace; font-style: normal; font-variant: normal; } #MasterColorPicker_options.pickerPanel, #MasterColorPicker_options.pickerPanel.activeInterface, #MasterColorPicker_options.pickerPanel.activeInterface.activePickerPanel { top: 0; right: 0; margin: 0; padding: 2.382em .618em 1em; /* bottom was .382em before we rounded the bottom corner - this allows pickers to look nice if they are not wider than this panel */ color: var(--fore-palette); background-color: var(--back-palette); border: none; border-radius: 0; border-top-left-radius: .618em; border-bottom-left-radius: .618em; } #MasterColorPicker_options > label { position: absolute; top: .27em; left: .618em; } select#MasterColorPicker_palette_select { color: var(--fore-text); background-color: var(--back-text); position: relative; max-width: 10em; } #MasterColorPicker_options header { color: inherit; background-color: inherit; 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: var(--back-text); color: var(--fore-text); 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 var(--border-cold); border-bottom: 2px solid var(--border-cold); border: 2px solid var(--border-cold); border-radius: .618em / 1em; border-top-right-radius: 0; z-index: 1; } #MasterColorPicker_options > div:hover div, /* the div.activeInterface classname (below) is added by MasterColorPicker2.js and is therefore HTML & CSS dependent. */ #MasterColorPicker_options.activeInterface.activePickerPanel > div.activeInterface div { display: block; } /* this is a better solution that unlinks .js and the HTML layout, but not for MS browsers! #MasterColorPicker_options > div:hover div, #MasterColorPicker_options.activeInterface.activePickerPanel > div div { display: block; } #MasterColorPicker_options.activeInterface.activePickerPanel > label:focus-within ~ div div { /*ignored by MSIE & Edge* display: none; } */ #MasterColorPicker_options label { white-space: nowrap; } #MasterColorPicker_options div div > fieldset:last-of-type label { /* colorblind filter provider */ /* background-color: lightgreen; /* so you can find it for debugging */ white-space: normal; } #MasterColorPicker_options p { display: none; } #MasterColorPicker_options.activePicker label:focus-within > p, #MasterColorPicker_options.activePicker fieldset:focus-within > p, #MasterColorPicker_options.activePicker label:hover > p, #MasterColorPicker_options.activePicker fieldset:hover > p { /* all popups */ display: block; position: absolute; bottom: 100%; top: auto; width: auto; margin: 0; padding: .618em; font-size: inherit; white-space: normal; border: 1px solid var(--border-hot); border-bottom: none; background-color: var(--back-text); color: var(--fore-text); } #MasterColorPicker_options.activePicker label#MasterColorPicker_interlink:focus-within > p, #MasterColorPicker_options.activePicker label#MasterColorPicker_keepPrecision:focus-within > p, #MasterColorPicker_options.activePicker label#MasterColorPicker_interlink:hover > p, #MasterColorPicker_options.activePicker label#MasterColorPicker_keepPrecision:hover > p { top: 1.162em; top: 100%; bottom: auto; border: 1px solid var(--border-hot); border-top: none; } #MasterColorPicker_options.activePicker fieldset:focus-within > p:first-child, #MasterColorPicker_options.activePicker fieldset:hover > p:first-child { /* Hue Angle Units notice popup */ } #MasterColorPicker_options.activePicker fieldset.pickerOptions:focus-within > p, #MasterColorPicker_options.activePicker fieldset.pickerOptions:hover > p { /* flaoting panels notice popup */ top: -0.162em; left: auto; left: -17.618em; right: 100%; bottom: -0.162em; bottom: auto; width: 17.618em; width: auto; padding-top: .162em; padding-bottom: .162em; line-height: 1.162em; border: 1px solid var(--border-hot); border-right: none; } #MasterColorPicker_options > div div fieldset { /* background-color: pink; /* so you can find it for debugging */ z-index: 2; display: block; position: relative; margin: .618em 0; padding: 0; border: none; } #MasterColorPicker_options > div div fieldset:focus-within, #MasterColorPicker_options > div div fieldset:hover { z-index: 3; } #MasterColorPicker_options > div div fieldset label { /* background-color: lightSalmon; /* so you can find it for debugging */ display: block; margin: 0; } #MasterColorPicker_options .disabled { opacity: .27; } #MasterColorPicker_options > div div fieldset#Color_Picker_options { border: 1px solid; margin: 0 -.854em 1em -.854em; padding: 0 .382em .382em .382em; white-space: nowrap; } #MasterColorPicker_options > div div fieldset:first-child legend { font-size: 1.01618em; font-weight: bold; } #MasterColorPicker_options > div div fieldset:first-child fieldset { /* background-color: lightgreen; /* so you can find it for debugging */ 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:first-child fieldset label { margin: 0; } #MasterColorPicker_options > div div fieldset#Color_Picker_options > label#MasterColorPicker_applyToAll { position: absolute; /* this has a different ref point for the offset parent in different browsers for an unknown reason */ top: -0.25em; /* value for Chrome, ¿more? */ right: .382em; left: auto; margin: 0; padding: 0; color: var(--fore-text); background-color: var(--back-text); } /* @-moz-document url-prefix() { */ @supports selector(::moz-range-thumb) { /* only target Mozilla browsers */ #MasterColorPicker_options > div div fieldset#Color_Picker_options > label#MasterColorPicker_applyToAll { top: -1.25em; /* value for Firefox - they need to fix this issue - going on 10+ years! */ } } #MasterColorPicker_options > div div > fieldset:nth-child(2) > label:nth-child(1), #MasterColorPicker_options > div div > fieldset:nth-child(2) > label:nth-child(2) { display: inline; } #MasterColorPicker_options > div div > fieldset:nth-child(2) > label:nth-child(2) { margin-left: .2em; } #MasterColorPicker_options > div div > fieldset:nth-child(3) > label { line-height: 1.2em; } #MasterColorPicker_options popbox { position: fixed; display: block; top: 6.18%; bottom: auto; height: 87%; left: 6.18%; right: 6.18%; padding: 1em; overflow: auto; color: var(--fore-text); background-color: var(--back-text); z-index: 9000; text-align: center; } #MasterColorPicker_options popbox.disabled { display: none; } #MasterColorPicker_options popbox button { position: absolute; top: 0.618em; bottom: auto; right: 0.618em; left: auto; } #MasterColorPicker_options popbox p { display: block; text-align: justify; columns: 3; column-gap: 1.62em; } #MasterColorPicker_options popbox table { display: inline-block; vertical-align: top; width: 48%; margin-right: 0; border: 4px double; } #MasterColorPicker_options popbox table:first-of-type { margin-right: 1%; float: left; } #MasterColorPicker_options popbox td, #MasterColorPicker_options popbox th { border: 1px solid; } #MasterColorPicker_options popbox tbody td { color: var(--fore-text-highlight); background-color: var(--back-text-highlight); } #MasterColorPicker_options popbox footmark { color: var(--fore-text-standout); } #MasterColorPicker_options popbox caption, #MasterColorPicker_options popbox th { } #MasterColorPicker_PaletteManager.pickerPanel, #MasterColorPicker_MyPalette.pickerPanel { margin: 0; top: calc(2em + 2px); bottom: auto; right: 19.618em; left: auto; } #MasterColorPicker_PaletteManager h2, #MasterColorPicker_MyPalette h2 { margin: 0 0 0 .382em; text-align: left; } #MasterColorPicker_PaletteManager h2 span, #MasterColorPicker_MyPalette h2 span { position: absolute; top: 1.618em; left: 0.382em; right: auto; padding: 0; border: none; writing-mode: vertical-rl; transform: rotate(180deg); } #MasterColorPicker_PaletteManager h2 span:hover, #MasterColorPicker_MyPalette h2 span:hover { outline: 1px solid var(--border-hover); } #MasterColorPicker_PaletteManager.pickerPanel { padding: .382em 1.618em .382em 1.854em; left: 0; right: auto; } #MasterColorPicker_PaletteManager h2 { margin-left: -.854em; } #MasterColorPicker_PaletteManager fieldset { border: 1px solid; margin: 0; padding: .382em; } #MasterColorPicker_PaletteManager > fieldset, #MasterColorPicker_PaletteManager > fieldset > legend { margin-top: 0.162em; border: 3px double var(--border-section); border-radius: .618em / 1em; } #MasterColorPicker_PaletteManager > fieldset > legend { font-size: 1.1em; padding: 0.1em 0.618em; } #MasterColorPicker_PaletteManager fieldset.disabled { display: none; } #MasterColorPicker_PaletteManager fieldset.controls { padding: 0; margin: 0; border: none; text-align: center; position: relative; z-index: 4; } #MasterColorPicker_PaletteManager fieldset.controls fieldset { /*options*/ position: absolute; padding: 0 0 0 0.382em; color: var(--fore-text); background-color: var(--back-text); text-align: left; left: 0.618em; right: auto; top: 0.2em; bottom: auto; border-top: none; } #MasterColorPicker_PaletteManager .controls legend { /*options*/ padding-right: 1em; } #MasterColorPicker_PaletteManager fieldset.controls :is(fieldset:hover, fieldset.focus-within) { /*options*/ padding: 0 0.382em 0.382em 0.382em; } #MasterColorPicker_PaletteManager fieldset.controls fieldset label { /*options*/ display: none; } #MasterColorPicker_PaletteManager fieldset.controls :is(fieldset:hover, fieldset.focus-within) label { /*options*/ display: block; white-space: nowrap; } #MasterColorPicker_PaletteManager button { margin: 0 .618em; } #MasterColorPicker_PaletteManager .controls button:first-child { position: absolute; top: -1.382em; bottom: auto; left: auto; right: -1.382em; } #MasterColorPicker_PaletteManager button[name*="_addSelected"] { position: relative; top: -0.382em; } #MasterColorPicker_PaletteManager ul { list-style-type: none; margin: 0; padding: 0; border: none; border-top: 1px dashed; } #MasterColorPicker_PaletteManager li { margin: 0; padding: 0; } #MasterColorPicker_PaletteManager label { white-space: nowrap; } #MasterColorPicker_PaletteManager div.dialog { position: sticky; top: -.382em; /* padding on panel */ color: var(--fore-text); background-color: var(--back-text); margin: 0 -1.162em 0 -0.382em; padding: 0; } #MasterColorPicker_PaletteManager .dialog div { margin: .382em 1em; padding: 0.328em; border: none; border-left: 1px solid; border-radius: .618em / 1em; color: var(--fore-text-message); background-color: var(--back-text-message); } #MasterColorPicker_PaletteManager .dialog div.error { background-color: var(--back-text-message-error); } #MasterColorPicker_PaletteManager .dialog p, #MasterColorPicker_PaletteManager .dialog strong { display: block; margin: 0; padding: 0 0 0 .618em; } #MasterColorPicker_PaletteManager .dialog strong { color: var(--fore-text-warn); } #MasterColorPicker_PaletteManager filepath { display: block; margin-left: -0.618em; } #MasterColorPicker_PaletteManager fieldset.controls fieldset filepath { /*options*/ display: inline; margin: 0; } #MasterColorPicker_PaletteManager legend filepath { display: inline; margin: 0 0 0 1em; } #MasterColorPicker_PaletteManager ul label { font-family: monospace; white-space: pre; } #MasterColorPicker_MyPalette > fieldset, #MasterColorPicker_MyPalette p { margin-left: 1.618em; margin-right: 0; } #MasterColorPicker_MyPalette p+fieldset { position: relative; overflow: hidden; } #MasterColorPicker_MyPalette p+fieldset > label { display: block; margin: 0; padding: 0; } #MasterColorPicker_MyPalette p+fieldset > button { float: right; } #MasterColorPicker_MyPalette button { margin-left: 0.382em; margin-right: 0; } #MasterColorPicker_MyPalette button.pressed { background-color: var(--back-button-pressed); } #MasterColorPicker_MyPalette button.activated { background-color: var(--back-button-active); } #MasterColorPicker_MyPalette fieldset.options { position: absolute; top: calc(100% - 1.382em); left: 0; bottom: auto; right: auto; height: 0; border: none; } #MasterColorPicker_MyPalette fieldset.options label { white-space: nowrap; display: none; } /* #MasterColorPicker_MyPalette p+fieldset:has(fieldset:hover), /* is it just me, or is waiting 10 years for browsers to mature a bit slow? */ #MasterColorPicker_MyPalette p+fieldset.pseudoHover, /* class controlled by JavaScript … pitiful in 2020 ! */ #MasterColorPicker_MyPalette p+fieldset.focus-within-options { /* class controlled by JavaScript to allow tab-in */ overflow: visible; z-index: 10; } #MasterColorPicker_MyPalette fieldset.options:hover, #MasterColorPicker_MyPalette fieldset.options.focus-within { /* class controlled by JavaScript to allow tab-in */ border: 1px solid; border-top: none; height: auto; width: auto; background-color: var(--back-text); color: var(--fore-text); } #MasterColorPicker_MyPalette fieldset.options:hover label, #MasterColorPicker_MyPalette fieldset.options.focus-within label { /* class controlled by JavaScript to allow tab-in */ display: block; z-index: 1; } #MasterColorPicker_MyPalette .portDialog:disabled, #MasterColorPicker_MyPalette .portDialog .import, #MasterColorPicker_MyPalette .portDialog .export, #MasterColorPicker_MyPalette .portDialog .browser, #MasterColorPicker_MyPalette .portDialog .local, #MasterColorPicker_MyPalette .portDialog .server, #MasterColorPicker_MyPalette .portDialog .current { display: none; } #MasterColorPicker_MyPalette .portDialog.import .import, #MasterColorPicker_MyPalette .portDialog.export .export { display: block; } #MasterColorPicker_MyPalette .portMode label, #MasterColorPicker_MyPalette .portDialog.server span.server { display: inline; } #MasterColorPicker_MyPalette .options label, #MasterColorPicker_MyPalette .port, #MasterColorPicker_MyPalette .port label, #MasterColorPicker_MyPalette .paletteMerge label, #MasterColorPicker_MyPalette .paletteMeta label { display: block; position: relative; z-index: 1; } #MasterColorPicker_MyPalette fieldset.options, #MasterColorPicker_MyPalette fieldset.options label:hover, #MasterColorPicker_MyPalette fieldset.options label:focus-within, #MasterColorPicker_MyPalette .port, #MasterColorPicker_MyPalette .port label:hover, #MasterColorPicker_MyPalette .port label:focus-within, #MasterColorPicker_MyPalette .paletteMerge label:hover, #MasterColorPicker_MyPalette .paletteMerge label:focus-within, #MasterColorPicker_MyPalette .paletteMeta label:hover, #MasterColorPicker_MyPalette .paletteMeta label:focus-within { z-index: 2; } #MasterColorPicker_MyPalette .options note, #MasterColorPicker_MyPalette .portDialog note { position: absolute; top: 100%; left: 38.2%; padding: 0 1em .618em 1em; white-space: normal; background-color: var(--back-text-note); color: var(--fore-text-note); display: none; } #MasterColorPicker_MyPalette .options label:hover note, #MasterColorPicker_MyPalette .portDialog label:hover note, #MasterColorPicker_MyPalette .options label:focus-within note, #MasterColorPicker_MyPalette .portDialog label:focus-within note { display: block; } #MasterColorPicker_MyPalette .portDialog note.warn { background-color: var(--back-text-note-warn); } #MasterColorPicker_MyPalette .portDialog note[referto] { background-color: var(--back-text-note-refer); color: var(--fore-text-note-refer); } #MasterColorPicker_MyPalette .port fieldset { margin: 0; padding: 0; border: none; } #MasterColorPicker_MyPalette .port button { position: absolute; margin: 0; right: .382em; left: auto; top: .382em; bottom: auto; z-index: 3; } #MasterColorPicker_MyPalette .portDialog.import .port .local, #MasterColorPicker_MyPalette .portDialog .port button.disabled, #MasterColorPicker_MyPalette .portDialog.export .paletteMeta .browser, #MasterColorPicker_MyPalette .portDialog.export .paletteMeta .server, #MasterColorPicker_MyPalette .portDialog.import .import.server { display: none; } #MasterColorPicker_MyPalette .portDialog.import.local .port .local, #MasterColorPicker_MyPalette .portDialog.export.browser .paletteMeta .browser, #MasterColorPicker_MyPalette .portDialog.export.server .paletteMeta .server, #MasterColorPicker_MyPalette .portDialog.export.local .paletteMeta .local, #MasterColorPicker_MyPalette .portDialog.import.server .import.server { display: block; } #MasterColorPicker_MyPalette .paletteMeta textarea { display:block; max-width: 32em; max-height: 7em; } #MasterColorPicker_MyPalette fieldset.filetype label { display: block; margin-right: .382em; } #MasterColorPicker_MyPalette .portNotice { display: block; background-color: var(--back-text-hot); width: 30em; white-space: pre-wrap; overflow-wrap: break-word; } /* #MasterColorPicker_MyPalette .portNotice span { font-weight: bold; font-family: monospace; } */ #MasterColorPicker_MyPalette .portNotice filepath { white-space: break-spaces; } #MasterColorPicker_MyPalette .portNotice strong { color: var(--fore-text-warn); } #MasterColorPicker_MyPalette .portNotice h4 { margin: 0; padding: 0; } #MasterColorPicker_MyPalette .portNotice button { display: block; margin: 0; padding: 0 0 0 .618em; text-indent: -.618em; border: none; color: inherit; background-color: inherit; font-variant: none; font-family: monospace; text-align: left; } #MasterColorPicker_MyPalette .portNotice button:hover { outline: 1px solid var(--border-button-hover); } #MasterColorPicker_MyPalette fieldset.editors { text-align: center; white-space: nowrap; } #MasterColorPicker_MyPalette > fieldset.editors.sticky { position: sticky; top: -0.382em; /* .pickerPanel padding */ z-index: 7; background-color: inherit; /* var(--back-text); */ margin: 0; width: calc(100% - 0.618em - var(--scrollbar-width)); /* .pickerPanel padding (- 0.764em? ←for some reason, maybe roundoff errors, .618 works better) - if the user’s scrollbars are extra-wide, there may be a problem */ border: none; } #MasterColorPicker_MyPalette fieldset.editors button:first-child { display: block; margin: 0 auto 0.162em; } #MasterColorPicker_MyPalette fieldset.editors button:nth-child(2) { margin-left: 0; } #MasterColorPicker_MyPalette table { margin: 0.618em 0 0 0; padding: 0; position: relative; max-height: 7.618em; overflow: auto; border-collapse: collapse; } /* #MasterColorPicker_MyPalette thead th, #MasterColorPicker_MyPalette tbody td.colorblind { border-right: 1px solid; border-top: 1px solid; } #MasterColorPicker_MyPalette thead th:nth-child(1), #MasterColorPicker_MyPalette thead th:nth-child(6) { border-top: none; } */ #MasterColorPicker_MyPalette thead th, #MasterColorPicker_MyPalette tbody td.colorblind { border: 1px solid; } #MasterColorPicker_MyPalette thead th:nth-child(1), #MasterColorPicker_MyPalette thead th:nth-child(6) { border-left: none; border-top: none; } #MasterColorPicker_MyPalette table .colorblind, #MasterColorPicker_MyPalette tbody:nth-child(2) .subPalette { display: none; } #MasterColorPicker_MyPalette table.showColorblind .colorblind { font-family: monospace; display: table-cell; } #MasterColorPicker_MyPalette table .colorblind span { font-variant: small-caps; font-size: .8em; } #MasterColorPicker_MyPalette td:first-child { cursor: pointer; } #MasterColorPicker_MyPalette td.dragHandle { cursor: n-resize; } #MasterColorPicker_MyPalette tbody 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:hover th { /*{{now OK in 2020?}} → Blink/(Webkit?) browsers: the hover state does not change until the button is released - so this does not work properly*/ border-top: 2px solid var(--drag-highlight); } #MasterColorPicker_MyPalette .isBeingDragged { background-color: #FF7777; } #MasterColorPicker_MyPalette tr:hover .dragHandle { color: var(--drag-highlight); } #MasterColorPicker_MyPalette .dragHandle { padding-left: .382em; padding-right: .382em; font-weight: bold; position: relative; } #MasterColorPicker_MyPalette tr:last-child .dragHandle {} /* visibility: hidden; } */ #MasterColorPicker_MyPalette td { border-color: var(--fore-text) !important; white-space: nowrap; } #MasterColorPicker_MyPalette tbody th { position: relative; padding: .382em 0 0 .382em; border: 1px solid; border-bottom: none; text-align: left; } #MasterColorPicker_MyPalette th select[name$='[parent]'], #MasterColorPicker_MyPalette th input[name$='[Name]'] { width: 30em; } #MasterColorPicker_MyPalette tbody th label:last-child { } #MasterColorPicker_MyPalette tbody th label:first-child, #MasterColorPicker_MyPalette tbody th label:nth-child(2), #MasterColorPicker_MyPalette tbody th label:nth-child(3) { display: block; margin: 0; } #MasterColorPicker_MyPalette td:first-child { padding: 0 1.618em 0 .382em; border: 1px solid; } #MasterColorPicker_MyPalette td input[type="text"] { width: 17em; } #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu, #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu span, #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu ul { position: absolute; top: 0; left: 0; color: var(--fore-text-GenieMenu); background-color: var(--back-text-GenieMenu); list-style-type: none; cursor: default; padding: .162em .27em; z-index: 13; display: none; } #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu ul { border: solid var(--back-text-GenieMenu); border-width: 0 .27em 0 0; overflow: auto; scrollbar-gutter: stable; scrollbar-width: thin; } #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu:hover ul { border: solid var(--back-text-GenieMenu-hoveredSet); } #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu li { position: relative; } #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu span, #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu ul { top: -.162em; left: 100%; max-height: 8em; } #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu span+ul { top: 100%; } #MasterColorPicker_MyPalette .dragHandle[aria-expanded='true'] .MyPalette_ColorGenieMenu, #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu li[aria-expanded='true'] span, #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu li[aria-expanded='true'] ul { display: block; } #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu:hover li[aria-expanded='true']:focus span, #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu:hover li[aria-expanded='true']:focus ul { display: none; } #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu li:hover span, #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu li:hover ul, #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu li[aria-expanded='true']:focus:hover span, #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu li[aria-expanded='true']:focus:hover ul { display: block; } #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu li:focus-within, #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu span:focus, #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu li:focus { color: var(--fore-text-GenieMenu-focused); background-color: var(--back-text-GenieMenu-focused); z-index: 20; } #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu li:hover span, #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu li:hover ul { color: var(--fore-text-GenieMenu-hoveredSet); background-color: var(--back-text-GenieMenu-hoveredSet); } #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu li:hover span:hover, #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu li:hover { color: var(--fore-text-GenieMenu-hoveredOver); background-color: var(--back-text-GenieMenu-hoveredOver); z-index: 30; } #MasterColorPicker_MyPalette .MyPalette_ColorGenieMenu :focus { outline: var(--border-hot) double medium; } iframe#MasterColorPicker_local_filesaver { /* this is not included in the default HTML, but is injected as the last-child of the body when saving a palette to the local file-system. If that causes layout issues (it does when this element is included in the default HTML) you should include this element in your HTML page at the point where it will not cause interference with your page layout. */ display: none; } #MasterColorPicker_Mixer { margin-top: 2em; margin-top: calc(2em + 2px); top: 0; right: 18.37em; text-align: center; } #MasterColorPicker_Mixer h2 span { right: 4.62em; } #MasterColorPicker_Mixer h3 { margin: .162em 0; font-size: 1em; } #MasterColorPicker_Mixer.filter #MasterColorPicker_Blender, #MasterColorPicker_Mixer.blender #MasterColorPicker_Filter { display: none; } #MasterColorPicker_Filter p { max-width: 27.618em; margin: 0 auto; } #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: var(--back-text-note); color: var(--fore-text-note); border: 1px solid; /* 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 var(--fore-text); margin-left: .382em; } #MasterColorPicker_Blender { position: relative; text-align: center; } #MasterColorPicker_Blender span.help { font-size: 120%; } #MasterColorPicker_Blender > p { display: none; /* Javascript controls the display when the help ☺ is hovered over */ margin: 0 auto .618em auto; width: 23em; text-align: justify; } #MasterColorPicker_Blender > label { display: block; text-align: left; } #MasterColorPicker_Blender fieldset { z-index: 2; min-height: calc(4em + 4px); } #MasterColorPicker_Blender textarea { width: 4em; height: 4em; margin: 2px; position: relative; /* JavaScript controls this directly as the swatch is dragged: * relative when inside the swatches’ fieldset * absolute when inside the Blender panel * fixed when outside the Blender panel */ z-index: 2; } #MasterColorPicker_Blender textarea.passive { color: transparent; cursor: move; } #MasterColorPicker_EyeDropper playground, #MasterColorPicker_Blender playground { display: block; position: relative; min-height: 14.832em; min-width: 24em; resize: both; border: 2px solid var(--fore-text); overflow: auto; z-index: 1; } #MasterColorPicker_EyeDropper playground { margin: 0; /* how to make the "resize" thingy in the corner visible? (native-black on styled-black background now) */ color: var(--fore-palette); background-color: var(--back-palette); color-scheme: dark; /* We don't NEED to style the colors above, unless they actually make the "resize" thingy visible */ border-color: var(--fore-palette); } #MasterColorPicker_EyeDropper.fullscreen playground { resize: none; flex-grow: 1; } #MasterColorPicker_EyeDropper playground canvas, #MasterColorPicker_Blender playground img { position: absolute; top: 0; left: 0; right: auto; bottom: auto; z-index: 1; } #MasterColorPicker_EyeDropper playground canvas { cursor: crosshair; } #MasterColorPicker_mainPanel #MasterColorPicker_EyeDropper.palette.fullscreen { display: flex; flex-direction: column; } #MasterColorPicker_EyeDropper { text-align: center; } #MasterColorPicker_EyeDropper fieldset { display: inline-block; position: relative; border: none; margin: 0; padding: 0; } #MasterColorPicker_EyeDropper fieldset:first-of-type { position: absolute; top: 2px; right: 2px; left: auto; bottom: auto; } #MasterColorPicker_EyeDropper fieldset > button:last-child, #MasterColorPicker_EyeDropper.fullscreen fieldset > button:first-child { display: none; } #MasterColorPicker_EyeDropper.fullscreen fieldset > button:last-child { display: inline; } #MasterColorPicker_EyeDropper fieldset label:last-child { display: none; } #MasterColorPicker_EyeDropper fieldset:hover label:last-child, #MasterColorPicker_EyeDropper fieldset:focus-within label:last-child, #MasterColorPicker_EyeDropper fieldset.focus-within label:last-child { display: block; position: absolute; top: 100%; left: 0px; bottom: auto; right: auto; padding: .162em 0 0 0; white-space: nowrap; color: var(--fore-palette); background-color: var(--back-palette); border: 1px solid var(--fore-palette); border-top: none; } #MasterColorPicker_EyeDropper input[name*='background'] { background: linear-gradient(to right, black, white); } #MasterColorPicker_EyeDropper note { display: none; } #MasterColorPicker_EyeDropper tools > label { display: block; } #MasterColorPicker_EyeDropper tools > label:last-of-type { display: inline; } #MasterColorPicker_EyeDropper tools > button { margin-right: .618em; } #MasterColorPicker_EyeDropper tools > button.cutting { background-color: var(--back-button-active); } #MasterColorPicker_EyeDropper tools > button.uncut { text-decoration: line-through; background-color: var(--back-button-toggled); } #MasterColorPicker_EyeDropper label:last-of-type { margin-left: .618em; position: relative; } #MasterColorPicker_EyeDropper label:focus-within note, #MasterColorPicker_EyeDropper label:hover note { display: block; position: absolute; color: var(--fore-text-note); background-color: var(--back-text-note); top: 100%; bottom: auto; left: 1em; right: auto; width: 13em; margin: 0; padding: .382em; z-index: 13; } #MasterColorPicker_EyeDropper input[type='file'] { display: block; text-align: left; } /* see file top body.we-be-a-cuttin * { cursor: not-allowed; } */ body.MCP_we-be-a-cuttin #MasterColorPicker_EyeDropper playground * { cursor: crosshair; } #MasterColorPicker_EyeDropper playground span { position: absolute; box-sizing: border-box; border: 1px dashed var(--fore-palette); outline: 1px dashed var(--back-palette); color: transparent; background-color: transparent; z-index: 1000; } #MasterColorPicker indicator { display: block; margin: 0; padding: .162em 0; min-height: 1.382em; text-align: center; } #MasterColorPicker swatch { display: inline-block; width: 2.618em; height: 1.382em; } #MasterColorPicker indicator swatch { float: right; } #MasterColorPicker_Gradientor { margin-top: calc(2em + 2px); top: 0; right: 15em; width: auto; min-width: calc(256px + 1.236em); } /* width-of-canvas + canvas-container-padding */ #MasterColorPicker_Gradientor h2 span { right: 2em; } #MasterColorPicker_Gradientor span[referto] { font-weight: bold; white-space: nowrap; color: var(--fore-text-note-refer); background-color: var(--back-text-note-refer); cursor: pointer; } #MasterColorPicker_Gradientor label, #MasterColorPicker_Gradientor fieldset { display: block; } /* mix format: */ #MasterColorPicker_Gradientor fieldset:first-of-type label:first-of-type { float: left; } #MasterColorPicker_Gradientor fieldset:first-of-type label:last-of-type { float: right; } #MasterColorPicker_Gradientor.linear #MasterColorPicker_Gradientor_triadic-colors, #MasterColorPicker_Gradientor.triadic #MasterColorPicker_Gradientor_linear-colors { display: none; } #MasterColorPicker_Gradientor_linear-colors p:first-of-type { width: 20em; margin: 0 auto .382em; padding: 0; white-space: normal; text-align: justify; } #MasterColorPicker_Gradientor_linear-colors fieldset { white-space: nowrap; padding: 0 .382em; border: none; border-top: 2px solid; } #MasterColorPicker_Gradientor input[name*='color'] { width: 17em; } #MasterColorPicker_Gradientor_linear-colors input { display: inline; margin: 0; } #MasterColorPicker_Gradientor_linear-colors input:last-child { width: 7em; } #MasterColorPicker_Gradientor swatch { vertical-align: middle; } #MasterColorPicker_Gradientor div { /* canvas container */ text-align: center; padding: .618em; color: var(--fore-palette); background-color: var(--back-palette); } #MasterColorPicker_Gradientor canvas { margin: 0 auto; border: 1px solid var(--fore-palette); } #MasterColorPicker_Lab { margin-top: 2em; margin-top: calc(2em + 2px); top: 0; right: 19em; color: var(--fore-text-lab); background-color: var(--back-text-lab); } #MasterColorPicker_Lab h2 { text-align: center; padding: 0; margin: 0 0 .162em 0;} #MasterColorPicker_Lab h2 span { right: 10em; } #MasterColorPicker_Lab table { border: 1px solid; margin: 0 0 .618em; } #MasterColorPicker_Lab caption > label { float: left; } #MasterColorPicker_Lab caption > abbr:nth-child(3), #MasterColorPicker_Lab caption > abbr:nth-child(5), #MasterColorPicker_Lab caption > abbr: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="numeric"], #MasterColorPicker_Lab input[type="number"], #MasterColorPicker_Lab input[type="text"] { width: 5.618em; } #MasterColorPicker_Lab input[base="16"] { width: auto; } #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. * Also, the MasterColorPicker-desktop version (called with the file: protocol in the URL) * has a duplicate of these rules that need to be directly included in the HTML-head itself, * since JavaScript is not allowed to read any locally linked (including CSS) files * that the end-user does not hand-select. /*******/ #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: linear-gradient(to right, #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: linear-gradient(to right, #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: pink; background-color: transparent; } #MasterColorPicker_Lab tr.hue input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, #FF0000 0%, #FFFF00 16.7%, #00FF00 33.3%, #00FFFF 50%, #0000FF 66.7%, #FF00FF 83.3%, #FF0000 100%); height: .618em; } #MasterColorPicker_Lab table.isOK tr.hue input[type="range"]::-moz-range-track { background: gray; } #MasterColorPicker_Lab table.isOK tr.hue input[type="range"]::-ms-track { background: transparent; } #MasterColorPicker_Lab table.isOK tr.hue input[type="range"]::-webkit-slider-runnable-track { background: transparent; } #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 fieldset { display: block; position: relative; border: 1px solid var(--fore-text); padding: .162em .618em; margin: .162em 0; text-align: right; } #MasterColorPicker_Lab fieldset legend { font-weight: bold; } #MasterColorPicker_Lab fieldset > legend+label { position: absolute; left: .618em; top: .162em; right: auto; bottom: auto; } #MasterColorPicker_Lab fieldset input[type="range"]::-moz-range-thumb { background-color: var(--back-text); } #MasterColorPicker_Lab fieldset input[type="range"]::-ms-thumb { background-color: var(--back-text); } #MasterColorPicker_Lab fieldset input[type="range"]::-webkit-slider-thumb { background-color: var(--back-text); } #MasterColorPicker_Lab div { margin: 0; padding: 0; } #MasterColorPicker_Lab indicator { display: inline-block; text-align: left; white-space: nowrap; margin: 0; padding: 0; } #MasterColorPicker_Lab indicator span { font-weight: bold; font-family: monospace; font-size: 116.18%; } indicator#MasterColorPicker_LabContrast { float: right; } indicator#MasterColorPicker_LabContrast.disabled { display: none; } #MasterColorPicker_Lab aside { position: absolute; top: 1em; right: 1em; left: auto; bottom: auto; } #MasterColorPicker_Lab aside fieldset.options { display: none; } #MasterColorPicker_Lab aside:hover fieldset.options, #MasterColorPicker_Lab aside fieldset.options.focus-within, #MasterColorPicker_Lab aside fieldset.options:focus-within { display: block; position: absolute; top: 100%; right: 0; bottom: auto; left: auto; margin: 0; padding: .618em; border: 1px solid; border-top: none; color: var(--fore-text); background-color: var(--back-text); } #MasterColorPicker_Lab aside fieldset.options fieldset { border: none; padding: 0; margin: 0; } #MasterColorPicker_Lab aside label { display: block; white-space: pre; text-align: left; } #MasterColorPicker_Lab aside label.depends { padding-left: 1.618em; } #MasterColorPicker_Lab aside label.disabled { color: var(--fore-text-disabled); } #MasterColorPicker_Lab aside input:disabled { opacity: 38.2%; } #MasterColorPicker_Lab aside input[interfaceTarget] { width: inherit; } #MasterColorPicker_Lab button { position: absolute; right: 1.382em; bottom: 7em; left: auto; top: auto; margin: 0; padding: 0; font-family: inherit; font-size: inherit; font-variant: none; border-radius: 2.41em; border: none; background: conic-gradient(from 90deg, black, white); } #MasterColorPicker_Lab contrastSwatch { position: absolute; right: calc(1.382em - 7px); bottom: calc(7em - 7px); top: calc(100% - 7em - 14px - 4.82em + 0.382em); /* 14px is 7px bigger on each side of swatch */ left: calc(100% - 1.382em - 14px - 4.82em + 0.382em); /* .382em is padding on the picker-panel */ border-radius: calc(2.41em + 7px); } /* ↑↓ JavaScript controls the background-color directly on these elements */ #MasterColorPicker_Lab button swatch { display: block; width: 4.82em; height: 4.82em; border: 1px solid; border-radius: 2.41em; cursor: pointer; } #MasterColorPicker_Lab button h5 { position: absolute; margin: 0; padding: 0 0 4px 0; font-size: 1em; bottom: 100%; top: auto; left: 0; right: 0; text-align: center; } #MasterColorPicker_Lab button table { position: absolute; table-layout: fixed; width: 100%; margin: 0; padding: 0; border: none; top: calc(100% + 8px); bottom: auto; left: auto; right: auto; border: none; background-color: white; color: black; font-variant: small-caps; font-size: .75em; } #MasterColorPicker_Lab button caption { margin: 0; padding: 0; line-height: .62em; } #MasterColorPicker_Lab button td { border: 1px solid; padding: .616em; } #MasterColorPicker_Lab button:hover { outline: 4px double; outline-offset: 2px; } #MasterColorPicker p.underConstruction { color: red !important; text-align: center !important; } #MasterColorPicker p.underConstruction span { display: block; font-size: 1.162em; } #MasterColorPicker_Gradientor p.underConstruction { position: absolute; font-size: 1.618em; background-color: #FFFFFFA0; top: 2.618em; left: 1em; rotate: 337deg; transform: rotate(337deg); z-index: 20; } #MasterColorPicker_Thesaurus { margin-top: 2em; margin-top: calc(2em + 2px); top: 0; right: 17.472em; width: 28em; } #MasterColorPicker_Thesaurus h2 span { right: auto; left: 0; } #MasterColorPicker_Thesaurus label { display: block; } #MasterColorPicker_Thesaurus input[type="text"] { width: 17em; border: 1px solid; margin-right: .382em; } #MasterColorPicker_Thesaurus fieldset.palette-list { max-height: 17em; overflow-y: auto; column-count: 2; } #MasterColorPicker_Thesaurus p { padding: 0; margin: .382em 0; } #MasterColorPicker_Thesaurus output p { margin: 0; } #MasterColorPicker_Thesaurus ol { margin: 0; padding: 0; list-style-type: none; max-height: 7em; overflow-y: auto; } #MasterColorPicker_Thesaurus .disparity { font-family: monospace; } #MasterColorPicker_Thesaurus .swatch { margin-right: .162em; color: transparent; border: 1px solid; } #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; /* this screws up hopes for a transparent background - no need now with panel overlay: see below: */ /* in this complex JavaScript-enhanced layout, the options panel can overlay this panel or visa-versa by 0.618em = padding-top */ padding: calc(.618em + 1px) 0 0 1em; /* +1px for table.picker border; 1.016em on right (now unused) is for scroll-bar */ border: none; border-radius: 0; border-top-left-radius: .618em; border-bottom-left-radius: .618em; color: var(--fore-palette); background-color: var(--back-palette); /* anyone for a game of hoops? */ background: linear-gradient(var(--back-palette), var(--back-palette)) top left / 1em 100% no-repeat scroll border-box, /* padding-left, this box */ linear-gradient(var(--back-palette), var(--back-palette)) top left / 100% calc(.618em + 1px) no-repeat scroll border-box, /* padding-top, this box */ linear-gradient(var(--back-palette), var(--back-palette)) top right / var(--scrollbar-width) 100% no-repeat scroll border-box, /* padding-right, table.palette when there is no scrollbar. See more notes below on how this screws up hopes for perfection in transparent backgournd on color_chart “grids” */ linear-gradient(var(--back-palette), var(--back-palette)) bottom left / 100% 1.618em no-repeat scroll border-box; /* margin-bottom on all tables within */ background-color: transparent; /* We want “none” and “unknown” colors in color_charts to show through to the page behind. * We fill only the padding/margin area with default palette background-color. */ } #MasterColorPicker_mainPanel .palette { background-color: var(--back-palette); /* var(--scrollbar-width) padding-right: 1.016em; /* for scroll bar on mainPanel, ¡or it will cover the table! * With this padding, the scroll-bar will cover the padding and that part of the table-border. * ¡10 years and the table-layout algorithm bug still has not been fixed — * it affects the internally-controlled “painting” of background colors on these same tables * which is why we use padding not margin! * The color_charts are in a
and do not need this. * However, putting these tables also in a
did not help. * RainbowMaestro has problems with using margin, and this changes to padding. */ } #MasterColorPicker_mainPanel table.color_chart { /* var(--scrollbar-width) /* margin-right: 1.016em; /* For visual presentation, not scroll bar avoidance: * it just looks nicer when the table-border is not against the edge * of the mainPanel when the mainPanel is moved away from the right-side of the window. * However: * Without the margin, “none” and “unknown” colors in “grid” layouts * along the right side of the grid will not show through to the window behind * as they would be preferreed to to, due to the linear-gradient to cover the background * along the right-side of table.palette (which has stricter requirements due to layout issues). * But since at this time we have no solution for a transparent background in the * that holds the grid-table anyway, this does not matter at this time of writing. * With time though, custom JS may paint the background on table creation * (if later table-resizing can be handled properly). * This works and is preferred when the table is short enough * so that _mainPanel has no (right-side) scrollbar. * But with the scrollbar, the margin leaves a “blank” * in the background between the table and the scrollbar. * (since _mainPanel has a transparent background * to support “none” and “unknown” colors in .color_chart; * if ) * Why the scroll-bar respects the margin of these tables (and/or visa-versa?) * but table.palette does not is a mystery. */ background-color: transparent; } #MasterColorPicker_mainPanel table.color_chart th, #MasterColorPicker_mainPanel table.color_chart tbody.list td, /* :last-child */ #MasterColorPicker_mainPanel table.color_chart tr.footnote, #MasterColorPicker_mainPanel table.color_chart thead, #MasterColorPicker_mainPanel table.color_chart tfoot { background-color: var(--back-palette); } #MasterColorPicker_mainPanel table.color_chart tbody.list td:first-child { /* this “swatch” will have a specific color set by JavaScript as a style-property “unknown” colors should then instead show through the entire color_chart to the background behind */ background-color: transparent; } #MasterColorPicker_paletteTables > menu { position: fixed; /*hard-coded by JS; right,bottom,top,left calculated by JS*/ color: var(--fore-text-popMenu); background-color: var(--back-text-popMenu); list-style-type: none; margin: 0; padding: 0.2em; } #MasterColorPicker_paletteTables > menu li { margin: 0; padding: 0; } #MasterColorPicker_paletteTables > menu li:focus { color: var(--fore-text-popMenu-focused); background-color: var(--back-text-popMenu-focused); } #MasterColorPicker_paletteTables > menu li:hover { color: var(--fore-text-popMenu-hoveredOver); background-color: var(--back-text-popMenu-hoveredOver); } #MasterColorPicker_mainPanel table.color_chart, #MasterColorPicker_mainPanel .palette { border: 1px solid; margin-bottom: 1.618em; } #MasterColorPicker_mainPanel table.color_chart caption, #MasterColorPicker_mainPanel .palette caption { background-color: var(--back-palette); color: inherit; } #MasterColorPicker_mainPanel table.color_chart h6, #MasterColorPicker_mainPanel .palette h6 { font-size: 1.162em; margin: 0; padding: 0; } #MasterColorPicker_mainPanel table.color_chart caption strong, #MasterColorPicker_mainPanel .palette h6 { font-variant: small-caps; } #MasterColorPicker_mainPanel table.color_chart caption span { font-size: .764em; /* ≈ Φ + ((1-Φ) - (1-Φ)*Φ) */ } #MasterColorPicker_mainPanel table.color_chart { border-collapse: separate; border-spacing: 0; table-layout: auto; } /* ¿¿¿¿how to reliably get the swatch to be fixed-width and the def to expand as needed from a min-width???? */ #MasterColorPicker_mainPanel table.color_chart th { white-space: normal; width: auto; } #MasterColorPicker_mainPanel table.color_chart > tr th.head, #MasterColorPicker_mainPanel table.color_chart tfoot tr:first-child td { border-top: 1px solid; } #MasterColorPicker_mainPanel table.color_chart tbody.list td { white-space: nowrap; /* font-size: 1em; */ padding: .162em .162em .016em .382em; background-origin: padding-box; border: 2px solid var(--back-palette); cursor: default; } /* you may want to use “cursor: pointer” */ #MasterColorPicker_mainPanel table.color_chart tbody.list tr.unknown-color td { border: 2px dashed var(--back-palette); } #MasterColorPicker_mainPanel table.color_chart tr.noColor td:first-child, #MasterColorPicker_mainPanel table.color_chart tbody.list td:first-child { position: relative; width: 2.618em; } /* ***old notes - may now be irrelevant *** * styling the td above sort-of works. Sometimes… * styling this span can cause an unwanted scroll bar at the bottom of the mainPanel #MasterColorPicker_mainPanel table.color_chart tbody.list td:first-child span { display: inline-block; height: 100%; width: 2.618em; } */ #MasterColorPicker_mainPanel table.color_chart tbody.list td:first-child div { display: none; } #MasterColorPicker_mainPanel table.color_chart tbody.list td:first-child:focus div, #MasterColorPicker_mainPanel table.color_chart tbody.list td:first-child:hover div { display: block; position: absolute; left: 0; top: 0; background-color: inherit; padding: 2px .618em; } #MasterColorPicker_mainPanel table.color_chart tbody.list td:nth-child(2) { /* ***old notes - may now be irrelevant *** * styling this td works until the color-name is longer than 14em; then the swatch shrinks * / min-width: 14em; /* */ } #MasterColorPicker_mainPanel table.color_chart tbody.grid > tr > td { padding: 1.162em 0 0 0; text-align: center; overflow: hidden; /* block the outline (which is background filler for this TD) of the table-child */ position: relative; } #MasterColorPicker_mainPanel table.color_chart tr.footnote p { padding: 0; margin: 0; } #MasterColorPicker_mainPanel table.color_chart tbody.grid table.grid { margin: 0 auto; padding: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 2px solid var(--back-palette); outline: 162em solid var(--back-palette); /* this outline acts as the background-filler for the TD that holds this sub-table - that allows semi-transparent colors (and unknown-colors) to show through to whatever is behind the picker-panel */ } #MasterColorPicker_mainPanel table.color_chart tbody.grid table.grid td { width: 1em; padding: 0.5em 0 0.5em 0; border: 2px solid var(--back-palette); } #MasterColorPicker_mainPanel table.color_chart tbody.grid table.grid td.unknown-color { border: 2px dashed var(--back-palette); } #MasterColorPicker_mainPanel table.color_chart tbody.grid table.grid td.spacer, #MasterColorPicker_mainPanel table.color_chart tbody.grid table.grid td.filler { background-color: var(--back-palette); } #MasterColorPicker_mainPanel table.color_chart tbody.grid table.grid td span { display: none; } #MasterColorPicker_mainPanel table.color_chart tbody.grid table.grid td:hover span { display: block; position: absolute; width: 100%; top: 0; left: 0; bottom: auto; right: auto; background-color: inherit; line-height: 1.162em; } #MasterColorPicker_mainPanel table.color_chart tr.switch td.display { font-size: .8em; } #MasterColorPicker_mainPanel table.color_chart tr.switch td.display label { display: inline; margin: 0 0 0 .618em; } #MasterColorPicker_mainPanel table.color_chart tr.switch td.display input { display: inline; margin: 0 .162em 0 0; } #MasterColorPicker_mainPanel table.color_chart tr.switch+tbody.list, #MasterColorPicker_mainPanel table.color_chart tr.switch+tbody.grid, #MasterColorPicker_mainPanel table.color_chart tr.switch+tbody.grid+tbody.list { display: none; } #MasterColorPicker_mainPanel table.color_chart tr.grid+tbody.grid, #MasterColorPicker_mainPanel table.color_chart tr.list+tbody.list, #MasterColorPicker_mainPanel table.color_chart tr.list+tbody.grid+tbody.list { display: table-row-group; } #MasterColorPicker_mainPanel table.color_chart tbody.list tr.footnote td, #MasterColorPicker_mainPanel table.color_chart tbody.grid tr.footnote td, #MasterColorPicker_mainPanel table.color_chart tfoot td { padding: 0; font-size: .8em; white-space: normal; /* border-bottom: 1px solid var(--fore-palette); */ width: 1em; /* without this, white-space acts like nowrap… */ } #MasterColorPicker_mainPanel table.palette { border-spacing: 0; border-collapse: collapse;} #MasterColorPicker_mainPanel .palette table tr:first-child { } #MasterColorPicker_mainPanel .palette table td:first-child { font-weight: bold; } #MasterColorPicker_mainPanel .palette table tr:first-child td:first-child { font-weight: normal; } #MasterColorPicker_mainPanel .palette table tr:first-child td:first-child label { display: inline-block; width: 32%; text-align: center; } #MasterColorPicker_mainPanel .palette > tbody td { height: .618em; margin: 0; padding: 0; line-height: 1em; } #MasterColorPicker_mainPanel .palette { position: relative; } #MasterColorPicker_mainPanel .palette.fullscreen { /*EyeDropper*/ position: fixed; /* width: 100%; was calc(100% - 1em) calc(100% - var(--scrollbar-width)) but then we added scrollbar-gutter to the mainPanel*/ height: 100%; top: 0px; left: 0px; bottom: 0px; right: 0px; } #MasterColorPicker_mainPanel .palette input { margin: 2px; padding: 0; } #MasterColorPicker_mainPanel .palette footmark { font-size: .618em; vertical-align: baseline; position: relative; bottom: .382em; top: auto; display: inline; margin: 0; padding: 0; } #MasterColorPicker_mainPanel .palette > tfoot td { text-align: center; } /* #Spectral, #BeezEye, #RainbowMaestro, #Simple², #YinYangNíHóng, color_charts; */ #MasterColorPicker_mainPanel .picker { display: none; /* JavaScript will display these when the time comes */ } #MasterColorPicker_mainPanel .picker:hover, #MasterColorPicker_mainPanel .picker.activePicker, #MasterColorPicker_mainPanel .picker.activePickerInterface { display: block; } /* For historical reasons, the layout depends on this being “block” not “table”. * That “makes it harder” for screen-readers to interpret, they say. * But the tables are so simple, that matters little; they should have no problem. * What are blind people choosing colors for anyway? */ 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: var(--back-palette); 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: calc(100% - 7.618em); make space for the “twist” input-range */ margin-right: 3.618em; padding-bottom: 1.618em; } 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 > tbody > tr:first-child fieldset { padding-top: .382em; padding-bottom: .382em; border-bottom-left-radius: 1em 1.618em; } table#BeezEye fieldset input[type="radio"] { display: inline; } table#BeezEye input[type="range"] { display: block; } table#BeezEye input[name='BeezEye_variety'] { display: inline; } table#BeezEye input[name='BeezEye_value'] { background-color: transparent; } /*table#BeezEye tr:has(fieldset), dispite promises that :has() works with FireFox since 2023, it does not in July 2024, and flubbers this ruleset*/ table#BeezEye tr.foobar { position: relative; } table#BeezEye fieldset { position: absolute; top: -1.162em; right: 0; bottom: auto; left: auto; margin: 0; padding: .618em; text-align: left; overflow: visible; z-index: 2; color: var(--fore-palette); background-color: rgba(0,0,0,0.7); background-color: color(from black srgb r g b / 0.7); } table#BeezEye fieldset dl { display: none; } table#BeezEye fieldset:focus-within dl, table#BeezEye fieldset:hover dl { display: block; /* position: absolute; top: .618em; right: 100%; bottom: auto; left: auto; */ margin: 0; padding: .618em; width: 21em; font-weight: bold; } table#BeezEye fieldset table { color: var(--fore-palette); background-color: var(--back-palette); margin: 0; padding: 0; border-collapse: collapse; } table#BeezEye fieldset table td { display: none; } table#BeezEye fieldset table td.checked, table#BeezEye fieldset table.focus-within td, table#BeezEye fieldset:hover table td { display: table-cell; padding: 0 .618em 0 0; text-align: left; } table#BeezEye fieldset:hover table td:last-child { padding-right: 0; } table#BeezEye fieldset table label { display: block; margin: 0; padding: 0; white-space: nowrap; } table#BeezEye .disabled, table#BeezEye :disabled { visibility: hidden; } /* position: absolute; top: 3em; left: 5px; transform: rotate(330deg); } */ table#BeezEye > tbody > tr:first-child td:last-child label:nth-last-child(1), table#BeezEye > tbody > tr:first-child td:last-child label:last-child, table#BeezEye > tbody > tr:first-child label:has(input[type='checkbox']) { display: inline; padding-left: .382em; } table#BeezEye > tbody > 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(to right, #000000, #FFFFFF); } table#BeezEye > tbody > tr:nth-child(2) label span { color: black; padding-left: 1.618em; } table#BeezEye > tbody > tr:nth-child(2) label input[type="text"] { display: block; color: black; background-color: white; transform: rotate(-270deg); position: relative; top: -2.618em; /* since the containing