Skip to content

Commit

Permalink
Release 0.4.0, refined typeahead, SASS structure in dark.scss
Browse files Browse the repository at this point in the history
  • Loading branch information
ransome1 committed Dec 2, 2020
1 parent e2586f2 commit c994901
Show file tree
Hide file tree
Showing 9 changed files with 403 additions and 497 deletions.
250 changes: 117 additions & 133 deletions src/css/dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ a {

button:focus,
a:focus {
outline: 1px dotted #CCCDCF !important; }
outline: 2px solid #CCCDCF !important; }

a:hover,
strong {
Expand All @@ -18,27 +18,31 @@ input {
color: #CCCDCF;
border: none !important; }

input:active,
input:focus {
box-shadow: #CCCDCF !important; }

input[type="search"]::-webkit-search-cancel-button {
background-color: white;
-webkit-mask-image: url("../svg/times-circle.svg");
mask-image: url("../svg/times-circle.svg"); }

nav {
background-color: #2C2D30; }

nav ul li.logo {
background: none; }

nav ul li a {
color: #B5B5B5;
border-bottom: 1px solid #3B3B3B; }

nav ul li a:hover,
nav ul li.is-highlighted a,
nav ul li a:focus {
color: #B5B5B5;
border-bottom: none;
background-color: #3B3B3B; }
nav ul li.logo {
background: none; }
nav ul li a {
color: #B5B5B5;
border-bottom: 1px solid #3B3B3B; }
nav ul li a:hover,
nav ul li a:focus {
color: #B5B5B5;
border-bottom: none;
background-color: #3B3B3B; }
nav ul li.is-highlighted a {
color: #B5B5B5;
border-bottom: none;
background-color: #3B3B3B; }

#todoTable #todoTableSearch {
color: #CCCDCF;
Expand All @@ -47,65 +51,62 @@ nav ul li a:focus {
#todoTable #todoTableSearch::placeholder {
color: #4a4a4a; }

#todoTable .flex-table {
border-color: #2D2E31; }

#todoTable .flex-table#previousDataItem.is-highlighted {
background-color: #4a4a4a; }

#todoTable .flex-table .checkbox a {
color: #CCCDCF; }

#todoTable .flex-table .checkbox a:hover {
color: white; }

#todoTable .flex-table.completed,
#todoTable .flex-table.completed .flex-row.text,
#todoTable .flex-table.completed .checkbox a {
#todoTable .flex-table.completed {
color: #4A4A4A; }

#todoTable .flex-table .flex-row.text {
color: #CCCDCF; }

#todoTable .flex-table .flex-row.itemDueDate {
color: white; }

#todoTable .flex-table.completed .flex-row.itemDueDate {
opacity: .4; }

#todoTable .flex-table .flex-row span.tag.contexts {
background: #075943 !important;
color: #c5ede3 !important; }

#todoTable .flex-table .flex-row span.tag.projects {
background: #5f1a5e !important;
color: #f1d6f1 !important; }

#todoTable .flex-table.completed .flex-row span.tag.contexts {
background: #2c2d30 !important;
color: #4A4A4A !important; }

#todoTable .flex-table.completed .flex-row span.tag.projects {
background: #3b3b3b !important;
color: #636363 !important; }

#todoTable .flex-table .flex-row .is-white {
color: #CCCDCF;
background: none; }

#todoTable .flex-table:hover .flex-row.todoTableItemMore a,
#todoTable .flex-table .flex-row.todoTableItemMore a {
#todoTable .flex-table.completed .flex-row.text,
#todoTable .flex-table.completed .checkbox a {
color: inherit; }
#todoTable .flex-table.completed .flex-row span.tag.contexts {
background: #2c2d30 !important;
color: inherit !important; }
#todoTable .flex-table.completed .flex-row span.tag.projects {
background: #3b3b3b !important;
color: #636363 !important; }
#todoTable .flex-table.completed .flex-row.itemDueDate {
opacity: .4; }

#todoTable .flex-table:hover .flex-row.todoTableItemMore a {
color: #CCCDCF; }

#todoTable .flex-table .flex-row.todoTableItemMore .dropdown-content {
background: #4a4a4a;
color: white; }

#todoTable .flex-table .flex-row.todoTableItemMore.is-active .dropdown-menu .dropdown-item:hover {
background: #3b3b3b; }
#todoTable .flex-table {
border-color: #2D2E31; }
#todoTable .flex-table .checkbox a {
color: #CCCDCF; }
#todoTable .flex-table .checkbox a:hover {
color: white; }
#todoTable .flex-table .flex-row.text {
color: #CCCDCF; }
#todoTable .flex-table .flex-row.itemDueDate {
color: white; }
#todoTable .flex-table .flex-row span.tag.contexts {
background: #075943 !important;
color: #c5ede3 !important; }
#todoTable .flex-table .flex-row span.tag.projects {
background: #5f1a5e !important;
color: #f1d6f1 !important; }
#todoTable .flex-table .flex-row .is-white {
color: #CCCDCF;
background: none; }
#todoTable .flex-table .flex-row.todoTableItemMore a {
color: #CCCDCF; }
#todoTable .flex-table .flex-row.todoTableItemMore .dropdown-content {
background: #4a4a4a;
color: white; }
#todoTable .flex-table .flex-row.todoTableItemMore.is-active .dropdown-menu .dropdown-item:hover {
background: #3b3b3b; }

#filterDropdown {
background: #3B3B3B; }
#filterDropdown .dropdown-item.is-greyed-out a {
background: #2c2d30 !important;
color: #B5B5B5 !important;
opacity: .8; }
#filterDropdown .dropdown-item.is-greyed-out span.tag {
background: #1e2022 !important;
color: white !important; }

.filterDropdown .dropdown-item a.headline,
.filterDropdown .dropdown-item a.headline a {
Expand All @@ -114,27 +115,25 @@ nav ul li a:focus {
.filterDropdown div.contexts a.button {
background: #075A44;
color: #C5EDE3; }
.filterDropdown div.contexts a.button span.tag {
background: #C5EDE3;
color: #075A44; }

.filterDropdown div.contexts a.button:hover,
.filterDropdown div.contexts a.button.is-dark {
background: #1BA37E; }

.filterDropdown div.contexts a.button span.tag {
background: #C5EDE3;
color: #075A44; }

.filterDropdown div.projects a.button {
background: #5F1A5E;
color: #F2D6F2; }
.filterDropdown div.projects a.button span.tag {
background: #F2D6F2;
color: #5F1A5E; }

.filterDropdown div.projects a.button:hover,
.filterDropdown div.projects a.button.is-dark {
background: #BC30BA; }

.filterDropdown div.projects a.button span.tag {
background: #F2D6F2;
color: #5F1A5E; }

.filterDropdown .button.is-white {
background-color: #2C2D30 !important;
color: #CCCDCF !important; }
Expand All @@ -145,84 +144,69 @@ nav ul li a:focus {
.filterDropdown .dropdown-content h4 {
color: #CCCDCF !important; }

#filterDropdown .dropdown-item.is-greyed-out a {
background: #2c2d30 !important;
color: #B5B5B5 !important;
opacity: .8; }

#filterDropdown .dropdown-item.is-greyed-out span.tag {
background: #1e2022 !important;
color: white !important; }

.columns a#filterColumnClose {
background: #3B3B3B;
color: #CCCDCF; }

.toggle .switch .slider {
background-color: #4a4a4a; }
.toggle .switch .slider input:checked + .slider {
background-color: #4a4a4a; }
.toggle .switch .slider input:focus + .slider {
box-shadow: 0 0 1px #2C2D30; }
.toggle .switch .slider input:focus {
outline: 2px solid #CCCDCF; }

.toggle .switch input:checked + .slider {
background-color: #2C2D30; }

.toggle .switch input:focus + .slider {
box-shadow: 0 0 1px #2C2D30; }
#modalForm button {
color: white;
border-color: #1e2022 !important; }

.toggle .switch input:focus {
outline: 1px dotted #CCCDCF; }
#modalForm button:hover {
color: #CCCDCF; }

.modal .modal-content .card {
background: #4A4A4A;
color: #CCCDCF; }

.modal .modal-content .card .card-header-title {
color: #CCCDCF; }

.modal .modal-content .card #modalFormInput {
background-color: #2D2E31;
color: #CCCDCF; }

.modal .modal-content .card #modalFormInput::placeholder {
color: #4a4a4a; }

.dueDate svg,
.dueDate #dueDatePickerInput, .dueDate #dueDatePickerInput::placeholder {
color: white; }

.modal .modal-content .card .card-footer,
.modal .modal-content .card .card-footer-item {
border-color: #2D2E31; }

.modal button,
#modalForm button {
.modal .modal-content .card .card-header-title {
color: #CCCDCF; }
.modal .modal-content .card #modalFormInput {
background-color: #2D2E31;
color: #CCCDCF; }
.modal .modal-content .card #modalFormInput::placeholder {
color: #4a4a4a; }
.modal .modal-content .card .card-footer,
.modal .modal-content .card .card-footer-item {
border-color: #2D2E31; }

.modal button {
color: white;
border-color: #1e2022 !important; }

#modalForm button:hover {
color: #CCCDCF; }
.dueDate svg,
.dueDate #dueDatePickerInput,
.dueDate #dueDatePickerInput::placeholder {
color: white; }

.datepicker {
background: none; }

.datepicker .datepicker-picker {
background: #2D2E31; }

.datepicker .button,
.datepicker .button:hover,
.datepicker-header .datepicker-controls .button:hover {
background: none;
color: white; }

.datepicker .datepicker-footer .datepicker-controls .button {
color: white; }

.datepicker-cell.selected, .datepicker-cell.selected:hover {
color: #2D2E31;
background: white; }

.datepicker-cell.focused:not(.selected),
.datepicker-cell:hover {
color: #2D2E31;
background: #CCCDCF; }
.datepicker .datepicker-picker {
background: #2D2E31;
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: #2D2E31;
background: white; }
.datepicker .datepicker-picker .datepicker-cell.focused:not(.selected),
.datepicker .datepicker-picker .datepicker-cell:hover {
color: #2D2E31;
background: #CCCDCF; }

.contentContainer .title.is-1,
.contentContainer .subtitle,
Expand Down
12 changes: 3 additions & 9 deletions src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ body::-webkit-scrollbar {

button:focus,
a:focus {
outline: 1px dotted #3273dc !important; }
outline: 2px solid #3273dc !important; }

input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
Expand Down Expand Up @@ -100,8 +100,6 @@ input[type="search"]:focus::-webkit-search-cancel-button {
color: #4a4a4a;
border-radius: 50%;
cursor: pointer; }
.columns a#filterColumnClose:focus {
outline: 1px dotted #3273dc; }
.columns nav:hover a#filterColumnClose.is-active {
display: inline-block; }

Expand Down Expand Up @@ -208,8 +206,6 @@ nav {
.filterDropdown div.contexts a.button:hover,
.filterDropdown div.contexts a.button:active {
background: #c9f2e8; }
.filterDropdown div.contexts a.button:focus {
outline: 1px dotted #1aa37e !important; }
.filterDropdown div.contexts a.button span.tag {
background: #1aa37e;
color: #fff;
Expand All @@ -226,8 +222,6 @@ nav {
.filterDropdown div.projects a.button:hover,
.filterDropdown div.projects a.button:active {
background: #f7dcf7; }
.filterDropdown div.projects a.button:focus {
outline: 1px dotted #bc30ba !important; }
.filterDropdown div.projects a.button span.tag {
background: #bc30ba;
color: #fff;
Expand Down Expand Up @@ -411,12 +405,12 @@ nav {
background-color: #4a4a4a; }
.toggle .switch input:focus + .slider {
box-shadow: 0 0 1px #4a4a4a; }
.toggle .switch input:focus {
outline: 2px solid #3273dc; }
.toggle .switch input:checked + .slider:before {
-webkit-transform: translateX(25px);
-ms-transform: translateX(25px);
transform: translateX(25px); }
.toggle .switch input:focus {
outline: 1px dotted #3273dc; }
.toggle .switch .slider {
position: absolute;
cursor: pointer;
Expand Down
2 changes: 1 addition & 1 deletion src/locales/de/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"formErrorWritingFile": "<strong>Fehler:</strong> Die Änderungen konnten nicht gespeichert werden. Bitte prüfe, ob die todo.txt Datei existiert und ausreichend Zugriffsrechte gesetzt sind: ",
"formInfoNoInput": "Schreibe eine Aufgabe in das Textfeld und verwende dazu die todo.txt Syntax. Schau <a href=\"https://github.com/todotxt/todo.txt\" target=\"_blank\">hier</a> nach, welche Möglichkeiten es dabei gibt.",
"formSelectDueDate": "Fälligkeit festlegen",
"modalFormHowTo": "Klicke hier um nachzulesen wie das <a href=\"https://github.com/todotxt/todo.txt\" target=\"_blank\" tabindex=\"310\">todo.txt Prinzip</a> funktioniert.",
"modalFormHowTo": "Klicke hier um nachzulesen wie das <a href=\"https://github.com/todotxt/todo.txt\" target=\"_blank\">todo.txt Prinzip</a> funktioniert.",
"cancel": "Abbrechen",
"save": "Speichern",
"formTodoInputPlaceholder": "(A) Benutze die todo.txt Syntax @kontext +projekt due:",
Expand Down
Loading

0 comments on commit c994901

Please sign in to comment.