torsten/yourpart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(theme): implement Falukant theme with updated styles and components

Browse Source
This commit is contained in:
Torsten Schulz (local)
2026-08-21 14:28:05 +02:00
parent bb27660f85
commit 846ba5b3c4
27 changed files with 329 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/views/falukant/AllCharactersTest.vue
View File

@@ -49,7 +49,7 @@ export default {
.all-characters-test { padding: 16px }
.controls { margin-bottom: 12px }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px }
.card { border: 1px solid #e0e0e0; padding: 8px; border-radius: 6px; background: #fff }
.card { border: 1px solid var(--color-border); padding: 8px; border-radius: 6px; background: var(--color-surface) }
.label { font-weight: 600; margin-bottom: 6px }
.row { display: flex; gap: 8px }
.cell { flex: 1; text-align: center }

21
frontend/src/views/falukant/BranchView.vue
View File

@@ -1308,9 +1308,8 @@ export default {
.branch-hero {
padding: 24px 26px;
margin-bottom: 16px;
background:
radial-gradient(circle at top right, rgba(248, 162, 43, 0.16), transparent 28%),
linear-gradient(180deg, rgba(255, 250, 243, 0.98) 0%, rgba(247, 238, 224, 0.98) 100%);
background: #fffdf7;
border-left: 3px solid #b18445;
}
.branch-kicker {
@@ -1318,8 +1317,8 @@ export default {
margin-bottom: 10px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(248, 162, 43, 0.14);
color: #8a5411;
background: rgba(154, 113, 54, 0.12);
color: #80612f;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
@@ -1431,17 +1430,17 @@ export default {
.send-all-buttons button {
padding: 0.5rem 1rem;
background-color: #F9A22C;
color: #000000;
border: 1px solid #F9A22C;
background-color: var(--color-primary);
color: var(--color-text-on-accent);
border: 1px solid var(--color-primary);
border-radius: 4px;
cursor: pointer;
}
.send-all-buttons button:hover {
background-color: #fdf1db;
color: #7E471B;
border: 1px solid #7E471B;
background-color: var(--color-primary-hover);
color: var(--color-text-on-accent);
border: 1px solid var(--color-primary-hover);
}
.no-action {

8
frontend/src/views/falukant/ChurchView.vue
View File

@@ -631,20 +631,20 @@ th {
.church-table thead th {
position: sticky;
top: 0;
background: #FFF;
background: var(--color-surface-strong);
z-index: 1;
padding: 8px;
border: 1px solid #ddd;
border: 1px solid var(--color-border);
text-align: left;
}
.church-table tbody td {
padding: 8px;
border: 1px solid #ddd;
border: 1px solid var(--color-border);
}
.church-table tbody tr.own-position {
background-color: #e0e0e0;
background-color: var(--color-surface-accent);
font-weight: bold;
}

2
frontend/src/views/falukant/CreateView.vue
View File

@@ -77,7 +77,7 @@ form {
row-gap: 15px;
width: fit-content;
margin: 0 auto;
border: 1px solid #ccc;
border: 1px solid var(--color-border);
padding: 20px;
border-radius: 4px;
}

4
frontend/src/views/falukant/DirectorView.vue
View File

@@ -206,7 +206,7 @@ export default {
}
.selected {
background-color: #f0f8ff;
background-color: var(--color-surface-accent);
}
.actions {
@@ -269,4 +269,4 @@ h2 {
.director-row {
cursor: pointer;
}
</style>
</style>

14
frontend/src/views/falukant/EducationView.vue
View File

@@ -295,19 +295,25 @@ h2 {
.simple-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 1rem;
}
.simple-tab {
padding: 0.5rem 1rem;
background: #fff;
border: none;
background: var(--color-surface-strong);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text-primary);
box-shadow: none;
cursor: pointer;
transition: background 0.2s;
}
.simple-tab.active {
background: #F9A22C;
color: #000;
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-text-on-accent);
}
.tab-content {
margin-top: 1rem;

17
frontend/src/views/falukant/FamilyView.vue
View File

@@ -1268,9 +1268,8 @@ export default {
.family-hero {
padding: 24px 26px;
margin-bottom: 16px;
background:
radial-gradient(circle at top right, rgba(248, 162, 43, 0.16), transparent 28%),
linear-gradient(180deg, rgba(255, 250, 243, 0.98) 0%, rgba(247, 238, 224, 0.98) 100%);
background: #fffdf7;
border-left: 3px solid #b18445;
}
.family-kicker {
@@ -1278,8 +1277,8 @@ export default {
margin-bottom: 10px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(248, 162, 43, 0.14);
color: #8a5411;
background: rgba(154, 113, 54, 0.12);
color: #80612f;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
@@ -1723,9 +1722,9 @@ export default {
.self-character-3d {
width: 250px;
height: 350px;
border: 1px solid #ccc;
border: 1px solid var(--color-border);
border-radius: 4px;
background-color: #fdf1db;
background-color: var(--color-surface-accent);
flex-shrink: 0;
}
@@ -1796,7 +1795,7 @@ export default {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background-repeat: no-repeat;
background-color: #fdf1db;
background-color: var(--color-surface-accent);
box-shadow: var(--shadow-soft);
flex: 0 0 auto;
}
@@ -1808,7 +1807,7 @@ export default {
.character-3d-frame {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: #fdf1db;
background-color: var(--color-surface-accent);
flex-shrink: 0;
}

4
frontend/src/views/falukant/HealthView.vue
View File

@@ -194,7 +194,7 @@ h2 {
.measures-panel {
flex: 2;
padding: 10px;
border-left: 1px solid #ccc;
border-left: 1px solid var(--color-border);
}
.measures-table {
@@ -205,7 +205,7 @@ h2 {
.measures-table th,
.measures-table td {
border: 1px solid #ddd;
border: 1px solid var(--color-border);
padding: 8px;
text-align: left;
}

4
frontend/src/views/falukant/HouseView.vue
View File

@@ -458,7 +458,7 @@ h2 {
height: 341px;
background-repeat: no-repeat;
image-rendering: crisp-edges;
border: 1px solid #ccc;
border: 1px solid var(--color-border);
border-radius: 4px;
}
@@ -599,7 +599,7 @@ h2 {
height: 100px;
background-repeat: no-repeat;
image-rendering: crisp-edges;
border: 1px solid #ccc;
border: 1px solid var(--color-border);
border-radius: 4px;
background-size: contain;
/* scale image to container */

2
frontend/src/views/falukant/MoneyHistoryView.vue
View File

@@ -191,7 +191,7 @@ table {
th,
td {
border: 1px solid #ccc;
border: 1px solid var(--color-border);
padding: 8px;
text-align: left;
}

2
frontend/src/views/falukant/NobilityView.vue
View File

@@ -284,7 +284,7 @@
h2 { padding-top: 20px; }
.nobility-section,
.advance-section {
border: 1px solid #ccc;
border: 1px solid var(--color-border);
border-radius: 4px;
margin: 10px 0;
padding: 10px;

9
frontend/src/views/falukant/OverviewView.vue
View File

@@ -915,9 +915,8 @@ export default {
.falukant-hero {
padding: 24px 26px;
margin-bottom: 16px;
background:
radial-gradient(circle at top right, rgba(248, 162, 43, 0.16), transparent 28%),
linear-gradient(180deg, rgba(255, 250, 243, 0.98) 0%, rgba(247, 238, 224, 0.98) 100%);
background: #fffdf7;
border-left: 3px solid #b18445;
}
.falukant-kicker {
@@ -925,8 +924,8 @@ export default {
margin-bottom: 10px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(248, 162, 43, 0.14);
color: #8a5411;
background: rgba(154, 113, 54, 0.12);
color: #80612f;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;

40
frontend/src/views/falukant/ReputationView.vue
View File

@@ -365,20 +365,48 @@ h2 {
.simple-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 1rem;
}
.simple-tab {
min-height: 38px;
padding: 0.5rem 1rem;
background: #fff;
border: none;
background: var(--color-surface-strong);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: none;
color: var(--color-text-primary);
cursor: pointer;
transition: background 0.2s;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.simple-tab:hover:not(:disabled) {
transform: none;
background: var(--color-primary-soft);
border-color: var(--color-primary);
box-shadow: none;
}
.simple-tab:focus-visible {
outline: 3px solid rgba(120, 195, 138, 0.42);
outline-offset: 2px;
}
.simple-tab:disabled {
background: var(--color-bg-muted);
border-color: var(--color-border);
color: var(--color-text-muted);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.simple-tab.active {
background: #F9A22C;
color: #000;
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-text-on-accent);
}
.tab-content {
@@ -424,4 +452,4 @@ table th {
margin: -0.5rem 0 1rem;
font-weight: bold;
}
</style>
</style>

18
frontend/src/views/falukant/UndergroundView.vue
View File

@@ -597,10 +597,10 @@ h2 {
}
.create-activity {
border: 1px solid #ccc;
border: 1px solid var(--color-border);
padding: 1rem;
margin-bottom: 1rem;
background: #fafafa;
background: var(--color-surface);
border-radius: 4px;
}
@@ -615,7 +615,7 @@ h2 {
width: 100%;
padding: 0.4rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border: 1px solid var(--color-border);
border-radius: 4px;
}
@@ -644,15 +644,15 @@ h2 {
.attacks-list th,
.attacks-list td {
padding: 8px;
border: 1px solid #ddd;
border: 1px solid var(--color-border);
text-align: left;
vertical-align: top;
}
.suggestions {
position: absolute;
background: #fff;
border: 1px solid #ccc;
background: var(--color-surface-strong);
border: 1px solid var(--color-border);
z-index: 10;
max-height: 200px;
overflow-y: auto;
@@ -670,7 +670,7 @@ h2 {
}
.suggestions li:hover {
background: #eee;
background: var(--color-primary-soft);
}
.activity-status__badge {
@@ -680,8 +680,8 @@ h2 {
border-radius: 999px;
font-size: 0.88rem;
font-weight: 600;
background: #ececec;
color: #333;
background: var(--color-bg-muted);
color: var(--color-text-primary);
}
.activity-status__badge.is-pending {

44
frontend/src/views/public/FalukantLandingView.vue
View File

@@ -32,14 +32,17 @@
max-width: 1100px;
margin: 0 auto;
padding: 48px 20px 72px;
color: #40261a;
color: var(--color-text-primary);
}
.hero {
min-width: 0;
padding: 32px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, #f7e0bb 0%, #f6c27d 45%, #e8924d 100%);
box-shadow: 0 20px 60px rgba(106, 56, 20, 0.18);
background: #fffdf7;
border: 1px solid rgba(154, 113, 54, 0.24);
border-left: 4px solid #b18445;
box-shadow: 0 16px 36px rgba(76, 61, 36, 0.08);
}
.eyebrow {
@@ -48,12 +51,16 @@
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #80612f;
}
.hero h1 {
margin: 0;
font-size: clamp(2rem, 4vw, 3.6rem);
line-height: 1.08;
overflow-wrap: break-word;
hyphens: auto;
word-break: normal;
}
.lead {
@@ -67,13 +74,18 @@
display: inline-block;
margin-top: 24px;
padding: 12px 20px;
border-radius: 999px;
background: #40261a;
color: #fff;
border-radius: var(--radius-md);
background: var(--color-primary);
color: var(--color-text-on-accent);
text-decoration: none;
font-weight: 700;
}
.cta:hover {
background: var(--color-primary-hover);
color: var(--color-text-on-accent);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
@@ -84,8 +96,8 @@
.grid article {
padding: 24px;
border-radius: var(--radius-lg);
background: #fff7ef;
border: 1px solid rgba(64, 38, 26, 0.08);
background: #fffefa;
border: 1px solid rgba(75, 91, 75, 0.16);
}
.grid h2 {
@@ -97,4 +109,20 @@
margin: 0;
line-height: 1.65;
}
@media (max-width: 480px) {
.marketing-page {
padding: 24px 12px 44px;
}
.hero,
.grid article {
padding: 22px 18px;
}
.hero h1 {
font-size: clamp(1.58rem, 8.2vw, 2.15rem);
line-height: 1.12;
}
}
</style>