mirror of
https://github.com/overleaf/overleaf.git
synced 2025-04-22 16:38:13 +00:00
Merge branch 'pr-ol-beta-editor-styling' into pr-style-v2-resizers
This commit is contained in:
Paulo Reis
commit
e38c0de6b9
16 changed files with 315 additions and 90 deletions
|
|
@ -1,5 +1,5 @@
|
|||
aside#file-tree(ng-controller="FileTreeController", ng-class="{ 'multi-selected': multiSelectedCount > 0 }").full-size
|
||||
.toolbar.toolbar-small.toolbar-alt(ng-if="permissions.write")
|
||||
.toolbar.toolbar-filetree(ng-if="permissions.write")
|
||||
a(
|
||||
href,
|
||||
ng-click="openNewDocModal()",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ header.toolbar.toolbar-header.toolbar-with-labels(
|
|||
href,
|
||||
ng-click="ui.leftMenuShown = true;",
|
||||
)
|
||||
i.fa.fa-fw.fa-bars
|
||||
i.fa.fa-fw.fa-bars.editor-menu-icon
|
||||
p.toolbar-label #{translate("menu")}
|
||||
a(
|
||||
href="/project"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
div.full-size.pdf(ng-controller="PdfController")
|
||||
.toolbar.toolbar-tall
|
||||
.btn-group#recompile(
|
||||
.toolbar.toolbar-pdf
|
||||
.btn-group.btn-recompile-group#recompile(
|
||||
dropdown,
|
||||
tooltip-html="'"+translate('recompile_pdf')+" <span class=\"keyboard-shortcut\">({{modifierKey}} + Enter)</span>'"
|
||||
tooltip-class="keyboard-tooltip"
|
||||
|
|
@ -8,7 +8,7 @@ div.full-size.pdf(ng-controller="PdfController")
|
|||
tooltip-append-to-body="true"
|
||||
tooltip-placement="bottom"
|
||||
)
|
||||
a.btn.btn-info(
|
||||
a.btn.btn-recompile(
|
||||
href,
|
||||
ng-disabled="pdf.compiling",
|
||||
ng-click="recompile()"
|
||||
|
|
@ -19,7 +19,7 @@ div.full-size.pdf(ng-controller="PdfController")
|
|||
|
|
||||
span(ng-show="!pdf.compiling") #{translate("recompile")}
|
||||
span(ng-show="pdf.compiling") #{translate("compiling")}...
|
||||
a.btn.btn-info.dropdown-toggle(
|
||||
a.btn.btn-recompile.dropdown-toggle(
|
||||
href,
|
||||
ng-disabled="pdf.compiling",
|
||||
dropdown-toggle
|
||||
|
|
@ -102,6 +102,7 @@ div.full-size.pdf(ng-controller="PdfController")
|
|||
tooltip-placement="bottom"
|
||||
tooltip-append-to-body="true"
|
||||
)
|
||||
i.fa.fa-expand
|
||||
i.full-screen
|
||||
a(
|
||||
href,
|
||||
|
|
@ -111,6 +112,7 @@ div.full-size.pdf(ng-controller="PdfController")
|
|||
tooltip-placement="bottom"
|
||||
tooltip-append-to-body="true"
|
||||
)
|
||||
i.fa.fa-compress
|
||||
i.split-screen
|
||||
i.split-screen
|
||||
// end of toolbar
|
||||
|
|
|
|||
18
services/web/public/img/ol-brand/overleaf-o-white.svg
Normal file
18
services/web/public/img/ol-brand/overleaf-o-white.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 136 157" style="enable-background:new 0 0 136 157;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g id="Page-1">
|
||||
<g id="overleaf">
|
||||
<g id="Group">
|
||||
<path id="Fill-1" class="st0" d="M37.2,39.7C14.8,54,0,77.3,0,102.3C0,132.5,24.5,157,54.7,157s54.7-24.5,54.7-54.7
|
||||
c0-23.3-14.6-43.3-35.2-51.1c-4-1.5-12.6-4.2-19.4-3.6C45,53.8,33,66.6,27.4,79.4c8.4-10.1,21.5-14.5,33.2-12.6
|
||||
c17.1,2.8,30.2,17.6,30.2,35.6c0,19.9-16.1,36-36,36c-11,0-20.8-4.9-27.4-12.6c-9.9-11.5-12.4-23.9-10.4-36
|
||||
c6.9-42.4,57.2-66.5,94.6-75.8C99.4,20.5,77.4,31.1,62,42.6c44.9,17.3,52.2-20.5,73.2-37.5C114-3.1,37.3-6.1,37.2,39.7z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 939 B |
|
|
@ -2,7 +2,7 @@
|
|||
padding: (@line-height-computed / 4) (@line-height-computed / 2);
|
||||
background-color: @state-warning-bg;
|
||||
color: #333;
|
||||
border-bottom: 1px solid @toolbar-border-color;
|
||||
border-bottom: 1px solid @common-border-color;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
|
|
|
|||
|
|
@ -26,6 +26,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
.editor-menu-icon when (@is-overleaf = true) {
|
||||
&.fa {
|
||||
width: 1em;
|
||||
background: url(/img/ol-brand/overleaf-o-white.svg) center / contain no-repeat;
|
||||
|
||||
&::before {
|
||||
// Disable the font-awesome icon when in Overleaf by replacing it with a
|
||||
// non-breakable space instead (otherwise the browser would render a
|
||||
// zero-width element).
|
||||
content: "\00a0";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.full-size {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -250,8 +264,8 @@
|
|||
.ui-layout-resizer {
|
||||
width: 6px;
|
||||
background-color: #f4f4f4;
|
||||
border-left: 1px solid @toolbar-border-color;
|
||||
border-right: 1px solid @toolbar-border-color;
|
||||
border-left: 1px solid @editor-border-color;
|
||||
border-right: 1px solid @editor-border-color;
|
||||
.ui-layout-toggler {
|
||||
color: #999;
|
||||
font-family: FontAwesome;
|
||||
|
|
|
|||
|
|
@ -126,12 +126,12 @@
|
|||
height: @new-message-height;
|
||||
background-color: @gray-lightest;
|
||||
padding: @line-height-computed / 4;
|
||||
border-top: 1px solid @toolbar-border-color;
|
||||
border-top: 1px solid @editor-border-color;
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: none;
|
||||
border-radius: @border-radius-base;
|
||||
border: 1px solid @toolbar-border-color;
|
||||
border: 1px solid @editor-border-color;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: @gray-dark;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,20 @@
|
|||
.fake-full-width-bg(@bg-color) {
|
||||
&::before {
|
||||
content: '\00a0';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
right: 100%;
|
||||
background-color: @bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
aside#file-tree {
|
||||
#file-tree {
|
||||
.toolbar.toolbar-filetree {
|
||||
.toolbar-small-mixin;
|
||||
.toolbar-alt-mixin;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.file-tree-inner {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
|
|
@ -7,12 +22,14 @@ aside#file-tree {
|
|||
left: 0;
|
||||
right: 0;
|
||||
overflow-y: auto;
|
||||
background-color: @file-tree-bg;
|
||||
|
||||
&.no-toolbar {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO; Consolidate with "Project files" in Overleaf
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
border-bottom: 1px solid @gray;
|
||||
|
|
@ -20,10 +37,13 @@ aside#file-tree {
|
|||
margin: (@line-height-computed / 2);
|
||||
}
|
||||
|
||||
ul.file-tree-list {
|
||||
ul.file-tree-list when (@is-overleaf = false) {
|
||||
font-size: 0.8rem;
|
||||
margin: 0;
|
||||
padding: (@line-height-computed / 4) 0;
|
||||
}
|
||||
|
||||
ul.file-tree-list {
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
|
||||
|
|
@ -40,29 +60,42 @@ aside#file-tree {
|
|||
}
|
||||
|
||||
.entity-name {
|
||||
color: @gray-darker;
|
||||
color: @file-tree-item-color;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
&:hover {
|
||||
background-color: @gray-lightest;
|
||||
background-color: @file-tree-item-hover-bg;
|
||||
}
|
||||
&:hover when (@is-overleaf = true) {
|
||||
// When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
|
||||
// element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
|
||||
// and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
|
||||
// the empty space.
|
||||
.fake-full-width-bg(@file-tree-item-hover-bg);
|
||||
}
|
||||
input {
|
||||
line-height: 1.6;
|
||||
}
|
||||
&.droppable-hover {
|
||||
background-color: fade(@file-tree-droppable-background-color, 60%);
|
||||
&.droppable-hover when (@is-overleaf = false) {
|
||||
background-color: fade(@file-tree-droppable-bg-color, 60%);
|
||||
}
|
||||
|
||||
&.droppable-hover when (@is-overleaf = true) {
|
||||
background-color: @file-tree-droppable-bg-color;
|
||||
.fake-full-width-bg(@file-tree-droppable-bg-color);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
i.fa {
|
||||
color: @gray-light;
|
||||
color: @file-tree-item-icon-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
i.fa-folder-open, i.fa-folder {
|
||||
color: lighten(desaturate(@link-color, 10%), 5%);
|
||||
color: @file-tree-item-folder-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -70,14 +103,31 @@ aside#file-tree {
|
|||
width: 24px;
|
||||
padding: 6px;
|
||||
font-size: 0.7rem;
|
||||
color: @gray
|
||||
color: @file-tree-item-toggle-color;
|
||||
}
|
||||
|
||||
&.multi-selected {
|
||||
> .entity > .entity-name {
|
||||
background-color: lighten(@brand-info, 40%);
|
||||
> .entity > .entity-name when (@is-overleaf = false) {
|
||||
background-color: @file-tree-multiselect-bg;
|
||||
&:hover {
|
||||
background-color: lighten(@brand-info, 30%);
|
||||
background-color: @file-tree-multiselect-hover-bg;
|
||||
}
|
||||
}
|
||||
> .entity when (@is-overleaf = true) {
|
||||
> .entity-name {
|
||||
> div > i.fa,
|
||||
> i.fa,
|
||||
.entity-menu-toggle i.fa {
|
||||
color: #FFF;
|
||||
}
|
||||
color: #FFF;
|
||||
font-weight: bold;
|
||||
background-color: @file-tree-multiselect-bg;
|
||||
.fake-full-width-bg(@file-tree-multiselect-bg);
|
||||
&:hover {
|
||||
background-color: @file-tree-multiselect-hover-bg;
|
||||
.fake-full-width-bg(@file-tree-multiselect-hover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -96,6 +146,7 @@ aside#file-tree {
|
|||
top: 1px;
|
||||
left: 44px;
|
||||
right: 32px;
|
||||
color: @file-tree-item-input-color;
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -111,7 +162,7 @@ aside#file-tree {
|
|||
|
||||
&:not(.multi-selected) {
|
||||
ul.file-tree-list li.selected {
|
||||
> .entity > .entity-name {
|
||||
> .entity > .entity-name when (@is-overleaf = false) {
|
||||
color: @link-color;
|
||||
border-right: 4px solid @link-color;
|
||||
font-weight: bold;
|
||||
|
|
@ -123,15 +174,38 @@ aside#file-tree {
|
|||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
> .entity when (@is-overleaf = true) {
|
||||
> .entity-name {
|
||||
> div > i.fa,
|
||||
> i.fa,
|
||||
.entity-menu-toggle i.fa {
|
||||
color: #FFF;
|
||||
}
|
||||
background-color: @file-tree-item-selected-bg;
|
||||
font-weight: bold;
|
||||
padding-right: 32px;
|
||||
.fake-full-width-bg(@file-tree-item-selected-bg);
|
||||
|
||||
.entity-menu-toggle {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.droppable-hover {
|
||||
background-color: fade(@file-tree-droppable-background-color, 60%);
|
||||
ul.droppable-hover.file-tree-list when (@is-overleaf = false) {
|
||||
background-color: fade(@file-tree-droppable-bg-color, 60%);
|
||||
}
|
||||
ul.droppable-hover.file-tree-list when (@is-overleaf = true) {
|
||||
background-color: @file-tree-droppable-bg-color;
|
||||
.fake-full-width-bg(@file-tree-droppable-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.editor-dark {
|
||||
// TODO check if the OL Beta theme is OK with darker themes.
|
||||
.editor-dark when (@is-overleaf = false) {
|
||||
aside#file-tree {
|
||||
// background-color: lighten(@editor-dark-background-color, 10%);
|
||||
|
||||
|
|
@ -159,6 +233,4 @@ aside#file-tree {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
}
|
||||
|
||||
aside.change-list {
|
||||
border-left: 1px solid @toolbar-border-color;
|
||||
border-left: 1px solid @editor-border-color;
|
||||
height: 100%;
|
||||
width: @changesListWidth;
|
||||
position: absolute;
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
|
||||
.day {
|
||||
background-color: #fafafa;
|
||||
border-bottom: 1px solid @toolbar-border-color;
|
||||
border-bottom: 1px solid @editor-border-color;
|
||||
padding: 4px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
padding: (@line-height-computed / 4);
|
||||
padding-left: 38px;
|
||||
min-height: 38px;
|
||||
border-bottom: 1px solid @toolbar-border-color;
|
||||
border-bottom: 1px solid @editor-border-color;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: @gray-lightest;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,15 @@
|
|||
.pdf .toolbar.toolbar-pdf when (@is-overleaf = true) {
|
||||
.toolbar-small-mixin;
|
||||
.toolbar-alt-mixin;
|
||||
border-bottom: 0;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.pdf .toolbar.toolbar-pdf when (@is-overleaf = false) {
|
||||
.toolbar-tall-mixin;
|
||||
padding: 0 (@line-height-computed / 2);
|
||||
}
|
||||
|
||||
.pdf-viewer, .pdf-logs, .pdf-errors, .pdf-uncompiled {
|
||||
.full-size;
|
||||
top: 58px;
|
||||
|
|
@ -13,6 +25,42 @@
|
|||
}
|
||||
}
|
||||
|
||||
.btn-recompile-group when (@is-overleaf = true) {
|
||||
align-self: stretch;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn-recompile-group when (@is-overleaf = false) {
|
||||
margin-right: (@line-height-computed / 2);
|
||||
}
|
||||
|
||||
|
||||
.btn-recompile when (@is-overleaf = true) {
|
||||
height: 100%;
|
||||
.btn-primary;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
&:first-child {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-recompile when (@is-overleaf = false) {
|
||||
.btn-info;
|
||||
}
|
||||
|
||||
.btn-split-screen when (@is-overleaf = false) {
|
||||
.fa {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.btn-split-screen when (@is-overleaf = true) {
|
||||
.fa {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-viewer {
|
||||
iframe {
|
||||
width: 100%;
|
||||
|
|
@ -82,31 +130,43 @@
|
|||
|
||||
.pdf .toolbar {
|
||||
.toolbar-right {
|
||||
margin-right: @line-height-computed / 2;
|
||||
a {
|
||||
&:hover {
|
||||
i {
|
||||
i when (@is-overleaf = false) {
|
||||
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
|
||||
border-color: @gray-dark;
|
||||
}
|
||||
}
|
||||
i {
|
||||
i when (@is-overleaf = false) {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid @gray-light;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
i.full-screen {
|
||||
border-top-width: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
i.full-screen when (@is-overleaf = true) {
|
||||
display: none;
|
||||
}
|
||||
i.split-screen {
|
||||
width: 7px;
|
||||
border-top-width: 3px;
|
||||
border-radius: 2px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
i.split-screen when (@is-overleaf = true) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
i.fa when (@is-overleaf = false) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -902,6 +902,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.review-icon when (@is-overleaf) {
|
||||
background-position-y: -60px;
|
||||
.toolbar .btn-full-height:hover & {
|
||||
background-position-y: -60px;
|
||||
}
|
||||
}
|
||||
|
||||
.resolved-comments-toggle {
|
||||
font-size: 14px;
|
||||
color: lighten(@rp-type-blue, 25%);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.ace_search {
|
||||
background-color: @gray-lightest;
|
||||
border: 1px solid @toolbar-border-color;
|
||||
border: 1px solid @editor-border-color;
|
||||
border-top: 0 none;
|
||||
width: 350px;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
border-bottom: 1px solid @toolbar-border-color;
|
||||
border-bottom: @toolbar-border-bottom;
|
||||
|
||||
> a, .toolbar-right > a {
|
||||
position: relative;
|
||||
|
|
@ -22,13 +24,12 @@
|
|||
.toolbar-left > a:not(.btn),
|
||||
.toolbar-right > a:not(.btn) {
|
||||
display: inline-block;
|
||||
color: @gray-light;
|
||||
padding: 4px 10px 5px;
|
||||
margin: 1px 2px;
|
||||
color: @toolbar-icon-btn-color;
|
||||
padding: 0 5px;
|
||||
border-radius: @border-radius-small;
|
||||
&:hover {
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
|
||||
color: @gray-dark;
|
||||
text-shadow: @toolbar-icon-btn-hover-shadow;
|
||||
color: @toolbar-icon-btn-hover-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
&.active, &:active {
|
||||
|
|
@ -48,18 +49,18 @@
|
|||
border: none;
|
||||
border-radius: 0;
|
||||
border-right: 1px solid @toolbar-border-color;
|
||||
color: @link-color;
|
||||
color: @toolbar-btn-color;
|
||||
padding: 3px 10px 5px;
|
||||
font-size: 20px;
|
||||
&:hover {
|
||||
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
|
||||
background-color: darken(white, 10%);
|
||||
color: @link-hover-color;
|
||||
text-shadow: @toolbar-btn-hover-text-shadow;
|
||||
background-color: @toolbar-btn-hover-bg-color;
|
||||
color: @toolbar-btn-hover-color;
|
||||
}
|
||||
&.active, &:active {
|
||||
color: white;
|
||||
background-color: @link-color;
|
||||
.box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.225));
|
||||
color: @toolbar-btn-active-color;
|
||||
background-color: @toolbar-btn-active-bg-color;
|
||||
box-shadow: @toolbar-btn-active-shadow;
|
||||
}
|
||||
.label {
|
||||
top: 4px;
|
||||
|
|
@ -72,12 +73,17 @@
|
|||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
float: left;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
float: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
.btn-full-height {
|
||||
border-right: 0;
|
||||
border-left: 1px solid @toolbar-border-color;
|
||||
|
|
@ -96,7 +102,8 @@
|
|||
}
|
||||
|
||||
&.toolbar-header {
|
||||
box-shadow: 0 0 2px #ccc;
|
||||
background-color: @toolbar-header-bg-color;
|
||||
box-shadow: @toolbar-header-shadow;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -105,43 +112,31 @@
|
|||
}
|
||||
|
||||
&.toolbar-small {
|
||||
height: 32px;
|
||||
> a, .toolbar-right > a {
|
||||
padding: 2px 4px 1px 4px;
|
||||
margin: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
> a {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.toolbar-right > a {
|
||||
margin-left: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.toolbar-small-mixin;
|
||||
}
|
||||
|
||||
&.toolbar-tall {
|
||||
height: 58px;
|
||||
padding-top: 10px;
|
||||
> a, .toolbar-right > a {
|
||||
padding: 4px 10px 5px;
|
||||
}
|
||||
> a.btn, .toolbar-right > a.btn {
|
||||
margin: 0 (@line-height-computed / 2);
|
||||
}
|
||||
.btn-group {
|
||||
margin: 0 (@line-height-computed / 2);
|
||||
> .btn-group {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.toolbar-small-mixin;
|
||||
}
|
||||
|
||||
&.toolbar-alt {
|
||||
background-color: #fafafa;
|
||||
.toolbar-alt-mixin;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.toolbar-small-mixin() {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.toolbar-tall-mixin() {
|
||||
height: 58px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.toolbar-alt-mixin() {
|
||||
background-color: @toolbar-alt-bg-color;
|
||||
}
|
||||
|
||||
.toolbar-label {
|
||||
display: none;
|
||||
margin: 0 4px;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
padding: (@line-height-computed / 4) (@line-height-computed / 2);
|
||||
background-color: @state-warning-bg;
|
||||
color: #333;
|
||||
border-bottom: 1px solid @toolbar-border-color;
|
||||
border-bottom: 1px solid @common-border-color;
|
||||
text-align:center;
|
||||
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -794,7 +794,9 @@
|
|||
@left-menu-animation-duration: 0.35s;
|
||||
|
||||
@toolbar-border-color: @gray-lighter;
|
||||
@file-tree-droppable-background-color: rgb(252, 231, 199);
|
||||
@common-border-color: @gray-lighter;
|
||||
@editor-border-color: @gray-lighter;
|
||||
@file-tree-droppable-bg-color: rgb(252, 231, 199);
|
||||
|
||||
@editor-dark-background-color: #333;
|
||||
@editor-dark-toolbar-border-color: #222;
|
||||
|
|
@ -876,16 +878,43 @@
|
|||
@folders-untagged-line-height : 1.7;
|
||||
|
||||
// Progress bars
|
||||
@progress-border-radius : @border-radius-base;
|
||||
@progress-border-width : 1px;
|
||||
@progress-bar-shadow : inset 0 -1px 0 rgba(0,0,0,.15);
|
||||
@progress-border-radius : @border-radius-base;
|
||||
@progress-border-width : 1px;
|
||||
@progress-bar-shadow : inset 0 -1px 0 rgba(0,0,0,.15);
|
||||
|
||||
// Footer
|
||||
@footer-link-color : @link-color;
|
||||
@footer-link-hover-color : @link-hover-color;
|
||||
@footer-bg-color : transparent;
|
||||
@footer-padding : 2em;
|
||||
@footer-link-color : @link-color;
|
||||
@footer-link-hover-color : @link-hover-color;
|
||||
@footer-bg-color : transparent;
|
||||
@footer-padding : 2em;
|
||||
|
||||
// Editor header
|
||||
@toolbar-header-bg-color : transparent;
|
||||
@toolbar-header-shadow : 0 0 2px #ccc;
|
||||
@toolbar-btn-color : @link-color;
|
||||
@toolbar-btn-hover-color : @link-hover-color;
|
||||
@toolbar-btn-hover-bg-color : darken(white, 10%);
|
||||
@toolbar-btn-hover-text-shadow : 0 1px 0 rgba(0, 0, 0, 0.15);
|
||||
@toolbar-btn-active-color : white;
|
||||
@toolbar-btn-active-bg-color : @link-color;
|
||||
@toolbar-btn-active-shadow : inset 0 3px 5px rgba(0, 0, 0, 0.225);
|
||||
@toolbar-alt-bg-color : #fafafa;
|
||||
@toolbar-icon-btn-color : @gray-light;
|
||||
@toolbar-icon-btn-hover-color : @gray-dark;
|
||||
@toolbar-icon-btn-hover-shadow : 0 1px 0 rgba(0, 0, 0, 0.25);
|
||||
@toolbar-border-bottom : 1px solid @toolbar-border-color;
|
||||
|
||||
// Editor file-tree
|
||||
@file-tree-bg : transparent;
|
||||
@file-tree-item-color : @gray-darker;
|
||||
@file-tree-item-toggle-color : @gray;
|
||||
@file-tree-item-icon-color : @gray-light;
|
||||
@file-tree-item-input-color : inherit;
|
||||
@file-tree-item-folder-color : lighten(desaturate(@link-color, 10%), 5%);
|
||||
@file-tree-item-hover-bg : @gray-lightest;
|
||||
@file-tree-item-selected-bg : transparent;
|
||||
@file-tree-multiselect-bg : lighten(@brand-info, 40%);
|
||||
@file-tree-multiselect-hover-bg : lighten(@brand-info, 30%);
|
||||
// Tags
|
||||
@tag-border-radius : 0.25em;
|
||||
@tag-bg-color : @label-default-bg;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
@ol-blue-gray-1 : #E4E8EE;
|
||||
@ol-blue-gray-2 : #9DA7B7;
|
||||
@ol-blue-gray-3 : #5D6879;
|
||||
@ol-blue-gray-4 : #485973;
|
||||
@ol-blue-gray-4 : #455265;
|
||||
@ol-blue-gray-5 : #2C3645;
|
||||
@ol-blue-gray-6 : #1E2530;
|
||||
|
||||
|
|
@ -156,6 +156,34 @@
|
|||
@footer-link-hover-color : @ol-dark-green;
|
||||
@footer-padding : 2em 0;
|
||||
|
||||
// Editor header
|
||||
@toolbar-header-bg-color : @ol-blue-gray-6;
|
||||
@toolbar-header-shadow : none;
|
||||
@toolbar-btn-color : #FFF;
|
||||
@toolbar-btn-hover-color : #FFF;
|
||||
@toolbar-btn-hover-bg-color : @ol-blue-gray-5;
|
||||
@toolbar-btn-hover-text-shadow : none;
|
||||
@toolbar-btn-active-color : #FFF;
|
||||
@toolbar-btn-active-bg-color : @ol-green;
|
||||
@toolbar-btn-active-shadow : none;
|
||||
@toolbar-border-color : @ol-blue-gray-5;
|
||||
@toolbar-alt-bg-color : @ol-blue-gray-5;
|
||||
@toolbar-icon-btn-color : #FFF;
|
||||
@toolbar-icon-btn-hover-color : #FFF;
|
||||
@toolbar-icon-btn-hover-shadow : none;
|
||||
@toolbar-border-bottom : 1px solid @toolbar-border-color;
|
||||
// Editor file-tree
|
||||
@file-tree-bg : @ol-blue-gray-4;
|
||||
@file-tree-item-color : #FFF;
|
||||
@file-tree-item-input-color : @ol-blue-gray-5;
|
||||
@file-tree-item-toggle-color : @ol-blue-gray-2;
|
||||
@file-tree-item-icon-color : @ol-blue-gray-2;
|
||||
@file-tree-item-folder-color : @ol-blue-gray-2;
|
||||
@file-tree-item-hover-bg : @ol-blue-gray-5;
|
||||
@file-tree-item-selected-bg : @ol-green;
|
||||
@file-tree-multiselect-bg : @ol-blue;
|
||||
@file-tree-multiselect-hover-bg : @ol-dark-blue;
|
||||
@file-tree-droppable-bg-color : tint(@ol-green, 5%);
|
||||
//== Colors
|
||||
//
|
||||
//## Gray and brand colors for use across Bootstrap.
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue