significant expansion of scss styling, incl. new _dashboard.scss sheet & comprehensive primary btn theme synced w. user palette; changes to all other scss files; list.html & base.html retrofitted w. corresponding scss classes
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
Disco DeDisco
@@ -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 {
|
||||
|
||||
@@ -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:
|
||||
|
||||
21
src/static_src/scss/_dashboard.scss
Normal file
21
src/static_src/scss/_dashboard.scss
Normal file
@@ -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);
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@import 'rootvars';
|
||||
@import 'base';
|
||||
@import 'button-pad';
|
||||
@import 'dashboard';
|
||||
@import 'palette-picker';
|
||||
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<button type="submit" class="btn btn-primary">Share</button>
|
||||
<button type="submit" class="btn btn-primary btn-xl">Share</button>
|
||||
</form>
|
||||
<small>List shared with:
|
||||
{% for user in list.shared_with.all %}
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
<span class="navbar-text">Logged in as {{ user|display_name }}</span>
|
||||
<form method="POST" action="{% url "logout" %}">
|
||||
{% csrf_token %}
|
||||
<button id="id_logout" class="btn btn-outline-secondary" type="submit">
|
||||
<button id="id_logout" class="btn btn-primary btn-xl" type="submit">
|
||||
Log Out
|
||||
</button>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user