| @import "common.less"; |
| /*//////////////// |
| |
| LessCSS |
| |
| ////////////////*/ |
| |
| // Images locations |
| @image_form_submit_bg: "@{images_gsoc_location}/form-submit-bg.png"; |
| @image_form_submit_bg_blue: "@{images_gsoc_location}/form-submit-bg-blue.png"; |
| @image_header_bg: "@{images_gsoc_location}/header-bg.png"; |
| @image_home_block_1_bg_center: "@{images_gsoc_location}/home-block-1-bg-center.gif"; |
| @image_home_block_1_list_1: "@{images_gsoc_location}/home-block-1-list-1.png"; |
| @image_home_block_1_list_2: "@{images_gsoc_location}/home-block-1-list-2.png"; |
| @image_home_block_1_list_3: "@{images_gsoc_location}/home-block-1-list-3.png"; |
| @image_home_block_students: "@{images_gsoc_location}/home-block-students-bg.gif"; |
| @image_social_icons: "@{images_gsoc_location}/social-icons.png"; |
| |
| @darkblue: #00538b; |
| @orange: #d5620e; |
| @lightblue: #238bd2; |
| @lightbluebg: #6eb5e5; |
| @grey: #f6f6f6; |
| |
| .imagereplace { |
| display: block; |
| font-size: 0; |
| line-height: 0; |
| text-indent: -9999em; |
| } |
| |
| |
| /*//////////////// |
| |
| Structure |
| |
| ////////////////*/ |
| |
| #page-header {/*logo and globe*/ |
| background: #fff url(@image_header_bg) bottom left repeat-x; |
| height: 181px; |
| width: 100%; |
| .grid_12 { |
| height: 158px; |
| #gci { |
| height:15px; |
| padding: 5px 20px 5px 0; |
| text-align:right; |
| a { |
| font-size:12px; |
| font-weight:normal; |
| color: @lightblue; |
| text-decoration:none; |
| } |
| } |
| } |
| h1, p { |
| color: @lightblue; |
| font-size: 35px; |
| font-weight: bold; |
| line-height: 1em; |
| margin-left: 10px; |
| |
| a { |
| color: @lightblue; |
| text-decoration: none; |
| } |
| } |
| } |
| #main {/*main content container*/ |
| |
| .grid_9 { |
| background: @grey; |
| margin-left: 0; |
| } |
| .content { |
| overflow: hidden; |
| padding: 19px; |
| } |
| .block {/*every block*/ |
| background: #fff; |
| margin-bottom: 20px; |
| h4 {/*block title*/ |
| background: @lightbluebg; |
| color: #fff; |
| font-size: 15px; |
| line-height: 30px; |
| margin: 0; |
| padding: 0 0 0 7px; |
| text-transform: uppercase; |
| } |
| .block-content {/*block content*/ |
| overflow: hidden; |
| padding: 12px; |
| h5 { |
| color: @darkblue; |
| font-size: 20px; |
| font-weight: bold; |
| line-height: 1.1em; |
| margin: 0 0 8px 0; |
| } |
| p { |
| color: #000; |
| font-size: 12px; |
| line-height: 1.5em; |
| } |
| } |
| .readmore {/*read more link in block*/ |
| background: #dedede; |
| font-size: 13px; |
| font-weight: bold; |
| line-height: 25px; |
| padding: 3px 0 3px 9px; |
| a { |
| color: @orange; |
| text-decoration: none; |
| } |
| } |
| .org-home-readmore { |
| .readmore; |
| text-align: right; |
| font-size: 13px; |
| padding: 3px 10px 3px 9px; |
| } |
| div.block-title { |
| /*block title*/ |
| font-weight: bold; |
| background: #6eb5e5; |
| color: #fff; |
| font-size: 15px; |
| line-height: 30px; |
| margin: 0; |
| padding: 0 0 0 7px; |
| text-transform: uppercase; |
| } |
| } |
| .home-block-1 {/*how summer of code works*/ |
| overflow: hidden; |
| width: 100%; |
| h2 { |
| color: @lightblue; |
| font-size: 27px; |
| font-weight: bold; |
| line-height: 1.7em; |
| margin: 0 0 0 12px; |
| } |
| h3 { |
| color: @lightblue; |
| font-size: 21px; |
| font-weight: normal; |
| margin: 0 0 0 12px; |
| } |
| ol {/*numbered list*/ |
| background:url(@image_home_block_1_bg_center) center center no-repeat; |
| float: left; |
| height: 218px; |
| list-style-type: none; |
| margin: 0 15px 0 0; |
| width: 429px; |
| li { |
| background-position: 13px center; |
| background-repeat: no-repeat; |
| color: @lightblue; |
| height: 72px; |
| font-size: 23px; |
| font-weight: bold; |
| padding: 0 0 0 136px; |
| |
| strong { |
| display: block; |
| padding: 17px 10px 0 0; |
| } |
| |
| span { |
| font-size: 13px; |
| } |
| } |
| li.first { |
| background-image:url(@image_home_block_1_list_1); |
| } |
| li.second { |
| background-image:url(@image_home_block_1_list_2); |
| |
| strong { |
| padding-top: 22px; |
| } |
| } |
| li.third { |
| background-image:url(@image_home_block_1_list_3); |
| } |
| } |
| .description p { |
| color: @orange; |
| font-size: 14px; |
| font-weight: bold; |
| margin: 10px 0 0 0; |
| padding-right: 10px; |
| |
| } |
| } |
| |
| .content_column_1 {/*homepage left column*/ |
| float: left; |
| width: 429px; |
| |
| .block-students {/*students apply now block*/ |
| background:url(@image_home_block_students) 0 0 repeat-y; |
| color: #004371; |
| padding-bottom: 5px; |
| text-align: center; |
| |
| h3 { |
| *background:url(@image_home_block_students) 0 0 no-repeat; |
| font-size: 35px; |
| font-weight: bold; |
| line-height: 1.9em; |
| margin: 0; |
| text-transform: lowercase; |
| } |
| |
| p { |
| font-size: 14px; |
| font-weight: bold; |
| line-height: 1.5em; |
| margin: 0; |
| |
| a { |
| color: #004371; |
| text-decoration: none; |
| } |
| } |
| |
| p.action { |
| font-size: 20px; |
| margin-bottom: 5px; |
| |
| a { |
| background: #e57e30; |
| color: #fff; |
| padding: 3px 7px; |
| } |
| |
| span { |
| padding: 0 8px; |
| } |
| } |
| p.small { |
| color: #000; |
| font-size: 11px; |
| font-weight: normal; |
| margin-bottom: 5px; |
| } |
| } |
| |
| .block-featured-project {/*featured project block*/ |
| .block-content { |
| padding-bottom: 0; |
| } |
| } |
| |
| #block-participants-content { |
| text-align: center; |
| } |
| .block-participants {/*participating orgs block*/ |
| img { |
| margin: 0 10px 0 0; |
| vertical-align: middle; |
| max-height: 65px; |
| max-width: 65px; |
| } |
| } |
| |
| .block-mentors {/*mentors apply now block*/ |
| background:url(@image_home_block_students) 0 0 no-repeat; |
| color: #004371; |
| text-align: center; |
| padding-bottom: 15px; |
| |
| h3 { |
| *background:url(@image_home_block_students) 0 0 no-repeat; |
| font-size: 35px; |
| font-weight: bold; |
| line-height: 1.9em; |
| margin: 0; |
| text-transform: lowercase; |
| } |
| |
| p { |
| font-size: 14px; |
| font-weight: bold; |
| line-height: 1.5em; |
| margin: 0; |
| |
| a { |
| color: #004371; |
| text-decoration: none; |
| } |
| } |
| |
| p.action { |
| font-size: 20px; |
| margin-bottom: 5px; |
| |
| a { |
| background: #e57e30; |
| color: #fff; |
| padding: 3px 7px; |
| } |
| |
| span { |
| padding: 0 8px; |
| } |
| } |
| p.small { |
| color: #000; |
| font-size: 11px; |
| font-weight: normal; |
| margin-bottom: 5px; |
| } |
| } |
| .block-orgs {/*orgs apply now block*/ |
| background:url(@image_home_block_students) 0 0 no-repeat; |
| color: #004371; |
| text-align: center; |
| padding-bottom: 15px; |
| |
| h3 { |
| *background:url(@image_home_block_students) 0 0 no-repeat; |
| font-size: 33px; |
| font-weight: bold; |
| line-height: 1.9em; |
| margin: 0; |
| text-transform: lowercase; |
| } |
| |
| p { |
| font-size: 14px; |
| font-weight: bold; |
| line-height: 1.5em; |
| margin: 0; |
| |
| a { |
| color: #004371; |
| text-decoration: none; |
| } |
| } |
| |
| p.action { |
| font-size: 20px; |
| margin-bottom: 5px; |
| |
| a { |
| background: #e57e30; |
| color: #fff; |
| padding: 3px 7px; |
| } |
| |
| span { |
| padding: 0 8px; |
| } |
| } |
| p.small { |
| color: #000; |
| font-size: 11px; |
| font-weight: normal; |
| margin-bottom: 5px; |
| } |
| } |
| |
| } |
| |
| .content_column_2 {/*homepage right column*/ |
| float: right; |
| width: 213px; |
| |
| .block-project-timeline { |
| |
| .block-content { |
| padding: 12px 0 0 0; |
| |
| .block-project-timeline-countdown { |
| margin-top: 10px; |
| text-align: center; |
| |
| .deadline { |
| color: #3ba3dc; |
| display: block; |
| line-height: 1.2em; |
| } |
| .countdown { |
| color: #D5620E; |
| display: block; |
| font-size: 16px; |
| margin: 10px 0 15px 0; |
| } |
| } |
| } |
| } |
| |
| .block-connect {/*social network block*/ |
| |
| .social { |
| background-image:url(@image_social_icons); |
| background-position: 0 0; |
| background-repeat: no-repeat; |
| height: 31px; |
| float: left; |
| .imagereplace; |
| } |
| |
| .fb { |
| margin-right: 13px; |
| width: 22px; |
| } |
| .tw { |
| background-position: -36px 0; |
| margin-right: 14px; |
| width: 27px; |
| } |
| .bl { |
| background-position: -77px 0; |
| margin-right: 11px; |
| width: 26px; |
| } |
| .em { |
| background-position: -114px 0; |
| margin-right: 11px; |
| width: 28px; |
| } |
| .irc { |
| background-position: -153px 0; |
| width: 29px; |
| } |
| .gp { |
| background-position: -193px 0; |
| width: 29px; |
| } |
| } |
| |
| .block-blog-feed {/*recent blog posts block*/ |
| |
| .block-content { |
| padding-bottom: 2px; |
| } |
| |
| .blog-item { |
| margin-bottom: 10px; |
| |
| span { |
| display: block; |
| font-weight: bold; |
| } |
| |
| .date { |
| color: #999; |
| font-size: 10px; |
| line-height: 1.1em; |
| text-transform: uppercase; |
| } |
| |
| .title { |
| font-size: 13px; |
| line-height: 1.2em; |
| |
| a { |
| text-decoration: none; |
| } |
| } |
| |
| } |
| |
| } |
| |
| } |
| |
| .block-text { |
| p { |
| margin: 0; |
| a { |
| color: @lightblue; |
| font-weight: bold; |
| } |
| } |
| } |
| |
| .action-link { |
| background: #EFAC4C; |
| padding: 3px 7px; |
| |
| a { |
| color: white; |
| text-decoration: none; |
| } |
| a:link { |
| color: white; |
| text-decoration: none; |
| } |
| } |
| .action-button { |
| font-size: 21px; |
| font-weight: normal; |
| line-height: 1.3em; |
| margin: 0 0 1em 0; |
| |
| .text { |
| color: #238BD2; |
| clear: left; |
| float: left; |
| width: 250px; |
| text-align: right; |
| margin-right: 10px; |
| padding-right: 10px; |
| } |
| .button-mixin (@button-background: url(@image_form_submit_bg) repeat scroll 0 0 transparent, @button-color: white) { |
| background: @button-background; |
| color: @button-color; |
| width: 90px; |
| padding: 3px; |
| text-decoration: none; |
| text-align: center; |
| } |
| .button { |
| .button-mixin; |
| cursor: pointer; |
| } |
| .button.disabled { |
| .button-mixin(url(@image_form_submit_bg_blue) repeat scroll 0 0 transparent, @grey); |
| cursor: default; |
| } |
| } |
| |
| #organization-name { |
| padding-left: 10px; |
| |
| h2 { |
| padding-top: 10px; |
| line-height: 1em; |
| } |
| } |
| |
| .org-page-link { |
| margin: 5px 0 0 12px; |
| } |
| .project-long {/* Specifically applied to proposals detailed description. The rest is separate. */ |
| pre { |
| background: none; |
| color: #000; |
| font: ~"12px/1.5em" Arial,'Helvetica Neue',Helvetica,sans-serif; |
| margin: 0; |
| code { |
| color: #000; |
| display: inline; |
| font: ~"12px/1.5em" Arial,'Helvetica Neue',Helvetica,sans-serif; |
| margin: 0; |
| padding: 0; |
| } |
| } |
| strong { |
| font-weight: bold; |
| } |
| em { |
| font-style: italic; |
| } |
| q { |
| margin-bottom: 10px; |
| border-left: 2px solid #CCCCCC; |
| font-style: normal; |
| margin-left: 2em; |
| padding-left: 1em; |
| } |
| blockquote { |
| margin-bottom: 10px; |
| } |
| h1, h2, h3, h4, h5, h6 { |
| color: #000; |
| margin-top: 10px; |
| margin-bottom: 10px; |
| } |
| h1 { |
| font-size: 20px; |
| line-height: 1.5em; |
| } |
| h2 { |
| font-size: 18px; |
| line-height: 1.5em; |
| } |
| h3 { |
| font-size: 16px; |
| line-height: 1.5em; |
| } |
| h4 { |
| font-size: 14px; |
| line-height: 1.5em; |
| } |
| h5 { |
| font-size: 13px; |
| line-height: 1.5em; |
| } |
| h6 { |
| font-size: 12px; |
| line-height: 1.5em; |
| } |
| } |
| |
| #description-section-redirect-message a { |
| text-decoration: none; |
| background: @orange; |
| color: #fff; |
| padding: 3px 7px; |
| font-size: 13px; |
| font-weight: bold; |
| } |
| |
| } |
| |
| /*//////////////// |
| |
| Footer |
| |
| ////////////////*/ |
| #footer {/*footer container*/ |
| .grid_3 { |
| margin-right: 0; |
| } |
| .grid_9 { |
| font-size: 14px; |
| font-weight: bold; |
| margin-left: 0; |
| padding: 20px 0 25px 0; |
| text-align: center; |
| text-transform: uppercase; |
| } |
| |
| .footer-meta {/*powered by/empowered by*/ |
| color: #4496ce; |
| |
| a { |
| color: #4496ce; |
| text-decoration: none; |
| } |
| .powered { |
| padding-right: 15px; |
| } |
| img { |
| vertical-align: bottom; |
| } |
| .version { |
| font-size: 10px; |
| } |
| } |
| .footer-menu {/*menu in footer*/ |
| float: left; |
| overflow:hidden; |
| margin: 0 0 12px 0; |
| position:relative; |
| width: 100%; |
| |
| ul { |
| clear:left; |
| float:left; |
| left:50%; |
| list-style:none; |
| margin:0; |
| padding:0; |
| position:relative; |
| text-align:center; |
| } |
| |
| ul li { |
| display:block; |
| float:left; |
| list-style:none; |
| margin:0; |
| padding:0 20px 0 0; |
| position:relative; |
| right:50%; |
| |
| a { |
| display:block; |
| text-decoration: none; |
| } |
| |
| } |
| |
| ul li.last { |
| padding-right: 0px; |
| } |
| |
| .social {/*social network links in footer*/ |
| padding: 3px 0 0 0; |
| |
| a { |
| background-image:url(@image_social_icons); |
| background-position: 0 -34px; |
| background-repeat: no-repeat; |
| height: 14px; |
| .imagereplace; |
| } |
| |
| .gp { |
| background-position: -100px -34px; |
| width: 22px; |
| } |
| .fb { |
| width: 16px; |
| } |
| .tw { |
| background-position: -16px -34px; |
| width: 20px; |
| } |
| .bl { |
| background-position: -36px -34px; |
| width: 20px; |
| } |
| .em { |
| background-position: -56px -34px; |
| width: 24px; |
| } |
| .irc { |
| background-position: -80px -34px; |
| margin-right: 20px; |
| width: 22px; |
| } |
| } |
| |
| } |
| |
| } |
| /*//////////////// |
| |
| Projects pages |
| |
| ////////////////*/ |
| h2#project-page-student-name { |
| font-size: 21px; |
| font-weight: normal; |
| line-height: 1.3em; |
| margin: 0 0 10px 0; |
| } |
| |
| .project-edit-link {/* Edit link styling on proposal review page*/ |
| font-size: 12px; |
| margin: 0 0 15px 0; |
| } |
| |
| .project-long { |
| padding: 15px 15px 0 15px; |
| |
| p { |
| line-height: 1.6em; |
| margin: 0 0 10px 0; |
| } |
| } |
| |
| .project-short { |
| background: #fff; |
| border: 1px solid #ebebeb; |
| padding: 15px; |
| |
| p { |
| line-height: 1.6em; |
| margin: 0; |
| |
| &.project-possible-mentor { |
| margin: 0 0 10px 0; |
| } |
| } |
| } |
| |
| .score { |
| display: block; |
| overflow: hidden; |
| padding: 0 0 0 18px; |
| |
| .score-cumulative { |
| margin-left: 50px; |
| |
| .score-cumulative-edit { |
| font-weight: bold; |
| line-height: 1em; |
| margin: 5px 0 0 0; |
| } |
| } |
| .score-average, .score-cumulative { |
| float: left; |
| |
| em { |
| color: #989898; |
| font-size: 11px; |
| font-weight: bold; |
| } |
| } |
| .score-add { |
| float: left; |
| margin-left: 50px; |
| } |
| .stars img { |
| vertical-align: text-bottom; |
| } |
| } |
| .project-meta { |
| color: #238bd2; |
| display: block; |
| font-size: 11px; |
| line-height: 1em; |
| margin: 15px 0 10px 0; |
| overflow: hidden; |
| |
| a { |
| color: #238bd2; |
| font-weight: bold; |
| padding: 0 3px; |
| text-decoration: none; |
| text-transform: uppercase; |
| } |
| .comment-link { |
| float: left; |
| padding-left: 18px; |
| width: 410px; |
| } |
| .subscribe-link { |
| float: right; |
| padding-right: 10px; |
| text-align: right; |
| width: 200px; |
| } |
| } |
| /*//////////////// |
| |
| Comments |
| |
| ////////////////*/ |
| .project-comment-container { |
| background: #e1edf5; |
| margin: 20px auto 30px auto; |
| padding: 20px 0; |
| width: 570px; |
| |
| .project-comment-box { |
| background: #cde5f5; |
| display: block; |
| margin: 0 auto 16px auto; |
| overflow: hidden; |
| padding: 0; |
| width: 524px; |
| |
| h3 { |
| color: #799EB8; |
| font-size: 12px; |
| font-weight: bold; |
| margin: 0 0 10px 0; |
| padding: 10px 0 0 10px; |
| text-transform: uppercase; |
| } |
| .project-comment-single { |
| background: #f0f7fc; |
| display: block; |
| margin: 0 0 15px 0; |
| overflow: hidden; |
| padding: 15px; |
| |
| .project-comment-score { |
| color: #4d4d4d; |
| font-style: italic; |
| margin: 0 0 3px 0; |
| } |
| .project-comment-meta { |
| margin: 0 0 3px 0; |
| |
| strong { |
| color: #4d4d4d; |
| font-style: italic; |
| padding-right: 5px; |
| } |
| a { |
| color: #208ad3; |
| text-decoration: none; |
| } |
| span { |
| color: #919191; |
| font-style: italic; |
| padding-left: 4px; |
| } |
| } |
| p { |
| line-height: 1.6em; |
| margin: 0 0 8px 0; |
| |
| &.comment-reply-link { |
| display: block; |
| float: right; |
| font-size: 11px; |
| line-height: 1em; |
| margin: 0; |
| |
| a { |
| display: block; |
| color: #208ad3; |
| text-decoration: none; |
| text-transform: uppercase; |
| padding: 5px 7px 5px 7px; |
| } |
| &.active a { |
| background: #cde5f5; |
| } |
| } |
| } |
| } |
| .project-comment-single-reply { |
| display: block; |
| clear: both; |
| overflow: hidden; |
| padding: 15px 0 0 0; |
| } |
| .comment-reply { |
| background: #cde5f5; |
| clear: both; |
| display: block; |
| padding: 10px 12px; |
| } |
| } |
| .project-comment-private-container { |
| background: #dddddd; |
| |
| h3 { |
| color: #666; |
| } |
| .project-comment-single { |
| background: #f5f5f5; |
| } |
| } |
| } |
| |
| p.reply-logged-in { |
| color: #666; |
| font-style: italic; |
| font-weight: bold; |
| margin: 0 0 3px 0; |
| |
| a { |
| font-style: normal; |
| font-weight: normal; |
| } |
| } |
| /*//////////////// |
| |
| Requests |
| |
| ////////////////*/ |
| .request-message { |
| p { |
| line-height: 1.6em; |
| margin: 0 0 10px 0; |
| } |
| } |
| |
| .request-summary { |
| background: #fff; |
| border: 1px solid #ebebeb; |
| padding: 15px; |
| |
| p { |
| line-height: 1.6em; |
| margin: 0; |
| } |
| } |
| |
| .request-response { |
| padding: 20px 0 0 0; |
| } |
| /*//////////////// |
| |
| User Login |
| |
| ////////////////*/ |
| #user-login { |
| margin: 0 0 10px 0; |
| text-align: right; |
| p { |
| color: #989898; |
| font-style: italic; |
| margin: 0; |
| } |
| a { |
| font-style: normal; |
| font-weight: normal; |
| } |
| } |
| #sort { |
| text-align: right; |
| margin-bottom: 7px; |
| vertical-align: bottom; |
| |
| .selector {/* make this class explicitly blank*/} |
| select { |
| min-width: 0; |
| } |
| span { |
| width: 85px; |
| text-align: left; |
| } |
| } |
