Skip to content

Commit

Permalink
Styling updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@donbwhite
donbwhite committed Dec 3, 2024
1 parent 969cf6a commit 1c8c78f
Show file tree
Hide file tree
Showing 12 changed files with 140 additions and 129 deletions.
Binary file added age-system/src/assets/logos/cthulhumythos.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added age-system/src/assets/logos/technofantasy.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 10 additions & 5 deletions age-system/src/components/qualities/QualitiesClassSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
</div>
</div>
<Teleport to="body">
<QualitiesModal :show="showModal" @close="showModal = false;resetFeature()" :feature="featureNew" :mode="'create'" :qualityOptions="['Ability Focus', 'Ancestry', 'Class', 'Favored Stunt']">
<QualitiesModal :show="showModal" @close="showModal = false;resetFeature()" :feature="featureNew" :mode="'create'" :qualityOptions="qualitOptions">
<template #header>
<h3 class="age-modal-details-header">Create Character Quality</h3>
</template>
Expand All @@ -29,17 +29,22 @@
</template>

<script setup>
import { useItemStore } from '@/sheet/stores/character/characterQualitiesStore';
import { ref } from 'vue';
import { useItemStore } from '@/sheet/stores/character/characterQualitiesStore';
import { useSettingsStore } from '@/sheet/stores/settings/settingsStore';
import QualitiesModal from './QualitiesModal.vue';
import CharacterQualitiesView from './CharacterQualitiesView.vue';
const props = defineProps({
aim: { type: Boolean },
aimValue: { type: Number },
});
const qualitiesArray = ['Ancestry & Class','Ability Focus',
// 'Talent','Specialization',
'Favored Stunt'];
const settings = useSettingsStore();
const qualitiesArray = ref(['Ancestry & Class','Ability Focus','Favored Stunt']);
const qualitOptions = ref(['Ability Focus','Ancestry','Class','Favored Stunt']);
if(settings.gameSystem === 'mage'){
qualitiesArray.value = ['Ability Focus','Favored Stunt'];
qualitOptions.value = ['Ability Focus','Favored Stunt'];
}
const emit = defineEmits(['update:modelValue'])
const showModal = ref(false)
let featureNew = ref({
Expand Down
2 changes: 1 addition & 1 deletion age-system/src/components/qualities/QualitiesTalentSection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
</div>
</div>
<Teleport to="body">
<QualitiesModal :show="showModal" @close="showModal = false;resetFeature()" :feature="featureNew" :mode="'create'" :qualityOptions="['Specialization', 'Talent']">
<QualitiesModal :show="showModal" @close="showModal = false;resetFeature()" :feature="featureNew" :mode="'create'" :qualityOptions="qualitiesArray">
<template #header>
<h3 class="age-modal-details-header">Create Character Expertise</h3>
</template>
Expand Down
110 changes: 110 additions & 0 deletions age-system/src/sheet/scss/fonts.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
@font-face{font-family:'Graphik';font-style:normal;font-weight:400;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikRegular.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:400;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikRegularItalic.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:normal;font-weight:250;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikThin.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:250;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikThinItalic.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:normal;font-weight:275;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikExtralight.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:275;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikExtralightItalic.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:normal;font-weight:300;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikLight.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:300;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikLightItalic.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:normal;font-weight:500;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikMedium.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:500;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikMediumItalic.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:normal;font-weight:600;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikSemibold.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:600;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikSemiboldItalic.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:normal;font-weight:700;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikBold.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:700;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikBoldItalic.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:normal;font-weight:900;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikBlack.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:900;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikBlackItalic.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:normal;font-weight:950;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikSuper.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:950;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikSuperItalic.woff) format('woff')}


// Fantasy AGE
@font-face {
font-family: 'Ringbearer';
font-style: normal;
font-weight: 500;
src: local('Ringbearer'), url('https://fonts.cdnfonts.com/s/8406/RINGM___.woff') format('woff');
}
@font-face {
font-family: 'Tanglewood Tales NF';
font-style: normal;
font-weight: 400;
src: local('Tanglewood Tales NF'), url('https://fonts.cdnfonts.com/s/54733/TanglewoodTalesNF.woff') format('woff');
}
@font-face {
font-family: 'Sanitarium BB';
font-style: normal;
font-weight: 400;
src: local('Sanitarium BB'), url('https://fonts.cdnfonts.com/s/27991/SanitariumBB.woff') format('woff');
}
@font-face {
font-family: 'Technovia';
font-style: normal;
font-weight: 400;
src: local('Technovia'), url('https://fonts.cdnfonts.com/s/60189/technott.woff') format('woff');
}
@font-face {
font-family: 'American Captain';
font-style: normal;
font-weight: 400;
src: local('American Captain'), url('https://fonts.cdnfonts.com/s/13747/American Captain.woff') format('woff');
}

// Modern AGE
@font-face {
font-family: 'Eternal Knight';
font-style: normal;
font-weight: 400;
src: local('Eternal Knight'), url('https://fonts.cdnfonts.com/s/22066/eternalknight.woff') format('woff');
}
@font-face {
font-family: 'Eternal Knight Bold';
font-style: normal;
font-weight: 400;
src: local('Eternal Knight Bold'), url('https://fonts.cdnfonts.com/s/22066/eternalknightbold.woff') format('woff');
}
@font-face {
font-family: 'Eternal Knight Condensed';
font-style: normal;
font-weight: 400;
src: local('Eternal Knight Condensed'), url('https://fonts.cdnfonts.com/s/22066/eternalknightcond.woff') format('woff');
}
@font-face {
font-family: 'Archive';
font-style: normal;
font-weight: 400;
src: local('Archive'), url('https://fonts.cdnfonts.com/s/52090/Archive.woff') format('woff');
}
@font-face {
font-family: 'Archive';
font-style: italic;
font-weight: 400;
src: local('Archive'), url('https://fonts.cdnfonts.com/s/52090/ArchiveItalic.woff') format('woff');
}
@font-face {
font-family: 'Archive';
font-style: normal;
font-weight: 700;
src: local('Archive'), url('https://fonts.cdnfonts.com/s/52090/ArchiveBold.woff') format('woff');
}

// Blue Rose AGE
@font-face{
font-family:'Palatino';
font-style:normal;
font-weight:400;
src:local('Palatino'),url(https://fonts.cdnfonts.com/s/56559/palr45w.woff) format('woff')
}
@font-face{
font-family:'UglyQua';
font-style:normal;
font-weight:500;
src:local('UglyQua'),url(https://fonts.cdnfonts.com/s/450/UglyQua.woff) format('woff')
}

@font-face{
font-family:'UglyQua';
font-style:italic;
font-weight:500;
src:local('UglyQua'),url(https://fonts.cdnfonts.com/s/450/UglyQua-Italic.woff) format('woff')
}
22 changes: 2 additions & 20 deletions age-system/src/sheet/scss/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,31 +17,13 @@
@use 'product/mage.scss';
@use 'product/bluerose.scss';


@use 'fonts';
// TODO IN FUTURE?
// @use 'product/threefold.scss';
// @use 'product/titansgrave.scss';
// @use 'product/cthulhu.scss';


@font-face{font-family:'Graphik';font-style:normal;font-weight:400;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikRegular.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:400;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikRegularItalic.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:normal;font-weight:250;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikThin.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:250;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikThinItalic.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:normal;font-weight:275;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikExtralight.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:275;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikExtralightItalic.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:normal;font-weight:300;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikLight.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:300;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikLightItalic.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:normal;font-weight:500;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikMedium.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:500;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikMediumItalic.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:normal;font-weight:600;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikSemibold.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:600;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikSemiboldItalic.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:normal;font-weight:700;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikBold.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:700;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikBoldItalic.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:normal;font-weight:900;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikBlack.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:900;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikBlackItalic.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:normal;font-weight:950;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikSuper.woff) format('woff')}
@font-face{font-family:'Graphik';font-style:italic;font-weight:950;src:local('Graphik'),url(https://fonts.cdnfonts.com/s/27112/GraphikSuperItalic.woff) format('woff')}
// $ageFAGE2eColor: #1e4e7a;
// $ageCthulhuColor: #1D3729;
// $ageBlueRoseColor: #007bba;
Expand Down Expand Up @@ -594,7 +576,7 @@ body {
height: 25px;
width: 25px;
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23fff" d="M91.773 25.994C189.313 167.854 104.52 157.17 65.64 169.2c38.8 52.918 16.554 102.644-44.503 133.788 52.5 21.085 122.25 30.452 42.027 141.707 79.578-45.024 134.707-48.82 127.13 53.15 57.795-58.495 133.043-87.973 208.054-38.53-8.558-73.916 12.66-106.284 86.88-74.4-79.58-73.01-46.696-116.363.458-158.83-81.492-3.232-92.92-65.497-89.922-139.92-49.183 53.518-86.497 47.756-104.002-56.962-33.806 76.857-79.335 125.91-199.99-3.21zM202.15 135.336c16.1.356 25.565 12.198 34.666 24.678L177.312 263.08c-20.422 1.985-35.31-4.577-41.787-24.123l59.51-103.074c1.93-.326 3.772-.503 5.537-.545.534-.013 1.06-.014 1.578-.002zm69.037 11.197c16.1.352 25.567 12.2 34.668 24.676L238.947 290.24c-20.423 1.985-35.31-4.586-41.785-24.127l66.91-119.03c1.93-.327 3.772-.507 5.537-.55.533-.013 1.058-.013 1.577-.002zm58.704 32.05c16.102.357 25.567 12.198 34.67 24.673l-65.945 117.547c-20.423 1.98-35.31-4.58-41.783-24.123l65.94-117.55c1.93-.325 3.773-.502 5.54-.544.532-.013 1.06-.013 1.58-.002zm46.342 55.233c16.773.098 26.746 11.977 36.354 24.485l-55.557 96.227c-20.026 1.297-34.856-5.367-41.786-24.125l55.56-96.224c1.887-.255 3.693-.372 5.428-.362zM127.55 271.713l105.83 47.52c3.015 21.69-2.782 38.788-21.958 48.91L105.588 320.62c-4.508-21.618 8.273-35.485 21.96-48.907z"/></svg>');

background-color: var(--theme-primary);
}
& .age-checkbox-toggle {
margin-top: 4px;
Expand Down
27 changes: 3 additions & 24 deletions age-system/src/sheet/scss/product/bluerose.scss
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,3 @@
@font-face{
font-family:'Palatino';
font-style:normal;
font-weight:400;
src:local('Palatino'),url(https://fonts.cdnfonts.com/s/56559/palr45w.woff) format('woff')
}
@font-face{
font-family:'UglyQua';
font-style:normal;
font-weight:500;
src:local('UglyQua'),url(https://fonts.cdnfonts.com/s/450/UglyQua.woff) format('woff')
}

@font-face{
font-family:'UglyQua';
font-style:italic;
font-weight:500;
src:local('UglyQua'),url(https://fonts.cdnfonts.com/s/450/UglyQua-Italic.woff) format('woff')
}
$ageBlueRoseColor: var(--theme-primary);
* {
// --background-image: url(/src/assets/background/bluerose-light.jpg);
Expand All @@ -34,7 +15,7 @@ body.bluerose {
& button {
border-color: $ageBlueRoseColor;
color: $ageBlueRoseColor;
background-color: #ecf6ff;
background-color: var(--theme-secondary);
}
& .active {
background-color: $ageBlueRoseColor;
Expand All @@ -45,11 +26,8 @@ body.bluerose {
}
}
& .age-btn {
background-color: #ecf6ff;
border: 2px solid $ageBlueRoseColor;
color: $ageBlueRoseColor;
background-color: #ecf6ff;
border: 2px solid rgb(30, 78, 122);
background-color: var(--theme-secondary);
color: $ageBlueRoseColor;

}
Expand Down Expand Up @@ -78,6 +56,7 @@ body.bluerose {
}
& .age-container-content {
border-color: $ageBlueRoseColor;
border-radius: 4px;
}
& .age-container-content::before,.age-container-content::after, .age-container-content-corner-top-right, .age-container-content-corner-bottom-left {
display: none;
Expand Down
38 changes: 2 additions & 36 deletions age-system/src/sheet/scss/product/fage.scss
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,3 @@
@font-face {
font-family: 'Ringbearer';
font-style: normal;
font-weight: 500;
src: local('Ringbearer'), url('https://fonts.cdnfonts.com/s/8406/RINGM___.woff') format('woff');
}
@font-face {
font-family: 'Tanglewood Tales NF';
font-style: normal;
font-weight: 400;
src: local('Tanglewood Tales NF'), url('https://fonts.cdnfonts.com/s/54733/TanglewoodTalesNF.woff') format('woff');
}
@font-face {
font-family: 'Sanitarium BB';
font-style: normal;
font-weight: 400;
src: local('Sanitarium BB'), url('https://fonts.cdnfonts.com/s/27991/SanitariumBB.woff') format('woff');
}
@font-face {
font-family: 'Technovia';
font-style: normal;
font-weight: 400;
src: local('Technovia'), url('https://fonts.cdnfonts.com/s/60189/technott.woff') format('woff');
}
@font-face {
font-family: 'American Captain';
font-style: normal;
font-weight: 400;
src: local('American Captain'), url('https://fonts.cdnfonts.com/s/13747/American Captain.woff') format('woff');
}

$ageFAGE2eColor: var(--theme-primary);
$ageFAGE2eLightColor: #3e79af;
$ageFAGE2eTechnofantasy: #9d3916;
Expand All @@ -48,7 +17,7 @@ body.fantasyAge {
& button {
border-color: $ageFAGE2eColor;
color: $ageFAGE2eColor;
background-color: #ecf6ff;
background-color: var(--theme-secondary);
}
& .active {
background-color: $ageFAGE2eColor;
Expand All @@ -59,12 +28,9 @@ body.fantasyAge {
}
}
& .age-btn {
background-color: #ecf6ff;
border: 2px solid $ageFAGE2eColor;
color: $ageFAGE2eColor;
background-color: #ecf6ff;
border: 2px solid rgb(30, 78, 122);
color: $ageFAGE2eColor;
background-color: var(--theme-secondary);

}
& .age-icon-btn {
Expand Down
42 changes: 2 additions & 40 deletions age-system/src/sheet/scss/product/mage.scss
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,3 @@
@font-face {
font-family: 'Eternal Knight';
font-style: normal;
font-weight: 400;
src: local('Eternal Knight'), url('https://fonts.cdnfonts.com/s/22066/eternalknight.woff') format('woff');
}
@font-face {
font-family: 'Eternal Knight Bold';
font-style: normal;
font-weight: 400;
src: local('Eternal Knight Bold'), url('https://fonts.cdnfonts.com/s/22066/eternalknightbold.woff') format('woff');
}
@font-face {
font-family: 'Eternal Knight Condensed';
font-style: normal;
font-weight: 400;
src: local('Eternal Knight Condensed'), url('https://fonts.cdnfonts.com/s/22066/eternalknightcond.woff') format('woff');
}
@font-face {
font-family: 'Archive';
font-style: normal;
font-weight: 400;
src: local('Archive'), url('https://fonts.cdnfonts.com/s/52090/Archive.woff') format('woff');
}
@font-face {
font-family: 'Archive';
font-style: italic;
font-weight: 400;
src: local('Archive'), url('https://fonts.cdnfonts.com/s/52090/ArchiveItalic.woff') format('woff');
}
@font-face {
font-family: 'Archive';
font-style: normal;
font-weight: 700;
src: local('Archive'), url('https://fonts.cdnfonts.com/s/52090/ArchiveBold.woff') format('woff');
}


$ageMAGEColor: var(--theme-primary);
$ageMAGEColorLight: #ecfaff;

Expand All @@ -59,8 +21,8 @@ body.modernAge {
}
}
& .age-btn {
background-color: $ageMAGEColorLight;
border: 2px solid rgb(30, 78, 122);
background-color: var(--theme-secondary);
border: 2px solid var(--theme-primary);
color: $ageMAGEColor;
border-radius: 0;
font-weight: 600;
Expand Down
7 changes: 7 additions & 0 deletions age-system/src/utility/productLineStyle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,34 @@ export function productLineStyle(gameSystem:string,lightDark:string,args?:any){
document.body.classList.add("fantasyAge");
if(args?.cthulhuMythos){
document.documentElement.style.setProperty('--theme-primary', '#005a3f');
document.documentElement.style.setProperty('--theme-secondary','#e9fff8');
} else if(args?.technofantasy){
document.documentElement.style.setProperty('--theme-primary', '#9d3916');
document.documentElement.style.setProperty('--theme-secondary','#fff2ed');
} else {
document.documentElement.style.setProperty('--theme-primary', '#1e4e7a');
document.documentElement.style.setProperty('--theme-secondary','#ecf6ff');
}
break;
case 'mage':
document.body.classList.add("modernAge");
if(args?.cyberpunk){
document.documentElement.style.setProperty('--theme-primary', '#9f0058');
document.documentElement.style.setProperty('--theme-secondary','#fef8fb');
}else {
document.documentElement.style.setProperty('--theme-primary', '#027CAC');
document.documentElement.style.setProperty('--theme-secondary','#ecf6ff');
}
break;
case 'blue rose':
document.body.classList.add("bluerose");
document.documentElement.style.setProperty('--theme-primary', '#007bba');
document.documentElement.style.setProperty('--theme-secondary','#ecf6ff');
break;
case 'cthulhu':
document.body.classList.add("cthulhu");
document.documentElement.style.setProperty('--theme-primary', '#1D3729');
document.documentElement.style.setProperty('--theme-secondary','#e9fff8');
break;
}
}
Loading

0 comments on commit 1c8c78f

Please sign in to comment.