X4.css Theme System

Developer
Oliver Kühn
Size
10,530 Kb
Views
14,168
  1. X4.css Theme System Previews
  2. X4.css Theme System HTML Codes
  3. X4.css Theme System CSS Codes
  4. X4.css Theme System JS Codes

How do I make an x4.css theme system?

My little css theme system. Initial build for my codepen.io site and my pens. A really good Stylus. What is a x4.css theme system? How do you make a x4.css theme system? This script and codes were developed by Oliver Kühn on 15 November 2022, Tuesday.

X4.css Theme System Previews
IQ Test

X4.css Theme System - Script Codes HTML Codes

<!DOCTYPE html>
<html class="theme theme-std">
<head> <meta charset="UTF-8"> <title>x4.css Theme System</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /** * x4.css * @creator Oliver Kühn * @website http://0x04.de * @created 2013-11-26 * @license MIT */
@import url("https://fonts.googleapis.com/css?family=Monda");
@import url("http://weloveiconfonts.com/api/?family=fontawesome");
/** * Padding * @type {length} */
/** * Margins * @type {length} */
/** * Lighteners and darkeners * @type {percentage} */
/** * Colors * @type {color} */
/** * Other numeric * @type {length|percentage} */
/** * Tints * @type {color} */
/** * Shades * @type {color} */
/** * Theme font * @type {font-style} */
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
/** * Angles for the `x4_ThemeCreateStripes` function * @type {angle} */
/** * Creates background stripes with gradients. * @param {angle} [deg=x4_ThemeStripe45] * @param {color} [colorA=#FFF] * @param {color} [colorB=#000] * @param {length|percentage} [width=64px] * @param {length|percentage} [height=width] * @param {position} [position top left] */
/** * Creates a x4 grid system. * @param {number} numColumns */
.col-1 { width: 8.333333333333334%;
}
.col-2 { width: 16.666666666666668%;
}
.col-3 { width: 25%;
}
.col-4 { width: 33.333333333333336%;
}
.col-5 { width: 41.66666666666667%;
}
.col-6 { width: 50%;
}
.col-7 { width: 58.333333333333336%;
}
.col-8 { width: 66.66666666666667%;
}
.col-9 { width: 75%;
}
.col-10 { width: 83.33333333333334%;
}
.col-11 { width: 91.66666666666667%;
}
.col-12 { width: 100%;
}
/** * Creates tints and shades from colors. * @param {string} prefix * @param {color[]} values */
.tint-bg-base { background-color: #e63 !important;
}
.tint-cl-base { color: #e63 !important;
}
.tint-bg-lighter { background-color: #fff !important;
}
.tint-cl-lighter { color: #fff !important;
}
.tint-bg-light { background-color: #fbd9cc !important;
}
.tint-cl-light { color: #fbd9cc !important;
}
.tint-bg-medium { background-color: #f49c7a !important;
}
.tint-cl-medium { color: #f49c7a !important;
}
.tint-bg-dark { background-color: #f17d52 !important;
}
.tint-cl-dark { color: #f17d52 !important;
}
.tint-bg-darker { background-color: #ef6e3d !important;
}
.tint-cl-darker { color: #ef6e3d !important;
}
.shade-bg-base { background-color: #e63 !important;
}
.shade-cl-base { color: #e63 !important;
}
.shade-bg-lighter { background-color: #ed5c26 !important;
}
.shade-cl-lighter { color: #ed5c26 !important;
}
.shade-bg-light { background-color: #e34c13 !important;
}
.shade-cl-light { color: #e34c13 !important;
}
.shade-bg-medium { background-color: #ad3a0e !important;
}
.shade-cl-medium { color: #ad3a0e !important;
}
.shade-bg-dark { background-color: #431606 !important;
}
.shade-cl-dark { color: #431606 !important;
}
.shade-bg-darker { background-color: #000 !important;
}
.shade-cl-darker { color: #000 !important;
}
label,
a { cursor: pointer;
}
@media (min-width: 960px) { html body .container { width: 960px; }
}
html body { font: 1em Monda; margin: 4.4rem 0 1em 0; padding: 0;
}
html body h1 { font-size: 2.25rem; margin: 0.5rem 0rem;
}
html body h1 small { font-weight: normal; color: #e34c13;
}
html body h2 { font-size: 1.9rem; margin: 0.5rem 0rem;
}
html body h2 small { font-weight: normal; color: #e34c13;
}
html body h3 { font-size: 1.55rem; margin: 0.5rem 0rem;
}
html body h3 small { font-weight: normal; color: #e34c13;
}
html body h4 { font-size: 1.2rem; margin: 0.5rem 0rem;
}
html body h4 small { font-weight: normal; color: #e34c13;
}
html body h5 { font-size: 0.85rem; margin: 0.5rem 0rem;
}
html body h5 small { font-weight: normal; color: #e34c13;
}
html body h6 { font-size: 0.5rem; margin: 0.5rem 0rem;
}
html body h6 small { font-weight: normal; color: #e34c13;
}
html body header { left: 0; top: 0; right: 0; position: fixed; padding: 0.25rem 1rem; border-left: 4rem solid #431606; border-bottom: 3px solid #431606; color: #fbd9cc; background-color: #ad3a0e;
}
html body header .header-title { margin: 0;
}
html body header .container { margin: 0; padding: 0;
}
html body header .header-title:after { content: 'Uncategorized'; font-size: 2.25rem; font-weight: bolder;
}
html body hr { zoom: 1; height: 0; border: 0; margin: 0.5em; margin-left: -1rem; margin-right: -1rem; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border-bottom: 2px solid #f17d52; background-color: #fbd9cc;
}
html body hr:before,
html body hr:after { content: ""; display: table;
}
html body hr:after { clear: both;
}
html body hr.fat { border-bottom: 3px solid #f17d52;
}
html body hr.dotted { border-style: dotted;
}
.color-swatch { float: left; width: 4rem; height: 4rem; border-radius: 8px; -webkit-box-shadow: 3px 3px 0 #f17d52; box-shadow: 3px 3px 0 #f17d52; font-size: 3rem; text-align: center; line-height: 4rem; vertical-align: middle; overflow: hidden; margin: 0 0.5rem 1rem 0;
}
.container { margin: auto; padding: 0.75rem 1rem;
}
.container:before,
.container:after { content: ' '; display: table;
}
.container:after { clear: both;
}
.panel { border-radius: 10px;
}
.panel >*:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px;
}
.panel >*:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}
.panel .panel-header { margin: 0; padding: 0.25rem 1rem; padding-left: 2rem; background: -webkit-linear-gradient(0deg, #431606 1.25rem, #ad3a0e 1.25rem); background: -moz-linear-gradient(0deg, #431606 1.25rem, #ad3a0e 1.25rem); background: -o-linear-gradient(0deg, #431606 1.25rem, #ad3a0e 1.25rem); background: -ms-linear-gradient(0deg, #431606 1.25rem, #ad3a0e 1.25rem); background: linear-gradient(90deg, #431606 1.25rem, #ad3a0e 1.25rem);
}
.panel .panel-header[class*=fontawesome] { padding: 0.25rem 1rem; background: -webkit-linear-gradient(0deg, #431606 4.25rem, #ad3a0e 4.25rem); background: -moz-linear-gradient(0deg, #431606 4.25rem, #ad3a0e 4.25rem); background: -o-linear-gradient(0deg, #431606 4.25rem, #ad3a0e 4.25rem); background: -ms-linear-gradient(0deg, #431606 4.25rem, #ad3a0e 4.25rem); background: linear-gradient(90deg, #431606 4.25rem, #ad3a0e 4.25rem);
}
.panel .panel-header[class*=fontawesome]:before { display: inline-block; width: 2.25rem; text-align: center; margin-right: 1.25rem; line-height: auto; vertical-align: -0.05rem;
}
.panel .panel-body { zoom: 1; padding: 0.5rem 1rem;
}
.panel .panel-body:before,
.panel .panel-body:after { content: ""; display: table;
}
.panel .panel-body:after { clear: both;
}
.panel >hr { border: 0; margin: 0; height: 3px;
}
.container h1:first-child,
.panel h1:first-child { margin-top: 0 !important;
}
.container h1:last-child,
.panel h1:last-child { margin-bottom: 0 !important;
}
.container h2:first-child,
.panel h2:first-child { margin-top: 0 !important;
}
.container h2:last-child,
.panel h2:last-child { margin-bottom: 0 !important;
}
.container h3:first-child,
.panel h3:first-child { margin-top: 0 !important;
}
.container h3:last-child,
.panel h3:last-child { margin-bottom: 0 !important;
}
.container h4:first-child,
.panel h4:first-child { margin-top: 0 !important;
}
.container h4:last-child,
.panel h4:last-child { margin-bottom: 0 !important;
}
.container h5:first-child,
.panel h5:first-child { margin-top: 0 !important;
}
.container h5:last-child,
.panel h5:last-child { margin-bottom: 0 !important;
}
.container h6:first-child,
.panel h6:first-child { margin-top: 0 !important;
}
.container h6:last-child,
.panel h6:last-child { margin-bottom: 0 !important;
}
html.theme { color: #431606; -webkit-filter: grayscale(100%); background: -webkit-linear-gradient(45deg, #f49c7a, #f49c7a 25%, #e34c13 25%, #e34c13 50%, #f49c7a 50%, #f49c7a 75%, #e34c13 75%); background: -moz-linear-gradient(45deg, #f49c7a, #f49c7a 25%, #e34c13 25%, #e34c13 50%, #f49c7a 50%, #f49c7a 75%, #e34c13 75%); background: -o-linear-gradient(45deg, #f49c7a, #f49c7a 25%, #e34c13 25%, #e34c13 50%, #f49c7a 50%, #f49c7a 75%, #e34c13 75%); background: -ms-linear-gradient(45deg, #f49c7a, #f49c7a 25%, #e34c13 25%, #e34c13 50%, #f49c7a 50%, #f49c7a 75%, #e34c13 75%); background: linear-gradient(45deg, #f49c7a, #f49c7a 25%, #e34c13 25%, #e34c13 50%, #f49c7a 50%, #f49c7a 75%, #e34c13 75%); -webkit-background-size: 68px 68px; -moz-background-size: 68px 68px; background-size: 68px 68px; background-position: top left;
}
html.theme .theme-switcher { position: fixed; top: 0.75em; right: 1rem;
}
html.theme .panel .panel-header { color: #f49c7a; border-color: #431606; background-color: #ad3a0e;
}
html.theme .panel .panel-header small { color: #ef6e3d;
}
html.theme .panel .panel-body { color: #431606; background-color: #fbd9cc;
}
html.theme .panel.panel-raised { -webkit-box-shadow: 3px 3px 0 #431606; box-shadow: 3px 3px 0 #431606;
}
html.theme .panel >hr { border-style: solid; border-color: #fbd9cc; border-width: 0.5rem 0; background-color: #f17d52;
}
html.theme-html { -webkit-filter: grayscale(0%);
}
html.theme-html header .header-title:after { content: 'HTML';
}
html.theme-html.version-4 .header-title:after { content: 'HTML4';
}
html.theme-html.version-5 .header-title:after { content: 'HTML5';
}
html.theme-html.version-x .header-title:after { content: 'XHTML';
}
html.theme-css { -webkit-filter: hue-rotate(190deg) grayscale(0%);
}
html.theme-css header .header-title:after { content: 'CSS';
}
html.theme-css.version-2 .header-title:after { content: 'CSS2';
}
html.theme-css.version-3 .header-title:after { content: 'CSS3';
}
html.theme-css.version-4 .header-title:after { content: 'CSS4';
}
html.theme-js { -webkit-filter: hue-rotate(120deg) grayscale(0%);
}
html.theme-js header .header-title:after { content: 'JavaScript';
}
html.theme-js.version-1_8_5 .header-title:after { content: 'JavaScript 1.8.5';
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header> <div class="container"> <h1 class="header-title"></h1> </div>
</header>
<div class="container"> <div class="panel panel-raised"> <h1 class="panel-header fontawesome-tint"> Coloring </h1> <div class="panel-body"> <h1 class="fontawesome-filter"> Tints and shades <small>10 different of them</small> </h1> <div class="color-swatch fontawesome-adjust tint-bg-lighter shade-cl-darker" title=".tint-bg-lighter"> </div> <div class="color-swatch tint-bg-light shade-cl-dark fontawesome-adjust" title=".tint-bg-light"> </div> <div class="color-swatch tint-bg-medium shade-cl-medium fontawesome-adjust" title=".tint-bg-medium"> </div> <div class="color-swatch tint-bg-dark shade-cl-light fontawesome-adjust" title=".tint-bg-light"> </div> <div class="color-swatch tint-bg-darker shade-cl-lighter fontawesome-adjust" title=".tint-bg-light"> </div> <div class="color-swatch tint-bg-base shade-bg-base tint-cl-darker shade-cl-base fontawesome-adjust" title=".tint-bg-base || .shade-bg-base"> </div> <div class="color-swatch shade-bg-lighter tint-cl-darker fontawesome-adjust" title=".shade-bg-lighter"> </div> <div class="color-swatch shade-bg-light tint-cl-dark fontawesome-adjust" title=".shade-bg-light"> </div> <div class="color-swatch shade-bg-medium tint-cl-medium fontawesome-adjust" title=".shade-bg-medium"> </div> <div class="color-swatch shade-bg-dark tint-cl-light fontawesome-adjust" title=".shade-bg-light"> </div> <div class="color-swatch shade-bg-darker tint-cl-lighter fontawesome-adjust" title=".shade-bg-light"> </div> <hr class="dotted"/> <h1 class="fontawesome-magic"> CSS3 filter magic! </h1> <p>Coming soon.</p> </div> <h1 class="panel-header fontawesome-glass"> &lt;h1&gt; panel header <small>optional fontawesome icon!</small> </h1> <div class="panel-body"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div> <h2 class="panel-header"> &lt;h2&gt; panel header <small>sub heading</small> </h2> <div class="panel-body"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div> <h3 class="panel-header"> &lt;h3&gt; panel header <small>sub heading</small> </h3> <div class="panel-body"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div> <h4 class="panel-header"> &lt;h4&gt; panel header <small>sub heading</small> </h4> <div class="panel-body"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div> <h5 class="panel-header"> &lt;h5&gt; panel header <small>sub heading</small> </h5> <div class="panel-body"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </div> <h6 class="panel-header"> &lt;h6&gt; panel header <small>sub heading</small> </h6> <hr class="fat dotted"/> <h1 class="panel-header fontawesome-font"> Text </h1> <div class="panel-body"> <h1>&lt;h1&gt; theme heading <small>sub heading</small></h1> <h2>&lt;h2&gt; theme heading <small>sub heading</small></h2> <h3>&lt;h3&gt; theme heading <small>sub heading</small></h3> <h4>&lt;h4&gt; theme heading <small>sub heading</small></h4> <h5>&lt;h5&gt; theme heading <small>sub heading</small></h5> <h6>&lt;h6&gt; theme heading <small>sub heading</small></h6> <p>&lt;p&gt; paragraph</p> <h1 class="fontawesome-align-left"> Paragraphs and rulers </h1> <hr class="fat"/> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <hr class="fat dotted"/> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <hr/> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <hr class="dotted"/> </div> <div class="panel-body"> ... </div> <h1 class="panel-header">Footer</h1> </div>
</div>
<div class="theme-switcher panel panel-raised"> <div class="panel-body"> <label> <span class="fontawesome-tint"></span> <strong>Theme</strong> <select class="theme-switcher-select"> <option value="theme-std" selected> Default </option> <option value="theme-html"> HTML </option> <option value="theme-html version-5"> HTML5 </option> <option value="theme-html version-4"> HTML4 </option> <option value="theme-html version-x"> XHTML </option> <option value="theme-css"> CSS </option> <option value="theme-css version-2"> CSS2 </option> <option value="theme-css version-3"> CSS3 </option> <option value="theme-css version-4"> CSS4 </option> <option value="theme-js"> JavaScript </option> <option value="theme-js version-1_8_5"> JavaScript 1.8.5 </option> </select> </label> </div>
</div>
<script type="text/javascript"> // Really simple theme switcher document.querySelector('.theme-switcher-select') .addEventListener('change', function(event) { document.documentElement.className = [ 'theme' ] .concat(event.target.value.split(/\s/)) .join(' '); });
</script> <script src="js/index.js"></script>
</body>
</html>

X4.css Theme System - Script Codes CSS Codes

/** * x4.css * @creator Oliver Kühn * @website http://0x04.de * @created 2013-11-26 * @license MIT */
@import url("https://fonts.googleapis.com/css?family=Monda");
@import url("http://weloveiconfonts.com/api/?family=fontawesome");
/** * Padding * @type {length} */
/** * Margins * @type {length} */
/** * Lighteners and darkeners * @type {percentage} */
/** * Colors * @type {color} */
/** * Other numeric * @type {length|percentage} */
/** * Tints * @type {color} */
/** * Shades * @type {color} */
/** * Theme font * @type {font-style} */
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
/** * Angles for the `x4_ThemeCreateStripes` function * @type {angle} */
/** * Creates background stripes with gradients. * @param {angle} [deg=x4_ThemeStripe45] * @param {color} [colorA=#FFF] * @param {color} [colorB=#000] * @param {length|percentage} [width=64px] * @param {length|percentage} [height=width] * @param {position} [position top left] */
/** * Creates a x4 grid system. * @param {number} numColumns */
.col-1 { width: 8.333333333333334%;
}
.col-2 { width: 16.666666666666668%;
}
.col-3 { width: 25%;
}
.col-4 { width: 33.333333333333336%;
}
.col-5 { width: 41.66666666666667%;
}
.col-6 { width: 50%;
}
.col-7 { width: 58.333333333333336%;
}
.col-8 { width: 66.66666666666667%;
}
.col-9 { width: 75%;
}
.col-10 { width: 83.33333333333334%;
}
.col-11 { width: 91.66666666666667%;
}
.col-12 { width: 100%;
}
/** * Creates tints and shades from colors. * @param {string} prefix * @param {color[]} values */
.tint-bg-base { background-color: #e63 !important;
}
.tint-cl-base { color: #e63 !important;
}
.tint-bg-lighter { background-color: #fff !important;
}
.tint-cl-lighter { color: #fff !important;
}
.tint-bg-light { background-color: #fbd9cc !important;
}
.tint-cl-light { color: #fbd9cc !important;
}
.tint-bg-medium { background-color: #f49c7a !important;
}
.tint-cl-medium { color: #f49c7a !important;
}
.tint-bg-dark { background-color: #f17d52 !important;
}
.tint-cl-dark { color: #f17d52 !important;
}
.tint-bg-darker { background-color: #ef6e3d !important;
}
.tint-cl-darker { color: #ef6e3d !important;
}
.shade-bg-base { background-color: #e63 !important;
}
.shade-cl-base { color: #e63 !important;
}
.shade-bg-lighter { background-color: #ed5c26 !important;
}
.shade-cl-lighter { color: #ed5c26 !important;
}
.shade-bg-light { background-color: #e34c13 !important;
}
.shade-cl-light { color: #e34c13 !important;
}
.shade-bg-medium { background-color: #ad3a0e !important;
}
.shade-cl-medium { color: #ad3a0e !important;
}
.shade-bg-dark { background-color: #431606 !important;
}
.shade-cl-dark { color: #431606 !important;
}
.shade-bg-darker { background-color: #000 !important;
}
.shade-cl-darker { color: #000 !important;
}
label,
a { cursor: pointer;
}
@media (min-width: 960px) { html body .container { width: 960px; }
}
html body { font: 1em Monda; margin: 4.4rem 0 1em 0; padding: 0;
}
html body h1 { font-size: 2.25rem; margin: 0.5rem 0rem;
}
html body h1 small { font-weight: normal; color: #e34c13;
}
html body h2 { font-size: 1.9rem; margin: 0.5rem 0rem;
}
html body h2 small { font-weight: normal; color: #e34c13;
}
html body h3 { font-size: 1.55rem; margin: 0.5rem 0rem;
}
html body h3 small { font-weight: normal; color: #e34c13;
}
html body h4 { font-size: 1.2rem; margin: 0.5rem 0rem;
}
html body h4 small { font-weight: normal; color: #e34c13;
}
html body h5 { font-size: 0.85rem; margin: 0.5rem 0rem;
}
html body h5 small { font-weight: normal; color: #e34c13;
}
html body h6 { font-size: 0.5rem; margin: 0.5rem 0rem;
}
html body h6 small { font-weight: normal; color: #e34c13;
}
html body header { left: 0; top: 0; right: 0; position: fixed; padding: 0.25rem 1rem; border-left: 4rem solid #431606; border-bottom: 3px solid #431606; color: #fbd9cc; background-color: #ad3a0e;
}
html body header .header-title { margin: 0;
}
html body header .container { margin: 0; padding: 0;
}
html body header .header-title:after { content: 'Uncategorized'; font-size: 2.25rem; font-weight: bolder;
}
html body hr { zoom: 1; height: 0; border: 0; margin: 0.5em; margin-left: -1rem; margin-right: -1rem; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border-bottom: 2px solid #f17d52; background-color: #fbd9cc;
}
html body hr:before,
html body hr:after { content: ""; display: table;
}
html body hr:after { clear: both;
}
html body hr.fat { border-bottom: 3px solid #f17d52;
}
html body hr.dotted { border-style: dotted;
}
.color-swatch { float: left; width: 4rem; height: 4rem; border-radius: 8px; -webkit-box-shadow: 3px 3px 0 #f17d52; box-shadow: 3px 3px 0 #f17d52; font-size: 3rem; text-align: center; line-height: 4rem; vertical-align: middle; overflow: hidden; margin: 0 0.5rem 1rem 0;
}
.container { margin: auto; padding: 0.75rem 1rem;
}
.container:before,
.container:after { content: ' '; display: table;
}
.container:after { clear: both;
}
.panel { border-radius: 10px;
}
.panel >*:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px;
}
.panel >*:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}
.panel .panel-header { margin: 0; padding: 0.25rem 1rem; padding-left: 2rem; background: -webkit-linear-gradient(0deg, #431606 1.25rem, #ad3a0e 1.25rem); background: -moz-linear-gradient(0deg, #431606 1.25rem, #ad3a0e 1.25rem); background: -o-linear-gradient(0deg, #431606 1.25rem, #ad3a0e 1.25rem); background: -ms-linear-gradient(0deg, #431606 1.25rem, #ad3a0e 1.25rem); background: linear-gradient(90deg, #431606 1.25rem, #ad3a0e 1.25rem);
}
.panel .panel-header[class*=fontawesome] { padding: 0.25rem 1rem; background: -webkit-linear-gradient(0deg, #431606 4.25rem, #ad3a0e 4.25rem); background: -moz-linear-gradient(0deg, #431606 4.25rem, #ad3a0e 4.25rem); background: -o-linear-gradient(0deg, #431606 4.25rem, #ad3a0e 4.25rem); background: -ms-linear-gradient(0deg, #431606 4.25rem, #ad3a0e 4.25rem); background: linear-gradient(90deg, #431606 4.25rem, #ad3a0e 4.25rem);
}
.panel .panel-header[class*=fontawesome]:before { display: inline-block; width: 2.25rem; text-align: center; margin-right: 1.25rem; line-height: auto; vertical-align: -0.05rem;
}
.panel .panel-body { zoom: 1; padding: 0.5rem 1rem;
}
.panel .panel-body:before,
.panel .panel-body:after { content: ""; display: table;
}
.panel .panel-body:after { clear: both;
}
.panel >hr { border: 0; margin: 0; height: 3px;
}
.container h1:first-child,
.panel h1:first-child { margin-top: 0 !important;
}
.container h1:last-child,
.panel h1:last-child { margin-bottom: 0 !important;
}
.container h2:first-child,
.panel h2:first-child { margin-top: 0 !important;
}
.container h2:last-child,
.panel h2:last-child { margin-bottom: 0 !important;
}
.container h3:first-child,
.panel h3:first-child { margin-top: 0 !important;
}
.container h3:last-child,
.panel h3:last-child { margin-bottom: 0 !important;
}
.container h4:first-child,
.panel h4:first-child { margin-top: 0 !important;
}
.container h4:last-child,
.panel h4:last-child { margin-bottom: 0 !important;
}
.container h5:first-child,
.panel h5:first-child { margin-top: 0 !important;
}
.container h5:last-child,
.panel h5:last-child { margin-bottom: 0 !important;
}
.container h6:first-child,
.panel h6:first-child { margin-top: 0 !important;
}
.container h6:last-child,
.panel h6:last-child { margin-bottom: 0 !important;
}
html.theme { color: #431606; -webkit-filter: grayscale(100%); background: -webkit-linear-gradient(45deg, #f49c7a, #f49c7a 25%, #e34c13 25%, #e34c13 50%, #f49c7a 50%, #f49c7a 75%, #e34c13 75%); background: -moz-linear-gradient(45deg, #f49c7a, #f49c7a 25%, #e34c13 25%, #e34c13 50%, #f49c7a 50%, #f49c7a 75%, #e34c13 75%); background: -o-linear-gradient(45deg, #f49c7a, #f49c7a 25%, #e34c13 25%, #e34c13 50%, #f49c7a 50%, #f49c7a 75%, #e34c13 75%); background: -ms-linear-gradient(45deg, #f49c7a, #f49c7a 25%, #e34c13 25%, #e34c13 50%, #f49c7a 50%, #f49c7a 75%, #e34c13 75%); background: linear-gradient(45deg, #f49c7a, #f49c7a 25%, #e34c13 25%, #e34c13 50%, #f49c7a 50%, #f49c7a 75%, #e34c13 75%); -webkit-background-size: 68px 68px; -moz-background-size: 68px 68px; background-size: 68px 68px; background-position: top left;
}
html.theme .theme-switcher { position: fixed; top: 0.75em; right: 1rem;
}
html.theme .panel .panel-header { color: #f49c7a; border-color: #431606; background-color: #ad3a0e;
}
html.theme .panel .panel-header small { color: #ef6e3d;
}
html.theme .panel .panel-body { color: #431606; background-color: #fbd9cc;
}
html.theme .panel.panel-raised { -webkit-box-shadow: 3px 3px 0 #431606; box-shadow: 3px 3px 0 #431606;
}
html.theme .panel >hr { border-style: solid; border-color: #fbd9cc; border-width: 0.5rem 0; background-color: #f17d52;
}
html.theme-html { -webkit-filter: grayscale(0%);
}
html.theme-html header .header-title:after { content: 'HTML';
}
html.theme-html.version-4 .header-title:after { content: 'HTML4';
}
html.theme-html.version-5 .header-title:after { content: 'HTML5';
}
html.theme-html.version-x .header-title:after { content: 'XHTML';
}
html.theme-css { -webkit-filter: hue-rotate(190deg) grayscale(0%);
}
html.theme-css header .header-title:after { content: 'CSS';
}
html.theme-css.version-2 .header-title:after { content: 'CSS2';
}
html.theme-css.version-3 .header-title:after { content: 'CSS3';
}
html.theme-css.version-4 .header-title:after { content: 'CSS4';
}
html.theme-js { -webkit-filter: hue-rotate(120deg) grayscale(0%);
}
html.theme-js header .header-title:after { content: 'JavaScript';
}
html.theme-js.version-1_8_5 .header-title:after { content: 'JavaScript 1.8.5';
}

X4.css Theme System - Script Codes JS Codes

/*
x4.css Theme System
===================
My little css theme system. Initial build for my
[codepen.io](https://codepen.io/0x04) site and my pens. A really good `Stylus`
test drive :-)
**NOTICE:**
Before anyone ask: I use `stylus` 'coz it fits into my workflow. I don't
use `ruby` and don't like some design decisions of `less`, so is `stylus`
is my 'weapon' of choice.
Main theme (.theme):
-----------------------
* Defines all logic and structural styles
Sub themes:
-----------
* __Default (.theme-default):__ * Primary colors: white, gray, tinted gray * Version notice: 'version version-just-a-pen …'
* __HTML (.theme-html):__ * Primary colors: white, orange, tinted orange * Version notice: 'html version-5 version-x …'
* __CSS (.theme-css):__ * Primary colors: white, blue, tinted blue * Version notice: 'css version-2 version-3 …'
* __JS (.theme-js):__ * Primary colors: white, green, tinted green * Version notice: JS String 'v1.8.5', CSS Selector '.version-1_8_5'
Todos:
-------
* cleanup
* simplify
* more components
* …
Credits:
---------
* [Tim Pietrusky](http://timpietrusky.com) creator of [We Love Icon Fonts](http://weloveiconfonts.com)
* [Dave Gandy](https://twitter.com/davegandy) creator of [Font Awesome](https://fortawesome.github.com/Font-Awesome)
* [Stylus](https://github.com/learnboost/stylus)
*/
X4.css Theme System - Script Codes
X4.css Theme System - Script Codes
Home Page Home
Developer Oliver Kühn
Username 0x04
Uploaded November 15, 2022
Rating 3
Size 10,530 Kb
Views 14,168
Do you need developer help for X4.css Theme System?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Oliver Kühn (0x04) Script Codes
Name
Hover rotating cube
Perforated foil
Scanline effect
FourPerfectlyRoundCircles
ASCIICanvas
Max Headroom
Pure CSS Jalousien
Pentagon loading indicator
Random Paint
Unicode glitching
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!