Panel width matches clock size, vertically centered
This commit is contained in:
1 parent
741bb11e7b
commit
925d672db0
1 file changed
+8
-7
+8
-7
@@ -10,25 +10,26 @@
|
|||||||
#vanta { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; }
|
#vanta { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; }
|
||||||
#info-panel {
|
#info-panel {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 2vh;
|
top: 50%;
|
||||||
bottom: 2vh;
|
|
||||||
right: 1.5vw;
|
right: 1.5vw;
|
||||||
|
transform: translateY(-50%);
|
||||||
color: #e6dfd1;
|
color: #e6dfd1;
|
||||||
background: rgba(28, 27, 31, 0.7);
|
background: rgba(28, 27, 31, 0.7);
|
||||||
padding: 1vh 1vw;
|
padding: 1.5vh 1.5vw;
|
||||||
border-radius: 0.6vh;
|
border-radius: 0.6vh;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
font-size: clamp(11px, 1.4vh, 16px);
|
font-size: clamp(11px, 1.4vh, 16px);
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
min-width: 22vw;
|
width: min(35vh, 16vw);
|
||||||
|
max-height: 96vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: calc(100vh - 4vh);
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
#analog-clock {
|
#analog-clock {
|
||||||
width: min(35vh, 16vw);
|
width: 100%;
|
||||||
height: min(35vh, 16vw);
|
height: auto;
|
||||||
margin: 0 auto 0.6vh auto;
|
margin: 0 auto 0.6vh auto;
|
||||||
display: block;
|
display: block;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|||||||
Reference in new issue
Block a user