mirror of
https://github.com/ash-project/ash_hq.git
synced 2024-09-20 05:13:23 +12:00
fix: Dark mode borders and scrollbars (#57)
This commit is contained in:
parent
54151e9f7e
commit
1012d1edbc
3 changed files with 8 additions and 3 deletions
|
@ -116,6 +116,11 @@ html {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Ensure dark-mode is applied to native elements, eg scrollbars */
|
||||||
|
.dark {
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
|
||||||
/* Constrain sidebar container size to screen height - Topbar height - mobile button height*/
|
/* Constrain sidebar container size to screen height - Topbar height - mobile button height*/
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
max-height: calc(100vh - 8.5rem);
|
max-height: calc(100vh - 8.5rem);
|
||||||
|
|
|
@ -18,7 +18,7 @@ defmodule AshHqWeb.Components.AppView.TopBar do
|
||||||
id="top-bar"
|
id="top-bar"
|
||||||
class={
|
class={
|
||||||
"flex justify-between items-center py-4 px-4 h-20 sticky top-0 z-50",
|
"flex justify-between items-center py-4 px-4 h-20 sticky top-0 z-50",
|
||||||
"border-b bg-white dark:bg-base-dark-850": @live_action == :docs_dsl
|
"border-b border-base-light-300 dark:border-base-dark-700 bg-white dark:bg-base-dark-850": @live_action == :docs_dsl
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div class="flex flex-row align-baseline">
|
<div class="flex flex-row align-baseline">
|
||||||
|
|
|
@ -36,7 +36,7 @@ defmodule AshHqWeb.Pages.Docs do
|
||||||
def render(assigns) do
|
def render(assigns) do
|
||||||
~F"""
|
~F"""
|
||||||
<div class="flex flex-col xl:flex-row justify-center">
|
<div class="flex flex-col xl:flex-row justify-center">
|
||||||
<div class="xl:hidden sticky top-20 z-40 h-14 bg-white dark:bg-base-dark-850 flex flex-row justify-start w-full space-x-12 items-center border-b border-t border-base-light-600 py-3">
|
<div class="xl:hidden sticky top-20 z-40 h-14 bg-white dark:bg-base-dark-850 flex flex-row justify-start w-full space-x-12 items-center border-b border-t border-base-light-300 dark:border-base-dark-700 py-3">
|
||||||
<button class="dark:hover:text-base-dark-600" phx-click={show_sidebar()}>
|
<button class="dark:hover:text-base-dark-600" phx-click={show_sidebar()}>
|
||||||
<Heroicons.Outline.MenuIcon class="w-8 h-8 ml-4" />
|
<Heroicons.Outline.MenuIcon class="w-8 h-8 ml-4" />
|
||||||
</button>
|
</button>
|
||||||
|
@ -67,7 +67,7 @@ defmodule AshHqWeb.Pages.Docs do
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
<div class="grow w-full flex flex-row max-w-[1800px] justify-between md:space-x-12">
|
<div class="grow w-full flex flex-row max-w-[1800px] justify-between md:space-x-12">
|
||||||
<div class="sidebar-container sticky overflow-y-auto overflow-x-hidden shrink-0 top-20 xl:border-r xl:border-b lg:pr-2 lg:pt-4">
|
<div class="sidebar-container sticky overflow-y-auto overflow-x-hidden shrink-0 top-20 xl:border-r xl:border-b xl:border-base-light-300 xl:dark:border-base-dark-700 lg:pr-2 lg:pt-4">
|
||||||
<DocSidebar
|
<DocSidebar
|
||||||
id="sidebar"
|
id="sidebar"
|
||||||
class="hidden xl:block w-80"
|
class="hidden xl:block w-80"
|
||||||
|
|
Loading…
Reference in a new issue