feat(theme): implement Falukant theme with updated styles and components
This commit is contained in:
Torsten Schulz (local)
136
frontend/src/assets/falukant-theme.scss
Normal file
136
frontend/src/assets/falukant-theme.scss
Normal file
@@ -0,0 +1,136 @@
|
||||
/* Falukant is a self-contained light game-world theme. It is only enabled by
|
||||
the route class on App.vue and intentionally leaves semantic state colors alone. */
|
||||
.app-shell--falukant {
|
||||
--falukant-parchment: #fffdf7;
|
||||
--falukant-linen: #f7f3e9;
|
||||
--falukant-copper: #9a7136;
|
||||
--falukant-copper-soft: rgba(154, 113, 54, 0.12);
|
||||
--falukant-ink: #29362e;
|
||||
--falukant-line: rgba(75, 91, 75, 0.18);
|
||||
}
|
||||
|
||||
.app-shell--falukant .app-content,
|
||||
.app-shell--falukant .app-content__scroll {
|
||||
background: #f7f5ed;
|
||||
}
|
||||
|
||||
.app-shell--falukant .app-content__route--panel {
|
||||
background: var(--falukant-parchment);
|
||||
border-color: var(--falukant-line);
|
||||
}
|
||||
|
||||
.app-shell--falukant .falukant-page,
|
||||
.app-shell--falukant [class$="-view"] {
|
||||
color: var(--falukant-ink);
|
||||
}
|
||||
|
||||
.app-shell--falukant .surface-card,
|
||||
.app-shell--falukant .course-card,
|
||||
.app-shell--falukant .info-card,
|
||||
.app-shell--falukant .section-card,
|
||||
.app-shell--falukant .panel,
|
||||
.app-shell--falukant .card,
|
||||
.app-shell--falukant table {
|
||||
border-color: var(--falukant-line) !important;
|
||||
}
|
||||
|
||||
.app-shell--falukant .surface-card,
|
||||
.app-shell--falukant .card,
|
||||
.app-shell--falukant .panel,
|
||||
.app-shell--falukant .section-card {
|
||||
background: var(--falukant-parchment) !important;
|
||||
}
|
||||
|
||||
.app-shell--falukant input:not([type="checkbox"]):not([type="radio"]),
|
||||
.app-shell--falukant select,
|
||||
.app-shell--falukant textarea {
|
||||
background: #fffefa;
|
||||
border-color: var(--falukant-line);
|
||||
color: var(--falukant-ink);
|
||||
}
|
||||
|
||||
.app-shell--falukant .falukant-primary-action,
|
||||
.app-shell--falukant .repair-confirm-button,
|
||||
.app-shell--falukant .select-heir-button,
|
||||
.app-shell--falukant .set-heir-button,
|
||||
.app-shell--falukant .btn-create-activity,
|
||||
.app-shell--falukant .approve-button {
|
||||
background: var(--color-primary) !important;
|
||||
color: var(--color-text-on-accent) !important;
|
||||
box-shadow: 0 5px 12px rgba(42, 90, 56, 0.16);
|
||||
}
|
||||
|
||||
.app-shell--falukant .falukant-primary-action:not(:disabled):hover,
|
||||
.app-shell--falukant .repair-confirm-button:not(:disabled):hover,
|
||||
.app-shell--falukant .select-heir-button:not(:disabled):hover,
|
||||
.app-shell--falukant .set-heir-button:not(:disabled):hover,
|
||||
.app-shell--falukant .btn-create-activity:not(:disabled):hover,
|
||||
.app-shell--falukant .approve-button:not(:disabled):hover {
|
||||
background: var(--color-primary-hover) !important;
|
||||
color: var(--color-text-on-accent) !important;
|
||||
}
|
||||
|
||||
.app-shell--falukant .button-secondary,
|
||||
.app-shell--falukant .button--secondary,
|
||||
.app-shell--falukant .btn-back,
|
||||
.app-shell--falukant .cancel-button {
|
||||
background: #fffefa !important;
|
||||
color: var(--falukant-ink) !important;
|
||||
border-color: var(--falukant-line) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.app-shell--falukant .status-bar,
|
||||
.app-shell--falukant .branch-selection,
|
||||
.app-shell--falukant .director-info,
|
||||
.app-shell--falukant .production-section,
|
||||
.app-shell--falukant .sale-section,
|
||||
.app-shell--falukant .revenue-section,
|
||||
.app-shell--falukant .storage-section {
|
||||
background: var(--falukant-parchment) !important;
|
||||
border-color: var(--falukant-line) !important;
|
||||
color: var(--falukant-ink) !important;
|
||||
}
|
||||
|
||||
.app-shell--falukant .simple-tab {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.app-shell--falukant .simple-tab.active {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-accent);
|
||||
}
|
||||
|
||||
.app-shell--falukant .falukant-kicker,
|
||||
.app-shell--falukant .eyebrow,
|
||||
.app-shell--falukant .section-label {
|
||||
color: var(--falukant-copper);
|
||||
background: var(--falukant-copper-soft);
|
||||
}
|
||||
|
||||
.app-shell--falukant .dialog,
|
||||
.app-shell--falukant .modal-content {
|
||||
background: var(--falukant-parchment);
|
||||
border-color: var(--falukant-line);
|
||||
}
|
||||
|
||||
.app-shell--falukant .dialog-header,
|
||||
.app-shell--falukant .modal-header,
|
||||
.app-shell--falukant .dialog-footer,
|
||||
.app-shell--falukant .modal-footer {
|
||||
background: var(--falukant-linen);
|
||||
border-color: var(--falukant-line);
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.app-shell--falukant .simple-tabs {
|
||||
overflow-x: auto;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.app-shell--falukant .simple-tab {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
@@ -132,17 +132,17 @@ span.button {
|
||||
border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.button:hover,
|
||||
span.button:hover {
|
||||
button:hover:not(:disabled),
|
||||
.button:hover:not(:disabled):not([disabled]):not(.disabled):not([aria-disabled="true"]),
|
||||
span.button:hover:not([disabled]):not(.disabled):not([aria-disabled="true"]) {
|
||||
transform: translateY(-1px);
|
||||
background: var(--color-primary-hover);
|
||||
box-shadow: 0 8px 16px rgba(38, 91, 56, 0.22);
|
||||
}
|
||||
|
||||
button:active,
|
||||
.button:active,
|
||||
span.button:active {
|
||||
button:active:not(:disabled),
|
||||
.button:active:not(:disabled):not([disabled]):not(.disabled):not([aria-disabled="true"]),
|
||||
span.button:active:not([disabled]):not(.disabled):not([aria-disabled="true"]) {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user