| -rw-r--r-- | static/input.css | 65 | ||||
| -rw-r--r-- | views/layouts/general-page.html | 62 |
2 files changed, 41 insertions, 86 deletions
diff --git a/static/input.css b/static/input.css index dc902a4..d03764b 100644 --- a/static/input.css +++ b/static/input.css @@ -239,7 +239,7 @@ a:hover, .linklike:hover { .bg-sidebar { background-image: var(--squares-and-triangles-background); background-repeat: var(--squares-and-triangles-background-repeat); - background-size: calc(var(--squares-and-triangles-background-width-coef) * 1rem) calc(var(--squares-and-triangles-background-height-coef) * 1rem); + background-size: calc(var(--squares-and-triangles-background-width-coef) * 0.8rem) calc(var(--squares-and-triangles-background-height-coef) * 0.8rem); } .logo-custom { @@ -268,10 +268,13 @@ a:hover, .linklike:hover { .theme-wheel { position: fixed; - width: 12rem; - height: 12rem; - box-shadow: 0.25rem 0.25rem 0.25rem var(--main-light-color); + width: 15vmax; + height: 15vmax; border-radius: 50%; + background: var(--background-light-color); + opacity: 0.8; + border: 1vmax outset var(--background-dark-color); + box-shadow: 0 0 5vmax var(--main-light-color); opacity: 0; visibility: hidden; transform: scale(0.5); @@ -287,56 +290,26 @@ a:hover, .linklike:hover { .theme-icon { position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; + width: 4rem; + height: 4rem; + border-radius: 50%; cursor: pointer; + display: flex; + align-items: center; + justify-content: center; transition: all 0.3s ease; - color: white; + border: 0.1rem inset var(--background-light-color); background: var(--interlocked-hexagons-background); - background-size: 100% 100%; - font-size: 1.5rem; + background-size: contain; } .theme-icon:hover { - filter: brightness(1.2); -} - -.theme-icon i { - position: absolute; - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); - z-index: 1; + transform: scale(1.2); } .theme-icon.active { - filter: brightness(1.3); -} - -.theme-icon.active::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(255, 255, 255, 0.25); - pointer-events: none; - clip-path: inherit; -} - -.theme-pin { - position: relative; - background: color-mix(in srgb, var(--main-light-color) 75%, transparent); - box-shadow: 0rem 0rem 1rem var(--main-dark-color); - border: 0.5rem solid color-mix(in srgb, var(--main-light-color) 90%, transparent); - backdrop-filter: blur(2px); - top: 35%; - left: 35%; - width: 30%; - height: 30%; - z-index: 1002; - border-radius: 50%; + transform: scale(1.2); + border: 0.3rem outset var(--main-light-color); } .custom-svg-marker { @@ -377,7 +350,7 @@ a:hover, .linklike:hover { margin-top: 0.25rem; border-radius: 0.5rem; position: absolute; - z-index: 401; + z-index: 15; } .grid-tooltip:hover .grid-tooltip-text { diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html index d874ecf..ce5698b 100644 --- a/views/layouts/general-page.html +++ b/views/layouts/general-page.html @@ -31,10 +31,6 @@ window.dispatchEvent(new Event('popstate')); return false; }; - - function convertRemToPixels(rem) { - return rem * parseFloat(getComputedStyle(document.documentElement).fontSize); - } </script> <script src="https://f003.backblazeb2.com/file/sayana-static/libs/glightbox/3.3.0/js/glightbox.min.js"></script> @@ -198,7 +194,6 @@ <div class="theme-icon" data-theme="lettuce"></div> <div class="theme-icon" data-theme="night"></div> <div class="theme-icon" data-theme="ram"></div> - <div class="theme-pin"></div> </div> </div> @@ -243,7 +238,6 @@ const themeWheel = document.getElementById('theme-wheel'); const themeButton = document.getElementById('theme-button'); const themeIcons = document.querySelectorAll('.theme-icon'); - const themeWheelRadius = convertRemToPixels(6); themeIcons.forEach(icon => { if (icon.getAttribute('data-theme') == savedTheme) { @@ -263,36 +257,23 @@ } function positionThemeIcons() { - const sliceAngle = 360 / themeIcons.length; - - themeIcons.forEach((icon, index) => { - const startAngle = index * sliceAngle; - const endAngle = (index + 1) * sliceAngle; - - const clipPath = createSliceClipPath(startAngle, endAngle, themeWheelRadius); - icon.style.clipPath = clipPath; - }); - } + const icons = themeWheel.querySelectorAll('.theme-icon'); + const iconCount = icons.length; + const vmax = calculateVmax(1); + const wheelRadius = 7.5*vmax; // Radius of the wheel + const iconRadius = 4*vmax; // Distance from center to place icons + const iconSize = 3*vmax; // Half of icon size for centering - function createSliceClipPath(startAngle, endAngle, radius) { - const centerX = radius; - const centerY = radius; + icons.forEach((icon, index) => { + const angle = (index * 360 / iconCount) - 90; + const angleRad = (angle * Math.PI) / 180; - let points = `${centerX}px ${centerY}px`; + const x = Math.cos(angleRad) * iconRadius + wheelRadius - iconSize; + const y = Math.sin(angleRad) * iconRadius + wheelRadius - iconSize; - const segments = Math.max(2, Math.ceil(Math.abs(endAngle - startAngle) / 5)); - const angleStep = (endAngle - startAngle) / segments; - - for (let i = 0; i <= segments; i++) { - const angle = ((startAngle + angleStep * i - 90) * Math.PI) / 180; - const x = centerX + Math.cos(angle) * radius; - const y = centerY + Math.sin(angle) * radius; - points += `, ${x}px ${y}px`; - } - - points += `, ${centerX}px ${centerY}px`; - - return `polygon(${points})`; + icon.style.left = x + 'px'; + icon.style.top = y + 'px'; + }); } function positionThemeWheel() { @@ -300,24 +281,25 @@ const buttonCenterX = buttonRect.left + buttonRect.width / 2; const buttonCenterY = buttonRect.top + buttonRect.height / 2; - const margin = 0; + const wheelRadius = calculateVmax(7.5); + const margin = calculateVmax(1); - let wheelX = buttonCenterX - themeWheelRadius; - let wheelY = buttonCenterY - themeWheelRadius; + let wheelX = buttonCenterX - wheelRadius; + let wheelY = buttonCenterY - wheelRadius; const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; if (wheelX < margin) { wheelX = margin; - } else if (wheelX + (themeWheelRadius * 2) > viewportWidth - margin) { - wheelX = viewportWidth - (themeWheelRadius * 2) - margin; + } else if (wheelX + (wheelRadius * 2) > viewportWidth - margin) { + wheelX = viewportWidth - (wheelRadius * 2) - margin; } if (wheelY < margin) { wheelY = margin; - } else if (wheelY + (themeWheelRadius * 2) > viewportHeight - margin) { - wheelY = viewportHeight - (themeWheelRadius * 2) - margin; + } else if (wheelY + (wheelRadius * 2) > viewportHeight - margin) { + wheelY = viewportHeight - (wheelRadius * 2) - margin; } themeWheel.style.left = wheelX + 'px'; |