feat(design): add backdrop-filter blur effect on header + commit summary@@ -1,5 +1,5 @@
{
- "_generatedAtUnix": 1665547078652,
+ "_generatedAtUnix": 1665548534981,
"_hashAlgorithm": "sha1",
"_version": 2,
"islands": {
@@ -114,7 +114,7 @@
"pathSource": "./app/views/repository/RepositoryCreateView.tsx"
},
"RepositoryDetailsView": {
- "hash": "281b2477d757abc076a20ab7c4c4b52be2d47181",
+ "hash": "6b230566a513b666891367b83ed16575106afb8f",
"pathSource": "./app/views/repository/RepositoryDetailsView.tsx"
},
"RepositoryExploreView": {
@@ -119,6 +119,8 @@ const StyledPageHeaderWrapper = styled.div<WithThemeSchemeProp>`
gap: 20px;
padding: 0 20px;
+ backdrop-filter: blur(8px);
+
${({ themeScheme }) => css`
background-color: ${NamedColors.HEADER[themeScheme]};
border-bottom: 1px solid ${NamedColors.BORDER_DEFAULT[themeScheme]};
@@ -9,13 +9,17 @@ const Colors = {
GRAY_LIGHT_07: "#D5D5D5",
GRAY_LIGHT_08: "#D8D8D8",
GRAY_DARK_01: "#272727",
+ GRAY_DARK_01_ALPHA_01: "#272727a1",
GRAY_DARK_02: "#444444",
GRAY_DARK_03: "#333333",
GRAY_DARK_04: "#222222",
GRAY_DARK_05: "#171717",
+ GRAY_DARK_05_ALPHA_01: "#171717a1",
GRAY_DARK_06: "#B6B6B6",
WHITE_ALPHA_50: "rgba(255, 255, 255, 0.5)",
WHITE_01: "#FFFFFF",
+ WHITE_ALPHA_01: "#FFFFFFa1",
+ BLACK_ALPHA_01: "#000000a1",
BLACK_ALPHA_50: "rgba(0, 0, 0, 0.5)",
BLACK_01: "#111111",
BLACK_LIGHTER_01: "rgb(34, 34, 34)",
@@ -29,13 +29,17 @@ const NamedColors = {
dark: Colors.GRAY_DARK_01,
light: Colors.WHITE_01,
},
+ CARD_ALPHA_01: {
+ dark: Colors.GRAY_DARK_01_ALPHA_01,
+ light: Colors.WHITE_ALPHA_01,
+ },
CARD_OVERLAY: {
dark: Colors.GRAY_DARK_05,
light: Colors.GRAY_LIGHT_05,
},
HEADER: {
- light: Colors.WHITE_01,
- dark: Colors.GRAY_DARK_05,
+ light: Colors.WHITE_ALPHA_01,
+ dark: Colors.GRAY_DARK_05_ALPHA_01,
},
INPUT: {
light: Colors.WHITE_01,
@@ -13,6 +13,7 @@ import type {
RepositoryLog,
RepositoryWithForkedFromRepo,
} from "../../types";
+import { NamedColors } from "../../utils/style";
import {
Card,
Grid,
@@ -123,6 +124,9 @@ const RepositoryDetailsView: ReactView<RepositoryDetailsViewProps> = ({
<Card
data-islandid={`${RepositoryCommitSummaryLine.name}$$0`}
style={{
+ backdropFilter: "blur(8px)",
+ backgroundColor:
+ NamedColors.CARD_ALPHA_01[commonProps.themeScheme],
width: "100%",
padding: 8,
position: "sticky",