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,6 +31,10 @@ const submit = async () => {
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<section class="section">
|
<section class="section">
|
||||||
|
<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">
|
<div class="field">
|
||||||
<label for="name" class="label">Name</label>
|
<label for="name" class="label">Name</label>
|
||||||
<div class="control">
|
<div class="control">
|
||||||
|
@ -40,7 +44,7 @@ const submit = async () => {
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="description" class="label">Description</label>
|
<label for="description" class="label">Description</label>
|
||||||
<div class="control">
|
<div class="control">
|
||||||
<textarea name="description" cols="30" rows="5" v-model="description"></textarea>
|
<textarea class="textarea" name="description" cols="30" rows="5" v-model="description"></textarea>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
|
@ -86,5 +90,8 @@ const submit = async () => {
|
||||||
Save
|
Save
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="column"></div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
Loading…
Reference in a new issue