TWS/kalkutago
8
0
Fork 1
Code Issues 9 Pull requests 1 Packages Projects 1 Releases Wiki Activity

change CSS to dark theme #17

Open
scott wants to merge 1 commit from scott/kalkutago:tweak/ui into main
pull from: scott/kalkutago:tweak/ui
merge into: TWS:main
Conversation 0 Commits 1 Files changed 3 +93 -54
3 changed files with 93 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
client/src/main.ts
View file

@ -2,7 +2,6 @@ import { createApp } from 'vue'
import './style.scss'
import router from './router'
import { state } from "./state";
import 'bulma/css/bulma.css'
import App from './App.vue'

33
client/src/style.scss
View file

@ -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;
}

113
client/src/views/NewTrackView.vue
View file

@ -31,60 +31,67 @@ const submit = async () => {
</script>
<template>
<section class="section">
<div class="field">
<label for="name" class="label">Name</label>
<div class="control">
<input type="text" name="name" class="input" v-model="name" />
<div class=columns>
<div class="column is-2"></div>
<div class="column is-7">
<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 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 class="column"></div>
</div>
</section>
</template>