aboutsummaryrefslogtreecommitdiffstats
path: root/mediagoblin/static/css
diff options
context:
space:
mode:
Diffstat (limited to 'mediagoblin/static/css')
-rw-r--r--mediagoblin/static/css/audio.css84
-rw-r--r--mediagoblin/static/css/base.css748
l---------mediagoblin/static/css/extlib/reset.css1
-rw-r--r--mediagoblin/static/css/vjs-mg-skin.css415
4 files changed, 1248 insertions, 0 deletions
diff --git a/mediagoblin/static/css/audio.css b/mediagoblin/static/css/audio.css
new file mode 100644
index 00000000..e007a0e1
--- /dev/null
+++ b/mediagoblin/static/css/audio.css
@@ -0,0 +1,84 @@
+.audio-spectrogram {
+ position: relative;
+}
+.playhead {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: rgba(134, 212, 177, 0.3);
+ border-right: thin solid #ffaa00;
+ height: 100%;
+ -webkit-transition: width .1s ease-out;
+ -moz-transition: width .1s ease-out;
+ transition: width .1s ease-out;
+}
+.audio-control-play-pause {
+ position: absolute;
+ bottom: 0;
+ left: 5px;
+ cursor: pointer;
+ /* background: rgba(0, 0, 0, 0.7); */
+ font-size: 40px;
+ width: 50px;
+ text-shadow: 0 0 10px black;
+}
+ .audio-control-play-pause.playing {
+ color: #b71500;
+ letter-spacing: -17px;
+ margin-left: -7px;
+ }
+ .audio-control-play-pause.paused {
+ /* Warning: this means the the play button shows! */
+ color: rgb(134, 212, 177);
+ }
+
+.buffered-indicators {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 2px;
+}
+ .buffered-indicators div {
+ position: absolute;
+ height: 2px;
+ left: 0;
+ background: rgba(134, 177, 212, 1);
+
+ -webkit-transition: left 1s ease-out;
+ -moz-transition: left 1s ease-out;
+ transition: left 1s ease-out;
+
+ -webkit-transition: width 1s ease-out;
+ -moz-transition: width 1s ease-out;
+ transition: width 1s ease-out;
+
+ cursor: pointer;
+ }
+
+.seekbar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.audio-currentTime {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ background: rgba(0, 0, 0, 0.7);
+}
+
+.audio-volume {
+ position: absolute;
+ left: 50px;
+ bottom: 10px;
+ opacity: 0.3;
+ -moz-transition: opacity .1s ease-in-out;
+ -webkit-transition: opacity .1s ease-in-out;
+ transition: opacity .1s ease-in-out;
+}
+ .audio-spectrogram:hover .audio-volume {
+ opacity: 0.7;
+ }
diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
new file mode 100644
index 00000000..5b8226e6
--- /dev/null
+++ b/mediagoblin/static/css/base.css
@@ -0,0 +1,748 @@
+/* @font-face */
+
+@font-face {
+ font-family: 'Lato';
+ font-style: normal;
+ font-weight: 700;
+ src: local('Lato Bold'), local('Lato-Bold'), url('../fonts/Lato-Bold.ttf') format('truetype');
+}
+@font-face {
+ font-family: 'Lato';
+ font-style: italic;
+ font-weight: 400;
+ src: local('Lato Italic'), local('Lato-Italic'), url('../fonts/Lato-Italic.ttf') format('truetype');
+}
+@font-face {
+ font-family: 'Lato';
+ font-style: italic;
+ font-weight: 700;
+ src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('../fonts/Lato-BoldItalic.ttf') format('truetype');
+}
+@font-face {
+ font-family: 'Lato';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Lato Regular'), local('Lato-Regular'), url('../fonts/Lato-Regular.ttf') format('truetype');
+}
+
+body {
+ background-color: #161616;
+ color: #C3C3C3;
+ padding: 0;
+ margin: 0px;
+ height: 100%;
+ font: 16px 'Lato', 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
+}
+
+form {
+ margin: 0px;
+ padding: 0px;
+}
+
+/* text styles */
+
+h1,h2,h3,p {
+ margin-bottom: 20px;
+}
+
+h1,h2,h3 {
+ font-weight: bold;
+}
+
+h1 {
+ margin-top: 15px;
+ color: #fff;
+ font-size: 1.875em;
+}
+
+h2 {
+ font-size: 1.375em;
+ margin-top: 20px;
+ color: #fff;
+}
+
+h3 {
+ border-bottom: 1px solid #333;
+ font-size: 1.125em;
+}
+
+p {
+ margin-top: 0px;
+}
+
+a {
+ color: #86D4B1;
+}
+
+a.highlight {
+ color: #fff;
+}
+
+em {
+ font-style: italic;
+}
+
+strong {
+ font-weight: bold;
+}
+
+ul {
+ list-style: disc inside;
+}
+
+ol {
+ list-style: decimal inside;
+}
+
+label {
+ font-weight: normal;
+}
+
+input, textarea {
+ font-size:1em;
+ font-family:'Lato', sans-serif;
+}
+
+/* website structure */
+
+.container {
+ margin: auto;
+ width: 96%;
+ max-width: 940px;
+}
+
+header {
+ width: 100%;
+ max-width: 940px;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 0;
+ margin-bottom: 42px;
+ border-bottom: 1px solid #333;
+}
+
+.header_right {
+ margin: 8px;
+ display: inline-block;
+ float: right;
+}
+
+.header_dropdown {
+ margin-bottom: 20px;
+}
+
+.header_dropdown li {
+ margin: 4px 0;
+ list-style: none;
+}
+
+.header_dropdown p {
+ margin-top: 12px;
+ margin-bottom: 10px;
+}
+
+.dropdown_title {
+ font-size: 20px;
+}
+
+a.logo {
+ color: #fff;
+ font-weight: bold;
+}
+
+.logo img {
+ vertical-align: middle;
+ margin: 6px 8px 6px 0;
+}
+
+.mediagoblin_content {
+ width: 100%;
+ padding-bottom: 74px;
+}
+
+footer {
+ width: 100%;
+ height: 30px;
+ border-top: 1px solid #333;
+ bottom: 0px;
+ padding: 8px 0;
+ text-align: center;
+ font-size: 0.875em;
+ clear: both;
+}
+
+.media_pane {
+ width: 640px;
+ margin-left: 0px;
+ margin-right: 10px;
+ float: left;
+}
+
+.media_sidebar {
+ width: 280px;
+ margin-left: 10px;
+ float: left;
+}
+
+.profile_sidebar {
+ width: 340px;
+ margin-right: 10px;
+ float: left;
+}
+
+.profile_showcase {
+ width: 580px;
+ margin-left: 10px;
+ float: left;
+}
+
+/* common website elements */
+
+.button_action, .button_action_highlight, .button_form {
+ display: inline-block;
+ color: #c3c3c3;
+ background-color: #363636;
+ border: 1px solid;
+ border-color: #464646 #2B2B2B #252525;
+ border-radius: 4px;
+ padding: 3px 8px;
+ font-size: 16px;
+ text-decoration: none;
+ font-style: normal;
+ font-weight: bold;
+ cursor: pointer;
+}
+
+.button_action_highlight, .button_form {
+ background-color: #86D4B1;
+ border-color: #A2DEC3 #6CAA8E #5C9179;
+ color: #283F35;
+}
+
+.button_form {
+ min-width: 99px;
+ margin: 10px 0px 10px 15px;
+ text-align: center;
+ font-family: 'Lato', sans-serif;
+}
+
+.pagination {
+text-align: center;
+}
+
+.pagination_arrow {
+ margin: 5px;
+}
+
+.empty_space {
+ background-image: url("../images/empty_back.png");
+ font-style: italic;
+ text-align: center;
+ height: 160px;
+ padding-top: 70px;
+}
+
+.right_align {
+ float: right;
+}
+
+.clear {
+ clear: both;
+ display: block;
+ overflow: hidden;
+ visibility: hidden;
+ width: 0;
+ height: 0;
+}
+
+.hidden {
+ display: none;
+}
+
+.media_sidebar h3 {
+ font-size: 1em;
+ margin: 0 0 5px;
+ border: none;
+}
+
+.media_sidebar p {
+ margin-left: 8px;
+}
+
+/* forms */
+
+.form_box,.form_box_xl {
+ background-color: #222;
+ border-top: 6px solid #D49086;
+ padding: 3% 5%;
+ display: block;
+ float: none;
+ width: 90%;
+ max-width: 340px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.form_box_xl {
+ max-width: 460px;
+}
+
+.edit_box {
+ border-top: 6px dashed #D49086
+}
+
+.form_field_input input, .form_field_input textarea {
+ width: 100%;
+}
+
+.form_field_input {
+ margin-bottom: 10px;
+}
+
+.form_field_label {
+ margin-bottom: 4px;
+}
+
+.form_field_label {
+ font-size:1.125em;
+}
+
+.form_field_description {
+ font-style: italic;
+}
+
+.form_field_error {
+ background-color: #87453b;
+ color: #fff;
+ border: none;
+ padding: 9px;
+ margin-top: 8px;
+ margin-bottom: 8px;
+}
+
+.form_submit_buttons {
+ text-align: right;
+}
+
+.subform {
+ margin: 2em;
+}
+
+#password_boolean {
+ margin-top: 4px;
+ width: 20px;
+}
+
+textarea#description, textarea#bio {
+ resize: vertical;
+ height: 100px;
+}
+
+.delete {
+ margin-top: 36px;
+ display: block;
+ text-align: center;
+}
+
+/* comments */
+
+.comment_wrapper {
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
+.comment_wrapper p {
+ margin-bottom: 2px;
+}
+
+.comment_author {
+ padding-top: 4px;
+ font-size: 0.9em;
+}
+
+a.comment_authorlink {
+ text-decoration: none;
+ padding-right: 5px;
+ font-weight: bold;
+ padding-left: 2px;
+}
+
+a.comment_authorlink:hover {
+ text-decoration: underline;
+}
+
+a.comment_whenlink {
+ text-decoration: none;
+}
+
+a.comment_whenlink:hover {
+ text-decoration: underline;
+}
+
+.comment_content {
+ margin-left: 8px;
+ margin-top: 8px;
+}
+
+textarea#comment_content {
+ resize: vertical;
+ width: 100%;
+ height: 90px;
+ border: none;
+ background-color: #f1f1f1;
+ padding: 3px;
+}
+
+#form_comment .form_field_input {
+ padding-right: 6px;
+}
+
+/* media galleries */
+
+.media_thumbnail {
+ float: left;
+ padding: 0px;
+ width: 180px;
+ overflow: hidden;
+ margin: 0px 3px 10px;
+ text-align: center;
+ font-size: 0.875em;
+ background-color: #222;
+ border-radius: 0 0 5px 5px;
+ padding: 0 0 6px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ border-color: #0D0D0D;
+ border-style: solid;
+ border-width: 1px 1px 2px;
+}
+
+.media_thumbnail a {
+ color: #eee;
+ text-decoration: none;
+ display: block;
+}
+
+.media_thumbnail a.remove {
+ color: #86D4B1;
+ text-decoration: underline;
+}
+
+a.thumb_entry_title {
+ padding: 8px;
+}
+
+/* For now, this is commented out since our thumbnails are actually 180px high.
+ *
+ * .media_thumbnail img {
+ * max-height: 135px;
+ * }
+ */
+
+.thumb_entry_last {
+ margin-right: 0px;
+}
+
+/* media detail */
+
+h2.media_title {
+ margin-bottom: 0px;
+ display: inline-block;
+}
+
+p.context {
+ display: inline-block;
+ padding-top: 4px;
+}
+
+p.media_specs {
+ font-size: 0.9em;
+ border-top: 1px solid #222;
+ padding: 10px 0px;
+ color: #888;
+}
+
+.no_html5 {
+ background: black;
+ color: white;
+ text-align: center;
+ height: 160px;
+ padding: 130px 10px 20px 10px;
+}
+
+a img.media_image {
+ cursor: -webkit-zoom-in;
+ cursor: -moz-zoom-in;
+ cursor: zoom-in;
+}
+
+/* icons */
+
+img.media_icon {
+ margin: 0 4px;
+ vertical-align: sub;
+}
+
+/* EXIF information */
+
+#exif_content h3 {
+ border-bottom: 1px solid #333;
+}
+
+#exif_camera_information {
+ margin-bottom: 20px;
+}
+
+#exif_additional_info {
+ display: none;
+}
+
+#exif_additional_info table {
+ font-size: 11px;
+ margin-top: 10px;
+}
+
+#exif_additional_info td {
+ vertical-align: top;
+ padding-bottom: 5px;
+}
+
+#exif_content .col1 {
+ padding-right: 20px;
+}
+
+#exif_additional_info table tr {
+ margin-bottom: 10px;
+}
+
+/* navigation */
+
+.navigation {
+ float: right;
+}
+
+.navigation_button {
+ width: 135px;
+ display: inline-block;
+ text-align: center;
+ background-color: #1d1d1d;
+ border: 1px solid;
+ border-color: #2c2c2c #232323 #1a1a1a;
+ border-radius: 4px;
+ text-decoration: none;
+ padding: 4px 0 8px;
+ margin: 0 0 6px;
+}
+
+.navigation_left {
+ margin-right: 6px;
+}
+
+/* messages */
+
+ul.mediagoblin_messages {
+ list-style: none inside;
+ color: #f7f7f7;
+ padding: 0;
+}
+
+.mediagoblin_messages li {
+ margin: 5px 0;
+ padding: 8px;
+ text-align: center;
+}
+
+.message_success {
+ background-color: #378566;
+}
+
+.message_warning {
+ background-color: #87453b;
+}
+
+.message_error {
+ background-color: #87453b;
+}
+
+.message_info {
+ background-color: #378566;
+}
+
+.message_debug {
+ background-color: #f7f7f7;
+ color: #272727;
+}
+
+ul.mediaentry_tags {
+ list-style-type: none;
+}
+
+ul.mediaentry_tags li {
+ display: inline;
+ margin: 0px 5px 0px 0px;
+ padding: 0px;
+}
+
+
+/* media processing panel */
+
+table.media_panel {
+ width: 100%;
+}
+
+table.media_panel th {
+ font-weight: bold;
+ padding-bottom: 4px;
+ text-align: left;
+}
+
+
+/* Delete panel */
+
+.delete_checkbox_box {
+ margin-top: 10px;
+ margin-left: 10px;
+}
+
+/* ASCII art and code */
+
+@font-face {
+ font-family: Inconsolata;
+ src: local('Inconsolata'), url('../fonts/Inconsolata.otf') format('opentype')
+}
+
+pre, code {
+ font-family: Inconsolata, monospace;
+ line-height: 1em;
+}
+
+pre {
+ overflow: auto;
+ margin-bottom: 20px;
+}
+
+.comment_wrapper pre {
+ margin-bottom: 2px;
+}
+
+.ascii-wrapper pre {
+ /* but it should not affect the ASCII art */
+ margin: 0;
+}
+
+/* Media queries and other responsivisivity */
+@media screen and (max-width: 940px) {
+ .media_pane {
+ width: 100%;
+ margin: 0px;
+ }
+
+ .media_sidebar {
+ width: 100%;
+ margin: 0px;
+ }
+
+ img.media_image {
+ width: 100%;
+ display: inline;
+ }
+
+ .media_thumbnail {
+ width: 21%;
+ }
+
+ .profile_sidebar {
+ width: 100%;
+ margin: 0px;
+ }
+
+ .profile_showcase {
+ width: 100%;
+ margin: 0px;
+ }
+
+ .navigation {
+ float: none;
+ }
+
+ .navigation_button {
+ width: 49%;
+ float: right;
+ }
+
+ .navigation_left {
+ margin-right: 0;
+ float: left;
+ }
+
+ .navigation {
+ float: none;
+ }
+
+ .navigation_button {
+ width: 49%;
+ float: right;
+ padding: 10px 0 14px;
+ }
+
+ .navigation_left {
+ margin-right: 0;
+ float: left;
+ }
+
+ .button_action, .button_action_highlight, .button_form {
+ padding: 9px 14px;
+ }
+
+ header {
+ text-align: center;
+ }
+
+ .header_right {
+ margin-right: 2%;
+ float: none;
+ }
+
+ a.logo {
+ margin-left: 2%;
+ }
+}
+
+@media screen and (max-width: 570px) {
+ .media_thumbnail {
+ width: 29%;
+ }
+}
+
+@media screen and (max-width: 380px) {
+ .media_thumbnail {
+ width: 46%;
+ }
+}
+
+/* Exif display */
+#exif_content h3 {
+ border-bottom: 1px solid #333;
+}
+#exif_camera_information {
+ margin-bottom: 20px;
+}
+
+#exif_additional_info {
+ display: none;
+}
+#exif_additional_info table {
+ font-size: 11px;
+ margin-top: 10px;
+}
+#exif_additional_info td {
+ vertical-align: top;
+ padding-bottom: 5px;
+}
+#exif_content .col1 {
+ padding-right: 20px;
+}
+#exif_additional_info table tr {
+ margin-bottom: 10px;
+}
diff --git a/mediagoblin/static/css/extlib/reset.css b/mediagoblin/static/css/extlib/reset.css
new file mode 120000
index 00000000..6084e137
--- /dev/null
+++ b/mediagoblin/static/css/extlib/reset.css
@@ -0,0 +1 @@
+../../../../extlib/reset/reset.css \ No newline at end of file
diff --git a/mediagoblin/static/css/vjs-mg-skin.css b/mediagoblin/static/css/vjs-mg-skin.css
new file mode 100644
index 00000000..98c4eb95
--- /dev/null
+++ b/mediagoblin/static/css/vjs-mg-skin.css
@@ -0,0 +1,415 @@
+.video-js {
+ background-color: #000; position: relative; padding: 0; outline: none;
+
+ /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
+ font-size: 10px;
+
+ width: 650px !important;
+ height: 366px !important;
+
+
+ /* Allow poster to be vertially aligned. */
+ vertical-align: middle;
+ /* display: table-cell; */ /*This works in Safari but not Firefox.*/
+}
+
+/* Playback technology elements expand to the width/height of the containing div. <video> or <object> */
+.video-js .vjs-tech { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+
+/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
+.video-js:-moz-full-screen { position: absolute; }
+
+/* Fullscreen Styles */
+body.vjs-full-window {
+ padding: 0; margin: 0;
+ height: 100%; overflow-y: auto; /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
+}
+.video-js.vjs-fullscreen {
+ position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; width: 100% !important; height: 100% !important;
+ _position: absolute; /* IE6 Full-window (underscore hack) */
+}
+.video-js:-webkit-full-screen {
+ width: 100% !important; height: 100% !important;
+}
+
+/* Poster Styles */
+.vjs-poster {
+ margin: 0 auto; padding: 0; cursor: pointer;
+
+ /* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
+ position: relative; width: 100%; max-height: 100%;
+}
+
+/* Subtiles Styles */
+.video-js .vjs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; }
+
+/* Fading sytles, used to fade control bar. */
+.vjs-fade-in {
+ visibility: visible !important; /* Needed to make sure things hide in older browsers too. */
+ opacity: 0.9 !important;
+
+ -webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
+ -moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
+ -ms-transition: visibility 0s linear 0s, opacity 0.3s linear;
+ -o-transition: visibility 0s linear 0s, opacity 0.3s linear;
+ transition: visibility 0s linear 0s, opacity 0.3s linear;
+}
+.vjs-fade-out {
+ visibility: hidden !important;
+ opacity: 0 !important;
+
+ -webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+ -moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+ -ms-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+ -o-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+ transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+}
+
+/* The control bar
+---------------------------------------------------------------------------------- */
+.vjs-mg-skin .vjs-controls {
+ position: absolute;
+ bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
+ left: 0; right: 0; /* 100% width of div */
+ margin: 0; padding: 0; /* Controls are absolutely position, so no padding necessary */
+ height: 30px; /* Including any margin you want above or below control items */
+ color: #fff; border-top: 1px solid #404040; border-bottom: 1px solid #1f1f1f;
+
+ /* CSS Gradient */
+ /* Can use the Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/ */
+ background: #242424; /* Old browsers */
+ background: -moz-linear-gradient(top, #242424 50%, #1f1f1f 50%, #171717 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(50%,#242424), color-stop(50%,#1f1f1f), color-stop(100%,#171717)); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* Opera11.10+ */
+ background: -ms-linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* IE10+ */
+ /* Filter was causing a lot of weird issues in IE. Elements would stop showing up, or other styles would break. */
+ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#171717',GradientType=0 );*/ /* IE6-9 */
+ background: linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* W3C */
+
+ /* Start hidden and with 0 opacity. Opacity is used to fade in modern browsers. */
+ /* Can't use display block to hide initially because widths of slider handles aren't calculated and avaialbe for positioning correctly. */
+ visibility: hidden;
+ opacity: 0;
+}
+
+/* General styles for individual controls. */
+.vjs-mg-skin .vjs-control {
+ position: relative; float: left;
+ text-align: center; margin: 0; padding: 0;
+}
+
+.vjs-mg-skin .vjs-control:focus {
+ outline: 0;
+}
+
+/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
+.vjs-mg-skin .vjs-control-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+
+
+
+/* Play/Pause
+-------------------------------------------------------------------------------- */
+.vjs-mg-skin .vjs-play-control { width: 38px; height: 30px; border-right: 1px solid #101010; cursor: pointer !important; border-left: 1px solid #333; border-bottom: 1px solid #1F1F1F; }
+/* Play Icon */
+.vjs-mg-skin.vjs-paused .vjs-play-control div { width: 15px; height: 17px; background: url('../images/video-js.png'); margin: 0; margin-left: 13px; margin-top: 7px; }
+.vjs-mg-skin.vjs-playing .vjs-play-control div { width: 15px; height: 17px; background: url('../images/video-js.png') -25px 0; margin: 0; margin-left: 13px; margin-top: 7px; }
+
+
+/* Rewind
+-------------------------------------------------------------------------------- */
+.vjs-mg-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
+.vjs-mg-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('../images/video-js.png'); margin: 0.5em auto 0; }
+
+/* Volume/Mute
+-------------------------------------------------------------------------------- */
+.vjs-mg-skin .vjs-mute-control { width: 38px; height: 30px; border-left: 1px solid #333; cursor: pointer !important; float: right; }
+.vjs-mg-skin .vjs-mute-control div { width: 22px; height: 16px; background: url('../images/video-js.png') -75px -25px; margin:0; margin-left: 8px; margin-top: 8px; }
+.vjs-mg-skin .vjs-mute-control.vjs-vol-0 div { background: url('../images/video-js.png') 0 -25px; }
+.vjs-mg-skin .vjs-mute-control.vjs-vol-1 div { background: url('../images/video-js.png') -25px -25px; }
+.vjs-mg-skin .vjs-mute-control.vjs-vol-2 div { background: url('../images/video-js.png') -50px -25px; }
+
+
+.vjs-mg-skin .vjs-volume-control { width: 85px; height: 30px; float: right; border-right: 1px solid #333; }
+.vjs-mg-skin .vjs-volume-bar {
+ position: relative; width: 70px; height: 0.6em; margin:0; margin-left: 2px; margin-top: 11px; cursor: pointer !important;
+
+ /* -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; */
+
+ background: #666;
+ background: -moz-linear-gradient(top, #333, #666);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#666));
+ background: -webkit-linear-gradient(top, #333, #666);
+ background: -o-linear-gradient(top, #333, #666);
+ background: -ms-linear-gradient(top, #333, #666);
+ background: linear-gradient(top, #333, #666);
+}
+
+.video-js:-moz .vjs-volume-bar { margin-top: 12px; }
+
+.vjs-mg-skin .vjs-volume-level {
+ position: absolute; top: 0; left: 0; height: 0.6em;
+
+ /* -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; */
+ /* CSS Gradient. */
+ background: #86D4B1; /* Old browsers */
+ background: -moz-linear-gradient(top, #86D4B1 0%, #5d937a 50%, #86D4B1 100%);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#86D4B1), color-stop(50%,#5d937a), color-stop(100%,#86D4B1));
+ background: -webkit-linear-gradient(top, #86D4B1 0%,#5d937a 50%,#86D4B1 100%);
+ background: -o-linear-gradient(top, #86D4B1 0%,#5d937a 50%,#86D4B1 100%);
+ background: -ms-linear-gradient(top, #86D4B1 0%,#5d937a 50%,#86D4B1 100%);
+ background: linear-gradient(top, #86D4B1 0%,#5d937a 50%,#86D4B1 100%);
+
+
+}
+.vjs-mg-skin .vjs-volume-handle {
+ position: absolute; top: -4px; width: 14px; height: 14px; left: 0;
+ background: url('../images/video-js.png') 0 -50px;
+}
+
+.video-js:-moz .vjs-volume-handle { top: -1px;}
+
+
+
+
+/* Progress
+-------------------------------------------------------------------------------- */
+.vjs-mg-skin div.vjs-progress-control {
+ position: absolute;
+ top: -15px;
+ width: 100%;
+ height: 12px;
+}
+
+/* Box containing play and load progresses. Also acts as seek scrubber. */
+.vjs-mg-skin .vjs-progress-holder {
+ position: relative; cursor: pointer !important; /*overflow: hidden;*/
+ padding: 0; margin: 0; /* Placement within the progress control item */
+ height: 12px;
+ border-top: 1px solid #333;
+ border-bottom: 1px solid #111;
+
+
+/* -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em; */
+
+ /* CSS Gradient */
+ background: #111;
+ background: -moz-linear-gradient(top, #111, #262626);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#262626));
+ background: -webkit-linear-gradient(top, #111, #262626);
+ background: -o-linear-gradient(top, #111, #262626);
+ background: -ms-linear-gradient(top, #111, #262626);
+ background: linear-gradient(top, #111, #262626);
+}
+.vjs-mg-skin .vjs-progress-holder .vjs-play-progress,
+.vjs-mg-skin .vjs-progress-holder .vjs-load-progress { /* Progress Bars */
+ position: absolute; display: block; height: 12px; margin: 0; padding: 0;
+ left: 0; top: 0; /*Needed for IE6*/
+ /* -moz-border-radius: 0.6em; -webkit-border-radius: 0.6em; border-radius: 0.6em; */
+
+ /*width: 0;*/
+}
+
+.vjs-mg-skin .vjs-play-progress {
+ /* CSS Gradient. */
+ background: #86D4B1; /* Old browsers */
+ background: -moz-linear-gradient(top, #86D4B1 0%, #5d937a 50%, #86D4B1 100%);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#86D4B1), color-stop(50%,#5d937a), color-stop(100%,#86D4B1));
+ background: -webkit-linear-gradient(top, #86D4B1 0%,#5d937a 50%,#86D4B1 100%);
+ background: -o-linear-gradient(top, #86D4B1 0%,#5d937a 50%,#86D4B1 100%);
+ background: -ms-linear-gradient(top, #86D4B1 0%,#5d937a 50%,#86D4B1 100%);
+ background: linear-gradient(top, #86D4B1 0%,#5d937a 50%,#86D4B1 100%);
+
+ background: #86D4B1;
+ background: -moz-linear-gradient(top, #5d937a 0%, #5d937a 50%, #86D4B1 50%, #5d937a 100%);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#5d937a), color-stop(50%,#86D4B1), color-stop(50%,#86D4B1), color-stop(100%,#5d937a));
+ background: -webkit-linear-gradient(top, #5d937a 0%,#86D4B1 50%,#86D4B1 50%,#5d937a 100%);
+ background: -o-linear-gradient(top, #5d937a 0%,#86D4B1 50%,#5d937a 50%, 100%);
+ background: -ms-linear-gradient(top, #5d937a 0%,#86D4B1 50%,#86D4B1 50%,#5d937a 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86D4B1', endColorstr='#5d937a',GradientType=0 );
+ background: linear-gradient(top, #5d937a 0%,#86D4B1 50%,#86D4B1 50%,#5d937a 100%);
+}
+.vjs-mg-skin .vjs-load-progress {
+ opacity: 0.8;
+
+ /* CSS Gradient */
+ background: #666;
+ background: -moz-linear-gradient(top, #666, #333);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#333));
+ background: -webkit-linear-gradient(top, #666, #333);
+ background: -o-linear-gradient(top, #666, #333);
+ background: -ms-linear-gradient(top, #666, #333);
+ background: linear-gradient(top, #666, #333);
+}
+
+.vjs-mg-skin div.vjs-seek-handle {
+ position: absolute;
+ width: 16px; height: 16px; /* Match img pixles */
+ margin-top: -0.2em;
+ left: 0; top: 0; /*Needed for IE6*/
+
+ background: url('../images/video-js.png') 0 -50px;
+ /* CSS Curved Corners. Needed to make shadows curved. */
+ -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; border-radius: 0.8em;
+ /* CSS Shadows */
+ -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
+}
+/* Time Display
+-------------------------------------------------------------------------------- */
+.vjs-mg-skin .vjs-time-controls {
+ height: 18px; width: 45px;
+ margin-top: 5px;
+ margin-left: 5px;
+ font-size: 14px; line-height: 18px; font-weight: normal; font-family: Helvetica, Arial, sans-serif;
+ border-left: 1px solid #000000;
+ border-top: 1px solid #000;
+ border-bottom: 1px solid #333;
+ border-right: 1px solid #333;
+ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
+
+ /* CSS Gradient */
+ background: #111;
+ background: -moz-linear-gradient(top, #111, #262626);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#111), to(#262626));
+ background: -webkit-linear-gradient(top, #111, #262626);
+ background: -o-linear-gradient(top, #111, #262626);
+ background: -ms-linear-gradient(top, #111, #262626);
+ background: linear-gradient(top, #111, #262626);
+
+
+}
+
+.vjs-mg-skin .vjs-current-time { }
+
+.vjs-mg-skin .vjs-duration { right: 0; display: none; }
+.vjs-mg-skin .vjs-remaining-time { display: block; }
+
+.vjs-time-divider { }
+
+.vjs-mg-skin .vjs-time-control { font-size: 12px; line-height: 16px; font-weight: normal; font-family: Helvetica, Arial, sans-serif; }
+.vjs-mg-skin .vjs-time-control span { line-height: 25px; /* Centering vertically */ }
+
+.vjs-mg-skin .vjs-time-divider { display: none; visibility: hidden; }
+
+/* Fullscreen
+-------------------------------------------------------------------------------- */
+.vjs-secondary-controls { float: right; }
+
+.vjs-mg-skin .vjs-fullscreen-control { height: 30px; width: 38px; cursor: pointer !important; float: right; border-left: 1px solid #111; }
+.vjs-mg-skin .vjs-fullscreen-control div { width: 16px; height: 16px; background: url('../images/video-js.png') -50px 0; margin: 0; margin-left: 11px; margin-top: 8px; }
+
+.video-js.vjs-fullscreen .vjs-fullscreen-control div { background: url('../images/video-js.png') -75px 0; }
+.video-js:-webkit-full-screen .vjs-fullscreen-control div { background: url('../images/video-js.png') -75px 0; }
+
+
+
+/* Big Play Button (at start)
+---------------------------------------------------------*/
+.vjs-mg-skin .vjs-big-play-button {
+ display: block; /* Start hidden */ z-index: 2;
+ position: absolute; top: 50%; left: 50%; width: 8.0em; height: 8.0em; margin: -43px 0 0 -43px; text-align: center; vertical-align: center; cursor: pointer !important;
+ border: 0.3em solid #86D4B1; opacity: 0.95;
+ -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px;
+
+ background: #454545;
+ background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%);
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f));
+ background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
+ background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
+ background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 );
+ background: linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
+
+ /* CSS Shadows */
+ -webkit-box-shadow: 4px 4px 8px #000; -moz-box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px #000;
+}
+
+.vjs-mg-skin div.vjs-big-play-button:hover {
+ -webkit-box-shadow: 0 0 80px #fff; -moz-box-shadow: 0 0 80px #fff; box-shadow: 0 0 80px #fff;
+}
+
+.vjs-mg-skin div.vjs-big-play-button span {
+ position: absolute; top: 50%; left: 50%;
+ display: block; width: 35px; height: 42px;
+ margin: -20px 0 0 -15px; /* Using negative margin to center image. */
+ background: url('../images/video-js.png') -100px 0;
+}
+
+/* Loading Spinner
+---------------------------------------------------------*/
+/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
+.vjs-loading-spinner {
+ display: none;
+ position: absolute; top: 50%; left: 50%; width: 55px; height: 55px;
+ margin: -28px 0 0 -28px;
+ -webkit-animation-name: rotatethis;
+ -webkit-animation-duration:1s;
+ -webkit-animation-iteration-count:infinite;
+ -webkit-animation-timing-function:linear;
+ -moz-animation-name: rotatethis;
+ -moz-animation-duration:1s;
+ -moz-animation-iteration-count:infinite;
+ -moz-animation-timing-function:linear;
+}
+
+@-webkit-keyframes rotatethis {
+ 0% {-webkit-transform:scale(0.6) rotate(0deg); }
+ 12.5% {-webkit-transform:scale(0.6) rotate(0deg); }
+ 12.51% {-webkit-transform:scale(0.6) rotate(45deg); }
+ 25% {-webkit-transform:scale(0.6) rotate(45deg); }
+ 25.01% {-webkit-transform:scale(0.6) rotate(90deg);}
+ 37.5% {-webkit-transform:scale(0.6) rotate(90deg);}
+ 37.51% {-webkit-transform:scale(0.6) rotate(135deg);}
+ 50% {-webkit-transform:scale(0.6) rotate(135deg);}
+ 50.01% {-webkit-transform:scale(0.6) rotate(180deg);}
+ 62.5% {-webkit-transform:scale(0.6) rotate(180deg);}
+ 62.51% {-webkit-transform:scale(0.6) rotate(225deg);}
+ 75% {-webkit-transform:scale(0.6) rotate(225deg);}
+ 75.01% {-webkit-transform:scale(0.6) rotate(270deg);}
+ 87.5% {-webkit-transform:scale(0.6) rotate(270deg);}
+ 87.51% {-webkit-transform:scale(0.6) rotate(315deg);}
+ 100% {-webkit-transform:scale(0.6) rotate(315deg);}
+}
+
+@-moz-keyframes rotatethis {
+ 0% {-moz-transform:scale(0.6) rotate(0deg);}
+ 12.5% {-moz-transform:scale(0.6) rotate(0deg);}
+ 12.51% {-moz-transform:scale(0.6) rotate(45deg);}
+ 25% {-moz-transform:scale(0.6) rotate(45deg);}
+ 25.01% {-moz-transform:scale(0.6) rotate(90deg);}
+ 37.5% {-moz-transform:scale(0.6) rotate(90deg);}
+ 37.51% {-moz-transform:scale(0.6) rotate(135deg);}
+ 50% {-moz-transform:scale(0.6) rotate(135deg);}
+ 50.01% {-moz-transform:scale(0.6) rotate(180deg);}
+ 62.5% {-moz-transform:scale(0.6) rotate(180deg);}
+ 62.51% {-moz-transform:scale(0.6) rotate(225deg);}
+ 75% {-moz-transform:scale(0.6) rotate(225deg);}
+ 75.01% {-moz-transform:scale(0.6) rotate(270deg);}
+ 87.5% {-moz-transform:scale(0.6) rotate(270deg);}
+ 87.51% {-moz-transform:scale(0.6) rotate(315deg);}
+ 100% {-moz-transform:scale(0.6) rotate(315deg);}
+}
+/* Each circle */
+div.vjs-loading-spinner .ball1 { opacity: 0.12; position:absolute; left: 20px; top: 0px; width: 13px; height: 13px; background: #fff;
+ border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball2 { opacity: 0.25; position:absolute; left: 34px; top: 6px; width: 13px; height: 13px; background: #fff;
+ border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball3 { opacity: 0.37; position:absolute; left: 40px; top: 20px; width: 13px; height: 13px; background: #fff;
+ border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball4 { opacity: 0.50; position:absolute; left: 34px; top: 34px; width: 13px; height: 13px; background: #fff;
+ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 15px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball5 { opacity: 0.62; position:absolute; left: 20px; top: 40px; width: 13px; height: 13px; background: #fff;
+ border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball6 { opacity: 0.75; position:absolute; left: 6px; top: 34px; width: 13px; height: 13px; background: #fff;
+ border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball7 { opacity: 0.87; position:absolute; left: 0px; top: 20px; width: 13px; height: 13px; background: #fff;
+ border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
+
+div.vjs-loading-spinner .ball8 { opacity: 1.00; position:absolute; left: 6px; top: 6px; width: 13px; height: 13px; background: #fff;
+ border-radius: 13px; -webkit-border-radius: 13px; -moz-border-radius: 13px; border: 1px solid #ccc; }
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-30 14:50:08 +0000