188 lines
3.0 KiB
CSS
188 lines
3.0 KiB
CSS
body {
|
|
margin: 0;
|
|
background-color: #141414;
|
|
color: #d6d6d6;
|
|
font-family: "Segoe UI", system-ui, sans-serif;
|
|
}
|
|
|
|
#weightsHeader {
|
|
text-align: center;
|
|
padding: 1.5rem 1rem 0.5rem;
|
|
}
|
|
|
|
#weightsHeader h1 {
|
|
margin: 0 0 0.25rem;
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
#weightsStatus {
|
|
color: #9a9a9a;
|
|
margin: 0.25rem 0 1rem;
|
|
}
|
|
|
|
#weightsControls {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1.25rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.heatLegend {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.8rem;
|
|
color: #9a9a9a;
|
|
}
|
|
|
|
.legendBar {
|
|
width: 120px;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
background: linear-gradient(to right, rgba(232, 74, 74, 1), #2a2a2a, rgba(74, 134, 232, 1));
|
|
}
|
|
|
|
#refreshWeights {
|
|
background-color: #8cd5ed;
|
|
color: #262626;
|
|
border: 0;
|
|
border-radius: 30px;
|
|
padding: 0.5rem 1.1rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#refreshWeights:hover {
|
|
background-color: #a5e0f2;
|
|
}
|
|
|
|
#backToWatch {
|
|
display: inline-block;
|
|
margin-top: 0.5rem;
|
|
color: #8cd5ed;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.weightsSection {
|
|
margin: 0 auto;
|
|
max-width: 1200px;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.weightsSection h2 {
|
|
text-align: center;
|
|
font-size: 1.2rem;
|
|
margin: 1rem 0 0.25rem;
|
|
}
|
|
|
|
.sectionHint {
|
|
text-align: center;
|
|
color: #9a9a9a;
|
|
font-size: 0.8rem;
|
|
margin: 0 0 0.75rem;
|
|
}
|
|
|
|
.weightsGrid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 1.25rem;
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.featurePanel {
|
|
max-width: 520px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.featureRow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.featureLabel {
|
|
flex: 0 0 6.5rem;
|
|
font-size: 0.8rem;
|
|
color: #c8c8c8;
|
|
text-align: right;
|
|
}
|
|
|
|
.featureTrack {
|
|
flex: 1 1 auto;
|
|
height: 14px;
|
|
background-color: #232323;
|
|
border-radius: 7px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.featureBar {
|
|
height: 100%;
|
|
border-radius: 7px;
|
|
min-width: 2px;
|
|
}
|
|
|
|
.featureValue {
|
|
flex: 0 0 3rem;
|
|
font-size: 0.8rem;
|
|
color: #e8e8e8;
|
|
text-align: left;
|
|
}
|
|
|
|
.weightBoard {
|
|
background-color: #1c1c1c;
|
|
border: 1px solid #2e2e2e;
|
|
border-radius: 10px;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.weightBoardHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.weightBoardIcon {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
|
|
.weightRange {
|
|
margin-left: auto;
|
|
font-weight: 400;
|
|
font-size: 0.75rem;
|
|
color: #888;
|
|
}
|
|
|
|
.miniHeat {
|
|
display: grid;
|
|
grid-template-columns: 1.1rem repeat(8, 34px);
|
|
}
|
|
|
|
.heatSquare {
|
|
width: 34px;
|
|
height: 34px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #2a2a2a;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.62rem;
|
|
color: #f0f0f0;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.heatLabel {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2px 0;
|
|
font-size: 0.6rem;
|
|
color: #777;
|
|
}
|