Mercurial > hg > thermostat-website
view css/style.less @ 67:49cc34400198 development
Update front page with video embedded (WIP).
author | Jie Kang <jkang@redhat.com> |
---|---|
date | Thu, 24 Nov 2016 14:57:08 -0500 |
parents | 236c53729f3c |
children | d3baea22ad57 |
line wrap: on
line source
/* colours */ @white: rgb(255,255,255); @dark-blue: rgb(39,66,110); @orange: rgb(240,130,0); @grey: rgb(76,76,76); @light-grey: rgb(220,220,220); @black: rgb(0,0,0); @dark-blue-alpha: rgba(39,66,110,0.5); @white-50: rgba(255,255,255,0.5); @white-75: rgba(255,255,255,0.75); /* sizes */ @screen-md-min: 992px; /* content-divs */ #content-header { background-color: @dark-blue; // height: 6%; // max-height: 50px; } #content-body { // height: 94%; background-color: @white; } #content-footer { background-color: @white; } .space10 { margin-top: 10px; } .space40 { margin-top: 40px; } html { height: 100%; } /* front page jumbotron */ #front-page-jumbotron { background-image: url(../img/flexibility_curved_building_istock.png); background-size: cover; background-repeat: no-repeat; margin-bottom: 0px; } /* front page get-started section */ #front-page-get-started { background-color: @dark-blue; } /* front page video */ #front-page-video { margin: 25px; } /* front page image */ .rel-box { position:relative; } .graph-img { max-width: 100%; } .graph-under { position: absolute; top: 35%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } .logo-img { margin-top: 150px; max-width: 25%; } @media (min-width: @screen-md-min) { .logo-img { margin-top: 100px; max-width: 10%; } } /* background box */ .bg-colour { background-color: @dark-blue; } .bg-img { background: url(../img/tms-graph.png); background-size: cover; background-repeat: no-repeat; } /* navbar */ /**/ #nav-container { max-height: 50px; } .navbar-default { background: @dark-blue; font-size: 1.2em; border: none; margin-bottom: 0px; } .navbar-default .navbar-nav > li > a { color: @white; background-color: @dark-blue; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: @light-grey; background-color: @dark-blue; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: @white; font-size: 1.1em; background-color: @dark-blue; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: @white; background-color: @dark-blue; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: @dark-blue } .navbar-default .navbar-nav .open .dropdown-menu > li > a { background-color: @dark-blue; color: @white; } .navbar-nav > li > .dropdown-menu { background-color: @dark-blue; } .navbar-c1 { margin-right: 0.1em; } .navbar-title { font-size: 1.3em; color: @white !important; } /* bs-docs-sidebar */ /**/ body { height: 100%; position: relative; } .fixed { position: fixed; } /* sidebar */ .bs-docs-sidebar { padding-left: 5px; padding-right: 10px; margin-top: 20px; margin-bottom: 20px; } /* all links */ .bs-docs-sidebar .nav>li>a { color: @grey; border-left: 2px solid transparent; padding: 4px 10px; font-size: 1.1em; font-weight: 400; } /* nested links */ .bs-docs-sidebar .nav .nav>li>a { padding-top: 1px; padding-bottom: 1px; padding-left: 30px; font-size: 12px; } /* active & hover links */ .bs-docs-sidebar .nav>.active>a, .bs-docs-sidebar .nav>li>a:hover, .bs-docs-sidebar .nav>li>a:focus { color: @dark-blue; text-decoration: none; background-color: transparent; border-left-color: @dark-blue; } /* all active links */ .bs-docs-sidebar .nav>.active>a, .bs-docs-sidebar .nav>.active:hover>a, .bs-docs-sidebar .nav>.active:focus>a { font-weight: 700; } /* nested active links */ .bs-docs-sidebar .nav .nav>.active>a, .bs-docs-sidebar .nav .nav>.active:hover>a, .bs-docs-sidebar .nav .nav>.active:focus>a { font-weight: 500; } /* hide inactive nested list */ .bs-docs-sidebar .nav ul.nav { display: none; } /* show active nested list */ .bs-docs-sidebar .nav>.active>ul.nav { display: block; } .back-to-top { color: @grey; border-left: 2px solid transparent; margin-top: 10px; padding: 4px 10px; font-size: 1em; font-weight: 400; display: block; } /* button */ /**/ .btn-c1 { color: @dark-blue; } .btn-c1:hover, .btn-c1:focus, .btn-c1:active, .btn-c1.active, .open>.dropdown-toggle.btn-c1 { background: @white-75; color: @dark-blue; // font-size: 1.1em; } .btn-xlarge { padding: 0.5em 3em; font-size: 1.4em; } .btn-transparent { background: @white-50; color: @dark-blue; border-color: @black; } /* panel */ /**/ .panel-default { border-color: @white; } .panel-default .panel-heading { background: @white; border-color: @white; } h1.panel-title { color: @dark-blue; font-size: 2.2em; } h2.panel-title { color: @dark-blue; font-size: 2em; } .h3-steps { margin-top: 1.5em; } /* text */ /**/ h1 { color: @dark-blue; } h2 { color: @dark-blue; } h3 { color: @dark-blue; } .black { color: @black; } .white { color: @white; } .h3c { color: @white; } .h4c { margin-top: 2em; font-size: 1.5em; color: @dark-blue; } .ac { color: @grey; }