188 lines
2.9 KiB
CSS
188 lines
2.9 KiB
CSS
html, body
|
|
{
|
|
margin:0;
|
|
padding:0;
|
|
overflow:hidden;
|
|
background:#0d1f38;
|
|
}
|
|
|
|
#die,#startgame,#pause
|
|
{
|
|
cursor:default;
|
|
position:absolute;
|
|
width:420px;
|
|
min-height:260px;
|
|
padding:14px 0 20px;
|
|
background:rgba(24,71,153,0.82);
|
|
text-align:center;
|
|
font-family:'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
|
|
font-size:34px;
|
|
color:#eef;
|
|
box-shadow:0 16px 40px rgba(6,20,47,0.35);
|
|
border:1px solid rgba(255,255,255,0.65);
|
|
border-radius:18px;
|
|
backdrop-filter:blur(8px);
|
|
}
|
|
|
|
#instructions,#about,#score,#ranking,#settingsbutton,#fullscreenbutton,#scorereset
|
|
{
|
|
font-size:30px;
|
|
margin-top:12px;
|
|
}
|
|
|
|
.title
|
|
{
|
|
border-bottom:2px solid #430fc8;
|
|
position:absolute;
|
|
height:auto;
|
|
font-family:'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
|
|
font-size:50px;
|
|
font-weight:bold;
|
|
color:#430fc8;
|
|
}
|
|
|
|
.moreinfo
|
|
{
|
|
position:absolute;
|
|
font-family:'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
|
|
font-size:18px;
|
|
min-height:220px;
|
|
background:rgba(25,84,192,0.78);
|
|
padding:12px 16px;
|
|
text-align:left;
|
|
color:#eef;
|
|
box-shadow:0 16px 40px rgba(6,20,47,0.25);
|
|
border:1px solid rgba(255,255,255,0.65);
|
|
border-radius:16px;
|
|
display:none;
|
|
}
|
|
|
|
.info
|
|
{
|
|
position:absolute;
|
|
text-align:center;
|
|
font-family:'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
|
|
font-size:18px;
|
|
width:200px;
|
|
height:100px;
|
|
color:#3369cd;
|
|
}
|
|
|
|
.button
|
|
{
|
|
cursor:pointer;
|
|
width:80%;
|
|
margin:11px auto 0;
|
|
padding:8px 12px;
|
|
background:rgba(34,34,119,0.76);
|
|
border:1px solid rgba(255,255,255,0.25);
|
|
border-radius:12px;
|
|
transition:background 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.button:hover
|
|
{
|
|
background:rgba(53,53,160,0.88);
|
|
transform:translateY(-1px);
|
|
}
|
|
|
|
.right2
|
|
{
|
|
margin-top:5px;
|
|
font-size:22px;
|
|
margin-left:20px;
|
|
}
|
|
|
|
#settingspanel
|
|
{
|
|
position:absolute;
|
|
width:300px;
|
|
padding:16px;
|
|
background:rgba(12,34,70,0.88);
|
|
color:#eef;
|
|
border:1px solid rgba(255,255,255,0.65);
|
|
border-radius:16px;
|
|
box-shadow:0 18px 48px rgba(5,13,33,0.35);
|
|
font-family:'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
|
|
display:none;
|
|
}
|
|
|
|
.settings-title
|
|
{
|
|
font-size:28px;
|
|
margin-bottom:10px;
|
|
text-align:center;
|
|
}
|
|
|
|
.settings-row
|
|
{
|
|
margin-top:12px;
|
|
}
|
|
|
|
.settings-label
|
|
{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
font-size:16px;
|
|
margin-bottom:6px;
|
|
}
|
|
|
|
.settings-label span:last-child
|
|
{
|
|
color:#b9d8ff;
|
|
font-size:14px;
|
|
}
|
|
|
|
.settings-range
|
|
{
|
|
width:100%;
|
|
}
|
|
|
|
.settings-toggle
|
|
{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
font-size:16px;
|
|
}
|
|
|
|
.settings-actions
|
|
{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:8px;
|
|
margin-top:14px;
|
|
}
|
|
|
|
.settings-button
|
|
{
|
|
cursor:pointer;
|
|
border:1px solid rgba(255,255,255,0.25);
|
|
border-radius:10px;
|
|
padding:8px 10px;
|
|
background:rgba(53,93,165,0.62);
|
|
text-align:center;
|
|
font-size:15px;
|
|
}
|
|
|
|
.settings-button:hover
|
|
{
|
|
background:rgba(75,118,196,0.75);
|
|
}
|
|
|
|
.settings-note
|
|
{
|
|
margin-top:12px;
|
|
font-size:13px;
|
|
line-height:1.35;
|
|
color:#c5dbff;
|
|
}
|
|
|
|
#pausemessage
|
|
{
|
|
margin-top:10px;
|
|
font-size:16px;
|
|
color:#d8e8ff;
|
|
}
|