github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Style the navbar.

Browse source
This commit is contained in:
Paulo Reis 2017-09-28 12:12:33 +01:00
parent 589d4521a5
commit e68b166309
3 changed files with 44 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
services/web/public/stylesheets/components/navbar.less
View file

@ -378,7 +378,7 @@
.navbar-default {
background-color: @navbar-default-bg;
border-color: @navbar-default-border;
padding: 1rem 2rem;
padding: @navbar-default-padding;
.navbar-brand {
position: absolute;
@ -400,11 +400,11 @@
> li > a {
color: @navbar-default-link-color;
border: 2px solid transparent;
border-radius: @border-radius-base;
font-size: @font-size-base * .8;
font-weight: 700;
line-height: 1;
padding: 10px 10px 11px;
border-radius: @navbar-btn-border-radius;
font-size: @navbar-btn-font-size;
font-weight: @navbar-btn-font-weight;
line-height: @navbar-btn-line-height;
padding: @navbar-btn-padding;
&:hover,
&:focus {
@ -432,15 +432,15 @@
> li.subdued > a {
border: 0;
color: @gray;
padding: 12px 12px 13px;
color: @navbar-subdued-color;
padding: @navbar-subdued-padding;
margin-left: 0;
&:hover {
color: @gray-dark;
background-color: @gray-lightest;
color: @navbar-subdued-hover-color;
background-color: @navbar-subdued-hover-bg;
}
&:focus {
color: @gray;
color: @navbar-subdued-color;
background-color: transparent;
}
}
@ -485,8 +485,8 @@
&,
&:hover,
&:focus {
color: @gray-dark;
background-color: @gray-lightest;
color: @navbar-subdued-hover-color;
background-color: @navbar-subdued-hover-bg;
}
}

13
services/web/public/stylesheets/core/_common-variables.less
View file

@ -794,6 +794,19 @@
// Custom
@content-alt-bg-color: lighten(@gray-lightest, 2.5%);
@navbar-default-padding: 1rem 2rem;
@navbar-btn-font-size: @font-size-base * 0.8;
@navbar-btn-border-radius: @border-radius-base;
@navbar-btn-font-weight: 700;
@navbar-btn-padding: 10px 10px 11px;
@navbar-btn-line-height: 1;
@navbar-subdued-padding: 12px 12px 13px;
@navbar-subdued-color: @gray;
@navbar-subdued-hover-bg: @gray-lightest;
@navbar-subdued-hover-color: @gray-dark;
@btn-border-radius-large: @border-radius-large;
@btn-border-radius-base: @border-radius-base;
@btn-border-radius-small: @border-radius-small;

21
services/web/public/stylesheets/core/ol-variables.less
View file

@ -21,7 +21,7 @@
@navbar-default-color : #FFF;
@navbar-default-bg : @ol-blue-gray-6;
@navbar-default-border : transparent;
@navbar-brand-image-url : url(/img/ol-brand/logo-horizontal.png);
@navbar-brand-image-url : url(/img/ol-brand/overleaf-white.svg);
// Backgrounds
@body-bg : @ol-blue-gray-1;
@ -56,6 +56,23 @@
@btn-info-bg : @ol-blue;
@btn-info-border : transparent;
// Navbar
@navbar-default-padding : (@grid-gutter-width / 2) 0;
@navbar-default-link-color : #FFF;
@navbar-default-link-hover-bg : @ol-green;
@navbar-default-link-active-bg : @ol-green;
@navbar-default-link-hover-color : @ol-green;
@navbar-btn-font-size : @font-size-base;
@navbar-btn-border-radius : @btn-border-radius-base;
@navbar-btn-font-weight : 400;
@navbar-btn-padding : (@padding-base-vertical - 1) @padding-base-horizontal @padding-base-vertical;
@navbar-btn-line-height : @line-height-base;
@navbar-subdued-color : #FFF;
@navbar-subdued-padding : (@padding-base-vertical + 1) (@padding-base-horizontal + 1) (@padding-base-vertical + 2);
@navbar-subdued-hover-bg : #FFF;
@navbar-subdued-hover-color : @ol-green;
// TODO Warning color-orange?
@btn-warning-color : #FFF;
@btn-warning-bg : @ol-red;
@ -76,7 +93,6 @@
@sidebar-hover-bg : @ol-blue-gray-4;
@sidebar-hover-text-decoration : none;
// Project table
@structured-list-link-color : @ol-blue;
@structured-header-border-color : shade(@ol-blue-gray-1, 5%);
@ -108,7 +124,6 @@
@brand-warning: @orange;
@brand-danger: #E03A06;
@editor-loading-logo-padding-top: 115.44%;
@editor-loading-logo-background-url: url(/img/ol-brand/overleaf-o-grey.svg);
@editor-loading-logo-foreground-url: url(/img/ol-brand/overleaf-o.svg);