1
0
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:
Rokt33r
2015-06-08 20:15:47 +09:00
parent 5c02ab24fe
commit 5ad5da47d2
16 changed files with 193 additions and 139 deletions

View File

@@ -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
})
}
}

View File

@@ -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
View 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
View 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
View 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

View File

@@ -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
}

View File

@@ -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,

View File

@@ -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

View File

@@ -1 +0,0 @@
@import '../../node_modules/bootstrap-styl/bootstrap/mixins'

View 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

View File

@@ -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

View File

@@ -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

View File

@@ -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)

View File

@@ -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>

View File

@@ -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"

View File

@@ -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"