blob: 678711621a642a75cbcca1c08f2b70389e4f99c0 [file] [log] [blame]
@import "common.less";
// 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;
clear: left;
margin: 0 23px 16px 23px;
padding: 30px 0 11px 0;
.row {
/*every row*/
margin: 0 0 6px 11px;
width: 497px;
&.given_name {
float: left;
width: 215px;
.text {
width: 215px;
}
}
&.surname {
float: left;
width: 276px;
.text {
width: 276px;
}
}
&.email {
clear: both;
float: left;
width: 310px;
.text {
width: 310px;
}
}
&.phone {
float: left;
width: 180px;
.text {
width: 180px;
}
}
&.bday {
clear: both;
float: left;
width: 121px;
.text {
width: 121px;
}
}
&.address2 {
float: left;
width: 313px;
.text {
width: 313px;
}
}
&.city {
float: left;
width: 175px;
.text {
width: 175px;
}
}
&.stateprovince {
clear: both;
float: left;
width: 175px;
.text {
width: 175px;
}
}
&.zip {
float: left;
width: 138px;
label {
padding: 0;
}
.text {
width: 138px;
}
}
&.country {
clear: both;
padding-top: 5px;
width: 100%;
.selector {
select {
width: 100%;
}
span {
padding-right: 40px;
width: auto; /* desired width (w/ borders) - 33px = value */
}
}
}
&.schoolname {
float: left;
width: 100%;
.selector {
select {
width: 100%;
}
span {
padding-right: 40px;
width: auto; /* desired width (w/ borders) - 33px = value */
}
}
}
&.gradyear {
clear: left;
float: left;
width: 175px;
.selector {
span {
width: 127px;
}
}
}
&.schoollocation {
float: left;
width: 175px;
.selector {
span {
width: 127px;
}
}
}
&.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;
}
}
}
div.back-links {
clear: left;
font-size: 12px;
font-weight: bold;
margin: 0 0 0 23px;
padding: 0 0 10px 5px;
}
.row {
&.button-row {
padding: 0 0 28px 28px;
}
&.radio {
margin: 0 0 6px 15px;
label {
color: #666;
font-size: 15px;
div.radio-content {
display: table-cell;
}
}
}
&.checkbox {
margin: 0 0 6px 15px;
label {
color: #666;
font-size: 15px;
div.checkbox-content {
display: table-cell;
}
}
}
&.other {
margin: 0 0 6px 51px;
width: 400px;
input {
width: 400px;
}
}
}
}
#form {
&.form-search {
/*search form*/
background: #e0edf5;
margin: 0 0 13px 0;
padding: 5px 15px 10px 15px;
h2 {
/*heading*/
font-size: 22px;
font-weight: normal;
margin: 0;
}
.row {
/*every row*/
margin: 0 10px 0 0;
&.search-field {
/*search text field*/
float: left;
width: 300px;
.text {
margin-top: 1px;
width: 300px;
}
}
&.search-filter {
/*filter select field*/
float: left;
width: 138px;
.selector {
span {
font-size: 14px;
width: 105px; /* desired width (w/ borders) - 33px = value */
}
}
}
&.button-row {
/*submit btn*/
float: left;
width: 77px;
input {
height: 26px;
line-height: 26px;
margin-top: 2px;
padding: 0;
width: 77px;
}
}
}
}
&.form-project-comment {
/* Proposal form comments */
/*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;
}
}
&.form-project-comment-reply {
/* Proposal form comment replies */
/*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 {
padding: 5px 0 0 5px;
text-align: right;
input {
height: 30px;
line-height: 30px;
}
}
}
}
&.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;
}
&.gsoc_proposal_abstract {
.textarea {
height: 200px;
width: 430px;
}
}
&.gsoc_proposal_content {
.textarea {
height: 500px;
width: 430px;
}
}
&.project-sponsor {
width: 320px;
.text {
width: 320px;
}
}
&.project-os {
float: left;
width: 191px;
.text {
width: 191px;
}
}
&.project-lang {
float: right;
width: 191px;
.text {
width: 191px;
}
}
&.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;
left: 10px;
position: absolute;
text-transform: uppercase;
top: -22px;
}
}
.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*/
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;
color: #000;
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;
}
span {
font-size: 16px;
}
}
.checker {
/*checkbox*/
margin-right: 0px;
span {
background-position: -62px -41px;
&.checked {
background-position: -86px -41px;
}
}
}
div.uploader {
/*file upload field*/
height: 30px;
width: 440px;
input {
height: 30px;
left: 0;
top: 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;
}
&.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 {
clear: both;
color: #ff0000;
display: block;
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);
}
}
.form-user-proposal-assign-mentor {
/* Submit button */
clear: both;
div.selector span {
width: 150px;
}
input.submit {
margin: 3px 0 0 3px;
}
}
#flash-message {
/* Form submission success or failure flash messages */
/*save confirmation banner*/
border-style: solid;
border-width: 2px;
font-weight: bold;
left: 0;
margin-bottom: 10px;
padding: 10px 5px 8px 36px;
position: relative;
width: auto;
p {
margin-bottom: 0;
}
&.flash-error {
/*save confirmation banner notifies error*/
background: url(@image_flash_error) no-repeat 10px 50% #CF3333;
border-color: #990000;
color: #FFF;
}
&.flash-success {
/*save confirmation banner notifies success*/
background: url(@image_flash_success) no-repeat 10px 50% #C6F9C9;
border-color: #9BD39E;
color: #4F7F51;
}
}
#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;
margin: 0 25px 0 25px;
padding-top: 10px;
text-align: justify;
}
}