Use old-sass syntax for stylesheets
Marcin Kulik
12 years ago
parent
92199c4264
commit
597eb5174b
@ -0,0 +1,6 @@
|
||||
.error-404
|
||||
.wrapper
|
||||
text-align: center
|
||||
|
||||
h1
|
||||
font-size: 100px
|
||||
@ -1,9 +0,0 @@
|
||||
.error-404 {
|
||||
.wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
$main-color: #3377aa
|
||||
$main-color: #d95525
|
||||
$main-color-light: lighten($main-color, 25)
|
||||
|
||||
=font
|
||||
font-family: Overpass, "Lucida Grande", Tahoma, Verdana, sans-serif
|
||||
@ -1,7 +0,0 @@
|
||||
$main-color: #37A;
|
||||
$main-color: #D95525;
|
||||
$main-color-light: lighten($main-color, 25);
|
||||
|
||||
@mixin font {
|
||||
font-family: Overpass, "Lucida Grande", Tahoma, Verdana, sans-serif;
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
=terminal-font
|
||||
font-family: 'Bitstream Vera Sans Mono', 'Courier New', monospace
|
||||
font-size: 12px
|
||||
line-height: inherit
|
||||
@ -1,5 +0,0 @@
|
||||
@mixin terminal-font {
|
||||
font-family: 'Bitstream Vera Sans Mono', 'Courier New', monospace;
|
||||
font-size: 12px;
|
||||
line-height: inherit;
|
||||
}
|
||||
@ -0,0 +1,98 @@
|
||||
@import terminal-font
|
||||
@import shared
|
||||
|
||||
.extras
|
||||
.author
|
||||
position: relative
|
||||
overflow: hidden
|
||||
margin-bottom: 30px
|
||||
|
||||
h2
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 60px
|
||||
width: 150px
|
||||
|
||||
a
|
||||
display: block
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
font-size: 22px
|
||||
width: 150px
|
||||
white-space: nowrap
|
||||
|
||||
p
|
||||
position: absolute
|
||||
top: 23px
|
||||
left: 60px
|
||||
|
||||
img
|
||||
-webkit-border-radius: 4px
|
||||
-moz-border-radius: 4px
|
||||
-ms-border-radius: 4px
|
||||
-o-border-radius: 4px
|
||||
border-radius: 4px
|
||||
float: left
|
||||
width: 48px
|
||||
|
||||
a
|
||||
font-size: 14px
|
||||
line-height: 25px
|
||||
|
||||
.asciicast-wrapper
|
||||
width: 100%
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
.description
|
||||
ul, ol
|
||||
list-style: initial
|
||||
|
||||
div.presentation
|
||||
float: left
|
||||
margin: 0 38px 20px 0
|
||||
width: 210px
|
||||
font-size: 15px
|
||||
position: relative
|
||||
|
||||
.preview
|
||||
+terminal-font
|
||||
background-color: white
|
||||
color: #333
|
||||
overflow: hidden
|
||||
word-wrap: normal
|
||||
white-space: pre
|
||||
border: 15px solid white
|
||||
border-radius: 4px
|
||||
margin: 1em 0 0.6em 0
|
||||
padding: 0
|
||||
|
||||
.info
|
||||
h3
|
||||
+font
|
||||
letter-spacing: 0
|
||||
font-weight: 300
|
||||
font-size: 18px
|
||||
line-height: 1.2
|
||||
margin: 0 0 10px
|
||||
word-wrap: break-word
|
||||
|
||||
a
|
||||
color: #333
|
||||
|
||||
p.date
|
||||
color: #777
|
||||
margin: -8px 0 10px
|
||||
|
||||
.supplimental
|
||||
div.presentation:nth-child(3n+1)
|
||||
clear: left
|
||||
|
||||
div.presentation:nth-child(3n)
|
||||
margin-right: 0
|
||||
|
||||
.presentations
|
||||
clear: both
|
||||
|
||||
.other-asciicasts
|
||||
margin-top: 70px
|
||||
@ -1,121 +0,0 @@
|
||||
@import 'terminal-font';
|
||||
@import 'shared';
|
||||
|
||||
.extras {
|
||||
.author {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 30px;
|
||||
|
||||
h2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 60px;
|
||||
width: 150px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 22px;
|
||||
width: 150px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
left: 60px;
|
||||
}
|
||||
|
||||
img {
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
float: left;
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 14px;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.asciicast-wrapper {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
ul, ol {
|
||||
list-style: initial;
|
||||
}
|
||||
}
|
||||
|
||||
div.presentation {
|
||||
float: left;
|
||||
margin: 0 38px 20px 0;
|
||||
width: 210px;
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
|
||||
.preview {
|
||||
@include terminal-font;
|
||||
|
||||
background-color: white;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
word-wrap: normal;
|
||||
white-space: pre;
|
||||
border: 15px solid white;
|
||||
border-radius: 4px;
|
||||
margin: 1em 0 0.6em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
h3 {
|
||||
@include font;
|
||||
letter-spacing: 0;
|
||||
font-weight: 300;
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
margin: 0 0 10px;
|
||||
word-wrap: break-word;
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
p.date {
|
||||
color: #777;
|
||||
margin: -8px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.supplimental {
|
||||
div.presentation:nth-child(3n+1) {
|
||||
clear: left;
|
||||
}
|
||||
|
||||
div.presentation:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.presentations {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.other-asciicasts {
|
||||
margin-top: 70px;
|
||||
}
|
||||
@ -0,0 +1,200 @@
|
||||
@import shared
|
||||
|
||||
h1, h2, h3, legend
|
||||
+font
|
||||
font-weight: 300
|
||||
color: #EFEFEF
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
margin: 0 0 1em
|
||||
text-rendering: optimizelegibility
|
||||
|
||||
h1
|
||||
font-size: 30px
|
||||
line-height: 1
|
||||
margin: 0 0 20px
|
||||
word-wrap: break-word
|
||||
|
||||
h2
|
||||
color: #54B85F
|
||||
// ^^^ USED?
|
||||
font-size: 26px
|
||||
line-height: 1
|
||||
margin-bottom: 10px
|
||||
|
||||
h3
|
||||
font-size: 16px
|
||||
margin: 20px 0
|
||||
|
||||
ol, ul
|
||||
list-style: none
|
||||
|
||||
body
|
||||
font-family: "Helvetica Neue", Helvetica, "Liberation Sans", FreeSans, Arial, sans-serif
|
||||
// font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
|
||||
font-weight: 300
|
||||
letter-spacing: 0
|
||||
font-size: 15px
|
||||
line-height: 1.4
|
||||
background: #333
|
||||
color: #999
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
div
|
||||
margin: 0
|
||||
padding: 0
|
||||
font: inherit
|
||||
|
||||
p
|
||||
font: inherit
|
||||
|
||||
&.links
|
||||
float: left
|
||||
|
||||
a
|
||||
color: $main-color
|
||||
text-decoration: none
|
||||
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
img
|
||||
border: none
|
||||
|
||||
.pagination
|
||||
+font
|
||||
clear: both
|
||||
font-size: 18px
|
||||
|
||||
.supplimental
|
||||
background: #E4E4E4
|
||||
border-top: 1px solid white
|
||||
border-bottom: 1px solid #CCC
|
||||
color: #555
|
||||
|
||||
h1, legend
|
||||
font-size: 30px
|
||||
color: #333
|
||||
clear: both
|
||||
|
||||
h1, h2, h3, h4, h5, h6
|
||||
color: #333
|
||||
|
||||
.main h2
|
||||
+font
|
||||
margin-top: 40px
|
||||
font-size: 20px
|
||||
line-height: 24px
|
||||
|
||||
.extras h2
|
||||
+font
|
||||
font-weight: 300
|
||||
color: $main-color
|
||||
font-size: 20px
|
||||
line-height: 24px
|
||||
|
||||
div.wrapper
|
||||
width: 960px
|
||||
margin: 0 auto
|
||||
padding: 0
|
||||
|
||||
.main
|
||||
width: 710px
|
||||
float: left
|
||||
|
||||
.extras
|
||||
width: 210px
|
||||
float: right
|
||||
|
||||
p
|
||||
color: #555
|
||||
font-size: 15px
|
||||
margin: 0 0 00px
|
||||
|
||||
.avatar
|
||||
// background: blue;
|
||||
float: right
|
||||
margin: 2px 0 8px 15px
|
||||
-webkit-border-radius: 5px
|
||||
-moz-border-radius: 5px
|
||||
-ms-border-radius: 5px
|
||||
-o-border-radius: 5px
|
||||
border-radius: 5px
|
||||
width: 48px
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.3) 0 1px 3px
|
||||
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.3) 0 1px 3px
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.3) 0 1px 3px
|
||||
|
||||
.author .avatar
|
||||
margin: 1px
|
||||
|
||||
.cursor-block
|
||||
background-color: white
|
||||
// font-size: 40px;
|
||||
|
||||
&::after
|
||||
content: 't'
|
||||
|
||||
.feature
|
||||
border-top: 1px solid #2D2D2D
|
||||
|
||||
section
|
||||
clear: both
|
||||
display: block
|
||||
overflow: hidden
|
||||
margin: 0
|
||||
padding: 25px 10px
|
||||
|
||||
section::after
|
||||
clear: both
|
||||
content: "."
|
||||
display: block
|
||||
height: 0
|
||||
visibility: hidden
|
||||
|
||||
ul.delimited
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.7)
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.12)
|
||||
margin: 0 0 20px
|
||||
padding: 0
|
||||
font-size: 14px
|
||||
|
||||
li
|
||||
padding: 5px 10px
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.7)
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12)
|
||||
overflow: hidden
|
||||
|
||||
a
|
||||
display: block
|
||||
|
||||
.divider-vertical
|
||||
width: 30px
|
||||
height: 36px
|
||||
float: left
|
||||
|
||||
.vertical-expander
|
||||
height: 300px
|
||||
|
||||
.extras ul li .active
|
||||
font-weight: bold
|
||||
|
||||
.main
|
||||
ul, ol
|
||||
list-style: initial
|
||||
padding-left: 30px
|
||||
|
||||
abbr.timeago
|
||||
border-bottom: 0
|
||||
|
||||
code
|
||||
|
||||
pre
|
||||
padding: 10px
|
||||
background-color: white
|
||||
color: black
|
||||
font-size: 13px
|
||||
|
||||
.player
|
||||
margin: 0 auto
|
||||
@ -1,242 +0,0 @@
|
||||
@import 'shared';
|
||||
|
||||
h1, h2, h3, legend {
|
||||
@include font;
|
||||
font-weight: 300;
|
||||
color: #EFEFEF;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0 0 1em;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
margin: 0 0 20px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #54B85F; // USED?
|
||||
font-size: 26px;
|
||||
line-height: 1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, "Liberation Sans", FreeSans, Arial, sans-serif;
|
||||
// font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
background: #333;
|
||||
color: #999;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
p {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $main-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
p.links {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
@include font;
|
||||
clear: both;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.supplimental {
|
||||
background: #E4E4E4;
|
||||
border-top: 1px solid white;
|
||||
border-bottom: 1px solid #CCC;
|
||||
color: #555;
|
||||
|
||||
h1, legend {
|
||||
font-size: 30px;
|
||||
color: #333;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.main h2 {
|
||||
@include font;
|
||||
margin-top: 40px;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.extras h2 {
|
||||
@include font;
|
||||
font-weight: 300;
|
||||
color: $main-color;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
div.wrapper {
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 710px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.extras {
|
||||
width: 210px;
|
||||
float: right;
|
||||
|
||||
p {
|
||||
color: #555;
|
||||
font-size: 15px;
|
||||
margin: 0 0 00px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
// background: blue;
|
||||
float: right;
|
||||
margin: 2px 0 8px 15px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-ms-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
width: 48px;
|
||||
|
||||
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.3) 0 1px 3px;
|
||||
-moz-box-shadow: rgba(0,0,0,0.2) 0 0 0 1px,rgba(0,0,0,0.3) 0 1px 3px;
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.3) 0 1px 3px;
|
||||
}
|
||||
|
||||
.author .avatar {
|
||||
margin: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-block {
|
||||
background-color: white;
|
||||
// font-size: 40px;
|
||||
|
||||
&::after {
|
||||
content: 't';
|
||||
}
|
||||
}
|
||||
|
||||
.feature {
|
||||
border-top: 1px solid #2D2D2D;
|
||||
}
|
||||
|
||||
section {
|
||||
clear: both;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 25px 10px;
|
||||
}
|
||||
|
||||
section::after {
|
||||
clear: both;
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
ul.delimited {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.7);
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||
margin: 0 0 20px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
|
||||
li {
|
||||
padding: 5px 10px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.7);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.divider-vertical {
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.vertical-expander {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.extras ul li .active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.main {
|
||||
ul, ol {
|
||||
list-style: initial;
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
abbr.timeago {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 10px;
|
||||
background-color: white;
|
||||
color: black;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.player {
|
||||
margin: 0 auto;
|
||||
}
|
||||
@ -0,0 +1,127 @@
|
||||
@import shared
|
||||
|
||||
// Taken from Twitter Bootstrap
|
||||
|
||||
form
|
||||
margin: 0 0 18px
|
||||
|
||||
fieldset
|
||||
padding: 0
|
||||
margin: 0
|
||||
border: 0
|
||||
|
||||
legend
|
||||
display: block
|
||||
width: 100%
|
||||
padding: 0
|
||||
margin-bottom: 27px
|
||||
font-size: 30px
|
||||
line-height: 36px
|
||||
border: 0
|
||||
border-bottom: 1px solid #EEE
|
||||
|
||||
legend + .control-group
|
||||
margin-top: 18px
|
||||
-webkit-margin-top-collapse: separate
|
||||
|
||||
.form-horizontal .control-group
|
||||
margin-bottom: 18px
|
||||
|
||||
.form-horizontal .control-label
|
||||
float: left
|
||||
width: 140px
|
||||
padding-top: 5px
|
||||
text-align: right
|
||||
|
||||
label
|
||||
display: block
|
||||
margin-bottom: 5px
|
||||
|
||||
label, input, button, select, textarea
|
||||
// font-size: 13px;
|
||||
// font-weight: normal;
|
||||
// line-height: 18px;
|
||||
|
||||
.form-horizontal .controls
|
||||
margin-left: 160px
|
||||
|
||||
.form-horizontal input
|
||||
display: inline-block
|
||||
margin-bottom: 0
|
||||
|
||||
.form-horizontal .form-actions
|
||||
padding-left: 160px
|
||||
|
||||
.form-actions
|
||||
padding: 17px 20px 18px
|
||||
margin-top: 18px
|
||||
margin-bottom: 18px
|
||||
border-top: 1px solid #DDD
|
||||
|
||||
.form-actions::before, .form-actions::after
|
||||
display: table
|
||||
content: ""
|
||||
|
||||
.form-actions::after
|
||||
clear: both
|
||||
|
||||
.form-actions::before, .form-actions::after
|
||||
display: table
|
||||
content: ""
|
||||
|
||||
input, textarea, .uneditable-input
|
||||
margin-left: 0
|
||||
|
||||
input[type=text], textarea, select, .uneditable-input
|
||||
width: 210px
|
||||
height: 18px
|
||||
padding: 4px
|
||||
line-height: 18px
|
||||
border: 1px solid #CCC
|
||||
-webkit-border-radius: 3px
|
||||
-moz-border-radius: 3px
|
||||
border-radius: 3px
|
||||
|
||||
input[type=text], textarea
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)
|
||||
-webkit-transition: border linear 0.2s,box-shadow linear 0.2s
|
||||
-moz-transition: border linear 0.2s,box-shadow linear 0.2s
|
||||
-ms-transition: border linear 0.2s,box-shadow linear 0.2s
|
||||
-o-transition: border linear 0.2s,box-shadow linear 0.2s
|
||||
transition: border linear 0.2s,box-shadow linear 0.2s
|
||||
|
||||
input[type=submit]
|
||||
margin-right: 10px
|
||||
|
||||
input:focus, textarea:focus
|
||||
border-color: $main-color
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)
|
||||
outline: 0
|
||||
outline: thin dotted 9
|
||||
|
||||
input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input
|
||||
float: none
|
||||
margin-left: 0
|
||||
|
||||
input.span6, textarea.span6, .uneditable-input.span6
|
||||
width: 450px
|
||||
|
||||
input.span6, textarea.span6, .uneditable-input.span6
|
||||
width: 560px
|
||||
|
||||
textarea
|
||||
height: auto
|
||||
|
||||
// .radio, .checkbox {
|
||||
// padding-left: 18px;
|
||||
// }
|
||||
|
||||
.controls > .radio:first-child, .controls > .checkbox:first-child
|
||||
padding-top: 5px
|
||||
|
||||
.error
|
||||
.help-inline
|
||||
color: #c00
|
||||
@ -1,154 +0,0 @@
|
||||
@import 'shared';
|
||||
|
||||
// Taken from Twitter Bootstrap
|
||||
|
||||
form {
|
||||
margin: 0 0 18px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 27px;
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #EEE;
|
||||
}
|
||||
|
||||
legend + .control-group {
|
||||
margin-top: 18px;
|
||||
-webkit-margin-top-collapse: separate;
|
||||
}
|
||||
|
||||
.form-horizontal .control-group {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.form-horizontal .control-label {
|
||||
float: left;
|
||||
width: 140px;
|
||||
padding-top: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
label, input, button, select, textarea {
|
||||
// font-size: 13px;
|
||||
// font-weight: normal;
|
||||
// line-height: 18px;
|
||||
}
|
||||
|
||||
.form-horizontal .controls {
|
||||
margin-left: 160px;
|
||||
}
|
||||
|
||||
.form-horizontal input {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-horizontal .form-actions {
|
||||
padding-left: 160px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
padding: 17px 20px 18px;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 18px;
|
||||
border-top: 1px solid #DDD;
|
||||
}
|
||||
|
||||
.form-actions::before, .form-actions::after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.form-actions::after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.form-actions::before, .form-actions::after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
input, textarea, .uneditable-input {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
input[type=text], textarea, select, .uneditable-input {
|
||||
width: 210px;
|
||||
height: 18px;
|
||||
padding: 4px;
|
||||
line-height: 18px;
|
||||
border: 1px solid #CCC;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type=text], textarea {
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-webkit-transition: border linear 0.2s,box-shadow linear 0.2s;
|
||||
-moz-transition: border linear 0.2s,box-shadow linear 0.2s;
|
||||
-ms-transition: border linear 0.2s,box-shadow linear 0.2s;
|
||||
-o-transition: border linear 0.2s,box-shadow linear 0.2s;
|
||||
transition: border linear 0.2s,box-shadow linear 0.2s;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
input:focus, textarea:focus {
|
||||
border-color: $main-color;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
|
||||
outline: 0;
|
||||
outline: thin dotted 9;
|
||||
}
|
||||
|
||||
input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
input.span6, textarea.span6, .uneditable-input.span6 {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
input.span6, textarea.span6, .uneditable-input.span6 {
|
||||
width: 560px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// .radio, .checkbox {
|
||||
// padding-left: 18px;
|
||||
// }
|
||||
|
||||
.controls > .radio:first-child, .controls > .checkbox:first-child {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.error {
|
||||
.help-inline {
|
||||
color: #c00;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
.comments-container
|
||||
margin-top: 80px
|
||||
|
||||
#new-comment
|
||||
width: 800px
|
||||
|
||||
textarea
|
||||
width: 100%
|
||||
height: 80px
|
||||
|
||||
.github-flavor
|
||||
text-align: right
|
||||
|
||||
.body
|
||||
margin-bottom: 0
|
||||
|
||||
textarea
|
||||
margin-bottom: 0
|
||||
|
||||
li.comment
|
||||
list-style-type: none
|
||||
margin: 20px 10px
|
||||
width: 450px
|
||||
|
||||
.left
|
||||
float: left
|
||||
width: 50px
|
||||
|
||||
.right
|
||||
float: left
|
||||
width: 350px
|
||||
// .when {
|
||||
// color: #969696;
|
||||
// }
|
||||
|
||||
.user-name
|
||||
color: #2786C2
|
||||
|
||||
.body
|
||||
padding: 20px 0
|
||||
@ -1,51 +0,0 @@
|
||||
.comments-container {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
#new-comment {
|
||||
width: 800px;
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.github-flavor {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.body {
|
||||
margin-bottom: 0;
|
||||
|
||||
textarea {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.comment {
|
||||
list-style-type: none;
|
||||
margin: 20px 10px;
|
||||
width: 450px;
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: left;
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
// .when {
|
||||
// color: #969696;
|
||||
// }
|
||||
|
||||
.user-name{
|
||||
color: #2786C2;
|
||||
}
|
||||
.body {
|
||||
padding: 20px 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
p.notice, p.alert, p.error
|
||||
background: #396
|
||||
color: white
|
||||
font-size: 15px
|
||||
height: 38px
|
||||
line-height: 36px
|
||||
margin: 0
|
||||
text-align: center
|
||||
@ -1,9 +0,0 @@
|
||||
p.notice, p.alert, p.error {
|
||||
background: #396;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
height: 38px;
|
||||
line-height: 36px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
footer
|
||||
font-family: "Lucida Grande", Tahoma, Verdana, sans-serif
|
||||
font-weight: 300
|
||||
letter-spacing: 0
|
||||
font-size: 15px
|
||||
line-height: 1.4
|
||||
font-weight: 400
|
||||
border-top: 1px solid #444
|
||||
color: #AAA
|
||||
clear: both
|
||||
display: block
|
||||
overflow: hidden
|
||||
margin: 0
|
||||
padding: 15px 10px
|
||||
position: relative
|
||||
text-align: right
|
||||
vertical-align: middle
|
||||
background-color: black
|
||||
|
||||
p
|
||||
font-size: 14px
|
||||
margin: 0
|
||||
padding: 0
|
||||
height: 50px
|
||||
line-height: 50px
|
||||
|
||||
a + a
|
||||
padding-left: 10px
|
||||
|
||||
img.avatar
|
||||
border-radius: 50%
|
||||
box-shadow: 0 0 0 2px white
|
||||
vertical-align: middle
|
||||
margin-left: 20px
|
||||
width: 48px
|
||||
@ -1,39 +0,0 @@
|
||||
footer {
|
||||
font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
font-weight: 400;
|
||||
border-top: 1px solid #444;
|
||||
color: #AAA;
|
||||
clear: both;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 15px 10px;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
background-color: black;
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
a + a {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
img.avatar {
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 2px white;
|
||||
vertical-align: middle;
|
||||
margin-left: 20px;
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,131 @@
|
||||
@import shared
|
||||
|
||||
header
|
||||
padding: 5px 0 0
|
||||
background: rgba(0, 0, 0, 0.2)
|
||||
display: block
|
||||
position: relative
|
||||
text-align: right
|
||||
vertical-align: middle
|
||||
border-bottom: 1px solid #444
|
||||
text-transform: uppercase
|
||||
background-color: black
|
||||
|
||||
.wrapper
|
||||
height: 40px
|
||||
position: relative
|
||||
overflow: visible
|
||||
|
||||
.navigation
|
||||
float: right
|
||||
|
||||
h1
|
||||
+font
|
||||
font-weight: 300
|
||||
letter-spacing: 0
|
||||
float: left
|
||||
height: 34px
|
||||
margin: 0
|
||||
padding: 0
|
||||
font-size: 24px
|
||||
position: relative
|
||||
text-align: left
|
||||
z-index: 3
|
||||
letter-spacing: -0.05em
|
||||
|
||||
a
|
||||
display: block
|
||||
height: 34px
|
||||
line-height: 34px
|
||||
font-size: 18px
|
||||
overflow: hidden
|
||||
position: relative
|
||||
z-index: 2
|
||||
color: white
|
||||
letter-spacing: 0
|
||||
background-position-y: 45%
|
||||
|
||||
&:hover
|
||||
text-decoration: none
|
||||
|
||||
ul
|
||||
+font
|
||||
font-weight: 300
|
||||
color: #EFEFEF
|
||||
font-size: 15px
|
||||
padding: 0
|
||||
margin: 0
|
||||
z-index: 2
|
||||
float: left
|
||||
|
||||
li
|
||||
float: left
|
||||
list-style: none
|
||||
margin: 0 0 0 15px
|
||||
padding: 0
|
||||
|
||||
a
|
||||
color: #E1E1E1
|
||||
display: block
|
||||
height: 34px
|
||||
line-height: 34px
|
||||
|
||||
&:hover
|
||||
color: white
|
||||
|
||||
ul a, .links a
|
||||
padding: 0 5px
|
||||
|
||||
.session-info
|
||||
margin-left: 20px
|
||||
|
||||
.username
|
||||
position: relative
|
||||
padding: 0 10px
|
||||
border-top: 1px solid black
|
||||
border-left: 1px solid black
|
||||
border-right: 1px solid black
|
||||
|
||||
&:hover
|
||||
border-top: 1px solid #222
|
||||
border-left: 1px solid #222
|
||||
border-right: 1px solid #222
|
||||
|
||||
a
|
||||
display: inline
|
||||
padding: 0
|
||||
color: $main-color
|
||||
|
||||
img
|
||||
width: 24px
|
||||
height: 24px
|
||||
vertical-align: middle
|
||||
margin: 0 5px 4px 0
|
||||
|
||||
.menu
|
||||
z-index: 1000
|
||||
display: none
|
||||
position: absolute
|
||||
top: 33px
|
||||
left: -1px
|
||||
right: -1px
|
||||
background-color: black
|
||||
padding-top: 5px
|
||||
padding-bottom: 5px
|
||||
border-bottom: 1px solid #222
|
||||
border-left: 1px solid #222
|
||||
border-right: 1px solid #222
|
||||
|
||||
li
|
||||
padding: 0 10px
|
||||
margin: 0
|
||||
|
||||
a
|
||||
color: white
|
||||
padding: 0
|
||||
margin: 0
|
||||
height: 1.6em
|
||||
line-height: 1.6em
|
||||
|
||||
&:hover .menu
|
||||
display: block
|
||||
@ -1,152 +0,0 @@
|
||||
@import 'shared';
|
||||
|
||||
header {
|
||||
padding: 5px 0 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
display: block;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid #444;
|
||||
text-transform: uppercase;
|
||||
background-color: black;
|
||||
|
||||
.wrapper {
|
||||
height: 40px;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
float: right;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include font;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0;
|
||||
float: left;
|
||||
height: 34px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 24px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
z-index: 3;
|
||||
letter-spacing: -0.05em;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
font-size: 18px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: white;
|
||||
letter-spacing: 0;
|
||||
background-position-y: 45%;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
@include font;
|
||||
font-weight: 300;
|
||||
color: #EFEFEF;
|
||||
font-size: 15px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
z-index: 2;
|
||||
float: left;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
list-style: none;
|
||||
margin: 0 0 0 15px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #E1E1E1;
|
||||
display: block;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul a, .links a {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.session-info {
|
||||
margin-left: 20px;
|
||||
|
||||
.username {
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
border-top: 1px solid black;
|
||||
border-left: 1px solid black;
|
||||
border-right: 1px solid black;
|
||||
|
||||
&:hover {
|
||||
border-top: 1px solid #222;
|
||||
border-left: 1px solid #222;
|
||||
border-right: 1px solid #222;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
color: $main-color;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
vertical-align: middle;
|
||||
margin: 0 5px 4px 0;
|
||||
}
|
||||
|
||||
.menu {
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 33px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
background-color: black;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
border-bottom: 1px solid #222;
|
||||
border-left: 1px solid #222;
|
||||
border-right: 1px solid #222;
|
||||
|
||||
li {
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: white;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 1.6em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
@import terminal-font
|
||||
@import shared
|
||||
|
||||
#about
|
||||
padding: 25px 10px 45px 10px
|
||||
|
||||
h1
|
||||
+font
|
||||
font-weight: 300
|
||||
color: $main-color
|
||||
font-size: 50px
|
||||
line-height: 0.9
|
||||
margin: 0 0 30px
|
||||
letter-spacing: -0.05em
|
||||
|
||||
em
|
||||
color: white
|
||||
font-weight: 300
|
||||
font-style: normal
|
||||
|
||||
p
|
||||
+font
|
||||
font-weight: 300
|
||||
color: $main-color-light
|
||||
font-size: 20px
|
||||
line-height: 1.5
|
||||
margin: 0 0 30px
|
||||
letter-spacing: 0
|
||||
-webkit-font-smoothing: antialiased
|
||||
|
||||
div.primary_info
|
||||
float: right
|
||||
width: 460px
|
||||
margin-top: 20px
|
||||
|
||||
div.secondary_info
|
||||
float: left
|
||||
width: 460px
|
||||
margin-top: 20px
|
||||
overflow: hidden
|
||||
|
||||
.player .start-prompt .play-button
|
||||
left: 230px
|
||||
@ -1,50 +0,0 @@
|
||||
@import 'terminal-font';
|
||||
@import 'shared';
|
||||
|
||||
#about {
|
||||
padding: 25px 10px 45px 10px;
|
||||
|
||||
h1 {
|
||||
@include font;
|
||||
font-weight: 300;
|
||||
color: $main-color;
|
||||
font-size: 50px;
|
||||
line-height: 0.9;
|
||||
margin: 0 0 30px;
|
||||
letter-spacing: -0.05em;
|
||||
|
||||
em {
|
||||
color: white;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@include font;
|
||||
font-weight: 300;
|
||||
color: $main-color-light;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 30px;
|
||||
letter-spacing: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
div.primary_info {
|
||||
float: right;
|
||||
width: 460px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
div.secondary_info {
|
||||
float: left;
|
||||
width: 460px;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
.player .start-prompt .play-button {
|
||||
left: 230px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
#login
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
li
|
||||
margin: 0
|
||||
padding: 0
|
||||
display: inline
|
||||
margin-right: 10px
|
||||
@ -1,11 +0,0 @@
|
||||
#login {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,166 @@
|
||||
@import ../terminal-font
|
||||
@import ../shared
|
||||
|
||||
$color1: #00a0b0
|
||||
$color2: #6a4a3c
|
||||
$color3: #cc333f
|
||||
$color4: #eb6841
|
||||
$color5: #edc951
|
||||
|
||||
=player-overlay
|
||||
background-color: rgba(0, 0, 0, 0.5)
|
||||
z-index: 10
|
||||
background-repeat: no-repeat
|
||||
background-position: center
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
|
||||
.player
|
||||
// float: left;
|
||||
display: block
|
||||
padding: 0px
|
||||
position: relative
|
||||
|
||||
.terminal, .font-sample, .hud
|
||||
+terminal-font
|
||||
|
||||
.line
|
||||
line-height: 15px
|
||||
|
||||
span
|
||||
padding: 1px 0
|
||||
|
||||
.terminal
|
||||
overflow: hidden
|
||||
padding: 3px
|
||||
margin: 0px
|
||||
display: block
|
||||
white-space: pre
|
||||
background-color: black
|
||||
color: #ccc
|
||||
border: 0
|
||||
word-wrap: normal
|
||||
|
||||
.line
|
||||
/* background-color: black;
|
||||
/* padding: 0;
|
||||
/* margin: 0;
|
||||
|
||||
&.cursor-on
|
||||
.line
|
||||
.cursor.visible
|
||||
background-color: #D3D7CF
|
||||
|
||||
.loading
|
||||
+player-overlay
|
||||
background-image: url(image-path("loader.gif"))
|
||||
|
||||
.start-prompt
|
||||
+player-overlay
|
||||
z-index: 20
|
||||
cursor: pointer
|
||||
|
||||
.play-button
|
||||
position: absolute
|
||||
left: 50%
|
||||
top: 50%
|
||||
width: 0
|
||||
|
||||
.arrow
|
||||
color: white
|
||||
font-size: 140px
|
||||
width: 150px
|
||||
margin-left: -75px
|
||||
margin-top: -100px
|
||||
-webkit-font-smoothing: none
|
||||
text-align: center
|
||||
font-weight: bold
|
||||
|
||||
&:hover
|
||||
text-shadow: 2px 2px 5px $main-color
|
||||
// -moz-transform: rotate(-5deg);
|
||||
// -webkit-transform: rotate(-5deg);
|
||||
|
||||
.hud
|
||||
padding: 0
|
||||
margin: 0
|
||||
border: 0
|
||||
background-color: #eee
|
||||
opacity: 0
|
||||
position: absolute
|
||||
left: 2px
|
||||
right: 2px
|
||||
bottom: 2px
|
||||
color: black
|
||||
-webkit-transition: opacity 0.3s ease-in-out
|
||||
|
||||
.toggle
|
||||
background-color: black
|
||||
color: white
|
||||
cursor: pointer
|
||||
|
||||
.play
|
||||
display: inline
|
||||
|
||||
.pause
|
||||
display: none
|
||||
|
||||
.progress
|
||||
color: black
|
||||
cursor: pointer
|
||||
|
||||
span:hover
|
||||
background-color: #777
|
||||
|
||||
.time
|
||||
background-color: black
|
||||
color: white
|
||||
|
||||
&.playing
|
||||
.hud .toggle
|
||||
background-color: $color4
|
||||
|
||||
.play
|
||||
display: none
|
||||
|
||||
.pause
|
||||
display: inline
|
||||
|
||||
&:hover .hud
|
||||
opacity: 1.0
|
||||
|
||||
.bright
|
||||
font-weight: bold
|
||||
|
||||
.underline
|
||||
text-decoration: underline
|
||||
|
||||
.italic
|
||||
font-style: italic
|
||||
|
||||
.fg8
|
||||
font-weight: bold
|
||||
|
||||
.fg9
|
||||
font-weight: bold
|
||||
|
||||
.fg10
|
||||
font-weight: bold
|
||||
|
||||
.fg11
|
||||
font-weight: bold
|
||||
|
||||
.fg12
|
||||
font-weight: bold
|
||||
|
||||
.fg13
|
||||
font-weight: bold
|
||||
|
||||
.fg14
|
||||
font-weight: bold
|
||||
|
||||
.fg15
|
||||
font-weight: bold
|
||||
@ -1,180 +0,0 @@
|
||||
// Place all the styles related to the Asciicasts controller here.
|
||||
// They will automatically be included in application.css.
|
||||
// You can use Sass (SCSS) here: http://sass-lang.com/
|
||||
|
||||
@import '../terminal-font';
|
||||
@import '../shared';
|
||||
|
||||
$color1: #00A0B0;
|
||||
$color2: #6A4A3C;
|
||||
$color3: #CC333F;
|
||||
$color4: #EB6841;
|
||||
$color5: #EDC951;
|
||||
|
||||
@mixin player-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 10;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.player {
|
||||
// float: left;
|
||||
display: block;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
|
||||
.terminal, .font-sample, .hud {
|
||||
@include terminal-font;
|
||||
|
||||
.line {
|
||||
line-height: 15px;
|
||||
|
||||
span {
|
||||
padding: 1px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.terminal {
|
||||
overflow: hidden;
|
||||
padding: 3px;
|
||||
margin: 0px;
|
||||
display: block;
|
||||
white-space: pre;
|
||||
background-color: black;
|
||||
color: #ccc;
|
||||
border: 0;
|
||||
word-wrap: normal;
|
||||
|
||||
.line {
|
||||
/* background-color: black;*/
|
||||
/* padding: 0;*/
|
||||
/* margin: 0;*/
|
||||
}
|
||||
|
||||
&.cursor-on {
|
||||
.line {
|
||||
.cursor.visible {
|
||||
background-color: #D3D7CF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
@include player-overlay;
|
||||
background-image: url(image-path('loader.gif'));
|
||||
}
|
||||
|
||||
.start-prompt {
|
||||
@include player-overlay;
|
||||
z-index: 20;
|
||||
cursor: pointer;
|
||||
|
||||
.play-button {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
|
||||
.arrow {
|
||||
color: white;
|
||||
font-size: 140px;
|
||||
width: 150px;
|
||||
margin-left: -75px;
|
||||
margin-top: -100px;
|
||||
-webkit-font-smoothing: none;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
text-shadow: 2px 2px 5px $main-color;
|
||||
|
||||
// -moz-transform: rotate(-5deg);
|
||||
// -webkit-transform: rotate(-5deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hud {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background-color: #eee;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
bottom: 2px;
|
||||
color: black;
|
||||
|
||||
-webkit-transition: opacity 0.3s ease-in-out;
|
||||
|
||||
.toggle {
|
||||
background-color: black;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
|
||||
.play {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.pause {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.progress {
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
|
||||
span:hover {
|
||||
background-color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&.playing {
|
||||
.hud .toggle {
|
||||
background-color: $color4;
|
||||
|
||||
.play {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pause {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .hud {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.bright { font-weight: bold }
|
||||
.underline { text-decoration: underline }
|
||||
.italic { font-style: italic }
|
||||
|
||||
.fg8 { font-weight: bold }
|
||||
.fg9 { font-weight: bold }
|
||||
.fg10 { font-weight: bold }
|
||||
.fg11 { font-weight: bold }
|
||||
.fg12 { font-weight: bold }
|
||||
.fg13 { font-weight: bold }
|
||||
.fg14 { font-weight: bold }
|
||||
.fg15 { font-weight: bold }
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
a.preview-link
|
||||
display: block
|
||||
|
||||
.play-button
|
||||
display: none
|
||||
position: absolute
|
||||
left: 50%
|
||||
top: 50%
|
||||
width: 0
|
||||
|
||||
.arrow
|
||||
color: black
|
||||
font-size: 80px
|
||||
margin-left: -37px
|
||||
margin-top: -79px
|
||||
|
||||
&:hover
|
||||
text-decoration: none
|
||||
|
||||
.play-button
|
||||
display: block
|
||||
@ -1,26 +0,0 @@
|
||||
a.preview-link {
|
||||
display: block;
|
||||
|
||||
.play-button {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
|
||||
.arrow {
|
||||
color: black;
|
||||
font-size: 80px;
|
||||
margin-left: -37px;
|
||||
margin-top: -79px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
.play-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue