build script + editor + other things

This commit is contained in:
2023-06-16 19:20:44 +02:00
parent 15c33ce2c5
commit b6fb8ef294
8 changed files with 176 additions and 169 deletions

View File

@@ -23,42 +23,27 @@
</template>
<style>
:root, :root.light {
--primary-color: #2c3e50;
--accent-background: rgb(30, 30, 82);
--secondary-color: white;
--background-color: white;
--popup-color: rgb(224, 224, 224);
--accent-color: #42b983;
--hover-color: rgb(165, 165, 165);
--accent-background-hover: #4380a8;
--overlay-color: rgba(37, 37, 37, 0.575);
--inactive-color: rgb(100, 100, 100);
--highlight-backdrop: rgb(143, 134, 192);
--PI: 3.14159265358979;
}
:root, :root.light {
--primary-color: #2c3e50;
--accent-background: rgb(30, 30, 82);
--secondary-color: white;
--background-color: white;
--popup-color: rgb(224, 224, 224);
--accent-color: #42b983;
--hover-color: rgb(165, 165, 165);
--accent-background-hover: #4380a8;
--overlay-color: rgba(37, 37, 37, 0.575);
--inactive-color: rgb(100, 100, 100);
--highlight-backdrop: rgb(143, 134, 192);
--PI: 3.14159265358979;
}
:root.dark {
--primary-color: white;
--accent-background: rgb(56, 56, 112);
--secondary-color: white;
--background-color: rgb(32, 32, 32);
--popup-color: rgb(58, 58, 58);
--accent-color: #42b983;
--hover-color: rgb(83, 83, 83);
--accent-background-hover: #4380a8;
--overlay-color: rgba(104, 104, 104, 0.575);
--inactive-color: rgb(190, 190, 190);
--highlight-backdrop: rgb(85, 63, 207);
}
@media ( prefers-color-scheme: dark ) {
:root {
:root.dark {
--primary-color: white;
--popup-color: rgb(58, 58, 58);
--accent-background: rgb(56, 56, 112);
--secondary-color: white;
--background-color: rgb(32, 32, 32);
--popup-color: rgb(58, 58, 58);
--accent-color: #42b983;
--hover-color: rgb(83, 83, 83);
--accent-background-hover: #4380a8;
@@ -66,85 +51,104 @@
--inactive-color: rgb(190, 190, 190);
--highlight-backdrop: rgb(85, 63, 207);
}
}
::selection {
background-color: var( --highlight-backdrop );
color: var( --secondary-color );
}
@media ( prefers-color-scheme: dark ) {
:root {
--primary-color: white;
--popup-color: rgb(58, 58, 58);
--accent-background: rgb(56, 56, 112);
--secondary-color: white;
--background-color: rgb(32, 32, 32);
--accent-color: #42b983;
--hover-color: rgb(83, 83, 83);
--accent-background-hover: #4380a8;
--overlay-color: rgba(104, 104, 104, 0.575);
--inactive-color: rgb(190, 190, 190);
--highlight-backdrop: rgb(85, 63, 207);
}
}
#themeSelector {
background-color: rgba( 0, 0, 0, 0 );
color: var( --primary-color );
font-size: 130%;
padding: 0;
margin: 0;
border: none;
cursor: pointer;
}
::selection {
background-color: var( --highlight-backdrop );
color: var( --secondary-color );
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#themeSelector {
background-color: rgba( 0, 0, 0, 0 );
color: var( --primary-color );
font-size: 130%;
padding: 0;
margin: 0;
border: none;
cursor: pointer;
}
#app {
transition: 0.5s;
background-color: var( --background-color );
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: var( --primary-color );
height: 100%;
display: flex;
flex-direction: column;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
nav {
padding: 30px;
}
#app {
transition: 0.5s;
background-color: var( --background-color );
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: var( --primary-color );
height: 100%;
display: flex;
flex-direction: column;
}
nav a {
font-weight: bold;
color: var( --primary-color );
}
nav {
padding: 30px;
}
nav a.router-link-exact-active {
color: #42b983;
}
nav a {
font-weight: bold;
color: var( --primary-color );
}
.scale-enter-active,
.scale-leave-active {
transition: all 0.5s ease;
}
nav a.router-link-exact-active {
color: #42b983;
}
.scale-enter-from,
.scale-leave-to {
opacity: 0;
transform: scale(0.9);
}
.scale-enter-active,
.scale-leave-active {
transition: all 0.5s ease;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.4s ease;
}
.scale-enter-from,
.scale-leave-to {
opacity: 0;
transform: scale(0.9);
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.4s ease;
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 48
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 48
}
.clr-open {
border: black solid 1px !important;
}
</style>
<script>

View File

@@ -11,7 +11,7 @@
<div id="stages" class="stages">
<div id="rectangular" v-if="shape == 'rectangular'" class="stages"></div>
<div id="trapezoid" v-else-if="shape == 'trapezoid'" class="stages"><div id="trapezoid-ingredient"></div></div>
<div id="circular" v-else-if="shape == 'circular'" class="stages">Stage</div>
<div id="circular" v-else-if="shape == 'circular'" class="stages"><div id="circular-ingredient"></div></div>
</div>
</template>
@@ -25,7 +25,7 @@
border: solid black 2px;
}
#trapezoid {
#trapezoid, #circular {
overflow: hidden;
}
@@ -38,6 +38,16 @@
top: 29vh;
right: 120vh;
}
#circular-ingredient {
border: solid black 2px;
border-radius: 100%;
height: 199%;
width: 199%;
position: relative;
top: 0;
right: 100%;
}
</style>
<script>

View File

@@ -11,7 +11,7 @@
<div id="stages">
<div id="rectangular" v-if="shape == 'rectangular'"></div>
<div id="trapezoid" v-if="shape == 'trapezoid'"></div>
<div id="circular" v-if="orishapegin == 'circular'"></div>
<div id="circular" v-if="origin == 'circular'"></div>
</div>
</template>

View File

@@ -17,15 +17,29 @@
</div>
<div class="ticket-settings">
<h3>Ticket Settings</h3>
<div class="category" v-for="category in event.categories">
<table class="category" v-for="category in event.categories">
{{ category.name }}:
<div v-for="price in category.price">
{{ price.name }}:
<input type="number" v-model="price.price">
</div>
{{ category.fg }}
{{ category.bg }}
</div>
<tr v-for="price in category.price">
<td>
{{ price.name }}:
</td>
<td>
<input type="number" v-model="price.price">
</td>
</tr>
<tr>
<td>Foreground colour</td>
<td>
<input type="text" data-coloris v-model="category.fg" onkeydown="return false;">
</td>
</tr>
<tr>
<td>Background colour</td>
<td>
<input type="text" data-coloris v-model="category.bg" onkeydown="return false;">
</td>
</tr>
</table>
</div>
<div class="special-settings">
<h3>Special Settings</h3>