Mediawiki:common.css
| Line 111: | Line 111: | ||
.modern-button__subtext { | .modern-button__subtext { | ||
font-size: 0.8em; | font-size: 0.8em; | ||
} | |||
.link-card { | |||
display: inline-block; | |||
position: relative; | |||
border-radius: 0.3em; | |||
transition: all 0.15s ease; | |||
overflow: hidden; | |||
min-width: 110px; | |||
text-align: center; | |||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35); | |||
border: 1px outset rgb(0 0 0 / 30%); | |||
} | |||
.link-card__image { | |||
padding: 6px; | |||
} | |||
.link-card__name { | |||
background: #00000040; | |||
padding: 2px 4px; | |||
font-size: 0.8em; | |||
width: 100%; | |||
box-sizing: border-box; | |||
} | |||
@media (max-width: 800px) { | |||
.link-card { | |||
display: flex; | |||
width: 100%; | |||
text-align: left; | |||
} | |||
.link-card__name { | |||
background: #00000020; | |||
padding: 4px 6px; | |||
font-size: 0.9em; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.link-card__image { | |||
padding: 4px; | |||
} | |||
} | |||
.serverStatusFrame { | |||
display: flex; | |||
flex-direction: column; | |||
color: lightgrey; | |||
} | |||
.serverTitle { | |||
font-size: 18px; | |||
color: lightgrey; | |||
text-align: center; | |||
margin: 0; | |||
padding: 4px 8px; | |||
border-radius: 0.3em 0.3em 0 0; | |||
border-bottom: 3px solid #00000045 !important; | |||
} | |||
.serverInfo { | |||
padding: 6px; | |||
border-radius: 0 0 0.3em 0.3em; | |||
box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.4); | |||
} | |||
serverInfo > div { | |||
margin-bottom: 3px; | |||
} | |||
.serverInfo div[class*="Set"] { | |||
font-size: 14px; | |||
} | |||
.progressBarContainer { | |||
width: 100%; | |||
background-color: rgba(150, 150, 150, 0.5); | |||
border-radius: 5px; | |||
overflow: hidden; | |||
margin-top: 3px; | |||
} | |||
.progressBar { | |||
background-color: rgba(100, 200, 100, 0.8); | |||
height: 15px; | |||
transition: width 0.3s; | |||
} | |||
.percentageDisplay { | |||
text-align: right; | |||
font-size: 12px; | |||
color: lightgrey; | |||
} | |||
.copy-icon { | |||
cursor: pointer; | |||
} | |||
.serverConnectContainer { | |||
display: flex; | |||
align-items: flex-start; | |||
margin-top: 3px; | |||
min-height: calc(3em + 5px); | |||
} | |||
.serverConnectSet { | |||
margin-right: 1px; | |||
flex-grow: 1; | |||
overflow-wrap: break-word; | |||
} | } | ||