blob: 6b66cc8e9269f950718c2963925b9bc75ecc7351 [file] [log] [blame]
@import "common.less";
// 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: #eeab4c;
@darkorange: #d5620e;
@lightblue: #238bd2;
@lightbluebg: #6eb5e5;
@lightgrey: #eeeeee;
@green: #d5f6d5;
@grey: #f6f6f6;
@fireenginered: #ce2029;
.imagereplace {
display: block;
font-size: 0;
line-height: 0;
text-indent: -9999em;
}
/*////////////////
Structure
////////////////*/
#page-header {
@logged-in-padding-left: 10px;
/*logo and globe*/
background: #fff url(@image_header_bg) bottom left repeat-x;
width: 100%;
.top {
padding-bottom: 5px;
padding-top: 5px;
a {
color: @lightblue;
font-size:12px;
font-weight:normal;
text-decoration:none;
}
span {
color: @lightblue;
font-size: 12px;
font-weight: normal;
}
}
#logged-in {
padding-left: @logged-in-padding-left;
}
#gci {
padding-right: 20px;
text-align: right;
}
.logotype__link {
display: inline-block;
width: 100%;
}
.logotype__img {
width: 100%;
@media screen and (max-width: @screen-xs-max) {
vertical-align: bottom;
height: auto;
}
}
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*/
.page-content {
margin-left: 0;
background: white;
overflow: hidden;
padding: 12px;
}
.block {
/*every block*/
background: #fff;
margin-bottom: 20px;
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
h4 {
/*block title*/
background: @lightbluebg;
color: #fff;
font-size: 15px;
line-height: 30px;
margin: 0;
padding: 0 0 0 7px;
text-transform: uppercase;
}
&.block-red {
h4 {
background: @fireenginered;
}
}
.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: @darkorange;
text-decoration: none;
}
}
.org-home-readmore {
.readmore;
font-size: 13px;
padding: 3px 10px 3px 9px;
text-align: right;
}
div.block-title {
/*block title*/
background: #6eb5e5;
color: #fff;
font-size: 15px;
font-weight: bold;
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 repeat;
float: left;
list-style-type: none;
margin: 0 15px 0 0;
width: 100%;
@media (min-width: @screen-sm-min) {
width: 429px;
height: 218px;
}
li {
background-position: 13px center;
background-repeat: no-repeat;
color: @lightblue;
height: 90px;
font-size: 23px;
font-weight: bold;
padding: 0 0 0 136px;
@media (min-width: @screen-sm-min) {
height: 72px;
}
strong {
display: block;
padding: 17px 10px 0 0;
}
span {
font-size: 13px;
}
}
li {
&.first {
background-image: url(@image_home_block_1_list_1);
}
&.second {
background-image: url(@image_home_block_1_list_2);
strong {
padding-top: 22px;
}
}
&.third {
background-image:url(@image_home_block_1_list_3);
}
}
}
.description p {
color: @darkorange;
font-size: 14px;
font-weight: bold;
margin: 10px 0 0 0;
padding-right: 10px;
}
}
.block-students {
/*students apply now block*/
background: url(@image_home_block_students) 0 0 repeat;
color: #004371;
padding-bottom: 5px;
text-align: center;
h3 {
*background: url(@image_home_block_students) 0 0 repeat;
font-size: 25px;
font-weight: bold;
line-height: 1.9em;
margin: 0;
}
hr {
margin: 10px 5px;
}
p {
font-size: 14px;
font-weight: bold;
line-height: 1.5em;
margin: 0;
a {
color: #004371;
text-decoration: none;
}
&.action {
font-size: 20px;
margin-bottom: 5px;
a {
background: #e57e30;
color: #fff;
padding: 3px 7px;
}
span {
padding: 0 8px;
}
}
&.description {
font-size: 15px;
margin-bottom: 5px;
}
&.small {
color: #000;
font-size: 11px;
font-weight: normal;
margin-bottom: 5px;
}
}
}
.block-proposal-widget {
position: relative;
.right-button {
background-color: darken(@lightbluebg, 15%);
color: #ffffff;
font-size: 12px;
margin: 5px;
padding: 0 5px;
position: absolute;
right: 0px;
text-decoration: none;
top: 0px;
&:not(.disabled):hover {
background-color: darken(@lightbluebg, 10%);
}
&.disabled {
cursor: not-allowed;
background: darken(@lightgrey, 7%);
color: darken(@lightbluebg, 15%);
}
}
ul.proposal-widget-list {
list-style: none;
margin: 0;
li {
background-color: @grey;
margin-bottom: 10px;
white-space: nowrap;
&:last-child {
margin-bottom: 0;
}
&.withdrawn {
.content {
h1 a {
color: darken(@grey, 30%);
}
.tag {
@color: darken(@grey, 5%);
background-color: @color;
color: darken(@color, 40%);
}
}
}
.logo {
@size: 40px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
height: @size;
margin: 10px 5px;
vertical-align: top;
width: @size;
}
.content {
display: inline-block;
padding: 0;
h1 {
font-size: 15px;
font-weight: bold;
margin: 0;
padding: 7px;
padding-bottom: 0;
a {
color: @lightblue;
text-decoration: none;
}
}
.tag {
border-radius: 5px;
display: inline-block;
float: left;
margin: 5px;
margin-right: 0;
padding: 0 5px;
@color: darken(@grey, 10%);
background-color: @color;
color: darken(@color, 60%);
&.status.accepted {
@color: darken(@green, 10%);
background-color: @color;
color: darken(@color, 60%);
}
&.num-unread-comments {
@color: lighten(@lightbluebg, 15%);
background-color: @color;
color: darken(@color, 50%);
}
}
}
}
}
}
.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;
max-height: 64px;
max-width: 64px;
vertical-align: middle;
}
}
.block-mentors {
/*mentors apply now block*/
background: url(@image_home_block_students) 0 0 repeat;
color: #004371;
text-align: center;
padding-bottom: 15px;
h3 {
*background: url(@image_home_block_students) 0 0 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;
}
}
&.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 repeat;
color: #004371;
text-align: center;
padding-bottom: 15px;
h3 {
*background: url(@image_home_block_students) 0 0 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;
}
}
&.small {
color: #000;
font-size: 11px;
font-weight: normal;
margin-bottom: 5px;
}
}
}
.block-project-timeline {
.block-content {
padding: 0;
.block-program-timeline-new {
color: #2d88b8;
text-align: center;
.timeline-head {
height: 48px;
.title {
font-size: 14px;
font-weight: bold;
padding: 5px 0 0 0;
white-space: nowrap;
}
.timerange {
font-size: 12.04px;
text-transform: uppercase;
font-weight: bold;
padding: 1px 0 0;
}
}
.timeline-body {
height: 150px;
width: 187px;
margin: 0 auto;
}
}
.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;
&:link {
color: white;
text-decoration: none;
}
}
}
.action-button {
font-size: 21px;
font-weight: normal;
line-height: 1.3em;
margin: 0 0 1em 0;
.text {
clear: left;
color: #238BD2;
float: left;
margin-right: 10px;
padding-right: 10px;
text-align: right;
width: 250px;
}
.button-mixin (@button-background: url(@image_form_submit_bg) repeat scroll 0 0 transparent, @button-color: white) {
background: @button-background;
color: @button-color;
padding: 3px;
text-decoration: none;
text-align: center;
width: 90px;
}
.button {
.button-mixin;
cursor: pointer;
&.disabled {
.button-mixin(url(@image_form_submit_bg_blue) repeat scroll 0 0 transparent, @grey);
cursor: default;
}
}
}
#organization-name {
padding-left: 10px;
h2 {
line-height: 1em;
padding-top: 10px;
}
}
.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 {
border-left: 2px solid #CCCCCC;
font-style: normal;
margin-bottom: 10px;
margin-left: 2em;
padding-left: 1em;
}
blockquote {
margin-bottom: 10px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000;
margin-bottom: 10px;
margin-top: 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 {
background: @darkorange;
color: #fff;
font-size: 13px;
font-weight: bold;
padding: 3px 7px;
text-decoration: none;
}
}
/*////////////////
Footer
////////////////*/
#footer {
/*footer container*/
font-size: 14px;
font-weight: bold;
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;
}
.footer-melange {
font-size: 10px;
a {
color: @fireenginered;
}
}
}
.footer-menu {
/*menu in footer*/
margin-bottom: 12px;
overflow: hidden;
position: relative;
width: 100%;
ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
text-align: center;
li {
display: inline-block;
position: relative;
a {
display: block;
text-decoration: none;
padding: 5px;
}
&.last {
padding-right: 0;
}
}
}
.social {
/*social network links in footer*/
a {
background-image: url(@image_social_icons);
background-position: 0 -34px;
background-repeat: no-repeat;
width: 32px;
height: 32px;
padding: 10px;
.text-hide;
}
.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;
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-others {
clear: left;
}
.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;
padding: 20px 23px;
.project-comment-box {
background: #cde5f5;
display: block;
margin: 0 auto 16px auto;
overflow: hidden;
padding: 0;
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;
}
}
.project-comment-content {
margin: 0;
white-space: pre-wrap;
}
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 {
clear: both;
display: block;
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;
}
#sort {
margin-bottom: 7px;
text-align: right;
vertical-align: bottom;
.selector {
/* make this class explicitly blank*/
}
select {
min-width: 0;
}
span {
text-align: left;
width: 85px;
}
}
/*////////////////
Tabs
////////////////*/
#tabs {
background-color: #fff;
border-bottom: 2px solid @darkorange;
padding: 13px 20px 0;
ul.tabs-list {
list-style: none;
margin: 0;
padding: 0;
}
li {
&.tabs-item {
display: block;
width: 100%;
font-size: 15px;
font-weight: bold;
a {
display: block;
padding: 4px 8px;
text-align: center;
text-decoration: none;
&:hover {
background: #e67a25;
}
}
@media(min-width: @screen-md-min) {
display: inline-block;
width: auto;
a {
display: inline-block;
}
}
}
&.selected a {
color: #fff;
background-color: @orange;
}
}
}
/*////////////////
Manage connections
////////////////*/
.connection-summary {
.row {
/*styling for each property in the model*/
padding-bottom: 10px;
padding-top: 10px;
label {
/*verbose name of each model property*/
color: @darkorange;
font-weight: bold;
text-align: right;
}
span.readonly-row-content {
/*actual value stored in the property*/
padding: 0;
}
}
}
/*////////////////
Slot allocation details
////////////////*/
.slot-transfer-title {
color: @lightblue;
font-size: 20px;
font-weight: bold;
margin: 0 0 10px 16px;
padding: 0 5px 0 0
}
/*////////////////
Actions required
////////////////*/
.action-required-block-content {
max-height: 300px;
overflow: scroll;
}
.action-required-item {
color: #000000;
background-color: rgba(206, 32, 41, 0.1);
display: inline-block;
padding: 9px 15px;
& + .action-required-item {
border-top: 1px solid rgba(206, 32, 41, 0.3);
}
.action-required-item-title {
display: block;
font-weight: bold;
margin-bottom: 10px;
}
.action-required-item-details {
display: block;
}
.action-required-item-deadline {
float: right;
}
.action-required-item-link,
.action-required-item-deadline {
font-size: 10px;
text-decoration: none;
text-transform: uppercase;
}
}
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
#list-how-it-works {
padding-left: 0;
}