fix(toolbar) Fix styles (#12863)

This commit is contained in:
Robert Pintilii 2023-02-03 13:30:38 +02:00 committed by GitHub
parent 9409e64066
commit a594aac078
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 37 additions and 19 deletions

View File

@ -30,24 +30,24 @@
right: -4px; right: -4px;
top: -3px; top: -3px;
&:hover { &:hover {
background: #F2F3F4; background: #F2F3F4;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
&> svg { & > svg {
fill: #000; fill: #040404;
} }
&.settings-button-small-icon--disabled { &.settings-button-small-icon--disabled {
background: #36383C; background: #36383C;
&> svg { &> svg {
fill: #929292; fill: #929292;
} }
} }
} }
&> svg { & > svg {
fill: #fff; fill: #fff;
} }

View File

@ -120,12 +120,16 @@
margin: 8px 0; margin: 8px 0;
} }
.hangup-button { div.hangup-button {
background-color: $hangupColor; background-color: #CB2233;
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
&:hover { &:hover {
background-color: $hangupHoverColor; background-color: #E04757;
}
&:active {
background-color: #A21B29;
} }
} }
@ -134,12 +138,16 @@
} }
} }
.hangup-menu-button { div.hangup-menu-button {
background-color: $hangupColor; background-color: #CB2233;
@media (hover: hover) and (pointer: fine) { @media (hover: hover) and (pointer: fine) {
&:hover { &:hover {
background-color: $hangupHoverColor; background-color: #E04757;
}
&:active {
background-color: #A21B29;
} }
} }

View File

@ -4,8 +4,6 @@
* Style variables * Style variables
*/ */
$baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif; $baseFontFamily: -apple-system, BlinkMacSystemFont, 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$hangupColor:#DD3849;
$hangupHoverColor: #F25363;
/** /**
* Size variables. * Size variables.

View File

@ -228,7 +228,11 @@ export const commonStyles = (theme: Theme) => {
'@media (hover: hover) and (pointer: fine)': { '@media (hover: hover) and (pointer: fine)': {
'&:hover': { '&:hover': {
background: theme.palette.ui04 backgroundColor: theme.palette.ui04
},
'&:active': {
backgroundColor: theme.palette.ui03
} }
}, },
[theme.breakpoints.down(320)]: { [theme.breakpoints.down(320)]: {
@ -237,7 +241,7 @@ export const commonStyles = (theme: Theme) => {
}, },
'&.toggled': { '&.toggled': {
background: theme.palette.ui03 backgroundColor: theme.palette.ui03
}, },
'&.disabled': { '&.disabled': {
@ -265,7 +269,15 @@ export const commonStyles = (theme: Theme) => {
padding: 6, padding: 6,
textAlign: 'center' as const, textAlign: 'center' as const,
pointerEvents: 'all' as const, pointerEvents: 'all' as const,
boxShadow: '0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15)' boxShadow: '0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15)',
'& > div': {
marginRight: theme.spacing(2),
'&:last-of-type': {
marginRight: 0
}
}
} }
}; };
}; };

View File

@ -16,8 +16,8 @@ const useStyles = makeStyles()(theme => {
...withPixelLineHeight(theme.typography.labelBold), ...withPixelLineHeight(theme.typography.labelBold),
pointerEvents: 'none', pointerEvents: 'none',
position: 'absolute', position: 'absolute',
right: '-3px', right: '-4px',
top: '-2px' top: '-3px'
} }
}; };
}); });