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

Styling

Browse Source
This commit is contained in:
Frank Tovar
2026-02-26 15:27:38 +01:00
parent 0cb41dd004
commit 59fe453297
4 changed files with 35 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
RpgRoller/Components/App.razor
View File

@@ -8,6 +8,10 @@
<base href="/"/> <base href="/"/>
<title>RpgRoller</title> <title>RpgRoller</title>
<link rel="stylesheet" href="/styles.css"/> <link rel="stylesheet" href="/styles.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
<HeadOutlet @rendermode="InteractiveServer"/> <HeadOutlet @rendermode="InteractiveServer"/>
</head> </head>
<body> <body>

2
RpgRoller/Components/Pages/HomeControls/CampaignManagementPanel.razor
View File

@@ -56,7 +56,7 @@
title="Edit character" title="Edit character"
disabled="@(IsMutating || IsCreatingCampaign || !CanEditCharacter(character))" disabled="@(IsMutating || IsCreatingCampaign || !CanEditCharacter(character))"
@onclick="() => EditCharacterRequested.InvokeAsync(character)"> @onclick="() => EditCharacterRequested.InvokeAsync(character)">
<span aria-hidden="true">✎</span> <span aria-hidden="true" class="emoji">✏️</span>
<span class="sr-only">Edit @character.Name</span> <span class="sr-only">Edit @character.Name</span>
</button> </button>
</li> </li>

18
RpgRoller/Components/Pages/HomeControls/CharacterPanel.razor
View File

@@ -38,7 +38,7 @@
title="Edit character" title="Edit character"
disabled="@(IsMutating || !CanEditCharacter(SelectedCharacter))" disabled="@(IsMutating || !CanEditCharacter(SelectedCharacter))"
@onclick="() => EditCharacterRequested.InvokeAsync(SelectedCharacter)"> @onclick="() => EditCharacterRequested.InvokeAsync(SelectedCharacter)">
<span aria-hidden="true">✎</span> <span aria-hidden="true" class="emoji">✏️</span>
<span class="sr-only">Edit character</span> <span class="sr-only">Edit character</span>
</button> </button>
<h3 class="skills-heading">@SelectedCharacter.Name <span <h3 class="skills-heading">@SelectedCharacter.Name <span
@@ -73,7 +73,7 @@
title="Edit skill group" title="Edit skill group"
disabled="@(IsMutating || !CanEditCharacter(SelectedCharacter))" disabled="@(IsMutating || !CanEditCharacter(SelectedCharacter))"
@onclick="() => OpenEditSkillGroupModal(group)"> @onclick="() => OpenEditSkillGroupModal(group)">
<span aria-hidden="true">✎</span> <span aria-hidden="true" class="emoji">✏️</span>
<span class="sr-only">Edit @group.Name</span> <span class="sr-only">Edit @group.Name</span>
</button> </button>
<button <button
@@ -82,7 +82,7 @@
title="Delete skill group" title="Delete skill group"
disabled="@(IsMutating || !CanEditCharacter(SelectedCharacter))" disabled="@(IsMutating || !CanEditCharacter(SelectedCharacter))"
@onclick="() => DeleteSkillGroupAsync(group.Id)"> @onclick="() => DeleteSkillGroupAsync(group.Id)">
<span aria-hidden="true">✕</span> <span aria-hidden="true" class="emoji">🗑️</span>
<span class="sr-only">Delete @group.Name</span> <span class="sr-only">Delete @group.Name</span>
</button> </button>
</div> </div>
@@ -106,7 +106,7 @@
title="Edit skill" title="Edit skill"
disabled="@(IsMutating || !CanEditSkill(skill))" disabled="@(IsMutating || !CanEditSkill(skill))"
@onclick="() => OpenEditSkillModal(skill)"> @onclick="() => OpenEditSkillModal(skill)">
<span aria-hidden="true">✎</span> <span aria-hidden="true" class="emoji">✏️</span>
<span class="sr-only">Edit @skill.Name</span> <span class="sr-only">Edit @skill.Name</span>
</button> </button>
<button <button
@@ -115,7 +115,7 @@
title="Roll skill" title="Roll skill"
disabled="@(IsMutating)" disabled="@(IsMutating)"
@onclick="() => RollSkillAsync(skill.Id)"> @onclick="() => RollSkillAsync(skill.Id)">
<span aria-hidden="true">⚄</span> <span aria-hidden="true" class="emoji">🎲</span>
<span class="sr-only">Roll @skill.Name</span> <span class="sr-only">Roll @skill.Name</span>
</button> </button>
<button <button
@@ -124,7 +124,7 @@
title="Delete skill" title="Delete skill"
disabled="@(IsMutating || !CanEditSkill(skill))" disabled="@(IsMutating || !CanEditSkill(skill))"
@onclick="() => DeleteSkillAsync(skill.Id)"> @onclick="() => DeleteSkillAsync(skill.Id)">
<span aria-hidden="true">✕</span> <span aria-hidden="true" class="emoji">🗑️</span>
<span class="sr-only">Delete @skill.Name</span> <span class="sr-only">Delete @skill.Name</span>
</button> </button>
</div> </div>
@@ -164,7 +164,7 @@
title="Edit skill" title="Edit skill"
disabled="@(IsMutating || !CanEditSkill(skill))" disabled="@(IsMutating || !CanEditSkill(skill))"
@onclick="() => OpenEditSkillModal(skill)"> @onclick="() => OpenEditSkillModal(skill)">
<span aria-hidden="true">✎</span> <span aria-hidden="true" class="emoji">✏️</span>
<span class="sr-only">Edit @skill.Name</span> <span class="sr-only">Edit @skill.Name</span>
</button> </button>
<button <button
@@ -173,7 +173,7 @@
title="Roll skill" title="Roll skill"
disabled="@(IsMutating)" disabled="@(IsMutating)"
@onclick="() => RollSkillAsync(skill.Id)"> @onclick="() => RollSkillAsync(skill.Id)">
<span aria-hidden="true">⚄</span> <span aria-hidden="true" class="emoji">🎲</span>
<span class="sr-only">Roll @skill.Name</span> <span class="sr-only">Roll @skill.Name</span>
</button> </button>
<button <button
@@ -182,7 +182,7 @@
title="Delete skill" title="Delete skill"
disabled="@(IsMutating || !CanEditSkill(skill))" disabled="@(IsMutating || !CanEditSkill(skill))"
@onclick="() => DeleteSkillAsync(skill.Id)"> @onclick="() => DeleteSkillAsync(skill.Id)">
<span aria-hidden="true">✕</span> <span aria-hidden="true" class="emoji">🗑️</span>
<span class="sr-only">Delete @skill.Name</span> <span class="sr-only">Delete @skill.Name</span>
</button> </button>
</div> </div>

27
RpgRoller/wwwroot/styles.css
View File

@@ -1,6 +1,7 @@
:root { :root {
--bg-top: #f7f0d8; --bg-top: #f7f0d8;
--bg-bottom: #ecdfc4; --bg-bottom: #ecdfc4;
--button-hover: #dccfb4;
--card: #fffaf0; --card: #fffaf0;
--card-border: #c3b28b; --card-border: #c3b28b;
--text: #2b2418; --text: #2b2418;
@@ -30,14 +31,24 @@ body {
background: radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.32), transparent 45%), background: radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.32), transparent 45%),
linear-gradient(165deg, var(--bg-top), var(--bg-bottom)); linear-gradient(165deg, var(--bg-top), var(--bg-bottom));
color: var(--text); color: var(--text);
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Segoe UI", sans-serif; font-family:
"Baloo 2",
"Nunito",
"Segoe UI",
system-ui,
-apple-system,
sans-serif;
line-height: 1.4; line-height: 1.4;
} }
.emoji {
font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
text-shadow: 0 0 1px black;
}
h1, h1,
h2, h2,
h3 { h3 {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
letter-spacing: 0.02em; letter-spacing: 0.02em;
} }
@@ -354,9 +365,9 @@ select:focus-visible {
} }
.skill-details { .skill-details {
display: grid;
gap: 0.1rem; gap: 0.1rem;
min-width: 0; min-width: 0;
align-content: center;
} }
.skill-details span { .skill-details span {
@@ -380,7 +391,12 @@ select:focus-visible {
border-radius: 999px; border-radius: 999px;
background: transparent; background: transparent;
color: var(--text); color: var(--text);
border-color: #decbb7;
}
.chip-button:hover {
border-color: #8e7b57; border-color: #8e7b57;
background: var(--button-hover);
} }
.create-skill-item { .create-skill-item {
@@ -506,12 +522,12 @@ select:focus-visible {
justify-content: center; justify-content: center;
width: 2.1rem; width: 2.1rem;
height: 2.1rem; height: 2.1rem;
padding-top: 4px;
border: 2px solid #2a2418; border: 2px solid #2a2418;
border-radius: 0.45rem; border-radius: 0.45rem;
background: #ffffff; background: #ffffff;
color: #1f1a13; color: #1f1a13;
font-size: 1.45rem; font-size: 2rem;
font-weight: 700;
line-height: 1; line-height: 1;
} }
@@ -539,7 +555,6 @@ select:focus-visible {
background: #fde0dd; background: #fde0dd;
color: #7f5f55; color: #7f5f55;
border-style: dashed; border-style: dashed;
text-decoration: line-through;
} }
.empty, .empty,