Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
ransome
sleek
Commits
20830e36
Commit
20830e36
authored
Jun 23, 2021
by
ransome1
Browse files
GUI find grinding
parent
38d47432
Changes
6
Expand all
Hide whitespace changes
Inline
Side-by-side
src/css/style.css
View file @
20830e36
...
...
@@ -19,16 +19,16 @@ body.dark strong {
color
:
#CCCDCF
;
}
body
.dark
input
,
body
.dark
select
,
body
.dark
textarea
{
body
.dark
select
{
border
:
none
!important
;
background
:
#2d2d2d
!important
;
background
:
transparent
!important
;
color
:
white
!important
;
}
body
.dark
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")
;
body
.dark
input
[
type
=
text
],
body
.dark
textarea
{
background
:
#2d2d2d
!important
;
border
:
none
;
color
:
white
;
}
body
.dark
input
:active
,
body
.dark
input
:focus
,
...
...
@@ -200,6 +200,7 @@ body.dark #modalForm i {
body
.dark
#modalForm
button
{
color
:
white
;
border-color
:
#3B3B3B
!important
;
border-right
:
1px
solid
#212224
!important
;
background
:
transparent
!important
;
}
body
.dark
#modalForm
button
:hover
{
...
...
@@ -247,6 +248,10 @@ body.dark #drawerContainer .drawer h4.is-4 {
body
.dark
#drawerContainer
.drawer
h4
.is-4
i
{
color
:
#CCCDCF
!important
;
}
body
.dark
#drawerContainer
.drawer
::-webkit-scrollbar-thumb:window-inactive
,
body
.dark
#drawerContainer
.drawer
::-webkit-scrollbar-thumb
{
background
:
#4a4a4a
;
}
body
.dark
#drawerContainer
#drawerClose
{
background
:
#3B3B3B
!important
;
}
...
...
@@ -256,6 +261,10 @@ body.dark #drawerContainer svg {
body
.dark
#drawerContainer
#btnFiltersResetFilters
{
background
:
#212224
!important
;
}
body
.dark
#todoTableWrapper
::-webkit-scrollbar-thumb:window-inactive
,
body
.dark
#todoTableWrapper
::-webkit-scrollbar-thumb
{
background
:
#3B3B3B
;
}
body
.dark
#filterContext
.card
{
background
:
#3B3B3B
;
}
...
...
@@ -322,11 +331,6 @@ body.dark .modal .modal-content .card {
body
.dark
.modal
.modal-content
.card
.card-header-title
{
color
:
white
;
}
body
.dark
.modal
.modal-content
.card
.card-content
{
/*button {
background: $darker-grey!important;
}*/
}
body
.dark
.modal
.modal-content
.card
.card-footer
,
body
.dark
.modal
.modal-content
.card
.card-footer-item
{
border-color
:
#2d2d2d
;
...
...
@@ -479,6 +483,10 @@ body {
-ms-user-select
:
none
;
}
body
::-webkit-scrollbar
{
display
:
none
;
}
button
,
button
:focus
,
button
:active
,
button
:active
,
button
:after
,
button
::before
,
button
:active:after
,
.button
,
.button-is-white
{
border
:
none
!important
;
box-shadow
:
none
!important
;
...
...
@@ -545,10 +553,6 @@ table.files tr td:last-child i {
color
:
#3273dc
;
}
body
::-webkit-scrollbar
{
display
:
none
;
}
:focus
,
:focus-visible
{
outline
:
none
;
...
...
@@ -556,48 +560,34 @@ body::-webkit-scrollbar {
}
button
:focus-visible
,
a
:focus-visible
{
outline
:
2px
solid
#3273dc
!important
;
a
:focus-visible
,
li
:focus-visible
,
select
:focus
,
input
:focus
,
textarea
:focus
,
input
[
type
=
text
]
:focus
{
box-shadow
:
0
0
0
2px
#3273dc
inset
!important
;
outline
:
none
!important
;
border
:
none
!important
;
}
input
[
type
=
search
]
::-webkit-search-cancel-button
{
-webkit-appearance
:
none
;
height
:
1.15em
;
width
:
1.15em
;
border-radius
:
30em
;
background-color
:
#4a4a4a
;
-webkit-mask-image
:
url("../../node_modules/@fortawesome/fontawesome-free/svgs/solid/times-circle.svg")
;
mask-image
:
url("../../node_modules/@fortawesome/fontawesome-free/svgs/solid/times-circle.svg")
;
opacity
:
0
;
pointer-events
:
none
;
cursor
:
pointer
;
input
,
select
{
border
:
none
!important
;
color
:
#3273dc
!important
;
}
input
[
type
=
search
]
:focus::-webkit-search-cancel-button
{
opacity
:
0.8
;
pointer-events
:
all
;
input
[
type
=
text
]
{
border
:
1px
solid
#ccc
!important
;
color
:
#2d2d2d
!important
;
}
input
:focus
,
select
:focus
,
input
.is-focused
,
input
[
type
=
search
]
:focus
,
textarea
:focus
,
textarea
.is-focused
,
textarea
[
type
=
search
]
:focus
{
border
:
none
;
box-shadow
:
0
0
0
2px
#3273dc
!important
;
outline
:
none
;
input
[
type
=
text
]
::placeholder
{
color
:
#ccc
!important
;
}
input
,
input
::placeholder
,
select
{
width
:
auto
;
font-size
:
1em
;
color
:
#3273dc
;
box-shadow
:
none
;
background
:
transparent
;
input
::placeholder
{
color
:
#3273dc
!important
;
}
input
[
type
=
number
]
{
...
...
@@ -609,11 +599,6 @@ input[type=number]::-webkit-outer-spin-button {
-webkit-appearance
:
none
;
}
input
[
type
=
checkbox
]
:focus
{
outline
:
none
;
box-shadow
:
none
!important
;
}
input
[
type
=
range
]
{
-webkit-appearance
:
none
;
height
:
0.25em
;
...
...
@@ -826,7 +811,7 @@ nav ul:nth-child(2) {
#drawerContainer
.drawer
h4
.is-4
{
font-size
:
1.25em
;
font-family
:
FreeSansBold
;
margin-bottom
:
1.
5em
;
margin-bottom
:
0.7
5em
;
}
#drawerContainer
.drawer
h4
.is-4.clickable
{
cursor
:
pointer
;
...
...
@@ -839,9 +824,6 @@ nav ul:nth-child(2) {
padding
:
0
;
margin
:
0
0
1.5em
0
;
}
#drawerContainer
.drawer
table
{
margin-bottom
:
2em
;
}
#drawerContainer
.drawer
table
tr
td
:nth-child
(
odd
)
{
width
:
auto
;
vertical-align
:
middle
;
...
...
@@ -854,6 +836,15 @@ nav ul:nth-child(2) {
#drawerContainer
.drawer.is-active
{
display
:
block
!important
;
}
#drawerContainer
.drawer
::-webkit-scrollbar
{
background-color
:
transparent
;
width
:
0.8em
;
}
#drawerContainer
.drawer
::-webkit-scrollbar-thumb:window-inactive
,
#drawerContainer
.drawer
::-webkit-scrollbar-thumb
{
background
:
#ccc
;
border-radius
:
5px
;
}
#drawerContainer
#viewDrawer
.button
{
margin
:
0
;
}
...
...
@@ -861,6 +852,17 @@ nav ul:nth-child(2) {
margin-top
:
1em
;
}
#todoTableWrapper
::-webkit-scrollbar
{
background-color
:
transparent
;
width
:
0.8em
;
}
#todoTableWrapper
::-webkit-scrollbar-thumb:window-inactive
,
#todoTableWrapper
::-webkit-scrollbar-thumb
{
background
:
#ccc
;
border-radius
:
5px
;
}
#drawerContainer
:hover
#drawerClose
{
display
:
inline-block
;
}
...
...
@@ -944,7 +946,7 @@ nav ul:nth-child(2) {
}
#todoTable
.group
{
min-height
:
1em
;
margin
-top
:
0.5em
;
margin
:
0.5em
0
;
border
:
none
;
font-family
:
FreeSansBold
;
}
...
...
@@ -961,142 +963,142 @@ nav ul:nth-child(2) {
}
#todoTable
.todo
{
display
:
flex
;
cursor
:
pointer
;
}
#todoTable
.cell
{
#todoTable
.todo
.cell
{
line-height
:
1.7em
;
padding
:
0.75em
0
;
margin-right
:
1em
;
height
:
auto
;
cursor
:
pointer
;
}
#todoTable
.cell
.is-white
{
#todoTable
.todo
.cell
.is-white
{
background
:
none
;
}
#todoTable
.cell
span
.tag
{
#todoTable
.todo
.cell
span
.tag
{
margin
:
0
0.25em
0
0
;
}
#todoTable
.cell
span
.tag.projects
{
#todoTable
.todo
.cell
span
.tag.projects
{
background
:
#f1d6f1
;
}
#todoTable
.cell
span
.tag.contexts
{
#todoTable
.todo
.cell
span
.tag.contexts
{
background
:
#c5ede3
;
}
#todoTable
.cell.checkbox
a
{
#todoTable
.todo
.cell.checkbox
a
{
flex
:
0
0
1em
;
font-size
:
1.25em
;
}
#todoTable
.cell.text
{
#todoTable
.todo
.cell.text
{
width
:
auto
;
flex
:
1
;
color
:
#4a4a4a
;
margin-right
:
0
;
}
#todoTable
.cell.text
.categories
{
#todoTable
.todo
.cell.text
.categories
{
margin-right
:
0.5em
;
}
#todoTable
.cell.text
.button
{
#todoTable
.todo
.cell.text
.button
{
font-size
:
1.1em
;
font-family
:
FreeSansBold
;
height
:
auto
;
padding
:
0
0.4em
;
}
#todoTable
.cell.text
.priority
{
#todoTable
.todo
.cell.text
.priority
{
background
:
transparent
;
color
:
#666666
;
margin-right
:
0.5em
;
}
#todoTable
.cell.text
.text
{
#todoTable
.todo
.cell.text
.text
{
margin-right
:
0.5em
;
}
#todoTable
.cell.spacer
{
#todoTable
.todo
.cell.spacer
{
width
:
0.5em
;
background
:
transparent
;
}
#todoTable
.cell.priority
{
#todoTable
.todo
.cell.priority
{
background
:
#ccc
;
flex
:
0
0
0.5em
;
opacity
:
0.5
;
}
#todoTable
.cell.priority.A
,
#todoTable
.cell
.priority.A
{
#todoTable
.todo
.cell.priority.A
,
#todoTable
.todo
.cell
.priority.A
{
color
:
#ffe6eb
;
background
:
#ff3860
;
}
#todoTable
.cell.priority.B
,
#todoTable
.cell
.priority.B
{
#todoTable
.todo
.cell.priority.B
,
#todoTable
.todo
.cell
.priority.B
{
color
:
#fadcd8
;
background
:
#fa745e
;
}
#todoTable
.cell.priority.C
,
#todoTable
.cell
.priority.C
{
#todoTable
.todo
.cell.priority.C
,
#todoTable
.todo
.cell
.priority.C
{
background
:
#ffdd57
;
}
#todoTable
.cell
.contexts
{
#todoTable
.todo
.cell
.contexts
{
background
:
#c5ede3
;
}
#todoTable
.cell
.projects
{
#todoTable
.todo
.cell
.projects
{
background
:
#f1d6f1
;
}
#todoTable
.cell.itemDueDate
{
#todoTable
.todo
.cell.itemDueDate
{
color
:
#4a4a4a
;
position
:
relative
;
white-space
:
nowrap
;
margin
:
0
0.25em
0
0
;
text-transform
:
lowercase
;
}
#todoTable
.cell.itemDueDate
.fa-sort-down
{
#todoTable
.todo
.cell.itemDueDate
.fa-sort-down
{
position
:
absolute
;
right
:
0.2em
;
bottom
:
2.1em
;
display
:
none
;
}
#todoTable
.cell.itemDueDate
.tags
{
#todoTable
.todo
.cell.itemDueDate
.tags
{
position
:
absolute
;
top
:
-1.4em
;
right
:
-1.5em
;
z-index
:
40
;
display
:
none
;
}
#todoTable
.cell.itemDueDate
.tags
.tag
{
#todoTable
.todo
.cell.itemDueDate
.tags
.tag
{
margin
:
0
;
}
#todoTable
.cell.itemDueDate
.tags
.is-dark
{
#todoTable
.todo
.cell.itemDueDate
.tags
.is-dark
{
background
:
#4a4a4a
;
font-family
:
FreeSansBold
;
}
#todoTable
.cell.isToday
,
#todoTable
.cell.isToday
.button
{
#todoTable
.todo
.cell.isToday
,
#todoTable
.todo
.cell.isToday
.button
{
color
:
#ff3860
;
}
#todoTable
.cell.isToday
.tags
.is-dark
,
#todoTable
.cell.isToday
.button
.tags
.is-dark
{
#todoTable
.todo
.cell.isToday
.tags
.is-dark
,
#todoTable
.todo
.cell.isToday
.button
.tags
.is-dark
{
background
:
#ff3860
;
font-family
:
FreeSansBold
;
}
#todoTable
.cell.isTomorrow
,
#todoTable
.cell.isTomorrow
.button
{
#todoTable
.todo
.cell.isTomorrow
,
#todoTable
.todo
.cell.isTomorrow
.button
{
color
:
#fa745e
;
}
#todoTable
.cell.isTomorrow
.tags
.is-dark
,
#todoTable
.cell.isTomorrow
.button
.tags
.is-dark
{
#todoTable
.todo
.cell.isTomorrow
.tags
.is-dark
,
#todoTable
.todo
.cell.isTomorrow
.button
.tags
.is-dark
{
background
:
#fa745e
;
font-family
:
FreeSansBold
;
}
#todoTable
.cell.isPast
,
#todoTable
.cell.isPast
.button
{
#todoTable
.todo
.cell.isPast
,
#todoTable
.todo
.cell.isPast
.button
{
color
:
#ff3860
;
}
#todoTable
.cell.isPast
.tags
.is-dark
,
#todoTable
.cell.isPast
.button
.tags
.is-dark
{
#todoTable
.todo
.cell.isPast
.tags
.is-dark
,
#todoTable
.todo
.cell.isPast
.button
.tags
.is-dark
{
background
:
#ff3860
;
font-family
:
FreeSansBold
;
}
#todoTable
.cell
:hover
.tags
,
#todoTable
.cell
:focus
.tags
{
#todoTable
.todo
.cell
:hover
.tags
,
#todoTable
.todo
.cell
:focus
.tags
{
display
:
block
;
}
#todoTable
.cell
:hover
i
.fa-sort-down
,
#todoTable
.cell
:focus
i
.fa-sort-down
{
#todoTable
.todo
.cell
:hover
i
.fa-sort-down
,
#todoTable
.todo
.cell
:focus
i
.fa-sort-down
{
display
:
block
;
}
#todoTable
.todo.completed
.cell
{
...
...
@@ -1144,14 +1146,6 @@ nav ul:nth-child(2) {
float
:
left
;
margin
:
0.5em
0.5em
0.5em
0
;
}
#modalForm
.field
input
,
#modalForm
.field
input
::placeholder
,
#modalForm
.field
select
,
#modalForm
.field
select
::placeholder
{
background
:
none
!important
;
border
:
none
;
color
:
#3273dc
!important
;
}
#modalForm
.message
{
display
:
none
;
margin
:
1em
0
0
0
;
...
...
@@ -1472,6 +1466,11 @@ nav ul:nth-child(2) {
border-radius
:
50%
;
}
.modal
.card-header-title
{
font-family
:
"FreeSansBold"
;
padding
:
1em
1.5em
0
1.5em
;
}
.modal.content
{
z-index
:
60
;
justify-content
:
start
!important
;
...
...
@@ -1523,13 +1522,22 @@ nav ul:nth-child(2) {
text-decoration
:
underline
;
}
.modal.content
.modal-card-body
table
.settings
tr
td
{
p
osition
:
relative
;
p
adding-top
:
1em
!important
;
}
.modal.content
.modal-card-body
table
.settings
tr
td
.alert
{
position
:
absolute
;
top
:
1em
;
left
:
-0.8em
;
}
.modal.content
.modal-card-body
table
.settings
tr
td
:nth-child
(
odd
)
{
width
:
auto
;
vertical-align
:
middle
;
}
.modal.content
.modal-card-body
table
.settings
tr
td
:nth-child
(
even
)
{
width
:
auto
;
text-align
:
center
;
padding-right
:
0
!important
;
}
.modal.content
.modal-card-body
table
.settings
tr
td
:first-child
{
padding-right
:
3em
;
}
...
...
@@ -1615,6 +1623,14 @@ nav ul:nth-child(2) {
}
@media
screen
and
(
max-width
:
992px
),
screen
and
(
max-height
:
650px
)
{
table
tr
td
{
padding
:
0.25em
1.5em
0.25em
0
!important
;
}
#sortByContainer
li
{
padding
:
0.25em
0.5em
;
}
#todoTableSearchContainer
{
padding
:
1em
;
}
...
...
@@ -1629,6 +1645,9 @@ nav ul:nth-child(2) {
#todoTable
{
padding
:
0
1.5em
1.5em
1.5em
;
}
#todoTable
.group
:first-child
{
margin-top
:
0
;
}
#todoTable
.todo
.cell
{
padding
:
0.25em
0
;
}
...
...
@@ -1689,6 +1708,12 @@ nav ul:nth-child(2) {
margin-top
:
0
;
}
}
body
.compact
table
tr
td
{
padding
:
0.25em
1.5em
0.25em
0
!important
;
}
body
.compact
#sortByContainer
li
{
padding
:
0.25em
0.5em
;
}
body
.compact
#todoTableSearchContainer
{
padding
:
1em
;
}
...
...
@@ -1702,6 +1727,9 @@ body.compact #todoTableSearchContainer .column .icon.is-left {
body
.compact
#todoTable
{
padding
:
0
1.5em
1.5em
1.5em
;
}
body
.compact
#todoTable
.group
:first-child
{
margin-top
:
0
;
}
body
.compact
#todoTable
.todo
.cell
{
padding
:
0.25em
0
;
}
...
...
src/css/style.css.map
View file @
20830e36
This diff is collapsed.
Click to expand it.
src/index.html
View file @
20830e36
...
...
@@ -189,7 +189,7 @@
<section
id=
"todoTableSearchContainer"
class=
"control has-icons-left"
>
<div
class=
"column"
>
<input
id=
"todoTableSearch"
class=
"input is-medium"
type=
"
search
"
placeholder=
"Search"
tabindex=
"10"
>
<input
id=
"todoTableSearch"
class=
"input is-medium"
type=
"
text
"
placeholder=
"Search"
tabindex=
"10"
>
<span
class=
"icon is-left"
>
<i
class=
"fas fa-search"
></i>
</span>
...
...
@@ -245,7 +245,7 @@
<div
class=
"modal-background"
></div>
<div
class=
"modal-content"
>
<div
class=
"card"
>
<header
id=
"modalTitle"
class=
"card-header
card-header
-title"
></header>
<header
id=
"modalTitle"
class=
"card-header-title"
></header>
<div
class=
"card-content"
>
<div
class=
"content"
>
<div
class=
"control has-icons-right"
>
...
...
@@ -681,7 +681,7 @@
<div
class=
"modal-background"
></div>
<div
class=
"modal-content"
>
<div
class=
"card"
>
<header
class=
"card-header"
>
<header>
<p
id=
"modalChangeFileTitle"
class=
"card-header-title"
></p>
</header>
<div
class=
"card-content"
>
...
...
src/scss/dark.scss
View file @
20830e36
...
...
@@ -19,17 +19,24 @@ body.dark {
color
:
$lighter-grey
;
}
input
,
select
,
textarea
{
select
{
border
:
none
!
important
;
background
:
$darker-grey
!
important
;
background
:
transparent
!
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
[
type
=
"text"
],
textarea
{
background
:
$darker-grey
!
important
;
border
:
none
;
color
:
white
;
}
//TODO reactivate
// 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
,
...
...
@@ -221,6 +228,7 @@ body.dark {
button
{
color
:
white
;
border-color
:
$even-darker-grey
!
important
;
border-right
:
1px
solid
$almost-black
!
important
;
background
:
transparent
!
important
;
}
button
:hover
{
...
...
@@ -274,6 +282,10 @@ body.dark {
}
}
}
.
drawer
:
:-
webkit-scrollbar-thumb
:
window-inactive
,
.
drawer
::-
webkit-scrollbar-thumb
{
background
:
$dark-grey
;
}
#drawerClose
{
background
:
$even-darker-grey
!
important
;
}
...
...
@@ -284,6 +296,10 @@ body.dark {
background
:
$almost-black
!
important
;
}
}
#
todoTableWrapper
:
:-
webkit-scrollbar-thumb
:
window-inactive
,
#todoTa
bleWrapper
::-
webkit-scrollbar-thumb
{
background
:
$even-darker-grey
;
}
#filterContext
{
.card
{
background
:
$even-darker-grey
;
...
...
@@ -365,11 +381,6 @@ body.dark {
.card-header-title
{
color
:
white
;
}
.card-content
{
/*button {
background: $darker-grey!important;
}*/
}
.card-footer
,
.card-footer-item
{
border-color
:
$darker-grey
;
...
...
src/scss/style.scss
View file @
20830e36
@charset
'
utf-8
'
;
@import
'
variables.scss
'
;
@import
'
dark.scss
'
;
@charset
"
utf-8
"
;
@import
"
variables.scss
"
;
@import
"
dark.scss
"
;
@font-face
{
font-family
:
'
FreeSans
'
;
src
:
url(
'
../fonts/FreeSans.otf
'
)
format
(
'
opentype
'
);
src
:
url(
'
../fonts/FreeSans.ttf
'
)
format
(
'
truetype
'
);
font-family
:
"
FreeSans
"
;
src
:
url(
"
../fonts/FreeSans.otf
"
)
format
(
"
opentype
"
);
src
:
url(
"
../fonts/FreeSans.ttf
"
)
format
(
"
truetype
"
);
}
@font-face
{
font-family
:
'
FreeSansBold
'
;
src
:
url(
'
../fonts/FreeSansBold.otf
'
)
format
(
'
opentype
'
);
src
:
url(
'
../fonts/FreeSansBold.ttf
'
)
format
(
'
truetype
'
);
font-family
:
"
FreeSansBold
"
;
src
:
url(
"
../fonts/FreeSansBold.otf
"
)
format
(
"
opentype
"
);
src
:
url(
"
../fonts/FreeSansBold.ttf
"
)
format
(
"
truetype
"
);
}
html
{
height
:
100%
;
...
...
@@ -22,6 +22,13 @@ body {
-moz-user-select
:
none
;
-ms-user-select
:
none
;