mscrnt
a31fd760d9
- Updated styles for game cards, including hover and focus states. - Integrated image loading for game cards, scaling images appropriately. - Modified GameAccordion to display images and improved layout handling. - Added image path management in ROM verification logic.
226 lines
3.1 KiB
Plaintext
226 lines
3.1 KiB
Plaintext
/* === Global App Styles === */
|
|
|
|
Screen {
|
|
background: #0e0e0e;
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
/* === Resets === */
|
|
|
|
* {
|
|
padding: 0 1;
|
|
border: none;
|
|
}
|
|
|
|
/* === Headers === */
|
|
|
|
Header, .header {
|
|
dock: top;
|
|
height: 3;
|
|
content-align: center middle;
|
|
background: #1f1f1f;
|
|
color: #ed7d3a;
|
|
text-style: bold;
|
|
padding: 1 2;
|
|
border: solid #3a9bed;
|
|
}
|
|
|
|
/* === Buttons === */
|
|
|
|
Button {
|
|
background: #1f1f1f;
|
|
color: #ed7d3a;
|
|
border: solid #ed7d3a;
|
|
padding: 1 2;
|
|
margin: 1;
|
|
content-align: center middle;
|
|
text-style: bold;
|
|
}
|
|
|
|
Button:hover {
|
|
background: #ed7d3a;
|
|
color: #0e0e0e;
|
|
}
|
|
|
|
Button:focus {
|
|
background: #2a2a2a;
|
|
border: solid #ed7d3a;
|
|
}
|
|
|
|
/* === Inputs === */
|
|
|
|
Input {
|
|
background: #1f1f1f;
|
|
color: #f0f0f0;
|
|
border: solid #3a9bed;
|
|
}
|
|
|
|
Input:focus {
|
|
background: #2a2a2a;
|
|
border: solid #ed7d3a;
|
|
}
|
|
|
|
/* === Alerts === */
|
|
|
|
.success {
|
|
color: #4cd964;
|
|
}
|
|
|
|
.warning {
|
|
color: #ed7d3a;
|
|
}
|
|
|
|
.error {
|
|
color: red;
|
|
}
|
|
|
|
/* === Login Form === */
|
|
|
|
#login_form {
|
|
layout: vertical;
|
|
align-horizontal: center;
|
|
align-vertical: middle;
|
|
width: 60%;
|
|
height: auto;
|
|
padding: 2 4;
|
|
border: solid #3a9bed;
|
|
}
|
|
|
|
#status_message {
|
|
color: #ed7d3a;
|
|
padding: 1;
|
|
}
|
|
|
|
#pw_row {
|
|
layout: horizontal;
|
|
padding: 0;
|
|
}
|
|
|
|
#pw_row > * {
|
|
margin-right: 1;
|
|
}
|
|
|
|
#pw_row > *:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* === Loading Overlay === */
|
|
|
|
#loading_overlay {
|
|
dock: top;
|
|
background: #1f1f1f;
|
|
color: #f0f0f0;
|
|
padding: 1 2;
|
|
text-style: bold;
|
|
content-align: center middle;
|
|
}
|
|
|
|
/* === Game Layout === */
|
|
|
|
.centered_layout {
|
|
layout: vertical;
|
|
align-horizontal: center;
|
|
align-vertical: middle;
|
|
padding: 2;
|
|
width: 100%;
|
|
}
|
|
|
|
.rom_rows_container {
|
|
layout: vertical;
|
|
align-horizontal: center;
|
|
}
|
|
|
|
.rom_row {
|
|
layout: horizontal;
|
|
align-horizontal: center;
|
|
align-vertical: middle;
|
|
padding: 1 2;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.game_card {
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 60;
|
|
margin: 1;
|
|
padding: 1;
|
|
background: #1f1f1f;
|
|
color: #ed7d3a;
|
|
border: solid #3a9bed;
|
|
content-align: center middle;
|
|
text-style: bold;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.game_card:hover {
|
|
background: #2a2a2a;
|
|
color: #ed7d3a;
|
|
}
|
|
|
|
.game_card:focus {
|
|
background: #2a2a2a;
|
|
border: solid #ed7d3a;
|
|
}
|
|
|
|
.game_card:disabled {
|
|
background: #1f1f1f;
|
|
color: #3a9bed;
|
|
}
|
|
|
|
.game_card_clicked {
|
|
background: #ed7d3a;
|
|
color: #0e0e0e;
|
|
}
|
|
|
|
|
|
.offset_card {
|
|
width: 11;
|
|
height: auto;
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* ✅ Keep this for consistent row layout */
|
|
.rom_row {
|
|
layout: horizontal;
|
|
align-horizontal: center;
|
|
padding: 1 1;
|
|
}
|
|
|
|
.rom_row {
|
|
layout: horizontal;
|
|
align-horizontal: center;
|
|
padding: 1 2; /* maybe increase vertical padding */
|
|
}
|
|
|
|
|
|
.info_confirm_row {
|
|
layout: horizontal;
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 1 2;
|
|
align-vertical: top;
|
|
}
|
|
|
|
|
|
#confirm_button {
|
|
width: 20%;
|
|
height: auto;
|
|
content-align: center middle;
|
|
}
|
|
|
|
.confirm_button:hover {
|
|
background: #ed7d3a;
|
|
color: #0e0e0e;
|
|
}
|
|
|
|
.game_info {
|
|
padding: 1 2;
|
|
width: 100%;
|
|
color: #ed7d3a;
|
|
}
|
|
|
|
#game_info_box {
|
|
width: 80%;
|
|
} |