| @badgeRadius: 3px; |
| |
| .block { |
| /*Global block styles*/ |
| background: @color_light_blue; |
| position: relative; |
| |
| .cog { |
| background-position: 0 0; |
| background-repeat: no-repeat; |
| left: 0; |
| position: absolute; |
| top: 0; |
| } |
| |
| .block-title { |
| background: #0082c8; |
| .lh-border-top-left-radius(3px); |
| .lh-border-top-right-radius(3px); |
| color: #fff; |
| font-family: 'Oswald', sans-serif; |
| font-size: 16px; |
| line-height: 18px; |
| padding: 7px 0 7px 10px; |
| text-transform: uppercase; |
| |
| .controls { |
| float: right; |
| font-size: 12px; |
| |
| a { |
| background-color: #339ed8; |
| .lh-border-radius(@badgeRadius); |
| color: #ffffff; |
| margin: auto 6px; |
| padding: 0 6px; |
| |
| &:hover { |
| background-color: #47ace2; |
| } |
| } |
| } |
| } |
| |
| .block-content { |
| padding: 5px 15px 15px 25px; |
| |
| p { |
| margin: 0; |
| } |
| } |
| |
| .block-footer { |
| background: #0f649d; |
| color: #fff; |
| font-size: 13px; |
| font-weight: bold; |
| line-height: 14px; |
| padding: 4px 0 4px 25px; |
| |
| span { |
| display: inline-block; |
| |
| &.left-side { |
| text-align: left; |
| } |
| |
| &.right-side { |
| @media (min-width: @screen-md-min) { |
| text-align: right; |
| width: 50%; |
| } |
| } |
| } |
| |
| a { |
| background: url(@image_arrow_white_sm) right center no-repeat; |
| color: #fff; |
| padding: 5px 9px 5px 0; |
| display: inline-block; |
| @media (min-width: @screen-md-min) { |
| padding: 0 9px 0 0; |
| } |
| } |
| } |
| } |
| |
| .block-red { |
| background: @color_light_red; |
| |
| .block-title { |
| background: @color_red; |
| } |
| |
| .block-content { |
| color: #000000; |
| } |
| |
| .block-footer { |
| background: @color_dark_red; |
| } |
| } |
| |
| .block-comments { |
| background: @color_grey url(@image_block_comments_bg) 0 0 repeat-x; |
| padding: 15px 38px 20px; |
| |
| .block-comments-title { |
| color: #0082c8; |
| display: block; |
| font-family: 'Oswald', sans-serif; |
| font-size: 24px; |
| line-height: 30px; |
| margin-bottom: 5px; |
| text-transform: uppercase; |
| } |
| |
| .single-comment { |
| clear: both; |
| display: block; |
| padding: 10px 0 0 0; |
| |
| .single-comment-title { |
| display: block; |
| font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; |
| font-size: 17px; |
| font-weight: bold; |
| line-height: 19px; |
| } |
| |
| .single-comment-meta { |
| display: block; |
| font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; |
| font-size: 10px; |
| line-height: 20px; |
| |
| a { |
| font-weight: bold; |
| } |
| } |
| |
| .single-comment-reply { |
| margin-left: 20px; |
| } |
| } |
| |
| .single-comment .single-comment-reply, |
| .block-comments-post-new { |
| clear: both; |
| display: none; |
| padding-top: 10px; |
| width: 100%; |
| } |
| |
| .single-comment .single-comment-reply .single-comment-reply-title, |
| .block-comments-post-new .block-comments-post-new-title { |
| color: #0f649d; |
| display: block; |
| font-family: 'Oswald', sans-serif; |
| font-size: 16px; |
| text-transform: uppercase; |
| } |
| |
| .single-comment .single-comment-reply form .form-row, |
| .block-comments-post-new form .form-row { |
| margin-bottom: 0; |
| } |
| |
| .single-comment .single-comment-reply form .form-row .form-label, |
| .block-comments-post-new form .form-row .form-label { |
| font-size: 14px; |
| } |
| |
| .single-comment .single-comment-reply form .form-row input[type="text"], |
| .block-comments-post-new form .form-row input[type="text"] { |
| width: 100%; |
| } |
| |
| .single-comment .single-comment-reply form .form-row textarea, |
| .block-comments-post-new form .form-row textarea { |
| width: 100%; |
| } |
| |
| .task-btn-comment-new, |
| .task-btn-comment-reply { |
| background: #fff; |
| margin: 0; |
| padding-left: 10px; |
| } |
| } |
| |
| .single-comment-author { |
| font-size: 14px; |
| font-weight: bold; |
| line-height: 19px; |
| } |
| |
| .block-task-uploaded-code { |
| background: #52b8ef url(@image_block_task_uploaded_code_bg) 0 0 repeat-x; |
| color: #fff; |
| padding: 15px 18px 20px 38px; |
| |
| .block-task-uploaded-code-title { |
| display: block; |
| font-family: 'Oswald', sans-serif; |
| font-size: 24px; |
| line-height: 30px; |
| text-transform: uppercase; |
| } |
| |
| .block-task-uploaded-code-content { |
| padding: 10px 20px 0 0; |
| } |
| |
| .block-task-uploaded-code-status { |
| display: block; |
| font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; |
| font-size: 18px; |
| font-weight: bold; |
| margin-bottom: 10px; |
| } |
| |
| .block-task-uploaded-code-note { |
| color: #000; |
| display: block; |
| font-size: 13px; |
| margin-bottom: 10px; |
| } |
| |
| table { |
| width: 100%; |
| |
| th { |
| background: #87ceff; |
| color: #000; |
| font-weight: normal; |
| text-align: left; |
| } |
| |
| td { |
| background: #fff; |
| color: #333; |
| font-weight: bold; |
| |
| a { |
| color: #188dd0; |
| |
| &.task-btn { |
| background-color: #d0e8f9; |
| margin: 0; |
| } |
| } |
| } |
| |
| th, |
| td { |
| padding: 2px 0 2px 7px; |
| } |
| |
| tr.even td { |
| background: #eee; |
| } |
| } |
| |
| .block-task-uploaded-code-btns { |
| margin-bottom: 20px; |
| margin-top: 5px; |
| text-align: center; |
| |
| .btn { |
| display: inline-block; |
| float: none; |
| } |
| } |
| |
| form { |
| &.form-upload-code { |
| margin-bottom: 20px; |
| |
| .form-row input[type="file"] { |
| color: #666; |
| } |
| } |
| |
| &.form-student-upload-code { |
| position: relative; |
| |
| .form-row { |
| float: left; |
| width: 240px; |
| |
| input[type="text"] { |
| color: #666; |
| width: 238px; |
| } |
| } |
| |
| .form-row-student-work-url { |
| clear: left; |
| } |
| |
| .form-row-buttons { |
| float: none; |
| margin: 0; |
| position: absolute; |
| right: 245px; |
| top: 15px; |
| width: auto; |
| } |
| } |
| |
| &.form-student-upload-code .form-row input[type="text"]:hover, |
| &.form-student-upload-code .form-row input[type="text"]:active, |
| &.form-student-upload-code .form-row input[type="text"]:focus, |
| &.form-upload-code .form-row input[type="file"]:hover, |
| &.form-upload-code .form-row input[type="file"]:active, |
| &.form-upload-code .form-row input[type="file"]:focus { |
| color: #000; |
| } |
| } |
| } |
| |
| /* for instructions */ |
| .gold-block { |
| margin: 2em 0; |
| |
| .block-title { |
| background-color: @color_gold; |
| } |
| |
| .block-content { |
| background-color: @color_light_gold; |
| padding: 2em 4em; |
| } |
| } |
| |
| /* for examples */ |
| .green-block { |
| margin: 2em 0; |
| |
| .block-title { |
| background-color: @color_green; |
| } |
| |
| .block-content { |
| background-color: @color_light_green; |
| padding: 2em 4em; |
| |
| .example-box { |
| background-color: @color_grey; |
| margin: 1em; |
| overflow: auto; |
| padding: 1em; |
| white-space: pre; |
| } |
| } |
| } |
| |
| /* BEGIN Stopwatch and countdown*/ |
| .stopwatch { |
| .stopwatch-watch { |
| background:url(@image_block_timeline_watch) 0 0 no-repeat; |
| float: left; |
| height: 85px; |
| margin-left: -15px; |
| position: relative; |
| width: 79px; |
| } |
| |
| .stopwatch-remaining { |
| float: right; |
| font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; |
| font-weight: bold; |
| margin: 10px 0 10px 0; |
| text-align: center; |
| text-transform: uppercase; |
| |
| .stopwatch-time { |
| color: #c53926; |
| float: left; |
| overflow: hidden; |
| position: relative; |
| width: 100%; |
| |
| .stopwatch-time-c { |
| clear: left; |
| float: left; |
| left: 50%; |
| margin: 0; |
| padding: 0; |
| position: relative; |
| text-align: center; |
| } |
| } |
| |
| .time { |
| display: block; |
| float: left; |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| position: relative; |
| right: 50%; |
| |
| &.time-first { |
| margin-right: 10px; |
| } |
| |
| .number { |
| font-size: 30px; |
| line-height: 30px; |
| } |
| |
| .cap { |
| font-size: 10px; |
| line-height: 10px; |
| text-transform: uppercase; |
| } |
| } |
| |
| .time .number, |
| .time .cap, |
| .remain, |
| .timestamp { |
| display: block; |
| } |
| |
| .remain { |
| color: #0f649d; |
| clear: both; |
| font-size: 16px; |
| padding-top: 4px; |
| } |
| |
| .timestamp { |
| color: #717171; |
| font-size: 11px; |
| line-height: 12px; |
| } |
| } |
| } |
| |
| .stopwatch-svgcanvas { |
| background-image:url(@image_block_timeline_watch_back); |
| display: none; |
| float: left; |
| height: 91px; |
| margin-left: -15px; |
| position: relative; |
| width: 91px; |
| } |
| |
| .stopwatch-front { |
| background-image:url(@image_block_timeline_watch_front); |
| display: none; |
| } |
| |
| .stopwatch-dial { |
| background-image:url(@image_block_timeline_watch_dial); |
| display: none; |
| } |
| |
| .stopwatch.percent-25 .stopwatch-watch { |
| background-image:url(@image_block_timeline_watch_percent_25); |
| } |
| |
| .stopwatch.percent-33 .stopwatch-watch { |
| background-image:url(@image_block_timeline_watch_percent_33); |
| } |
| |
| .stopwatch.percent-50 .stopwatch-watch { |
| background-image:url(@image_block_timeline_watch_percent_50); |
| } |
| |
| .stopwatch.percent-75 .stopwatch-watch { |
| background-image:url(@image_block_timeline_watch_percent_75); |
| } |
| /* END Stopwatch and countdown*/ |
| |
| /* BEGIN block-leaderboard-link block */ |
| .block-leaderboard-link { |
| border-bottom: 1px solid #89A4B7; |
| min-height: 91px; |
| |
| .block-content { |
| color: #0F649D; |
| font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; |
| font-size: 15px; |
| font-weight: bold; |
| line-height: 1.2em; |
| margin-right: 115px; |
| padding: 10px 0 0 15px; |
| position: relative; |
| z-index: 200; |
| } |
| } |
| |
| .leaderboard-link-image { |
| position: absolute; |
| right: 0; |
| top: 0; |
| z-index: 100; |
| } |
| /* END block-leaderboard-link block */ |
| |
| /* BEGIN accepted organizations block */ |
| .block-accepted-organizations { |
| background: @color_grey url(@image_block_form_bg) 0 0 repeat-x; |
| border: 1px solid #B4B4B4; |
| padding: 13px 20px; |
| |
| .block-pager { |
| margin-top: 30px; |
| font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; |
| font-size: 16px; |
| font-weight: bold; |
| } |
| } |
| |
| .block-accepted-organizations-title { |
| color: #C53926; |
| font-family: 'Oswald', sans-serif; |
| font-size: 38px; |
| line-height: 40px; |
| text-transform: uppercase; |
| } |
| |
| .block-accepted-organizations-subtitle { |
| font-weight: bold; |
| font-size: 14px; |
| margin-top: 10px; |
| } |
| |
| .accepted-organizations-grid { |
| margin: 0 -21px; |
| } |
| |
| .accepted-organizations-grid-row { |
| margin-top: 30px; |
| overflow: hidden; |
| padding: 0 10px; |
| width: 100%; |
| } |
| |
| .single-accepted-organizations { |
| display: inline-block; |
| padding: 0 5px; |
| text-align: center; |
| vertical-align: top; |
| width: 123px; |
| } |
| |
| .single-accepted-organizations-logo img { |
| height: 64px; |
| max-width: 64px; |
| } |
| |
| .single-accepted-organizations-title { |
| font-size: 14px; |
| font-weight: bold; |
| margin-top: 4px; |
| } |
| /* END accepted organizations block */ |
| |
| /*Difficulties*/ |
| .block-featured-task { |
| .cog { |
| /*Featured task, homepage block*/ |
| background-image: url(@image_block_cog_featured); |
| height: 77px; |
| width: 73px; |
| } |
| |
| &.level-easy .cog { |
| background-position: 0 0; |
| } |
| |
| &.level-medium .cog { |
| background-position: 0 -77px; |
| } |
| |
| &.level-hard .cog { |
| background-position: 0 -155px; |
| } |
| } |
| |
| .block-student-featured-task { |
| .cog { |
| /*Featured task, student dashboard block*/ |
| background-image: url(@image_block_cog_featured_student); |
| height: 79px; |
| width: 78px; |
| } |
| |
| &.level-easy .cog { |
| background-position: 0 0; |
| } |
| |
| &.level-medium .cog { |
| background-position: 0 -79px; |
| } |
| |
| &.level-hard .cog { |
| background-position: 0 -158px; |
| } |
| } |
| |
| .block-status { |
| .cog { |
| /*Sidebar current task block*/ |
| background-image: url(@image_block_cog_current_task); |
| height: 62px; |
| width: 62px; |
| } |
| |
| &.level-easy .cog { |
| background-position: 0 0; |
| } |
| |
| &.level-medium .cog { |
| background-position: 0 -62px; |
| } |
| |
| &.level-hard .cog { |
| background-position: 0 -124px; |
| } |
| } |
| |
| .task-single { |
| .cog { |
| /*Mentor dashboard tasks*/ |
| background-position: left center; |
| background-repeat: no-repeat; |
| float: left; |
| height: 72px; |
| margin-right: 10px; |
| position: static; |
| width: 70px; |
| } |
| |
| &.level-hard .cog { |
| background-image: url(@image_dashboard_task_cog_hard); |
| } |
| |
| &.level-medium .cog { |
| background-image: url(@image_dashboard_task_cog_medium); |
| } |
| |
| &.level-easy .cog { |
| background-image: url(@image_dashboard_task_cog_easy); |
| } |
| } |
| |
| .block-completed-tasks { |
| .task-single { |
| /*Student completed tasks*/ |
| &.level-hard .cog { |
| background-image: url(@image_dashboard_task_cog_hard_complete); |
| } |
| |
| &.level-medium .cog { |
| background-image: url(@image_dashboard_task_cog_medium_complete); |
| } |
| |
| &.level-easy .cog { |
| background-image: url(@image_dashboard_task_cog_easy_complete); |
| } |
| } |
| } |
| |
| .block-pager { |
| /*Generic pager*/ |
| padding: 5px 0; |
| |
| ul { |
| margin-bottom: 0; |
| |
| li { |
| color: #000; |
| margin: 0 5px; |
| } |
| } |
| } |
| |
| .user-ranking { |
| /*User ranking*/ |
| font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif; |
| font-weight: bold; |
| } |
| |
| .user-ranking-item { |
| float: left; |
| text-align: center; |
| |
| &:first-child { |
| margin-right: 30px; |
| } |
| |
| .cap, |
| .number, |
| .count { |
| display: block; |
| } |
| |
| .number, |
| .count { |
| color: #c53926; |
| text-transform: uppercase; |
| } |
| |
| .number { |
| font-size: 25px; |
| line-height: 26px; |
| } |
| |
| .count { |
| font-size: 11px; |
| line-height: 15px; |
| } |
| } |
| |
| .block-page { |
| /*General page*/ |
| background: @color_grey url(@image_block_form_bg) 0 0 repeat-x; |
| border: 1px solid #b4b4b4; |
| padding: 13px 20px; |
| } |
| |
| .block-page-section { |
| background: #ffffff; |
| .lh-border-radius(@badgeRadius); |
| padding: 13px 20px; |
| } |
| |
| .block-form-title { |
| margin-bottom: 15px; |
| |
| .title { |
| color: #c53926; |
| font-family: 'Oswald', sans-serif; |
| font-size: 38px; |
| line-height: 40px; |
| text-transform: uppercase; |
| } |
| } |
| |
| .block-delete-account { |
| /*Delete account*/ |
| .block-content { |
| color: #9c0000; |
| font-size: 17px; |
| padding: 5px 0 15px 0; |
| |
| .delete-btn-p { |
| text-align: center; |
| } |
| |
| input.delete-btn { |
| background: #c32d00; |
| color: #fff; |
| display: inline; |
| float: none; |
| font-size: 15px; |
| margin: 0 auto; |
| padding: 10px 18px; |
| text-align: center; |
| } |
| } |
| } |
| |
| .block-filter { |
| background: #59bbff; |
| padding: 8px; |
| |
| .block-filter-option { |
| float: left; |
| margin: 0 17px 0 0; |
| } |
| |
| .block-filter-option-search .form-row input[type="text"] { |
| color: #666; |
| height: 26px; |
| line-height: 26px; |
| margin-top: 1px; |
| width: 150px; |
| } |
| } |
| |
| .block-filter-sort { |
| background: #d3d3d3; |
| font-size: 12px; |
| line-height: 1em; |
| padding: 8px 8px 8px 13px; |
| text-transform: uppercase; |
| |
| a.block-filter-sort-link { |
| background: url(@image_arrow_blue_sm) right center no-repeat; |
| color: #0f649d; |
| font-weight: bold; |
| padding-right: 13px; |
| } |
| } |
| |
| .block-connection-message { |
| background: @color_grey; |
| .lh-border-radius(@badgeRadius); |
| padding: 5px; |
| |
| .block-connection-message-header { |
| padding-bottom: 6px; |
| |
| .author { |
| color: @color_dark_blue_font; |
| float: left; |
| font-size: 18px; |
| font-weight: bold; |
| } |
| |
| .datetime { |
| color: #625d5d; |
| float:right; |
| } |
| } |
| } |