style: hardcode dimensions rather than scaling with rem

We are not under control of rem. (E.g. lektor-website currently sets rem to 10px which makes the toolbar tiny.)
lektor · Nov 6, 2023 · 8174297 · 8174297
1 parent e7dd561
commit 8174297
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 14 deletions.
diff --git a/frontend/tooldrawer/components/css/button.ts b/frontend/tooldrawer/components/css/button.ts
@@ -21,7 +21,7 @@ export default css`
 
     color: var(--lektor-button-color);
     background-color: var(--lektor-button-bg);
-    font-size: 1.7rem;
+
     aspect-ratio: 1/1;
     cursor: pointer;
   }

diff --git a/frontend/tooldrawer/components/drag-handle.ts b/frontend/tooldrawer/components/drag-handle.ts
@@ -127,15 +127,15 @@ export class DragHandle extends LitElement {
   static override styles = css`
     #handle {
       cursor: grab;
-      width: 100%;
+      width: 17px;
       height: 100%;
       display: flex;
     }
     #icon {
+      margin: 3px;
       flex-grow: 1;
-      margin: 0.15em;
-      background: radial-gradient(currentcolor 35%, transparent 45%) left /
-        0.3em 0.3em repeat space;
+      background: radial-gradient(currentcolor 35%, transparent 45%) left / 6px
+        6px repeat space;
     }
 
     #cover {

diff --git a/frontend/tooldrawer/components/drawer.ts b/frontend/tooldrawer/components/drawer.ts
@@ -204,8 +204,7 @@ export class LektorDrawer extends WidgetMixin(LitElement) {
       right: 0;
       z-index: 1000;
 
-      font-size: 1.2rem;
-      min-height: 2rem;
+      min-height: 32px; /* 2rem */
       color: var(--lektor-drawer-color);
       background-color: var(--lektor-drawer-bg);
       border: 1px solid var(--lektor-drawer-border-color);
@@ -215,7 +214,7 @@ export class LektorDrawer extends WidgetMixin(LitElement) {
       display: flex;
 
       /* move drawer off-screen to the right just enough to leave the toggle control visible */
-      transform: translateX(calc(100% - 0.8em - 1px));
+      transform: translateX(calc(100% - 17px));
       transition: transform 0.5s ease-out;
     }
     #drawer.open,
@@ -234,8 +233,8 @@ export class LektorDrawer extends WidgetMixin(LitElement) {
       align-items: center;
     }
     lektor-icon {
-      width: 0.6em;
-      margin: 0.1em;
+      width: 12px;
+      margin: 2px;
     }
     #drawer:not(.open) #icon-open,
     #drawer:where(.open, .closing, :not(:hover, :active, :focus-within))
@@ -245,15 +244,15 @@ export class LektorDrawer extends WidgetMixin(LitElement) {
       display: none;
     }
 
+    ::slotted(*) {
+      font-size: 28px;
+    }
+
     slot {
       margin: 3px;
       display: flex;
       align-items: center;
       gap: 3px;
     }
-
-    lektor-drag-handle {
-      width: 0.9em;
-    }
   `;
 }