Commit d2c07460 authored by ransome1's avatar ransome1
Browse files

GUI refresh

parent fe080b66
......@@ -92,13 +92,13 @@
"artifactName": "${productName}-${version}-${arch}.${ext}"
},
"scripts": {
"pack": "yarn build:css && electron-builder --dir",
"build:windows": "yarn build:css && electron-builder -w --publish never",
"build:macos": "yarn build:css && electron-builder -m --publish never",
"build:linux": "yarn build:css && electron-builder -l --publish never",
"build:appx": "yarn build:css && electron-builder -w appx --publish never",
"build:windows": "yarn build:css && yarn build:pegjs && electron-builder -w --publish never",
"build:macos": "yarn build:css && yarn build:pegjs && electron-builder -m --publish never",
"build:linux": "yarn build:css && yarn build:pegjs && electron-builder -l --publish never",
"build:appx": "yarn build:css && yarn build:pegjs && electron-builder -w appx --publish never",
"build:appimage": "yarn build:css && yarn build:pegjs && electron-builder -l AppImage --publish never",
"build:css": "sass src/scss/style.scss:src/css/style.css",
"build:pegjs": "peggy --format es --output src/js/filterlang.mjs src/js/filterlang.pegjs",
"pack": "yarn build:css && yarn build:pegjs && electron-builder --dir",
"lint": "eslint --ext .js, src --ext .mjs, src",
"test": "mocha --timeout 10000",
"test1": "mocha ./test/onboarding.js --timeout 10000",
......
......@@ -10,7 +10,6 @@ body.dark a {
color: white;
}
body.dark a:hover,
body.dark button:hover,
body.dark strong {
color: #CCCDCF !important;
}
......@@ -31,6 +30,12 @@ body.dark input:focus,
body.dark select:focus {
background-color: #2d2d2d !important;
}
body.dark .is-focused .inputWrapper label,
body.dark .is-focused .inputWrapper i.fa-search,
body.dark .inputWrapper.is-focused label,
body.dark .inputWrapper.is-focused i.fa-search {
color: #f5f5f5;
}
body.dark input::placeholder {
color: #5a5a5a !important;
}
......@@ -42,24 +47,23 @@ body.dark input[type=checkbox]:active {
body.dark input[type=range] {
background: #5a5a5a !important;
}
body.dark input[type=range]::-webkit-slider-thumb {
background: #f5f5f5;
box-shadow: 0 0 1em #212224;
}
body.dark button {
color: white !important;
background: transparent !important;
color: #f5f5f5;
background: #2d2d2d;
}
body.dark button i {
color: #CCCDCF !important;
}
body.dark button.is-link,
body.dark .button.is-link:hover {
background-color: #2d2d2d !important;
color: #CCCDCF;
}
body.dark button.is-link svg,
body.dark .button.is-link:hover svg {
color: inherit !important;
body.dark button:focus-visible {
color: white;
background: #5a5a5a;
}
body.dark .button[disabled],
body.dark fieldset[disabled] {
background-color: transparent;
body.dark button:disabled {
opacity: 0.5;
}
body.dark button.is-outlined:hover {
background: #3B3B3B !important;
......@@ -81,9 +85,19 @@ body.dark table tr td {
body.dark table tr th {
color: white !important;
}
body.dark table.files tr td:last-child i {
body.dark table.files tr td:last-child a {
color: white;
}
body.dark table.files tr td:last-child a:focus-visible {
color: #212224 !important;
}
body.dark table.files button {
color: #f5f5f5;
background: #212224;
}
body.dark table.files button:disabled {
opacity: 0.5;
}
body.dark nav {
background-color: #2d2d2d;
}
......@@ -121,48 +135,56 @@ body.dark #todoTableSearchContainer input[type=search]::-webkit-search-cancel-bu
background-color: #f5f5f5;
}
body.dark #todoTableSearchContainer #todoTableSearchAddTodo {
background: #f5f5f5;
background: #CCCDCF;
color: #212224;
}
body.dark #todoTableSearchContainer #todoTableSearchAddTodo:hover,
body.dark #todoTableSearchContainer #todoTableSearchAddTodo:focus,
body.dark #todoTableSearchContainer #todoTableSearchAddTodo:focus-visible {
background: white;
}
body.dark #todoTableSearchContainer i.fa-search {
color: #f5f5f5;
color: #212224 !important;
background: #f5f5f5;
}
body.dark #todoTableSearchContainer #btnToggleViewContainer {
background: transparent !important;
}
body.dark #resultStats .tag {
background-color: #3B3B3B !important;
color: #CCCDCF !important;
}
body.dark #resultStats .tag strong {
color: white !important;
}
body.dark #todoTable .todo#previousItem.is-highlighted {
background-color: #3B3B3B;
}
body.dark #todoTable .todo:hover .cell .button,
body.dark #todoTable .todo.due .button {
body.dark #todoTable .todo:hover .cell button,
body.dark #todoTable .todo.due button {
color: #f5f5f5;
}
body.dark #todoTable .group.due {
color: #ebebeb;
}
body.dark #todoTable .group.due .button {
body.dark #todoTable .group.due button {
color: inherit;
}
body.dark #todoTable .todo {
border-color: #3B3B3B;
}
body.dark #todoTable .todo .checkbox a {
body.dark #todoTable .todo .cell.checkbox a {
color: #CCCDCF;
font-size: 1.25em;
}
body.dark #todoTable .todo .checkbox a:hover {
color: white;
body.dark #todoTable .todo .cell.checkbox a:focus-visible {
color: white !important;
}
body.dark #todoTable .todo .cell.checkbox a:hover {
color: white !important;
}
body.dark #todoTable .todo .cell.text {
color: #CCCDCF;
}
body.dark #todoTable .todo .cell.text:focus-visible {
background: #2d2d2d !important;
}
body.dark #todoTable .todo .cell.itemDueDate {
color: white;
}
......@@ -198,11 +220,6 @@ body.dark #todoTable .todo .cell .is-white {
body.dark #modalForm i {
color: #CCCDCF !important;
}
body.dark #modalForm button {
border-color: #3B3B3B !important;
border-right: 1px solid #212224 !important;
background: transparent !important;
}
body.dark #modalForm .field input,
body.dark #modalForm .field input::placeholder,
body.dark #modalForm .field select,
......@@ -249,6 +266,9 @@ body.dark #drawerContainer .drawer h4.is-4 {
body.dark #drawerContainer .drawer h4.is-4 i {
color: #CCCDCF !important;
}
body.dark #drawerContainer .drawer button span.tag {
color: #5a5a5a;
}
body.dark #drawerContainer .drawer #sortByContainer li {
background: #2d2d2d;
color: white;
......@@ -276,57 +296,54 @@ body.dark #todoTableWrapper::-webkit-scrollbar-thumb:window-inactive,
body.dark #todoTableWrapper::-webkit-scrollbar-thumb {
background: #3B3B3B;
}
body.dark #filterContext .card {
background: #3B3B3B;
}
body.dark #filterContext .card #filterContextSave {
background-color: transparent !important;
border-right: 1px solid #212224 !important;
}
body.dark #filterContext .card-footer {
border-top: 1px solid #212224 !important;
body.dark #filterContext,
body.dark #todoContext {
box-shadow: 0 0 1em #212224 !important;
}
body.dark #filterContext a,
body.dark #todoContext a {
color: #f5f5f5;
}
body.dark #filterContext a:hover,
body.dark #todoContext a:hover {
color: #CCCDCF;
background: #2d2d2d !important;
}
body.dark #todoContext .dropdown-content {
color: white;
background-color: #3B3B3B !important;
body.dark #filterContext .card,
body.dark #todoContext .card {
background: #3B3B3B;
}
body.dark #todoContext .dropdown-content .dropdown-item:hover {
background: #2d2d2d;
body.dark #filterContext .card #filterContextDelete,
body.dark #todoContext .card #filterContextDelete {
color: #ff3860 !important;
}
body.dark .contexts .button {
body.dark .contexts button {
color: #c5ede3;
background: #247561;
}
body.dark .contexts .button span.tag {
color: #184e41;
body.dark .contexts button span.tag {
color: #184e41 !important;
background: #c9eee5;
}
body.dark .contexts .button:focus-visible {
background: #309c81;
}
body.dark .contexts .button.is-dark {
background: #184e41;
body.dark .contexts button.is-dark,
body.dark .contexts button:focus-visible {
background: #184e41 !important;
color: white;
}
body.dark .projects .button {
body.dark .projects button {
color: #f1d6f1;
background: #822c82;
}
body.dark .projects .button span.tag {
color: #5c1f5c;
body.dark .projects button span.tag {
color: #5c1f5c !important;
background: #f2daf2;
}
body.dark .projects .button:focus-visible {
background: #a839a8;
}
body.dark .projects .button.is-dark {
background: #5c1f5c;
body.dark .projects button.is-dark,
body.dark .projects button:focus-visible {
background: #5c1f5c !important;
color: white;
}
body.dark .priority .button {
body.dark .priority button {
opacity: 0.9;
}
body.dark .toggle .switch .slider {
......@@ -341,24 +358,29 @@ body.dark .toggle .switch input:focus + .slider {
body.dark .toggle .switch input:focus-visible {
outline: 2px solid white !important;
}
body.dark .modal .modal-content .card {
body.dark .card {
background: #3B3B3B;
color: #CCCDCF;
}
body.dark .modal .modal-content .card .card-header-title {
color: white;
body.dark .card .card-footer-item:hover {
color: #CCCDCF;
}
body.dark .modal .modal-content .card .card-footer,
body.dark .modal .modal-content .card .card-footer-item {
border-color: #2d2d2d;
body.dark .card .card-footer-item:focus-visible {
color: #f5f5f5 !important;
background: #2d2d2d !important;
}
body.dark .modal .modal-content .card .card-footer-item:hover {
color: #CCCDCF;
body.dark .card .card-footer {
border-color: #2d2d2d !important;
}
body.dark .card .card-footer-item {
border-color: #2d2d2d !important;
background: transparent;
color: #f5f5f5 !important;
}
body.dark .modal.content {
color: #CCCDCF !important;
}
body.dark .modal.content .button,
body.dark .modal.content button,
body.dark .modal.content button,
body.dark .modal.content select {
background: #2d2d2d !important;
......@@ -418,7 +440,7 @@ body.dark .message.fixed .message-body {
color: #CCCDCF;
background: #3B3B3B !important;
}
body.dark .message.fixed .message-body .button {
body.dark .message.fixed .message-body button {
background: #2d2d2d !important;
}
body.dark .dueDate #datePickerInput,
......@@ -428,7 +450,7 @@ body.dark .dueDate #datePickerInput::placeholder {
body.dark .datepicker {
background: transparent;
}
body.dark .datepicker .button {
body.dark .datepicker button {
background: transparent !important;
}
body.dark .datepicker .datepicker-cell.today.focused:not(.selected),
......@@ -443,13 +465,13 @@ body.dark .datepicker .datepicker-picker {
background: #2d2d2d;
color: white;
}
body.dark .datepicker .datepicker-picker .button,
body.dark .datepicker .datepicker-picker .button:hover,
body.dark .datepicker .datepicker-picker .datepicker-header .datepicker-controls .button:hover {
body.dark .datepicker .datepicker-picker button,
body.dark .datepicker .datepicker-picker button:hover,
body.dark .datepicker .datepicker-picker .datepicker-header .datepicker-controls button:hover {
background: none;
color: inherit;
}
body.dark .datepicker .datepicker-picker .datepicker-footer .datepicker-controls .button {
body.dark .datepicker .datepicker-picker .datepicker-footer .datepicker-controls button {
color: inherit;
}
body.dark .datepicker .datepicker-picker .datepicker-cell.selected,
......@@ -469,6 +491,9 @@ body.dark .contentContainer .subtitle,
body.dark .contentContainer .subtitle strong {
color: #CCCDCF;
}
body.dark .contentContainer .btnOnboarding:focus-visible {
color: #CCCDCF;
}
@font-face {
font-family: "FreeSans";
......@@ -509,34 +534,60 @@ body::-webkit-scrollbar {
filter: opacity(75%) grayscale(100%);
}
button,
.button,
.button:focus,
.button:active,
.button:active,
.button:after,
.button::before,
.button:active:after {
color: #3273dc;
border: none !important;
box-shadow: none !important;
.card {
box-shadow: 0 0 1em #ccc;
}
.button:hover,
button:hover {
color: #2d2d2d;
.card-footer {
clear: both;
}
.card-footer .card-footer-item,
.card-footer .card-footer-item:focus {
border-radius: 0;
border-right: 1px solid #ebebeb;
}
.card-footer .card-footer-item:first-child {
border-bottom-left-radius: 0.65em;
}
.card-footer .card-footer-item:last-child {
border-right: none;
border-bottom-right-radius: 0.65em;
}
.card-footer .card-footer-item:focus-visible {
color: #212224 !important;
background-color: #f5f5f5 !important;
}
.button i {
button {
font-size: 1em;
color: #3273dc;
background: white;
border: none;
border-radius: 0.65em;
outline: none;
box-shadow: 0;
padding: 0.55em 0.75em;
cursor: pointer;
}
.button.is-greyed-out {
cursor: not-allowed;
button:hover,
button:focus-visible {
color: #5a5a5a;
background: white;
}
button:hover i,
button:focus-visible i {
color: inherit;
}
.button.is-link:hover {
color: #f5f5f5;
button i {
color: #3273dc;
}
button:disabled,
button.is-greyed-out {
cursor: not-allowed;
filter: grayscale(100%);
}
input,
......@@ -565,7 +616,10 @@ textarea {
.inputWrapper input[type=search],
.inputWrapper input[type=text],
.inputWrapper textarea {
padding: 2.2em 1em 1.3em 1.5em;
padding: 2em 1em 1.2em 1.5em;
}
.inputWrapper textarea {
padding-bottom: 0.75em;
}
.inputWrapper input::placeholder,
.inputWrapper textarea::placeholder {
......@@ -580,6 +634,13 @@ textarea {
z-index: 70;
}
.is-focused .inputWrapper label,
.is-focused .inputWrapper i.fa-search,
.inputWrapper.is-focused label,
.inputWrapper.is-focused i.fa-search {
color: #3273dc;
}
input[type=number] {
text-align: center;
}
......@@ -589,14 +650,23 @@ input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
input[type=range] {
padding: 0;
input[type=range],
input[type=range]:focus {
height: 0.7em;
padding: 0.1em;
-webkit-appearance: none;
height: 0.25em;
background: #5a5a5a !important;
border-radius: 10px;
outline: none;
border-bottom: none !important;
border-radius: 0.65em;
background: #CCCDCF !important;
}
input[type=range]::-webkit-slider-thumb {
cursor: ew-resize;
width: 0.75em;
height: 1.5em;
-webkit-appearance: none;
background: #5a5a5a;
border-radius: 0.65em;
box-shadow: 0 0 1em white;
}
table {
......@@ -621,12 +691,23 @@ table.files tr td {
}
table.files tr td:first-child {
width: 3em;
text-align: center;
}
table.files tr td:last-child {
table.files tr td:last-child a {
padding: 0.5em;
color: #3273dc;
cursor: pointer;
}
table.files tr td:last-child i {
color: #3273dc;
table.files tr td:last-child a:focus-visible {
color: #5a5a5a;
}
table.files button {
color: white;
background: #3273dc;
}
table.files button:disabled {
color: #ccc;
background: #f5f5f5;
}
:focus,
......@@ -640,17 +721,9 @@ select:focus {
background-color: #f5f5f5 !important;
}
.card-footer-item:focus-visible {
color: #2d2d2d !important;
background: #f5f5f5 !important;
}
.cell.checkbox a:focus-visible i {
color: #212224;
}
a.cell.text:focus-visible {
background: #f5f5f5;
button:focus-visible {
color: #f5f5f5 !important;
background: #5a5a5a !important;
}
.title,
......@@ -665,54 +738,6 @@ code, pre {
color: inherit !important;
}
nav {
width: auto;
height: 100%;
float: left;
position: relative;
background: #f5f5f5;
}
nav ul {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li a,
nav ul li.logo {
width: 5em;
height: 5em;
display: block;
color: #5a5a5a;
cursor: pointer;
line-height: 5em;
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
nav ul li a:focus {
background: #ebebeb;
outline-style: none;
}
nav ul li a:hover,
nav ul li a.is-highlighted {
background: #ebebeb;
}
nav ul li a#navBtnFilter.is-hidden {
display: none;
}
nav ul li.logo {
background: #5a5a5a;
color: white;
font-family: FreeSansBold;
cursor: default;
}
nav ul:nth-child(2) {
height: auto;
position: absolute;
bottom: 0;
left: 0;
}
#noResultContainer {
height: 80%;
}
......@@ -737,9 +762,6 @@ nav ul:nth-child(2) {
#errorContainer i {
color: white !important;
}
#errorContainer .button {
color: white;
}
#datePickerInput {
cursor: pointer;
......@@ -758,7 +780,7 @@ nav ul:nth-child(2) {
.contentContainer .fa-file-alt {
font-size: 6em;
}
.contentContainer .title.is-1 {
.contentContainer .title.is-3 {
font-family: "FreeSansBold";
margin: 0.5em 0;
}
......@@ -775,6 +797,9 @@ nav ul:nth-child(2) {
font-size: 5em;
margin: 0.25em 0;
}
.contentContainer .btnOnboarding:focus-visible {
color: #212224;
}
.contentContainer.is-active {
display: flex;
......@@ -813,7 +838,7 @@ nav ul:nth-child(2) {
margin-right: 0.2em;
color: #3273dc;
}
#messages .button {
#messages button {
margin-top: 0.5em;
}
#messages .message-body p {
......@@ -823,9 +848,50 @@ nav ul:nth-child(2) {
background-color: #ff3860;
}
nav {