asciinema.org/app/assets/stylesheets/asciicasts.css.scss
2012-03-04 20:59:53 +01:00

678 lines
20 KiB
SCSS

// 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/
$color1: #00A0B0;
$color2: #6A4A3C;
$color3: #CC333F;
$color4: #EB6841;
$color5: #EDC951;
.asciicasts {
list-style: none;
.asciicast-preview {
h3 {
font-size: 16px;
a {
color: $color1;
}
}
margin-bottom: 30px;
}
}
.asciicast {
// width: 100%;
// background-color: #222;
.player {
/* border: 1px solid #777;*/
/* background-color: #333;*/
float: left;
display: block;
padding: 0px;
// margin: 0px 0px 30px 20px;
position: relative;
.terminal {
padding: 2px;
margin: 0px;
display: block;
font-family: 'Droid Sans Mono', Monospace;
white-space: pre;
background-color: black;
// line-height: 1.2em;
color: #ccc;
overflow: auto;
overflow-x: hidden;
cursor: pointer;
.line {
font-size: 12px;
/* background-color: black;*/
/* padding: 0;*/
/* margin: 0;*/
}
&.cursor-on {
.line {
.cursor.visible {
background-color: #D3D7CF;
}
}
}
}
.hud {
background-color: #333;
opacity: 0;
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 30px;
color: white;
font-weight: bold;
font-family: monospace;
-webkit-transition: opacity 0.3s ease-in-out;
.toggle {
background-color: $color1;
width: 30px;
height: 100%;
float: left;
cursor: pointer;
&.paused {
background-color: $color4;
}
}
.progress {
background-color: $color2;
width: 60%;
height: 100%;
float: left;
// cursor: pointer;
.gutter {
background-color: $color5;
width: 0px;
height: 100%;
}
}
.time {
background-color: $color3;
width: 30%;
height: 100%;
float: left;
text-align: center;
}
}
&:hover .hud {
opacity: 1.0;
}
}
.bright { font-weight: bold }
.underline { text-decoration: underline }
.italic { font-style: italic }
/* Foregrounds: */
/* ansi colors */
.fg0 { color: #000000 }
.fg1 { color: #CC0000 }
.fg2 { color: #4E9A06 }
.fg3 { color: #C4A000 }
.fg4 { color: #3465A4 }
.fg5 { color: #75507B }
.fg6 { color: #06989A }
.fg7 { color: #D3D7CF }
.fg8 { color: #555753; font-weight: bold }
.fg9 { color: #EF2929; font-weight: bold }
.fg10 { color: #8AE234; font-weight: bold }
.fg11 { color: #FCE94F; font-weight: bold }
.fg12 { color: #729FCF; font-weight: bold }
.fg13 { color: #AD7FA8; font-weight: bold }
.fg14 { color: #34E2E2; font-weight: bold }
.fg15 { color: #EEEEEC; font-weight: bold }
/* 216 rgb colors */
.fg16 { color: #000000 }
.fg17 { color: #00005f }
.fg18 { color: #000087 }
.fg19 { color: #0000af }
.fg20 { color: #0000d7 }
.fg21 { color: #0000ff }
.fg22 { color: #005f00 }
.fg23 { color: #005f5f }
.fg24 { color: #005f87 }
.fg25 { color: #005faf }
.fg26 { color: #005fd7 }
.fg27 { color: #005fff }
.fg28 { color: #008700 }
.fg29 { color: #00875f }
.fg30 { color: #008787 }
.fg31 { color: #0087af }
.fg32 { color: #0087d7 }
.fg33 { color: #0087ff }
.fg34 { color: #00af00 }
.fg35 { color: #00af5f }
.fg36 { color: #00af87 }
.fg37 { color: #00afaf }
.fg38 { color: #00afd7 }
.fg39 { color: #00afff }
.fg40 { color: #00d700 }
.fg41 { color: #00d75f }
.fg42 { color: #00d787 }
.fg43 { color: #00d7af }
.fg44 { color: #00d7d7 }
.fg45 { color: #00d7ff }
.fg46 { color: #00ff00 }
.fg47 { color: #00ff5f }
.fg48 { color: #00ff87 }
.fg49 { color: #00ffaf }
.fg50 { color: #00ffd7 }
.fg51 { color: #00ffff }
.fg52 { color: #5f0000 }
.fg53 { color: #5f005f }
.fg54 { color: #5f0087 }
.fg55 { color: #5f00af }
.fg56 { color: #5f00d7 }
.fg57 { color: #5f00ff }
.fg58 { color: #5f5f00 }
.fg59 { color: #5f5f5f }
.fg60 { color: #5f5f87 }
.fg61 { color: #5f5faf }
.fg62 { color: #5f5fd7 }
.fg63 { color: #5f5fff }
.fg64 { color: #5f8700 }
.fg65 { color: #5f875f }
.fg66 { color: #5f8787 }
.fg67 { color: #5f87af }
.fg68 { color: #5f87d7 }
.fg69 { color: #5f87ff }
.fg70 { color: #5faf00 }
.fg71 { color: #5faf5f }
.fg72 { color: #5faf87 }
.fg73 { color: #5fafaf }
.fg74 { color: #5fafd7 }
.fg75 { color: #5fafff }
.fg76 { color: #5fd700 }
.fg77 { color: #5fd75f }
.fg78 { color: #5fd787 }
.fg79 { color: #5fd7af }
.fg80 { color: #5fd7d7 }
.fg81 { color: #5fd7ff }
.fg82 { color: #5fff00 }
.fg83 { color: #5fff5f }
.fg84 { color: #5fff87 }
.fg85 { color: #5fffaf }
.fg86 { color: #5fffd7 }
.fg87 { color: #5fffff }
.fg88 { color: #870000 }
.fg89 { color: #87005f }
.fg90 { color: #870087 }
.fg91 { color: #8700af }
.fg92 { color: #8700d7 }
.fg93 { color: #8700ff }
.fg94 { color: #875f00 }
.fg95 { color: #875f5f }
.fg96 { color: #875f87 }
.fg97 { color: #875faf }
.fg98 { color: #875fd7 }
.fg99 { color: #875fff }
.fg100 { color: #878700 }
.fg101 { color: #87875f }
.fg102 { color: #878787 }
.fg103 { color: #8787af }
.fg104 { color: #8787d7 }
.fg105 { color: #8787ff }
.fg106 { color: #87af00 }
.fg107 { color: #87af5f }
.fg108 { color: #87af87 }
.fg109 { color: #87afaf }
.fg110 { color: #87afd7 }
.fg111 { color: #87afff }
.fg112 { color: #87d700 }
.fg113 { color: #87d75f }
.fg114 { color: #87d787 }
.fg115 { color: #87d7af }
.fg116 { color: #87d7d7 }
.fg117 { color: #87d7ff }
.fg118 { color: #87ff00 }
.fg119 { color: #87ff5f }
.fg120 { color: #87ff87 }
.fg121 { color: #87ffaf }
.fg122 { color: #87ffd7 }
.fg123 { color: #87ffff }
.fg124 { color: #af0000 }
.fg125 { color: #af005f }
.fg126 { color: #af0087 }
.fg127 { color: #af00af }
.fg128 { color: #af00d7 }
.fg129 { color: #af00ff }
.fg130 { color: #af5f00 }
.fg131 { color: #af5f5f }
.fg132 { color: #af5f87 }
.fg133 { color: #af5faf }
.fg134 { color: #af5fd7 }
.fg135 { color: #af5fff }
.fg136 { color: #af8700 }
.fg137 { color: #af875f }
.fg138 { color: #af8787 }
.fg139 { color: #af87af }
.fg140 { color: #af87d7 }
.fg141 { color: #af87ff }
.fg142 { color: #afaf00 }
.fg143 { color: #afaf5f }
.fg144 { color: #afaf87 }
.fg145 { color: #afafaf }
.fg146 { color: #afafd7 }
.fg147 { color: #afafff }
.fg148 { color: #afd700 }
.fg149 { color: #afd75f }
.fg150 { color: #afd787 }
.fg151 { color: #afd7af }
.fg152 { color: #afd7d7 }
.fg153 { color: #afd7ff }
.fg154 { color: #afff00 }
.fg155 { color: #afff5f }
.fg156 { color: #afff87 }
.fg157 { color: #afffaf }
.fg158 { color: #afffd7 }
.fg159 { color: #afffff }
.fg160 { color: #d70000 }
.fg161 { color: #d7005f }
.fg162 { color: #d70087 }
.fg163 { color: #d700af }
.fg164 { color: #d700d7 }
.fg165 { color: #d700ff }
.fg166 { color: #d75f00 }
.fg167 { color: #d75f5f }
.fg168 { color: #d75f87 }
.fg169 { color: #d75faf }
.fg170 { color: #d75fd7 }
.fg171 { color: #d75fff }
.fg172 { color: #d78700 }
.fg173 { color: #d7875f }
.fg174 { color: #d78787 }
.fg175 { color: #d787af }
.fg176 { color: #d787d7 }
.fg177 { color: #d787ff }
.fg178 { color: #d7af00 }
.fg179 { color: #d7af5f }
.fg180 { color: #d7af87 }
.fg181 { color: #d7afaf }
.fg182 { color: #d7afd7 }
.fg183 { color: #d7afff }
.fg184 { color: #d7d700 }
.fg185 { color: #d7d75f }
.fg186 { color: #d7d787 }
.fg187 { color: #d7d7af }
.fg188 { color: #d7d7d7 }
.fg189 { color: #d7d7ff }
.fg190 { color: #d7ff00 }
.fg191 { color: #d7ff5f }
.fg192 { color: #d7ff87 }
.fg193 { color: #d7ffaf }
.fg194 { color: #d7ffd7 }
.fg195 { color: #d7ffff }
.fg196 { color: #ff0000 }
.fg197 { color: #ff005f }
.fg198 { color: #ff0087 }
.fg199 { color: #ff00af }
.fg200 { color: #ff00d7 }
.fg201 { color: #ff00ff }
.fg202 { color: #ff5f00 }
.fg203 { color: #ff5f5f }
.fg204 { color: #ff5f87 }
.fg205 { color: #ff5faf }
.fg206 { color: #ff5fd7 }
.fg207 { color: #ff5fff }
.fg208 { color: #ff8700 }
.fg209 { color: #ff875f }
.fg210 { color: #ff8787 }
.fg211 { color: #ff87af }
.fg212 { color: #ff87d7 }
.fg213 { color: #ff87ff }
.fg214 { color: #ffaf00 }
.fg215 { color: #ffaf5f }
.fg216 { color: #ffaf87 }
.fg217 { color: #ffafaf }
.fg218 { color: #ffafd7 }
.fg219 { color: #ffafff }
.fg220 { color: #ffd700 }
.fg221 { color: #ffd75f }
.fg222 { color: #ffd787 }
.fg223 { color: #ffd7af }
.fg224 { color: #ffd7d7 }
.fg225 { color: #ffd7ff }
.fg226 { color: #ffff00 }
.fg227 { color: #ffff5f }
.fg228 { color: #ffff87 }
.fg229 { color: #ffffaf }
.fg230 { color: #ffffd7 }
.fg231 { color: #ffffff }
/* 24 shades of grey */
.fg232 { color: #080808 }
.fg233 { color: #121212 }
.fg234 { color: #1c1c1c }
.fg235 { color: #262626 }
.fg236 { color: #303030 }
.fg237 { color: #3a3a3a }
.fg238 { color: #444444 }
.fg239 { color: #4e4e4e }
.fg240 { color: #585858 }
.fg241 { color: #626262 }
.fg242 { color: #6c6c6c }
.fg243 { color: #767676 }
.fg244 { color: #808080 }
.fg245 { color: #8a8a8a }
.fg246 { color: #949494 }
.fg247 { color: #9e9e9e }
.fg248 { color: #a8a8a8 }
.fg249 { color: #b2b2b2 }
.fg250 { color: #bcbcbc }
.fg251 { color: #c6c6c6 }
.fg252 { color: #d0d0d0 }
.fg253 { color: #dadada }
.fg254 { color: #e4e4e4 }
.fg255 { color: #eeeeee }
/* Backgrounds: */
/* ansi colors */
.bg0 { background-color: #000000 }
.bg1 { background-color: #CC0000 }
.bg2 { background-color: #4E9A06 }
.bg3 { background-color: #C4A000 }
.bg4 { background-color: #3465A4 }
.bg5 { background-color: #75507B }
.bg6 { background-color: #06989A }
.bg7 { background-color: #D3D7CF }
.bg8 { background-color: #555753 }
.bg9 { background-color: #EF2929 }
.bg10 { background-color: #8AE234 }
.bg11 { background-color: #FCE94F }
.bg12 { background-color: #729FCF }
.bg13 { background-color: #AD7FA8 }
.bg14 { background-color: #34E2E2 }
.bg15 { background-color: #EEEEEC }
/* 216 rgb colors */
.bg16 { background-color: #000000 }
.bg17 { background-color: #00005f }
.bg18 { background-color: #000087 }
.bg19 { background-color: #0000af }
.bg20 { background-color: #0000d7 }
.bg21 { background-color: #0000ff }
.bg22 { background-color: #005f00 }
.bg23 { background-color: #005f5f }
.bg24 { background-color: #005f87 }
.bg25 { background-color: #005faf }
.bg26 { background-color: #005fd7 }
.bg27 { background-color: #005fff }
.bg28 { background-color: #008700 }
.bg29 { background-color: #00875f }
.bg30 { background-color: #008787 }
.bg31 { background-color: #0087af }
.bg32 { background-color: #0087d7 }
.bg33 { background-color: #0087ff }
.bg34 { background-color: #00af00 }
.bg35 { background-color: #00af5f }
.bg36 { background-color: #00af87 }
.bg37 { background-color: #00afaf }
.bg38 { background-color: #00afd7 }
.bg39 { background-color: #00afff }
.bg40 { background-color: #00d700 }
.bg41 { background-color: #00d75f }
.bg42 { background-color: #00d787 }
.bg43 { background-color: #00d7af }
.bg44 { background-color: #00d7d7 }
.bg45 { background-color: #00d7ff }
.bg46 { background-color: #00ff00 }
.bg47 { background-color: #00ff5f }
.bg48 { background-color: #00ff87 }
.bg49 { background-color: #00ffaf }
.bg50 { background-color: #00ffd7 }
.bg51 { background-color: #00ffff }
.bg52 { background-color: #5f0000 }
.bg53 { background-color: #5f005f }
.bg54 { background-color: #5f0087 }
.bg55 { background-color: #5f00af }
.bg56 { background-color: #5f00d7 }
.bg57 { background-color: #5f00ff }
.bg58 { background-color: #5f5f00 }
.bg59 { background-color: #5f5f5f }
.bg60 { background-color: #5f5f87 }
.bg61 { background-color: #5f5faf }
.bg62 { background-color: #5f5fd7 }
.bg63 { background-color: #5f5fff }
.bg64 { background-color: #5f8700 }
.bg65 { background-color: #5f875f }
.bg66 { background-color: #5f8787 }
.bg67 { background-color: #5f87af }
.bg68 { background-color: #5f87d7 }
.bg69 { background-color: #5f87ff }
.bg70 { background-color: #5faf00 }
.bg71 { background-color: #5faf5f }
.bg72 { background-color: #5faf87 }
.bg73 { background-color: #5fafaf }
.bg74 { background-color: #5fafd7 }
.bg75 { background-color: #5fafff }
.bg76 { background-color: #5fd700 }
.bg77 { background-color: #5fd75f }
.bg78 { background-color: #5fd787 }
.bg79 { background-color: #5fd7af }
.bg80 { background-color: #5fd7d7 }
.bg81 { background-color: #5fd7ff }
.bg82 { background-color: #5fff00 }
.bg83 { background-color: #5fff5f }
.bg84 { background-color: #5fff87 }
.bg85 { background-color: #5fffaf }
.bg86 { background-color: #5fffd7 }
.bg87 { background-color: #5fffff }
.bg88 { background-color: #870000 }
.bg89 { background-color: #87005f }
.bg90 { background-color: #870087 }
.bg91 { background-color: #8700af }
.bg92 { background-color: #8700d7 }
.bg93 { background-color: #8700ff }
.bg94 { background-color: #875f00 }
.bg95 { background-color: #875f5f }
.bg96 { background-color: #875f87 }
.bg97 { background-color: #875faf }
.bg98 { background-color: #875fd7 }
.bg99 { background-color: #875fff }
.bg100 { background-color: #878700 }
.bg101 { background-color: #87875f }
.bg102 { background-color: #878787 }
.bg103 { background-color: #8787af }
.bg104 { background-color: #8787d7 }
.bg105 { background-color: #8787ff }
.bg106 { background-color: #87af00 }
.bg107 { background-color: #87af5f }
.bg108 { background-color: #87af87 }
.bg109 { background-color: #87afaf }
.bg110 { background-color: #87afd7 }
.bg111 { background-color: #87afff }
.bg112 { background-color: #87d700 }
.bg113 { background-color: #87d75f }
.bg114 { background-color: #87d787 }
.bg115 { background-color: #87d7af }
.bg116 { background-color: #87d7d7 }
.bg117 { background-color: #87d7ff }
.bg118 { background-color: #87ff00 }
.bg119 { background-color: #87ff5f }
.bg120 { background-color: #87ff87 }
.bg121 { background-color: #87ffaf }
.bg122 { background-color: #87ffd7 }
.bg123 { background-color: #87ffff }
.bg124 { background-color: #af0000 }
.bg125 { background-color: #af005f }
.bg126 { background-color: #af0087 }
.bg127 { background-color: #af00af }
.bg128 { background-color: #af00d7 }
.bg129 { background-color: #af00ff }
.bg130 { background-color: #af5f00 }
.bg131 { background-color: #af5f5f }
.bg132 { background-color: #af5f87 }
.bg133 { background-color: #af5faf }
.bg134 { background-color: #af5fd7 }
.bg135 { background-color: #af5fff }
.bg136 { background-color: #af8700 }
.bg137 { background-color: #af875f }
.bg138 { background-color: #af8787 }
.bg139 { background-color: #af87af }
.bg140 { background-color: #af87d7 }
.bg141 { background-color: #af87ff }
.bg142 { background-color: #afaf00 }
.bg143 { background-color: #afaf5f }
.bg144 { background-color: #afaf87 }
.bg145 { background-color: #afafaf }
.bg146 { background-color: #afafd7 }
.bg147 { background-color: #afafff }
.bg148 { background-color: #afd700 }
.bg149 { background-color: #afd75f }
.bg150 { background-color: #afd787 }
.bg151 { background-color: #afd7af }
.bg152 { background-color: #afd7d7 }
.bg153 { background-color: #afd7ff }
.bg154 { background-color: #afff00 }
.bg155 { background-color: #afff5f }
.bg156 { background-color: #afff87 }
.bg157 { background-color: #afffaf }
.bg158 { background-color: #afffd7 }
.bg159 { background-color: #afffff }
.bg160 { background-color: #d70000 }
.bg161 { background-color: #d7005f }
.bg162 { background-color: #d70087 }
.bg163 { background-color: #d700af }
.bg164 { background-color: #d700d7 }
.bg165 { background-color: #d700ff }
.bg166 { background-color: #d75f00 }
.bg167 { background-color: #d75f5f }
.bg168 { background-color: #d75f87 }
.bg169 { background-color: #d75faf }
.bg170 { background-color: #d75fd7 }
.bg171 { background-color: #d75fff }
.bg172 { background-color: #d78700 }
.bg173 { background-color: #d7875f }
.bg174 { background-color: #d78787 }
.bg175 { background-color: #d787af }
.bg176 { background-color: #d787d7 }
.bg177 { background-color: #d787ff }
.bg178 { background-color: #d7af00 }
.bg179 { background-color: #d7af5f }
.bg180 { background-color: #d7af87 }
.bg181 { background-color: #d7afaf }
.bg182 { background-color: #d7afd7 }
.bg183 { background-color: #d7afff }
.bg184 { background-color: #d7d700 }
.bg185 { background-color: #d7d75f }
.bg186 { background-color: #d7d787 }
.bg187 { background-color: #d7d7af }
.bg188 { background-color: #d7d7d7 }
.bg189 { background-color: #d7d7ff }
.bg190 { background-color: #d7ff00 }
.bg191 { background-color: #d7ff5f }
.bg192 { background-color: #d7ff87 }
.bg193 { background-color: #d7ffaf }
.bg194 { background-color: #d7ffd7 }
.bg195 { background-color: #d7ffff }
.bg196 { background-color: #ff0000 }
.bg197 { background-color: #ff005f }
.bg198 { background-color: #ff0087 }
.bg199 { background-color: #ff00af }
.bg200 { background-color: #ff00d7 }
.bg201 { background-color: #ff00ff }
.bg202 { background-color: #ff5f00 }
.bg203 { background-color: #ff5f5f }
.bg204 { background-color: #ff5f87 }
.bg205 { background-color: #ff5faf }
.bg206 { background-color: #ff5fd7 }
.bg207 { background-color: #ff5fff }
.bg208 { background-color: #ff8700 }
.bg209 { background-color: #ff875f }
.bg210 { background-color: #ff8787 }
.bg211 { background-color: #ff87af }
.bg212 { background-color: #ff87d7 }
.bg213 { background-color: #ff87ff }
.bg214 { background-color: #ffaf00 }
.bg215 { background-color: #ffaf5f }
.bg216 { background-color: #ffaf87 }
.bg217 { background-color: #ffafaf }
.bg218 { background-color: #ffafd7 }
.bg219 { background-color: #ffafff }
.bg220 { background-color: #ffd700 }
.bg221 { background-color: #ffd75f }
.bg222 { background-color: #ffd787 }
.bg223 { background-color: #ffd7af }
.bg224 { background-color: #ffd7d7 }
.bg225 { background-color: #ffd7ff }
.bg226 { background-color: #ffff00 }
.bg227 { background-color: #ffff5f }
.bg228 { background-color: #ffff87 }
.bg229 { background-color: #ffffaf }
.bg230 { background-color: #ffffd7 }
.bg231 { background-color: #ffffff }
/* 24 shades of grey */
.bg232 { background-color: #080808 }
.bg233 { background-color: #121212 }
.bg234 { background-color: #1c1c1c }
.bg235 { background-color: #262626 }
.bg236 { background-color: #303030 }
.bg237 { background-color: #3a3a3a }
.bg238 { background-color: #444444 }
.bg239 { background-color: #4e4e4e }
.bg240 { background-color: #585858 }
.bg241 { background-color: #626262 }
.bg242 { background-color: #6c6c6c }
.bg243 { background-color: #767676 }
.bg244 { background-color: #808080 }
.bg245 { background-color: #8a8a8a }
.bg246 { background-color: #949494 }
.bg247 { background-color: #9e9e9e }
.bg248 { background-color: #a8a8a8 }
.bg249 { background-color: #b2b2b2 }
.bg250 { background-color: #bcbcbc }
.bg251 { background-color: #c6c6c6 }
.bg252 { background-color: #d0d0d0 }
.bg253 { background-color: #dadada }
.bg254 { background-color: #e4e4e4 }
.bg255 { background-color: #eeeeee }
.meta {
.avatar {
width: 24px;
padding: 1px;
background-color: white;
border: 1px solid #ccc;
}
}
.description {
color: #3e3e3e;
font-family: arial, helvetica;
font-size: 18px;
margin: 20px 0;
}
}