mobile support
This commit is contained in:
@@ -251,13 +251,25 @@
|
||||
.settings-btn:hover { color: #ccc; border-color: #555; background: rgba(255,255,255,0.03); }
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.draw-layout { flex-direction: column; padding: 1rem; padding-top: 3rem; }
|
||||
.draw-settings { width: 100%; max-height: 200px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.8rem; }
|
||||
.draw-settings .settings-title { width: 100%; }
|
||||
#wheelCanvas { width: 80px; height: 80px; }
|
||||
.color-preview { width: 40px; height: 40px; }
|
||||
.slider-group { flex: 1; min-width: 80px; }
|
||||
.brush-row { width: auto; }
|
||||
.draw-layout { flex-direction: column; padding: 0.75rem; padding-top: 3rem; gap: 0.5rem; }
|
||||
.draw-settings { width: 100%; max-height: 170px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.6rem; }
|
||||
.draw-settings .settings-title { width: 100%; font-size: 0.55rem; }
|
||||
#wheelCanvas { width: 70px; height: 70px; }
|
||||
.color-preview { width: 35px; height: 35px; }
|
||||
.slider-group { flex: 1; min-width: 70px; }
|
||||
.slider-group label { font-size: 0.5rem; }
|
||||
.brush-btn { font-size: 0.5rem; padding: 0.3rem 0.5rem; }
|
||||
.settings-btn { font-size: 0.5rem; padding: 0.35rem 0; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.draw-layout { padding: 0.4rem; padding-top: 2.6rem; gap: 0.4rem; }
|
||||
.draw-settings { max-height: 130px; padding: 0.4rem; gap: 0.3rem; }
|
||||
#wheelCanvas { width: 55px; height: 55px; }
|
||||
.color-preview { width: 28px; height: 28px; }
|
||||
.slider-group { min-width: 55px; }
|
||||
.slider-group input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; }
|
||||
.slider-group input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; }
|
||||
.recent-swatch { width: 16px; height: 16px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
Reference in New Issue
Block a user