xTr1m/GameList
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More style adjustments

Browse Source
This commit is contained in:
Frank Tovar
2026-02-04 21:19:35 +01:00
parent 07123261f4
commit b64a33d833
4 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
wwwroot/css/components.css
View File

@@ -41,7 +41,6 @@
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: #f6b24f; background-color: #f6b24f;
cursor: pointer;
border: none; border: none;
width: 100%; width: 100%;
display: block; display: block;
@@ -83,14 +82,22 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.chip { .chip {
background: #c5dff1; background: #f1dfc5;
color: #2c1c0d; color: #2c1c0d;
padding: 4px 8px; padding: 2px 8px;
border-radius: 999px; border-radius: 999px;
font-size: 12px; min-width: 30px;
height: 30px;
border: 1px solid transparent; border: 1px solid transparent;
}
button .chip {
cursor: pointer; cursor: pointer;
} }
.chip.icon {
padding: 2px;
width: 30px;
font-size: 18px;
}
.chip.danger-chip { .chip.danger-chip {
background: #e0564f; background: #e0564f;
border: 1px solid #c54740; border: 1px solid #c54740;

2
wwwroot/css/layout.css
View File

@@ -37,8 +37,6 @@
border-radius: 10px; border-radius: 10px;
padding: 6px 10px; padding: 6px 10px;
cursor: pointer; cursor: pointer;
min-width: 44px;
font-family: "Twemoji Country Flags", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", emoji, sans-serif;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;

4
wwwroot/index.html
View File

@@ -21,7 +21,7 @@
<div class="auth-title-row"> <div class="auth-title-row">
<h2 id="auth-title" data-i18n="auth.loginHeading">Log in</h2> <h2 id="auth-title" data-i18n="auth.loginHeading">Log in</h2>
<div class="lang-switch" id="lang-switch-auth"> <div class="lang-switch" id="lang-switch-auth">
<button class="lang-button" type="button" aria-label="Language" title="Language">🌐</button> <button class="lang-button chip icon" type="button" aria-label="Language" title="Language">🌐</button>
<div class="lang-menu hidden"> <div class="lang-menu hidden">
<button type="button" data-lang="en" title="English" data-i18n-attr="title" class="flag-button">🇺🇸</button> <button type="button" data-lang="en" title="English" data-i18n-attr="title" class="flag-button">🇺🇸</button>
<button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title" class="flag-button">🇩🇪</button> <button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title" class="flag-button">🇩🇪</button>
@@ -76,7 +76,7 @@
</div> </div>
<div class="status-right"> <div class="status-right">
<div class="lang-switch" id="lang-switch-status"> <div class="lang-switch" id="lang-switch-status">
<button class="lang-button" type="button" aria-label="Language" title="Language">🌐</button> <button class="lang-button chip icon" type="button" aria-label="Language" title="Language">🌐</button>
<div class="lang-menu hidden"> <div class="lang-menu hidden">
<button type="button" data-lang="en" title="English" data-i18n-attr="title" class="flag-button">🇺🇸</button> <button type="button" data-lang="en" title="English" data-i18n-attr="title" class="flag-button">🇺🇸</button>
<button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title" class="flag-button">🇩🇪</button> <button type="button" data-lang="de" title="Deutsch" data-i18n-attr="title" class="flag-button">🇩🇪</button>

4
wwwroot/js/ui.js
View File

@@ -317,8 +317,8 @@ export function buildCard(
<h3 class="card-title" title="${s.name}">${s.name}</h3> <h3 class="card-title" title="${s.name}">${s.name}</h3>
<div class="title-meta"> <div class="title-meta">
${showAuthor && s.author ? `<span class="chip">${s.author}</span>` : ""} ${showAuthor && s.author ? `<span class="chip">${s.author}</span>` : ""}
${allowEdit ? `<button class="chip" data-edit="${s.id}" type="button" title="${t("card.edit")}">✏️</button>` : ""} ${allowEdit ? `<button class="chip icon" data-edit="${s.id}" type="button" title="${t("card.edit")}">✏️</button>` : ""}
${allowDelete ? `<button class="chip danger-chip" data-delete="${s.id}" type="button" title="${t("card.delete")}">🗑️</button>` : ""} ${allowDelete ? `<button class="chip icon danger-chip" data-delete="${s.id}" type="button" title="${t("card.delete")}">✕</button>` : ""}
</div> </div>
</div> </div>
${hasExtraInfo ? `<p class="muted">` : ""} ${hasExtraInfo ? `<p class="muted">` : ""}