mirror of
https://git.srhtnin.garden/sarah/srhtnin.github.io.git
synced 2026-10-13 18:38:11 +02:00
1830 lines
34 KiB
CSS
1830 lines
34 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;
|
|
--PlantBackground: var(--Surface0);
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
.StatusPanel {
|
|
margin-bottom: 1.5rem;
|
|
padding: 0.75rem 1rem;
|
|
background-color: var(--Mantle);
|
|
border: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.GardenOverviewDetails {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.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(--PlantBackground);
|
|
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);
|
|
}
|
|
|
|
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: block;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
padding: 0;
|
|
line-height: 0;
|
|
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;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: fill;
|
|
image-rendering: auto;
|
|
}
|
|
|
|
.GardenLayout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 12rem;
|
|
gap: 1rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.GardenGrid {
|
|
--GardenWidth: 3;
|
|
display: grid;
|
|
grid-template-columns: repeat( var(--GardenWidth), minmax(0, 1fr) );
|
|
gap: 0.5rem;
|
|
padding: 0.75rem;
|
|
background-color: var(--Mantle);
|
|
border: 4px solid var(--Lavender);
|
|
}
|
|
|
|
.GardenPlot {
|
|
--GrowthProgress: 0%;
|
|
--GrowthColour: var(--Green);
|
|
--PlotBorderColour: var(--Surface2);
|
|
--TileBackground: var(--PlantBackground);
|
|
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,
|
|
.GardenPlotWithTimer {
|
|
aspect-ratio: auto;
|
|
}
|
|
|
|
.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 {
|
|
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;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.GardenPlotName {
|
|
border-bottom: 2px solid var(--Surface2);
|
|
}
|
|
|
|
.GardenPlotTimer {
|
|
border-top: 2px solid var(--Surface2);
|
|
}
|
|
|
|
.GardenPlotMature .GardenPlotTimer {
|
|
color: var(--Green);
|
|
}
|
|
|
|
.GardenPlot:hover {
|
|
--TileBackground: var(--Surface1);
|
|
--PlotBorderColour: var(--Sky);
|
|
transform: translate(1px, 1px);
|
|
box-shadow: 2px 2px 0 var(--Crust);
|
|
}
|
|
|
|
.GardenPlot:focus-visible {
|
|
outline: 3px solid var(--Yellow);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.GardenPlotEmpty {
|
|
--TileBackground: var(--Mantle);
|
|
}
|
|
|
|
.GardenPlotEmpty:hover {
|
|
--TileBackground: var(--PlantBackground);
|
|
}
|
|
|
|
.GardenPlotMature:hover {
|
|
--GrowthColour: var(--Yellow);
|
|
}
|
|
|
|
.SeedPanel {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.SeedPanel h2 {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.SeedList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
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;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.ToolButtonShovel[aria-current="true"] {
|
|
--ActionAccent: var(--Red);
|
|
color: var(--Red);
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Red);
|
|
}
|
|
|
|
.GardenPlotRemove:hover {
|
|
--GrowthColour: var(--Red);
|
|
--PlotBorderColour: var(--Red);
|
|
}
|
|
|
|
.GardenUser, .Leaderboard {
|
|
margin-top: 1.5rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.GardenUser h2, .Leaderboard h2 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.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 {
|
|
margin-top: 1.5rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.ProfileSection h2 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.ProfileSection h3 {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.ProfileFormRow, .ProfileButtonRow {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.ProfileButtonRow {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.ProfileSection label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--Blue);
|
|
}
|
|
|
|
.ProfileSection input, .ProfileSection textarea, .ProfileSection button {
|
|
font-size: 1rem;
|
|
color: var(--Text);
|
|
background-color: var(--Surface0);
|
|
border: 3px solid var(--Surface2);
|
|
border-radius: 0;
|
|
appearance: none;
|
|
}
|
|
|
|
.ProfileSection input, .ProfileSection textarea {
|
|
padding: 0.6rem;
|
|
outline: none;
|
|
}
|
|
|
|
.ProfileSection input {
|
|
min-width: 12rem;
|
|
}
|
|
|
|
.ProfileSection textarea {
|
|
width: 100%;
|
|
max-width: 24rem;
|
|
resize: vertical;
|
|
}
|
|
|
|
.ProfileSection input::placeholder, .ProfileSection textarea::placeholder {
|
|
color: var(--Overlay1);
|
|
}
|
|
|
|
.ProfileSection input:hover, .ProfileSection textarea:hover {
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Overlay2);
|
|
}
|
|
|
|
.ProfileSection input:focus, .ProfileSection textarea:focus {
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Sky);
|
|
}
|
|
|
|
.ProfileSection button {
|
|
padding: 0.6rem 0.8rem;
|
|
cursor: pointer;
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.ProfileSection button:hover {
|
|
color: var(--Sky);
|
|
background-color: var(--Surface1);
|
|
border-color: var(--Sky);
|
|
transform: translate(1px, 1px);
|
|
box-shadow: 2px 2px 0 var(--Crust);
|
|
}
|
|
|
|
.ProfileSection button:disabled {
|
|
cursor: not-allowed;
|
|
color: var(--Overlay1);
|
|
background-color: var(--Surface0);
|
|
border-color: var(--Surface1);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ProfileSection button:active {
|
|
color: var(--Green);
|
|
background-color: var(--Surface2);
|
|
border-color: var(--Green);
|
|
transform: translate(2px, 2px);
|
|
box-shadow: 1px 1px 0 var(--Crust);
|
|
}
|
|
|
|
.ProfileSection button:focus-visible, .ProfileSection summary:focus-visible {
|
|
outline: 3px solid var(--Yellow);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.ProfileMessage {
|
|
margin-top: 0.75rem;
|
|
margin-bottom: 0;
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.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 3.5rem;
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
}
|
|
|
|
.MainContainer {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.GardenLayout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.SeedPanel {
|
|
grid-row: 1;
|
|
}
|
|
|
|
.SeedList, .ToolList {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.SeedButton, .ToolButton {
|
|
width: auto;
|
|
}
|
|
|
|
.GardenGrid {
|
|
grid-row: 2;
|
|
}
|
|
|
|
.LeaderboardRankColumn, .LeaderboardRank {
|
|
width: 2.5rem;
|
|
}
|
|
|
|
.LeaderboardTable th, .LeaderboardTable td {
|
|
padding: 0.6rem 0.4rem;
|
|
}
|
|
|
|
.LeaderboardUsername {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ProfileFormRow, .ProfileButtonRow {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.ProfileSection input, .ProfileSection textarea, .ProfileSection 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;
|
|
}
|
|
|
|
.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 {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
align-items: baseline;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.ShopItemHeader h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* * 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 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.PlantEncyclopediaCard {
|
|
overflow: hidden;
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.PlantEncyclopediaHeader {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
align-items: baseline;
|
|
padding: 0.75rem 1rem;
|
|
background-color: var(--Surface0);
|
|
border-bottom: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.PlantEncyclopediaHeader h2 {
|
|
margin: 0;
|
|
color: var(--Green);
|
|
}
|
|
|
|
.PlantEncyclopediaNumber {
|
|
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 {
|
|
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 {
|
|
flex: 0 0 auto;
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.PlantEncyclopediaStat > :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 {
|
|
margin-bottom: 0.5rem;
|
|
color: var(--Peach);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.PlantEncyclopediaRelationList {
|
|
max-height: 7rem;
|
|
margin: 0;
|
|
padding-left: 1.25rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.PlantEncyclopediaRelationList li {
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.PlantEncyclopediaRelationList li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.PlantEncyclopediaRelationUnknown, .PlantEncyclopediaRelationEmpty {
|
|
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 {
|
|
text-align: left;
|
|
}
|
|
|
|
.PlantEncyclopediaStat {
|
|
flex-direction: column;
|
|
gap: 0.2rem;
|
|
}
|
|
}
|
|
|
|
/* * Mutation encyclopedia */
|
|
|
|
.MutationEncyclopediaList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.MutationEncyclopediaCard {
|
|
overflow: hidden;
|
|
box-shadow: 3px 3px 0 var(--Crust);
|
|
}
|
|
|
|
.MutationEncyclopediaHeader {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
align-items: baseline;
|
|
padding: 0.75rem 1rem;
|
|
background-color: var(--Surface0);
|
|
border-bottom: 3px solid var(--Surface2);
|
|
}
|
|
|
|
.MutationEncyclopediaHeader h2 {
|
|
margin: 0;
|
|
color: var(--Mauve);
|
|
}
|
|
|
|
.MutationEncyclopediaNumber {
|
|
flex: 0 0 auto;
|
|
color: var(--Overlay2);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.MutationEncyclopediaBody {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.MutationEncyclopediaDescription {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.MutationEncyclopediaStats {
|
|
display: grid;
|
|
grid-template-columns: repeat( 2, minmax(0, 1fr) );
|
|
gap: 0 1rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.MutationEncyclopediaStat {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
padding: 0.35rem 0;
|
|
border-bottom: 2px solid var(--Surface0);
|
|
}
|
|
|
|
.MutationEncyclopediaStatName {
|
|
flex: 0 0 auto;
|
|
color: var(--Subtext1);
|
|
}
|
|
|
|
.MutationEncyclopediaStat > :last-child {
|
|
min-width: 0;
|
|
text-align: right;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.MutationRecipeAny {
|
|
color: var(--Overlay2);
|
|
background-color: var(--Mantle);
|
|
border-style: dashed;
|
|
}
|
|
|
|
.MutationRecipeMatcher {
|
|
color: var(--Sky);
|
|
background-color: var(--PlantBackground);
|
|
}
|
|
|
|
.MutationRecipeKeep {
|
|
color: var(--Subtext1);
|
|
background-color: var(--PlantBackground);
|
|
}
|
|
|
|
.MutationRecipeCapture {
|
|
color: var(--Lavender);
|
|
background-color: var(--PlantBackground);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.MutationEncyclopediaRelationList li {
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.MutationEncyclopediaRelationList li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.MutationEncyclopediaRelationUnknown, .MutationEncyclopediaRelationEmpty {
|
|
color: var(--Overlay1);
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.MutationEncyclopediaStats, .MutationEncyclopediaRelations {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.MutationEncyclopediaRecipeFlow {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.MutationEncyclopediaRecipeArrow {
|
|
justify-self: center;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.MutationEncyclopediaStat {
|
|
flex-direction: column;
|
|
gap: 0.2rem;
|
|
}
|
|
|
|
.MutationEncyclopediaStat > :last-child {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
/* * 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);
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
}
|