mirror of
https://git.srhtnin.garden/sarah/srhtnin.github.io.git
synced 2026-10-13 18:38:11 +02:00
3127 lines
58 KiB
CSS
3127 lines
58 KiB
CSS
@font-face {
|
|
font-family: "FSEX302";
|
|
src: url("../Assets/FSEX302.ttf") format("truetype");
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
}
|
|
|
|
:root, :root[data-palette="CatppuccinMocha"] {
|
|
--Rosewater: #f5e0dc;
|
|
--Flamingo: #f2cdcd;
|
|
--Pink: #f5c2e7;
|
|
--Mauve: #cba6f7;
|
|
--Red: #f38ba8;
|
|
--Maroon: #eba0ac;
|
|
--Peach: #fab387;
|
|
--Yellow: #f9e2af;
|
|
--Green: #a6e3a1;
|
|
--Teal: #94e2d5;
|
|
--Sky: #89dceb;
|
|
--Sapphire: #74c7ec;
|
|
--Blue: #89b4fa;
|
|
--Lavender: #b4befe;
|
|
--Text: #cdd6f4;
|
|
--Subtext1: #bac2de;
|
|
--Subtext0: #a6adc8;
|
|
--Overlay2: #9399b2;
|
|
--Overlay1: #7f849c;
|
|
--Overlay0: #6c7086;
|
|
--Surface2: #585b70;
|
|
--Surface1: #45475a;
|
|
--Surface0: #313244;
|
|
--Base: #1e1e2e;
|
|
--Mantle: #181825;
|
|
--Crust: #11111b;
|
|
}
|
|
|
|
html {
|
|
font-family: "FSEX302";
|
|
color: var(--Text);
|
|
background-image: url("../Assets/Img/Tile.png");
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 2rem;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 800px) auto;
|
|
justify-content: center;
|
|
align-items: start;
|
|
gap: 1rem;
|
|
min-height: 100vh;
|
|
font-family: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.MainContainer {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 0;
|
|
padding: 2rem;
|
|
color: var(--Text);
|
|
background-color: var(--Base);
|
|
border: 4px solid var(--Mauve);
|
|
}
|
|
|
|
.Panel {
|
|
background-color: var(--Mantle);
|
|
border: 4px solid var(--Mauve);
|
|
}
|
|
|
|
.PanelHeader {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
align-items: baseline;
|
|
margin: 0;
|
|
padding: 0.75rem 1rem;
|
|
background-color: var(--Surface0);
|
|
border-bottom: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.PanelHeaderInset {
|
|
margin: -0.75rem -0.75rem 0.75rem;
|
|
}
|
|
|
|
.PanelHeader h2, .PanelHeader h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.StatusPanel {
|
|
margin-bottom: 1.5rem;
|
|
padding: 0.75rem 1rem;
|
|
background-color: var(--Mantle);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.GardenInfoPanel {
|
|
padding: 0;
|
|
}
|
|
|
|
.GardenInfoRow {
|
|
display: grid;
|
|
grid-template-columns: repeat( 2, minmax(0, 1fr) );
|
|
}
|
|
|
|
.GardenInfoRow + .GardenInfoRow {
|
|
border-top: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.GardenInfoSection {
|
|
min-width: 0;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.GardenInfoSection + .GardenInfoSection {
|
|
border-left: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.GardenInfoReservedSection {
|
|
min-height: 100%;
|
|
}
|
|
|
|
.GardenOverviewDetails {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.GardenInfoPanel .GardenOverviewDetails {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.GardenStatusLine + .GardenStatusLine {
|
|
margin-top: 0.1rem;
|
|
}
|
|
|
|
.PageMessage {
|
|
margin-top: 1rem;
|
|
margin-bottom: 0;
|
|
padding: 0.75rem;
|
|
color: var(--Subtext1);
|
|
background-color: var(--Mantle);
|
|
border-left: 4px solid var(--Blue);
|
|
}
|
|
|
|
.PlantTile {
|
|
overflow: hidden;
|
|
background-color: var(--Surface0);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.PlantSprite {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.ActionButton {
|
|
--ActionAccent: var(--Sky);
|
|
width: 100%;
|
|
padding: 0.6rem;
|
|
cursor: pointer;
|
|
color: var(--Text);
|
|
background-color: var(--Surface0);
|
|
border: 3px solid var(--Surface2);
|
|
border-radius: 0;
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
appearance: none;
|
|
}
|
|
|
|
.ActionButton:hover:not(:disabled) {
|
|
color: var(--ActionAccent);
|
|
background-color: var(--Surface1);
|
|
border-color: var(--ActionAccent);
|
|
transform: translate(1px, 1px);
|
|
box-shadow: 2px 2px 0 var(--Crust);
|
|
}
|
|
|
|
.ActionButton:active:not(:disabled) {
|
|
transform: translate(2px, 2px);
|
|
box-shadow: 1px 1px 0 var(--Crust);
|
|
}
|
|
|
|
.ActionButton:focus-visible {
|
|
outline: 3px solid var(--Yellow);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
color: var(--Mauve);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 3px solid var(--Mauve);
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem;
|
|
color: var(--Blue);
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
color: var(--Green);
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.25rem;
|
|
color: var(--Peach);
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1rem;
|
|
color: var(--Yellow);
|
|
}
|
|
|
|
h6 {
|
|
font-size: 0.9rem;
|
|
color: var(--Rosewater);
|
|
}
|
|
|
|
p {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
color: var(--Text);
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
a {
|
|
color: var(--Blue);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--Sky);
|
|
}
|
|
|
|
strong {
|
|
color: var(--Peach);
|
|
}
|
|
|
|
em {
|
|
color: var(--Lavender);
|
|
}
|
|
|
|
ul, ol {
|
|
color: var(--Text);
|
|
}
|
|
|
|
ul > li::marker {
|
|
content: "▪ ";
|
|
}
|
|
|
|
ul ul > li::marker {
|
|
content: "▫ ";
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
blockquote {
|
|
margin-left: 0;
|
|
padding: 1rem;
|
|
color: var(--Subtext1);
|
|
background-color: var(--Mantle);
|
|
border-left: 4px solid var(--Mauve);
|
|
}
|
|
|
|
code {
|
|
padding: 0.2rem 0.4rem;
|
|
color: var(--Green);
|
|
background-color: var(--Mantle);
|
|
}
|
|
|
|
pre {
|
|
padding: 1rem;
|
|
overflow-x: auto;
|
|
color: var(--Text);
|
|
background-color: var(--Crust);
|
|
border: 2px solid var(--Surface2);
|
|
}
|
|
|
|
pre code {
|
|
padding: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
border-top: 2px solid var(--Surface2);
|
|
}
|
|
|
|
input, button, textarea, select {
|
|
font-family: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
.Navbar {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
position: sticky;
|
|
top: 2rem;
|
|
align-self: start;
|
|
background-color: var(--Base);
|
|
border: 4px solid var(--Mauve);
|
|
}
|
|
|
|
.NavbarLink[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.NavbarLink {
|
|
display: flex;
|
|
width: 12rem;
|
|
height: 4rem;
|
|
padding: 0;
|
|
align-items: center;
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
background-color: var(--Mantle);
|
|
border: 3px solid var(--Surface2);
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.NavbarLink:hover {
|
|
background-color: var(--Surface0);
|
|
border-color: var(--Sky);
|
|
transform: translate(1px, 1px);
|
|
box-shadow: 2px 2px 0 var(--Crust);
|
|
}
|
|
|
|
.NavbarLink:focus-visible {
|
|
outline: 3px solid var(--Yellow);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.NavbarLink[aria-current="page"] {
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Mauve);
|
|
}
|
|
|
|
.NavbarLink[aria-current="page"]:hover {
|
|
background-color: var(--Surface2);
|
|
border-color: var(--Lavender);
|
|
}
|
|
|
|
.NavbarIcon {
|
|
display: block;
|
|
flex: 0 0 4rem;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
object-fit: fill;
|
|
image-rendering: auto;
|
|
}
|
|
|
|
.NavbarText {
|
|
min-width: 0;
|
|
padding: 0 0.8rem;
|
|
overflow: hidden;
|
|
color: var(--Text);
|
|
font-size: 1.25rem;
|
|
line-height: 1;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.GardenSelectorPanel {
|
|
display: grid;
|
|
grid-template-columns: 3rem minmax(0, 1fr) 3rem;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
padding: 0.5rem;
|
|
background-color: var(--Mantle);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.GardenSelectorButton {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
border-color: var(--GardenSelectorBorderColour, var(--Surface2));
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.GardenSelectorButton:hover:not(:disabled) {
|
|
border-color: var(--GardenSelectorBorderColour, var(--Surface2));
|
|
}
|
|
|
|
.GardenSelectorButton:disabled {
|
|
cursor: default;
|
|
border-color: var(--Surface2);
|
|
}
|
|
|
|
.GardenNameInput {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 0.6rem 0.75rem;
|
|
color: var(--Text);
|
|
background-color: var(--Surface0);
|
|
border: 3px solid var(--GardenSelectorBorderColour, var(--Surface2));
|
|
border-radius: 0;
|
|
font-size: 1.5rem;
|
|
text-align: center;
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.GardenNameInput:hover {
|
|
border-color: var(--GardenSelectorBorderColour, var(--Surface2));
|
|
}
|
|
|
|
.GardenNameInput:focus {
|
|
outline: 3px solid var(--Yellow);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.GardenInfoTopRow {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.GardenInfoReservedSection {
|
|
display: none;
|
|
}
|
|
|
|
.GardenInfoDetailRow {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.GardenInfoDetailRow .GardenInfoSection + .GardenInfoSection {
|
|
border-top: 3px solid var(--Surface2);
|
|
border-left: 0;
|
|
}
|
|
|
|
.GardenInfoDetailRow .GardenInfoSectionEmpty {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.GardenQuickBuyPanel {
|
|
margin-bottom: 1rem;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.GardenQuickBuyHeader {
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.QuickBuyAmountList {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.QuickBuyAmountButton {
|
|
min-width: 3.25rem;
|
|
padding: 0.4rem 0.55rem;
|
|
cursor: pointer;
|
|
color: var(--Text);
|
|
background-color: var(--Surface0);
|
|
border: 3px solid var(--Surface2);
|
|
border-radius: 0;
|
|
box-shadow: 2px 2px 0 var(--Crust);
|
|
appearance: none;
|
|
}
|
|
|
|
.QuickBuyAmountButton:hover:not(:disabled) {
|
|
color: var(--Green);
|
|
border-color: var(--Green);
|
|
}
|
|
|
|
.QuickBuyAmountButton[aria-current="true"] {
|
|
color: var(--Green);
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Green);
|
|
}
|
|
|
|
.QuickBuyAmountButton:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.QuickBuyAmountButton:focus-visible,
|
|
.QuickBuyPlantButton:focus-visible {
|
|
outline: 3px solid var(--Yellow);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.QuickBuyPlantList {
|
|
display: flex;
|
|
gap: 0.65rem;
|
|
padding-bottom: 0.45rem;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.QuickBuyPlantButton {
|
|
display: flex;
|
|
flex: 0 0 7rem;
|
|
width: 7rem;
|
|
padding: 0;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
color: var(--Text);
|
|
border-color: var(--Surface2);
|
|
border-radius: 0;
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
appearance: none;
|
|
}
|
|
|
|
.QuickBuyPlantButton:hover:not(:disabled) {
|
|
border-color: var(--Green);
|
|
transform: translate(1px, 1px);
|
|
box-shadow: 2px 2px 0 var(--Crust);
|
|
}
|
|
|
|
.QuickBuyPlantButton:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.QuickBuyPlantName {
|
|
display: flex;
|
|
width: 100%;
|
|
min-width: 0;
|
|
min-height: 1.7rem;
|
|
padding: 0.25rem 0.35rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
color: var(--Subtext1);
|
|
background-color: var(--Mantle);
|
|
border-bottom: 2px solid var(--Surface2);
|
|
font-size: 0.75rem;
|
|
line-height: 1;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.QuickBuyPlantVisual {
|
|
display: flex;
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
background-color: var(--Surface0);
|
|
}
|
|
|
|
.QuickBuyPlantMissing {
|
|
padding: 0.35rem;
|
|
color: var(--Overlay1);
|
|
font-size: 0.75rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.QuickBuyEmpty {
|
|
flex: 0 0 100%;
|
|
margin: 0;
|
|
padding: 0.75rem;
|
|
color: var(--Subtext1);
|
|
background-color: var(--Mantle);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.GardenToolsPanel,
|
|
.GardenInventoryPanel,
|
|
.GardenPlotsPanel {
|
|
margin-bottom: 1rem;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.GardenToolsPanel .ToolList,
|
|
.GardenInventoryPanel .SeedList {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.GardenToolsPanel .ToolButton,
|
|
.GardenInventoryPanel .SeedButton {
|
|
width: auto;
|
|
}
|
|
|
|
.GardenPlotsPanel {
|
|
border-color: var(--GardenBorderColour, var(--Lavender));
|
|
}
|
|
|
|
.GardenGridViewport {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.GardenGrid {
|
|
--GardenWidth: 3;
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: repeat( var(--GardenWidth), minmax(0, 1fr) );
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.GardenPlot {
|
|
--GrowthProgress: 0%;
|
|
--GrowthColour: var(--Green);
|
|
--PlotBorderColour: var(--Surface2);
|
|
--TileBackground: var(--Surface0);
|
|
position: relative;
|
|
display: grid;
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
border-color: transparent;
|
|
background: linear-gradient( var(--TileBackground), var(--TileBackground) ) padding-box, conic-gradient( from -90deg, var(--GrowthColour) 0 var(--GrowthProgress), var(--PlotBorderColour) var(--GrowthProgress) 100% ) border-box;
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.GardenPlotWithName,
|
|
.GardenPlotWithFooter {
|
|
aspect-ratio: auto;
|
|
}
|
|
|
|
.GardenPlotMain {
|
|
display: grid;
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: 100%;
|
|
padding: 0;
|
|
cursor: inherit;
|
|
color: inherit;
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: 0;
|
|
font: inherit;
|
|
appearance: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
.GardenPlotMain:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
.GardenPlotVisual {
|
|
display: flex;
|
|
width: 100%;
|
|
min-width: 0;
|
|
aspect-ratio: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
background-color: var(--TileBackground);
|
|
}
|
|
|
|
.GardenPlotName,
|
|
.GardenPlotTimer,
|
|
.GardenPlotRotationButton {
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 1.5rem;
|
|
padding: 0.2rem 0.3rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
color: var(--Subtext1);
|
|
background-color: var(--Mantle);
|
|
font-size: 0.75rem;
|
|
line-height: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.GardenPlotName,
|
|
.GardenPlotTimer {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.GardenPlotName {
|
|
border-bottom: 2px solid var(--Surface2);
|
|
}
|
|
|
|
.GardenPlotFooter {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
min-width: 0;
|
|
background-color: var(--Mantle);
|
|
border-top: 2px solid var(--Surface2);
|
|
}
|
|
|
|
.GardenPlotFooterSplit {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.GardenPlotRotationButton {
|
|
padding-inline: 0.45rem;
|
|
cursor: pointer;
|
|
border: 0;
|
|
border-radius: 0;
|
|
appearance: none;
|
|
}
|
|
|
|
.GardenPlotFooterSplit .GardenPlotRotationButton {
|
|
border-left: 2px solid var(--Surface2);
|
|
}
|
|
|
|
.GardenPlotRotationButton:hover {
|
|
color: var(--Sky);
|
|
background-color: var(--Surface0);
|
|
}
|
|
|
|
.GardenPlotRotationButton:focus-visible,
|
|
.GardenPlotMain:focus-visible {
|
|
outline: 3px solid var(--Yellow);
|
|
outline-offset: -3px;
|
|
}
|
|
|
|
.GardenPlotMature .GardenPlotTimer {
|
|
color: var(--Green);
|
|
}
|
|
|
|
.GardenPlot:hover {
|
|
--TileBackground: var(--Surface1);
|
|
--PlotBorderColour: var(--Sky);
|
|
transform: translate(1px, 1px);
|
|
box-shadow: 2px 2px 0 var(--Crust);
|
|
}
|
|
|
|
.GardenPlotEmpty {
|
|
--TileBackground: var(--Mantle);
|
|
}
|
|
|
|
.GardenPlotEmpty:hover {
|
|
--TileBackground: var(--Surface0);
|
|
}
|
|
|
|
.GardenPlotMature:hover {
|
|
--GrowthColour: var(--Yellow);
|
|
}
|
|
|
|
.GardenPlotFunctionalCooldown,
|
|
.GardenPlotFunctionalCooldown:hover {
|
|
--GrowthColour: var(--Blue);
|
|
}
|
|
|
|
.GardenPlotFunctionalCooldown .GardenPlotTimer {
|
|
color: var(--Blue);
|
|
}
|
|
|
|
.SeedList {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.SeedButton[aria-current="true"] {
|
|
--ActionAccent: var(--Green);
|
|
color: var(--Green);
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Green);
|
|
}
|
|
|
|
.GardenToolHeading {
|
|
margin-top: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--Peach);
|
|
}
|
|
|
|
.ToolList {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.ToolButtonTrowel[aria-current="true"] {
|
|
--ActionAccent: var(--Green);
|
|
color: var(--Green);
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Green);
|
|
}
|
|
|
|
.ToolButtonMagicTrowel[aria-current="true"] {
|
|
--ActionAccent: var(--Mauve);
|
|
color: var(--Mauve);
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Mauve);
|
|
}
|
|
|
|
.ToolButtonShovel[aria-current="true"] {
|
|
--ActionAccent: var(--Red);
|
|
color: var(--Red);
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Red);
|
|
}
|
|
|
|
.ToolButtonFertilizer[aria-current="true"] {
|
|
--ActionAccent: var(--Yellow);
|
|
color: var(--Yellow);
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Yellow);
|
|
}
|
|
|
|
.ToolButtonFutureSight[aria-current="true"] {
|
|
--ActionAccent: var(--Lavender);
|
|
color: var(--Lavender);
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Lavender);
|
|
}
|
|
|
|
.ToolButton:disabled {
|
|
cursor: not-allowed;
|
|
color: var(--Overlay1);
|
|
background-color: var(--Mantle);
|
|
border-color: var(--Surface1);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.GardenPlotMagicPlant:hover {
|
|
--PlotBorderColour: var(--Mauve);
|
|
}
|
|
|
|
.GardenPlotRemove:hover {
|
|
--GrowthColour: var(--Red);
|
|
--PlotBorderColour: var(--Red);
|
|
}
|
|
|
|
.GardenPlotFertilize:hover {
|
|
--GrowthColour: var(--Yellow);
|
|
--PlotBorderColour: var(--Yellow);
|
|
}
|
|
|
|
.GardenPlotsFutureSight {
|
|
border-color: var(--Lavender);
|
|
}
|
|
|
|
.GardenPlotFutureSight {
|
|
cursor: default;
|
|
}
|
|
|
|
.GardenPlotFutureSight:hover {
|
|
transform: none;
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.GardenPlotFutureSightChanged {
|
|
--GrowthColour: var(--Lavender);
|
|
--PlotBorderColour: var(--Lavender);
|
|
outline: 3px solid var(--Lavender);
|
|
outline-offset: -3px;
|
|
}
|
|
|
|
.GardenUser, .Leaderboard {
|
|
margin-top: 1.5rem;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.GardenUser input, .GardenUser button {
|
|
padding: 0.6rem;
|
|
font-size: 1rem;
|
|
color: var(--Text);
|
|
background-color: var(--Surface0);
|
|
border: 3px solid var(--Surface2);
|
|
border-radius: 0;
|
|
appearance: none;
|
|
}
|
|
|
|
.GardenUser input {
|
|
min-width: 12rem;
|
|
outline: none;
|
|
}
|
|
|
|
.GardenUser input:hover {
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Overlay2);
|
|
}
|
|
|
|
.GardenUser input:focus {
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Sky);
|
|
}
|
|
|
|
.GardenUser input::placeholder {
|
|
color: var(--Overlay1);
|
|
}
|
|
|
|
.GardenUser button {
|
|
cursor: pointer;
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.GardenUser button:hover {
|
|
color: var(--Sky);
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Sky);
|
|
transform: translate( 1px, 1px );
|
|
box-shadow: 2px 2px 0 var(--Crust);
|
|
}
|
|
|
|
.GardenUser button:active {
|
|
color: var(--Green);
|
|
background-color: var(--Surface2);
|
|
border-color: var(--Green);
|
|
transform: translate( 2px, 2px );
|
|
box-shadow: 1px 1px 0 var(--Crust);
|
|
}
|
|
|
|
.GardenUser button:focus-visible {
|
|
outline: 3px solid var(--Yellow);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
#UsernameForm {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
}
|
|
|
|
#UsernameForm[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
#UsernameMessage {
|
|
flex-basis: 100%;
|
|
margin: 0;
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.LeaderboardTableContainer {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.LeaderboardTable {
|
|
width: 97%;
|
|
margin: 0 auto;
|
|
border-collapse: collapse;
|
|
color: var(--Text);
|
|
background-color: var(--Base);
|
|
font-size: 1.2rem;
|
|
border: 3px solid var(--Surface2);
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.LeaderboardTable th {
|
|
padding: 0.75rem;
|
|
color: var(--Blue);
|
|
background-color: var(--Surface0);
|
|
text-align: left;
|
|
border-bottom: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.LeaderboardTable td {
|
|
padding: 0.7rem 0.75rem;
|
|
border-bottom: 2px solid var(--Surface0);
|
|
}
|
|
|
|
.LeaderboardTable tbody tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.LeaderboardRow:hover td {
|
|
background-color: var(--Surface0);
|
|
}
|
|
|
|
.LeaderboardRankColumn, .LeaderboardRank {
|
|
width: 4rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.LeaderboardUsername {
|
|
width: auto;
|
|
}
|
|
|
|
.LeaderboardDewColumn, .LeaderboardDew {
|
|
width: auto;
|
|
}
|
|
|
|
.LeaderboardDew {
|
|
color: var(--Green);
|
|
}
|
|
|
|
.LeaderboardRank1 .LeaderboardRank {
|
|
color: var(--Yellow);
|
|
}
|
|
|
|
.LeaderboardRank2 .LeaderboardRank {
|
|
color: var(--Text);
|
|
}
|
|
|
|
.LeaderboardRank3 .LeaderboardRank {
|
|
color: var(--Peach);
|
|
}
|
|
|
|
.LeaderboardSelf td:first-child {
|
|
border-left: 4px solid var(--Mauve);
|
|
}
|
|
|
|
.LeaderboardEmpty {
|
|
padding: 1rem;
|
|
color: var(--Subtext1);
|
|
text-align: center;
|
|
}
|
|
|
|
.LeaderboardTable th:last-child, .LeaderboardTable td:last-child {
|
|
text-align: right;
|
|
}
|
|
|
|
.ProfileSection, .SocialSection {
|
|
margin-top: 1.5rem;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.GardenUser h3:not(.PanelHeader), .ProfileSection h3:not(.PanelHeader) {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.FormRow, .ProfileFormRow, .ProfileButtonRow {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.ProfileButtonRow {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.InteractivePanel label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--Blue);
|
|
}
|
|
|
|
.InteractivePanel input, .InteractivePanel textarea, .InteractivePanel select, .InteractivePanel button {
|
|
font-size: 1rem;
|
|
color: var(--Text);
|
|
background-color: var(--Surface0);
|
|
border: 3px solid var(--Surface2);
|
|
border-radius: 0;
|
|
appearance: none;
|
|
}
|
|
|
|
.InteractivePanel input, .InteractivePanel textarea, .InteractivePanel select {
|
|
padding: 0.6rem;
|
|
outline: none;
|
|
}
|
|
|
|
.InteractivePanel input {
|
|
min-width: 12rem;
|
|
}
|
|
|
|
.InteractivePanel select {
|
|
appearance: auto;
|
|
}
|
|
|
|
.InteractivePanel textarea {
|
|
width: 100%;
|
|
max-width: 24rem;
|
|
resize: vertical;
|
|
}
|
|
|
|
.InteractivePanel input::placeholder, .InteractivePanel textarea::placeholder {
|
|
color: var(--Overlay1);
|
|
}
|
|
|
|
.InteractivePanel input:hover, .InteractivePanel textarea:hover, .InteractivePanel select:hover {
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Overlay2);
|
|
}
|
|
|
|
.InteractivePanel input:focus, .InteractivePanel textarea:focus, .InteractivePanel select:focus {
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Sky);
|
|
}
|
|
|
|
.InteractivePanel button {
|
|
padding: 0.6rem 0.8rem;
|
|
cursor: pointer;
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.InteractivePanel button:hover:not(:disabled) {
|
|
color: var(--Sky);
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Sky);
|
|
transform: translate(1px, 1px);
|
|
box-shadow: 2px 2px 0 var(--Crust);
|
|
}
|
|
|
|
.InteractivePanel button:disabled {
|
|
cursor: not-allowed;
|
|
color: var(--Overlay1);
|
|
background-color: var(--Surface0);
|
|
border-color: var(--Surface1);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.InteractivePanel button:active:not(:disabled) {
|
|
color: var(--Green);
|
|
background-color: var(--Surface2);
|
|
border-color: var(--Green);
|
|
transform: translate(2px, 2px);
|
|
box-shadow: 1px 1px 0 var(--Crust);
|
|
}
|
|
|
|
.InteractivePanel button:focus-visible, .InteractivePanel summary:focus-visible {
|
|
outline: 3px solid var(--Yellow);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.ProfileMessage {
|
|
margin-top: 0.75rem;
|
|
margin-bottom: 0;
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.ProfileDangerText {
|
|
color: var(--Red);
|
|
}
|
|
|
|
.ProfileSection .ProfileDangerButton {
|
|
color: var(--Red);
|
|
border-color: var(--Red);
|
|
}
|
|
|
|
.ProfileSection .ProfileDangerButton:hover {
|
|
color: var(--Red);
|
|
border-color: var(--Red);
|
|
}
|
|
|
|
.ProfileStatistics {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.ProfileStatistic {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 0.75rem;
|
|
background-color: var(--Base);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.ProfileStatisticName {
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.AccountKeySpoiler {
|
|
margin-top: 1rem;
|
|
background-color: var(--Base);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.AccountKeySpoiler summary {
|
|
padding: 0.75rem;
|
|
cursor: pointer;
|
|
color: var(--Text);
|
|
background-color: var(--Surface0);
|
|
}
|
|
|
|
.AccountKeySpoiler summary:hover {
|
|
color: var(--Sky);
|
|
background-color: var(--Surface1);
|
|
}
|
|
|
|
.AccountKeyContent {
|
|
padding: 1rem;
|
|
border-top: 3px solid var(--Surface2);
|
|
}
|
|
|
|
#AccountKeyDisplay {
|
|
display: block;
|
|
margin-top: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
padding: 0.75rem;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
color: var(--Green);
|
|
background-color: var(--Crust);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
body {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.Navbar {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
top: 0;
|
|
overflow-x: auto;
|
|
z-index: 1;
|
|
}
|
|
|
|
.NavbarLink {
|
|
flex: 0 0 9.5rem;
|
|
width: 9.5rem;
|
|
height: 3.5rem;
|
|
}
|
|
|
|
.NavbarIcon {
|
|
flex-basis: 3.5rem;
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
}
|
|
|
|
.NavbarText {
|
|
padding: 0 0.6rem;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.MainContainer {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.GardenGrid {
|
|
width: max-content;
|
|
min-width: 100%;
|
|
grid-template-columns: repeat(
|
|
var(--GardenWidth),
|
|
minmax(4.25rem, 1fr)
|
|
);
|
|
}
|
|
|
|
.LeaderboardRankColumn, .LeaderboardRank {
|
|
width: 2.5rem;
|
|
}
|
|
|
|
.LeaderboardTable th, .LeaderboardTable td {
|
|
padding: 0.6rem 0.4rem;
|
|
}
|
|
|
|
.LeaderboardUsername {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.FormRow, .ProfileFormRow, .ProfileButtonRow {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.InteractivePanel input, .InteractivePanel textarea, .InteractivePanel select, .InteractivePanel button {
|
|
width: 100%;
|
|
}
|
|
|
|
.ProfileStatistic {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
.SeedEmpty {
|
|
margin: 0;
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.GardenPlantMissing {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0.35rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--Subtext1);
|
|
font-size: 0.75rem;
|
|
line-height: 1.1;
|
|
text-align: center;
|
|
}
|
|
|
|
.ShopSection {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.ShopSectionHeading {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.ShopSectionToggle {
|
|
display: flex;
|
|
width: 100%;
|
|
gap: 0.55rem;
|
|
align-items: center;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
color: var(--Text);
|
|
background: none;
|
|
border: 0;
|
|
font-size: inherit;
|
|
text-align: left;
|
|
}
|
|
|
|
.ShopSectionToggle:hover {
|
|
color: var(--Sky);
|
|
}
|
|
|
|
.ShopSectionToggle:focus-visible {
|
|
outline: 3px solid var(--Yellow);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.ShopSectionArrow {
|
|
width: 1ch;
|
|
flex: 0 0 1ch;
|
|
color: var(--Overlay2);
|
|
transform-origin: center;
|
|
}
|
|
|
|
.ShopSectionToggle[aria-expanded="true"] .ShopSectionArrow {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.ShopSectionContent[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.CatalogueControls {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
|
|
gap: 0.75rem;
|
|
margin: 0 0 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.CatalogueControls input, .CatalogueControls select {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 0.65rem 0.75rem;
|
|
color: var(--Text);
|
|
background-color: var(--Mantle);
|
|
border: 3px solid var(--Surface2);
|
|
border-radius: 0;
|
|
font-size: 1rem;
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.CatalogueControls input::placeholder {
|
|
color: var(--Overlay1);
|
|
}
|
|
|
|
.CatalogueControls input:hover, .CatalogueControls select:hover {
|
|
border-color: var(--Sky);
|
|
}
|
|
|
|
.CatalogueControls input:focus, .CatalogueControls select:focus {
|
|
outline: 3px solid var(--Yellow);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.CatalogueControls select {
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.CatalogueControls {
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
.ShopSeedList {
|
|
display: grid;
|
|
grid-template-columns: repeat( auto-fit, minmax(15rem, 1fr) );
|
|
gap: 1rem;
|
|
}
|
|
|
|
.ShopItem {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem;
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.ShopItemHeader {
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.ShopItem > .PanelHeaderInset {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.ShopItemHeaderOwned {
|
|
color: var(--Overlay1);
|
|
border-bottom-color: var(--Surface1);
|
|
}
|
|
|
|
.ShopItemBody {
|
|
display: grid;
|
|
grid-template-columns: 5.75rem minmax(0, 1fr);
|
|
gap: 0.75rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.ShopPlantVisual {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
width: 5.75rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.ShopPlantImageFrame {
|
|
display: flex;
|
|
width: 5.7rem;
|
|
height: 5.7rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ShopItemNumber {
|
|
width: 100%;
|
|
color: var(--Overlay2);
|
|
text-align: center;
|
|
}
|
|
|
|
.ShopPlantMissing {
|
|
padding: 0.35rem;
|
|
color: var(--Overlay1);
|
|
font-size: 0.75rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.ShopItemDetails p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.ShopStat {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.ShopStatName {
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.ShopBuyButton {
|
|
--ActionAccent: var(--Green);
|
|
padding: 0.65rem 0.8rem;
|
|
}
|
|
|
|
.ShopItemActions,
|
|
.ShopSeedBuyOptions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.ShopBuyButton:disabled {
|
|
cursor: not-allowed;
|
|
color: var(--Overlay1);
|
|
background-color: var(--Surface0);
|
|
border-color: var(--Surface1);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ShopEmpty {
|
|
margin: 0;
|
|
padding: 1rem;
|
|
color: var(--Subtext1);
|
|
background-color: var(--Mantle);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.ShopSeedList {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.ShopItemBody {
|
|
grid-template-columns: 5.25rem minmax(0, 1fr);
|
|
}
|
|
|
|
.ShopPlantVisual {
|
|
width: 5.25rem;
|
|
}
|
|
|
|
.ShopPlantImageFrame {
|
|
width: 5.25rem;
|
|
height: 5.25rem;
|
|
}
|
|
}
|
|
|
|
#ProfileColourForm {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.ProfileColourInput {
|
|
width: 4rem;
|
|
min-width: 4rem !important;
|
|
height: 2.75rem;
|
|
padding: 0.2rem !important;
|
|
cursor: pointer;
|
|
appearance: auto !important;
|
|
}
|
|
|
|
.ProfileColourPreview {
|
|
min-width: 8rem;
|
|
color: var(--Text);
|
|
}
|
|
|
|
.ProfilePictureSelectionRow {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(10rem, auto) auto;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
align-items: end;
|
|
}
|
|
|
|
.ProfilePictureSelectionLabel {
|
|
display: block;
|
|
margin-bottom: 0.35rem;
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.ProfilePictureGrowthStageLabel {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.ProfilePictureGrowthStageLabel select {
|
|
display: block;
|
|
width: 100%;
|
|
min-width: 10rem;
|
|
margin-top: 0.35rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ProfilePictureGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: 0.75rem;
|
|
max-height: 31rem;
|
|
padding: 0.25rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.ProfileSection .ProfilePictureOption {
|
|
display: flex;
|
|
min-width: 0;
|
|
padding: 0.5rem;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.ProfileSection .ProfilePictureOption[aria-pressed="true"] {
|
|
color: var(--Yellow);
|
|
border-color: var(--Yellow);
|
|
}
|
|
|
|
.ProfilePictureOptionName {
|
|
overflow: hidden;
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ProfilePictureOptionVisual {
|
|
display: flex;
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ProfilePictureOptionMissing {
|
|
padding: 0.35rem;
|
|
color: var(--Overlay1);
|
|
font-size: 0.75rem;
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.ProfilePictureSelectionRow {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.ProfilePictureSelectionRow > :first-child {
|
|
grid-column: 1 / -1;
|
|
}
|
|
}
|
|
|
|
|
|
/* * Garden social */
|
|
|
|
.GardenerAvatar {
|
|
display: flex;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
flex: 0 0 3rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.GardenerAvatarPlaceholder {
|
|
color: var(--Overlay1);
|
|
font-size: 1.75rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.GardenerIdentity {
|
|
display: inline-flex;
|
|
min-width: 0;
|
|
gap: 0.65rem;
|
|
align-items: center;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.GardenerIdentityName {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
a.GardenerIdentity:hover .GardenerIdentityName {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.GardenPlayerIdentity {
|
|
min-height: 4.25rem;
|
|
}
|
|
|
|
.GardenPlayerIdentityContent {
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
.GardenerSearchResults {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.GardenerSearchResult {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
gap: 0.85rem;
|
|
padding: 0.75rem;
|
|
align-items: center;
|
|
color: var(--Text);
|
|
text-decoration: none;
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.GardenerSearchResult:hover {
|
|
color: var(--Text);
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Sky);
|
|
transform: translate(1px, 1px);
|
|
box-shadow: 2px 2px 0 var(--Crust);
|
|
}
|
|
|
|
.GardenerAvatarLarge {
|
|
width: 4.25rem;
|
|
height: 4.25rem;
|
|
flex-basis: 4.25rem;
|
|
}
|
|
|
|
.GardenerSearchResultDetails {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.GardenerSearchResultName {
|
|
overflow: hidden;
|
|
font-size: 1.35rem;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.GardenerSearchResultDescription {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
color: var(--Subtext1);
|
|
line-height: 1.35;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.GardenerBackLink {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.GardenerHero {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.GardenerHeroText {
|
|
min-width: 0;
|
|
}
|
|
|
|
.GardenerHeroText h1 {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.GardenerHeroText p {
|
|
margin-bottom: 0;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.GardenerAvatarHero {
|
|
width: 7rem;
|
|
height: 7rem;
|
|
flex-basis: 7rem;
|
|
}
|
|
|
|
.GardenPlotReadOnly,
|
|
.GardenPlotReadOnly:hover {
|
|
cursor: default;
|
|
transform: none;
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.GardenPlotReadOnly:hover {
|
|
--TileBackground: var(--Surface0);
|
|
--PlotBorderColour: var(--Surface2);
|
|
}
|
|
|
|
.GardenPlotReadOnly.GardenPlotEmpty:hover {
|
|
--TileBackground: var(--Mantle);
|
|
}
|
|
|
|
.GardenPlotReadOnly.GardenPlotMature:hover {
|
|
--GrowthColour: var(--Green);
|
|
}
|
|
|
|
.GardenerCommentList {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.GardenerComment {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.GardenerCommentHeader {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.GardenerCommentTime {
|
|
flex: 0 0 auto;
|
|
color: var(--Overlay1);
|
|
font-size: 0.85rem;
|
|
text-align: right;
|
|
}
|
|
|
|
.GardenerCommentText {
|
|
margin: 0.75rem 0 0;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.GardenerCommentDelete {
|
|
width: auto;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.GardenerCommentsEmpty {
|
|
margin: 0;
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.GardenerLoadMoreButton {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.LeaderboardTable {
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
.LeaderboardUsername .GardenerAvatar {
|
|
width: 3.25rem;
|
|
height: 3.25rem;
|
|
flex-basis: 3.25rem;
|
|
}
|
|
|
|
.LeaderboardUsername .GardenerIdentity {
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.GardenerAvatarHero {
|
|
width: 5.5rem;
|
|
height: 5.5rem;
|
|
flex-basis: 5.5rem;
|
|
}
|
|
|
|
.GardenerCommentHeader {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.GardenerCommentTime {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
/* * Garden guide */
|
|
|
|
.GuideSection {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.GuideSection > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.GuideTip {
|
|
margin-top: 1.25rem;
|
|
padding: 1rem;
|
|
background-color: var(--Base);
|
|
border: 3px solid var(--Yellow);
|
|
}
|
|
|
|
.GuideTip > :first-child {
|
|
display: block;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.GuideRecipe {
|
|
display: grid;
|
|
grid-template-columns: repeat( var(--RecipeWidth, 3), minmax(0, 5.75rem) );
|
|
gap: 0.75rem;
|
|
justify-content: center;
|
|
margin: 1rem auto;
|
|
}
|
|
|
|
.GuideRecipeCell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
min-width: 0;
|
|
aspect-ratio: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.35rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.GuideRecipePlant {
|
|
color: var(--Text);
|
|
}
|
|
|
|
.GuideRecipeEmpty {
|
|
color: var(--Overlay2);
|
|
background-color: var(--Crust);
|
|
border-style: dashed;
|
|
}
|
|
|
|
.GuideRecipeImage {
|
|
width: 3.75rem;
|
|
height: 3.75rem;
|
|
}
|
|
|
|
.GuideRecipeLabel {
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
font-size: 0.75rem;
|
|
line-height: 1.1;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.GuideHintText {
|
|
margin-bottom: 0;
|
|
color: var(--Subtext1);
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.GuideRecipe {
|
|
grid-template-columns: repeat( var(--RecipeWidth, 3), minmax(0, 1fr) );
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.GuideRecipeImage {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
}
|
|
|
|
/* * Plant encyclopedia */
|
|
|
|
.PlantEncyclopediaList,
|
|
.MutationEncyclopediaList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.PlantEncyclopediaCard,
|
|
.MutationEncyclopediaCard {
|
|
overflow: hidden;
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.PlantEncyclopediaHeader h2 {
|
|
color: var(--Green);
|
|
}
|
|
|
|
.PlantEncyclopediaNumber,
|
|
.MutationEncyclopediaNumber {
|
|
flex: 0 0 auto;
|
|
color: var(--Overlay2);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.PlantEncyclopediaBody {
|
|
display: grid;
|
|
grid-template-columns: 7rem minmax(0, 1fr) minmax(10rem, 0.8fr);
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.PlantEncyclopediaVisual {
|
|
display: flex;
|
|
width: 7rem;
|
|
height: 7rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.PlantEncyclopediaMissing {
|
|
padding: 0.5rem;
|
|
color: var(--Overlay1);
|
|
text-align: center;
|
|
}
|
|
|
|
.PlantEncyclopediaDescription {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.PlantEncyclopediaStat,
|
|
.MutationEncyclopediaStat {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
padding: 0.35rem 0;
|
|
border-bottom: 2px solid var(--Surface0);
|
|
}
|
|
|
|
.PlantEncyclopediaStat:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.PlantEncyclopediaStatName,
|
|
.MutationEncyclopediaStatName {
|
|
flex: 0 0 auto;
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.PlantEncyclopediaStat > :last-child,
|
|
.MutationEncyclopediaStat > :last-child {
|
|
min-width: 0;
|
|
text-align: right;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.PlantEncyclopediaRelations {
|
|
min-width: 0;
|
|
background-color: var(--Base);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.PlantEncyclopediaRelationGroup {
|
|
padding: 0.65rem 0.75rem;
|
|
}
|
|
|
|
.PlantEncyclopediaRelationGroup + .PlantEncyclopediaRelationGroup {
|
|
border-top: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.PlantEncyclopediaRelationGroup h3,
|
|
.PlantEncyclopediaRelationList {
|
|
max-height: 7rem;
|
|
margin: 0;
|
|
padding-left: 1.25rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.PlantEncyclopediaRelationList li,
|
|
.MutationEncyclopediaRelationList li {
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.PlantEncyclopediaRelationList li:last-child,
|
|
.MutationEncyclopediaRelationList li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.PlantEncyclopediaRelationUnknown,
|
|
.PlantEncyclopediaRelationEmpty,
|
|
.MutationEncyclopediaRelationUnknown,
|
|
.MutationEncyclopediaRelationEmpty {
|
|
color: var(--Overlay1);
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.PlantEncyclopediaBody {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.PlantEncyclopediaVisual {
|
|
width: min(8rem, 100%);
|
|
height: auto;
|
|
aspect-ratio: 1;
|
|
justify-self: center;
|
|
}
|
|
|
|
.PlantEncyclopediaStat > :last-child,
|
|
.MutationEncyclopediaStat > :last-child {
|
|
text-align: left;
|
|
}
|
|
|
|
.PlantEncyclopediaStat,
|
|
.MutationEncyclopediaStat {
|
|
flex-direction: column;
|
|
gap: 0.2rem;
|
|
}
|
|
}
|
|
|
|
/* * Mutation encyclopedia */
|
|
|
|
.MutationEncyclopediaHeader h2 {
|
|
color: var(--Mauve);
|
|
}
|
|
|
|
.MutationEncyclopediaBody {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.MutationEncyclopediaDescription {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.MutationHintCard {
|
|
border-color: var(--Yellow);
|
|
}
|
|
|
|
.MutationHintCard .MutationEncyclopediaHeader h2 {
|
|
color: var(--Yellow);
|
|
}
|
|
|
|
.MutationHintCard .MutationEncyclopediaDescription {
|
|
margin-bottom: 0;
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.MutationHintList {
|
|
margin: 0;
|
|
padding: 0;
|
|
color: var(--Subtext1);
|
|
list-style: none;
|
|
}
|
|
|
|
.MutationHintList > li::marker {
|
|
content: "";
|
|
}
|
|
|
|
.MutationHintList li + li {
|
|
margin-top: 0.35rem;
|
|
}
|
|
|
|
.MutationEncyclopediaStats {
|
|
display: grid;
|
|
grid-template-columns: repeat( 2, minmax(0, 1fr) );
|
|
gap: 0 1rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
|
|
.MutationEncyclopediaRecipeSection {
|
|
margin-bottom: 1.25rem;
|
|
padding: 1rem;
|
|
background-color: var(--Base);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.MutationEncyclopediaRecipeSection > h3 {
|
|
margin-bottom: 0.75rem;
|
|
color: var(--Peach);
|
|
}
|
|
|
|
.MutationEncyclopediaRecipeFlow {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.MutationEncyclopediaRecipePanel {
|
|
min-width: 0;
|
|
}
|
|
|
|
.MutationEncyclopediaRecipePanel h4 {
|
|
margin-bottom: 0.25rem;
|
|
color: var(--Subtext1);
|
|
font-size: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.MutationEncyclopediaRecipePanel .GuideRecipe {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.MutationEncyclopediaRecipeArrow {
|
|
color: var(--Yellow);
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.MutationRecipeLists {
|
|
margin-top: 0.9rem;
|
|
padding-top: 0.75rem;
|
|
border-top: 2px solid var(--Surface1);
|
|
}
|
|
|
|
.MutationRecipeLists h4 {
|
|
margin-bottom: 0.4rem;
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.MutationRecipeLists ol {
|
|
margin: 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.MutationRecipeLists li + li {
|
|
margin-top: 0.35rem;
|
|
}
|
|
|
|
.MutationRecipeAny {
|
|
color: var(--Overlay2);
|
|
background-color: var(--Mantle);
|
|
border-style: dashed;
|
|
}
|
|
|
|
.MutationRecipeMatcher {
|
|
color: var(--Sky);
|
|
background-color: var(--Surface0);
|
|
}
|
|
|
|
.MutationRecipeKeep {
|
|
color: var(--Subtext1);
|
|
background-color: var(--Surface0);
|
|
}
|
|
|
|
.MutationRecipeCapture {
|
|
color: var(--Lavender);
|
|
background-color: var(--Surface0);
|
|
}
|
|
|
|
.MutationRecipeText {
|
|
max-width: 100%;
|
|
overflow-wrap: anywhere;
|
|
font-size: 0.75rem;
|
|
line-height: 1.15;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.MutationEncyclopediaMissingRecipe {
|
|
margin-bottom: 0;
|
|
color: var(--Overlay1);
|
|
}
|
|
|
|
.MutationEncyclopediaRelations {
|
|
display: grid;
|
|
grid-template-columns: repeat( 2, minmax(0, 1fr) );
|
|
gap: 1rem;
|
|
}
|
|
|
|
.MutationEncyclopediaRelationGroup {
|
|
padding: 0.75rem;
|
|
background-color: var(--Base);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.MutationEncyclopediaRelationGroup h3 {
|
|
margin-bottom: 0.5rem;
|
|
color: var(--Peach);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.MutationEncyclopediaRelationList {
|
|
margin: 0;
|
|
padding-left: 1.25rem;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.MutationEncyclopediaStats, .MutationEncyclopediaRelations {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.MutationEncyclopediaRecipeFlow {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.MutationEncyclopediaRecipeArrow {
|
|
justify-self: center;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
}
|
|
|
|
/* * Admin editors */
|
|
|
|
.AdminEditorNavigation {
|
|
display: grid;
|
|
grid-template-columns: repeat( 2, minmax(0, 1fr) );
|
|
gap: 1rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.AdminEditorLink {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
min-height: 7rem;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.AdminEditorLink strong {
|
|
color: var(--Green);
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.AdminEditorLink span {
|
|
color: var(--Subtext1);
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.AdminEditorToolbar {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
margin: 1.5rem 0 1rem;
|
|
}
|
|
|
|
.AdminEditorToolbar label {
|
|
color: var(--Blue);
|
|
}
|
|
|
|
.AdminEditorForm {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.AdminEditorGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat( 2, minmax(0, 1fr) );
|
|
gap: 1rem;
|
|
}
|
|
|
|
.AdminEditorField {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.AdminEditorField > span, .AdminMutationDimensions label {
|
|
color: var(--Blue);
|
|
}
|
|
|
|
.AdminEditorField small {
|
|
color: var(--Overlay2);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.AdminEditorWideField {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.AdminEditorForm input, .AdminEditorForm textarea, .AdminEditorForm select, .AdminEditorToolbar select, .AdminMutationDimensions input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
padding: 0.55rem;
|
|
color: var(--Text);
|
|
background-color: var(--Surface0);
|
|
border: 3px solid var(--Surface2);
|
|
border-radius: 0;
|
|
outline: none;
|
|
}
|
|
|
|
.AdminEditorForm textarea {
|
|
resize: vertical;
|
|
}
|
|
|
|
.AdminEditorForm input:focus, .AdminEditorForm textarea:focus, .AdminEditorForm select:focus, .AdminEditorToolbar select:focus, .AdminMutationDimensions input:focus {
|
|
border-color: var(--Sky);
|
|
}
|
|
|
|
.AdminEditorForm input:read-only {
|
|
color: var(--Subtext0);
|
|
background-color: var(--Base);
|
|
}
|
|
|
|
.AdminEditorForm input:disabled {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.AdminEditorCheckField {
|
|
display: flex;
|
|
gap: 0.65rem;
|
|
align-items: center;
|
|
align-self: end;
|
|
min-height: 2.8rem;
|
|
}
|
|
|
|
.AdminEditorCheckField input {
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
margin: 0;
|
|
accent-color: var(--Green);
|
|
}
|
|
|
|
.AdminInlineButton {
|
|
width: auto;
|
|
min-width: max-content;
|
|
}
|
|
|
|
.AdminSaveButton {
|
|
--ActionAccent: var(--Green);
|
|
width: auto;
|
|
}
|
|
|
|
.AdminEditorBackLink {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.AdminEditorActions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-top: 1.25rem;
|
|
}
|
|
|
|
.AdminEditorPreview, .AdminMutationRecipeSection, .AdminMutationRelationsSection, .AdminMutationFailureSection {
|
|
margin-top: 1.5rem;
|
|
padding-top: 1rem;
|
|
border-top: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.AdminMutationListsPanel {
|
|
margin-top: 1rem;
|
|
padding: 0.85rem;
|
|
background-color: var(--Base);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.AdminMutationListsHeader {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
align-items: end;
|
|
}
|
|
|
|
.AdminMutationListsHeader h3 {
|
|
margin-bottom: 0.25rem;
|
|
color: var(--Peach);
|
|
}
|
|
|
|
.AdminMutationListsHeader p {
|
|
margin: 0;
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.AdminMutationLists {
|
|
margin: 0.85rem 0 0;
|
|
padding-left: 2rem;
|
|
}
|
|
|
|
.AdminMutationList {
|
|
margin-bottom: 0.85rem;
|
|
padding: 0.75rem;
|
|
background-color: var(--Crust);
|
|
border: 2px solid var(--Surface1);
|
|
}
|
|
|
|
.AdminMutationList:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.AdminMutationListHeader {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.65rem;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.AdminMutationListMode {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.AdminMutationListMode > span {
|
|
color: var(--Overlay2);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.AdminMutationListItems {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
margin-top: 0.65rem;
|
|
}
|
|
|
|
.AdminMutationListItem {
|
|
display: grid;
|
|
grid-template-columns: minmax(7rem, 0.6fr) minmax(10rem, 1.4fr) auto;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.AdminMutationListItemValue[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.AdminMutationListActions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 0.65rem;
|
|
}
|
|
|
|
.AdminEditorPreview h2, .AdminMutationRecipeSection h2, .AdminMutationRelationsSection h2, .AdminMutationFailureSection h2 {
|
|
margin-bottom: 0.5rem;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.AdminPlantPreviewRow {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.AdminPlantPreviewTile {
|
|
display: flex;
|
|
width: 7rem;
|
|
height: 7rem;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.AdminPlantPreviewMissing {
|
|
padding: 0.5rem;
|
|
color: var(--Overlay1);
|
|
text-align: center;
|
|
}
|
|
|
|
#AdminPlantPreviewKey, #AdminPlantArchiveNote, #AdminMutationArchiveNote {
|
|
margin: 0.35rem 0 0;
|
|
color: var(--Overlay2);
|
|
}
|
|
|
|
#AdminPlantArchiveNote, #AdminMutationArchiveNote {
|
|
color: var(--Yellow);
|
|
}
|
|
|
|
.AdminMutationRecipeHeader {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
align-items: end;
|
|
}
|
|
|
|
.AdminMutationRecipeHeader p, .AdminMutationRelationsSection > p {
|
|
margin-bottom: 0;
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.AdminMutationDimensions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.6rem;
|
|
align-items: end;
|
|
}
|
|
|
|
.AdminMutationDimensions label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
.AdminMutationDimensions input {
|
|
width: 5rem;
|
|
}
|
|
|
|
.AdminMutationRecipeFlow {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.AdminMutationGridPanel {
|
|
min-width: 0;
|
|
}
|
|
|
|
.AdminMutationGridPanel h3 {
|
|
margin-bottom: 0.25rem;
|
|
color: var(--Subtext1);
|
|
font-size: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.AdminMutationGrid {
|
|
width: 100%;
|
|
margin: 0.5rem auto;
|
|
}
|
|
|
|
.AdminMutationGridCell {
|
|
width: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.AdminMutationGridCell:hover {
|
|
border-color: var(--Sky);
|
|
}
|
|
|
|
.AdminMutationGridCellSelected {
|
|
border-color: var(--Yellow) !important;
|
|
box-shadow: 0 0 0 2px var(--Crust);
|
|
}
|
|
|
|
.AdminMutationCellEditor {
|
|
margin-top: 1rem;
|
|
padding: 1rem;
|
|
background-color: var(--Base);
|
|
border: 3px solid var(--Yellow);
|
|
}
|
|
|
|
.AdminMutationCellEditor h3 {
|
|
margin-bottom: 0.75rem;
|
|
color: var(--Yellow);
|
|
}
|
|
|
|
#AdminMutationPatternCellControls, #AdminMutationResultCellControls, .AdminMatcherFields {
|
|
display: grid;
|
|
grid-template-columns: repeat( 2, minmax(0, 1fr) );
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.AdminMatcherFields {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.AdminMutationRelationColumns {
|
|
display: grid;
|
|
grid-template-columns: repeat( 2, minmax(0, 1fr) );
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.AdminMutationRelationColumns fieldset {
|
|
min-width: 0;
|
|
margin: 0;
|
|
padding: 0.75rem;
|
|
background-color: var(--Base);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.AdminMutationRelationColumns legend {
|
|
padding: 0 0.35rem;
|
|
color: var(--Peach);
|
|
}
|
|
|
|
.AdminPlantChecklist {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.45rem;
|
|
max-height: 14rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.AdminPlantChecklistItem {
|
|
display: flex;
|
|
gap: 0.55rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.AdminPlantChecklistItem input {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin: 0;
|
|
accent-color: var(--Green);
|
|
}
|
|
|
|
.AdminGeneratedJson {
|
|
margin-top: 1.5rem;
|
|
padding: 0.75rem;
|
|
background-color: var(--Base);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.AdminGeneratedJson summary {
|
|
cursor: pointer;
|
|
color: var(--Sky);
|
|
}
|
|
|
|
.AdminGeneratedJson pre {
|
|
max-height: 24rem;
|
|
margin: 0.75rem 0 0;
|
|
padding: 0.75rem;
|
|
overflow: auto;
|
|
color: var(--Subtext1);
|
|
background-color: var(--Crust);
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.AdminEditorNavigation, .AdminEditorGrid, #AdminMutationPatternCellControls, #AdminMutationResultCellControls, .AdminMatcherFields, .AdminMutationRelationColumns {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.AdminEditorToolbar {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.AdminEditorToolbar label {
|
|
margin-bottom: -0.35rem;
|
|
}
|
|
|
|
.AdminInlineButton, .AdminSaveButton {
|
|
width: 100%;
|
|
}
|
|
|
|
.AdminMutationRecipeHeader {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.AdminMutationRecipeFlow {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.AdminMutationRecipeFlow > .MutationEncyclopediaRecipeArrow {
|
|
justify-self: center;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.AdminMutationDimensions {
|
|
align-items: stretch;
|
|
}
|
|
|
|
.AdminMutationDimensions label {
|
|
flex: 1 1 5rem;
|
|
}
|
|
|
|
.AdminMutationDimensions input {
|
|
width: 100%;
|
|
}
|
|
|
|
.AdminMutationListsHeader {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.AdminMutationListItem {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.AdminDurationInputs {
|
|
display: grid;
|
|
grid-template-columns: repeat( 3, minmax(0, 1fr) );
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.AdminDurationInputs label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.AdminDurationInputs label > span {
|
|
color: var(--Overlay2);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.AdminPlantEconomyPreview {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.AdminPlantEconomyPreview h3 {
|
|
margin-bottom: 0.5rem;
|
|
color: var(--Peach);
|
|
}
|
|
|
|
.AdminPlantEconomyPreview dl {
|
|
display: grid;
|
|
grid-template-columns: repeat( 3, minmax(0, 1fr) );
|
|
gap: 0.65rem 1rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.AdminPlantEconomyPreview dl > div {
|
|
min-width: 0;
|
|
}
|
|
|
|
.AdminPlantEconomyPreview dt {
|
|
color: var(--Overlay2);
|
|
}
|
|
|
|
.AdminPlantEconomyPreview dd {
|
|
margin: 0.15rem 0 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.AdminPlantEconomySource {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.AdminPlantImagesSection {
|
|
margin-top: 1.5rem;
|
|
padding-top: 1rem;
|
|
border-top: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.AdminPlantImagesSection h2 {
|
|
margin-bottom: 0.5rem;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.AdminPlantImageUpload {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.AdminPlantImageUpload input[type="file"] {
|
|
flex: 1 1 18rem;
|
|
}
|
|
|
|
.AdminPlantDirectionalImageUpload {
|
|
display: grid;
|
|
grid-template-columns: repeat( 2, minmax(0, 1fr) );
|
|
gap: 0.75rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.AdminPlantDirectionalImageUpload .AdminEditorField {
|
|
margin: 0;
|
|
}
|
|
|
|
.AdminPlantImageNote {
|
|
color: var(--Overlay2);
|
|
}
|
|
|
|
.AdminPlantImageList {
|
|
display: grid;
|
|
gap: 0.65rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.AdminPlantImageRow {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
padding: 0.65rem;
|
|
border: 3px solid var(--Surface1);
|
|
}
|
|
|
|
.AdminPlantImagePreview {
|
|
display: flex;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.AdminPlantImageRemoveButton {
|
|
--ActionAccent: var(--Red);
|
|
width: auto;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.AdminDurationInputs,
|
|
.AdminPlantEconomyPreview dl {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.AdminPlantEconomySource {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.AdminPlantImageRow {
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
}
|
|
|
|
.AdminPlantDirectionalImageUpload {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.AdminPlantImageRemoveButton {
|
|
grid-column: 1 / -1;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.AdminEditorTransferActions {
|
|
margin: 0 0 1rem;
|
|
}
|
|
|
|
.AdminOverview,
|
|
.AdminMassSelectionPanel,
|
|
.AdminMassEditorForm {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.AdminOverviewGroups {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.AdminOverviewGroups > section > h2 {
|
|
margin-bottom: 0.75rem;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.AdminOverviewGroups h3 {
|
|
margin: 1rem 0 0.35rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.AdminOverviewGroups h3:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.AdminOverviewList,
|
|
.AdminOverviewList ul {
|
|
margin: 0;
|
|
padding-left: 1.25rem;
|
|
}
|
|
|
|
.AdminOverviewList ul {
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.AdminOverviewEmpty {
|
|
margin: 0;
|
|
color: var(--Overlay2);
|
|
}
|
|
|
|
.AdminOverview > .PageMessage:empty {
|
|
display: none;
|
|
}
|
|
|
|
.AdminMassSelectionBody {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.AdminMassChecklist {
|
|
max-height: 20rem;
|
|
}
|
|
|
|
.AdminMassField {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
gap: 0.75rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.AdminMassApplyField {
|
|
align-self: start;
|
|
margin-top: 1.55rem;
|
|
}
|
|
|
|
.AdminMassField :disabled {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.AdminOverviewGroups,
|
|
.AdminMassField {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.AdminMassApplyField {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.AdminTransferPanel {
|
|
margin-top: 1.5rem;
|
|
overflow: hidden;
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.AdminTransferPanel[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.AdminTransferPanelHeader {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.AdminTransferPanelHeader h2 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.AdminTransferCloseButton {
|
|
width: auto;
|
|
min-width: 6rem;
|
|
padding: 0.35rem 0.65rem;
|
|
}
|
|
|
|
.AdminTransferPanelBody {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.AdminTransferPanelBody > p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.AdminTransferToolbar,
|
|
.AdminTransferSelectionActions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.AdminTransferToolbar .AdminInlineButton,
|
|
.AdminTransferSelectionActions .AdminInlineButton {
|
|
width: auto;
|
|
}
|
|
|
|
.AdminTransferSummary {
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.AdminTransferSearchControls {
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.AdminTransferCardList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.AdminTransferCardHeader {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.AdminTransferCardMeta {
|
|
display: flex;
|
|
margin-left: auto;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 0.65rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.AdminTransferStatus {
|
|
flex: 0 0 auto;
|
|
padding: 0.2rem 0.45rem;
|
|
color: var(--Green);
|
|
background-color: var(--Surface0);
|
|
border: 2px solid var(--Green);
|
|
}
|
|
|
|
.AdminTransferStatusError {
|
|
color: var(--Red);
|
|
border-color: var(--Red);
|
|
}
|
|
|
|
.AdminTransferFileName {
|
|
min-width: 0;
|
|
margin: 0;
|
|
color: var(--Overlay2);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.AdminTransferErrorCard,
|
|
.AdminTransferCardInvalid {
|
|
border-color: var(--Red);
|
|
}
|
|
|
|
.AdminTransferErrorHeader {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.AdminTransferErrorHeader h2 {
|
|
margin-bottom: 0;
|
|
color: var(--Red);
|
|
}
|
|
|
|
.AdminTransferErrorBody {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.AdminTransferErrorBody p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.AdminTransferInlineError {
|
|
margin: 0;
|
|
padding: 0.75rem 1rem;
|
|
color: var(--Red);
|
|
background-color: var(--Mantle);
|
|
border-top: 3px solid var(--Red);
|
|
}
|
|
|
|
.AdminTransferSelectableCard {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.AdminTransferSelectableCard[data-selected="true"] {
|
|
border-color: var(--Sky);
|
|
}
|
|
|
|
.AdminTransferSelectableCard[data-selected="true"] > .PanelHeader {
|
|
border-bottom-color: var(--Sky);
|
|
}
|
|
|
|
.AdminTransferSelectToggle {
|
|
display: flex;
|
|
margin-left: auto;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
color: var(--Subtext1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.AdminTransferSelectToggle input {
|
|
width: 1.1rem;
|
|
height: 1.1rem;
|
|
margin: 0;
|
|
accent-color: var(--Sky);
|
|
}
|
|
|
|
.AdminTransferFooter {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.AdminTransferPanelHeader,
|
|
.AdminTransferCardHeader,
|
|
.AdminTransferCardMeta {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.AdminTransferPanelHeader {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.AdminTransferCloseButton {
|
|
width: 100%;
|
|
}
|
|
|
|
.AdminTransferCardMeta {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.AdminTransferSearchControls {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.AdminTransferToolbar .AdminInlineButton,
|
|
.AdminTransferSelectionActions .AdminInlineButton {
|
|
width: 100%;
|
|
}
|
|
}
|