diff --git a/README.md b/README.md index a4cafcaa..6f0c941b 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ This is [vault48.org](https://vault48.org) frontend. +[![Build Status](https://jenkins.vault48.org/api/badges/muerwre/vault-frontend/status.svg)](https://vault48.org/) + ### Installation 1. Clone this repo `git clone git@github.com:muerwre/vault-frontend.git` 2. Run `yarn install` diff --git a/src/containers/sidebars/SidebarWrapper/styles.module.scss b/src/containers/sidebars/SidebarWrapper/styles.module.scss index dda5cc05..7c806159 100644 --- a/src/containers/sidebars/SidebarWrapper/styles.module.scss +++ b/src/containers/sidebars/SidebarWrapper/styles.module.scss @@ -13,7 +13,6 @@ left: 0; width: 100%; height: 100%; - background: rgba(255, 0, 0, 0.3); display: flex; flex-direction: row; z-index: 26; @@ -21,11 +20,7 @@ overflow: hidden; animation: appear 0.25s forwards; - @include can_backdrop { - background: transparentize($content_bg, 0.15); - -webkit-backdrop-filter: blur(15px); - backdrop-filter: blur(15px); - } + @include sidebar } .content { diff --git a/src/containers/sidebars/TagSidebar/styles.module.scss b/src/containers/sidebars/TagSidebar/styles.module.scss index 5de04903..85231a93 100644 --- a/src/containers/sidebars/TagSidebar/styles.module.scss +++ b/src/containers/sidebars/TagSidebar/styles.module.scss @@ -5,14 +5,12 @@ flex: 0 1 400px; max-width: 100vw; position: relative; - padding: 10px; + + @include sidebar_content; } .content { - @include outer_shadow; - border-radius: $radius; - background: $content_bg; height: 100%; box-sizing: border-box; overflow: auto; @@ -28,7 +26,7 @@ align-items: center; justify-content: center; padding: $gap; - background: lighten($content_bg, 2%); + box-shadow: transparentize(white, 0.95) 0 1px; } .tag { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 309d3280..1be33dfb 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -185,3 +185,18 @@ $login_dialog_padding: $gap $gap 30px $gap; -webkit-box-orient: vertical; text-overflow: ellipsis; } + +@mixin sidebar { + background: transparentize($content_bg, 0.15); + + @include can_backdrop { + background: transparentize($content_bg, 0.3); + -webkit-backdrop-filter: blur(15px); + backdrop-filter: blur(15px); + } +} + +@mixin sidebar_content { + background: transparentize($content_bg, 0.4); + box-shadow: transparentize(white, 0.95) -1px 0; +}