mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 01:36:22 +00:00
set theme Solarized dark
This commit is contained in:
@@ -9,7 +9,7 @@ angular.module('codexen')
|
||||
if (vm.isAuthenticated) {
|
||||
User.me().success(function (data) {
|
||||
console.log('currentUser', data)
|
||||
vm.currentUser = data.user
|
||||
vm.currentUser = data
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// Core variables and mixins
|
||||
@import 'vars'
|
||||
@import 'mixins'
|
||||
@import '../../node_modules/bootstrap-styl/bootstrap/variables'
|
||||
@import '../../node_modules/bootstrap-styl/bootstrap/mixins'
|
||||
|
||||
// Utilities
|
||||
@import '../../node_modules/bootstrap-styl/bootstrap/utilities'
|
||||
43
src/styles/_index.styl
Normal file
43
src/styles/_index.styl
Normal file
@@ -0,0 +1,43 @@
|
||||
|
||||
html
|
||||
overflow: hidden
|
||||
height: 100%
|
||||
|
||||
body
|
||||
height: 100%
|
||||
overflow: auto
|
||||
font-family: "Lato", sans-serif
|
||||
color $textColor
|
||||
background-color: $appBackgroundColor
|
||||
|
||||
label
|
||||
font-family: "Lato", sans-serif
|
||||
color $textColor
|
||||
|
||||
h1, h2, h3, h4, h5
|
||||
color $textColorHighlight
|
||||
margin 0
|
||||
|
||||
textarea
|
||||
resize: vertical
|
||||
|
||||
#side-view
|
||||
position:absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
width: 200px
|
||||
background-color: $baseBackgroundColor
|
||||
border-right solid 1px $baseBorderColor
|
||||
box-sizing: border-box
|
||||
padding: 10px 0 10px 10px
|
||||
|
||||
#main-view
|
||||
position:absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 200px
|
||||
right: 0
|
||||
overflow-x: hidden
|
||||
overflow-y: auto
|
||||
background-color $bgDarker
|
||||
25
src/styles/_shared.styl
Normal file
25
src/styles/_shared.styl
Normal file
@@ -0,0 +1,25 @@
|
||||
.alert
|
||||
margin: 5px 0
|
||||
|
||||
.inline-form-control
|
||||
@extend .form-control
|
||||
width: auto
|
||||
display: inline-block
|
||||
|
||||
|
||||
textarea.form-control, .ace_editor
|
||||
border-radius $input-border-radius
|
||||
|
||||
.ace_editor
|
||||
border solid 1px $input-border
|
||||
box-shadow inset 0 1px 1px rgba(0, 0, 0, .075)
|
||||
font-family: 'Lucida Grande'
|
||||
|
||||
.ace_editor.ace_focus
|
||||
controlGlow()
|
||||
|
||||
.modal-content
|
||||
background-color $bg
|
||||
|
||||
.jumbotron
|
||||
padding 48px 10px
|
||||
67
src/styles/_vars.styl
Normal file
67
src/styles/_vars.styl
Normal file
@@ -0,0 +1,67 @@
|
||||
// Basic Vars(MUST BE CAMELCASED ATOM VARS)
|
||||
$textColor= #99B2B8
|
||||
$textColorHighlight= #D5DFE2
|
||||
$textColorSelected = #FFFFFF
|
||||
|
||||
$textColorInfo= #6494ED
|
||||
$textColorSuccess= #73C990
|
||||
$textColorWarning= #E2C08D
|
||||
$textColorError= #FF6347
|
||||
|
||||
$backgroundColorHighlight= #003B4A
|
||||
$backgroundColorSelected= #004B5F
|
||||
$appBackgroundColor= #001F27
|
||||
|
||||
$baseBackgroundColor= #002B36
|
||||
$baseBorderColor= #001A20
|
||||
|
||||
$inputBackgroundColor= #00222B
|
||||
$inputBorderColor= #001A20
|
||||
|
||||
$buttonBackgroundColor= #004355
|
||||
$buttonBackgroundColorHover= #004B5F
|
||||
$buttonBackgroundColorSelected= #52DCFF
|
||||
$buttonBorderColor= $baseBorderColor
|
||||
|
||||
$block= #00222B
|
||||
|
||||
//buttons
|
||||
$btnPrimary= #088CFF
|
||||
$btnInfo= #5BDEFF
|
||||
$btnSuccess= #22BD89
|
||||
$btnWarning= #CD8737
|
||||
$btnError= #DA2828
|
||||
|
||||
|
||||
// Bootstrap Overrides(MUST BE BUILT WITH BASIC VALUE ONLY)
|
||||
$brand-primary= $btnPrimary
|
||||
$brand-info= $btnInfo
|
||||
$brand-success= $btnSuccess
|
||||
$brand-warning= $btnWarning
|
||||
$brand-danger= $btnError
|
||||
|
||||
$btn-default-bg= $buttonBackgroundColor
|
||||
$btn-default-color= $textColor
|
||||
$btn-default-border= $buttonBorderColor
|
||||
|
||||
$link-color= $textColorHighlight
|
||||
|
||||
$nav-link-active-link-hover-bg= $backgroundColorHighlight
|
||||
$nav-pills-active-link-hover-color= $textColorHighlight
|
||||
$nav-link-hover-bg= $backgroundColorHighlight
|
||||
|
||||
$input-bg= $backgroundColorHighlight
|
||||
$input-border= $baseBorderColor
|
||||
$input-border-focus= $buttonBackgroundColorSelected
|
||||
$input-color= $textColorSelected
|
||||
|
||||
$dropdown-bg= $baseBackgroundColor
|
||||
$dropdown-border= $baseBorderColor
|
||||
$dropdown-link-color= $textColor
|
||||
$dropdown-link-hover-bg= $backgroundColorSelected
|
||||
$dropdown-link-hover-color= $textColorSelected
|
||||
|
||||
$modal-content-bg= $baseBackgroundColor
|
||||
$modal-content-border-color= $modal-header-border-color= $modal-footer-border-color= $baseBorderColor
|
||||
|
||||
$jumbotron-bg= $backgroundColorHighlight
|
||||
@@ -1,20 +1,16 @@
|
||||
$side-view-link-hover-color= $gray-dark
|
||||
$side-view-link-active-color= $link-color
|
||||
$side-view-link-active-bg= $body-bg
|
||||
#side-view
|
||||
.nav-control-group
|
||||
margin 0 5px
|
||||
ul.nav.nav-pills
|
||||
li hr
|
||||
margin: 5px 0
|
||||
border-top none
|
||||
border-bottom solid 1px $baseBorderColor
|
||||
|
||||
#side-view ul.nav.nav-pills
|
||||
li hr
|
||||
margin: 5px 0
|
||||
border-color: lighten($gray-dark, 20%)
|
||||
|
||||
|
||||
li a
|
||||
color: white
|
||||
&:hover
|
||||
color: $side-view-link-hover-color
|
||||
|
||||
|
||||
|
||||
li.active a
|
||||
color:$side-view-link-active-color
|
||||
background-color: $side-view-link-active-bg
|
||||
li a
|
||||
border-top-right-radius 0
|
||||
border-bottom-right-radius 0
|
||||
transition 0.2s
|
||||
li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus{
|
||||
background-color: $backgroundColorSelected
|
||||
}
|
||||
|
||||
@@ -86,6 +86,7 @@ body > .select2-container.open
|
||||
|
||||
.ui-select-bootstrap .ui-select-toggle
|
||||
position: relative
|
||||
border-radius $input-border-radius
|
||||
|
||||
|
||||
.ui-select-bootstrap .ui-select-toggle > .caret
|
||||
@@ -112,6 +113,7 @@ body > .select2-container.open
|
||||
/* Instead of center because of .btn */
|
||||
text-align: left !important
|
||||
padding-right: 25px
|
||||
border-radius $input-border-radius
|
||||
|
||||
|
||||
.ui-select-bootstrap > .ui-select-match > .caret
|
||||
@@ -135,7 +137,13 @@ body > .ui-select-bootstrap.open
|
||||
|
||||
.ui-select-multiple.ui-select-bootstrap
|
||||
height: auto
|
||||
padding: 3px 3px 0 3px
|
||||
padding: 3px 3px 0 10px
|
||||
|
||||
|
||||
.ui-select-multiple.ui-select-bootstrap.open
|
||||
border-color $input-border-focus
|
||||
outline 0
|
||||
box-shadow inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(red($input-border-focus), green($input-border-focus), blue($input-border-focus), .6)
|
||||
|
||||
|
||||
.ui-select-multiple.ui-select-bootstrap input.ui-select-search
|
||||
@@ -186,21 +194,21 @@ body > .ui-select-bootstrap.open
|
||||
clear: both
|
||||
font-weight: 400
|
||||
line-height: 1.42857143
|
||||
color: #333
|
||||
color: $dropdown-link-color
|
||||
white-space: nowrap
|
||||
|
||||
|
||||
.ui-select-bootstrap .ui-select-choices-row>a:hover, .ui-select-bootstrap .ui-select-choices-row>a:focus
|
||||
text-decoration: none
|
||||
color: #262626
|
||||
background-color: #f5f5f5
|
||||
color: $dropdown-link-hover-color
|
||||
background-color: $dropdown-link-hover-bg
|
||||
|
||||
|
||||
.ui-select-bootstrap .ui-select-choices-row.active>a
|
||||
color: #fff
|
||||
color: $dropdown-link-hover-color
|
||||
text-decoration: none
|
||||
outline: 0
|
||||
background-color: #428bca
|
||||
background-color: $dropdown-link-hover-bg
|
||||
|
||||
|
||||
.ui-select-bootstrap .ui-select-choices-row.disabled>a,
|
||||
|
||||
@@ -1,77 +1,11 @@
|
||||
@import 'bootstrap'
|
||||
@import '_vars'
|
||||
@import 'mixins/*'
|
||||
|
||||
@import '_bootstrap'
|
||||
|
||||
@import '_index'
|
||||
@import '_shared'
|
||||
|
||||
@import 'modals/*'
|
||||
@import 'directives/*'
|
||||
@import 'states/*'
|
||||
// @import 'mixins/*'
|
||||
|
||||
html
|
||||
overflow: hidden
|
||||
height: 100%
|
||||
|
||||
body
|
||||
height: 100%
|
||||
overflow: auto
|
||||
font-family: "Lato", sans-serif
|
||||
color $color
|
||||
background-color: $bg
|
||||
|
||||
// body:before
|
||||
// content ''
|
||||
// background-image url('http://img10.deviantart.net/f372/i/2014/283/8/3/blue_pattern_design_free_vector_by_vecree-d829oba.jpg')
|
||||
// filter blur(5px)
|
||||
// opacity 1
|
||||
// position absolute
|
||||
// left 0
|
||||
// top 0
|
||||
// bottom 0
|
||||
// right 0
|
||||
|
||||
label
|
||||
font-family: "Lato", sans-serif
|
||||
color $color
|
||||
|
||||
textarea
|
||||
resize: vertical
|
||||
|
||||
|
||||
#side-view
|
||||
position:absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
width: 200px
|
||||
background-color: $bgDarker
|
||||
border-right solid 2px $borderEdge
|
||||
box-sizing: border-box
|
||||
padding: 10px 0 10px 10px
|
||||
.nav.nav-pills>li
|
||||
&.active>a{
|
||||
background-color $bg
|
||||
}
|
||||
|
||||
.nav.nav-pills>li>a
|
||||
color white
|
||||
border-top-right-radius: 0
|
||||
border-bottom-right-radius: 0
|
||||
|
||||
|
||||
.alert
|
||||
margin: 5px 0
|
||||
|
||||
|
||||
#main-view
|
||||
position:absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 200px
|
||||
right: 0
|
||||
overflow-x: hidden
|
||||
overflow-y: auto
|
||||
background-color $bg
|
||||
|
||||
|
||||
.inline-form-control
|
||||
@extend .form-control
|
||||
width: auto
|
||||
display: inline-block
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
@import '../../node_modules/bootstrap-styl/bootstrap/mixins'
|
||||
5
src/styles/mixins/control-glow.styl
Normal file
5
src/styles/mixins/control-glow.styl
Normal file
@@ -0,0 +1,5 @@
|
||||
controlGlow($color = $input-border-focus)
|
||||
$color-rgba = rgba(red($color), green($color), blue($color), .6)
|
||||
border-color $color
|
||||
outline 0
|
||||
box-shadow inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px $color-rgba
|
||||
@@ -1,8 +1,4 @@
|
||||
$editor-border-color= $border-color
|
||||
|
||||
.new-snippet-modal
|
||||
|
||||
.ace_editor
|
||||
height: 200px
|
||||
border: solid 1px $editor-border-color
|
||||
border-radius: 5px
|
||||
|
||||
@@ -14,20 +14,20 @@ $snippet-list-active-bg= $brand-primary
|
||||
right:0
|
||||
bottom:0
|
||||
.left-pane
|
||||
border-right 1px solid $baseBorderColor
|
||||
position: absolute
|
||||
top: 0
|
||||
bottom: 0
|
||||
left: 0
|
||||
width: $left-pane-width
|
||||
overflow:hidden
|
||||
border-right: solid 1px $pane-border-color
|
||||
.snippet-search
|
||||
position: absolute
|
||||
top: 0
|
||||
height: 50px
|
||||
left: 0
|
||||
right: 0
|
||||
border-bottom: solid 1px $snippet-list-border-color
|
||||
border-right 1px solid $baseBorderColor
|
||||
padding: 7px 5px
|
||||
|
||||
.snippet-list
|
||||
@@ -43,7 +43,7 @@ $snippet-list-active-bg= $brand-primary
|
||||
li
|
||||
cursor: pointer
|
||||
padding: 5px
|
||||
border-bottom: solid 1px $snippet-list-border-color
|
||||
border-right 1px solid $baseBorderColor
|
||||
h4
|
||||
margin: 0
|
||||
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
@import '../../node_modules/bootstrap-styl/bootstrap/variables'
|
||||
|
||||
$brandColor= #26A7D5
|
||||
|
||||
$colorEdge= white
|
||||
$color= #777
|
||||
|
||||
$border= #444
|
||||
$borderEdge= #26A7D5
|
||||
|
||||
$bg= RGBA(38, 58, 71, 1)
|
||||
$bgDarker= RGBA(25, 41, 52, 1)
|
||||
@@ -1,14 +1,10 @@
|
||||
<div class="current-user">
|
||||
<div ng-if="vm.currentUser">
|
||||
<img width="30" ng-src="http://www.gravatar.com/avatar/{{ vm.currentUser.email | gravatar }}">
|
||||
<span ng-bind="vm.currentUser.name"></span>
|
||||
<span class="dropdown" dropdown is-open>
|
||||
<a type="button" name="button" dropdown-toggle class="btn btn-sm btn-default dropdown-toggle"><i class="fa fa-caret-down"></i></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a ng-click="vm.signOut()"><i class="fa fa-sign-out"></i> Sign Out</a>
|
||||
</li>
|
||||
</ul>
|
||||
<img width="30" class="img-circle" ng-src="http://www.gravatar.com/avatar/{{ vm.currentUser.email | gravatar }}">
|
||||
<a href ng-bind="vm.currentUser.name"></a>
|
||||
<span class="nav-control-group pull-right">
|
||||
<a href class="btn btn-sm btn-primary"><i class="fa fa-gears"></i></a>
|
||||
<a href class="btn btn-sm btn-primary" ng-click="vm.signOut()"><i class="fa fa-sign-out"></i></a>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
@@ -29,7 +25,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Side Nav</p>
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
<li>
|
||||
<a btn-new-snippet href="#"><i class="fa fa-plus-square-o"></i> New Snippet</a>
|
||||
@@ -46,8 +41,4 @@
|
||||
<li ui-sref-active="active">
|
||||
<a><i class="fa fa-paperclip"></i> Clips(ready)</a>
|
||||
</li>
|
||||
<li class="divider"><hr></li>
|
||||
<li>
|
||||
<a href=""><i class="fa fa-gears"></i> Configuration</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="new-snippet-modal">
|
||||
<div class="modal-header">
|
||||
New Snippet
|
||||
<h4>Edit Snippet</h4>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
@@ -21,7 +21,8 @@
|
||||
<div class="form-group">
|
||||
<div
|
||||
ui-ace="{
|
||||
mode: vm.snippet.mode.toLowerCase()
|
||||
mode: vm.snippet.mode.toLowerCase(),
|
||||
theme:'solarized_dark'
|
||||
|
||||
}"
|
||||
ng-model="vm.snippet.content"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="new-snippet-modal">
|
||||
<div class="modal-header">
|
||||
New Snippet
|
||||
<h4>New Snippet</h4>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
@@ -21,7 +21,8 @@
|
||||
<div class="form-group">
|
||||
<div
|
||||
ui-ace="{
|
||||
mode: vm.mode.toLowerCase()
|
||||
mode: vm.mode.toLowerCase(),
|
||||
theme:'solarized_dark'
|
||||
|
||||
}"
|
||||
ng-model="vm.content"
|
||||
|
||||
Reference in New Issue
Block a user