@import "lib/bootstrap/bootstrap"; @import "lib/bootstrap-social/bootstrap-social"; @import "lib/ionicons/ionicons"; @import "lib/animate"; @import "lib/bootstrap/variables"; html,body,div,span,a,li,td,th { font-family: 'Lato', sans-serif; } bold { font-family: 'Lato-Bold', sans-serif; font-weight: Bold; } li, .wrappable { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP Printers */ word-wrap: break-word; /* IE 5+ */ } pre.wrappable { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP Printers */ word-wrap: break-word; /* IE 5+ */ } html { position: relative; min-height: 100%; // hack to prevent horizontal overflow problem on showHTML view overflow-x: hidden; } //input[type=checkbox] { // /* Double-sized Checkboxes */ // -ms-transform: scale(2); /* IE */ // -moz-transform: scale(2); /* FF */ // -webkit-transform: scale(2); /* Safari and Chrome */ // -o-transform: scale(2); /* Opera */ // padding: 10px; //} .btn-group { border-color: @brand-primary; } body.full-screen-body-background { background-color: @body-bg; } body.top-and-bottom-margins { padding-top: 80px; margin-bottom: 60px; } body.no-top-and-bottom-margins { margin: 75px 20px 0px 20px; } body.react-layout { margin-top: 75px; margin-bottom: 15px; width: auto; padding-left: 15px; padding-right: 15px; min-height: 650px; } h1, h2 { font-weight: 400; } h1, h2, h3, h4, h5, h6, p, li { padding-top: 5px; padding-bottom: 5px; } // Alerts // ------------------------- .alert { margin-top: 20px; } // Thumbnails // ------------------------- .thumbnail { background-color: #EEEEEE; // box-shadow: 0 0 5px #ccc, inset 0 0 0 #000; } // Font Icons // ------------------------- .fa, [class^='ion-'] { margin-right: 5px; } .fa:hover { text-decoration: none; } .no-link-underline { text-decoration: none; } .img-center { margin: 0 auto; } .btn-cta { font-size: 40px; } .shadow { white-space: normal; -webkit-box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.3); box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.3); } .btn-nav { margin-top: 10px; } .large-li > li { list-style: none; } .panel-heading { font-size: 25px; } .panel-heading > h1 { font-size: 25px; padding: 2px; margin: 2px; } .navbar-brand { font-size: 26px; } .navbar > .container { width: auto; padding-right: 0px; @media (max-width: 767px) { // container default padding size padding-left: 15px; padding-right: 15px; } } .nav-height { height: 50px; border: none; } .landing-icon { height: 200px; width: 200px; } .completion-icon { font-size: 150px; } .positive-15 { margin-top: 15px; } .positive-20 { margin-top: 20px; } .positive-15-bottom { margin-bottom: 15px; } .positive-10 { margin-top: 10px; } .positive-5 { margin-top: 5px; } .negative-5 { margin-top: -5px; } .negative-10 { margin-top: -10px; } .negative-15 { margin-top: -15px; } .negative-20 { margin-top: -20px; } .negative-28 { margin-top: -28px; } .negative-30 { margin-top: -30px; } .negative-30-bottom { margin-bottom: -30px; } .negative-35 { margin-top: -35px; } .negative-55 { margin-top: -55px; margin-bottom: -55px; } .large-p { font-size: 24px; } .small-p { font-size: 14px; } .map-p { font-size: 20px; } .map-row-numbers { text-align: right; padding-right: 5px; padding-left: 5px; } .link-table td{ font-size: 16px; border-top: none !important; @media (min-width: 767px) { font-size: 24px; } } .capitalize { text-transform: capitalize; } .text-success { color: @brand-primary; } .fast-animation { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } .disabled { pointer-events: none; cursor: default; color: graytext !important; } .hidden-element { display: none; } .nav-logo { height: 40px; margin-top: -10px; @media (max-width: 397px) { height: 30px; margin-top: -5px; } @media (max-width: 335px) { height: 25px; margin-top: -2px; } } .navbar-right { @media (min-width: 767px) { margin-right:0; } @media (max-width: 991px) and (min-width: 767px) { position: absolute; left: 0; right: 0; margin-right: 0px; white-space: nowrap; } background-color: @brand-primary; text-align: center; } .navbar { white-space: nowrap; border: none; line-height: 1; @media (min-width: 767px) { padding-left: 15px; padding-right: 30px; } } li.avatar-points, li.avatar-points > a { padding:0; margin:0 } .thin-progress-bar { height: 8px; margin-top: 3px; margin-bottom: 0px; width: 60%; margin-right: auto; margin-left: auto; } .panel-body { margin-bottom: -6px; } .lb-container { padding: 0px; } .btn-social { width: 250px; margin: auto; } .btn-link-social { max-width: 400px; margin: auto; margin-bottom: 10px; } .navbar { background-color: @brand-primary; } a { font-weight: bold; } p { font-size: 16px; } .map-aside-body p { line-height: 1.8; } .navbar-nav > li > a { color: @body-bg; &:hover { color: @brand-primary; } } .hug-top { margin-top: -35px; margin-bottom: -10px; } .nonprofit-landing { font-size: 50px; } .big-text { font-size: 63px; } .signup-btn.btn { background-color: #ffac33; background-image: linear-gradient(#ffcc4d, #ffac33); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d, endColorstr=#ffac33, GradientType=0)"; border-color: #f1a02a; color: #292f33 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .signup-btn:hover, .signup-btn:focus { background-color: #e99110; background-image: linear-gradient(#ffcc4d, #e99110); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcc4d, endColorstr=#e99110, GradientType=0)"; border-color: #ec8b11; color: #292f33 !important; } .signup-btn:active { background-color: #f2a330; background-image: none; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3); } *, *:before, *:after { box-sizing: border-box !important; } .btn-big { font-size: 20px; border-radius: 6px; } .btn-bigger { font-size: 30px; } .big-text-field { font-size: 30px; height: 57px; background-color: @body-bg !important; } h4 { font-size: 22px; } .no-transition { -webkit-transition: height 0.001s; -moz-transition: height 0.001s; -ms-transition: height 0.001s; -o-transition: height 0.001s; transition: height 0.001s; } .margin-left-10 { margin-left: 10px; } .btn-responsive { @media (max-width: 768px) { font-size: 15px; height: 26.5px; padding-top: 1px; } } .field-responsive { @media (max-width: 768px) { font-size: 15px; height: 26.5px; } } thead { font-size: 150%; } .nowrap { white-space: nowrap; } .big-break { margin-top: 50px; margin-bottom: 50px; } .profile-picture { height: 50px; width: 50px; } .brownie-points-nav { @media (min-width: 991px) and (max-width: 1030px) { float: none !important; padding-right: 10px; display: inline-block; } @media (min-width: 991px) { float: left; padding: 15px; } } .navbar-nav a { color: @body-bg; font-size: 20px; margin-top: -5px; margin-bottom: -5px; } .navbar-toggle { color: @body-bg; &:hover, &:focus { color: #4a2b0f; } } .signup-btn-nav { margin-top: -2px !important; padding-top: 10px !important; padding-bottom: 10px !important; margin-right: -12px; @media (min-width: 991px) and (max-width: 1010px) { margin-left: -10px; margin-right: -5px; } } a[href="/email-signup"], a[href="/email-signin"] { &.btn-social.btn-lg > :first-child { line-height:43px; font-size:26px; } } form.update-email .btn{ margin:0; width:40%; display:inline-block; &:last-child { float:right; } } .public-profile-img { height: 200px; width: 200px; border-radius: 5px; } .ng-invalid.ng-dirty { border-color: #FA787E; } .ng-valid.ng-dirty { border-color: #78FA89; } .flat-top { margin-top: -5px; } .negative-bottom { margin-bottom: -20px; } .min-height-1000 { min-height: 1000px; } .points-on-top { color: @body-bg; font-size: 35px; z-index: 2; width: 60%; margin: 0 auto; position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .landing-skill-icon { color: @brand-primary; font-size: 150px; } .custom-landing-skill-icon { margin-top: -15px; padding-bottom: 15px; } .black-text { color: #333; font-weight: 400; font-size: 40px; } .font-awesome-padding { margin-top: 45px; margin-bottom: 20px; } .background-svg { width: 220px; height: 220px; background-image: url("https://s3.amazonaws.com/freecodecamp/certificate-icon.svg"); background-size: 120%; background-repeat: no-repeat; background-position: center; } .testimonial-image { border-radius: 5px; height: 200px; width: 200px; color: #009900 } .testimonial-image-jobs { border-radius: 5px; color: #009900 } .default-border-radius { border-radius: 5px; } .height-500 { height: 500px; } .height-400 { height: 400px; } .testimonial-copy { text-align: center; font-size: 18px !important; margin-left: 20px; margin-right: 20px; @media (min-width: 991px) and (max-width: 1199px) { height: 150px; } @media (min-width: 1200px) { height: 100px; } } .nonprofit-testimonial-copy { text-align: justify; font-size: 18px !important; margin-left: 20px; margin-right: 20px; @media (min-width: 991px) and (max-width: 1199px) { height: 300px !important; } @media (min-width: 1200px) { height: 200px !important; } } .navbar-collapse { border-top: 0; } .challenge-list-header { background-color: @brand-primary; color: @gray-lighter; font-size: 36px; text-align: center; margin-bottom: -30px; border-radius: 5px 5px 0px 0px; padding-left: 50px; } .closing-x { color: @gray-lighter; font-size: 50px; text-align: right; } .fcc-footer { width: 100%; height: 50px; text-align: center; background-color: @brand-primary; padding: 12px; bottom: 0; left: 0; position: absolute; a { font-size: 20px; color: @gray-lighter; margin-left: 0px; margin-right: 0px; padding-left: 10px; padding-right: 10px; padding-top: 14px; padding-bottom: 12px; &:hover { color: @brand-primary; background-color: @gray-lighter; text-decoration: none; } } } .embed-responsive-twitch-chat { padding-bottom: 117%; } .graph-rect { fill: #ddd !important } .scroll-locker { overflow-x: hidden; overflow-y: auto; } .test-vertical-center { margin-top: 8px; } .courseware-height { min-height: 650px; } .btn { font-weight: 400; white-space: normal; background: transparent; -webkit-transition: background .2s ease-in-out, border .2s ease-in-out; -moz-transition: background .2s ease-in-out, border .2s ease-in-out; -ms-transition: background .2s ease-in-out, border .2s ease-in-out; -o-transition: background .2s ease-in-out, border .2s ease-in-out; transition: background .2s ease-in-out, border .2s ease-in-out; } .population-table { font-size:30px; width:460px; margin:0 auto; padding:0; h2 { margin:0; text-align: left; } .tag { width:165px; display:inline-block; } .text-primary { margin-right:5px; } @media (max-width: 767px) { font-size: 16px; width: 260px; .tag { width:95px; } } } @media (max-width: 991px) { .navbar-header { float: none; } .navbar-toggle { display: block; } .navbar-collapse.collapse { display: none !important; } .navbar-nav { margin-top: 0; } .navbar-nav > li { float: none; } .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; } .navbar-text { float: none; margin: 15px 0; } /* since 3.1.0 */ .navbar-collapse.collapse.in { display: block !important; } .collapsing { overflow: hidden !important; position: absolute; left: 0; right: 0; } } .navbar-toggle { width: 80px; padding-left: 0; padding-right: 8px; margin: 7px 2px 7px 0; text-align: left; font-size: 10px; } .hamburger-text { line-height: 0.75em; margin-top: 10px; font-size: 18px; } .story-list { padding-bottom: 30px; margin-bottom: 30px; } .button-spacer { padding: 5px 0; } .spacer { padding: 15px 0 15px 0; } //.media ~ .media .media-body-wrapper:nth-child(odd) { // background-color: #e5e5e5; //} .landing-heading { font-size: 50px !important; } hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); } .big-spacer { padding: 30px 0 30px 0; } #reply-to-main-post, #upvote { cursor: pointer; } .btn-no-shadow { -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); } .dotted-underline { border-bottom: dashed 1px @brand-success; } .d3-centered { width: 771px; margin: 0 auto; } .cal-heatmap-container { background-color: @body-bg; } .interested-camper-image { height: 50px; width: 50px; padding: 5px; } .mobile-story-image { border-radius: 5px; width: 100%; @media (max-width: 768px) { margin-right: 5px; } } .alert a { text-decoration: underline; } .step-text { line-height: 120%; padding-bottom: 10px; } .faded { opacity: 0.5; } .slightly-faded { opacity: 0.75; } .padded-ionic-icon { padding-top: 5px; } .checklist-element { margin-left: -60px; margin-right: -20px; } .profile-social-icons { margin-left: 8px; } .border-radius-5 { border-radius: 5px; } code { padding: 1px 5px; } // Calculator styles .chart rect { fill: steelblue; } .chart text { font-size: 14px; text-anchor: end; } .axis path, .axis line { fill: none; stroke: #121401; stroke-width: 2px; shape-rendering: crispEdges; } .gitter-chat-embed { z-index: 20000 !important; } //uncomment this to see the dimensions of all elements outlined in red //* { // border-color: red; // border-width: 1px; // border-style: solid; //} // source: https://github.com/jlong/css-spinners/blob/master/css/spinner/inner-circles.css // license MIT /* :not(:required) hides this rule from IE9 and below */ .inner-circles-loader:not(:required) { -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); position: relative; display: inline-block; width: 125px; height: 125px; background: rgba(25, 165, 152, 0.5); border-radius: 50%; overflow: hidden; text-indent: -9999px; margin-top: 10%; /* Hides inner circles outside base circle at safari */ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); } .inner-circles-loader:not(:required):before, .inner-circles-loader:not(:required):after { content: ''; position: absolute; top: 0; display: inline-block; width: 125px; height: 125px; border-radius: 50%; } .inner-circles-loader:not(:required):before { -moz-animation: inner-circles-loader 3s infinite; -webkit-animation: inner-circles-loader 3s infinite; animation: inner-circles-loader 3s infinite; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -webkit-transform-origin: 0 50%; transform-origin: 0 50%; left: 0; background: #c7efcf; } .inner-circles-loader:not(:required):after { -moz-animation: inner-circles-loader 3s 0.2s reverse infinite; -webkit-animation: inner-circles-loader 3s 0.2s reverse infinite; animation: inner-circles-loader 3s 0.2s reverse infinite; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; right: 0; background: #eef5db; } @-moz-keyframes inner-circles-loader { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 50% { -moz-transform: rotate(360deg); transform: rotate(360deg); } 100% { -moz-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes inner-circles-loader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes inner-circles-loader { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .night { background-color: @night-body-bg; color: @night-text-color; .btn-group, .text-success, .challenge-list-header, .fcc-footer { background-color: @night-body-bg; } hr { background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); } .navbar-default { .navbar-nav { & > li > a { color: #CCC; } .dropdown-menu { background-color: @gray; a { color: @night-text-color !important; } } a:focus, a:hover, .open #nav-Community-dropdown { background-color: #666 !important; color: @link-hover-color !important; } } } .navbar-toggle { &:hover, &:focus { background-color: #666; color: @link-hover-color; border-color: #666; } } .modal-dialog { .modal-content { background-color: @gray; } .modal-header, .modal-footer { border: none; } .fa-check-circle { color: darken(@brand-primary, 5%); } } a, .input-group-addon, .challenge-instructions a, .challenge-instructions #MDN-links a { color: #CCC; } .fa-github-square { color: @brand-primary; &:hover { color: #CCC; } } .black-text { color:#111; } code { background-color: #242424; color: #02a902; } .fcc-footer { a { &hover { background-color: @night-body-bg; } } } .btn-primary { background-color: @brand-primary; border-color: #292929; color:#CCC; transition: color 0.2s, background-color 0.2s; &:hover { background-color: #ABABAB!important; color: @night-body-bg!important; } } //** Profile's activity board .cal-heatmap-container { background-color: @night-body-bg; } .graph-rect { fill: @night-text-color !important } //** Profile's odd rows .table-striped > tbody > tr:nth-child(odd) { background-color: @gray; } .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { border-color: @night-text-color; } } //make about page contact table reponsive on small screens @media only screen and (max-width : 400px) { table.response-table td { width: 100%; display: block; } } // make btn-default hover more visible .btn-default:active, .btn-default:hover { background-color: @brand-primary; } // user bio .bio { font-size: 17px; } .editorScrollDiv { -webkit-overflow-scrolling: touch; } // Reset/Delete Account Modal Styles .modal-dialog { margin: 80px; .modal-content { background-color: #f9f9f9; } .modal-header .close { font-size: 30px; padding-left: 10px; } .modal-header { text-align: center; padding: 5px 20px; } .modal-footer { .spacer { padding: 8px 0 8px 0; } .btn { padding: 12px; } .btn-success { color: darkgreen; border-color: darkgreen; } .btn-success:hover, .btn-success:focus, .btn-success:active { color: #eee; background-color: #208e36; border-color: darkgreen; } } } @media (min-width: 768px) { .modal-dialog { width: 620px; margin: 150px auto; } } @import "code-mirror.less"; @import "challenge.less"; @import "toastr.less"; @import "map.less"; @import "sk-wave.less"; @import "classic-modal.less"; @import "skeleton-shimmer.less";