change CSS to dark theme
This commit is contained in:
parent
0051d87d47
commit
4cb56824f6
|
@ -2,7 +2,6 @@ import { createApp } from 'vue'
|
||||||
import './style.scss'
|
import './style.scss'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import { state } from "./state";
|
import { state } from "./state";
|
||||||
import 'bulma/css/bulma.css'
|
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,33 @@
|
||||||
|
$background: hsl(0, 0%, 29%); // Bulma's $dark-grey
|
||||||
|
$body-background-color: hsl(0, 0%, 21%); // Bulma's $grey-darker
|
||||||
|
$text: hsl(0, 0%, 96%); // Bulma's $white-ter
|
||||||
|
$text-light: hsl(0, 0%, 98%); // Bulma's $white-bis
|
||||||
|
$text-strong: hsl(0, 0%, 93%); // Bulma's $grey-lightest
|
||||||
|
|
||||||
|
|
||||||
|
// must be after assignments!
|
||||||
|
@import '../node_modules/bulma/bulma.sass';
|
||||||
|
|
||||||
|
.modal-card-body {
|
||||||
|
background-color: $body-background-color;
|
||||||
|
}
|
||||||
|
.modal-card-head {
|
||||||
|
border-bottom: 1px solid $primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-card-foot {
|
||||||
|
border-top: 1px solid $primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textarea, .table, .input {
|
||||||
|
background-color: $background;
|
||||||
|
border-color: $primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tr, .th {
|
||||||
|
border: 1px solid $primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
background-color: $background;
|
||||||
|
}
|
|
@ -31,60 +31,67 @@ const submit = async () => {
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<section class="section">
|
<section class="section">
|
||||||
<div class="field">
|
<div class=columns>
|
||||||
<label for="name" class="label">Name</label>
|
<div class="column is-2"></div>
|
||||||
<div class="control">
|
<div class="column is-7">
|
||||||
<input type="text" name="name" class="input" v-model="name" />
|
<h1 class="title">Add a new track</h1>
|
||||||
|
<div class="field">
|
||||||
|
<label for="name" class="label">Name</label>
|
||||||
|
<div class="control">
|
||||||
|
<input type="text" name="name" class="input" v-model="name" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="description" class="label">Description</label>
|
||||||
|
<div class="control">
|
||||||
|
<textarea class="textarea" name="description" cols="30" rows="5" v-model="description"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="icon" class="label">Icon</label>
|
||||||
|
<div class="control">
|
||||||
|
<input type="text" name="icon" class="input" v-model="icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field is-grouped">
|
||||||
|
<div class="control">
|
||||||
|
<label for="enabled" class="label">
|
||||||
|
<input type="checkbox" name="enabled" class="checkbox" v-model="enabled" />
|
||||||
|
Enabled?
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="control">
|
||||||
|
<label for="multiple-entries" class="label">
|
||||||
|
<input type="checkbox" name="multiple-entries" class="checkbox" v-model="multipleEntriesPerDay" />
|
||||||
|
Multiple Entries per Day?
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<div class="control">
|
||||||
|
TODO color choice
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<div class="control">
|
||||||
|
<label for="order" class="label">
|
||||||
|
<input type="number" name="order" class="input" v-model="order" />
|
||||||
|
Order
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="buttons">
|
||||||
|
<RouterLink to="/">
|
||||||
|
<button class="button is-danger">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</RouterLink>
|
||||||
|
<button :class="submitButtonClass" @click="submit">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="column"></div>
|
||||||
<div class="field">
|
|
||||||
<label for="description" class="label">Description</label>
|
|
||||||
<div class="control">
|
|
||||||
<textarea name="description" cols="30" rows="5" v-model="description"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<label for="icon" class="label">Icon</label>
|
|
||||||
<div class="control">
|
|
||||||
<input type="text" name="icon" class="input" v-model="icon" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field is-grouped">
|
|
||||||
<div class="control">
|
|
||||||
<label for="enabled" class="label">
|
|
||||||
<input type="checkbox" name="enabled" class="checkbox" v-model="enabled" />
|
|
||||||
Enabled?
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="control">
|
|
||||||
<label for="multiple-entries" class="label">
|
|
||||||
<input type="checkbox" name="multiple-entries" class="checkbox" v-model="multipleEntriesPerDay" />
|
|
||||||
Multiple Entries per Day?
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<div class="control">
|
|
||||||
TODO color choice
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="field">
|
|
||||||
<div class="control">
|
|
||||||
<label for="order" class="label">
|
|
||||||
<input type="number" name="order" class="input" v-model="order" />
|
|
||||||
Order
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="buttons">
|
|
||||||
<RouterLink to="/">
|
|
||||||
<button class="button is-danger">
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</RouterLink>
|
|
||||||
<button :class="submitButtonClass" @click="submit">
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
Loading…
Reference in a new issue