a bunch of small css things

This commit is contained in:
asuk 2023-05-24 16:48:17 +02:00
parent cffd591186
commit ffd9f22d19
5 changed files with 12 additions and 13 deletions

View file

@ -36,12 +36,11 @@ const Header = styled(BaseHeader)`
/*box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);*/
color: rgba(0, 0, 0, 0.8);
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(2px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0);
backdrop-filter: blur(0px);
&.descendant-is-selected {
background: rgba(255, 255, 255, 1);
background: rgba(255, 255, 255, 0);
}
${pointerEventsAutoInNormalMode};

View file

@ -1,5 +1,5 @@
export const COLOR_POPOVER_BACK = 'rgba(26, 28, 30, 0.97);'
export const COLOR_POPOVER_BACK = 'rgba(156, 156, 156, 0.97);'
export const COLOR_BASE = '#272B2F'
export const COLOR_FOCUS_OUTLINE = '#0A4540'
export const COLOR_FOCUS_OUTLINE = '#ffffff'

View file

@ -5,7 +5,7 @@ import React from 'react'
import styled from 'styled-components'
import PopoverArrow from './PopoverArrow'
export const popoverBackgroundColor = transparentize(0.05, `#2a2a31`)
export const popoverBackgroundColor = transparentize(0.08, `#999999`)
const Container = styled.div`
position: absolute;
@ -15,7 +15,7 @@ const Container = styled.div`
background: var(--popover-bg);
color: white;
color: black;
padding: 0;
margin: 0;
cursor: default;

View file

@ -14,22 +14,22 @@ const MenuContainer = styled.ul`
position: absolute;
min-width: ${minWidth}px;
z-index: 10000;
background: ${transparentize(0.2, '#111')};
background: ${transparentize(0.2, '#9c9c9c')};
backdrop-filter: blur(2px);
color: white;
color: black;
list-style-type: none;
padding: 2px 0;
margin: 0;
border-radius: 1px;
cursor: default;
${pointerEventsAutoInNormalMode};
border-radius: 3px;
border-radius: 0px;
`
const MenuTitle = styled.div`
padding: 4px 10px;
border-bottom: 1px solid #6262626d;
color: #adadadb3;
color: #ffffff;
font-size: 11px;
font-weight: 500;
`

View file

@ -29,7 +29,7 @@ const ItemContainer = styled.li<{enabled: boolean}>`
&:hover:after {
background-color: ${(props) =>
props.enabled ? 'rgba(63, 174, 191, 0.75)' : 'initial'};
props.enabled ? 'rgba(133, 133, 133, 0.75)' : 'initial'};
}
`