diff --git a/app/javascript/src/styles/views/posts/index/_index.desktop.scss b/app/javascript/src/styles/views/posts/index/_index.desktop.scss index 20f1a0bdd..115ae2aef 100644 --- a/app/javascript/src/styles/views/posts/index/_index.desktop.scss +++ b/app/javascript/src/styles/views/posts/index/_index.desktop.scss @@ -4,14 +4,12 @@ grid-template-areas: "search content" "sidebar content"; - grid-template-columns: 14rem 1fr; + grid-template-columns: 15rem 1fr; grid-template-rows: min-content 1fr; .search { box-shadow: inset -0.25rem 0px 0.25rem -0.25rem themed("color-background"); - margin-top: 0.25rem; - border-top-left-radius: 0.25rem; - padding: 0.5rem; + padding: 0.5rem 0.75rem 0.5rem 0.5rem; // Align the controls properly position: relative; @@ -23,7 +21,7 @@ position: absolute; bottom: -1.633rem; - right: 0.25rem; + right: 0.5rem; padding: 0.25rem; gap: 0.5rem; @@ -47,14 +45,13 @@ .sidebar { box-shadow: inset -0.25rem 0px 0.25rem -0.25rem themed("color-background"); - margin-bottom: 0.25rem; - border-bottom-left-radius: 0.25rem; - padding: 0.5rem; + padding: 0.5rem 0.75rem 0.5rem 0.5rem; font-size: 100%; } .content { - border-radius: 0.25rem; + border-radius: 0 0.25rem 0.25rem 0; + padding: 0.5rem 0.75rem themed("content-padding-bottom"); } } diff --git a/app/javascript/src/styles/views/posts/index/_index.scss b/app/javascript/src/styles/views/posts/index/_index.scss index 9be82a05f..bfd376b51 100644 --- a/app/javascript/src/styles/views/posts/index/_index.scss +++ b/app/javascript/src/styles/views/posts/index/_index.scss @@ -2,7 +2,7 @@ body.c-posts.a-index, body.c-favorites.a-index { #page { // Override the theme to instead // project it upon the content area - background: none; + background: var(--color-foreground); padding: 0; } @@ -36,8 +36,6 @@ body.c-posts.a-index, body.c-favorites.a-index { grid-area: search; padding: 0.5rem 0.25rem; - background-color: #152f56; - background-color: themed("color-foreground"); box-shadow: inset 0px -0.25rem 0.25rem -0.25rem themed("color-background"); h1 { @@ -92,8 +90,6 @@ body.c-posts.a-index, body.c-favorites.a-index { gap: 1em; padding: 0.5rem 0.25rem; - background-color: #152f56; - background-color: themed("color-foreground"); box-shadow: inset 0px 0.25rem 0.25rem -0.25rem themed("color-background"); // By popular demand diff --git a/app/javascript/src/styles/views/posts/index/partials/_fullscreen.scss b/app/javascript/src/styles/views/posts/index/partials/_fullscreen.scss index 33dbd7926..3d3279d5c 100644 --- a/app/javascript/src/styles/views/posts/index/partials/_fullscreen.scss +++ b/app/javascript/src/styles/views/posts/index/partials/_fullscreen.scss @@ -24,6 +24,8 @@ background: themed("color-button-active"); color: black; } + + .search-controls { right: 0.25rem; } } .sidebar { display: none; } .content { diff --git a/app/javascript/src/styles/views/posts/index/partials/_sticky.scss b/app/javascript/src/styles/views/posts/index/partials/_sticky.scss index 35674c99d..45514b76c 100644 --- a/app/javascript/src/styles/views/posts/index/partials/_sticky.scss +++ b/app/javascript/src/styles/views/posts/index/partials/_sticky.scss @@ -2,6 +2,9 @@ position: sticky; top: 0; + background: themed("color-foreground"); + border-radius: 0.25rem; + // on top of thumbnail labels z-index: 11;