Main Avalanche Network server application. Built with Ruby on Rails.

avalanche_theme.css.less 7.6KB

    // Avalanche Theme Stylesheet // ------------------------------------------------ @import "colors.less"; html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -222px; /* the bottom margin is the negative value of the footer's height */ } .footer, .push { height: 192px; /* .push must be the same height as .footer */ } .top-container { margin-top: 85px; } .container-bg { background-color: @bg-ligh-gray; margin-top: 0px; padding-bottom: 20px; } .top-container.container-bg { margin-top: 58px; } .container-tabs { margin-top: -38px; } .container-pre-tabs { padding-bottom: 56px; border-bottom: 1px solid #ddd; } .container-last { margin-bottom: 60px; } .page-header { padding-bottom: 0; margin: 20px 0 30px; border-bottom: 2px solid @hr-dark; } .page-header h1 { font-family: 'Helvetica-LightOblique', 'Helvetica Light Oblique', "Helvetica Neue"; font-style: italic; font-weight: 300; text-transform: uppercase; font-size: 64px; color: #1D1D26; line-height: 77px; margin-bottom: 0px; } .page-header h2 { font-family: Helvetica-LightOblique; font-size: 36px; color: #1D1D26; line-height: 43px; margin-top: 0px; margin-bottom: 0px; } .page-header-type h1 { font-size: 48px; line-height: 59px; margin-top: 0px; } .page-header-type small { font-family: Avenir-MediumOblique; font-size: 18px; color: #1D1D26; line-height: 25px; text-transform: uppercase; font-style: italic; font-weight: 200; } .page-header h1 .btn { margin-bottom: 9px; } h2 { font-family: Avenir-LightOblique; font-size: 32px; color: #000000; line-height: 44px; font-style: italic; font-weight: 200; } h4 { font-family: Avenir-MediumOblique; font-size: 18px; color: #1D1D26; line-height: 25px; text-transform: uppercase; font-style: italic; font-weight: 200; } .img-circle { border-radius: 360px; } .thumbnail { display: block; line-height: 20px; border: 2px solid #D4D4DE; border-radius: 4px; padding: 0px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .box { border-radius: 4px; border: 2px solid #D4D4DE; line-height: 20px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .thumbnail h3 { font-family: Avenir-HeavyOblique; font-size: 24px; color: #000000; margin-bottom: 0px; line-height: 28px; } .box h3 { font-family: Avenir-HeavyOblique; font-size: 24px; color: #000000; line-height: 28px; margin-bottom: 0px; } .thumbnail h3 a, .box h3 a { color: black; } .thumbnail h2 { font-family: Avenir-HeavyOblique; font-size: 28px; color: #000000; line-height: 44px; margin-top: 0px; } .thumbnail h2 a, .box h2 a { color: black; } .thumbnail-content h4 { font-family: Avenir-MediumOblique; font-size: 18px; color: #1D1D26; line-height: 25px; text-transform: none; font-style: italic; font-weight: 200; text-align: center; } .thumbnail h3 a:hover, .box h3 a:hover { text-decoration: underline; } .thumbnail p, .box p { font-family: Avenir-Medium; font-size: 16px; color: #000000; line-height: 22px; } .thumbnail .thumbnail-content { padding: 8px; } .thumbnail-line-top { border-top: @theme-border; } .box .box-content { padding-right: 4px; margin-left: -26px; } .thumbnail .mission-director-name, .box .mission-director-name { margin-bottom: 8px; /* James Peret: */ font-family: Avenir-Medium; font-size: 14px; color: @black; line-height: 22px; } .thumbnail-mission-description { height: 110px;} .box-mission-description { height:386px;} .thumbnails.mission-list, .box { margin-bottom: 60px; } // Buttons .btn.btn-success { color: @green; border-color: @green; } .btn { display: inline-block; padding: 4px 12px; margin-bottom: 0; text-align: center; vertical-align: middle; cursor: pointer; color: #333333; background-color: transparent; border: 2px solid @black; border-bottom-color: @black; border-radius: 4px; text-shadow: none; /* Create Mission: */ font-family: Avenir-Book; font-style: normal; color: #333333; text-transform: none; } .btn-large { font-family: Avenir-Black; font-size: 18px; color: #333333; line-height: 20px; } .btn:hover { background: rgba(0, 0, 0, 0.2); } .btn-link { border: none; } .btn-link:hover { border: none; background-color: transparent; } // Progress Bar .progress-success.progress-striped .bar, .progress-striped .bar-success { background-color: #92BC64; } .bar { } .progress { background-color: white; border-radius: 5px; height: 33px; } .progress-bar .percentage { margin-top: -51px; font-family: Avenir-Medium; font-size: 24px; color: #000000; line-height: 33px; } .progress-bar-mission-stats { width: 70%; margin-left: auto; margin-right: auto; } // Panel .panel.panel-default { margin-top: 15px; .box-theme; } .panel { .panel-heading { background-color: @light-gray; height: 32px; .theme-box-padding; } .panel-heading.panel-divider { border-top: @theme-border; border-bottom: @theme-border; height: 32px; margin-bottom: -2px; background-color: @white; .caret { margin-top: 16px; margin-left: 5px; margin-right: 5px; } } .panel-title { margin-top: 0px; margin-bottom: 0px; .task-text { font-family: Avenir-Medium; font-size: 18px; color: #000000; line-height: 25px; padding-top: 6px; font-weight: 200; } .caret { float: left; margin-top: 14px; margin-right: 5px; margin-left: 5px; } .task-number { line-height: 36px;} .task-icon { padding-top: 7px } .task-icon i { color: @black } } .panel-body { .panel-content { .panel-text { font-family: Avenir-Light; font-size: 18px; color: #1D1D26; line-height: 26px; .theme-box-padding; } } .accordion { margin-bottom: 0px; } } .panel-body.in { border-top: @theme-border; } .panel-footer {} } // Overrides .accordion-inner { padding: 0px; } // Footer footer { font-family: "Avenir"; font-weight: 600; text-align: center; color: #1D1D26; margin-top: 30px; padding-top: 20px; } .footer-white { } .footer-black { background-color: @black; color: white; } .footer-white a { color: @dark-gray; font-weight: bold; } .footer-white a:hover { color: @blue; font-weight: bold; text-transform: underline; } .footer-black a { color: white; font-weight: bold; background-color: transparent; } .footer-black a:hover { color: @blue; font-weight: bold; text-transform: underline; background-color: transparent; } footer .column .column-inner { min-height: 90px } footer .column .column-inner.centered { min-height: 75px } .column { width: 20%; float: left; } .column-inner { padding-left: 10px; padding-right: 10px; padding-top: 10px; } .footer-white .column-inner { border-right: 2px solid #1D1D26; } .footer-black .column-inner { border-right: 2px solid white; } .footer-black .btn { color: white; border-color: white; } .column-inner.first { margin-left: 30px; } .column-inner.last { border-right: none; margin-right: 30px; } .column-inner.centered { padding-top: 25px; } footer .column .column-inner i { margin-right: 15px; margin-left: 15px; } footer .copyright { margin-top: 10px; text-transform: uppercase; } footer hr { margin-bottom: 10px; } // Hacks .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .nav-tabs > .active > a, .nav-tabs > .active.clickable > a:hover, .nav-tabs > .active.clickable > a:focus { cursor: pointer; }