mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 01:36:22 +00:00
before applying redux
This commit is contained in:
Rokt33r
169
browser/styles/main/components/ArticleDetail.styl
Normal file
169
browser/styles/main/components/ArticleDetail.styl
Normal file
@@ -0,0 +1,169 @@
|
||||
noTagsColor = #999
|
||||
|
||||
.ArticleDetail
|
||||
absolute right bottom
|
||||
top 60px
|
||||
left 250px
|
||||
padding 10px
|
||||
*
|
||||
-webkit-user-select all
|
||||
.detailInfo
|
||||
height 70px
|
||||
width 100%
|
||||
transition 0.1s
|
||||
font-size 12px
|
||||
position relative
|
||||
.left
|
||||
absolute top left bottom
|
||||
right 120px
|
||||
.right
|
||||
absolute top right
|
||||
.detailBody
|
||||
absolute left right bottom
|
||||
top 70px
|
||||
overflow-x hidden
|
||||
overflow-y auto
|
||||
.detailPanel
|
||||
absolute top
|
||||
left 10px
|
||||
right 10px
|
||||
bottom 10px
|
||||
background-color white
|
||||
border-radius 5px
|
||||
border solid 1px borderColor
|
||||
&>.header
|
||||
absolute top left right
|
||||
height 60px
|
||||
.MarkdownPreview
|
||||
absolute left right bottom
|
||||
top 60px
|
||||
marked()
|
||||
box-sizing border-box
|
||||
padding 5px 15px
|
||||
border-top solid 1px borderColor
|
||||
overflow-y auto
|
||||
.CodeEditor
|
||||
absolute left right bottom
|
||||
top 60px
|
||||
border-top solid 1px borderColor
|
||||
min-height 300px
|
||||
border-bottom-left-radius 5px
|
||||
border-bottom-right-radius 5px
|
||||
&.edit
|
||||
.detailInfo
|
||||
.left
|
||||
.Select
|
||||
.Select-control
|
||||
border none
|
||||
background-color transparent
|
||||
.folder.Select
|
||||
width 150px
|
||||
.Select-control
|
||||
&:hover
|
||||
background-color darken(white, 5%)
|
||||
&.is-focused
|
||||
.Select-control
|
||||
background-color white
|
||||
.tags.Select
|
||||
.Select-control
|
||||
white-space nowrap
|
||||
overflow-x auto
|
||||
position relative
|
||||
.Select-arrow-zone, .Select-arrow
|
||||
display none
|
||||
.right
|
||||
button
|
||||
cursor pointer
|
||||
height 33px
|
||||
width 55px
|
||||
margin-left 5px
|
||||
font-size 14px
|
||||
color inactiveTextColor
|
||||
background-color darken(white, 5%)
|
||||
border solid 1px borderColor
|
||||
border-radius 5px
|
||||
&:hover
|
||||
background-color white
|
||||
&.primary
|
||||
border none
|
||||
background-color brandColor
|
||||
color white
|
||||
&:hover
|
||||
color white
|
||||
background-color lighten(brandColor, 10%)
|
||||
.detailBody
|
||||
.detailPanel
|
||||
&>.header
|
||||
.mode
|
||||
absolute top bottom right
|
||||
display block
|
||||
height 33px
|
||||
margin-top 12px
|
||||
width 120px
|
||||
margin-right 15px
|
||||
.title
|
||||
absolute left top bottom
|
||||
right 120px
|
||||
padding 0 15px
|
||||
input
|
||||
width 100%
|
||||
border none
|
||||
background-color transparent
|
||||
line-height 60px
|
||||
font-size 32px
|
||||
font-weight bold
|
||||
outline none
|
||||
&.show
|
||||
.detailInfo
|
||||
.left
|
||||
right 99px
|
||||
.info
|
||||
padding 5px
|
||||
overflow ellipsis
|
||||
.tags
|
||||
padding 10px 10px 5px
|
||||
color articleItemColor
|
||||
a
|
||||
background-color brandColor
|
||||
color white
|
||||
border-radius 2px
|
||||
padding 1.5px 5px
|
||||
margin 2px
|
||||
font-size 10px
|
||||
opacity 0.8
|
||||
&:hover
|
||||
opacity 1
|
||||
span.noTags
|
||||
color noTagsColor
|
||||
.right
|
||||
button
|
||||
cursor pointer
|
||||
height 33px
|
||||
width 33px
|
||||
border none
|
||||
font-size 18px
|
||||
color inactiveTextColor
|
||||
background-color transparent
|
||||
padding 0
|
||||
&:hover
|
||||
color inherit
|
||||
.detailBody
|
||||
.detailPanel
|
||||
&>.header
|
||||
.mode
|
||||
display block
|
||||
line-height 60px
|
||||
width 45px
|
||||
height 60px
|
||||
font-size 18px
|
||||
text-align center
|
||||
.title
|
||||
absolute top bottom
|
||||
left 45px
|
||||
right 15px
|
||||
font-size 32px
|
||||
line-height 60px
|
||||
font-weight bold
|
||||
white-space nowrap
|
||||
overflow-x auto
|
||||
overflow-y hidden
|
||||
69
browser/styles/main/components/ArticleList.styl
Normal file
69
browser/styles/main/components/ArticleList.styl
Normal file
@@ -0,0 +1,69 @@
|
||||
articleItemHoverBgColor = darken(white, 5%)
|
||||
articleItemColor = #777
|
||||
|
||||
.ArticleList
|
||||
absolute left bottom
|
||||
top 60px
|
||||
width 250px
|
||||
border-right solid 1px highlightenBorderColor
|
||||
&>ul
|
||||
absolute top bottom left right
|
||||
overflow-y auto
|
||||
noSelect()
|
||||
li
|
||||
.articleItem
|
||||
border solid 2px transparent
|
||||
position relative
|
||||
height 88px
|
||||
width 100%
|
||||
cursor pointer
|
||||
transition 0.1s
|
||||
background-color white
|
||||
padding 0 10px
|
||||
font-size 12px
|
||||
.top
|
||||
clearfix()
|
||||
line-height 20px
|
||||
padding 5px 0
|
||||
color articleItemColor
|
||||
.profileImage
|
||||
vertical-align middle
|
||||
.updatedAt
|
||||
float right
|
||||
line-height 20px
|
||||
.middle
|
||||
clearfix()
|
||||
padding 3px 0 7px
|
||||
font-size 16px
|
||||
.mode
|
||||
float left
|
||||
font-size 12px
|
||||
line-height 16px
|
||||
.title
|
||||
float left
|
||||
overflow ellipsis
|
||||
padding 0 5px
|
||||
.bottom
|
||||
padding 5px 0
|
||||
overflow-x auto
|
||||
white-space nowrap
|
||||
.tags
|
||||
color articleItemColor
|
||||
a
|
||||
background-color brandColor
|
||||
color white
|
||||
border-radius 2px
|
||||
padding 1.5px 5px
|
||||
margin 2px
|
||||
font-size 10px
|
||||
opacity 0.8
|
||||
&:hover
|
||||
opacity 1
|
||||
&:hover, &.hover
|
||||
background-color articleItemHoverBgColor
|
||||
&:active, &.active
|
||||
background-color white
|
||||
&:active, &.active
|
||||
border-color brandBorderColor
|
||||
.divider
|
||||
border-bottom solid 1px borderColor
|
||||
@@ -23,7 +23,7 @@
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
.Select-control:hover {
|
||||
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
|
||||
// box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.is-searchable.is-open > .Select-control {
|
||||
cursor: text;
|
||||
@@ -42,8 +42,8 @@
|
||||
cursor: text;
|
||||
}
|
||||
.is-focused:not(.is-open) > .Select-control {
|
||||
border-color: #0088cc #0099e6 #0099e6;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px rgba(0, 136, 204, 0.5);
|
||||
// border-color: #0088cc #0099e6 #0099e6;
|
||||
// box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px -1px rgba(0, 136, 204, 0.5);
|
||||
}
|
||||
.Select-placeholder {
|
||||
color: #aaaaaa;
|
||||
@@ -196,10 +196,10 @@
|
||||
padding: 3px 0;
|
||||
}
|
||||
.Select-item {
|
||||
background-color: #f2f9fc;
|
||||
background-color: brandColor;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #c9e6f2;
|
||||
color: #0088cc;
|
||||
// border: 1px solid #c9e6f2;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
font-size: 1em;
|
||||
margin: 2px;
|
||||
@@ -216,20 +216,19 @@
|
||||
padding: 3px 5px;
|
||||
}
|
||||
.Select-item-label .Select-item-label__a {
|
||||
color: #0088cc;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
cursor: white;
|
||||
}
|
||||
.Select-item-icon {
|
||||
cursor: pointer;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-top-left-radius: 2px;
|
||||
border-right: 1px solid #c9e6f2;
|
||||
border-right: 1px solid darken(brandColor, 10%)
|
||||
padding: 2px 5px 4px;
|
||||
}
|
||||
.Select-item-icon:hover,
|
||||
.Select-item-icon:focus {
|
||||
background-color: #ddeff7;
|
||||
color: #0077b3;
|
||||
background-color: lighten(brandColor, 10%)
|
||||
}
|
||||
.Select-item-icon:active {
|
||||
background-color: #c9e6f2;
|
||||
|
||||
43
browser/styles/main/components/TopBar.styl
Normal file
43
browser/styles/main/components/TopBar.styl
Normal file
@@ -0,0 +1,43 @@
|
||||
.TopBar
|
||||
absolute top left right
|
||||
height 60px
|
||||
border-bottom solid 1px borderColor
|
||||
noSelect()
|
||||
.left
|
||||
float left
|
||||
.search
|
||||
position absolute
|
||||
top 13.5px
|
||||
left 15px
|
||||
height 33px
|
||||
i.fa
|
||||
position absolute
|
||||
line-height 33px
|
||||
z-index 1
|
||||
width 33px
|
||||
text-align center
|
||||
input.searchInput
|
||||
absolute top left
|
||||
background-color white
|
||||
borderInput()
|
||||
width 350px
|
||||
padding-left 30px
|
||||
border-radius 16.5px
|
||||
font-size 14px
|
||||
height 33px
|
||||
line-height 33px
|
||||
outline none
|
||||
&:focus
|
||||
border-color brandColor
|
||||
.right
|
||||
float right
|
||||
.logo
|
||||
&>img
|
||||
margin-top 7px
|
||||
margin-right 15px
|
||||
.tooltip
|
||||
tooltip()
|
||||
right 5px
|
||||
&:hover
|
||||
.tooltip
|
||||
opacity 1.0
|
||||
153
browser/styles/main/containers/HomeContainer.styl
Normal file
153
browser/styles/main/containers/HomeContainer.styl
Normal file
@@ -0,0 +1,153 @@
|
||||
homeNavigatorBgColor = #1B1C1C
|
||||
homeNavigatorColor = #DDD
|
||||
userAnchorColor = #979797
|
||||
userAnchorBgColor = #BEBEBE
|
||||
userAnchorActiveColor = textColor
|
||||
userAnchorActiveBgColor = white
|
||||
|
||||
.HomeContainer
|
||||
.HomeNavigator
|
||||
noSelect()
|
||||
background-color homeNavigatorBgColor
|
||||
absolute left top bottom
|
||||
width 60px
|
||||
text-align center
|
||||
box-sizing border-box
|
||||
// must be moved
|
||||
// .profilePopup
|
||||
// position fixed
|
||||
// left 35px
|
||||
// top 35px
|
||||
// z-index popupZIndex
|
||||
// width 200px
|
||||
// background-color backgroundColor
|
||||
// box-shadow popupShadow
|
||||
// border-radius 10px
|
||||
// padding 10px 0 0px
|
||||
// &.close
|
||||
// display none
|
||||
// .profileGroup
|
||||
// margin-bottom 10px
|
||||
// .profileGroupLabel
|
||||
// text-align left
|
||||
// height 1em
|
||||
// padding 0 15px
|
||||
// span
|
||||
// position absolute
|
||||
// z-index 2
|
||||
// background-color backgroundColor
|
||||
// padding-right 5px
|
||||
// color inactiveTextColor
|
||||
// font-size 0.8em
|
||||
// &::before
|
||||
// content ''
|
||||
// position absolute
|
||||
// display block
|
||||
// z-index 1
|
||||
// height 0.5em
|
||||
// width 175px
|
||||
// border-bottom solid 1px borderColor
|
||||
// .profileGroupList
|
||||
// li
|
||||
// clearfix()
|
||||
// &:hover
|
||||
// background-color hoverBackgroundColor
|
||||
// .userName
|
||||
// width 155px
|
||||
// padding 10px 15px
|
||||
// text-align left
|
||||
// display block
|
||||
// text-decoration none
|
||||
// cursor pointer
|
||||
// .createNewTeam
|
||||
// btnStripDefault()
|
||||
// width 100%
|
||||
// padding 10px 20px
|
||||
// font-size 1em
|
||||
// cursor pointer
|
||||
// text-align left
|
||||
// .controlGroup
|
||||
// list-style none
|
||||
// border-top solid 1px borderColor
|
||||
// padding 10px 0
|
||||
// li
|
||||
// &:hover
|
||||
// background-color hoverBackgroundColor
|
||||
// button
|
||||
// btnStripDefault()
|
||||
// width 100%
|
||||
// padding 10px 20px
|
||||
// font-size 1em
|
||||
// cursor pointer
|
||||
// text-align left
|
||||
ul.userList
|
||||
margin-top 25px
|
||||
&>li
|
||||
.shortCut
|
||||
margin-top 5px
|
||||
font-size 0.8em
|
||||
color homeNavigatorColor
|
||||
a
|
||||
display block
|
||||
width 44px
|
||||
height 44px
|
||||
margin 0 auto
|
||||
text-align center
|
||||
background-color userAnchorBgColor
|
||||
text-decoration none
|
||||
color userAnchorColor
|
||||
line-height 44px
|
||||
font-size 1.1em
|
||||
cursor pointer
|
||||
circle()
|
||||
img
|
||||
width 44px
|
||||
height 44px
|
||||
transition 0.1s
|
||||
&:hover, &.active
|
||||
background-color userAnchorActiveBgColor
|
||||
color userAnchorActiveColor
|
||||
.userTooltip
|
||||
position absolute
|
||||
z-index popupZIndex
|
||||
background-color transparentify(invBackgroundColor, 80%)
|
||||
color invTextColor
|
||||
padding 10px
|
||||
line-height 1em
|
||||
border-radius 5px
|
||||
margin-top -52px
|
||||
margin-left 52px
|
||||
white-space nowrap
|
||||
opacity 0
|
||||
transition 0.1s
|
||||
pointer-events none
|
||||
&:hover .userTooltip
|
||||
opacity 1
|
||||
button.newTeamButton
|
||||
display block
|
||||
margin 0 auto
|
||||
width 30px
|
||||
height 30px
|
||||
circle()
|
||||
border solid 1px lightButtonColor
|
||||
color lightButtonColor
|
||||
text-align center
|
||||
background-image none
|
||||
background-color transparent
|
||||
box-sizing border-box
|
||||
absolute left bottom right
|
||||
bottom 15px
|
||||
&:hover, &.hover, &:focus, &.focus
|
||||
border-color darken(lightButtonColor, 50%)
|
||||
color darken(lightButtonColor, 50%)
|
||||
&:active, &.active
|
||||
border-color darken(brandBorderColor, 10%)
|
||||
background-color brandColor
|
||||
color white
|
||||
.tooltip
|
||||
tooltip()
|
||||
margin-top -22px
|
||||
margin-left 33px
|
||||
font-size 14px
|
||||
&:hover .tooltip
|
||||
opacity 1
|
||||
@@ -1,6 +1,6 @@
|
||||
.LoginContainer, .SignupContainer
|
||||
margin 0 auto
|
||||
padding 25px 15px
|
||||
padding 105px 15px
|
||||
box-sizing border-box
|
||||
color inactiveTextColor
|
||||
.logo
|
||||
@@ -58,17 +58,24 @@
|
||||
.alertInfo, .alertError
|
||||
margin-top 15px
|
||||
margin-bottom 15px
|
||||
height 44px
|
||||
padding 5px
|
||||
border-radius 10px
|
||||
line-height 44px
|
||||
padding 10px
|
||||
border-radius 5px
|
||||
line-height 1.6
|
||||
text-align center
|
||||
.alertInfo
|
||||
alertInfo()
|
||||
.alertError
|
||||
alertError()
|
||||
div.form-group:last-child
|
||||
margin-top 15px
|
||||
div.formField
|
||||
input
|
||||
stripInput()
|
||||
height 33px
|
||||
width 100%
|
||||
margin-bottom 10px
|
||||
text-align center
|
||||
font-size 1.1em
|
||||
&:last-child
|
||||
margin-top 15px
|
||||
button.logInButton
|
||||
btnPrimary()
|
||||
height 44px
|
||||
|
||||
@@ -1,310 +1,123 @@
|
||||
.HomeContainer
|
||||
.HomeNavigator
|
||||
noSelect()
|
||||
background-color planetNavBgColor
|
||||
absolute left top bottom
|
||||
width 55px
|
||||
text-align center
|
||||
box-sizing border-box
|
||||
border-right solid 1px borderColor
|
||||
.profileButton
|
||||
display block
|
||||
width 55px
|
||||
height 55px
|
||||
border-bottom solid 1px borderColor
|
||||
overflow hidden
|
||||
background-color black
|
||||
margin 0
|
||||
padding 0
|
||||
cursor pointer
|
||||
box-sizing border-box
|
||||
border none
|
||||
img
|
||||
transition 0.1s
|
||||
opacity 0.9
|
||||
&.vivid.active, &.focus, &:focus, &.hover, &:hover
|
||||
img
|
||||
opacity 1
|
||||
.profilePopup
|
||||
position fixed
|
||||
left 35px
|
||||
top 35px
|
||||
z-index popupZIndex
|
||||
width 200px
|
||||
background-color backgroundColor
|
||||
box-shadow popupShadow
|
||||
border-radius 10px
|
||||
padding 10px 0 0px
|
||||
&.close
|
||||
display none
|
||||
.profileGroup
|
||||
margin-bottom 10px
|
||||
.profileGroupLabel
|
||||
text-align left
|
||||
height 1em
|
||||
padding 0 15px
|
||||
span
|
||||
position absolute
|
||||
z-index 2
|
||||
background-color backgroundColor
|
||||
padding-right 5px
|
||||
color inactiveTextColor
|
||||
font-size 0.8em
|
||||
&::before
|
||||
content ''
|
||||
position absolute
|
||||
display block
|
||||
z-index 1
|
||||
height 0.5em
|
||||
width 175px
|
||||
border-bottom solid 1px borderColor
|
||||
.profileGroupList
|
||||
li
|
||||
clearfix()
|
||||
&:hover
|
||||
background-color hoverBackgroundColor
|
||||
.userName
|
||||
width 155px
|
||||
padding 10px 15px
|
||||
text-align left
|
||||
display block
|
||||
text-decoration none
|
||||
cursor pointer
|
||||
.createNewTeam
|
||||
btnStripDefault()
|
||||
width 100%
|
||||
padding 10px 20px
|
||||
font-size 1em
|
||||
cursor pointer
|
||||
text-align left
|
||||
.controlGroup
|
||||
list-style none
|
||||
border-top solid 1px borderColor
|
||||
padding 10px 0
|
||||
li
|
||||
&:hover
|
||||
background-color hoverBackgroundColor
|
||||
button
|
||||
btnStripDefault()
|
||||
width 100%
|
||||
padding 10px 20px
|
||||
font-size 1em
|
||||
cursor pointer
|
||||
text-align left
|
||||
userNavigatorWidth = 200px
|
||||
userNavigatorBgColor = #333
|
||||
userNavigatorColor = #DDD
|
||||
userNavigatorProfileNameColor = brandColor
|
||||
userNavigatorBorderColor = #666
|
||||
|
||||
ul.planetList>li
|
||||
margin 15px 0
|
||||
.shortCut
|
||||
margin-top 5px
|
||||
color lighten(textColor, 5%)
|
||||
font-size 0.8em
|
||||
&.active
|
||||
a
|
||||
background-color planetAnchorActiveBgColor
|
||||
color planetAnchorActiveColor
|
||||
a
|
||||
display block
|
||||
width 44px
|
||||
height 44px
|
||||
margin 0 auto
|
||||
text-align center
|
||||
background-color planetAnchorBgColor
|
||||
text-decoration none
|
||||
color planetAnchorColor
|
||||
line-height 44px
|
||||
font-size 1.1em
|
||||
cursor pointer
|
||||
circle()
|
||||
transition 0.1s
|
||||
&:hover, &:active
|
||||
background-color white
|
||||
.planetTooltip
|
||||
position absolute
|
||||
z-index popupZIndex
|
||||
background-color transparentify(invBackgroundColor, 80%)
|
||||
color invTextColor
|
||||
padding 10px
|
||||
line-height 1em
|
||||
border-radius 5px
|
||||
margin-top -41px
|
||||
margin-left 52px
|
||||
white-space nowrap
|
||||
opacity 0
|
||||
transition 0.1s
|
||||
pointer-events none
|
||||
&:hover .planetTooltip
|
||||
opacity 1
|
||||
img
|
||||
circle()
|
||||
width 55px
|
||||
height 55px
|
||||
button.newPlanet
|
||||
display block
|
||||
margin 0 auto
|
||||
width 30px
|
||||
height 30px
|
||||
circle()
|
||||
border solid 1px lightButtonColor
|
||||
color lightButtonColor
|
||||
text-align center
|
||||
font-size 1
|
||||
background-image none
|
||||
background-color transparent
|
||||
userContentBgColor = #E6E6E6
|
||||
|
||||
.UserContainer
|
||||
absolute top bottom right
|
||||
left 60px
|
||||
.content
|
||||
absolute top bottom right
|
||||
left userNavigatorWidth
|
||||
background-color userContentBgColor
|
||||
.UserNavigator
|
||||
absolute left top bottom
|
||||
width userNavigatorWidth
|
||||
background-color userNavigatorBgColor
|
||||
color userNavigatorColor
|
||||
noSelect()
|
||||
&>.profile
|
||||
height 60px
|
||||
padding 10px 15px 0
|
||||
box-sizing border-box
|
||||
absolute left bottom right
|
||||
bottom 15px
|
||||
&:hover, &.hover, &:focus, &.focus
|
||||
border-color darken(lightButtonColor, 50%)
|
||||
color darken(lightButtonColor, 50%)
|
||||
&:active, &.active
|
||||
border-color darken(brandBorderColor, 10%)
|
||||
position relative
|
||||
border-bottom solid 1px userNavigatorBorderColor
|
||||
cursor pointer
|
||||
&>.profileName
|
||||
color userNavigatorProfileNameColor
|
||||
font-size 22px
|
||||
cursor pointer
|
||||
transition 0.1s
|
||||
&>.name
|
||||
padding 5px 10px
|
||||
font-size 14px
|
||||
color userNavigatorColor
|
||||
cursor pointer
|
||||
transition 0.1s
|
||||
&>.dropdownIcon
|
||||
position absolute
|
||||
top 20px
|
||||
right 25px
|
||||
float right
|
||||
width 20px
|
||||
height 20px
|
||||
line-height 20px
|
||||
font-size 8px
|
||||
border solid 1px userNavigatorColor
|
||||
border-radius 12.5px
|
||||
text-align center
|
||||
transition 0.1s
|
||||
&:hover
|
||||
&>.profileName
|
||||
color lighten(brandColor, 10%)
|
||||
&>.name
|
||||
color white
|
||||
&>.dropdownIcon
|
||||
border-color white
|
||||
&:active
|
||||
&>.dropdownIcon
|
||||
background-color brandColor
|
||||
border-color brandColor
|
||||
&>.control
|
||||
padding 15px 15px
|
||||
&>.newPostButton
|
||||
background-color brandColor
|
||||
color white
|
||||
.tooltip
|
||||
tooltip()
|
||||
margin-top -22px
|
||||
margin-left 33px
|
||||
&:hover .tooltip
|
||||
opacity 1
|
||||
.UserContainer
|
||||
absolute top bottom right
|
||||
left 55px
|
||||
.memberPopup
|
||||
absolute left
|
||||
top 235px
|
||||
z-index 1
|
||||
padding 0 15px 10px
|
||||
width 200px
|
||||
.label
|
||||
padding 10px 0
|
||||
font-size 0.9em
|
||||
border-bottom solid 1px borderColor
|
||||
margin-bottom 15px
|
||||
.members
|
||||
li
|
||||
padding 0 10px
|
||||
margin-bottom 15px
|
||||
clearfix()
|
||||
.memberImage
|
||||
float left
|
||||
margin-right 7px
|
||||
circle()
|
||||
.memberInfo
|
||||
float left
|
||||
.memberProfileName
|
||||
margin-bottom 5px
|
||||
font-size 1.05em
|
||||
.memberName
|
||||
margin-left 5px
|
||||
font-size 0.9em
|
||||
color inactiveTextColor
|
||||
a:hover .memberProfileName, a:hover .memberName
|
||||
text-decoration underline
|
||||
.userProfile
|
||||
absolute top left right
|
||||
padding 15px
|
||||
border-bottom solid 1px borderColor
|
||||
height 125px
|
||||
clearfix()
|
||||
.userPhoto
|
||||
circle()
|
||||
float left
|
||||
margin 5px 15px 15px
|
||||
.userInfo
|
||||
float left
|
||||
margin-top 15px
|
||||
.userProfileName
|
||||
font-size 1.5em
|
||||
color brandColor
|
||||
margin-bottom 10px
|
||||
.userName
|
||||
font-size 1.1em
|
||||
.editProfileButton
|
||||
float right
|
||||
btnDefault()
|
||||
margin-top 25px
|
||||
padding 10px 15px
|
||||
height 44px
|
||||
width 100%
|
||||
border none
|
||||
border-radius 5px
|
||||
.teamList, .memberList
|
||||
absolute left bottom
|
||||
top 125px
|
||||
width 200px
|
||||
padding 15px
|
||||
border-right solid 1px borderColor
|
||||
overflow-y auto
|
||||
.teamLabel, .memberLabel
|
||||
font-size 1.2em
|
||||
margin-bottom 15px
|
||||
.teams
|
||||
li
|
||||
padding 0 10px
|
||||
margin-bottom 15px
|
||||
clearfix()
|
||||
.teamInfo
|
||||
float left
|
||||
.teamProfileName
|
||||
margin-bottom 5px
|
||||
font-size 1.05em
|
||||
.teamName
|
||||
margin-left 5px
|
||||
font-size 0.9em
|
||||
color inactiveTextColor
|
||||
a:hover .teamProfileName, a:hover .teamName
|
||||
text-decoration underline
|
||||
font-size 16px
|
||||
font-weight 600
|
||||
transition 0.1s
|
||||
&:hover
|
||||
background-color lighten(brandColor, 10%)
|
||||
&>.menu
|
||||
absolute left right bottom
|
||||
top 134px
|
||||
padding 15px 0
|
||||
overflow auto
|
||||
&>.menuGruop
|
||||
&>.label
|
||||
border-bottom 1px solid userNavigatorBorderColor
|
||||
padding 10px 15px
|
||||
font-size 18px
|
||||
margin-bottom 10px
|
||||
font-size 1.1em
|
||||
.createTeamButton, .addMemberButton
|
||||
btnStripDefault()
|
||||
.members
|
||||
li
|
||||
padding 0 10px
|
||||
margin-bottom 15px
|
||||
clearfix()
|
||||
.memberImage
|
||||
float left
|
||||
margin-right 7px
|
||||
circle()
|
||||
.memberInfo
|
||||
float left
|
||||
.memberProfileName
|
||||
margin-bottom 5px
|
||||
font-size 1.05em
|
||||
.memberRole
|
||||
font-size 0.9em
|
||||
color inactiveTextColor
|
||||
.memberName
|
||||
margin-left 5px
|
||||
font-size 0.9em
|
||||
color inactiveTextColor
|
||||
.createTeamButton, .addMemberButton
|
||||
btnStripDefault()
|
||||
a:hover .memberProfileName, a:hover .memberName
|
||||
text-decoration underline
|
||||
.planetList
|
||||
absolute right bottom
|
||||
top 125px
|
||||
left 200px
|
||||
padding 15px
|
||||
overflow-y auto
|
||||
.planetLabel
|
||||
font-size 1.2em
|
||||
margin-bottom 15px
|
||||
.planetGroup
|
||||
margin-left 15px
|
||||
.planetGroupLabel
|
||||
font-size 1.1em
|
||||
margin-bottom 15px
|
||||
small
|
||||
font-size 0.8em
|
||||
color inactiveTextColor
|
||||
.planets
|
||||
margin-left 15px
|
||||
li
|
||||
a
|
||||
font-size 1.1em
|
||||
text-decoration none
|
||||
&:hover
|
||||
text-decoration underline
|
||||
margin-bottom 10px
|
||||
.createPlanetButton
|
||||
btnStripDefault()
|
||||
&>.plusButton
|
||||
float right
|
||||
width 20px
|
||||
height 20px
|
||||
margin-top -2.5px
|
||||
margin-right -5px
|
||||
line-height 15px
|
||||
font-size 8px
|
||||
border solid 1px userNavigatorColor
|
||||
border-radius 10px
|
||||
background-color transparent
|
||||
text-align center
|
||||
color userNavigatorColor
|
||||
&:hover
|
||||
border-color white
|
||||
color white
|
||||
&:active
|
||||
background-color brandColor
|
||||
border-color brandColor
|
||||
&>.folders
|
||||
.folderButton
|
||||
padding 10px 25px
|
||||
width 100%
|
||||
background-color transparent
|
||||
border none
|
||||
font-size 14px
|
||||
color userNavigatorColor
|
||||
transition 0.1s
|
||||
text-align left
|
||||
&:hover
|
||||
background-color transparentify(white, 20%)
|
||||
color white
|
||||
&.active
|
||||
background-color brandColor
|
||||
color white
|
||||
|
||||
3733
browser/styles/main/index.css
Normal file
3733
browser/styles/main/index.css
Normal file
File diff suppressed because it is too large
Load Diff
@@ -8,6 +8,7 @@ global-reset()
|
||||
|
||||
*
|
||||
-webkit-app-region no-drag
|
||||
-webkit-user-select none
|
||||
|
||||
html, body
|
||||
width 100%
|
||||
@@ -19,24 +20,12 @@ body
|
||||
color textColor
|
||||
font-size fontSize
|
||||
font-weight 400
|
||||
button
|
||||
button, input, select
|
||||
font-family "Lato"
|
||||
|
||||
div, span, a, button, input, textarea
|
||||
box-sizing border-box
|
||||
|
||||
h1
|
||||
font-size 2em
|
||||
h2
|
||||
font-size 1.5em
|
||||
h3
|
||||
font-size 1.17em
|
||||
h4
|
||||
font-size 1em
|
||||
h5
|
||||
font-size 0.83em
|
||||
h6
|
||||
font-size 0.67em
|
||||
a
|
||||
color brandColor
|
||||
&:hover
|
||||
@@ -55,6 +44,9 @@ button
|
||||
&:focus, &.focus
|
||||
outline none
|
||||
|
||||
.noSelect
|
||||
noSelect()
|
||||
|
||||
.text-center
|
||||
text-align center
|
||||
|
||||
@@ -64,13 +56,6 @@ button
|
||||
display block
|
||||
margin-bottom 5px
|
||||
|
||||
.stripInput
|
||||
stripInput()
|
||||
display block
|
||||
width 100%
|
||||
font-size 1em
|
||||
height 33px
|
||||
|
||||
.block-input, .inline-input
|
||||
border solid 1px borderColor
|
||||
padding 0 10px
|
||||
@@ -110,19 +95,29 @@ textarea.block-input
|
||||
z-index 2000
|
||||
bottom 5px
|
||||
right 53px
|
||||
btnPrimary()
|
||||
padding 10px 15px
|
||||
border none
|
||||
border-radius 5px
|
||||
background-color backgroundColor
|
||||
background-color brandColor
|
||||
color white
|
||||
opacity 0.7
|
||||
&:hover
|
||||
opacity 1
|
||||
background-color lighten(brandColor, 10%)
|
||||
.contactButton
|
||||
position fixed
|
||||
z-index 2000
|
||||
bottom 5px
|
||||
right 5px
|
||||
btnPrimary()
|
||||
padding 10px 15px
|
||||
border none
|
||||
border-radius 5px
|
||||
background-color backgroundColor
|
||||
background-color brandColor
|
||||
color white
|
||||
opacity 0.7
|
||||
&:hover
|
||||
opacity 1
|
||||
background-color lighten(brandColor, 10%)
|
||||
.tooltip
|
||||
tooltip()
|
||||
margin-top -22px
|
||||
|
||||
@@ -6,28 +6,28 @@ marked()
|
||||
h1
|
||||
font-size 2em
|
||||
border-bottom solid 2px borderColor
|
||||
margin 0.67em auto
|
||||
margin 0.33em auto 0.67em
|
||||
h2
|
||||
font-size 1.5em
|
||||
margin 0.83em auto
|
||||
margin 0.42em auto 0.83em
|
||||
h3
|
||||
font-size 1.17em
|
||||
margin 1em auto
|
||||
margin 0.5em auto 1em
|
||||
h4
|
||||
font-size 1em
|
||||
margin 1.33em auto
|
||||
margin 0.67em auto 1.33em
|
||||
h5
|
||||
font-size 0.83em
|
||||
margin 1.67em auto
|
||||
margin 0.84em auto 1.67em
|
||||
h6
|
||||
font-size 0.67em
|
||||
margin 2.33em auto
|
||||
margin 1.16em auto 2.33em
|
||||
h1, h2, h3, h4, h5, h6
|
||||
font-weight 700
|
||||
line-height 1.8em
|
||||
p
|
||||
line-height 1.8em
|
||||
margin-bottom 25px
|
||||
margin 15px 0 25px
|
||||
img
|
||||
max-width 100%
|
||||
strong
|
||||
@@ -38,12 +38,12 @@ marked()
|
||||
text-decoration line-through
|
||||
blockquote
|
||||
border-left solid 4px brandBorderColor
|
||||
margin 15px 0 15px
|
||||
margin 15px 0 25px
|
||||
padding 0 25px
|
||||
ul
|
||||
list-style-type disc
|
||||
padding-left 35px
|
||||
margin-bottom 25px
|
||||
margin-bottom 35px
|
||||
li
|
||||
display list-item
|
||||
margin 15px 0
|
||||
@@ -54,7 +54,7 @@ marked()
|
||||
ol
|
||||
list-style-type decimal
|
||||
padding-left 35px
|
||||
margin-bottom 25px
|
||||
margin-bottom 35px
|
||||
li
|
||||
display list-item
|
||||
margin 15px 0
|
||||
@@ -72,7 +72,7 @@ marked()
|
||||
border solid 1px borderColor
|
||||
border-radius 5px
|
||||
overflow-x auto
|
||||
margin-bottom 25px
|
||||
margin 15px 0 25px
|
||||
background-color #F6F6F6
|
||||
&>code
|
||||
padding 0
|
||||
|
||||
@@ -3,5 +3,4 @@ borderBox()
|
||||
|
||||
noSelect()
|
||||
-webkit-user-select none
|
||||
-webkit-app-region drag
|
||||
|
||||
cursor default
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
borderColor = #E8E8E8
|
||||
borderColor = #D0D0D0
|
||||
highlightenBorderColor = darken(borderColor, 20%)
|
||||
invBorderColor = #404849
|
||||
brandBorderColor = #3FB399
|
||||
@@ -24,12 +24,6 @@ btnHighlightenColor = #000
|
||||
|
||||
brandColor = #2BAC8F
|
||||
|
||||
planetNavBgColor = #ECECEC
|
||||
planetAnchorColor = #979797
|
||||
planetAnchorBgColor = #BEBEBE
|
||||
planetAnchorActiveColor = textColor
|
||||
planetAnchorActiveBgColor = white
|
||||
|
||||
popupShadow = 0 0 5px 0 #888
|
||||
modalBackColor = transparentify(white, 65%)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user