Commit 2dd23de7 authored by ransome1's avatar ransome1
Browse files

General CSS refinement

parent 4cabc995
......@@ -24,3 +24,5 @@ build/
package-lock.json
.vs/
.vscode/
.stylelintrc.json
src/css/
{
"extends": "stylelint-config-sass-guidelines"
}
{
"name": "sleek",
"productName": "sleek",
"version": "1.0.6-1",
"version": "1.0.6-2",
"description": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source",
"synopsis": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source",
"category": "ProjectManagement",
......@@ -47,7 +47,6 @@
"deb",
"freebsd",
"rpm",
"pacman",
"AppImage"
]
},
......@@ -89,9 +88,6 @@
"deb": {
"artifactName": "${productName}-${version}-${arch}.${ext}"
},
"pacman": {
"artifactName": "${productName}-${version}-${arch}.${ext}"
},
"freebsd": {
"artifactName": "${productName}-${version}-${arch}.${ext}"
},
......@@ -101,12 +97,13 @@
"build:linux": "electron-builder -l --publish never",
"build:appx": "electron-builder -w appx --publish never",
"build:pacman": "electron-builder -l pacman --publish never",
"build:appimage": "electron-builder -l AppImage --publish never",
"build:appimage": "yarn build:css && electron-builder -l AppImage --publish never",
"pack": "electron-builder --dir",
"lint": "eslint --ext .js, src --ext .mjs, src",
"test": "mocha --timeout 10000",
"test1": "mocha ./test/createTodos.js --timeout 10000",
"sass": "sass -w src/scss/:src/css/",
"test1": "mocha ./test/onboarding.js --timeout 10000",
"build:css": "sass src/scss/style.scss:src/css/style.css",
"sass": "sass -w src/scss/style.scss:src/css/style.css",
"start": "yarn sass & electron ."
},
"dependencies": {
......@@ -128,8 +125,6 @@
"eslint": "^7.25.0",
"mocha": "^9.0.0",
"sass": "^1.34.1",
"spectron": "14.0.0",
"stylelint": "^13.13.1",
"stylelint-config-sass-guidelines": "^8.0.0"
"spectron": "14.0.0"
}
}
......@@ -4,6 +4,9 @@ export function createModalJail(modal) {
const firstFocusableElement = modal.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal
const focusableContent = modal.querySelectorAll(focusableElements);
const lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal
firstFocusableElement.focus();
document.addEventListener("keydown", function(event) {
let isTabPressed = event.key === "Tab" || event.keyCode === 9;
if (!isTabPressed) {
......
body {
background-color: #212224;
color: #CCCDCF;
}
code, pre {
background-color: #212224 !important;
}
a {
color: white;
}
button:focus-visible,
a:focus-visible {
outline: 2px solid #CCCDCF !important;
}
a:hover,
button:hover,
strong {
color: #CCCDCF;
}
input,
select,
textarea {
border: none !important;
background: #2d2d2d !important;
color: white !important;
}
input[type=search]::-webkit-search-cancel-button {
background-color: white;
-webkit-mask-image: url("../img/svg/times-circle.svg");
mask-image: url("../img/svg/times-circle.svg");
}
input:active,
input:focus,
input.is-focused,
select:focus,
textarea:active,
textarea:focus,
input[type=search]:focus {
outline: none !important;
box-shadow: 0 0 0 2px #CCCDCF !important;
}
input::placeholder {
color: #4a4a4a !important;
}
input[type=checkbox]:focus,
input[type=checkbox]:active {
outline: none;
box-shadow: none !important;
}
input[type=range] {
background: #4a4a4a !important;
}
button {
color: white !important;
background: transparent !important;
}
button i {
color: #CCCDCF !important;
}
button.is-link,
.button.is-link:hover {
background-color: #2d2d2d !important;
}
button.is-link svg,
.button.is-link:hover svg {
color: inherit !important;
}
.button[disabled],
fieldset[disabled] {
background-color: transparent;
}
button.is-outlined:hover {
background: #3B3B3B !important;
}
::after {
border-color: white !important;
}
svg {
color: white;
}
table {
width: 100%;
background-color: transparent !important;
color: #CCCDCF !important;
}
table tr td {
border-color: #212224 !important;
}
table tr th {
color: white !important;
}
table.files tr td:last-child i {
color: white;
}
nav {
background-color: #2d2d2d;
}
nav svg {
color: #CCCDCF;
}
nav ul li.logo {
background: none;
}
nav ul li a {
color: #CCCDCF;
border-bottom: 1px solid #3B3B3B;
}
nav ul li a:hover,
nav ul li a:focus {
color: #CCCDCF;
border-bottom: none;
background-color: #3B3B3B;
}
nav ul li.is-highlighted a {
color: #CCCDCF;
border-bottom: none;
background-color: #3B3B3B;
}
#drawerContainer .zoom svg {
color: white !important;
}
#drawerContainer .zoom #zoomStatus {
color: white !important;
}
#todoTableSearchContainer {
background-color: #212224;
}
#todoTableSearchContainer .icon.is-left i,
#todoTableSearchContainer .icon.is-right i {
color: #4a4a4a;
}
#todoTableSearchContainer #btnToggleViewContainer {
background: transparent !important;
}
#resultStats .tag {
background-color: #3B3B3B !important;
color: #CCCDCF !important;
}
#todoTable .todo#previousItem.is-highlighted {
background-color: #3B3B3B;
}
#todoTable .todo:hover .cell .button,
#todoTable .todo.due .button {
color: #f5f5f5;
}
#todoTable .group.due {
color: #ebebeb;
}
#todoTable .group.due .button {
color: inherit;
}
#todoTable .todo {
border-color: #3B3B3B;
}
#todoTable .todo .checkbox a {
color: #CCCDCF;
}
#todoTable .todo .checkbox a:hover {
color: white;
}
#todoTable .todo .cell.text {
color: #CCCDCF;
}
#todoTable .todo .cell.itemDueDate {
color: white;
}
#todoTable .todo .cell.itemDueDate i {
color: inherit;
}
#todoTable .todo .cell.itemDueDate.isToday,
#todoTable .todo .cell.itemDueDate.isPast {
color: #ff3860;
}
#todoTable .todo .cell.itemDueDate.isToday i,
#todoTable .todo .cell.itemDueDate.isPast i {
color: inherit;
}
#todoTable .todo .cell.itemDueDate.isTomorrow i {
color: #fa745e !important;
}
#todoTable .todo .cell span.contexts {
color: #c5ede3 !important;
background: #1e6251 !important;
}
#todoTable .todo .cell span.projects {
color: #f1d6f1 !important;
background: #6f266f !important;
}
#todoTable .todo .cell .is-white {
color: #CCCDCF;
background: none;
}
#modalForm i {
color: #CCCDCF !important;
}
#modalForm button {
color: white;
border-color: #3B3B3B !important;
background: transparent !important;
}
#modalForm button:hover {
color: #CCCDCF !important;
}
#modalForm .field input,
#modalForm .field input::placeholder,
#modalForm .field select,
#modalForm .field select::placeholder {
color: white !important;
}
#modalForm .field select option {
background: #3B3B3B;
}
#recurrencePicker #recurrencePickerInput,
#recurrencePicker .radio {
cursor: pointer;
background: none !important;
color: white !important;
}
#recurrencePicker #recurrencePickerInput::placeholder {
color: white !important;
}
#recurrencePicker .radio:hover {
color: #CCCDCF !important;
}
#recurrencePicker #recurrencePickerContainer {
background: #2d2d2d;
}
#recurrencePicker #recurrencePickerContainer .card-footer {
border-color: #212224;
}
#autoCompleteContainer {
background: #3B3B3B;
}
#autoCompleteContainer h4 {
color: #CCCDCF;
}
#drawerContainer .drawer {
background: #3B3B3B !important;
}
#drawerContainer .drawer h4.is-4 {
color: white;
}
#drawerContainer .drawer h4.is-4 i {
color: #CCCDCF !important;
}
#drawerContainer #drawerClose {
background: #3B3B3B !important;
}
#drawerContainer svg {
color: #f5f5f5 !important;
}
#drawerContainer #btnFiltersResetFilters {
background: #212224 !important;
}
#filterContext .card {
background: #3B3B3B;
}
#filterContext .card #filterContextSave {
background-color: transparent !important;
border-right: 1px solid #212224 !important;
}
#filterContext .card-footer {
border-top: 1px solid #212224 !important;
}
#todoContext a {
color: #CCCDCF;
}
#todoContext .dropdown-content {
color: white;
background-color: #3B3B3B !important;
}
#todoContext .dropdown-content .dropdown-item:hover {
background: #2d2d2d;
}
.contexts .button {
color: #c5ede3;
background: #247561;
}
.contexts .button span.tag {
color: #184e41;
background: #c9eee5;
}
.contexts .button.is-dark {
background: #184e41;
color: white;
}
.projects .button {
color: #f1d6f1;
background: #822c82;
}
.projects .button span.tag {
color: #5c1f5c;
background: #f2daf2;
}
.projects .button.is-dark {
background: #5c1f5c;
color: white;
}
.priority .button {
opacity: 0.9;
}
.toggle .switch .slider {
background-color: #4a4a4a;
}
.toggle .switch input:checked + .slider {
background-color: #2d2d2d !important;
}
.toggle .switch input:focus + .slider {
box-shadow: none;
}
.toggle .switch input:focus-visible {
outline: 2px solid white !important;
}
.modal .modal-content .card {
background: #3B3B3B;
color: #CCCDCF;
}
.modal .modal-content .card .card-header-title {
color: white;
}
.modal .modal-content .card .card-content {
/*button {
background: $darker-grey!important;
}*/
}
.modal .modal-content .card .card-footer,
.modal .modal-content .card .card-footer-item {
border-color: #2d2d2d;
}
.modal.content {
color: #CCCDCF !important;
}
.modal.content .button {
background: #2d2d2d !important;
}
.modal.content .select:not(.is-multiple):not(.is-loading)::after {
border-color: white !important;
}
.modal.content .delete,
.modal.content .modal-close,
.modal.content .tag.is-info {
background: white !important;
color: #3B3B3B !important;
}
.modal.content .tag:not(body).is-dark {
background: #212224 !important;
}
.modal.content .modal-close::before,
.modal.content .modal-close::after {
color: #3B3B3B !important;
background: #3B3B3B !important;
}
.modal.content .modal-card,
.modal.content table {
background: #3B3B3B;
color: #CCCDCF !important;
}
.modal.content .title,
.modal.content table th {
color: white;
}
.modal.content table tr,
.modal.content table th,
.modal.content table td {
border-color: #2d2d2d !important;
}
.modal.content .tabs ul {
border-color: transparent;
}
.modal.content .tabs li a {
color: white;
border-color: #4a4a4a;
}
.modal.content .tabs li a:hover {
border-color: #CCCDCF;
}
.modal.content .tabs li.is-active a {
color: white;
border-color: #CCCDCF;
}
.message.fixed {
background: transparent !important;
}
.message.fixed i {
color: white !important;
}
.message.fixed .message-body {
color: #CCCDCF;
background: #3B3B3B !important;
}
.message.fixed .message-body .button {
background: #2d2d2d !important;
}
.dueDate #datePickerInput,
.dueDate #datePickerInput::placeholder {
color: white !important;
background: transparent !important;
cursor: pointer;
}
.datepicker {
background: transparent;
}
.datepicker .button {
background: transparent !important;
}
.datepicker .datepicker-cell.today.focused:not(.selected),
.datepicker .datepicker-cell.today:not(.selected) {
background: #212224 !important;
}
.datepicker .datepicker-cell.today.focused:not(.selected),
.datepicker .datepicker-cell.today:hover {
color: white !important;
}
.datepicker .datepicker-picker {
background: #2d2d2d;
color: white;
}
.datepicker .datepicker-picker .button,
.datepicker .datepicker-picker .button:hover,
.datepicker .datepicker-picker .datepicker-header .datepicker-controls .button:hover {
background: none;
color: inherit;
}
.datepicker .datepicker-picker .datepicker-footer .datepicker-controls .button {
color: inherit;
}
.datepicker .datepicker-picker .datepicker-cell.selected,
.datepicker .datepicker-picker .datepicker-cell.selected:hover {
color: #2d2d2d;
background: white;
}
.datepicker .datepicker-picker .datepicker-cell.focused:not(.selected),
.datepicker .datepicker-picker .datepicker-cell:hover {
color: #2d2d2d;
background: #CCCDCF;
}
.contentContainer .title.is-1 {
color: white;
}
.contentContainer .subtitle,
.contentContainer .subtitle strong {
color: #CCCDCF;
}
/*# sourceMappingURL=dark.css.map */
{"version":3,"sourceRoot":"","sources":["../scss/dark.scss","../scss/variables.scss"],"names":[],"mappings":"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","file":"dark.css"}
\ No newline at end of file
.datepicker {
display: none; }
.datepicker.active {
display: block; }
.datepicker-dropdown {
position: absolute;
top: 0;
left: 0;
z-index: 20;
padding-top: 4px; }
.datepicker-dropdown.datepicker-orient-top {
padding-top: 0;
padding-bottom: 4px; }
.datepicker-picker {
display: inline-block;
border-radius: 4px;
background-color: #fff; }
.datepicker-dropdown .datepicker-picker {
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); }
.datepicker-picker span {
display: block;
flex: 1;
border: 0;
border-radius: 4px;
cursor: default;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.datepicker-main {
padding: 2px; }
.datepicker-footer {
box-shadow: inset 0 1px 1px rgba(10, 10, 10, 0.1);
background-color: #f5f5f5; }
.datepicker-controls, .datepicker-grid, .datepicker-view, .datepicker-view .days-of-week {
display: flex; }
.datepicker-grid {
flex-wrap: wrap; }
.datepicker-view .days .datepicker-cell, .datepicker-view .dow {
flex-basis: 14.28571%; }
.datepicker-view.datepicker-grid .datepicker-cell {
flex-basis: 25%; }
.datepicker-cell, .datepicker-view .week {
height: 2.25rem;
line-height: 2.25rem; }
.datepicker-title {
box-shadow: inset 0 -1px 1px rgba(10, 10, 10, 0.1);
background-color: #f5f5f5;
padding: .375rem .75rem;
text-align: center;
font-weight: 700; }