Commit d191e0c8 authored by laron's avatar laron
Browse files

Add Awesome Font and first JS control for player

parent 0d4db678
/******************/
/*HTML TAG DISPLAYS */
/******************/
audio {display:none;}
a {
color:black;
text-decoration: none;
......
......@@ -11,18 +11,34 @@
#player .label { background-color:#FF6633; }
#player .controls, #player hr,player .item,#player img{border-color:#FF6633;}
#Player, #player.simple, #player.simple *{
background-color:#ff6633;
color:white !important;
}
#player.simple .playlist{
background-color:#fff;
color:#FF6633 !important;
}
.episode.inline{
color:#999;
}
/* FONTS */
#metaNav {
font-family: "Reglo";
text-transform: uppercase;
font-size: 0.8em;
}
h1.title{
text-transform: uppercase;
}
.date, .dateBloc {
text-align: center;
font-family: "Reglo";
text-transform: uppercase;
}
.inline .date, .resume .date{
text-align: center;
}
.dateBloc span{display:block;}
.dateBloc *{line-height: 100%;}
.dateBloc .day {font-size: 2.2em;}
......@@ -41,6 +57,7 @@ h1.title{
padding: 0.2em 0 0.2em 0;
margin: 0.2em 0 0.2em 0;
}
.iconLabel{margin-left:0.1em;}
/* SIZES
@xxs: 8px;
......@@ -96,15 +113,17 @@ body {
.symbol{
font-size: 3em !important;
vertical-align:middle;
display:inline-block;
font-size: 3em;
font-family: "RegloSymbol" !important;
line-height: 70% !important;
}
.symbol.big{
font-size: 4em !important;
.big{
font-size: 400%;
}
.symbol.huge{
font-size: 10em !important;
.huge{
font-size: 800%;
}
.label {
......@@ -112,6 +131,8 @@ body {
font-family: "Reglo";
letter-spacing:1px;
font-size:1.3em;
}
.label.relative{
background-color:black;
position: absolute;
left:10px;
......@@ -162,8 +183,6 @@ button.tag {
z-index:1000;
top:0px;
width:100%;
font-family: "Reglo";
text-transform: uppercase;
}
#metaNav input {float:right;width:150px;max-width:25%;}
#metaNav nav{
......
......@@ -47,4 +47,21 @@
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Symbols';
src: url('../reglo/RESYMBOL.otf');
font-weight: normal;
font-style: normal;
}
.resymbol{
vertical-align:middle !important;
display:inline-block !important;
font-family: 'Symbols' !important;
font-size:3em;
}
.resymbol.big, .icons.big{
font-size:400%;
}
.resymbol.huge, .icons.huge{
font-size:800%;
}
This diff is collapsed.
/* BOOTSTRAP SPECIFIC CLASSES
* -------------------------- */
/* Bootstrap 2.0 sprites.less reset */
[class^="icon-"],
[class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
/* more sprites.less reset */
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: none;
}
/* keeps Bootstrap styles with and without icons the same */
.btn, .nav {
[class^="icon-"],
[class*=" icon-"] {
// display: inline;
&.icon-large { line-height: .9em; }
&.icon-spin { display: inline-block; }
}
}
.nav-tabs, .nav-pills {
[class^="icon-"],
[class*=" icon-"] {
&, &.icon-large { line-height: .9em; }
}
}
.btn {
[class^="icon-"],
[class*=" icon-"] {
&.pull-left, &.pull-right {
&.icon-2x { margin-top: .18em; }
}
&.icon-spin.icon-large { line-height: .8em; }
}
}
.btn.btn-small {
[class^="icon-"],
[class*=" icon-"] {
&.pull-left, &.pull-right {
&.icon-2x { margin-top: .25em; }
}
}
}
.btn.btn-large {
[class^="icon-"],
[class*=" icon-"] {
margin-top: 0; // overrides bootstrap default
&.pull-left, &.pull-right {
&.icon-2x { margin-top: .05em; }
}
&.pull-left.icon-2x { margin-right: .2em; }
&.pull-right.icon-2x { margin-left: .2em; }
}
}
/* Fixes alignment in nav lists */
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
line-height: inherit;
}
/* FONT AWESOME CORE
* -------------------------- */
[class^="icon-"],
[class*=" icon-"] {
.icon-FontAwesome();
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
text-decoration: inherit;
display: inline-block;
speak: none;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
vertical-align: -10%;
font-size: 4/3em;
}
/* makes sure icons active on rollover in links */
a {
[class^="icon-"],
[class*=" icon-"] {
display: inline;
}
}
/* increased font size for icon-large */
[class^="icon-"],
[class*=" icon-"] {
&.icon-fixed-width {
display: inline-block;
width: 16/14em;
text-align: right;
padding-right: 4/14em;
&.icon-large {
width: 20/14em;
}
}
}
.icons-ul {
margin-left: @icons-li-width;
list-style-type: none;
> li { position: relative; }
.icon-li {
position: absolute;
left: -@icons-li-width;
width: @icons-li-width;
text-align: center;
line-height: inherit;
}
}
// allows usage of the hide class directly on font awesome icons
[class^="icon-"],
[class*=" icon-"] {
&.hide {
display: none;
}
}
.icon-muted { color: @iconMuted; }
.icon-light { color: @iconLight; }
.icon-dark { color: @iconDark; }
// Icon Borders
// -------------------------
.icon-border {
border: solid 1px @borderColor;
padding: .2em .25em .15em;
.border-radius(3px);
}
// Icon Sizes
// -------------------------
.icon-2x {
font-size: 2em;
&.icon-border {
border-width: 2px;
.border-radius(4px);
}
}
.icon-3x {
font-size: 3em;
&.icon-border {
border-width: 3px;
.border-radius(5px);
}
}
.icon-4x {
font-size: 4em;
&.icon-border {
border-width: 4px;
.border-radius(6px);
}
}
.icon-5x {
font-size: 5em;
&.icon-border {
border-width: 5px;
.border-radius(7px);
}
}
// Floats & Margins
// -------------------------
// Quick floats
.pull-right { float: right; }
.pull-left { float: left; }
[class^="icon-"],
[class*=" icon-"] {
&.pull-left {
margin-right: .3em;
}
&.pull-right {
margin-left: .3em;
}
}
/* EXTRAS
* -------------------------- */
/* Stacked and layered icon */
.icon-stack();
/* Animated rotating icon */
.icon-spin {
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
/* Prevent stack and spinners from being taken inline when inside a link */
a .icon-stack,
a .icon-spin {
display: inline-block;
text-decoration: none;
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(359deg); }
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
/* Icon rotations and mirroring */
.icon-rotate-90:before {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.icon-rotate-180:before {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.icon-rotate-270:before {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.icon-flip-horizontal:before {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.icon-flip-vertical:before {
-webkit-transform: scale(1, -1);
-moz-transform: scale(1, -1);
-ms-transform: scale(1, -1);
-o-transform: scale(1, -1);
transform: scale(1, -1);
}
/* ensure rotation occurs inside anchor tags */
a {
.icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical {
&:before { display: inline-block; }
}
}
/*!
* Font Awesome 3.2.1
* the iconic font designed for Bootstrap
* ------------------------------------------------------------------------------
* The full suite of pictographic icons, examples, and documentation can be
* found at http://fontawesome.io. Stay up to date on Twitter at
* http://twitter.com/fontawesome.
*
* License
* ------------------------------------------------------------------------------
* - The Font Awesome font is licensed under SIL OFL 1.1 -
* http://scripts.sil.org/OFL
* - Font Awesome CSS, LESS, and SASS files are licensed under MIT License -
* http://opensource.org/licenses/mit-license.html
* - Font Awesome documentation licensed under CC BY 3.0 -
* http://creativecommons.org/licenses/by/3.0/
* - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
* "Font Awesome by Dave Gandy - http://fontawesome.io"
*
* Author - Dave Gandy
* ------------------------------------------------------------------------------
* Email: dave@fontawesome.io
* Twitter: http://twitter.com/davegandy
* Work: Lead Product Designer @ Kyruus - http://kyruus.com
*/
@import "variables.less";
@import "mixins.less";
@import "path.less";
@import "core.less";
@import "bootstrap.less";
@import "extras.less";
@import "icons.less";
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.icon-glass:before { content: @glass; }
.icon-music:before { content: @music; }
.icon-search:before { content: @search; }
.icon-envelope-alt:before { content: @envelope-alt; }
.icon-heart:before { content: @heart; }
.icon-star:before { content: @star; }
.icon-star-empty:before { content: @star-empty; }
.icon-user:before { content: @user; }
.icon-film:before { content: @film; }
.icon-th-large:before { content: @th-large; }
.icon-th:before { content: @th; }
.icon-th-list:before { content: @th-list; }
.icon-ok:before { content: @ok; }
.icon-remove:before { content: @remove; }
.icon-zoom-in:before { content: @zoom-in; }
.icon-zoom-out:before { content: @zoom-out; }
.icon-power-off:before,
.icon-off:before { content: @off; }
.icon-signal:before { content: @signal; }
.icon-gear:before,
.icon-cog:before { content: @cog; }
.icon-trash:before { content: @trash; }
.icon-home:before { content: @home; }
.icon-file-alt:before { content: @file-alt; }
.icon-time:before { content: @time; }
.icon-road:before { content: @road; }
.icon-download-alt:before { content: @download-alt; }
.icon-download:before { content: @download; }
.icon-upload:before { content: @upload; }
.icon-inbox:before { content: @inbox; }
.icon-play-circle:before { content: @play-circle; }
.icon-rotate-right:before,
.icon-repeat:before { content: @repeat; }
.icon-refresh:before { content: @refresh; }
.icon-list-alt:before { content: @list-alt; }
.icon-lock:before { content: @lock; }
.icon-flag:before { content: @flag; }
.icon-headphones:before { content: @headphones; }
.icon-volume-off:before { content: @volume-off; }
.icon-volume-down:before { content: @volume-down; }
.icon-volume-up:before { content: @volume-up; }
.icon-qrcode:before { content: @qrcode; }
.icon-barcode:before { content: @barcode; }
.icon-tag:before { content: @tag; }
.icon-tags:before { content: @tags; }
.icon-book:before { content: @book; }
.icon-bookmark:before { content: @bookmark; }
.icon-print:before { content: @print; }
.icon-camera:before { content: @camera; }
.icon-font:before { content: @font; }
.icon-bold:before { content: @bold; }
.icon-italic:before { content: @italic; }
.icon-text-height:before { content: @text-height; }
.icon-text-width:before { content: @text-width; }
.icon-align-left:before { content: @align-left; }
.icon-align-center:before { content: @align-center; }
.icon-align-right:before { content: @align-right; }
.icon-align-justify:before { content: @align-justify; }
.icon-list:before { content: @list; }
.icon-indent-left:before { content: @indent-left; }
.icon-indent-right:before { content: @indent-right; }
.icon-facetime-video:before { content: @facetime-video; }
.icon-picture:before { content: @picture; }
.icon-pencil:before { content: @pencil; }
.icon-map-marker:before { content: @map-marker; }
.icon-adjust:before { content: @adjust; }
.icon-tint:before { content: @tint; }
.icon-edit:before { content: @edit; }
.icon-share:before { content: @share; }
.icon-check:before { content: @check; }
.icon-move:before { content: @move; }
.icon-step-backward:before { content: @step-backward; }
.icon-fast-backward:before { content: @fast-backward; }
.icon-backward:before { content: @backward; }
.icon-play:before { content: @play; }
.icon-pause:before { content: @pause; }
.icon-stop:before { content: @stop; }
.icon-forward:before { content: @forward; }
.icon-fast-forward:before { content: @fast-forward; }
.icon-step-forward:before { content: @step-forward; }
.icon-eject:before { content: @eject; }
.icon-chevron-left:before { content: @chevron-left; }
.icon-chevron-right:before { content: @chevron-right; }
.icon-plus-sign:before { content: @plus-sign; }
.icon-minus-sign:before { content: @minus-sign; }
.icon-remove-sign:before { content: @remove-sign; }
.icon-ok-sign:before { content: @ok-sign; }
.icon-question-sign:before { content: @question-sign; }
.icon-info-sign:before { content: @info-sign; }
.icon-screenshot:before { content: @screenshot; }
.icon-remove-circle:before { content: @remove-circle; }
.icon-ok-circle:before { content: @ok-circle; }
.icon-ban-circle:before { content: @ban-circle; }
.icon-arrow-left:before { content: @arrow-left; }
.icon-arrow-right:before { content: @arrow-right; }
.icon-arrow-up:before { content: @arrow-up; }
.icon-arrow-down:before { content: @arrow-down; }
.icon-mail-forward:before,
.icon-share-alt:before { content: @share-alt; }
.icon-resize-full:before { content: @resize-full; }
.icon-resize-small:before { content: @resize-small; }
.icon-plus:before { content: @plus; }
.icon-minus:before { content: @minus; }
.icon-asterisk:before { content: @asterisk; }
.icon-exclamation-sign:before { content: @exclamation-sign; }
.icon-gift:before { content: @gift; }
.icon-leaf:before { content: @leaf; }
.icon-fire:before { content: @fire; }
.icon-eye-open:before { content: @eye-open; }
.icon-eye-close:before { content: @eye-close; }
.icon-warning-sign:before { content: @warning-sign; }
.icon-plane:before { content: @plane; }
.icon-calendar:before { content: @calendar; }
.icon-random:before { content: @random; }
.icon-comment:before { content: @comment; }
.icon-magnet:before { content: @magnet; }
.icon-chevron-up:before { content: @chevron-up; }
.icon-chevron-down:before { content: @chevron-down; }
.icon-retweet:before { content: @retweet; }
.icon-shopping-cart:before { content: @shopping-cart; }
.icon-folder-close:before { content: @folder-close; }
.icon-folder-open:before { content: @folder-open; }
.icon-resize-vertical:before { content: @resize-vertical; }
.icon-resize-horizontal:before { content: @resize-horizontal; }
.icon-bar-chart:before { content: @bar-chart; }
.icon-twitter-sign:before { content: @twitter-sign; }
.icon-facebook-sign:before { content: @facebook-sign; }
.icon-camera-retro:before { content: @camera-retro; }
.icon-key:before { content: @key; }
.icon-gears:before,
.icon-cogs:before { content: @cogs; }
.icon-comments:before { content: @comments; }
.icon-thumbs-up-alt:before { content: @thumbs-up-alt; }
.icon-thumbs-down-alt:before { content: @thumbs-down-alt; }
.icon-star-half:before { content: @star-half; }
.icon-heart-empty:before { content: @heart-empty; }
.icon-signout:before { content: @signout; }
.icon-linkedin-sign:before { content: @linkedin-sign; }
.icon-pushpin:before { content: @pushpin; }
.icon-external-link:before { content: @external-link; }
.icon-signin:before { content: @signin; }