WebSVN - LCARS - Diff - Rev 41 and 53 - /trunk/media/video/series/style.css

 <?php
+namespace de\pointedears\css\least;
-header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
+\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
 /* Cached resource expires in HTTP/1.1 caches 24h after last retrieval */
-header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
+\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
 /* Cached resource expires in HTTP/1.0 caches 24h after last retrieval */
-header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
+\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
+\header('Content-Type: text/css; charset=UTF-8');
-header('Content-Type: text/css; charset=UTF-8');
+require_once 'css/least/Mixins.php';
 ?>
 @CHARSET "UTF-8";
 html, body {
   -webkit-font-smoothing: antialiased;
+}
 h1, h2, h3, h4, h5, h6 {
+  /* from SVG for Gecko and WebKit */
   text-rendering: optimizeLegibility;
+}
 body {
   font-family: sans-serif;
   src: local("X-Files"), url(/styles/fonts/x-files.ttf);
+}
 .akte-x {
   padding: 1em 0.25em 0.6em 0.25em;
-  background-image:
+  <?php
-    -o-linear-gradient(12deg,
+        Mixins::linear_gradient(
-      rgba(236, 244, 235, 0) 33%, rgba(236, 244, 235, 0.9) 68%,
-      rgba(236, 244, 235, 0.9) 70%, rgba(236, 244, 235, 0) 90%);
-  background-image:
+                'background-image',
-    linear-gradient(12deg,
+                '12deg,
-      rgba(236, 244, 235, 0) 33%, rgba(236, 244, 235, 0.9) 68%,
+       rgba(236, 244, 235, 0) 33%, rgba(236, 244, 235, 0.9) 68%,
-      rgba(236, 244, 235, 0.9) 70%, rgba(236, 244, 235, 0) 90%);
+       rgba(236, 244, 235, 0.9) 70%, rgba(236, 244, 235, 0) 90%',
+      array('-o-', ''));
+        ?>
   background-image:
     -moz-radial-gradient(65% 60%,
       rgba(236, 244, 235, 0.5) 50%, rgba(236, 244, 235, 0.1)),
     -moz-linear-gradient(12deg,
       rgba(236, 244, 235, 0) 33%, rgba(236, 244, 235, 0.9) 68%,
   color: #dcdfdc;
   line-height: 2em;
   vertical-align: middle;
+}
 .akte-x .small {
   padding-left: 1em;
-/*   .linear-gradient(bottom left, black, transparent); */
-  background-image: -moz-linear-gradient(bottom left, black, transparent);
-  background-image: -o-linear-gradient(bottom left, black, transparent);
+/*  background-image: $linear-gradient(bottom left, black, transparent); */
-  background-image: -webkit-linear-gradient(bottom left, black, transparent);
-  background-image: linear-gradient(bottom left, black, transparent);
+        <?php   Mixins::linear_gradient('background-image', 'bottom left, black, transparent'); ?>
   vertical-align: middle;
   font-family: "Futura Condensed", sans-serif;
   font-size: 50%;
   text-transform: uppercase;
   letter-spacing: 1em;
 @font-face {
   font-family: "Slayer";
   src: url(/styles/fonts/slayer11.eot?);
   src: local("Slayer"),
-    url(/styles/fonts/slayer11.eot?) format(eot),
+    url(/styles/fonts/slayer11.eot?) format("eot"),
-    url(/styles/fonts/slayer11.woff) format(woff),
+    url(/styles/fonts/slayer11.woff) format("woff"),
-    url(/styles/fonts/slayer11.ttf) format(truetype),
+    url(/styles/fonts/slayer11.ttf) format("truetype"),
-    url(/styles/fonts/slayer11.svg#Slayer) format(svg);
+    url(/styles/fonts/slayer11.svg#Slayer) format("svg");
   font-weight: normal;
   font-style: normal;
+}
 @font-face {
 .buffy {
   display: inline-block;
   padding: 0.75em 0.5em 0.5em 0.5em;
   background-color: #000700;
-  background-image: -moz-radial-gradient(circle, #6d7a9c 35%, transparent 45%);
-  background-image: -webkit-radial-gradient(circle, #6d7a9c 35%, transparent 45%);
+  <?php Mixins::radial_gradient('background-image', 'circle, #6d7a9c 35%, transparent 45%'); ?>
   color: #feffff;
   line-height: 1em;
   text-align: center;
   text-shadow: 1px 1px 1px black;
+}
   font-family: "KopyKattKut Bold";
   src: local("KopyKattKut Bold"), url(/styles/fonts/KopyKattKut-Bold.otf);
+}
 .charmed {
+  position: relative;
+  display: inline-block;
+  background-color: #080E32;
+  color: rgb(223, 229, 251);
+  color: rgba(255, 255, 255, 0.75);
+  padding: 1.5em 0.5em 0.75em 0.5em;
   font-family: "KopyKattKut Bold", serif;
   font-size: 115%;
   /*letter-spacing: -0.125em;*/
+  line-height: 2;
+  overflow: hidden;
   text-transform: uppercase;
+}
+.charmed .circle {
+  position: absolute;
+  left: 50%;
+  top: 60%;
+  width: 2em;
+  height: 2em;
+  margin-left: -1.3em;
+  margin-top: -1.3em;
+  border-radius: 50%;
+  border: 0.325em solid rgba(36, 63, 219, 0.33);
+}
+.charmed .circle:before {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 75%;
+  height: 75%;
+  margin-left: -1.7em;
+  margin-top: -0.7em;
+  border: 0.325em solid rgba(36, 63, 219, 0.33);
+  border-radius: 100% 0;
+  content: "";
+  <?php
+        Mixins::prefix_property('transform', '',
+                'rotate(15deg)',
+                array('-moz-', '-webkit-', ''));
+        ?>
+}
+.charmed .circle:after {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 75%;
+  height: 75%;
+  margin-left: -1.05em;
+  margin-top: -1.85em;
+  border: 0.325em solid rgba(36, 63, 219, 0.33);
+  border-radius: 100% 0;
+  content: "";
+  <?php
+        Mixins::prefix_property('transform', '',
+                'rotate(-45deg)',
+                array('-moz-', '-webkit-', ''));
+        ?>
+}
+.charmed .arc3 {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 1.5em;
+  height: 1.5em;
+  margin-left: -0.3em;
+  margin-top: -0.3em;
+  border: 0.325em solid rgba(36, 63, 219, 0.33);
+  border-radius: 0 100% 0 100%;
+  content: "";
+  <?php
+        Mixins::prefix_property('transform', '',
+                'rotate(-15deg)',
+                array('-moz-', '-webkit-', ''));
+        ?>
+}
 .charmed .c {
   /* font-size: 150%; */
+}
 .charmed span {
+  position: relative;
   /* vertical-align: middle; */
+}
 @font-face {
   font-family: "Coolvetica";
 .dead-zone .text .zone {
   display: block;
   position: relative;
   top: -0.5em;
   font-size: 110%;
+  <?php
-  -webkit-transform: perspective(15px) rotateX(35deg);
+        Mixins::prefix_property('transform', '',
-  transform: perspective(15px) rotateX(35deg);
+                'perspective(15px) rotateX(35deg)',
+                array('-webkit-', ''));
+        ?>
   -webkit-mask-image: -webkit-linear-gradient(
     rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.67));
+}
 @font-face {
 px -1px rgba(77, 148, 168, 0.9);
+}
 .eureka .gradient {
   display: inline-block;
+  <?php
+    Mixins::prefix_property('transform', '',
-  -webkit-transform: matrix(1, 0, 0, 0.9, 0, 0);
+        'matrix(1, 0, 0, 0.9, 0, 0)',
+        array('-moz-', '-webkit-', ''));
+  ?>
 /*
   position: absolute;
   padding: 0.25em 0.5em 0.125em 0.5em;
   left: 0;
   top: 0;
+}
 .firefly {
   display: inline-block;
   padding: 0.4em 0.8em 0.4em 0.95em;
-  background-color: #9b4931;
+  background-color: #762109;
-  background-image: -moz-linear-gradient(
-    rgba(73, 1, 2, 0.8) 15%,
-    rgba(155, 73, 49, 0) 15%, rgba(155, 73, 49, 0) 85%,
-    rgba(73, 1, 2, 0.8) 85%, rgba(73, 1, 2, 0.8));
-  background-image: -o-linear-gradient(
-    rgba(73, 1, 2, 0.8) 15%,
+  <?php
-    rgba(155, 73, 49, 0) 15%, rgba(155, 73, 49, 0) 85%,
-    rgba(73, 1, 2, 0.8) 85%, rgba(73, 1, 2, 0.8));
-  background-image: -webkit-linear-gradient(
+    Mixins::linear_gradient('background-image',
-    rgba(73, 1, 2, 0.8) 15%,
+        'rgba(73, 1, 2, 0.8) 15%,
-    rgba(155, 73, 49, 0) 15%, rgba(155, 73, 49, 0) 85%,
+         rgba(155, 73, 49, 0) 15%, rgba(155, 73, 49, 0) 85%,
-    rgba(73, 1, 2, 0.8) 85%, rgba(73, 1, 2, 0.8));
+         rgba(73, 1, 2, 0.8) 85%, rgba(73, 1, 2, 0.8)');
-  background-image: linear-gradient(
-    rgba(73, 1, 2, 0.8) 15%,
+  ?>
-    rgba(155, 73, 49, 0) 15%, rgba(155, 73, 49, 0) 85%,
-    rgba(73, 1, 2, 0.8) 85%, rgba(73, 1, 2, 0.8));
         color: #fefcff;
   font-family: "Marriage-Script", cursive;
   font-size: 160%;
   text-shadow: -1px 0px 1px #300202, 2px 2px 4px #fed700, 0px 0px 4px #270201;
   text-transform: lowercase;
   display: inline-block;
   /*
   -webkit-mask-image: -webkit-radial-gradient(center, 150% 150%,
     rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.125));
   */
+        <?php
-  -moz-transform: perspective(50px) rotateX(4.43deg);
+          Mixins::prefix_property('transform', '',
-  -webkit-transform: perspective(50px) rotateX(4.43deg);
+                'perspective(50px) rotateX(4.43deg)',
-  transform: perspective(50px) rotateX(4.43deg);
+                array('-moz-', '-webkit-', ''));
+        ?>
+}
 .fringe .f {
   display: inline-block;
   padding: 0.125em 0.5em;
   background-color: black;
   color: #020109;
   font-family: "Swiss 721 Black Extended BT", sans-serif;
   text-transform: uppercase;
+  <?php
-  background-image: -moz-radial-gradient(24% 50%, circle,
+        Mixins::radial_gradient('background-image',
-    rgba(224, 211, 106, 1) 33%, rgba(224, 211, 106, 0) 36%, #100d04);
-  background-image: -webkit-radial-gradient(24% 50%, circle,
+                '24% 50%, circle,
-    rgba(224, 211, 106, 1) 33%, rgba(224, 211, 106, 0) 36%, #100d04);
+                 rgba(224, 211, 106, 1) 33%, rgba(224, 211, 106, 0) 36%, #100d04');
+  ?>
+}
 .moonlight .moon {
   -webkit-mask-image: -webkit-linear-gradient(-80deg, rgba(0,0,0,0.33), rgba(0,0,0,1) 67%);
   letter-spacing: -0.0625em;
 .roswell {
   display: inline-block;
   padding: 0.25em 0.5em 0.125em 0.5em;
   background-color: #000;
-  background-image: -moz-linear-gradient(left, #6f3811, #000);
-  background-image: -o-linear-gradient(left, #6f3811, #000);
-  background-image: -webkit-linear-gradient(left, #6f3811, #000);
+  <?php
-  background-image: linear-gradient(left, #6f3811, #000);
+    Mixins::linear_gradient('background-image', 'left, #6f3811, #000');
+  ?>
   color: #ffffbc;
   font-family: "Roswell", sans-serif;
   letter-spacing: 0.25em;
   text-shadow:
   text-align: center;
   text-transform: uppercase;
   overflow: hidden;
+}
-@-webkit-keyframes zoom-in {
-% {
-    opacity: 0;
-    -webkit-transform: perspective(100px) translateX(0) translateY(0) translateZ(-400px);
-  }
-% {
-    opacity: 1;
-  }
-% {
-    -webkit-transform: perspective(100px) translateX(5px) translateY(-4px) translateZ(100px);
-  }
-}
 .simpsons span {
   position: relative;
   display: block;
+}
+<?php
+  Mixins::keyframes('zoom-in',
+    '0% {
+       opacity: 0;
+       -moz-transform: perspective(100px) translateX(0) translateY(0) translateZ(-400px);
+       -webkit-transform: perspective(100px) translateX(0) translateY(0) translateZ(-400px);
+     }
+% {
+       opacity: 1;
+     }
+% {
+       -moz-transform: perspective(100px) translateX(5px) translateY(-4px) translateZ(100px);
+       -webkit-transform: perspective(100px) translateX(5px) translateY(-4px) translateZ(100px);
+     }');
+?>
 .simpsons:hover span.text {
+  <?php
-  -webkit-animation-name: zoom-in;
+        Mixins::animation('-name', 'zoom-in');
-  /* -webkit-animation-iteration-count: infinite; */
+        /* -webkit-animation-iteration-count: infinite; */
-  -webkit-animation-duration: 3s;
+        Mixins::animation('-duration', '3s');
+  ?>
+}
 @font-face {
   font-family: "Smallville";
   src: local("Smallville"), url(/styles/fonts/Smallville1.ttf);
   font-family: "True Blood";
   src: local("True Blood"), url(/styles/fonts/non-free/TRUEBLOOD.ttf);
+}
 .true-blood {
-  font-family: "True Blood", serif;
+  font-family: "True Blood", sans-serif;
+}
 .true-blood .upper {
   text-transform: uppercase;
+}

Subversion Repositories LCARS

(root)/trunk/media/video/series/style.css @ 27 - Rev 41 → 53