From 55e2c99899036ef6fa624bd5e1c4faabe08dc03b Mon Sep 17 00:00:00 2001 From: Matthew McClure Date: Wed, 8 May 2013 13:29:02 -0700 Subject: [PATCH] removed styles from pseudo elements to make broad styling possible. updated copyright link in package.json --- package.json | 2 +- src/css/video-js.css | 102 +++++++++++++------------------------------ 2 files changed, 32 insertions(+), 72 deletions(-) diff --git a/package.json b/package.json index 51ec0a26c..b064cf6bf 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "video.js", "description": "An HTML5 and Flash video player with a common API and skin for both.", "version": "3.2.3", - "copyright": "Copyright 2013 Brightcove, Inc. https://github.com/zencoder/video-js/blob/master/LICENSE", + "copyright": "Copyright 2013 Brightcove, Inc. https://github.com/videojs/video.js/blob/master/LICENSE", "keywords": [ "html5", "flash", diff --git a/src/css/video-js.css b/src/css/video-js.css index 495792a5b..568ad6258 100644 --- a/src/css/video-js.css +++ b/src/css/video-js.css @@ -4,11 +4,11 @@ Version GENERATED_AT_BUILD */ @font-face{ - font-family:'FontAwesome'; - src:url('http://netdna.bootstrapcdn.com/font-awesome/3.0.2/font/fontawesome-webfont.eot?v=3.0.2'); - src:url('http://netdna.bootstrapcdn.com/font-awesome/3.0.2/font/fontawesome-webfont.eot?#iefix&v=3.0.2') format('embedded-opentype'), - url('http://netdna.bootstrapcdn.com/font-awesome/3.0.2/font/fontawesome-webfont.woff?v=3.0.2') format('woff'), - url('http://netdna.bootstrapcdn.com/font-awesome/3.0.2/font/fontawesome-webfont.ttf?v=3.0.2') format('truetype'); + font-family:'VideoJS'; + src:url('/font/VideoJS.eot'); + src:url('/font/VideoJS.eot') format('embedded-opentype'), + url('/font/VideoJS.woff') format('woff'), + url('/font/VideoJS.ttf') format('truetype'); font-weight:normal; font-style:normal } @@ -102,7 +102,6 @@ body.vjs-full-window { /* Individual tracks */ .video-js .vjs-text-track { display: none; - color: #fff; font-size: 1.4em; text-align: center; margin-bottom: 0.1em; @@ -159,6 +158,9 @@ so you can upgrade to newer versions easier. You can remove all these styles by /* Base UI Component Classes -------------------------------------------------------------------------------- */ +.vjs-default-skin { + color: #ccc; +} /* Slider - used for Volume bar and Seek bar */ .vjs-default-skin .vjs-slider { @@ -189,10 +191,9 @@ so you can upgrade to newer versions easier. You can remove all these styles by .vjs-default-skin .vjs-slider-handle:before { /*content: "\f111";*/ /* Circle icon = f111 */ - content: "\f04d"; /* Square icon */ - color: #ccc; - font-family: FontAwesome; - font-size: 0.8em; + content: "\e009"; /* Square icon */ + font-family: VideoJS; + font-size: 1em; line-height: 1; text-align: center; text-shadow: 0em 0em 1em #fff; @@ -209,10 +210,6 @@ so you can upgrade to newer versions easier. You can remove all these styles by filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); } -.vjs-default-skin .vjs-slider-handle:focus { - color: #fff; -} - /* Control Bar -------------------------------------------------------------------------------- */ /* The default control bar. Created by controls.js */ @@ -229,7 +226,6 @@ so you can upgrade to newer versions easier. You can remove all these styles by margin: 0; /* Height includes any margin you want above or below control items */ height: 3.0em; - color: #fff; background-color: rgb(0, 0, 0); /* Slight blue so it can be seen more easily on black. */ background-color: rgba(7, 40, 50, 0.7); @@ -253,8 +249,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by /* FontAwsome button icons */ .vjs-default-skin .vjs-control:before { - font-family: FontAwesome; - color: #ccc; + font-family: VideoJS; font-size: 1.5em; line-height: 2; position: absolute; @@ -269,7 +264,6 @@ so you can upgrade to newer versions easier. You can remove all these styles by /* Replacement for focus outline */ .vjs-default-skin .vjs-control:focus:before, .vjs-default-skin .vjs-control:hover:before { - color: #fff; text-shadow: 0em 0em 1em rgba(255, 255, 255, 1); } @@ -285,10 +279,10 @@ so you can upgrade to newer versions easier. You can remove all these styles by cursor: pointer; } .vjs-default-skin .vjs-play-control:before { - content: "\f04b"; /* Play Icon */ + content: "\e001"; /* Play Icon */ } .vjs-default-skin.vjs-playing .vjs-play-control:before { - content: "\f04c"; /* Pause Icon */ + content: "\e002"; /* Pause Icon */ } /* Rewind @@ -306,19 +300,19 @@ so you can upgrade to newer versions easier. You can remove all these styles by } .vjs-default-skin .vjs-mute-control:before, .vjs-default-skin .vjs-volume-menu-button:before { - content: "\f028"; /* Full volume */ + content: "\e006"; /* Full volume */ } .vjs-default-skin .vjs-mute-control.vjs-vol-0:before, .vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before { - content: "\f026"; /* No volume */ + content: "\e003"; /* No volume */ } .vjs-default-skin .vjs-mute-control.vjs-vol-1:before, .vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before { - content: "\f027"; /* Half volume */ + content: "\e004"; /* Half volume */ } .vjs-default-skin .vjs-mute-control.vjs-vol-2:before, .vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before { - content: "\f028"; /* Full volume */ + content: "\e005"; /* Full volume */ } .vjs-default-skin .vjs-volume-control { @@ -440,7 +434,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by } .vjs-default-skin .vjs-seek-handle { - width: 1em; + width: 1.5em; height: 100%; } @@ -469,10 +463,10 @@ so you can upgrade to newer versions easier. You can remove all these styles by float: right; } .vjs-default-skin .vjs-fullscreen-control:before { - content: "\f065"; + content: "\e000"; /* Enter full screen */ } .vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before { - content: "\f066"; + content: "\e00b"; /* Exit full screen */ } /* Big Play Button (at start) @@ -532,9 +526,8 @@ so you can upgrade to newer versions easier. You can remove all these styles by } .vjs-default-skin .vjs-big-play-button:before { - content: "\f04b"; /* Play icon */ - font-family: FontAwesome; - color: #ccc; + content: "\e001"; /* Play icon */ + font-family: VideoJS; font-size: 3em; line-height: 2.66; text-shadow: 0.05em 0.05em 0.1em #000; @@ -545,9 +538,6 @@ so you can upgrade to newer versions easier. You can remove all these styles by width: 100%; height: 100%; } -.vjs-default-skin:hover .vjs-big-play-button:before { - color: #fff; -} /* Loading Spinner ---------------------------------------------------------*/ @@ -575,9 +565,8 @@ so you can upgrade to newer versions easier. You can remove all these styles by } .vjs-default-skin .vjs-loading-spinner:before { - content: "\f110"; /* Play icon */ - font-family: FontAwesome; - color: #ccc; + content: "\e00a"; /* Loading spinner icon */ + font-family: VideoJS; position: absolute; width: 1em; @@ -590,16 +579,14 @@ so you can upgrade to newer versions easier. You can remove all these styles by Text gradient plus a text shadow doesn't work and `background-clip: text` only works in Webkit. */ .vjs-default-skin .vjs-loading-spinner:after { - content: "\f110"; /* Play icon */ - font-family: FontAwesome; - color: #ccc; + content: "\e00a"; /* Loading spinner icon */ + font-family: VideoJS; position: absolute; width: 1em; height: 1em; text-align: center; - background: -webkit-linear-gradient(#fff, #999); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @@ -705,13 +692,12 @@ so you can upgrade to newer versions easier. You can remove all these styles by line-height: 2em; padding: 0; margin: 0 0 0.3em 0; - color: #fff; font-weight: bold; cursor: default; } /* Subtitles Button */ -.vjs-default-skin .vjs-subtitles-button:before { content: "\f075"; } +.vjs-default-skin .vjs-subtitles-button:before { content: "\e00c"; } /* There's unfortunately no CC button in FontAwesome, so we need to manually create one. Please +1 the fontawesome request. @@ -720,10 +706,9 @@ so you can upgrade to newer versions easier. You can remove all these styles by font-size: 1em; /* Font icons are 1.5em */ } .vjs-default-skin .vjs-captions-button:before { - display: none; - font-family: FontAwesome; - color: #ccc; - font-size: 1em; + content: "\e008"; + font-family: VideoJS; + font-size: 1.5em; line-height: 2; position: absolute; top: 0; @@ -733,36 +718,11 @@ so you can upgrade to newer versions easier. You can remove all these styles by text-align: center; text-shadow: none; } -.vjs-default-skin .vjs-captions-button .vjs-control-content:before { - content: "CC"; - font-family: Arial, sans-serif; - line-height: 1.4; /* Adjusts back to the same height as font icons */ - font-weight: bold; - color: #333; - background-color: #ccc; - position: absolute; - height: 1.4em; - width: 2em; - left: 1em; - top: 0.9em; - text-align: center; - /* Add a little inset with a white top shadow */ - text-shadow: 1px 1px 1px rgba(255, 255, 255, 1); - -webkit-border-radius: 0.4em; - -moz-border-radius: 0.4em; - border-radius: 0.4em; - - -webkit-box-shadow: 1px 1px 1em rgba(0, 0, 0, 0.5); - -moz-box-shadow: 1px 1px 1em rgba(0, 0, 0, 0.5); - box-shadow: 1px 1px 1em rgba(0, 0, 0, 0.5); -} /* Replacement for focus outline */ .vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before, .vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before { - background-color: #fff; - color: #555; -webkit-box-shadow: 0 0 1em rgba(255, 255, 255, 1); -moz-box-shadow: 0 0 1em rgba(255, 255, 255, 1); box-shadow: 0 0 1em rgba(255, 255, 255, 1);