Fix toolbar styles

This commit is contained in:
Matthias Metelka 2023-01-13 00:10:19 +01:00
parent 212a4ca2e1
commit 003d3a39c7
2 changed files with 29 additions and 16 deletions

View file

@ -67,33 +67,39 @@ body {
} }
.toolbar { .toolbar {
height: 31px; height: 31px;
overflow: hidden; overflow: hidden;
border-bottom-left-radius: prop(border-radius-medium); border-bottom-left-radius: prop(border-radius-medium);
border-bottom-right-radius: prop(border-radius-medium); border-bottom-right-radius: prop(border-radius-medium);
@include elevation(1, $opacity-boost: -0.1); @include elevation(1, $opacity-boost: -0.1);
// glass effect
background: var(--canvas-glass);
backdrop-filter: blur(var(--blur));
}
// elevated state (deck browser, overview) // elevated state (deck browser, overview)
body:not(.flat) & { &:not(.flat) .toolbar {
background: var(--canvas-elevated); background: var(--canvas-elevated);
@include elevation(1); @include elevation(1);
&:hover { &:hover {
@include elevation(2); @include elevation(2);
} }
} }
// glass effect
background: var(--canvas-glass);
backdrop-filter: blur(var(--blur));
}
&:not(.flat) .hitem {
@include button.base($border: false, $with-hover: false);
background: var(--canvas-glass);
border: 1px solid transparent;
}
.hitem { .hitem {
&:hover {
background: var(--canvas-inset);
text-decoration: none; text-decoration: none;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--border-subtle);
} }
&:active { &:active {
@include button.base($border: false); background: var(--canvas-inset);
background: var(--canvas-elevated);
} }
&:first-child { &:first-child {
padding-left: 18px; padding-left: 18px;

View file

@ -55,6 +55,13 @@ class ToolbarWebView(AnkiWebView):
def on_body_classes_need_update(self) -> None: def on_body_classes_need_update(self) -> None:
super().on_body_classes_need_update() super().on_body_classes_need_update()
super().adjustHeightToFit() super().adjustHeightToFit()
if self.mw.state == "review":
if self.mw.pm.collapse_toolbar():
self.eval("""document.body.classList.remove("flat"); """)
else:
self.flatten()
self.expand() self.expand()
def _onHeight(self, qvar: Optional[int]) -> None: def _onHeight(self, qvar: Optional[int]) -> None:
@ -70,7 +77,7 @@ class ToolbarWebView(AnkiWebView):
self.eval("""document.body.classList.remove("collapsed"); """) self.eval("""document.body.classList.remove("collapsed"); """)
def flatten(self) -> None: def flatten(self) -> None:
self.eval("document.body.classList.add('flat'); ") self.eval("""document.body.classList.add("flat"); """)
def elevate(self) -> None: def elevate(self) -> None:
self.eval( self.eval(