diff --git a/public/res/styles/base.less b/public/res/styles/base.less index abbc4a44..544098f9 100644 --- a/public/res/styles/base.less +++ b/public/res/styles/base.less @@ -9,7 +9,7 @@ @kbd-border-color: fade(@text-color, 25%); @blockquote-border-color: #eee; @blockquote-bg: #f8f8f8; -@title-base-size: 14px; +@title-base-size: 15px; @code-color: @text-color; @code-bg: fade(@text-color, 4%); @pre-bg: @blockquote-bg; @@ -139,19 +139,19 @@ h5 { font-size: @title-base-size; } h6 { font-size: ceil(@title-base-size * 0.85); } h1 { - margin: 60px 0 40px; + margin: 60px 0 60px; } h2 { - margin: 50px 0 30px; + margin: 50px 0 50px; } h3 { - margin: 35px 0 20px; + margin: 40px 0 40px; } h4, h5, h6 { - margin: 25px 0 15px; + margin: 25px 0 25px; } p, diff --git a/public/res/styles/main.less b/public/res/styles/main.less index 052ee9a7..017efe0f 100644 --- a/public/res/styles/main.less +++ b/public/res/styles/main.less @@ -54,14 +54,14 @@ /* Sizes */ @file-title-width: 280px; @menu-panel-width: 280px; -@document-panel-width: 340px; +@document-panel-width: 320px; @jgrowl-width: 260px; -@resizer-size: 30px; +@resizer-size: 32px; /* Bootstrap */ @body-bg: @secondary-bg-light; @text-color: @secondary-color-darkest; -@link-color: desaturate(#0080FF, 25%); +@link-color: desaturate(#0080FF, 20%); @link-hover-color: darken(@link-color, 20%); @input-bg: @secondary-bg-lighter; @input-border: @secondary-border-color; @@ -111,6 +111,7 @@ @btn-info-color: fade(@secondary-desaturated, 35%); @btn-info-bg: @transparent; @btn-info-border: @transparent; +@btn-info-hover-bg: @secondary-bg; @gray-lighter: @body-bg; @modal-header-border-color: @secondary-border-color-light; @modal-content-bg: @secondary-bg-lighter; @@ -131,6 +132,10 @@ body { tab-size: 4; } +* { + outline: none !important; +} + // Bug with SVG font on Windows @media screen and (-webkit-min-device-pixel-ratio:0) { select { @@ -141,6 +146,16 @@ body { #preview-contents { padding: 15px; margin: 0 auto 180px; + font-size: 15px; + line-height: 1.6; + blockquote p { + font-size: 15px; + line-height: 1.6; + } + code, pre { + font-size: 13px !important; + line-height: 1.6; + } } .working { @@ -153,7 +168,7 @@ body { } .dropdown-menu, .modal-content, .panel-content, .search-bar { - .box-shadow(0 6px 12px rgba(0,0,0,.125)); + .box-shadow(0 4px 12px rgba(0,0,0,.125)); } .dropdown-menu { @@ -196,9 +211,17 @@ a { border: 1px solid @transparent; &:hover, &:focus { + color: darken(@secondary, 30%); border-color: @list-group-hover-border-color; } } + &.open > a .caret, + > a:hover .caret, + > a:focus .caret { + border-top-color: darken(@secondary, 30%); + border-bottom-color: darken(@secondary, 30%); + } + &.disabled > a { &:hover, &:focus { @@ -209,6 +232,7 @@ a { &, &:hover, &:focus { + color: darken(@secondary, 30%); border-color: @list-group-hover-border-color; } } @@ -285,7 +309,7 @@ a { .open &.dropdown-toggle { color: darken(@secondary, 30%); border-color: fade(@secondary, 8%); - background-color: @secondary-bg !important; // important to override .nav > li > a:hover + background-color: @btn-info-hover-bg !important; // important to override .nav > li > a:hover } } @@ -314,18 +338,18 @@ a { .form-control { display: inline-block; } - .col-lg-1 { width: percentage((1 / @grid-columns)); } - .col-lg-2 { width: percentage((2 / @grid-columns)); } - .col-lg-3 { width: percentage((3 / @grid-columns)); } - .col-lg-4 { width: percentage((4 / @grid-columns)); } - .col-lg-5 { width: percentage((5 / @grid-columns)); } - .col-lg-6 { width: percentage((6 / @grid-columns)); } - .col-lg-7 { width: percentage((7 / @grid-columns)); } - .col-lg-8 { width: percentage((8 / @grid-columns)); } - .col-lg-9 { width: percentage((9 / @grid-columns)); } - .col-lg-10 { width: percentage((10/ @grid-columns)); } - .col-lg-11 { width: percentage((11/ @grid-columns)); } - .col-lg-12 { width: 100%; } + .col-sm-1 { width: percentage((1 / @grid-columns)); } + .col-sm-2 { width: percentage((2 / @grid-columns)); } + .col-sm-3 { width: percentage((3 / @grid-columns)); } + .col-sm-4 { width: percentage((4 / @grid-columns)); } + .col-sm-5 { width: percentage((5 / @grid-columns)); } + .col-sm-6 { width: percentage((6 / @grid-columns)); } + .col-sm-7 { width: percentage((7 / @grid-columns)); } + .col-sm-8 { width: percentage((8 / @grid-columns)); } + .col-sm-9 { width: percentage((9 / @grid-columns)); } + .col-sm-10 { width: percentage((10/ @grid-columns)); } + .col-sm-11 { width: percentage((11/ @grid-columns)); } + .col-sm-12 { width: 100%; } * {float:none;} } @@ -334,13 +358,13 @@ a { &:focus { border-color: @input-border; outline: 0; - .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 12px @{color-rgba}"); + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.05), 0 0 12px -1px @{color-rgba}"); } } .form-control.error { border-color: @error-border; - .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 134, 97, 0.6)"); + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.05), 0 0 8px rgba(255, 134, 97, 0.6)"); } .help-block { @@ -437,6 +461,7 @@ a { vertical-align: middle; .input-file-title { width: @file-title-width; + font-size: 16px; } } @@ -467,7 +492,7 @@ a { padding: 9px 10px; } - .left-buttons-dropdown, .right-buttons-dropdown { + .buttons-dropdown { > .nav { margin-left: 0; margin-right: 0; @@ -477,6 +502,7 @@ a { div.dropdown-menu { top: initial; padding: 5px; + margin: 10px; } } @@ -537,19 +563,18 @@ a { .transition(~"margin-left ease-in-out 0.35s"); .sub-menu { background-color: @secondary-bg-lighter; - padding-bottom: 20px; - .box-shadow(~"inset 1px 0 1px rgba(0,0,0,.05), inset 2px 2px 6px rgba(0,0,0,.075)"); - .nav { - padding-top: 20px; - > li > a { - padding-left: 30px; - &:hover, - &:focus { - background-color: @transparent; - } + .box-shadow(~"inset 1px 0 1px rgba(0,0,0,.1), inset 1px 1px 4px rgba(0,0,0,.025)"); + } + .nav { + margin: 20px 0; + > li > a { + padding: 8px 15px 8px 25px; + &:hover, + &:focus { + background-color: @transparent; } } - } + } &.in { margin-left: 0; } @@ -596,7 +621,10 @@ a { } .panel-content { background-color: @list-group-bg; - padding-top: 80px; + padding-top: 200px; + .viewer & { + padding-top: 75px; + } border-left: 1px solid @secondary-border-color-light; .icon-layers { font-size: 135%; @@ -606,11 +634,21 @@ a { position: absolute; background-color: @secondary-bg; margin: -10px 25px 0; - padding: 20px 5px 10px 15px; + padding: 15px 20px; z-index: 3; border: 1px solid @secondary-border-color; border-top: 0; border-radius: 6px; + .nav { + margin-bottom: 10px; + > li > a { + padding: 8px 15px; + &:hover, + &:focus { + background-color: @transparent; + } + } + } } .list-group-item { margin: 0; @@ -750,8 +788,13 @@ a { } } .dropdown-menu { + margin-top: 4px; padding-bottom: 20px; } + + hr { + margin: 0; + } .markdown-syntax, .table-of-contents { overflow-y: auto; @@ -763,12 +806,11 @@ a { .markdown-syntax { white-space: normal; - max-height: 350px; } .table-of-contents { + padding: 20px 0 15px; margin-left: -10px; - max-height: 400px; ul { margin-left: 10px; padding-left: 10px; @@ -1013,9 +1055,8 @@ a { } .ace_meta.ace_tag { - color: @tertiary-color-dark; + color: @tertiary-color-darker; font-weight: bold; - background-color: @code-bg; } .ace_keyword.ace_operator { @@ -1024,8 +1065,7 @@ a { } .ace_storage, .ace_keyword { - color: @tertiary-color-dark; - background-color: @code-bg; + color: @tertiary-color-darker; font-weight: bold; } @@ -1035,8 +1075,8 @@ a { } .ace_string { - color: @tertiary-color-dark; - background-color: @code-bg; + color: @tertiary-color-darker; + font-weight: bold; } .ace_invalid { @@ -1065,6 +1105,7 @@ a { .ace_code_block { color: @tertiary-color-darker; + font-weight: bold; } .ace_link { @@ -1085,6 +1126,12 @@ a { font-style: italic; } + .ace_doccomment { + color: fade(@state-danger-text, 90%); + font-style: italic; + font-weight: bold; + } + .ace_marker-layer .misspelled { position: absolute; z-index: -2; @@ -1196,7 +1243,7 @@ div.dropdown-menu { margin: 10px 0; } .stat { - margin-bottom: 10px; + margin: 20px 0 10px; } i { margin-right: 0; @@ -1209,6 +1256,10 @@ div.dropdown-menu { } div.dropdown-menu, { + a:hover, + a:focus { + color: @link-hover-color; + } h1 { margin: 40px 0; } @@ -1231,7 +1282,7 @@ div.dropdown-menu, { // File titles .title-icon-category { display: inline-block; - opacity: 0.1; + .opacity(0.15); margin-top: -2px; margin-left: -2px; margin-right: 3px; diff --git a/public/res/themes/original.less b/public/res/themes/original.less index dd6b6d62..2b6d8cde 100644 --- a/public/res/themes/original.less +++ b/public/res/themes/original.less @@ -40,23 +40,29 @@ } */ -@primary: #a0a0a0; +@primary: #9d9d9d; +@secondary-color: #a8a8a8; @navbar-default-bg: #474747; -@btn-default-hover-bg: fade(@primary, 14%); -@btn-primary-bg: #e2e2e2; +@btn-default-hover-bg: fade(@primary, 16%); +@btn-primary-bg: #e6e6e6; @btn-primary-hover-bg: darken(@btn-primary-bg, 4%); //@btn-primary-color: #bbb; //@btn-primary-hover-bg: fade(@primary, 25%); -@btn-success-color: #C0C0C0; +@btn-success-color: #a0a0a0; @btn-success-hover-bg: darken(@navbar-default-bg, 10%); -@panel-button-bg-color: #E6E6E6; +@btn-info-hover-bg: #ededed; +@panel-button-bg-color: #e0e0e0; @panel-button-box-shadow: ~"0 0 1px rgba(255,255,255,0.75)"; @input-bg: #fff; +@modal-backdrop-bg: #505050; +@input-color: @secondary-color-darkest; +@disabled-color: mix(@secondary-color, @input-bg, 50%); -@list-group-border: @transparent; -@list-group-active-border: @transparent; -@list-group-hover-border-color: @transparent; +//@list-group-active-color: @text-color; +//@list-group-border: @transparent; +//@list-group-active-border: fade(@secondary, 8%); +//@list-group-hover-border-color: fade(@secondary, 8%); /* @list-group-link-color: @btn-success-color; @list-group-bg: lighten(@navbar-default-bg, 2%); @@ -67,7 +73,7 @@ @tertiary-bg: #fcfcfc; -@secondary-bg: #ededed; +@secondary-bg: #f9f9f9; @secondary-bg-light: #f6f6f6; @secondary-bg-lighter: @tertiary-bg; @secondary-border-color: #e2e2e2; @@ -78,23 +84,41 @@ // Navbar buttons .btn-success { border-width: 0; + .buttons-dropdown & { + color: #777; + &:hover, + &:focus, + &:active { + background-color: #777 !important; + } + } &:hover, &:focus, &:active, - .open &.dropdown-toggle { + .open &.dropdown-toggle { color: #fff; } } +a.list-group-item, +.dropdown-menu a { + &:hover, + &:focus { + color: #333; + border-top-color: fade(@secondary, 10%); + border-bottom-color: fade(#fff, 85%); + } +} -.dropdown-menu > .disabled > a, .list-group-item.active { &, &:hover, &:focus { - background-color: lighten(@navbar-default-bg, 8%); - color: #fff; - .box-shadow(inset -1px 2px 4px rgba(0,0,0,0.25)); + background-color: fade(@primary, 8%); + color: #606060; + border-top-color: fade(@secondary, 10%); + border-bottom-color: fade(#fff, 80%); + } } @@ -105,7 +129,7 @@ } .ui-layout-resizer-north { - background-color: fade(@navbar-default-bg, 50%); + background-color: fade(@navbar-default-bg, 75%); border-bottom: 0; //.box-shadow(~"0 0 1px 1px rgba(0,0,0,0.15), 0 3px 8px rgba(0,0,0,0.15)"); } @@ -121,9 +145,10 @@ .menu-panel, .document-panel { .collapse-button:hover, &.in .collapse-button, &.collapsing .collapse-button { - background-color: lighten(@panel-button-bg-color, 10%); + background-color: @tertiary-bg; } } + /* .menu-panel { .sub-menu {