mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 01:36:22 +00:00
4f15cc3f08
The absolute positioning of the toggle mode button was creating a static overlapping position issue with the top bar. This fix solves that problem by removing the static positioning and coupling the button component with the buttons to the right
59 lines
1.1 KiB
Stylus
59 lines
1.1 KiB
Stylus
.control-toggleModeButton
|
|
height 25px
|
|
border-radius 50px
|
|
background-color #F4F4F4
|
|
width 52px
|
|
display flex
|
|
align-items center
|
|
position: relative
|
|
top 2px
|
|
.active
|
|
background-color #1EC38B
|
|
width 33px
|
|
height 24px
|
|
box-shadow 2px 0px 7px #eee
|
|
z-index 1
|
|
|
|
div
|
|
width 40px
|
|
height 100%
|
|
border-radius 50%
|
|
display flex
|
|
align-items center
|
|
justify-content center
|
|
cursor pointer
|
|
|
|
&:hover .tooltip
|
|
opacity 1
|
|
|
|
.tooltip
|
|
tooltip()
|
|
position absolute
|
|
pointer-events none
|
|
top 33px
|
|
left -10px
|
|
z-index 200
|
|
width 80px
|
|
padding 5px
|
|
line-height normal
|
|
border-radius 2px
|
|
opacity 0
|
|
transition 0.1s
|
|
|
|
body[data-theme="dark"]
|
|
.control-fullScreenButton
|
|
topBarButtonDark()
|
|
|
|
.control-toggleModeButton
|
|
background-color #3A404C
|
|
.active
|
|
background-color #1EC38B
|
|
box-shadow 2px 0px 7px #444444
|
|
|
|
body[data-theme="solarized-dark"]
|
|
.control-toggleModeButton
|
|
background-color #002B36
|
|
.active
|
|
background-color #1EC38B
|
|
box-shadow 2px 0px 7px #222222
|