aboutsummaryrefslogtreecommitdiff
path: root/ext/css/action-popup.css
diff options
context:
space:
mode:
authorKuuuube <61125188+Kuuuube@users.noreply.github.com>2024-05-06 21:29:06 -0400
committerGitHub <noreply@github.com>2024-05-07 01:29:06 +0000
commit4ec1de0c98199b637bb538ee567ee7b2ffacbb80 (patch)
tree078a5c72dd1e40f9ad6db253f3a6c76777399bed /ext/css/action-popup.css
parente8340a8de705e816d74c0ae7f2222c986dbd4d8c (diff)
Fix mobile action-popup (#886)
* Fix mobile action popup * Fix toggle-handle * Prevent action-popup looking wacky if it somehow gets rendered as a popup (desktop) instead of a full page (mobile) * Replace chevron icons with action specific icons
Diffstat (limited to 'ext/css/action-popup.css')
-rw-r--r--ext/css/action-popup.css61
1 files changed, 45 insertions, 16 deletions
diff --git a/ext/css/action-popup.css b/ext/css/action-popup.css
index b3f7d5df..8abb23ef 100644
--- a/ext/css/action-popup.css
+++ b/ext/css/action-popup.css
@@ -35,6 +35,7 @@ body {
font-family: 'Segoe UI', Tahoma, sans-serif;
font-size: var(--font-size);
width: max-content;
+ height: max-content;
}
h3 {
@@ -122,27 +123,25 @@ label {
background-color: rgba(0, 0, 0, 0.1);
}
.link-group-icon {
- width: 16px;
- height: 16px;
+ width: 26px;
+ height: 26px;
text-align: center;
vertical-align: middle;
display: inline-block;
margin-right: 0.25em;
+ background-repeat: no-repeat;
+ background-size: contain;
}
.link-group-icon>input {
margin: 0;
padding: 0;
}
-.link-group-icon[data-icon=chevron]::after {
- content: '';
- display: block;
- width: 100%;
- height: 100%;
- background-image: url(/images/right-chevron.svg);
- background-repeat: no-repeat;
- background-position: center center;
- background-size: contain;
-}
+.link-group-icon[data-icon=chevron] { background-image: url(/images/right-chevron.svg); }
+.link-group-icon[data-icon=cog] { background-image: url(/images/cog.svg); }
+.link-group-icon[data-icon=key] { background-image: url(/images/key.svg); }
+.link-group-icon[data-icon=magnifying-glass] { background-image: url(/images/magnifying-glass.svg); }
+.link-group-icon[data-icon=question-mark-circle] { background-image: url(/images/question-mark-circle.svg); }
+
.link-group-label {
vertical-align: middle;
}
@@ -165,14 +164,13 @@ label {
}
.toggle {
box-sizing: border-box;
- width: 60px;
- height: 34px;
+ width: 100%;
+ padding-top: 37.7%;
position: relative;
overflow: hidden;
border: 1px solid #245580;
border-radius: 4px;
display: inline-block;
- padding: 6px 12px;
}
.toggle-group {
position: absolute;
@@ -189,7 +187,9 @@ body[data-loaded=true] .toggle-group {
.toggle-on,
.toggle-off,
.toggle-handle {
- display: block;
+ display: flex;
+ justify-content: center;
+ align-items: center;
padding: 6px 12px;
font-size: var(--font-size);
font-weight: normal;
@@ -464,3 +464,32 @@ select.profile-select {
bottom: 0;
background-color: var(--warning-color);
}
+
+/* Mobile overrides */
+
+/* Treat devices that can't hover as mobile devices */
+@media (hover: none) {
+ #full {
+ display: initial;
+ }
+ #mini {
+ display: none;
+ }
+ body {
+ min-width: 95%;
+ width: max-content;
+ font-size: calc(var(--font-size) * 2);
+ text-align: center;
+ }
+ h3 {
+ font-size: calc(var(--font-size) * 3.4);
+ }
+ .toggle-on, .toggle-off {
+ font-size: calc(var(--font-size) * 4);
+ }
+ .toggle-handle {
+ padding-left: 65px;
+ padding-right: 65px;
+ border-radius: 10px;
+ }
+}