Add documentation and utility modules
- Add API specification documentation - Add system specification document - Add UI mockups and documentation - Add utility modules (wifi)
This commit is contained in:
253
docs/mockups/color-picker-chromium.css
Normal file
253
docs/mockups/color-picker-chromium.css
Normal file
@@ -0,0 +1,253 @@
|
||||
/* Chromium-style Color Picker - Matches native browser color picker dialog */
|
||||
|
||||
.color-picker-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Preview button - opens the picker */
|
||||
.color-picker-preview {
|
||||
width: 40px;
|
||||
height: 32px;
|
||||
border: 1px solid #d0d0d0;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
background: none;
|
||||
transition: border-color 0.15s;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.color-picker-preview:hover {
|
||||
border-color: #8ab4f8;
|
||||
}
|
||||
|
||||
.color-picker-preview:active {
|
||||
border-color: #4285f4;
|
||||
}
|
||||
|
||||
/* Main picker panel - always visible when open, styled like Chromium dialog */
|
||||
.color-picker-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
padding: 16px;
|
||||
min-width: 260px;
|
||||
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Color area - main saturation/brightness square + hue slider */
|
||||
.color-picker-area {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Main color square - saturation (left-right) and brightness (top-bottom) */
|
||||
.color-picker-main {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
cursor: crosshair;
|
||||
touch-action: none;
|
||||
background: #ffffff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.color-picker-canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
/* Cursor for main color area */
|
||||
.color-picker-cursor {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid #ffffff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Hue slider - vertical strip on the right */
|
||||
.color-picker-hue {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 200px;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
touch-action: none;
|
||||
background: #ffffff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Hue slider cursor/indicator */
|
||||
.color-picker-hue-cursor {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border: 2px solid #ffffff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
pointer-events: none;
|
||||
transform: translateY(-50%);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Controls section - hex and RGB inputs */
|
||||
.color-picker-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Hex input field */
|
||||
.color-picker-hex {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 4px;
|
||||
font-family: 'Roboto Mono', 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.color-picker-hex:focus {
|
||||
outline: none;
|
||||
border-color: #4285f4;
|
||||
box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
|
||||
}
|
||||
|
||||
/* RGB inputs container */
|
||||
.color-picker-rgb {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.color-picker-rgb-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.color-picker-rgb-item label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #5f6368;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* RGB number input fields */
|
||||
.color-picker-rgb-input {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
background: #ffffff;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.color-picker-rgb-input::-webkit-outer-spin-button,
|
||||
.color-picker-rgb-input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.color-picker-rgb-input:focus {
|
||||
outline: none;
|
||||
border-color: #4285f4;
|
||||
box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
|
||||
}
|
||||
|
||||
/* Hide RGB sliders - Chromium uses only number inputs */
|
||||
.color-picker-rgb-slider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 480px) {
|
||||
.color-picker-panel {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.color-picker-main {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.color-picker-hue {
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.color-picker-panel {
|
||||
background: #202124;
|
||||
border-color: #5f6368;
|
||||
}
|
||||
|
||||
.color-picker-preview {
|
||||
border-color: #5f6368;
|
||||
}
|
||||
|
||||
.color-picker-main,
|
||||
.color-picker-hue {
|
||||
border-color: #5f6368;
|
||||
background: #202124;
|
||||
}
|
||||
|
||||
.color-picker-hex,
|
||||
.color-picker-rgb-input {
|
||||
background: #303134;
|
||||
border-color: #5f6368;
|
||||
color: #e8eaed;
|
||||
}
|
||||
|
||||
.color-picker-rgb-item label {
|
||||
color: #9aa0a6;
|
||||
}
|
||||
|
||||
.color-picker-hex:focus,
|
||||
.color-picker-rgb-input:focus {
|
||||
border-color: #8ab4f8;
|
||||
box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.2);
|
||||
}
|
||||
|
||||
.color-picker-preview:hover {
|
||||
border-color: #8ab4f8;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user