pinokiod 7.3.6 → 7.3.8

package/server/public/style.css

@@ -70,6 +70,41 @@
   --pinokio-chrome-accent-fg-light: #e1b261;
   --pinokio-chrome-accent-bg-dark: rgba(255, 255, 255, 0.08);
   --pinokio-chrome-accent-fg-dark: #c2b28a;
+  --pinokio-sidebar-tabbar-bg: #ffffff;
+  --pinokio-sidebar-tabbar-border: rgba(15, 23, 42, 0.055);
+  --pinokio-sidebar-separator: rgba(15, 23, 42, 0.045);
+  --pinokio-sidebar-separator-hover: rgba(15, 23, 42, 0.12);
+  --pinokio-sidebar-separator-focus: rgba(59, 130, 246, 0.4);
+  --pinokio-sidebar-control-bg: rgba(15, 23, 42, 0.035);
+  --pinokio-sidebar-control-active-bg: rgba(255, 255, 255, 0.82);
+  --pinokio-sidebar-tab-hover: rgba(15, 23, 42, 0.028);
+  --pinokio-sidebar-tab-active-bg: rgba(15, 23, 42, 0.038);
+  --pinokio-sidebar-tab-active-color: #111827;
+  --pinokio-sidebar-tab-muted: rgba(31, 41, 55, 0.72);
+  --pinokio-sidebar-icon-muted: rgba(31, 41, 55, 0.58);
+  --pinokio-sidebar-icon-active: rgba(17, 24, 39, 0.84);
+  --pinokio-sidebar-action-muted: rgba(31, 41, 55, 0.48);
+  --pinokio-sidebar-notice-flash-bg: rgba(185, 28, 28, 0.12);
+  --pinokio-sidebar-tab-shadow: transparent;
+}
+
+body.dark {
+  --pinokio-sidebar-tabbar-bg: #1b1c1d;
+  --pinokio-sidebar-tabbar-border: rgba(255, 255, 255, 0.055);
+  --pinokio-sidebar-separator: rgba(255, 255, 255, 0.045);
+  --pinokio-sidebar-separator-hover: rgba(255, 255, 255, 0.12);
+  --pinokio-sidebar-separator-focus: rgba(96, 165, 250, 0.5);
+  --pinokio-sidebar-control-bg: rgba(255, 255, 255, 0.035);
+  --pinokio-sidebar-control-active-bg: rgba(255, 255, 255, 0.075);
+  --pinokio-sidebar-tab-hover: rgba(255, 255, 255, 0.035);
+  --pinokio-sidebar-tab-active-bg: rgba(255, 255, 255, 0.048);
+  --pinokio-sidebar-tab-active-color: rgba(248, 250, 252, 0.91);
+  --pinokio-sidebar-tab-muted: rgba(229, 231, 235, 0.64);
+  --pinokio-sidebar-icon-muted: rgba(229, 231, 235, 0.54);
+  --pinokio-sidebar-icon-active: rgba(248, 250, 252, 0.82);
+  --pinokio-sidebar-action-muted: rgba(229, 231, 235, 0.42);
+  --pinokio-sidebar-notice-flash-bg: rgba(248, 113, 113, 0.14);
+  --pinokio-sidebar-tab-shadow: transparent;
 }
 
 
@@ -1229,189 +1264,275 @@ body.dark form.search input[type=search] {
   color: white;
 }
 
-/* Unified sidebar style across pages (home/net/network/connect/tools/settings/etc). */
-.main-sidebar {
-  width: 200px;
-  display: block;
-  flex-shrink: 0;
+/* Shared sidebar style across pages (home/net/network/connect/tools/settings/etc). */
+body.main-sidebar-page > header.navheader,
+body.main-sidebar-page > header.navheader.minimized,
+body.main-sidebar-page .navheader {
+  background: var(--pinokio-sidebar-tabbar-bg) !important;
+  background-color: var(--pinokio-sidebar-tabbar-bg) !important;
+  background-image: none !important;
+  border-bottom: 1px solid var(--pinokio-sidebar-separator);
+  backdrop-filter: none;
+  box-shadow: none;
+  isolation: isolate;
+}
+body.main-sidebar-page .navheader .sidebar-toggle {
+  color: #0f172a;
+  position: relative;
+  width: 40px;
+  height: 30px;
+  padding: 0;
+  border-radius: 9px;
+  box-sizing: border-box;
 }
-.main-sidebar .tab {
-  display: flex !important;
-  align-items: center !important;
-  gap: 5px !important;
-  color: black !important;
-  text-decoration: none !important;
-  padding: 10px !important;
-  font-size: 12px !important;
-  opacity: 0.5;
-  border-left: 10px solid transparent;
+body.dark.main-sidebar-page .navheader .sidebar-toggle {
+  color: rgba(248, 250, 252, 0.92);
 }
-body.dark .main-sidebar .tab {
-  color: white !important;
+body.main-sidebar-page .navheader .sidebar-toggle[aria-expanded="true"] {
+  background: rgba(15, 23, 42, 0.08);
+  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
 }
-.main-sidebar .tab:hover,
-body.dark .main-sidebar .tab:hover {
-  color: royalblue !important;
-  opacity: 1 !important;
+body.dark.main-sidebar-page .navheader .sidebar-toggle[aria-expanded="true"] {
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
-.main-sidebar .tab.selected {
-  font-weight: bold !important;
-  opacity: 1 !important;
-}
-.main-sidebar .tab i {
-  width: 20px;
-  text-align: center;
-  display: block;
+body.main-sidebar-page .sidebar-toggle-glyph {
+  width: 19px;
+  height: 15px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
-.main-sidebar .tab.submenu {
-  padding-left: 25px !important;
+body.main-sidebar-page .sidebar-toggle-frame {
+  position: relative;
+  width: 18px;
+  height: 14px;
+  border: 1.7px solid currentColor;
+  border-radius: 3px;
   box-sizing: border-box;
 }
-.main-sidebar .btn-tab.quick-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 0 10px;
-  margin-top: 10px;
-  margin-bottom: 10px;
+body.main-sidebar-page .sidebar-toggle-panel {
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  bottom: 2px;
+  width: 4px;
+  border-radius: 1px;
+  background: currentColor;
+}
+body.main-sidebar-page .sidebar-toggle-content {
+  position: absolute;
+  left: 8px;
+  right: 3px;
+  top: 3px;
+  height: 1.5px;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.32;
+  box-shadow: 0 3.8px 0 currentColor, 0 7.6px 0 currentColor;
 }
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions {
+body.main-sidebar-page .navheader .sidebar-toggle[aria-expanded="false"] .sidebar-toggle-panel {
+  background: transparent;
+  outline: 1.5px solid currentColor;
+  outline-offset: -1px;
+  opacity: 0.35;
+}
+body.main-sidebar-page main {
+  display: flex;
   align-items: stretch;
 }
-.main-sidebar .universal-quick-actions > .btn,
-.main-sidebar .universal-quick-actions > .universal-create-menu {
-  width: 100%;
+body.main-sidebar-page main > :not(.main-sidebar) {
+  flex: 1 1 auto;
   min-width: 0;
 }
-.main-sidebar .universal-quick-actions .btn,
-.main-sidebar .universal-quick-actions summary.btn {
-  width: 100%;
-  min-width: 0;
-  display: flex !important;
-  align-items: center;
-  justify-content: flex-start !important;
+body.main-sidebar-page main > .container,
+body.main-sidebar-page main > .task-container {
   box-sizing: border-box;
+  padding-left: 16px;
 }
-.main-sidebar .universal-quick-actions details {
-  width: 100%;
-  position: relative;
+.main-sidebar {
+  order: -1;
+  width: 196px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-height: 0;
+  padding: 8px 6px;
+  box-sizing: border-box;
+  background: transparent;
+  color: var(--pinokio-sidebar-tab-muted);
+  border-right: 1px solid var(--pinokio-sidebar-separator);
+}
+.main-sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch !important;
+  gap: 0;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0 !important;
+  background: transparent !important;
 }
-.main-sidebar .universal-quick-actions summary {
+.main-sidebar-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
   width: 100%;
-  list-style: none;
 }
-.main-sidebar .universal-create-menu > summary.btn {
-  padding-right: 8px;
+.main-sidebar-section + .main-sidebar-section {
+  margin-top: 8px;
+  padding-top: 0;
+  border-top: 0;
 }
-.main-sidebar .universal-quick-actions summary::-webkit-details-marker {
-  display: none;
+.main-sidebar-section-actions {
+  padding-bottom: 2px;
+  margin-bottom: 4px;
+  border-bottom: 0;
 }
-.main-sidebar .universal-quick-actions .caption {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.main-sidebar-section-system {
+  margin-top: 8px;
+  padding-top: 0;
 }
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions > .btn,
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions > .universal-create-menu > summary.btn {
+.main-sidebar-section-title {
+  min-height: 20px;
+  display: flex;
+  align-items: flex-end;
+  box-sizing: border-box;
+  padding: 5px 6px 4px;
+  color: var(--pinokio-sidebar-action-muted);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0;
+  user-select: none;
+}
+.main-sidebar .tab {
   width: 100%;
-  display: inline-flex !important;
-  align-items: center;
-  justify-content: flex-start !important;
-  text-align: left;
-  gap: 3px;
-  height: 30px;
-  min-height: 30px;
+  min-width: 0;
+  min-height: 25px;
+  appearance: none;
+  display: grid !important;
+  grid-template-columns: 16px minmax(0, 1fr) auto;
+  align-items: center !important;
+  column-gap: 7px !important;
   margin: 0;
-  padding: 0 8px;
-  border: 1px solid var(--pinokio-chrome-accent-bg-light) !important;
-  border-radius: 5px !important;
-  background: var(--pinokio-chrome-accent-bg-light) !important;
-  border-color: var(--pinokio-chrome-accent-bg-light) !important;
-  color: #fff !important;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
+  padding: 3px 6px !important;
   box-sizing: border-box;
-  opacity: 1;
+  border: 0 !important;
+  border-left: 0 !important;
+  border-radius: 6px !important;
+  background: transparent !important;
+  color: var(--pinokio-sidebar-tab-muted) !important;
+  opacity: 1 !important;
+  text-align: left;
+  text-decoration: none !important;
+  font-size: 12px !important;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.25;
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease;
 }
-body.dark .main-sidebar .btn-tab.quick-actions.universal-quick-actions > .btn,
-body.dark .main-sidebar .btn-tab.quick-actions.universal-quick-actions > .universal-create-menu > summary.btn {
-  border-color: var(--pinokio-chrome-accent-bg-dark) !important;
-  background: var(--pinokio-chrome-accent-bg-dark) !important;
-  color: #fff !important;
-}
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions > .btn:hover,
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions > .btn:focus-visible,
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions > .btn:active,
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions > .universal-create-menu > summary.btn:hover,
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions > .universal-create-menu > summary.btn:focus-visible,
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions > .universal-create-menu > summary.btn:active {
-  border-color: var(--pinokio-chrome-accent-bg-light) !important;
-  background: var(--pinokio-chrome-accent-bg-light) !important;
-  color: #fff !important;
-}
-body.dark .main-sidebar .btn-tab.quick-actions.universal-quick-actions > .btn:hover,
-body.dark .main-sidebar .btn-tab.quick-actions.universal-quick-actions > .btn:focus-visible,
-body.dark .main-sidebar .btn-tab.quick-actions.universal-quick-actions > .btn:active,
-body.dark .main-sidebar .btn-tab.quick-actions.universal-quick-actions > .universal-create-menu > summary.btn:hover,
-body.dark .main-sidebar .btn-tab.quick-actions.universal-quick-actions > .universal-create-menu > summary.btn:focus-visible,
-body.dark .main-sidebar .btn-tab.quick-actions.universal-quick-actions > .universal-create-menu > summary.btn:active {
-  border-color: var(--pinokio-chrome-accent-bg-dark) !important;
-  background: var(--pinokio-chrome-accent-bg-dark) !important;
-  color: #fff !important;
+.main-sidebar .tab:hover,
+.main-sidebar .tab:focus-visible {
+  background: var(--pinokio-sidebar-tab-hover) !important;
+  color: var(--pinokio-sidebar-tab-active-color) !important;
+  outline: none;
 }
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions > #explore {
-  justify-content: flex-start !important;
-  text-align: left;
-  gap: 3px;
-  padding: 0 8px;
+.main-sidebar .tab.selected {
+  background: var(--pinokio-sidebar-tab-active-bg) !important;
+  color: var(--pinokio-sidebar-tab-active-color) !important;
+  font-weight: 600 !important;
 }
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions .quick-action-leading-icon {
-  flex: 0 0 18px;
-  width: 18px;
-  height: 18px;
+.main-sidebar .tab i,
+.main-sidebar .tab .main-sidebar-action-icon {
+  grid-column: 1;
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: inherit;
-  font-size: 14px;
+  color: var(--pinokio-sidebar-icon-muted) !important;
+  font-size: 12px;
   line-height: 1;
+  text-align: center;
 }
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions .quick-action-icon {
-  background: currentColor;
+.main-sidebar .tab:hover i,
+.main-sidebar .tab:focus-visible i,
+.main-sidebar .tab.selected i,
+.main-sidebar .tab:hover .main-sidebar-action-icon,
+.main-sidebar .tab:focus-visible .main-sidebar-action-icon,
+.main-sidebar .tab.selected .main-sidebar-action-icon {
+  color: var(--pinokio-sidebar-icon-active) !important;
+}
+.main-sidebar .caption {
+  grid-column: 2;
+  min-width: 0;
+  width: auto !important;
+  display: block !important;
+  overflow: hidden;
+  text-align: left !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal !important;
+}
+.main-sidebar .tab.submenu {
+  padding-left: 16px !important;
+}
+.main-sidebar .universal-create-menu {
+  width: 100%;
+  min-width: 0;
+  position: relative;
+}
+.main-sidebar .universal-create-menu summary {
+  list-style: none;
+  list-style-type: none;
+}
+.main-sidebar .universal-create-menu summary::marker {
+  content: "";
+}
+.main-sidebar .universal-create-menu summary::-webkit-details-marker {
+  display: none;
 }
 .main-sidebar .ask-pinokio-icon {
+  background: currentColor;
   -webkit-mask: url('/pinokio-mark.svg') center / 14px 14px no-repeat;
   mask: url('/pinokio-mark.svg') center / 14px 14px no-repeat;
 }
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions > .btn i,
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions > .btn .quick-action-icon,
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions > .btn .caption,
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions > .universal-create-menu > summary.btn i,
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions > .universal-create-menu > summary.btn .quick-action-icon,
-.main-sidebar .btn-tab.quick-actions.universal-quick-actions > .universal-create-menu > summary.btn .caption {
-  color: #fff !important;
-}
-body.dark .main-sidebar .btn-tab.quick-actions.universal-quick-actions > .btn i,
-body.dark .main-sidebar .btn-tab.quick-actions.universal-quick-actions > .btn .quick-action-icon,
-body.dark .main-sidebar .btn-tab.quick-actions.universal-quick-actions > .btn .caption,
-body.dark .main-sidebar .btn-tab.quick-actions.universal-quick-actions > .universal-create-menu > summary.btn i,
-body.dark .main-sidebar .btn-tab.quick-actions.universal-quick-actions > .universal-create-menu > summary.btn .quick-action-icon,
-body.dark .main-sidebar .btn-tab.quick-actions.universal-quick-actions > .universal-create-menu > summary.btn .caption {
-  color: #fff !important;
-}
-.main-sidebar .universal-create-caret {
-  margin-left: auto;
-  font-size: 10px;
-  opacity: 0.9;
-  transition: transform 140ms ease, opacity 140ms ease;
+.main-sidebar-peer {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 0;
 }
-.main-sidebar .universal-create-menu[open] .universal-create-caret {
-  transform: rotate(180deg);
+.main-sidebar .qr {
+  padding: 10px 0 0;
+  color: var(--pinokio-sidebar-tab-muted);
 }
-.main-sidebar .btn-tab.quick-actions + .tab {
-  margin-top: 6px;
+.main-sidebar .qr img {
+  width: 128px;
+  height: 128px;
+  max-width: calc(100% - 24px);
+}
+@media only screen and (min-width: 601px) {
+  body.main-sidebar-page.main-sidebar-collapsed .main-sidebar {
+    width: 0;
+    min-width: 0;
+    max-width: 0;
+    padding-left: 0;
+    padding-right: 0;
+    border-right-width: 0;
+    border-right-color: transparent;
+    opacity: 0;
+    pointer-events: none;
+    overflow: hidden;
+  }
+
+  body.main-sidebar-page.main-sidebar-collapsed main > .container,
+  body.main-sidebar-page.main-sidebar-collapsed main > .task-container {
+    padding-left: 0;
+  }
 }
 form.search input[type=search] {
   flex-grow: 1;
@@ -3733,7 +3854,7 @@ aside .qr {
   body.main-sidebar-page .main-sidebar-mobile-toggle {
     position: fixed;
     top: calc(10px + env(safe-area-inset-top));
-    right: 10px;
+    left: 10px;
     z-index: 10000030;
     width: 34px;
     height: 34px;
@@ -3758,15 +3879,15 @@ aside .qr {
   }
 
   body.main-sidebar-page.main-sidebar-mobile-open .main-sidebar-mobile-toggle {
-    background: var(--pinokio-chrome-accent-bg-light);
-    border-color: var(--pinokio-chrome-accent-bg-light);
-    color: var(--pinokio-chrome-accent-fg-light);
+    background: var(--pinokio-sidebar-tab-active-bg);
+    border-color: var(--pinokio-sidebar-separator-hover);
+    color: var(--pinokio-sidebar-tab-active-color);
   }
 
   body.dark.main-sidebar-page.main-sidebar-mobile-open .main-sidebar-mobile-toggle {
-    background: var(--pinokio-chrome-accent-bg-dark);
-    border-color: var(--pinokio-chrome-accent-bg-dark);
-    color: var(--pinokio-chrome-accent-fg-dark);
+    background: var(--pinokio-sidebar-tab-active-bg);
+    border-color: var(--pinokio-sidebar-separator-hover);
+    color: var(--pinokio-sidebar-tab-active-color);
   }
 
   body.main-sidebar-page.main-sidebar-mobile-open .main-sidebar-mobile-backdrop {
@@ -3780,10 +3901,15 @@ aside .qr {
     cursor: pointer;
   }
 
+  body.main-sidebar-page main > .container,
+  body.main-sidebar-page main > .task-container {
+    padding-left: 0;
+  }
+
   body.main-sidebar-page .main-sidebar {
     position: fixed;
     top: 0;
-    right: 0;
+    left: 0;
     bottom: 0;
     z-index: 10000020;
     width: min(280px, calc(100vw - 40px));
@@ -3792,17 +3918,17 @@ aside .qr {
     padding: calc(52px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));
     box-sizing: border-box;
     overflow-y: auto;
-    background: #f7f8fb;
-    border-left: 1px solid rgba(15, 23, 42, 0.08);
-    box-shadow: -24px 0 48px rgba(15, 23, 42, 0.18);
-    transform: translateX(100%);
+    background: var(--pinokio-sidebar-tabbar-bg);
+    border-right: 1px solid var(--pinokio-sidebar-separator);
+    box-shadow: 24px 0 48px rgba(15, 23, 42, 0.12);
+    transform: translateX(-100%);
     transition: transform 180ms ease;
   }
 
   body.dark.main-sidebar-page .main-sidebar {
-    background: #0f1115;
-    border-left-color: rgba(255, 255, 255, 0.08);
-    box-shadow: -24px 0 52px rgba(0, 0, 0, 0.45);
+    background: var(--pinokio-sidebar-tabbar-bg);
+    border-right-color: var(--pinokio-sidebar-separator);
+    box-shadow: 24px 0 52px rgba(0, 0, 0, 0.38);
   }
 
   body.main-sidebar-page.main-sidebar-mobile-open .main-sidebar {
@@ -3821,10 +3947,6 @@ aside .qr {
     display: block !important;
   }
 
-  body.main-sidebar-page .main-sidebar .btn-tab {
-    padding: 0 0 6px;
-  }
-
   body.main-sidebar-page .main-sidebar .btn-tab .btn {
     justify-content: flex-start;
   }
@@ -4167,14 +4289,14 @@ body.dark .logs-raw-only-title {
   color: rgba(248, 250, 252, 0.82);
 }
 .logs-page-controls {
-  --logs-action-slot-width: 342px;
-  display: grid;
-  grid-template-columns: var(--logs-action-slot-width) auto;
+  display: flex;
   align-items: center;
   justify-content: flex-end;
-  justify-items: end;
   gap: 8px;
+  flex: 1 1 auto;
+  min-width: 0;
   max-width: 100%;
+  margin-left: auto;
 }
 .logs-view-switch {
   display: inline-flex;
@@ -4218,13 +4340,11 @@ body.dark .logs-view-tab.is-active {
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.075);
 }
 .logs-action-group {
-  grid-column: 1;
-  grid-row: 1;
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
   gap: 6px;
-  width: 100%;
+  width: auto;
   min-height: 28px;
   flex-wrap: nowrap;
 }
@@ -4244,8 +4364,7 @@ body.dark .logs-view-tab.is-active {
   text-decoration: none;
 }
 .logs-close-button {
-  grid-column: 2;
-  grid-row: 1;
+  flex: 0 0 auto;
 }
 .logs-icon-button:hover,
 .logs-icon-button:focus-visible {
@@ -4265,8 +4384,7 @@ body.dark .logs-icon-button:focus-visible {
 }
 .logs-page[data-view="latest"] [data-logs-actions="raw"],
 .logs-page[data-view="raw"] [data-logs-actions="latest"] {
-  visibility: hidden;
-  pointer-events: none;
+  display: none;
 }
 .logs-page[data-view="latest"] .logs-raw-view,
 .logs-page[data-view="raw"] .logs-latest-view {
@@ -4757,7 +4875,7 @@ body.dark .logs-draft-status.is-error {
   overflow-wrap: anywhere;
 }
 body.dark .logs-report-output {
-  background: #090b10;
+  background: #1b1c1d;
   color: rgba(248, 250, 252, 0.9);
 }
 .logs-mask-token {
@@ -5515,14 +5633,11 @@ body.dark .logs-viewer-output {
     width: 100%;
   }
   .logs-page-controls {
-    grid-template-columns: 1fr auto;
-    justify-content: stretch;
-    justify-items: stretch;
+    justify-content: flex-end;
+    flex-wrap: wrap;
     width: 100%;
   }
   .logs-view-switch {
-    grid-column: 1;
-    grid-row: auto;
     width: 100%;
   }
   .logs-view-tab {
@@ -5530,16 +5645,12 @@ body.dark .logs-viewer-output {
     min-width: 0;
   }
   .logs-action-group {
-    grid-column: 1;
-    grid-row: auto;
-    width: 100%;
     min-width: 0;
-    justify-content: flex-start;
+    justify-content: flex-end;
     flex-wrap: wrap;
   }
   .logs-icon-button {
-    grid-column: 2;
-    grid-row: 1;
+    flex: 0 0 auto;
   }
   .logs-section-control {
     grid-template-columns: auto minmax(0, 1fr);
@@ -5549,10 +5660,6 @@ body.dark .logs-viewer-output {
     width: 100%;
     max-width: none;
   }
-  .logs-page[data-view="latest"] [data-logs-actions="raw"],
-  .logs-page[data-view="raw"] [data-logs-actions="latest"] {
-    display: none;
-  }
   .logs-viewer-header {
     flex-direction: column;
     align-items: flex-start;