woodpecker/server/app/styles/drone.less
2014-07-12 19:01:58 -07:00

1381 lines
No EOL
22 KiB
Text

@import "reset.less";
@import "base.less";
// Standard Colors
@link: #68c598;
@link2: #4ab1ce;
@cneg: #e97041;
@cok: #68c598;
@c0: #262626;
@c1: #45494b;
@c2: #849299;
// Standard Fonts
@logo: 'Orbitron';
@sans: 'Open Sans';
@mono: 'Droid Sans Mono';
html {
height: 100%;
}
body {
font-family: @sans;
font-weight: normal;
margin:0px;
color: @c0;
background: #fff;
font-size: 13px;
line-height: 1.3;
-webkit-font-smoothing: antialiased;
height: 100%;
position: relative;
}
// The ngCloak directive is used to prevent the Angular html template
// from being briefly displayed by the browser in its raw (uncompiled)
// form while the application is loading.
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none;
}
#container {
.border_box;
padding-top: 55px;
position: relative;
min-width: 100%;
min-height: 100%;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
#header {
background: @c0;
position: fixed;
height: 55px;
top: 0;
left: 0;
right: 0;
z-index: 9;
color: #fff;
font-size: 15px;
line-height: 55px;
text-align: center;
.brand {
display: inline-block;
font-family: @logo;
font-size: 26px;
line-height: 55px;
text-decoration: none;
text-transform: uppercase;
color: #CCC;
}
.burger {
position: absolute;
top:0px;
left: 31px;
height:55px;
font-size: 22px;
color: #CCC;
i.fa {
line-height:55px;
}
}
.login,
.user {
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
white-space: nowrap;
margin-right: 20px;
display: inline-block;
a {
color: #CCC;
text-decoration: none;
text-transform: uppercase;
line-height: 55px;
font-size: 15px;
img {
border-radius: 50%;
float: right;
width: 32px;
height: 32px;
margin-top: 10px;
margin-left: 20px;
}
}
}
}
#body {
.border_box;
display: flex;
min-width:100%;
flex-direction: row-reverse;
justify-content: space-between;
article {
width:100%;
}
}
#drawer {
visibility: hidden;
position:fixed;
z-index:10;
left:0px;
top:55px;
bottom:0px;
width:255px;
background:#363636;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(-100%, 0, 0);
ul {
margin-top:20px;
a {
color:#CCC;
text-decoration:none;
padding:10px 0px 10px 30px;
display:block;
font-size:14px;
i {
margin-right:10px;
font-size:16px;
opacity:0.3;
min-width:16px;
display:inline-block;
}
}
span.divider {
display:block;
height:1px;
border-top:1px solid rgba(255,255,255,0.1);
margin-top:15px;
margin-bottom:15px;
}
}
.signout {
position:absolute;
bottom:20px;
right:30px;
color:#CCC;
font-size:16px;
text-transform:uppercase;
text-decoration:none;
i {
margin-left:20px;
}
}
}
#drawer-checkbox {
position:fixed;
top:7px;
left:10px;
width:45px;
height:40px;
display:block;
z-index:9999;
opacity:0;
background:none;
border:none;
cursor:pointer;
&:checked ~ #drawer {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
&:checked ~ #drawer {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
// override the drawers icon to show
// a close symbol, so the user knows
// exactly how to minimize.
&:checked ~ #header {
.fa-bars:before {
content: "\f00d";
color:#999;
}
}
}
nav {
padding-left:30px;
background:#FFF;
min-height: 77px;
max-height: 77px;
line-height: 77px;
font-family: @sans;
font-size: 22px;
white-space: nowrap;
color: rgba(0, 0, 0, 0.7);
border-bottom:1px solid #EEE;
position:relative;
z-index:2;
a {
text-decoration:none;
color: rgba(0, 0, 0, 0.7);
&:last-child {
color: #000;
}
span.fa {
margin-right:20px;
}
}
div.options {
float: right;
margin-right: 20px;
.pure-button {
color: #FFF;
text-transform: lowercase;
font-size: 14px;
background: #f2f5f8;
padding: 10px 30px;
color: rgba(0,0,0,0.5);
i {
margin-right: 10px;
margin-left: -10px;
}
}
}
}
@supports (position:sticky) {
nav {
position: sticky;
top:55px;
}
}
@supports (position:-moz-sticky) {
nav {
position: -moz-sticky;
top:55px;
}
}
@supports (position:-webkit-sticky) {
nav {
position: -webkit-sticky;
top:55px;
}
}
.cards {
//padding:20px 0px 20px 20px;
.card {
.border_box;
padding-right:20px;
padding-bottom:20px;
text-decoration:none;
position:relative;
color:@c0;
font-family:@sans;
&[data-status="Success"] {
em {
border-top:5px solid @cok;
}
}
&[data-status="Killed"],
&[data-status="Failure"],
&[data-status="Error"] {
em {
border-top:5px solid @cneg;
}
.l-box {
border: 1px solid @cneg;
&:hover {
border:1px solid @c0;
}
}
&:after {
font-family:'FontAwesome';
font-size:16px;
position:absolute;
right:12px;
top:-8px;
content:"\f111";
color: @cneg;
min-width:16px;
text-align:center;
}
}
.l-box {
background:#FFF;
border:1px solid #DDD;
position:relative;
padding:30px 20px;
height:200px;
.transition(.4s border linear);
.border_box;
//box-shadow: inset 0 0 0 1px #dfdfdf,
// inset 0 0 0 2px #fff,
// 2px 2px 0 transparent;
&:hover {
border:1px solid @c0;
}
em {
position:absolute;
bottom:20px;
right:20px;
left:20px;
height:30px;
line-height:30px;
vertical-align:middle;
//text-transform:uppercase;
text-align:right;
padding-right:45px;
//border-top:1px solid #DDD;
padding-top:20px;
font-size:14px;
color:#666;
}
img {
position:absolute;
right:20px;
bottom:20px;
border-radius:50%;
width:30px;
height:30px;
}
.timeago {
position:absolute;
bottom:85px;
left:25px;
right:25px;
text-align:right;
font-size:14px;
color: #849299;
display:none;
}
}
h2 {
font-size:18px;
font-weight:normal;
min-height:52px;
max-height:52px;
height:52px;
text-align:center;
vertical-align:middle;
line-height:26px;
color:@c0;
.separator {
margin:0px 0px;
}
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}
&.card-inactive {
.l-box {
position:relative;
box-shadow: none;
background: @link2;
color:#FFF;
height:180px;
border-color:@link2;
&:hover {
background: darken(@link2,10%);
&:before { background:darken(@link2,10%); }
}
}
h2 {
padding-top:10px;
color:#FFF;
}
em {
position:absolute;
border-top:1px solid rgba(255,255,255,.5);
bottom: 15px;
font-size: 13px;
left: 25px;
right: 25px;
line-height:1.3;
padding:0px;
padding-top:20px;
text-align:center;
display:block;
height:30px;
text-transform:uppercase;
color:#FFF;
}
}
&.card-browse-inactive,
&.card-browse {
text-align:center;
color: @link2;
font-size:16px;
font-weight:bold;
text-transform:uppercase;
.l-box {
padding-top:75px;
background:#FFF;
height:180px;
}
}
&.card-browse-inactive {
.l-box {
box-shadow:none;
}
}
}
.progressContainer {
height:5px;
background-color: @cneg;
position: absolute;
bottom:65px;
left:20px;
right:20px;
.activeProgress, .secondaryProgress {
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
.activeProgress {
background-color: @cok;
}
.secondaryProgress {
background-color: @cok;
}
}
}
#commitpage {
max-width:1180px;
margin:0px auto;
margin-bottom:50px;
margin-top:70px;
section {
margin-top:30px;
.commits {
border: 1px solid #DDD;
border-bottom: 0px solid #DDD;
.border_box;
a {
padding:20px 45px;
display:block;
border-bottom: 1px solid #dadcdd;
color:#262626;
text-decoration:none;
position:relative;
.border_box;
h2 {
font-family: @sans;
font-weight: bold;
font-size: 16px;
margin-bottom:5px;
}
img {
border-radius:50%;
margin-right:10px;
float:left;
display:none;
}
p {
color: #363636;
line-height:22px;
vertical-align:middle;
}
&[data-status]:before {
background: transparent;
width: 7px;
min-width:7px;
max-width:7px;
position: absolute;
left: -1px;
top: 0px;
bottom: 0px;
text-align: left;
color: #fff;
font-size: 20px;
line-height: 50px;
font-family: @sans;
padding-left:2px;
overflow:hidden;
content: " ";
}
&[data-result="Killed"],
&[data-status="Error"],
&[data-status="Failure"] {
background: #fff9f5;
&:before {
background: @cneg;
content: "!";
}
}
&[data-status="Success"]:before {
background: @cok;
}
}
}
}
.date {
span {
display:inline-block;
text-align:right;
font-size:14px;
width:100%;
padding-right:30px;
margin-top:15px;
.border_box;
}
}
}
#setuppage,
#loginpage {
.pure-g {
padding: 30px;
border: 1px solid #DDD;
max-width:400px;
margin:0px auto;
margin-top:50px;
.border_box;
a {
display:block;
background:@c1;
color:#fff;
padding:14px 20px;
font-size:15px;
border-radius:5px;
text-decoration:none;
&:hover {
background:@c0;
}
}
[class*="fa-"] {
float:left;
font-size:20px;
position:relative;
top:-3px;
left:-3px;
padding-right:10px;
min-width:27px;
min-height:20px;
}
.pure-u-1 a {
margin-bottom:10px;
}
.pure-u-1:last-child a {
margin-bottom:0px;
}
}
}
#setuppage2 {
margin-bottom:50px;
section {
.border_box;
.pure-g {
padding: 30px;
border: 1px solid #DDD;
max-width:400px;
margin:0px auto;
margin-top:50px;
.border_box;
}
label {
display:inline-block;
}
input[type='text'] {
margin-top:5px;
margin-bottom:10px;
box-shadow:none;
width:100%;
}
.pure-button-primary {
color:#FFF;
background: @link2;
padding:10px 20px;
margin-top:20px;
width:100%;
}
.tip {
h2 {
font-size: 16px;
margin-bottom: 20px;
}
dd {
font-weight:bold;
color:#666;
margin-top:15px;
margin-bottom:5px;
}
dt {
padding: .5em .6em;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
.border_box;
width: 100%;
}
}
}
}
#syncpage {
width:100%;
section {
padding:40px 0px 20px 0px;
h1 {
text-align: center;
font-size: 24px;
margin-bottom:20px;
i {
font-size:32px;
margin-top:20px;
}
}
}
}
#homepage {
width:100%;
background:#f2f5f8;
section {
padding:40px 0px 20px 0px;
border-bottom:1px solid #EEE;
h1 {
text-align: center;
font-size: 24px;
margin-bottom:20px;
i {
font-size:32px;
margin-top:20px;
}
}
div {
max-width:1180px;
margin:0px auto;
}
&:nth-child(2) {
background:#FFF;
padding:40px 0px 20px 0px;
}
&:nth-child(3) {
border-bottom:0px solid #EEE;
}
.card[data-status="Killed"],
.card[data-status="Failure"],
.card[data-status="Error"] {
.l-box {
border: 1px solid @cneg;
&:hover {
border:1px solid @c0;
}
}
}
}
}
#repospage {
width:100%;
section {
border-bottom:1px solid #eee;
max-width:768px;
margin:0px auto;
margin-top:30px;
margin-bottom:30px;
.search {
margin-bottom: 25px;
input[type="text"],
input[type="search"] {
.transition(.4s border linear);
border: 1px solid #ccc;
border-radius: 0px;
box-shadow: none;
padding: 12px;
&:focus {
border-color: #129FEA;
}
}
}
.repo {
.border_box;
text-decoration:none;
&:last-child > div {
border-bottom:1px solid #fff;
}
&> div {
.border_box;
border:1px solid #eee;
border-bottom:1px solid #fff;
.transition(.4s border linear);
& > div {
.border_box;
padding:20px 25px;
&:last-child div {
text-align:right;
}
}
&:hover {
border:1px solid @c0;
}
}
h4 {
font-size:20px;
margin-bottom:2px;
color:@c0;
}
span {
color:#666;
font-size:14px;
}
i {
color: #DDD;
font-size: 22px;
margin-left:20px;
margin-top:15px;
&.fa-check-circle-o {
color:@cok;
}
}
}
}
}
#userspage {
width:100%;
section {
border-bottom:1px solid #eee;
max-width:768px;
margin:0px auto;
margin-top:30px;
margin-bottom:30px;
.search {
margin-bottom: 25px;
input[type="text"],
input[type="search"] {
.transition(.4s border linear);
border: 1px solid #ccc;
border-radius: 0px;
box-shadow: none;
padding: 12px;
&:focus {
border-color: #129FEA;
}
}
}
.user {
.border_box;
text-decoration:none;
&:last-child > div {
border-bottom:1px solid #fff;
}
&> div {
.border_box;
border:1px solid #eee;
border-bottom:1px solid #fff;
.transition(.4s border linear);
& > div {
.border_box;
padding:20px 25px;
padding-right:0px;
}
&:hover {
border:1px solid @c0;
}
}
img {
border-radius:50%;
width:48px;
height:48px;
}
h4 {
font-size:20px;
margin-bottom:2px;
color:@c0;
small {
font-size: 16px;
color:#666;
margin-left:5px;
}
}
span {
color:#666;
font-size:14px;
}
}
}
}
#repoconfpage {
width:100%;
section {
.border_box;
border:1px solid #eee;
max-width:768px;
margin:0px auto;
margin-top:30px;
margin-bottom:30px;
padding:20px;
h2 {
font-size: 16px;
margin-bottom: 15px;
}
.markdown,
.params,
.key {
.border_box;
min-height:50px;
margin-top:10px;
font-family:@mono;
border:1px solid #eee;
padding:20px;
width:100%;
max-width:100%;
color:#666;
&:focus {
border-color: #129FEA;
outline: 0;
}
}
.pure-button-primary {
color:#FFF;
background: @link2;
padding:10px 20px;
margin-top:20px;
}
}
}
#accountpage {
width:100%;
section {
position:relative;
max-width:768px;
margin:0px auto;
margin-top:30px;
border:1px solid #eee;
&.profile {
&> div:first-child {
.border_box;
padding:20px;
text-align:center;
}
&> div:last-child {
.border_box;
padding:20px;
}
.fullname {
font-size:14px;
margin-bottom:2px;
color:#666;
display:block;
}
.email {
font-size:14px;
color:#666;
display:block;
}
}
&.token {
&> div:first-child {
div {
.border_box;
text-align:center;
padding:20px;
color:#666;
font-size:16px;
line-height:22px;
}
i {
margin-right:7px;
}
}
&> div:last-child {
.border_box;
padding:20px;
color:#666;
line-height:22px;
font-size:14px;
}
}
h4 {
margin:10px 0px;
font-size:22px;
small {
opacity:0.6;
font-size:16px;
margin-left:10px;
}
}
img {
width:64px;
height:64px;
border-radius:50%;
}
.notifications {
position:absolute;
top:0px;
right:0px;
margin:20px;
}
.button-error {
color:#FFF;
background: rgb(202, 60, 60);
padding:10px 20px;
float:right;
}
.pure-button-primary {
color:#FFF;
background: @link2;
padding:10px 20px;
margin-top:10px;
}
}
}
#repopage {
width:100%;
background:#f2f5f8;
section {
padding:40px 0px 20px 0px;
border-bottom:1px solid #EEE;
&> div {
max-width:1180px;
margin:0px auto;
}
&:nth-child(even) {
background:#FFF;
}
&:first-child {
background:#FFF;
}
.card[data-status="Success"] {
&:nth-child(2) .l-box {
border-color: @cok;
&:hover {
border:1px solid @c0;
}
}
}
.card[data-status="Killed"],
.card[data-status="Failure"],
.card[data-status="Error"] {
&:nth-child(2) .l-box {
border-color: @cneg;
&:hover {
border:1px solid @c0;
}
}
}
.card[data-status="Started"] em:before,
.card[data-status="Pending"] em:before {
-webkit-animation: progress 1s linear infinite;
-moz-animation: progress 1s linear infinite;
animation: progress 1s linear infinite;
position: absolute;
content: ' ';
height: 5px;
top: -5px;
left: 0px;
right: 0px;
margin: 0px;
background: #fee172;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.55) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.55) 75%, transparent 75%, transparent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.55) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.55) 75%, transparent 75%, transparent);
background-repeat: repeat-x;
background-size: 30px 30px;
}
.l-box:after {
font-family: 'FontAwesome';
content: "\f104";
content: "\f0d9";
position: absolute;
right: -20px;
width: 20px;
text-align: center;
color: rgba(0,0,0,0.1);
font-size: 22px;
}
.card:last-child .l-box:after {
content:'';
}
&.nobuilds,
&.inactive {
text-align:center;
padding-bottom:50px;
h1 {
font-size: 26px;
color: #262626;
}
p {
font-size: 16px;
color: #666;
}
i {
font-size: 32px;
margin-top: 20px;
margin-bottom: 20px;
&.fa-file-code-o {
font-size: 42px;
margin-top: 30px;
}
}
.pure-button-primary {
font-size: 14px;
text-transform: uppercase;
background: #4ab1ce;
padding: 10px 30px;
}
}
&.nobuilds {
}
}
}
@-webkit-keyframes progress {
to {
background-position: 30px 0;
}
}
@-moz-keyframes progress {
to {
background-position: 30px 0;
}
}
@keyframes progress {
to {
background-position: 30px 0;
}
}
#sidebar {
width: 240px;
min-width: 240px;
position: relative;
display: block;
z-index: 5;
padding: 30px;
.border_box;
//border-left:1px solid #cdcece;
//box-shadow:-3px 0 0 rgba(0,0,0,.05);
h1 {font-size:28px; font-weight:300;}
h2 {font-size:22px; font-weight:300; margin-bottom:20px;}
dl {padding-top:23px; border-top:1px solid #ddd; margin-top:5px;
&:first-child {padding-top:0; border-top:none; margin-top:0;}
dt {font-size:12px; color:@c2; text-transform:uppercase; padding:3px 0;}
dd {font-size:14px; padding:3px 0 20px;}
a {text-transform:none;}
small {font-size:12px;}
.large {font-size:18px; padding-bottom:5px;}
.time {float:right; margin-left:8px;}
.photo {margin-right:4px;}
.negative {color:@cneg;}
.photoline {display:inline-block; position:relative; top:-10px; font-weight:bold;}
.small {padding-bottom:5px; font-weight:bold; font-size:12px;}
}
.status {
border:1px solid transparent;
display:block;
text-align:center;
padding:5px 20px;
border-radius:50px;
text-transform:uppercase;
margin:0 -5px 10px;
font-weight:bold;
&:before {float:left; margin-left:-5px;}
&.status_ok {
color:@cok; border-color:@cok;
&:before {content:"\f00c"; font-family:'FontAwesome';}
}
&.status_error {
color:@cneg; border-color:@cneg;
&:before {content:"!";}
}
}
.result {
background:@link2;
background:@cok;
color:#fff;
margin:-30px -30px -6px;
padding:30px;
position:relative;
.status {
color:#fff;
background:rgba(255,255,255,.2);
&:before {
content:"\f00c";
font-family:'FontAwesome';
}
}
dl {
dd {
padding:7px 0;
strong { font-size:16px; }
}
}
&[data-result="Killed"],
&[data-result="Failure"],
&[data-result="Error"] {
background: @cneg;
.status:before {
content:"!";
}
}
&[data-result="Pending"],
&[data-result="Started"] {
background:@link2;
}
}
}
#main {
flex-grow: 2;
&.output {
background: #525252;
pre {
margin:0px auto;
padding:30px;
color:#FFF;
font-family:@mono;
font-size:13px;
white-space: pre-wrap;
overflow: hidden;
}
}
}
.pure-form.pure-form-stacked {
label {
font-size:14px;
color:#666;
margin-top:20px;
margin-bottom:5px;
&:first-child {
margin-top:0px;
}
}
input[type="text"],
select {
min-width:300px;
box-shadow:none;
padding:10px 10px;
border: 1px solid #ccc;
border-radius:0px;
}
}
// special thanks to:
// http://www.designcouch.com/home/why/2013/09/19/ios7-style-pure-css-toggle/
.toggle {
margin-bottom:10px;
&:nth-child(2) {
margin-top:40px;
}
span {
line-height:32px;
vertical-align:middle;
display: inline-block;
margin-left:10px;
}
input[type='checkbox'] {
max-height: 0;
max-width: 0;
opacity: 0;
// The following provides the "container" for our toggle
// in its default (off) state
& + label {
display: inline-block;
vertical-align: middle;
position: relative;
box-shadow: inset 0 0 0px 1px #d5d5d5;
text-indent: -5000px;
height: 30px;
width: 50px;
border-radius: 15px;
// The following provides the green background for the
// "on" state of our toggle - it is hidden when the
// switch is off
&:before {
content: "";
position: absolute;
display: block;
height: 30px;
width: 30px;
top: 0;
left: 0;
border-radius: 15px;
background: rgba(19,191,17,0);
.transition(.25s ease-in-out);
}
// The following provides the actual switch
// and its drop shadow
&:after {
content: "";
position: absolute;
display: block;
height: 30px;
width: 30px;
top: 0;
left: 0px;
border-radius: 15px;
background: white;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.2);
.transition(.25s ease-in-out);
}
}
// The following defines the "on" state for the switch
&:checked + label:before {
width: 50px;
background: @link2;
}
&:checked + label:after {
left: 20px;
box-shadow: inset 0 0 0 1px @link2, 0 2px 4px rgba(0,0,0,.2);
}
}
}
.toast {
position: fixed;
bottom: 50px;
left: 20%;
right: 20%;
background: #363636;
border-radius: 3px;
z-index: 999;
color: #FFF;
padding: 15px 20px;
font-size: 14px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
a, a:visited, a:hover, a:active {
color:#FFF;
}
button {
float: right;
background: transparent;
border: none;
border: none;
color: #EEFF41;
text-transform: uppercase;
margin-left:10px;
}
}