diff --git a/src/static_src/scss/_base.scss b/src/static_src/scss/_base.scss index fd6fecd..221f8b2 100644 --- a/src/static_src/scss/_base.scss +++ b/src/static_src/scss/_base.scss @@ -79,6 +79,11 @@ body { &.is-invalid ~ .invalid-feedback { display: block; } + + &:focus { + border-color: rgba(var(--terUser), 0.75); + box-shadow: 0 0 0.75rem rgba(var(--terUser), 0.5); + } } .invalid-feedback { diff --git a/src/static_src/scss/_button-pad.scss b/src/static_src/scss/_button-pad.scss index a8c954c..a2ff793 100644 --- a/src/static_src/scss/_button-pad.scss +++ b/src/static_src/scss/_button-pad.scss @@ -1,6 +1,10 @@ .btn { - min-width: 2rem; - min-height: 2rem; + display: inline-flex; + align-items: center; + justify-content: center; + text-align: center; + width: 2rem; + height: 2rem; text-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5); border: 0.15rem solid rgba(var(--priUser), 1); border-radius: 50%; @@ -20,6 +24,72 @@ border: 0.18rem solid rgba(var(--priUser), 1); } + &.btn-primary { + color: rgba(var(--quaUser), 1); + border-color: rgba(var(--quaUser), 1); + background-color: rgba(var(--quiUser), 1); + box-shadow: + 0.1rem 0.1rem 0.12rem rgba(var(--quiUser), 0.25), + 0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25), + 0.25rem 0.25rem 0.25rem rgba(var(--quiUser), 0.12) + ; + + &:hover { + text-shadow: + 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25), + 0 0 1rem rgba(var(--quaUser), 1) + ; + box-shadow: + 0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25), + 0 0 0.5rem rgba(var(--quaUser), 0.12) + ; + } + + &:active { + border: 0.18rem solid rgba(var(--quaUser), 1); + text-shadow: + -0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25), + 0 0 0.12rem rgba(var(--quaUser), 1) + ; + box-shadow: + -0.1rem -0.1rem 0.12rem rgba(var(--quiUser), 0.25), + -0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25), + 0 0 0.5rem rgba(var(--quaUser), 0.12) + ; + } + } + + &.btn-xl { + width: 5rem; + height: 5rem; + font-size: 1.2rem; + border-width: 0.3rem; + + &:hover { + text-shadow: + 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.25), + 0 0 0.5rem rgba(var(--quaUser), 1) + ; + box-shadow: + 0.24rem 0.24rem 0.5rem rgba(0, 0, 0, 0.25), + 0 0 0.5rem rgba(var(--quaUser), 22) + ; + } + + &:active { + border-width: 0.25rem; + text-shadow: + -0.2rem -0.2rem 0.25rem rgba(0, 0, 0, 0.25), + 0 0 0.24rem rgba(var(--quaUser), 1) + ; + box-shadow: + -0.2rem -0.2rem 0.24rem rgba(var(--quiUser), 0.25), + -0.2rem -0.2rem 0.24rem rgba(0, 0, 0, 0.25), + 0 0 0.5rem rgba(var(--quaUser), 0.22) + ; + } + } + &.btn-cancel { color: rgba(var(--priOr), 1); border-color: rgba(var(--priOr), 1); @@ -32,18 +102,18 @@ &:hover { text-shadow: - 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25), - 0 0 1rem rgba(var(--priOr), 1) + 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.25), + 0 0 0.5rem rgba(var(--priOr), 1) ; box-shadow: - 0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25), + 0.24rem 0.24rem 0.5rem rgba(0, 0, 0, 0.25), 0 0 0.5rem rgba(var(--priOr), 0.12) ; } &:active { text-shadow: - -0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25), + -0.1rem -0.1rem 0.5rem rgba(0, 0, 0, 0.25), 0 0 0.12rem rgba(var(--priOr), 1) ; box-shadow: diff --git a/src/static_src/scss/_dashboard.scss b/src/static_src/scss/_dashboard.scss new file mode 100644 index 0000000..0199ec7 --- /dev/null +++ b/src/static_src/scss/_dashboard.scss @@ -0,0 +1,21 @@ +#id_applets_container { + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 1rem; + padding: 0.5rem 0; + + section { + border: 0.2rem solid rgba(var(--secUser), 0.5); + border-radius: 0.75rem; + padding: 1rem; + } +} + +#id_dash_gear { + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; + color: rgba(var(--secUser), 0.6); +} \ No newline at end of file diff --git a/src/static_src/scss/_palette-picker.scss b/src/static_src/scss/_palette-picker.scss index 67cc4dd..fdc6cd3 100644 --- a/src/static_src/scss/_palette-picker.scss +++ b/src/static_src/scss/_palette-picker.scss @@ -1,13 +1,21 @@ -.palette-picker { +.palette { display: flex; - gap: 1rem; + flex-direction: row; + overflow-x: auto; + overflow-y: hidden; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + gap: 0.75rem; + padding-bottom: 0.5rem; } -.palette-picker-item { +.palette-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; + flex: 0 0 calc(100% / 3); + scroll-snap-align: start; } .swatch { diff --git a/src/static_src/scss/core.scss b/src/static_src/scss/core.scss index 539c5de..d8e9a04 100644 --- a/src/static_src/scss/core.scss +++ b/src/static_src/scss/core.scss @@ -1,6 +1,7 @@ @import 'rootvars'; @import 'base'; @import 'button-pad'; +@import 'dashboard'; @import 'palette-picker'; diff --git a/src/static_src/scss/rootvars.scss b/src/static_src/scss/rootvars.scss index 9f78616..e39b2f5 100644 --- a/src/static_src/scss/rootvars.scss +++ b/src/static_src/scss/rootvars.scss @@ -8,7 +8,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - touch-action: none; + outline: none; } :root { diff --git a/src/templates/apps/dashboard/list.html b/src/templates/apps/dashboard/list.html index 1863952..f242ed7 100644 --- a/src/templates/apps/dashboard/list.html +++ b/src/templates/apps/dashboard/list.html @@ -41,7 +41,7 @@ {% endif %} - + List shared with: {% for user in list.shared_with.all %} diff --git a/src/templates/core/base.html b/src/templates/core/base.html index aa5d36c..f9546cf 100644 --- a/src/templates/core/base.html +++ b/src/templates/core/base.html @@ -28,7 +28,7 @@ Logged in as {{ user|display_name }}
{% csrf_token %} -