mirror of
https://github.com/overleaf/overleaf.git
synced 2025-04-11 21:35:32 +00:00
Style for portals
This commit is contained in:
Jessica Lawshe
parent
3cf060dbac
commit
d990ae1a1a
6 changed files with 228 additions and 4 deletions
161
services/web/public/stylesheets/app/portals.less
Normal file
161
services/web/public/stylesheets/app/portals.less
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
.content-portal {
|
||||
padding-top: @navbar-height!important;
|
||||
|
||||
/*
|
||||
Begin Header
|
||||
*/
|
||||
.banner-image {
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
height: 375px;
|
||||
}
|
||||
|
||||
.image-fill {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.institution-logo {
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
div {
|
||||
background-color: @white;
|
||||
box-shadow: 1px 11px 22px -9px @black-alpha-strong;
|
||||
display: inline-block;
|
||||
height: 125px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: -110px;
|
||||
white-space: nowrap;
|
||||
width: @btn-portal-width;
|
||||
}
|
||||
img {
|
||||
max-height: 75px;
|
||||
max-width: 150px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.portal-name {
|
||||
background-color: @ol-blue-gray-0;
|
||||
padding-bottom: @line-height-computed; //- center header when no tabs
|
||||
padding-top: @padding-md;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
// End Header
|
||||
|
||||
/*
|
||||
Begin Layout
|
||||
*/
|
||||
.button-pull,
|
||||
.content-pull {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.button-pull {
|
||||
text-align: right;
|
||||
> a.btn {
|
||||
white-space: normal;
|
||||
width: @btn-portal-width;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.content-pull {
|
||||
padding-right: @padding-sm;
|
||||
width: calc(~"100% - "@btn-portal-width);
|
||||
}
|
||||
// End Layout
|
||||
|
||||
/*
|
||||
Begin Card
|
||||
*/
|
||||
.card {
|
||||
margin-bottom: @margin-md;
|
||||
}
|
||||
// End Card
|
||||
|
||||
/*
|
||||
Begin Actions
|
||||
*/
|
||||
.portal-actions {
|
||||
i {
|
||||
margin-bottom: @margin-sm;
|
||||
}
|
||||
}
|
||||
// End Actions
|
||||
|
||||
/*
|
||||
Begin Print
|
||||
*/
|
||||
.print {
|
||||
.hidden-print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// End Print
|
||||
|
||||
/*
|
||||
Begin Tabs
|
||||
*/
|
||||
.nav-tabs {
|
||||
// Overrides for nav.less
|
||||
background-color: @ol-blue-gray-0;
|
||||
border: 0!important;
|
||||
margin-bottom: @margin-md;
|
||||
margin-top: -@line-height-computed; //- adjusted for portal-name
|
||||
padding: @padding-lg 0 @padding-md;
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: @link-color;
|
||||
&:hover {
|
||||
background-color: transparent!important;
|
||||
border: 0!important;
|
||||
color: @link-hover-color!important;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
a {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
li.active > a {
|
||||
background-color: transparent!important;
|
||||
border: 0;
|
||||
border-bottom: 1px solid @accent-color-secondary!important;
|
||||
color: @accent-color-secondary;
|
||||
&:hover {
|
||||
color: @accent-color-secondary!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content:extend(.container) {
|
||||
background-color: transparent!important;
|
||||
border: none!important;
|
||||
}
|
||||
// End Tabs
|
||||
|
||||
@media (max-width: @screen-size-sm-max) {
|
||||
.content-pull {
|
||||
padding: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.button-pull {
|
||||
> a.btn {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
.embed-responsive {
|
||||
display: block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
.embed-responsive .embed-responsive-item,
|
||||
.embed-responsive iframe,
|
||||
.embed-responsive embed,
|
||||
.embed-responsive object,
|
||||
.embed-responsive video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
.embed-responsive-16by9 {
|
||||
padding-bottom: 56.25% !important;
|
||||
}
|
||||
.embed-responsive-4by3 {
|
||||
padding-bottom: 75% !important;
|
||||
}
|
||||
9
services/web/public/stylesheets/components/icons.less
Normal file
9
services/web/public/stylesheets/components/icons.less
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
// Colors
|
||||
.icon-accent {
|
||||
color: @accent-color-secondary;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
.icon-lg {
|
||||
font-size: @font-size-h1;
|
||||
}
|
||||
|
|
@ -62,9 +62,12 @@
|
|||
//
|
||||
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
|
||||
|
||||
@margin-sm: 10px;
|
||||
@margin-md: 20px;
|
||||
@margin-lg: 30px;
|
||||
@margin-xs: 5px;
|
||||
@margin-sm: 10px;
|
||||
@margin-md: 20px;
|
||||
@margin-lg: 30px;
|
||||
@margin-xl: 40px;
|
||||
@margin-xxl: 50px;
|
||||
|
||||
@padding-base-vertical: 5px;
|
||||
@padding-base-horizontal: 16px;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
@footer-height: 50px;
|
||||
|
||||
// Styleguide colors
|
||||
@ol-blue-gray-0 : #f4f5f8;
|
||||
@ol-blue-gray-1 : #E4E8EE;
|
||||
@ol-blue-gray-2 : #9DA7B7;
|
||||
@ol-blue-gray-3 : #5D6879;
|
||||
|
|
@ -21,6 +22,8 @@
|
|||
@ol-dark-red : #A6312B;
|
||||
|
||||
@ol-type-color : @ol-blue-gray-3;
|
||||
@accent-color-primary: @ol-green;
|
||||
@accent-color-secondary: @ol-dark-green;
|
||||
|
||||
// Navbar customization
|
||||
@navbar-title-color : @ol-blue-gray-1;
|
||||
|
|
@ -65,8 +68,14 @@
|
|||
@btn-info-bg : @ol-blue;
|
||||
@btn-info-border : transparent;
|
||||
|
||||
// Padding
|
||||
@padding-xs-horizontal : 8px;
|
||||
|
||||
@padding-sm: 10px;
|
||||
@padding-md: 20px;
|
||||
@padding-lg: 30px;
|
||||
@padding-xl: 40px;
|
||||
|
||||
// Alerts
|
||||
@alert-padding : 15px;
|
||||
@alert-border-radius : @border-radius-base;
|
||||
|
|
@ -167,6 +176,9 @@
|
|||
@folders-tag-menu-hover : rgba(0, 0, 0, .1);
|
||||
@folders-tag-menu-active-hover : rgba(0, 0, 0, .1);
|
||||
|
||||
// Portal
|
||||
@btn-portal-width : 200px;
|
||||
|
||||
// Project table
|
||||
@structured-list-line-height : 2.5;
|
||||
@structured-list-link-color : @ol-blue;
|
||||
|
|
@ -273,6 +285,9 @@
|
|||
@log-line-no-color : #FFF;
|
||||
@log-hints-color : @ol-blue-gray-4;
|
||||
|
||||
// Portals
|
||||
@black-alpha-strong : rgba(0,0,0,0.8);
|
||||
|
||||
|
||||
// v2 History
|
||||
@history-base-font-size : @font-size-small;
|
||||
|
|
@ -284,6 +299,12 @@
|
|||
@history-toolbar-bg-color : @editor-toolbar-bg;
|
||||
@history-toolbar-color : #FFF;
|
||||
|
||||
// Screens
|
||||
// added -size to not conflict with common_variables
|
||||
@screen-size-sm-max : 767px;
|
||||
@screen-size-md-min : 768px;
|
||||
@screen-size-md-max : 991px;
|
||||
|
||||
// System messages
|
||||
@sys-msg-background : @ol-blue;
|
||||
@sys-msg-color : #FFF;
|
||||
|
|
@ -300,6 +321,7 @@
|
|||
@gray-light: #a4a4a4;
|
||||
@gray-lighter: #cfcfcf;
|
||||
@gray-lightest: #f0f0f0;
|
||||
@white: #ffffff;
|
||||
|
||||
@blue: #405ebf;
|
||||
@blueDark: #040D2D;
|
||||
|
|
|
|||
|
|
@ -6,8 +6,11 @@
|
|||
@import "app/ol-style-guide.less";
|
||||
@import "_style_includes.less";
|
||||
@import "_ol_style_includes.less";
|
||||
@import "components/embed-responsive.less";
|
||||
@import "components/icons.less";
|
||||
|
||||
// Pages
|
||||
@import "app/about.less";
|
||||
@import "app/blog-posts.less";
|
||||
@import "app/cms-page.less";
|
||||
@import "app/cms-page.less";
|
||||
@import "app/portals.less";
|
||||
Loading…
Add table
Reference in a new issue