diff --git a/src/css/states/mods.scss b/src/css/states/mods.scss index 4a060f91..ab10d767 100644 --- a/src/css/states/mods.scss +++ b/src/css/states/mods.scss @@ -1,31 +1,41 @@ #state_ModsState { + // TODO: Update dimensions to use less build-time logic .modsGrid { display: grid; - grid-template-columns: 1fr auto; - align-items: center; - - > h1 { - justify-self: start; - } - - .openModsFolder { - background-color: $modsColor; - } + grid-template-columns: repeat(2, 1fr); + @include S(gap, 10px); } - .modsStats { - @include PlainText; + .modsGrid.noMods { + grid-template-columns: unset; + place-items: center; + } - .title b { - @include Text; - } + .mod { + width: 100%; + box-sizing: border-box; + @include S(padding, 10px); - .advanced { - @include SuperSmallText; - } + @include S(border-radius, 4px); + background: #eee; @include DarkThemeOverride { - background-color: $darkModeGameBackground; + background: lighten($darkModeControlsBackground, 5); } } + + .mod > .title { + text-wrap: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + .mod > .description { + @include PlainText(); + } + + .mod > .advanced { + @include PlainText(); + color: $accentColorDark; + } } diff --git a/src/js/states/mods.tsx b/src/js/states/mods.tsx index cef657e6..68dc9795 100644 --- a/src/js/states/mods.tsx +++ b/src/js/states/mods.tsx @@ -22,11 +22,7 @@ export class ModsState extends TextualGameState { modElements.push(this.getNoModsMessage()); } - return ( -
-
{modElements}
-
- ); + return
{modElements}
; } private getModElement(mod: Mod): HTMLElement {