public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 09:46:22 +00:00
Code Issues Releases Wiki Activity

renew TopBar

Browse Source
This commit is contained in:
Rokt33r
2016-05-14 19:01:32 +09:00
parent c59638aaae
commit be20c2c800
7 changed files with 233 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
browser/styles/index.styl
View File

@@ -1,8 +1,13 @@
$brand-color = #2BAC8F
$brand-color = #6AA5E9
$danger-color = red
$danger-lighten-color = #FFE5E6
// Layouts
$statusBar-height = 24px
$sideNav-width = 200px
$sideNav--folded-width = 44px
// UI default
$ui-text-color = #515151
$ui-inactive-text-color = #939395
@@ -13,10 +18,11 @@ $ui-border = solid 1px $ui-borderColor
// UI Button
$ui-button-color = #939395
$ui-button--hover-backgroundColor = rgba(126, 127, 129, 0.08)
$ui-button--active-color = #515151
$ui-button--active-backgroundColor = alpha(#E0E0E0, 90%)
$ui-button--active-color = white
$ui-button--active-backgroundColor = #6AA5E9
// UI Tooltip
$ui-tooltip-text-color = white
$ui-tooltip-backgroundColor = alpha(#444, 70%)
$ui-tooltip-button-backgroundColor = #D1D1D1
$ui-tooltip-button--hover-backgroundColor = lighten(#D1D1D1, 30%)

224
browser/styles/main/ArticleTopBar.styl
View File

@@ -1,224 +0,0 @@
bgColor = #E6E6E6
inputBgColor = white
topBarBtnColor = #B3B3B3
topBarBtnBgColor = #B3B3B3
topBarBtnBgActiveColor = #3A3A3A
infoBtnColor = bgColor
infoBtnBgColor = #B3B3B3
infoBtnActiveBgColor = #3A3A3A
.ArticleTopBar
absolute top right
left 200px
height 60px
background-color bgColor
user-select none
&>.tutorial
.clickJammer
fixed top left bottom right
z-index 40
background transparent
.global
fixed bottom right
height 100px
z-index 35
font-style italic
.finder
fixed bottom right
height 250px
left 50%
margin-left -250px
z-index 35
font-style italic
.back
fixed top left bottom right
z-index 20
background-color transparentify(black, 80%)
&>.ArticleTopBar-left
float left
&>.tutorial
fixed top
left 100px
top 30px
z-index 36
font-style italic
&>.ArticleTopBar-left-search
position relative
float left
height 33px
margin-top 13.5px
margin-left 15px
width 350px
padding 5px 15px
transition 0.1s
font-size 16px
border 1px solid transparent
z-index 30
.tooltip
tooltip()
margin-left -24px
margin-top 35px
opacity 1
&.hide
opacity 0
ul
li
line-height 18px
li:last-child
line-height 10px
margin-bottom 3px
small
font-size 10px
position relative
top -2px
margin-left 15px
input
absolute top left
width 350px
border-radius 16.5px
background-color inputBgColor
border 1px solid transparent
padding-left 35px
outline none
font-size 14px
height 33px
line-height 33px
z-index 0
&:focus
border-color focusBorderColor
i.fa.fa-search
position absolute
display block
top 0
left 10px
line-height 33px
z-index 1
pointer-events none
.ArticleTopBar-left-search-clear-button
position absolute
top 6px
right 10px
width 20px
height 20px
border-radius 10px
border none
background-color transparent
color topBarBtnColor
transition 0.1s
line-height 20px
text-align center
padding 0
&:focus
color textColor
&:hover
color white
background-color topBarBtnBgColor
&:active
color white
background-color darken(topBarBtnBgColor, 35%)
.ArticleTopBar-left-control
line-height 33px
float left
height 33px
margin-top 13.5px
margin-left 20px
.tutorial
fixed top
left 200px
z-index 36
font-style italic
button.ArticleTopBar-left-control-new-post-button
position fixed
background bgColor
font-size 20px
border none
outline none
color inactiveTextColor
width 33px
height 33px
border-radius 16.5px
transition 0.1s
border 1px solid transparent
z-index 30
&:hover
color textColor
&:active
color textColor
background-color lighten(topBarBtnBgColor, 15%)
&:disabled
color inactiveTextColor
background transparent
&:focus
color textColor
.tooltip
tooltip()
margin-left -80px
margin-top 40px
&:hover
.tooltip
opacity 1
&>.ArticleTopBar-right
float right
&>button
display block
position absolute
right 74px
top 20px
width 20px
height 20px
font-size 14px
line-height 14px
background-color infoBtnBgColor
color bgColor
border-radius 11px
border 1px solid bgColor
transition 0.1s
&:focus
background-color lighten(infoBtnActiveBgColor, 15%)
.tooltip
tooltip()
margin-left -50px
margin-top 20px
&:hover
background-color infoBtnActiveBgColor
.tooltip
opacity 1
&>.ArticleTopBar-right-links-button
display block
position absolute
top 8px
right 15px
opacity 0.7
border-radius 23px
height 46px
width 46px
border 1px solid transparent
&:focus
border-color focusBorderColor
&:hover
opacity 1
.tooltip
opacity 1
&>.ArticleTopBar-right-links-button-dropdown
position fixed
z-index 50
right 10px
top 40px
background-color transparentify(invBackgroundColor, 80%)
padding 5px 0
.ArticleTopBar-right-links-button-dropdown-item
padding 0 10px
height 33px
width 100%
display block
line-height 33px
text-decoration none
color white
&:hover
background-color transparentify(lighten(invBackgroundColor, 30%), 80%)

1
browser/styles/main/index.styl
View File

@@ -3,7 +3,6 @@
global-reset()
@import '../shared/*'
@import './ArticleNavigator'
@import './ArticleTopBar'
@import './ArticleList'
@import './ArticleDetail'
@import './modal/*'