| @import "common.less"; |
| /*//////////////// |
| |
| LessCSS |
| |
| ////////////////*/ |
| |
| // Images locations |
| @image_flash_error: "@{images_gsoc_location}/flash-error.png"; |
| @image_flash_success: "@{images_gsoc_location}/flash-success.png"; |
| @image_form_submit_bg: "@{images_gsoc_location}/form-submit-bg.png"; |
| @image_form_submit_bg_blue: "@{images_gsoc_location}/form-submit-bg-blue.png"; |
| |
| @darkblue: #00538b; |
| @orange: #d5620e; |
| @lightblue: #238bd2; |
| @lightbluebg: #6eb5e5; |
| @grey: #f6f6f6; |
| |
| .imagereplace { |
| display: block; |
| font-size: 0; |
| line-height: 0; |
| text-indent: -9999em; |
| } |
| |
| /*//////////////// |
| |
| Forms |
| |
| ////////////////*/ |
| |
| .form-register {/*register form*/ |
| background: #e1edf5; |
| margin: 0 auto 39px auto; |
| width: 570px; |
| |
| .loggedin {/*logged in message*/ |
| background: #cee5f5; |
| padding: 11px 0; |
| text-align: center; |
| |
| p { |
| margin: 0; |
| } |
| } |
| h2 {/*heading*/ |
| float: left; |
| font-size: 27px; |
| line-height: 1.8em; |
| margin: 10px 0 0 23px; |
| } |
| h3 { |
| /*heading*/ |
| |
| clear: left; |
| font-size: 18px; |
| line-height: 1.2em; |
| margin: 10px 0 0 23px; |
| padding: 0 0 10px 5px; |
| |
| &.rejected { |
| color: red; |
| } |
| } |
| .req {/*required text*/ |
| color: @orange; |
| display: block; |
| float: left; |
| font-size: 10px; |
| font-style: italic; |
| font-weight: bold; |
| margin: 25px 0 0 10px; |
| } |
| fieldset { |
| background: #cde5f5; |
| margin: 0 23px 16px 23px; |
| padding: 30px 0 11px 0; |
| clear: left; |
| |
| .row {/*every row*/ |
| margin: 0 0 6px 11px; |
| width: 497px; |
| } |
| .row.given_name { |
| float: left; |
| width: 215px; |
| .text { width: 215px; } |
| } |
| .row.surname { |
| float: left; |
| width: 276px; |
| .text { width: 276px; } |
| } |
| .row.email { |
| clear: both; |
| float: left; |
| width: 310px; |
| .text { width: 310px; } |
| } |
| .row.phone { |
| float: left; |
| width: 180px; |
| .text { width: 180px; } |
| } |
| .row.bday { |
| clear: both; |
| float: left; |
| width: 121px; |
| .text { width: 121px; } |
| } |
| .row.address2 { |
| float: left; |
| width: 313px; |
| .text { width: 313px; } |
| } |
| .row.city { |
| float: left; |
| width: 175px; |
| .text { width: 175px; } |
| } |
| .row.stateprovince { |
| clear: both; |
| float: left; |
| width: 175px; |
| .text { width: 175px; } |
| } |
| .row.zip { |
| float: left; |
| width: 138px; |
| label { padding: 0; } |
| .text { width: 138px; } |
| } |
| .row.country { |
| clear: both; |
| padding-top: 5px; |
| width: 100%; |
| .selector { |
| select { |
| width: 100%; |
| } |
| span { |
| padding-right: 40px; |
| width: auto; /* desired width (w/ borders) - 33px = value */ |
| } |
| } |
| } |
| .row.schoolname { |
| float: left; |
| width: 100%; |
| .selector { |
| select { |
| width: 100%; |
| } |
| span { |
| padding-right: 40px; |
| width: auto; /* desired width (w/ borders) - 33px = value */ |
| } |
| } |
| } |
| .row.gradyear { |
| clear: left; |
| float: left; |
| width: 175px; |
| .selector { |
| span { |
| width: 127px; |
| } |
| } |
| } |
| .row.schoollocation { |
| float: left; |
| width: 175px; |
| .selector { |
| span { |
| width: 127px; |
| } |
| } |
| } |
| .row.schoolurl { |
| clear: both; |
| width: 254px; |
| .text { |
| width: 254px; |
| } |
| } |
| #abstract_counter { |
| color: #d5620e; |
| display: block; |
| font-size: 10px; |
| font-style: italic; |
| font-weight: bold; |
| margin: 0 0 0 4px; |
| } |
| } |
| fieldset.nolegend { |
| padding: 11px 0; |
| } |
| .fieldset-basicinfo {/*first fieldset on the registration page*/ |
| clear: both; |
| } |
| .fieldset-referral {/*referral fieldset*/ |
| background: none; |
| padding: 0; |
| |
| .row.radio { |
| margin: 0 0 6px 35px; |
| |
| label { |
| color: #666; |
| font-size: 15px; |
| } |
| } |
| } |
| .row.button-row { |
| padding: 0 0 28px 28px; |
| } |
| div.back-links { |
| clear: left; |
| font-size: 12px; |
| font-weight: bold; |
| margin: 0 0 0 23px; |
| padding: 0 0 10px 5px; |
| } |
| .row.radio { |
| margin: 0 0 6px 15px; |
| |
| label { |
| color: #666; |
| font-size: 15px; |
| |
| div.radio-content { |
| display: table-cell; |
| } |
| } |
| } |
| .row.checkbox { |
| margin: 0 0 6px 15px; |
| |
| label { |
| color: #666; |
| font-size: 15px; |
| |
| div.checkbox-content { |
| display: table-cell; |
| } |
| } |
| } |
| .row.other { |
| margin: 0 0 6px 51px; |
| width: 400px; |
| |
| input { |
| width: 400px; |
| } |
| } |
| } |
| |
| #form.form-search {/*search form*/ |
| background: #e0edf5; |
| padding: 5px 15px 10px 15px; |
| margin: 0 0 13px 0; |
| |
| h2 {/*heading*/ |
| font-size: 22px; |
| font-weight: normal; |
| margin: 0; |
| } |
| .row {/*every row*/ |
| margin: 0 10px 0 0; |
| } |
| .row.search-field {/*search text field*/ |
| float: left; |
| width: 300px; |
| .text { |
| margin-top: 1px; |
| width: 300px; |
| } |
| } |
| .row.search-filter {/*filter select field*/ |
| float: left; |
| width: 138px; |
| .selector { |
| span { |
| font-size: 14px; |
| width: 105px; /* desired width (w/ borders) - 33px = value */ |
| } |
| } |
| } |
| .row.button-row {/*submit btn*/ |
| float: left; |
| width: 77px; |
| input { |
| height: 26px; |
| line-height: 26px; |
| margin-top: 2px; |
| padding: 0; |
| width: 77px; |
| } |
| } |
| } |
| |
| /* Proposal form comments */ |
| #form.form-project-comment {/*project comment form*/ |
| margin: 0 auto; |
| width: 524px; |
| |
| fieldset { |
| background: #cde5f5; |
| margin: 0; |
| padding: 30px 0 10px 0; |
| width: auto; |
| |
| .row { |
| /*every row*/ |
| display: block; |
| margin: 0 0 6px 11px; |
| width: 497px; |
| |
| &.project-comment-add-rating #score-add-stars { |
| margin: 5px 0 0 5px; |
| } |
| &.button-row { |
| padding: 5px 0 0 5px; |
| |
| input { |
| height: 30px; |
| line-height: 30px; |
| } |
| } |
| } |
| } |
| p.reply-logged-in { |
| margin: 5px 0 0 4px; |
| } |
| textarea { |
| height: 200px; |
| width: 489px; |
| } |
| } |
| |
| /* Proposal form comment replies */ |
| #form.form-project-comment-reply {/*project comment reply form*/ |
| margin: 0; |
| width: auto; |
| |
| fieldset { |
| width: auto; |
| } |
| textarea { |
| height: 200px; |
| width: 458px; |
| } |
| .row { |
| &.project-comment-reply-full { |
| display: block; |
| width: 472px; |
| } |
| &.button-row { |
| text-align: right; |
| padding: 5px 0 0 5px; |
| input { |
| height: 30px; |
| line-height: 30px; |
| } |
| } |
| } |
| } |
| #form.form-project-comment-reply .row.button-row input { |
| height: 30px; |
| line-height: 30px; |
| } |
| /* Proposal form comment replies */ |
| /* Proposal form comments */ |
| |
| #form.form-proposal {/*application/proposal form*/ |
| background: #e1edf5; |
| width: 500px; |
| |
| fieldset { |
| margin: 0 auto; |
| padding: 5px 0; |
| width: 440px; |
| |
| .row {/*every row*/ |
| margin: 10px 0; |
| .text { |
| width: 440px; |
| } |
| } |
| .row.gsoc_proposal_abstract { |
| .textarea { |
| height: 200px; |
| width: 430px; |
| } |
| } |
| .row.gsoc_proposal_content { |
| .textarea { |
| height: 500px; |
| width: 430px; |
| } |
| } |
| .row.project-sponsor { |
| width: 320px; |
| .text { |
| width: 320px; |
| } |
| } |
| .row.project-os { |
| float: left; |
| width: 191px; |
| .text { |
| width: 191px; |
| } |
| } |
| .row.project-lang { |
| float: right; |
| width: 191px; |
| .text { |
| width: 191px; |
| } |
| } |
| .row.project-tags { |
| clear: both; |
| } |
| #form-proposal-textfield-project-short_counter, #form-proposal-textfield-project-full_counter { |
| color: @orange; |
| display: block; |
| font-size: 10px; |
| font-style: italic; |
| font-weight: bold; |
| margin: 0 0 0 4px; |
| } |
| } |
| .row.button-row { |
| background: @grey; |
| display: block; |
| padding-bottom: 20px; |
| width: 100%; |
| .submit { |
| margin: 20px 0 0 20px; |
| } |
| .save { |
| background:url(@image_form_submit_bg_blue) 0 0 repeat; |
| margin-left: 15px; |
| } |
| } |
| } |
| |
| #form, .form-register {/*form defaults*/ |
| margin: 0 auto; |
| |
| .note {/*for adding a note below a text field*/ |
| color: @orange; |
| display: block; |
| font-size: 10px; |
| font-style: italic; |
| font-weight: bold; |
| margin: 0 0 0 4px; |
| } |
| .input-submit-mixin (@height: 30px, @line-height: 30px) { |
| background: url(@image_form_submit_bg) 0 0 repeat; |
| border: 0; |
| color: #fff; |
| font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; |
| font-size: 14px; |
| font-weight: bold; |
| height: @height; |
| line-height: @line-height; |
| padding: 0 15px; |
| text-transform: uppercase; |
| |
| &:hover { |
| cursor: pointer; |
| } |
| } |
| input.submit { |
| .input-submit-mixin; |
| } |
| fieldset { |
| position: relative; |
| width: 524px; |
| |
| legend { |
| display: block; |
| float: left; |
| position: relative; |
| width: 100%; |
| span { |
| color: #799eb8; |
| font-size: 12px; |
| font-weight: bold; |
| text-transform: uppercase; |
| position: absolute; |
| top: -22px; |
| left: 10px; |
| } |
| } |
| .row { |
| label {/*labels*/ |
| color: @lightblue; |
| display: block; |
| font-size: 18px; |
| line-height: 1.3em; |
| padding: 0 0 0 5px; |
| } |
| .req {/*required text*/ |
| bottom: 1px; |
| color: @orange; |
| display: inline; |
| float: none; |
| font-size: 16px; |
| font-weight: bold; |
| height: 0; |
| line-height: 1; |
| margin: 0; |
| position: relative; |
| vertical-align: baseline; |
| } |
| .text, .textarea {/*text fields and textareas*/ |
| color: #000; |
| background: #fff; |
| border: 1px solid #d2d2d2; |
| box-shadow: inset 2px 2px 10px #e6e6e6; |
| -moz-box-shadow: inset 2px 2px 10px #e6e6e6; |
| -webkit-box-shadow: inset 2px 2px 10px #e6e6e6; |
| font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; |
| font-size: 14px; |
| padding: 0; |
| } |
| .text {/*text fields*/ |
| height: 26px; |
| text-indent: 5px; |
| width: 497px; |
| } |
| .textarea {/*textareas*/ |
| padding: 5px; |
| } |
| select {/*select fields*/ |
| background: #fff; |
| border: 0px; |
| } |
| .selector select { |
| font-size: 13px; |
| width: 100% !important; |
| } |
| .selector span { |
| font-size: 16px; |
| } |
| .checker {/*checkbox*/ |
| margin-right: 0px; |
| span { |
| background-position: -62px -41px; |
| } |
| span.checked { |
| background-position: -86px -41px; |
| } |
| } |
| div.uploader {/*file upload field*/ |
| height: 30px; |
| width: 440px; |
| |
| input { |
| height: 30px; |
| top: 0; |
| left: 0; |
| width: 100%; |
| } |
| span.action { |
| background: url(@image_form_submit_bg) 0 0 repeat; |
| color: #fff; |
| font-family: Arial,'Helvetica Neue',Helvetica,sans-serif; |
| font-size: 14px; |
| font-weight: bold; |
| margin: 2px 0 0 0; |
| padding: 2px 7px; |
| text-transform: none; |
| } |
| span.filename { |
| background: #fff; |
| border: 1px solid #d2d2d2; |
| border-right: 0px; |
| box-shadow: inset 2px 2px 10px #e6e6e6; |
| -moz-box-shadow: inset 2px 2px 10px #e6e6e6; |
| -webkit-box-shadow: inset 2px 2px 10px #e6e6e6; |
| font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; |
| font-size: 14px; |
| height: 26px; |
| padding: 0 5px 0 0; |
| text-indent: 5px; |
| width: auto; |
| } |
| } |
| } |
| .row.error {/*error on submission*/ |
| .error-message { |
| color: #ff0000; |
| display: block; |
| clear: both; |
| font-size: 12px; |
| font-weight: bold; |
| margin: 2px 0 0 7px; |
| } |
| .text, .textarea { |
| background: #fce6e6; |
| border: 1px solid #ff0000; |
| box-shadow: inset 2px 2px 10px #fccaca; |
| -moz-box-shadow: inset 2px 2px 10px #fccaca; |
| -webkit-box-shadow: inset 2px 2px 10px #fccaca; |
| } |
| } |
| } |
| } |
| fieldset .row.error .textarea { |
| background: #fce6e6; |
| border: 1px solid #ff0000; |
| box-shadow: inset 2px 2px 10px #fccaca; |
| -moz-box-shadow: inset 2px 2px 10px #fccaca; |
| -webkit-box-shadow: inset 2px 2px 10px #fccaca; |
| } |
| .row.button-row {/*submit btn row*/ |
| input { |
| #form.input-submit-mixin(40px, 40px); |
| } |
| } |
| |
| |
| /* Submit button */ |
| .form-user-proposal-assign-mentor { |
| clear: both; |
| |
| div.selector span { |
| width: 150px; |
| } |
| input.submit { |
| margin: 3px 0 0 3px; |
| } |
| } |
| /* Submit button */ |
| |
| /* Form submission success or failure flash messages */ |
| #flash-message { |
| /*save confirmation banner*/ |
| font-weight: bold; |
| left: 0; |
| margin-bottom: 10px; |
| padding: 10px 5px 8px 36px; |
| position: relative; |
| width: auto; |
| border-width: 2px; |
| border-style: solid; |
| |
| p { |
| margin-bottom: 0; |
| } |
| &.flash-error { |
| /*save confirmation banner notifies error*/ |
| background: url(@image_flash_error) no-repeat 10px 50% #CF3333; |
| color: #FFF; |
| border-color: #990000; |
| } |
| &.flash-success { |
| /*save confirmation banner notifies success*/ |
| background: url(@image_flash_success) no-repeat 10px 50% #C6F9C9; |
| color: #4F7F51; |
| border-color: #9BD39E; |
| } |
| } |
| /* Form submission success or failure flash messages */ |
| |
| #pre-form-header { |
| h2 {/*heading*/ |
| float: left; |
| font-size: 27px; |
| line-height: 1.3em; |
| margin: 10px 0 0 23px; |
| } |
| h3 {/*heading*/ |
| clear: both; |
| font-size: 21px; |
| margin-left: 23px; |
| } |
| .req {/*required text*/ |
| color: @orange; |
| display: block; |
| font-size: 10px; |
| font-style: italic; |
| font-weight: bold; |
| } |
| .description { |
| clear: both; |
| padding-top: 10px; |
| margin: 0 25px 0 25px; |
| text-align: justify; |
| } |
| } |