Spythere/genera-tor
1
0
Fork 0
mirror of https://github.com/Spythere/genera-tor.git synced 2026-05-02 21:18:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: order dark mode; refreshed color palette

Browse Source
This commit is contained in:
Spythere
2025-02-06 20:47:59 +01:00
parent 1b8bf5cc45
commit 99e55bb8b9
11 changed files with 347 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Order.vue
+85 -46
View File
@@ -1,5 +1,5 @@
<template>
<div class="order">
<div class="order dark">
<div class="order_content">
<transition name="order-anim" mode="out-in">
<keep-alive>
@@ -47,28 +47,18 @@ export default defineComponent({
<style lang="scss">
@import '../styles/global.scss';
// Order scrollbar
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #fff;
}
::-webkit-scrollbar-thumb {
background: #ccc;
}
::-webkit-scrollbar-thumb:hover {
background: #aaa;
}
$darkModeBgCol: $bgColDarker;
$darkModeTextCol: #eee;
.order {
background-color: white;
color: black;
height: 925px;
&.dark {
background-color: $darkModeBgCol;
color: $darkModeTextCol;
}
max-height: 95vh;
overflow: auto;
@@ -79,10 +69,28 @@ export default defineComponent({
padding: 0;
}
.header {
padding: 0.5em;
border: 2px solid black;
border-bottom: none;
textarea:focus-visible {
outline: 2px solid $accentCol;
}
input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible {
outline: 2px solid $accentCol;
}
input[type='checkbox'],
input[type='radio'],
select {
margin-top: 0.5em;
margin-right: 0.5em;
font-size: 0.8em;
color: black;
}
textarea.others {
width: 100%;
min-height: 200px;
resize: vertical;
}
@media screen and (max-width: 550px) {
@@ -90,6 +98,12 @@ export default defineComponent({
}
}
.order_header {
padding: 0.5em;
border: 2px solid black;
border-bottom: none;
}
.order_content {
padding: 0.5em;
}
@@ -112,16 +126,22 @@ export default defineComponent({
align-items: center;
}
input {
.horizontal-bar {
width: 100%;
height: 2px;
background-color: black;
margin: 0.5em 0;
}
.order input {
max-width: 100px;
background-color: transparent;
outline: none;
border: none;
border-bottom: 2px dotted black;
font-size: 0.9em;
text-align: center;
color: black;
border-bottom: 2px dotted black;
&:focus-visible {
border-bottom: 2px solid $accentCol;
@@ -132,23 +152,48 @@ input {
}
}
input[type='checkbox'],
input[type='radio'],
textarea,
select {
&:focus-visible {
outline: 2px solid $accentCol;
/* Dark mode */
.order.dark {
input {
border-color: $darkModeTextCol !important;
color: $darkModeTextCol !important;
&:focus-visible {
border-bottom: 2px solid $accentCol !important;
}
&::placeholder {
color: #ccc !important;
}
}
select {
color: $darkModeTextCol !important;
border-color: $darkModeTextCol !important;
}
option,
textarea {
color: $darkModeTextCol !important;
border-color: $darkModeTextCol !important;
background-color: $bgColDarker !important;
}
.horizontal-bar {
background-color: white;
}
.order_header,
.order_other,
table,
tr,
td {
border-color: $darkModeTextCol !important;
}
}
select {
margin-top: 0.5em;
margin-right: 0.5em;
font-size: 0.8em;
}
.table-section {
table.options-table {
.order_table-container {
table {
width: 100%;
td:first-child {
@@ -186,10 +231,4 @@ select {
opacity: 0;
}
}
textarea.others {
width: 100%;
min-height: 200px;
resize: vertical;
}
</style>
src/components/OrderList.vue
+2 -2
View File
@@ -146,7 +146,7 @@ h3 {
margin-bottom: 1em;
text-align: center;
background-color: #222;
background-color: $bgColDarker;
padding: 1em;
margin-bottom: 0.5em;
}
@@ -155,7 +155,7 @@ li {
text-align: left;
padding: 1em;
margin: 0.5em;
background-color: #222;
background-color: $bgColDarker;
cursor: pointer;
src/components/OrderMessage.vue
+5 -2
View File
@@ -239,6 +239,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import "../styles/global.scss";
.order-message {
h3 {
margin: 0;
@@ -254,11 +256,12 @@ export default defineComponent({
.message_body {
height: 250px;
overflow: auto;
background-color: $bgColLighter;
color: white;
text-align: justify;
background-color: #fff;
border-radius: 0.5em;
color: black;
padding: 0.5em;
user-select: none;
-moz-user-select: none;
src/components/OrderN.vue
+4 -3
View File
@@ -1,6 +1,6 @@
<template>
<section class="order-n">
<section class="header" ref="header">
<section class="order_header" ref="header">
<h2 class="flex-center">
Rozkaz pisemny "N" nr
<input type="number" v-model="order.header.orderNo" placeholder="nr rozkazu" min="1" />
@@ -12,8 +12,9 @@
<input type="text" v-model="order.header.date" placeholder="data" />
</div>
</section>
<section class="table-section">
<table class="options-table">
<section class="order_table-container">
<table>
<tbody>
<tr>
<td>
src/components/OrderO.vue
-10
View File
@@ -159,16 +159,6 @@ th {
.order_header {
padding: 0.5em 0;
border: 2px solid black;
border-bottom: none;
}
.horizontal-bar {
width: 100%;
height: 2px;
background-color: black;
margin: 0.5em 0;
}
.order_table {
src/components/OrderS.vue
+4 -3
View File
@@ -1,6 +1,6 @@
<template>
<section class="order-s">
<section class="header">
<section class="order_header">
<h2 class="flex-center">
Rozkaz pisemny "S" nr
<input type="number" v-model="order.header.orderNo" placeholder="nr rozkazu" min="1" />
@@ -17,8 +17,9 @@
<input type="text" v-model="order.header.date" placeholder="data" />
</div>
</section>
<section class="table-section">
<table class="options-table">
<section class="order_table-container">
<table>
<tbody>
<tr>
<td>
src/components/OrderTrainPicker.vue
+5 -10
View File
@@ -288,21 +288,17 @@ export default defineComponent({
}
select {
border: 2px solid white;
color: white;
background-color: $bgColDarker;
font-size: 1em;
width: 100%;
margin: 0;
padding: 0.15em;
&[disabled] {
color: gray;
}
}
option {
color: black;
}
}
.content {
@@ -319,7 +315,7 @@ export default defineComponent({
ul.train-list {
li {
background-color: #111;
background-color: $bgColDarker;
padding: 0.5em;
margin-top: 0.5em;
@@ -327,7 +323,6 @@ ul.train-list {
&.no-trains {
font-weight: bold;
background-color: #222;
cursor: default;
}
src/components/SideBar.vue
+1 -1
View File
@@ -81,7 +81,7 @@ export default defineComponent({
align-items: center;
color: white;
background-color: #1d1d1d;
background-color: $bgColDarker;
width: 50px;
height: 85px;
src/styles/global.scss
+41 -25
View File
@@ -1,8 +1,28 @@
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;600&display=swap');
$bgCol: #313638;
$bgCol: #141414;
$bgColLighter: #292929;
$bgColDarker: #080808;
$accentCol: #ff6060;
$warnCol: #ffe02e;
$whiteDimmerCol: #ccc;
// Global scrollbar style
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
background: #333;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
body,
html {
@@ -46,17 +66,20 @@ button {
button.g-button {
text-align: center;
color: white;
transition:
color 100ms ease-in-out,
background-color 100ms ease-in-out;
&.action {
border: 2px solid white;
background-color: $bgColDarker;
padding: 0.5em;
&:focus-visible {
border: 2px solid $accentCol;
outline: 2px solid $accentCol;
}
&:hover {
color: $accentCol;
&:hover:not([data-disabled='true']) {
background-color: $bgColLighter;
}
}
@@ -82,7 +105,6 @@ button.g-button {
&.text {
padding: 0;
color: #000;
&:focus-visible {
color: $accentCol;
@@ -109,8 +131,19 @@ select {
border-radius: 0.3em;
text-align: center;
&:hover {
border: 2px solid $accentCol;
border: 2px solid #888;
color: white;
outline: none;
margin: 0;
padding: 0.15em;
&[disabled] {
color: gray;
}
&:focus-visible {
border-color: $accentCol;
}
}
@@ -123,23 +156,6 @@ ul {
text-align: center;
}
// Global scrollbar style
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #333;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
// Modal
.g-modal {
position: fixed;
src/views/Home.vue
+1 -2
View File
@@ -138,8 +138,7 @@ export default defineComponent({
grid-template-rows: auto 1fr;
overflow: hidden;
max-height: 95vh;
min-height: 600px;
height: 95vh;
}
.message_nav {