mirror of
https://github.com/billsonnn/nitro-react.git
synced 2025-01-18 13:26:27 +01:00
toolbar design changes
This commit is contained in:
parent
0525356a2b
commit
3e6b7ad4fc
@ -68,7 +68,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
<TransitionAnimation inProp={ isMeExpanded } timeout={ 300 } type={ TransitionAnimationTypes.FADE_IN }>
|
||||
<ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
|
||||
</TransitionAnimation>
|
||||
<div className="absolute bottom-0 left-0 flex items-center justify-between w-full gap-2 px-3 py-1 border-t border-black z-toolbar bg-toolbar bg-toolbar-gradient shadow-inner1px">
|
||||
<div className="absolute bottom-0 left-0 flex items-center justify-between w-full gap-2 px-3 py-1 border-t border-gray-800 z-toolbar bg-toolbar-gradient toolbar">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={ classNames('flex justify-center items-center w-[50px] h-[45px] overflow-hidden cursor-pointer *:ml-[-5px] *:mt-[25px]', isMeExpanded && 'active') } onClick={ event => setMeExpanded(!isMeExpanded) }>
|
||||
|
@ -192,6 +192,34 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
@apply relative;
|
||||
background: rgb(33,33,33);
|
||||
background: linear-gradient(0deg, rgba(33,33,33,0.9) 0%, rgba(51,51,51,0.9) 100%);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
@apply pointer-events-none relative h-[130px] w-[90px] bg-[center_-8px] bg-no-repeat;
|
||||
}
|
||||
|
@ -34,7 +34,6 @@ module.exports = {
|
||||
boxShadow,
|
||||
backgroundImage: {
|
||||
'button-gradient-gray': 'linear-gradient(to bottom, #e2e2e2 50%, #c8c8c8 50%)',
|
||||
'toolbar-gradient': 'linear-gradient(to bottom, #363636 50%, #2a2a2a 50%)',
|
||||
},
|
||||
spacing: {
|
||||
'card-header': '33px',
|
||||
|
Loading…
Reference in New Issue
Block a user