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 }}