YAUI v2
How do I make an yaui v2?
Version 2 of Yet Another UI kit, Hope you like it :). What is a yaui v2? How do you make a yaui v2? This script and codes were developed by Hugo DarbyBrown on 09 August 2022, Tuesday.
YAUI v2 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>YAUI v2</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700'>
<link rel='stylesheet prefetch' href='http://weloveiconfonts.com/api/?family=typicons'>
<link rel='stylesheet prefetch' href='http://weloveiconfonts.com/api/?family=fontawesome'> <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! */ @charset "UTF-8";
/*==============================================
Demo Styles
================================================ */
@import "http://weloveiconfonts.com/api/?family=fontawesome";
html { font-family: 'Roboto Slab', serif; font-size: 16px; height: 100%;
}
body { background: #9b59b6; text-align: center;
}
* { box-sizing: border-box;
}
section { width: 30rem; margin: auto; padding-bottom: 10rem;
}
h1 { color: #fff; font-size: 5rem; font-weight: bold; margin: 0 0 2rem 0; text-shadow: 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.4);
}
h2 { color: #fff; font-size: 2rem; font-weight: bold; margin: 0; text-shadow: 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.4);
}
h4 { color: #fff; margin: -2rem 0 2rem 0; text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.4);
}
/*==============================================
Base Form Styles
All form elements need these styles
The rest are modular
================================================ */
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; font-size: 1.5rem; line-height: 2;
}
.ui { border-radius: 2rem; box-shadow: inset 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.1), 0.2rem 0.2rem 0 rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.25); display: inline-block; font-size: 1rem; margin: 0 0 1rem 0; padding: 1rem; text-align: center; width: 30rem;
}
.ui input[type="email"], .ui input[type="password"], .ui input[type="search"] { background: rgba(0, 0, 0, 0.25); border: 0; border-radius: 0; height: 3rem; width: 58%; color: #fff; float: left; padding-left: 0.5rem;
}
.ui input[type="email"]:focus, .ui input[type="password"]:focus, .ui input[type="search"]:focus { background: rgba(0, 0, 0, 0.5); transition: background 1s ease;
}
.ui input[type="submit"] { background: rgba(0, 0, 0, 0.4); border: 0; border-radius: 0 1rem 1rem 0; color: #fff; float: left; height: 3rem; width: 20%; z-index: 3;
}
.ui input[type="submit"]:hover { background: rgba(0, 0, 0, 0.6); transition: all 1s ease;
}
.ui label { background: rgba(0, 0, 0, 0.4); border: 0; border-radius: 0 1rem 1rem 0; color: #fff; float: left; height: 3rem; width: 20%; z-index: 3; border-radius: 1rem 0 0 1rem; line-height: 3;
}
/*==============================================
Color Picker Slider
================================================ */
#red, #green, #blue { float: left; clear: left; width: 100%; margin: 1rem 0;
}
#red .ui-slider-range { background: #ef2929;
}
#green .ui-slider-range { background: #8ae234;
}
#blue .ui-slider-range { background: #729fcf;
}
.ui-slider-handle { width: 2rem !important; height: 2rem !important; border-radius: 50%; margin-top: -0.2rem;
}
.ui-slider-range { border-radius: 1rem;
}
.colors > div { background: rgba(0, 0, 0, 0.5); border: none; border-radius: 1rem; height: 1rem; width: 100%;
}
/*==============================================
Ratings modified version of Lea Verou's
http://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/
================================================ */
fieldset { border: 0;
}
.rating:not(:checked) > input { clip: rect(0, 0, 0, 0); position: absolute; top: -9999px;
}
.rating:not(:checked) > label { background: none; color: rgba(0, 0, 0, 0.6); cursor: pointer; float: right; height: 3.5rem; overflow: hidden; padding: 0; transition: color 1s ease-in-out; white-space: nowrap; width: 5.4rem;
}
.rating:not(:checked) > label:before { content: '= '; font-family: 'Typicons', sans-serif; font-size: 5rem; line-height: 1;
}
.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label,
.rating > input:checked ~ label { color: #fff; text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.4); transition: color 1s ease-in-out;
}
/*==============================================
Progress Steps
================================================ */
ol.ui { list-style: none; list-style-image: none; margin: 0 0 1rem 0; padding: 1rem 0 1rem 1rem; white-space: nowrap;
}
ol.ui li { float: left; margin-right: 1rem; position: relative; text-align: center; width: 100px;
}
ol.ui li > span { color: #fff; display: block; margin-bottom: 0.5rem; width: 100px;
}
ol.ui span:nth-of-type(2) { background: rgba(0, 0, 0, 0.4); border: 0.2rem solid transparent; border-radius: 50%; cursor: pointer; font-size: 1.5rem; font-weight: bold; width: 3rem; height: 3rem; display: inline-block; line-height: 1.7; transition: all 1.2s ease-in-out;
}
ol.ui span:nth-of-type(2):before { background: rgba(0, 0, 0, 0.4); bottom: 1.9rem; content: ""; height: 0.5rem; left: -2.65rem; position: absolute; transition: all 1.2s ease-in-out; width: 0rem;
}
ol.ui span:nth-of-type(2):after { background: rgba(0, 0, 0, 0.4); bottom: 1.9rem; content: ""; height: 0.5rem; left: 4.65rem; position: absolute; transition: all 1.2s ease-in-out; width: 4.35rem;
}
ol.ui li:first-of-type span:nth-of-type(2):before,
ol.ui li:last-of-type span:nth-of-type(2):after { display: none;
}
ol.ui .active span:nth-of-type(2) { border: 0.2rem solid white; transition: all 1s ease-in-out; transition-delay: 0.8s;
}
ol.ui .active span:nth-of-type(2):before { background: white; transition: all 1.2s ease-in-out; width: 4.35rem;
}
ol.ui p { color: #fff; left: 50%; margin-left: -1rem; margin-top: 4.5rem; cursor: pointer; position: absolute;
}
#first { transition-delay: 0;
}
/*==============================================
Video Player
================================================ */
input[type='range'] { -webkit-appearance: none; -moz-appearance: none; border-radius: 1rem; background: rgba(0, 0, 0, 0.5); height: 1rem; width: 100%;
}
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; border-radius: 1rem; background: white; height: 2rem; width: 2rem;
}
#video-container { margin: 0.5rem 0.5rem 0 0.5rem;
}
#video-controls { position: relative; bottom: 0; left: 0; right: 0;
}
button { background: none; border: 0; color: #EEE; border-radius: 3px; width: 2rem;
}
button [class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; font-size: 1.5rem; line-height: 1.7;
}
button:hover { cursor: pointer; color: #ccc;
}
#seek-bar { width: 58%;
}
#volume-bar { width: 16%;
}
/*==============================================
Menu
================================================ */
.ui ul { list-style: none; margin: 0 -1rem;
}
.ui ul li { color: #fff; cursor: pointer; float: left; font-size: 1.3rem; height: 2rem; position: relative; text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.6); width: 5rem;
}
.notification-sml:after { background: #e50000; border-radius: 1rem 1rem 1rem 0; box-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.6); content: '1'; font-size: 0.8rem; font-weight: bold; height: 1.2rem; left: 4.4rem; margin-top: -1rem; position: absolute; width: 1.2rem;
}
/*==============================================
Drop Down Menu
================================================ */
.menu ul { list-style: none; display: none; width: 100%; background: rgba(0, 0, 0, 0.5); float: left; margin: 1rem 0 0 0; padding: 0; border-radius: 1rem; overflow: hidden;
}
.menu ul li { color: #fff; cursor: pointer; display: block; float: none; height: 3rem; padding: 0.5rem; width: 100%;
}
.menu ul li:hover { background: rgba(0, 0, 0, 0.5); border-radius: 1rem; cursor: pointer;
}
.menu div { float: left; width: 100%; background: rgba(0, 0, 0, 0.25); border-radius: 1rem; color: #fff; cursor: pointer; line-height: 3; padding-left: 3rem;
}
.menu div span { float: right; background: rgba(0, 0, 0, 0.2); border-radius: 0 1rem 1rem 0; cursor: pointer; padding: 0 1rem;
}
.menu div span:hover { background: rgba(0, 0, 0, 0.5);
}
/*==============================================
Slider
================================================ */
input[type='range'] { -webkit-appearance: none; -moz-appearance: none; border-radius: 1rem; background: rgba(0, 0, 0, 0.5); height: 1rem; width: 100%;
}
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; border-radius: 1rem; background: white; height: 2rem; width: 2rem;
}
/*==============================================
Progress Bar
=============================================== */
.progress > span { background-color: rgba(255, 255, 255, 0.6); border-radius: 1rem; display: block; height: 2rem; overflow: hidden; position: relative;
}
.progress > span:after { background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)); background-size: 5rem 5rem; border-radius: 1rem; content: ""; overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1;
}
/*==============================================
Notifications
=============================================== */
.notifications ul { margin: 0; padding: 0;
}
.notifications ul li { background-color: rgba(0, 0, 0, 0.5); border-radius: 1rem; color: #fff; cursor: pointer; float: left; height: 5rem; list-style: none; margin: 0 0.5rem; width: 6rem;
}
.notifications ul li [class*="fontawesome-"]:before { font-size: 3rem; line-height: 1.7;
}
.notification:after { background: #e50000; border-radius: 1rem 1rem 1rem 0; box-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.6); content: '1'; font-size: 1.3rem; font-weight: bold; height: 2rem; position: absolute; margin-top: -0.5rem; width: 2rem;
}
/*==============================================
Login Form
================================================ */
.login input[type="email"], .login input[type="password"] { border-radius: 0 1rem 1rem 0; margin: 0.5rem 0; width: 75%;
}
.login label { margin: 0.5rem 0; width: 25%;
}
.login input[type="submit"] { border-radius: 1rem; margin: 1rem 0; width: 100%;
}
input[type="email"]:valid ~ .input-validation:after { background: rgba(0, 0, 0, 0.5); border-radius: 1rem; content: "✓"; color: #fff; font-size: 2rem; height: 3rem; line-height: 1.5; margin-left: 2rem; position: absolute; width: 3rem;
}
input[type="email"]:invalid ~ .input-validation:before { background: rgba(0, 0, 0, 0.5); border-radius: 1rem; content: "X"; color: #fff; font-family: 'arial', sans-serif; font-size: 2rem; font-weight: bold; height: 3rem; line-height: 1.5; margin-left: 2rem; position: absolute; width: 3rem;
}
input[type="email"]:invalid ~ .input-validation2:after { border-radius: 1rem; content: "This is an invalid email address"; color: #fff; top: 0.5rem; position: relative;
}
/*==============================================
Search Inputs
================================================ */
.search2 input[type="email"] { border-radius: 0 1rem 1rem 0; width: 80%;
}
/*==============================================
Twitter Widget
================================================ */
.twitter .fontawesome-twitter:before { color: #fff; float: left; font-size: 4rem; line-height: 2; margin: -1rem 0 -2rem 0.5rem;
}
.twitter div { background: rgba(0, 0, 0, 0.4); border-radius: 1rem; color: #fff; float: right; font-size: 1.3rem; margin-bottom: 0.5rem; padding: 1rem; position: relative; width: 100%; word-wrap: break-word;
}
.twitter div:after { content: ""; display: block; /* reduce the damage in FF3.0 */ position: absolute; bottom: -15px; left: 50px; width: 0; border-width: 15px 15px 0; border-style: solid; border-color: rgba(0, 0, 0, 0.4) transparent;
}
.twitter a { color: #fff; font-size: 1.5rem; text-decoration: none;
}
.twitter h3 { color: #fff; font-size: 2rem; margin: 0; padding: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section> <h1>YAUI Kit v2</h1> <h4>(Yet Another UI kit part 2)</h4> <h2>Color Picker v2</h2> <div class="ui colors clearfix"> <div id="red"></div> <div id="green"></div> <div id="blue"></div> </div> <h2>Ratings</h2> <fieldset class="rating ui"> <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label> <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label> <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label> <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label> <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label> </fieldset> <h2>Progress Steps</h2> <ol class="ui progress"> <li class="active"> <span>Step 1</span><span>1</span> </li> <li class="active"> <span>Step 2</span><span>2</span> </li> <li> <span>Step 3</span><span>3</span> </li> <li> <span>Step 4</span><span>4</span> </li> </ol> <h2>Video</h2> <div class="ui video"> <div id="video-container"> <!-- Video --> <video id="video" width="100%" height="189"> <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm"> <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogv"> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4"> <p> Your browser doesn't support HTML5 video. <a href="videos/mikethefrog.mp4">Download</a> the video instead. </p> </video> <!-- Video Controls --> <div id="video-controls"> <button type="button" id="play-pause"><span class="fontawesome-play"></span></button> <input type="range" id="seek-bar" value="0"> <button type="button" id="mute"><span class="fontawesome-volume-off"></span></button> <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1"> <button type="button" id="full-screen"><span class="fontawesome-fullscreen"></span></button> </div> </div> </div> <h2>Menu Notifications</h2> <div class="ui menu-notification"> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> <li class="notification-sml">Item5</li> </ul> </div> <h2>Menu</h2> <div class="menu ui"> <div> Menu <span class="fontawesome-caret-down"></span> </div> <ul> <li>Menu Item 1</li> <li>Menu Item 2</li> <li>Menu Item 3</li> <li>Menu Item 4</li> </ul> </div> <h2>Slider</h2> <div class="ui"> <input type="range" min="0" max="50" value="7" step="0"/> </div> <h2>Progress Bar</h2> <div class="ui progress"> <span style="width: 56%"></span> </div> <h2>Notifications</h2> <div class="ui notifications"> <ul> <li class="notification"><span class="fontawesome-envelope"></span></li> <li><span class="fontawesome-twitter"></span></li> <li class="notification"><span class="fontawesome-comments"></span></li> <li><span class="fontawesome-rss"></span></li> </ul> </div> <h2>Subscribe</h2> <div class="ui"> <label for="name">Email:</label> <input type="email" name="name" id="name" placeholder="[email protected]" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}"/> <input type="submit" value="Submit" /> <div class="input-validation"></div> </div> <div class="ui"> <label for="name"><span class="fontawesome-envelope"></span></label> <input type="email" name="name" id="name" placeholder="[email protected]" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}"/> <input type="submit" value="Submit" /> <div class="input-validation2"></div> </div> <h2>Log in </h2> <div class="ui login"> <label for="name">Username:</label> <input type="email" name="name" id="name" placeholder="John Smith" /> <label for="name">Password:</label> <input type="password" name="name" id="name" placeholder="********" /> <input type="submit" value="Submit"/> </div> <h2>Search</h2> <div class="ui"> <label for="name"><span class="fontawesome-search"></span></label> <input type="email" name="name" id="name" /> <input type="submit" value="Search"/> </div> <div class="ui search2"> <label for="name"><span class="fontawesome-search"></span></label> <input type="email" name="name" id="name" placeholder="Press enter to search"/> </div> <h2>Twitter</h2> <div class="ui twitter"> <div> </div> <span class="fontawesome-twitter"></span> <a href="http://twitter.com/darbybrown">@darbybrown <h3>Follow Me On Twitter</h3></a> </div> </section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://s.cdpn.io/31787/video-controls.js'></script>
<script src='http://s.cdpn.io/31787/html5slider.js'></script> <script src="js/index.js"></script>
</body>
</html>
YAUI v2 - Script Codes CSS Codes
@charset "UTF-8";
/*==============================================
Demo Styles
================================================ */
@import "http://weloveiconfonts.com/api/?family=fontawesome";
html { font-family: 'Roboto Slab', serif; font-size: 16px; height: 100%;
}
body { background: #9b59b6; text-align: center;
}
* { box-sizing: border-box;
}
section { width: 30rem; margin: auto; padding-bottom: 10rem;
}
h1 { color: #fff; font-size: 5rem; font-weight: bold; margin: 0 0 2rem 0; text-shadow: 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.4);
}
h2 { color: #fff; font-size: 2rem; font-weight: bold; margin: 0; text-shadow: 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.4);
}
h4 { color: #fff; margin: -2rem 0 2rem 0; text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.4);
}
/*==============================================
Base Form Styles
All form elements need these styles
The rest are modular
================================================ */
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; font-size: 1.5rem; line-height: 2;
}
.ui { border-radius: 2rem; box-shadow: inset 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.1), 0.2rem 0.2rem 0 rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.25); display: inline-block; font-size: 1rem; margin: 0 0 1rem 0; padding: 1rem; text-align: center; width: 30rem;
}
.ui input[type="email"], .ui input[type="password"], .ui input[type="search"] { background: rgba(0, 0, 0, 0.25); border: 0; border-radius: 0; height: 3rem; width: 58%; color: #fff; float: left; padding-left: 0.5rem;
}
.ui input[type="email"]:focus, .ui input[type="password"]:focus, .ui input[type="search"]:focus { background: rgba(0, 0, 0, 0.5); transition: background 1s ease;
}
.ui input[type="submit"] { background: rgba(0, 0, 0, 0.4); border: 0; border-radius: 0 1rem 1rem 0; color: #fff; float: left; height: 3rem; width: 20%; z-index: 3;
}
.ui input[type="submit"]:hover { background: rgba(0, 0, 0, 0.6); transition: all 1s ease;
}
.ui label { background: rgba(0, 0, 0, 0.4); border: 0; border-radius: 0 1rem 1rem 0; color: #fff; float: left; height: 3rem; width: 20%; z-index: 3; border-radius: 1rem 0 0 1rem; line-height: 3;
}
/*==============================================
Color Picker Slider
================================================ */
#red, #green, #blue { float: left; clear: left; width: 100%; margin: 1rem 0;
}
#red .ui-slider-range { background: #ef2929;
}
#green .ui-slider-range { background: #8ae234;
}
#blue .ui-slider-range { background: #729fcf;
}
.ui-slider-handle { width: 2rem !important; height: 2rem !important; border-radius: 50%; margin-top: -0.2rem;
}
.ui-slider-range { border-radius: 1rem;
}
.colors > div { background: rgba(0, 0, 0, 0.5); border: none; border-radius: 1rem; height: 1rem; width: 100%;
}
/*==============================================
Ratings modified version of Lea Verou's
http://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/
================================================ */
fieldset { border: 0;
}
.rating:not(:checked) > input { clip: rect(0, 0, 0, 0); position: absolute; top: -9999px;
}
.rating:not(:checked) > label { background: none; color: rgba(0, 0, 0, 0.6); cursor: pointer; float: right; height: 3.5rem; overflow: hidden; padding: 0; transition: color 1s ease-in-out; white-space: nowrap; width: 5.4rem;
}
.rating:not(:checked) > label:before { content: '= '; font-family: 'Typicons', sans-serif; font-size: 5rem; line-height: 1;
}
.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label,
.rating > input:checked ~ label { color: #fff; text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.4); transition: color 1s ease-in-out;
}
/*==============================================
Progress Steps
================================================ */
ol.ui { list-style: none; list-style-image: none; margin: 0 0 1rem 0; padding: 1rem 0 1rem 1rem; white-space: nowrap;
}
ol.ui li { float: left; margin-right: 1rem; position: relative; text-align: center; width: 100px;
}
ol.ui li > span { color: #fff; display: block; margin-bottom: 0.5rem; width: 100px;
}
ol.ui span:nth-of-type(2) { background: rgba(0, 0, 0, 0.4); border: 0.2rem solid transparent; border-radius: 50%; cursor: pointer; font-size: 1.5rem; font-weight: bold; width: 3rem; height: 3rem; display: inline-block; line-height: 1.7; transition: all 1.2s ease-in-out;
}
ol.ui span:nth-of-type(2):before { background: rgba(0, 0, 0, 0.4); bottom: 1.9rem; content: ""; height: 0.5rem; left: -2.65rem; position: absolute; transition: all 1.2s ease-in-out; width: 0rem;
}
ol.ui span:nth-of-type(2):after { background: rgba(0, 0, 0, 0.4); bottom: 1.9rem; content: ""; height: 0.5rem; left: 4.65rem; position: absolute; transition: all 1.2s ease-in-out; width: 4.35rem;
}
ol.ui li:first-of-type span:nth-of-type(2):before,
ol.ui li:last-of-type span:nth-of-type(2):after { display: none;
}
ol.ui .active span:nth-of-type(2) { border: 0.2rem solid white; transition: all 1s ease-in-out; transition-delay: 0.8s;
}
ol.ui .active span:nth-of-type(2):before { background: white; transition: all 1.2s ease-in-out; width: 4.35rem;
}
ol.ui p { color: #fff; left: 50%; margin-left: -1rem; margin-top: 4.5rem; cursor: pointer; position: absolute;
}
#first { transition-delay: 0;
}
/*==============================================
Video Player
================================================ */
input[type='range'] { -webkit-appearance: none; -moz-appearance: none; border-radius: 1rem; background: rgba(0, 0, 0, 0.5); height: 1rem; width: 100%;
}
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; border-radius: 1rem; background: white; height: 2rem; width: 2rem;
}
#video-container { margin: 0.5rem 0.5rem 0 0.5rem;
}
#video-controls { position: relative; bottom: 0; left: 0; right: 0;
}
button { background: none; border: 0; color: #EEE; border-radius: 3px; width: 2rem;
}
button [class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; font-size: 1.5rem; line-height: 1.7;
}
button:hover { cursor: pointer; color: #ccc;
}
#seek-bar { width: 58%;
}
#volume-bar { width: 16%;
}
/*==============================================
Menu
================================================ */
.ui ul { list-style: none; margin: 0 -1rem;
}
.ui ul li { color: #fff; cursor: pointer; float: left; font-size: 1.3rem; height: 2rem; position: relative; text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.6); width: 5rem;
}
.notification-sml:after { background: #e50000; border-radius: 1rem 1rem 1rem 0; box-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.6); content: '1'; font-size: 0.8rem; font-weight: bold; height: 1.2rem; left: 4.4rem; margin-top: -1rem; position: absolute; width: 1.2rem;
}
/*==============================================
Drop Down Menu
================================================ */
.menu ul { list-style: none; display: none; width: 100%; background: rgba(0, 0, 0, 0.5); float: left; margin: 1rem 0 0 0; padding: 0; border-radius: 1rem; overflow: hidden;
}
.menu ul li { color: #fff; cursor: pointer; display: block; float: none; height: 3rem; padding: 0.5rem; width: 100%;
}
.menu ul li:hover { background: rgba(0, 0, 0, 0.5); border-radius: 1rem; cursor: pointer;
}
.menu div { float: left; width: 100%; background: rgba(0, 0, 0, 0.25); border-radius: 1rem; color: #fff; cursor: pointer; line-height: 3; padding-left: 3rem;
}
.menu div span { float: right; background: rgba(0, 0, 0, 0.2); border-radius: 0 1rem 1rem 0; cursor: pointer; padding: 0 1rem;
}
.menu div span:hover { background: rgba(0, 0, 0, 0.5);
}
/*==============================================
Slider
================================================ */
input[type='range'] { -webkit-appearance: none; -moz-appearance: none; border-radius: 1rem; background: rgba(0, 0, 0, 0.5); height: 1rem; width: 100%;
}
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; border-radius: 1rem; background: white; height: 2rem; width: 2rem;
}
/*==============================================
Progress Bar
=============================================== */
.progress > span { background-color: rgba(255, 255, 255, 0.6); border-radius: 1rem; display: block; height: 2rem; overflow: hidden; position: relative;
}
.progress > span:after { background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)); background-size: 5rem 5rem; border-radius: 1rem; content: ""; overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1;
}
/*==============================================
Notifications
=============================================== */
.notifications ul { margin: 0; padding: 0;
}
.notifications ul li { background-color: rgba(0, 0, 0, 0.5); border-radius: 1rem; color: #fff; cursor: pointer; float: left; height: 5rem; list-style: none; margin: 0 0.5rem; width: 6rem;
}
.notifications ul li [class*="fontawesome-"]:before { font-size: 3rem; line-height: 1.7;
}
.notification:after { background: #e50000; border-radius: 1rem 1rem 1rem 0; box-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.6); content: '1'; font-size: 1.3rem; font-weight: bold; height: 2rem; position: absolute; margin-top: -0.5rem; width: 2rem;
}
/*==============================================
Login Form
================================================ */
.login input[type="email"], .login input[type="password"] { border-radius: 0 1rem 1rem 0; margin: 0.5rem 0; width: 75%;
}
.login label { margin: 0.5rem 0; width: 25%;
}
.login input[type="submit"] { border-radius: 1rem; margin: 1rem 0; width: 100%;
}
input[type="email"]:valid ~ .input-validation:after { background: rgba(0, 0, 0, 0.5); border-radius: 1rem; content: "✓"; color: #fff; font-size: 2rem; height: 3rem; line-height: 1.5; margin-left: 2rem; position: absolute; width: 3rem;
}
input[type="email"]:invalid ~ .input-validation:before { background: rgba(0, 0, 0, 0.5); border-radius: 1rem; content: "X"; color: #fff; font-family: 'arial', sans-serif; font-size: 2rem; font-weight: bold; height: 3rem; line-height: 1.5; margin-left: 2rem; position: absolute; width: 3rem;
}
input[type="email"]:invalid ~ .input-validation2:after { border-radius: 1rem; content: "This is an invalid email address"; color: #fff; top: 0.5rem; position: relative;
}
/*==============================================
Search Inputs
================================================ */
.search2 input[type="email"] { border-radius: 0 1rem 1rem 0; width: 80%;
}
/*==============================================
Twitter Widget
================================================ */
.twitter .fontawesome-twitter:before { color: #fff; float: left; font-size: 4rem; line-height: 2; margin: -1rem 0 -2rem 0.5rem;
}
.twitter div { background: rgba(0, 0, 0, 0.4); border-radius: 1rem; color: #fff; float: right; font-size: 1.3rem; margin-bottom: 0.5rem; padding: 1rem; position: relative; width: 100%; word-wrap: break-word;
}
.twitter div:after { content: ""; display: block; /* reduce the damage in FF3.0 */ position: absolute; bottom: -15px; left: 50px; width: 0; border-width: 15px 15px 0; border-style: solid; border-color: rgba(0, 0, 0, 0.4) transparent;
}
.twitter a { color: #fff; font-size: 1.5rem; text-decoration: none;
}
.twitter h3 { color: #fff; font-size: 2rem; margin: 0; padding: 0;
}
YAUI v2 - Script Codes JS Codes
/*
V1 of this UI Kit can be found here:
http://codepen.io/hugo/pen/qwsFj
As usual works best with WebKit
Take it, use it, do what you want with it
Sharing is Caring :)
*/
// Progress Steps JS Thanks to Francesco :) http://codepen.io/Francext
$("ol.ui li").click(function(e) { var currentElem = $('.ui.progress > li').index($(this)); if($(this).is('.ui.progress > li:last-child') && !$(this).hasClass('active')) { var elem = document.querySelectorAll('.ui.progress > li'); [].forEach.call(elem, function(index, value) { index.classList.add('active'); }); } else { $(this).toggleClass('active'); }
});
//Color Picker
function hexFromRGB(r, g, b) { var hex = [ r.toString( 16 ), g.toString( 16 ), b.toString( 16 ) ]; $.each( hex, function( nr, val ) { if ( val.length === 1 ) { hex[ nr ] = "0" + val; } }); return hex.join( "" ).toUpperCase();
}
function refreshSwatch() { var red = $( "#red" ).slider( "value" ), green = $( "#green" ).slider( "value" ), blue = $( "#blue" ).slider( "value" ), hex = hexFromRGB( red, green, blue ); $( "body" ).css( "background-color", "#" + hex );
}
$(function() { $( "#red, #green, #blue" ).slider({ orientation: "horizontal", range: "min", min: 50, max: 190, value: 127, slide: refreshSwatch, change: refreshSwatch }); $( "#red" ).slider( "value", 115 ); $( "#green" ).slider( "value", 59 ); $( "#blue" ).slider( "value", 172 );
});
// Menu Notifications
$(".menu-notification ul li").click(function() { $(this).toggleClass('notification-sml');
});
// Dropdown Menu
$(".menu").click(function () { $(".menu ul").slideToggle("600");
});
// Notifications
$(".notifications ul li").click(function() { $(this).toggleClass('notification');
});
// Twitter old API no longer works
$.getJSON("https://api.twitter.com/1/statuses/user_timeline/darbybrown.json?count=1&include_rts=1&callback=?", function(data) { $(".twitter div").html(data[0].text);
});
Developer | Hugo DarbyBrown |
Username | hugo |
Uploaded | August 09, 2022 |
Rating | 4.5 |
Size | 11,912 Kb |
Views | 52,624 |
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!
Name | Size |
Mixer MKII | 9,722 Kb |
Social-Media Card | 6,177 Kb |
Concept mobile navigation | 4,141 Kb |
Animated Atom Logo | 5,901 Kb |
Animated Navicons | 3,888 Kb |
Scroll Overflow Menu | 5,614 Kb |
DNA Double Helix | 5,112 Kb |
Slide Icon Menu | 4,910 Kb |
A.X.E - LumberJack single page Site | 3,665 Kb |
Rainbow 3D Text | 4,538 Kb |
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!
Name | Username | Size |
Sassy Buttons | Elyseholladay | 2,299 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
Slim Grid SASS SCSS v3.2 | Thesturs | 4,709 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
Cut and Paste Roll Link | BottomlineInteractive | 2,546 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
CSS Grid Overlay | Cliffpyles | 3,090 Kb |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
Comment Jquery | SquishyAndroid | 2,421 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!