moved styles to main.css

This commit is contained in:
2025-01-18 20:59:35 +01:00
parent 70e9fa7704
commit 204a72de33
9 changed files with 307 additions and 404 deletions
+226 -8
View File
@@ -25,12 +25,14 @@ a,
body {
display: flex;
place-items: center;
height: 100%;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
min-height: 100vh;
}
}
@@ -39,12 +41,16 @@ a,
display: flex;
justify-content: space-around;
align-items: center;
background-color: var(--vt-c-black-soft); /* Use your palette from base.css */
background-color: var(--vt-c-black-soft);
/* Use your palette from base.css */
color: var(--vt-c-white);
height: 60px;
width: 100%; /* Full width */
position: fixed; /* Fix it to the top */
width: 100%;
/* Full width */
position: fixed;
/* Fix it to the top */
top: 0;
left: 0;
z-index: 1000;
padding: 0 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -66,17 +72,30 @@ a,
}
.top-nav li a:hover {
color: var(--vt-c-indigo); /* Highlight on hover */
color: var(--vt-c-indigo);
/* Highlight on hover */
}
/* Main Content Area */
.main-content {
margin-top: 60px; /* Prevent content from overlapping the nav */
flex: 1;
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
/* Fix it to the top */
left: 0;
top: 0;
margin-top: 0px;
/* Prevent content from overlapping the nav */
padding: 20px;
width: 100%; /* Full width */
width: 100%;
/* Full width */
box-sizing: border-box;
background-color: var(--color-background); /* Use palette from base.css */
min-height: calc(100vh - 60px); /* Fill the remaining height */
background-color: var(--color-background);
/* Use palette from base.css */
min-height: calc(100vh - 60px);
/* Fill the remaining height */
}
@media (max-width: 768px) {
@@ -89,4 +108,203 @@ a,
flex-direction: column;
gap: 10px;
}
}
.equipment-view {
color: #fff;
}
.cd-table {
width: 100%;
border-collapse: collapse;
position: relative;
margin-top: 1rem;
}
.cd-table thead {
position: sticky;
top: 0;
background: #fff;
color: #000000;
z-index: 1;
}
.cd-table th,
.cd-table td {
padding: 0.5rem;
text-align: left;
border: 1px solid #ddd;
}
.cd-table th {
background-color: #f5f5f5;
font-weight: bold;
}
.cd-table tr:nth-child(even) {
background-color: #f9f9f9;
color: #000000;
}
.cd-list {
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
}
/* Custom scrollbar styling */
.cd-list::-webkit-scrollbar {
width: 8px;
}
.cd-list::-webkit-scrollbar-track {
background: #f1f1f1;
}
.cd-list::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.cd-list::-webkit-scrollbar-thumb:hover {
background: #555;
}
.cd-view {
color: #fff;
}
.character-details {
background-color: #444;
/* Background color */
color: #fff;
/* Text color */
padding: 20px;
border-radius: 8px;
width: 90%;
margin: 0 auto;
font-family: Arial, sans-serif;
}
.character-header h2 {
font-size: 1.5rem;
text-align: center;
color: #ddd;
margin-bottom: 20px;
}
.character-overview {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.character-image img {
width: 150px;
height: auto;
border-radius: 8px;
border: 2px solid #333;
}
.character-stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
width: 100%;
}
.stat {
background-color: #555;
border: 1px solid #333;
text-align: center;
padding: 10px;
border-radius: 5px;
font-size: 0.9rem;
font-weight: bold;
}
.stat span {
display: block;
font-size: 0.8rem;
color: #aaa;
}
.character-info {
background-color: #333;
padding: 15px;
border-radius: 8px;
line-height: 1.6;
white-space: nowrap;
}
.character-info p {
margin: 10px 0;
}
.character-info strong {
color: #eee;
}
.character-info em {
font-style: italic;
color: #ccc;
}
.character-details {
position: relative;
background-color: #444;
color: #fff;
padding: 20px;
border-radius: 8px;
width: 90%;
margin: 0 auto;
font-family: Arial, sans-serif;
min-height: 400px;
/* Ensure there's space for content */
}
.character-main {
margin-bottom: 20px;
}
.character-aspect {
padding: 20px;
background-color: #333;
border-radius: 8px;
min-height: 200px;
/* Space for content */
}
.submenu {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #222;
display: flex;
justify-content: center;
padding: 10px;
border-top: 1px solid #555;
}
.submenu button {
background-color: #555;
color: #fff;
border: none;
padding: 10px 20px;
margin: 0 10px;
border-radius: 4px;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.3s;
}
.submenu button:hover {
background-color: #777;
}
.submenu button.active {
background-color: #007BFF;
color: #fff;
font-weight: bold;
}
@@ -24,137 +24,6 @@
</template>
<style>
.character-details {
background-color: #444; /* Background color */
color: #fff; /* Text color */
padding: 20px;
border-radius: 8px;
width: 90%;
margin: 0 auto;
font-family: Arial, sans-serif;
}
.character-header h2 {
font-size: 1.5rem;
text-align: center;
color: #ddd;
margin-bottom: 20px;
}
.character-overview {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.character-image img {
width: 150px;
height: auto;
border-radius: 8px;
border: 2px solid #333;
}
.character-stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
width: 100%;
}
.stat {
background-color: #555;
border: 1px solid #333;
text-align: center;
padding: 10px;
border-radius: 5px;
font-size: 0.9rem;
font-weight: bold;
}
.stat span {
display: block;
font-size: 0.8rem;
color: #aaa;
}
.character-info {
background-color: #333;
padding: 15px;
border-radius: 8px;
line-height: 1.6;
white-space: nowrap;
}
.character-info p {
margin: 10px 0;
}
.character-info strong {
color: #eee;
}
.character-info em {
font-style: italic;
color: #ccc;
}
.character-details {
position: relative;
background-color: #444;
color: #fff;
padding: 20px;
border-radius: 8px;
width: 90%;
margin: 0 auto;
font-family: Arial, sans-serif;
min-height: 400px; /* Ensure there's space for content */
}
.character-main {
margin-bottom: 20px;
}
.character-aspect {
padding: 20px;
background-color: #333;
border-radius: 8px;
min-height: 200px; /* Space for content */
}
.submenu {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #222;
display: flex;
justify-content: center;
padding: 10px;
border-top: 1px solid #555;
}
.submenu button {
background-color: #555;
color: #fff;
border: none;
padding: 10px 20px;
margin: 0 10px;
border-radius: 4px;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.3s;
}
.submenu button:hover {
background-color: #777;
}
.submenu button.active {
background-color: #007BFF;
color: #fff;
font-weight: bold;
}
</style>
+2 -4
View File
@@ -1,5 +1,5 @@
<template>
<div class="datasheet-view" v-if="character">
<div class="cd-view" v-if="character">
<!-- Character Overview -->
<div class="character-overview">
<div class="character-image">
@@ -57,9 +57,7 @@
</template>
<style>
.datasheet-view {
color: #fff;
}
</style>
+5 -60
View File
@@ -1,8 +1,8 @@
<template>
<div class="equipment-view">
<div class="cd-view">
<h2>{{ character.name }}'s Ausrüstung</h2>
<div class="equipment-list">
<table class="equipment-table">
<div class="cd-list">
<table class="cd-table">
<thead>
<tr>
<th>{{ $t('equipment.name') }}</th>
@@ -28,67 +28,12 @@
</template>
</tbody>
</table>
</div> <!--- end equipment-list-->
</div> <!--- end cd-list-->
</div> <!--- end character -datasheet-->
</template>
<style>.equipment-view {
color: #fff;
}
.equipment-table {
width: 100%;
border-collapse: collapse;
position: relative;
margin-top: 1rem;
}
.equipment-table thead {
position: sticky;
top: 0;
background: #fff;
z-index: 1;
}
.equipment-table th,
.equipment-table td {
padding: 0.5rem;
text-align: left;
border: 1px solid #ddd;
}
.equipment-table th {
background-color: #f5f5f5;
font-weight: bold;
}
.equipment-table tr:nth-child(even) {
background-color: #f9f9f9;
color: #000000;
}
.equipment-list {
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
}
/* Custom scrollbar styling */
.equipment-list::-webkit-scrollbar {
width: 8px;
}
.equipment-list::-webkit-scrollbar-track {
background: #f1f1f1;
}
.equipment-list::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.equipment-list::-webkit-scrollbar-thumb:hover {
background: #555;
}
<style>
</style>
+2 -4
View File
@@ -1,14 +1,12 @@
<template>
<div class="experiance-view">
<div class="cd-view">
</div> <!--- end character -datasheet-->
</template>
<style>
.experiance-view {
color: #800;
}
</style>
+5 -61
View File
@@ -1,8 +1,8 @@
<template>
<div class="skill-view">
<h2>{{ character.name }}'s Skills</h2>
<div class="skill-list">
<table class="skill-table">
<div class="cd-view">
<h2>{{ character.name }}'s Fertigkeiten</h2>
<div class="cd-list">
<table class="cd-table">
<thead>
<tr>
<th>{{ $t('skill.name') }}</th>
@@ -26,68 +26,12 @@
</template>
</tbody>
</table>
</div> <!--- end skill-list-->
</div> <!--- end cd-list-->
</div> <!--- end character -datasheet-->
</template>
<style>
.skill-view {
color: #fff;
}
.skill-table {
width: 100%;
border-collapse: collapse;
position: relative;
margin-top: 1rem;
}
.skill-table thead {
position: sticky;
top: 0;
background: #fff;
z-index: 1;
}
.skill-table th,
.skill-table td {
padding: 0.5rem;
text-align: left;
border: 1px solid #ddd;
}
.skill-table th {
background-color: #f5f5f5;
font-weight: bold;
}
.skill-table tr:nth-child(even) {
background-color: #f9f9f9;
color: #000000;
}
.skill-list {
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
}
/* Custom scrollbar styling */
.skill-list::-webkit-scrollbar {
width: 8px;
}
.skill-list::-webkit-scrollbar-track {
background: #f1f1f1;
}
.skill-list::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.skill-list::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
+5 -61
View File
@@ -1,8 +1,8 @@
<template>
<div class="spell-view">
<h2>{{ character.name }}'s Skills</h2>
<div class="spell-list">
<table class="spell-table">
<div class="cd-view">
<h2>{{ character.name }}'s Zauber</h2>
<div class="cd-list">
<table class="cd-table">
<thead>
<tr>
<th>{{ $t('spell.name') }}</th>
@@ -22,68 +22,12 @@
</template>
</tbody>
</table>
</div> <!--- end spell-list-->
</div> <!--- end cd-list-->
</div> <!--- end character -datasheet-->
</template>
<style>
.spell-view {
color: #fff;
}
.spell-table {
width: 100%;
border-collapse: collapse;
position: relative;
margin-top: 1rem;
}
.spell-table thead {
position: sticky;
top: 0;
background: #fff;
z-index: 1;
}
.spell-table th,
.spell-table td {
padding: 0.5rem;
text-align: left;
border: 1px solid #ddd;
}
.spell-table th {
background-color: #f5f5f5;
font-weight: bold;
}
.spell-table tr:nth-child(even) {
background-color: #f9f9f9;
color: #000000;
}
.spell-list {
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
}
/* Custom scrollbar styling */
.spell-list::-webkit-scrollbar {
width: 8px;
}
.spell-list::-webkit-scrollbar-track {
background: #f1f1f1;
}
.spell-list::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.spell-list::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
+7 -62
View File
@@ -1,8 +1,8 @@
<template>
<div class="weapon-view">
<h2>{{ character.name }}'s Ausrüstung</h2>
<div class="weapon-list">
<table class="weapon-table">
<div class="cd-view">
<h2>{{ character.name }}'s Waffen</h2>
<div class="cd-list">
<table class="cd-table">
<thead>
<tr>
<th>{{ $t('weapon.name') }}</th>
@@ -28,74 +28,19 @@
</template>
</tbody>
</table>
</div> <!--- end weapon-list-->
</div> <!--- end cd-list-->
</div> <!--- end character -datasheet-->
</template>
<style>.weapon-view {
color: #fff;
}
.weapon-table {
width: 100%;
border-collapse: collapse;
position: relative;
margin-top: 1rem;
}
<style>
.weapon-table thead {
position: sticky;
top: 0;
background: #fff;
z-index: 1;
}
.weapon-table th,
.weapon-table td {
padding: 0.5rem;
text-align: left;
border: 1px solid #ddd;
}
.weapon-table th {
background-color: #f5f5f5;
font-weight: bold;
}
.weapon-table tr:nth-child(even) {
background-color: #f9f9f9;
color: #000000;
}
.weapon-list {
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
}
/* Custom scrollbar styling */
.weapon-list::-webkit-scrollbar {
width: 8px;
}
.weapon-list::-webkit-scrollbar-track {
background: #f1f1f1;
}
.weapon-list::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.weapon-list::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
<script>
export default {
name: "EquipmentView",
name: "WeaponView",
props: {
character: {
type: Object,
+55 -13
View File
@@ -1,17 +1,24 @@
export default {
char:'Char',
stats: {
strength: 'Str',
dexterity: 'Dex',
agility: 'Agi',
constitution: 'Con',
intelligence: 'Int',
toughness: 'Tou',
charisma: 'Cha',
attackValue: 'AV',
willpower: 'Will',
movement: 'Mov',
lifepoints: 'HP',
astralpoints: 'AP',
strength: 'St',
dexterity: 'Gs',
agility: 'Gw',
constitution: 'Ko',
intelligence: 'In',
spelltalent: 'Zt',
beauty: 'Au',
charisma: 'pA',
willpower: 'Wk',
poisontolerance: 'GiT',
movement: 'B',
lifepoints: 'LP',
staminapoints: 'AP',
divinegrace:'GG',//'Göttliche Gnade',
fatesfavor:'SG',//'Schicksalsgunst',
luckypoints:'Lucky points'
},
menu:{
Datasheet:'Datasheet',
Skill:'Skills',
Weapon:'Weapons',
@@ -21,5 +28,40 @@ export default {
History:'History',
Notes:'Notes',
Campagne:'Campagne',
}
//Character:'Charakter',
},
equipment:{
name:'Name',
description:'Description',
weight:'Weight',
amount:'Amount',
value:'Value',
notes:'notes',
bonus:'Bonus',
contained_in:'contained in',
},
skill:{
name:'Name',
description:'Description',
value:'Skill value',
note:'Notes',
bonus:'Bonus',
pp:'PP',
},
spell:{
name:'Name',
description:'Description',
bonus:'Bonus',
pp:'AP',
quelle:'Source',
},
weapon:{
name:'Name',
description:'Description',
weight:'Weight',
amount:'Amount',
value:'Value',
bonus:'Bonus',
contained_in:'contained in',
},
}