Skip to content

Instantly share code, notes, and snippets.

@empirefx

empirefx/default.css

Last active August 29, 2015 13:56
Show Gist options
  • Save empirefx/8836041 to your computer and use it in GitHub Desktop.
Save empirefx/8836041 to your computer and use it in GitHub Desktop.
Download ZIP
Drag n drop in jquery
Raw
default.css
/* COLOR BACKGROUND */
blockquote{
background-color: #F7F7F7;
}
.layout-1{
background-color: #fff;
}
.layout-2{
background-color: #EDEDED;
}
.layout-3{
background-color: #BFBFBF;
}
.layout-4{
background-color: #FCFBF7;
}
.layout-5, .layout-6{
background-color: #EDEDED;
}
.layout-5 ul .select, .layout-6 ul .select{
background-color: #EDEDED;
}
.layout-5 ul li, .layout-6 ul li{
background-color: #F7f7f7;
}
.layout-5 ul li a, .layout-6 ul li a{
color: #383838;
text-decoration: none;
}
.layout-5 ul li:hover, .layout-6 ul li:hover{
background-color: #EDEDED;
}
.menu-1 ul li, .menu-2 ul li{
background-color: #EDEDED;
}
.menu-1 ul li:hover, .menu-2 ul li:hover {
background-color: #DDDDDD;
}
.menu-1 ul li:hover a, .menu-2 ul li:hover a{
color: #333333;
}
.menu-1 ul li a, .menu-1-clean ul li a, .menu-2 ul li a, .menu-2-clean ul li a{
color: #7A7A7A;
}
.menu-1-clean ul li a:hover, .menu-2-clean ul li a:hover{
color: #333333;
text-decoration: underline;
}
.form-text, .form-text-half, .form-text-lower{
background-color: #F4F4F4;
}
.form-text-2, .form-text-half-2, .form-text-lower-2{
background-color: #fff;
}
.form-dropmenu option{
background-color: #fff;
}
.form-dropmenu option:hover{
background-color: #EDEDED;
}
.form-submit, .form-buttom{
background-color: #F4F4F4;
}
.form-submit:hover, .form-buttom:hover{
background-color: #EDEDED;
}
.form-button-menu button{
background-color: #F4F4F4;
}
.form-button-menu button:focus{
background-color: #E2E2E2;
}
.form-button-menu button:hover{
background-color: #E2E2E2;
}
.slideshow{
background-color: #F4F4F4;
}
.slideshow .prev a, .slideshow .next a{
color: #686868;
}
.slideshow label{
background-color: #EAEAEA;
}
/* WIDTH HEIGHT PADDING MARGIN BORDER */
p{
width: 300px;
}
blockquote{
padding: 10px;
font-size: 13px;
width: 300px;
margin-left: 20px;
margin-right: 20px;
}
table{
}
table tr{
border: 1px #BFBFBF solid;
}
table td{
padding: 5px;
}
table th{
border: 1px #BFBFBF solid;
padding: 5px;
}
.layout-4{
border: 1px #EDEBE6 solid;
}
.layout-5, .layout-6{
width: 600px;
height: 200px;
}
.layout-5 ul{
width: 100px;
}
.layout-5 ul li, .layout-6 ul li{
width: 100px;
text-align: center;
padding: 12px 0px 12px 0px;
}
.layout-6 ul li{
float: left;
}
.layout-7{
border: 1px #EDEDED solid;
}
.layout-1, .layout-2, .layout-3, .layout-4, .layout-7{
width: 300px;
height: 150px;
}
.menu-1, .menu-2, .menu-1-clean, .menu-2-clean{
width: auto;
height: auto;
}
.menu-1 ul li, .menu-1-clean ul li{
float: left;
text-align: center;
padding: 16px 30px 16px 30px;
}
.menu-2 ul li, .menu-2-clean ul li{
padding: 20px 90px 20px 40px;
}
.menu-1 ul li a, .menu-1-clean ul li a, .menu-2 ul li a, .menu-2-clean ul li a{
text-decoration: none;
}
.form-text, .form-text-2{
padding: 10px 20px 10px 20px;
}
.form-text-half, .form-text-half-2{
width: 140px;
padding: 10px 10px 10px 10px;
}
.form-text-lower, .form-text-lower-2{
width: 50px;
padding: 10px 10px 10px 10px;
}
.form-text, .form-text-2, .form-text-half, .form-text-half-2, .form-text-lower, .form-text-lower-2{
font-size: 14px;
text-transform: uppercase;
border: 0px solid;
}
.form-textarea{
width: 400px;
height: 100px;
padding: 10px;
border: 0px solid;
}
.form-dropmenu{
padding: 3px 15px 3px 15px;
}
.form-dropmenu option{
padding: 3px 15px 3px 15px;
}
.form-dropmenu-2 option{
padding: 5px 20px 5px 20px;
}
.form-submit, .form-buttom{
border: 1px #EDEDED solid;
padding: 8px 14px 8px 14px;
text-transform: uppercase;
font-size: 11px;
}
.form-button-menu button{
float: left;
padding: 0px;
margin: 0px;
border: 0px;
padding: 10px 20px 10px 20px;
border-top: 1px #E2E2E2 solid;
border-right: 1px #E2E2E2 solid;
border-bottom: 1px #E2E2E2 solid;
}
.form-button-menu button:first-child{
border-left: 1px #E2E2E2 solid;
}
.slideshow{
width: 900px;
height: 280px;
}
.slideshow .prev{
position: absolute;
margin-top: 110px;
}
.slideshow .next a{
position: absolute;
margin-left: 840px;
margin-top: 110px;
}
.slideshow .prev a, .slideshow .next a{
font-size: 50px;
text-decoration: none;
}
.slideshow label{
position: absolute;
margin-top: 250px;
padding: 10px 0px 10px 0px;
width: 900px;
text-indent: 50px;
}
img.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
/* SHADOW BORDER */
.layout-1, .layout-2, .layout-3, .layout-5, .layout-6{
-webkit-box-shadow: #898989 0px 2px 3px 0px ;
-moz-box-shadow: #898989 0px 2px 3px 0px ; /* color, h-offset, v-offset, blur, spread, inset is optional */
box-shadow: #898989 0px 2px 3px 0px ;
}
.form-submit, .form-buttom{
-webkit-box-shadow: #C4C4C4 0px 1px 1px 0px ;
-moz-box-shadow: #C4C4C4 0px 1px 1px 0px ; /* color, h-offset, v-offset, blur, spread, inset is optional */
box-shadow: #C4C4C4 0px 1px 1px 0px ;
}
.form-text, .form-text-2, .form-textarea, .form-text-half, .form-text-half-2, .form-text-lower, .form-text-lower-2{
-webkit-box-shadow: #898989 0px 1px 3px 0px inset;
-moz-box-shadow: #898989 0px 1px 3px 0px inset; /* color, h-offset, v-offset, blur, spread, inset is optional */
box-shadow: #898989 0px 1px 3px 0px inset;
}
.form-text, .form-text-2, .form-textarea, .form-text-half, .form-text-half-2, .form-text-lower, .form-text-lower-2, .form-submit, .form-buttom, .slideshow{
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.form-button-menu button:first-child, .menu-1 ul li:first-child{
-webkit-border-radius: 3px 0px 0px 3px;
-moz-border-radius: 3px 0px 0px 3px;
border-radius: 3px 0px 0px 3px;
}
.form-button-menu button:last-child, .menu-1 ul li:last-child{
-webkit-border-radius: 0px 3px 3px 0px;
-moz-border-radius: 0px 3px 3px 0px;
border-radius: 0px 3px 3px 0px;
}
Raw
editor.html
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-ui-1.10.3.custom/js/jquery-1.9.1.min.js"></script>
<script src="jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="default.css">
<style type="text/css">
@font-face {font-family: 'kalinga';src: url("CALIBRI.TTF");font-weight: normal;font-style: normal;}
body{
background-color: #545454;
font-family: 'kalinga', 'fallback font', serif;
}
#editor{
background-color: #303030;
position: absolute;
top:10px;
left:5px;
padding: 5px 10px 5px 10px;
}
#elements-option{
background-color: #303030;
position: absolute;
top:10px;
left:600px;
padding: 5px 10px 5px 10px;
}
#editor .box, #elements-option .box{
float: left;
margin: 0px 5px 0px 5px;
padding: 5px;
}
#editor .box .buttom, #elements-option .box .buttom{
float: left;
margin-left: 5px;
}
#editor .box .buttom a, #elements-option .box .buttom a{
font-size: 12px;
color: #8E8E8E;
text-decoration: none;
display: block;
padding: 8px 12px 8px 12px;
border-top: 1px #3D3D3D solid;
}
#editor .box .buttom:hover, #elements-option .box .buttom:hover{
background-color: #000;
}
#editor .box .buttom:hover a, #elements-option .box .buttom:hover a{
color: #fff;
}
#editor .form-text, #elements-option .form-text{
width: 50px;
height: 32px;
background-color: #2D2D2D;
border: 0px solid;
padding: 2px;
color: #fff;
}
#display{
background-color: #fff;
height: 500px;
width: 1000px;
margin-top: 100px;
margin-left: 400px;
margin-right: auto;
/* padding: 10px; */
}
#elements{
height: auto;
width: 200px;
position: absolute;
margin-left: -10px;
margin-top: 20px;
}
#elements .elem{
height: 100px;
width: auto;
border-bottom: 1px #6B6B6B solid;
border-right: 1px #6B6B6B solid;
}
#elements .elem:last-child{
border-bottom: 0px solid;
}
#elements .elem:hover{
background-color: #5E5E5E;
}
#elements .elem p{
margin-left: 20px;
margin-top: 40px;
position: absolute;
color: #fff;
width: 100px;
}
#display{
-webkit-box-shadow: #222222 0px 3px 6px 0px ;
-moz-box-shadow: #222222 0px 3px 6px 0px ; /* color, h-offset, v-offset, blur, spread */
box-shadow: #222222 0px 3px 6px 0px ; /* inset is optional */
}
#editor, #elements-option{
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #151515 0%, #252525 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #151515 0%, #252525 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #151515 0%, #252525 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #151515), color-stop(1, #252525));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #151515 0%, #252525 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #151515 0%, #252525 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: #222222 0px 2px 3px 0px ;
-moz-box-shadow: #222222 0px 2px 3px 0px ; /* color, h-offset, v-offset, blur, spread */
box-shadow: #222222 0px 2px 3px 0px ; /* inset is optional */
}
#editor .box, #elements-option .box{
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#editor .box .buttom a, #elements-option .box .buttom a{
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #202020 0%, #303030 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #202020 0%, #303030 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #202020 0%, #303030 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #202020), color-stop(1, #303030));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #202020 0%, #303030 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #202020 0%, #303030 100%);
}
#editor .box .buttom a:hover, #elements-option .box .buttom a:hover{
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #404040 0%, #303030 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #404040 0%, #303030 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #404040 0%, #303030 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #404040), color-stop(1, #303030));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #404040 0%, #303030 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #404040 0%, #303030 100%);
border-top: 1px #333333 solid;
}
/*
.layout-1{
height: 200px;
width: 300px;
background-color: #f3f;
}
.layout-2{
height: 80px;
width: 150px;
background-color: #E0ACAC;
}
.layout-3{
height: 50px;
width: 50px;
background-color: #eee;
}
*/
</style>
<script type="text/javascript">
/*
function addcircle(){
var c=document.getElementById("circle-1");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(45,45,40,0,2*Math.PI);
ctx.stroke();
}
*/
function addLayout(id){
// class="ui-widget-content"
var ul = $('<div class="' + id + '">' + id + '<p></p></div>');
$('#display').append(ul);
//$('<div class="' + id + '" />').html(id).appendTo('#display');
}
$(document).ready(function() {
var a = 3;
var lastSelected = '';
//add circle
//addcircle();
// Handler for .ready() called.
$('.elem').click(function(event) {
//alert(event.target.id);
addLayout(event.target.id);
});
$('#add-new').click(function() {
$('#display').html('');
});
// ELEMENTS OPTIONS
$('#change-border').click(function() {
if (lastSelected) {
//alert(lastSelected);
var styleProps = $(lastSelected).css( ["width", "height", "color", "background-color", "border-top-style", "border-left-width"]);
$.each( styleProps, function( prop, value ) {
//html.push( prop + ": " + value );
alert( prop + ": " + value );
});
};
});
$('#display').hover(function (event) {
$('#display').on('click', 'div, canvas', function(event) {
$(this).css('z-index', a++);
lastSelected = this;
$(this).resizable();
});
$('#display div, #display canvas').hover(function(event) {
//$(this).not('#display').css('border-width', '0px');
//$(this).not('#display').css('border-style', 'dashed');
//zIndex: 999,
$(this).draggable({ opacity: 0.5, containment: 'parent' });
$(this).droppable({ helper: 'clone',
start: function(event, ui) {
$(ui.helper).addClass('ui-draggable-helper');
},
drop: function( event, ui ) {
//alert(ui.draggable);
//alert(ui.helper.parent().attr('class'));
if (!ui.helper.parent().attr('class')) {
if(confirm('Merge?')) {
$(ui.helper).clone().prependTo(this).css( { 'opacity' : '10','position' : 'absolute', 'left': '0px', 'top': '0px' } );
$(ui.draggable).html(ui.draggable.remove().html());
}else{
//Do nothing
}
};
}
});
}, function(){
//$(this).removeAttr("style");
//$(this).not('#display').css('border-width', '0px');
});
});
});
</script>
</head>
<body>
<div id="editor">
<!--
<div class="box">
<div class="buttom"><a href="#">OPEN</a></div>
</div>
-->
<div class="box">
<!--
<div class="buttom"><input type="text" name="texto" placeholder="103px" class="form-text" /></div>
<div class="buttom"><input type="text" name="texto" placeholder="102px" class="form-text" /></div>
-->
<div class="buttom" id="add-new"><a href="#">NEW</a></div>
</div>
<div class="box">
<div class="buttom"><a href="#">LAYOUT</a></div>
<div class="buttom"><a href="#">TEXT</a></div>
<div class="buttom"><a href="#">TABLE</a></div>
<div class="buttom"><a href="#">FORM</a></div>
<div class="buttom"><a href="#">CONTENT</a></div>
<div class="buttom"><a href="#">MENU</a></div>
<div class="buttom"><a href="#">SLIDE</a></div>
</div>
</div>
<div id="elements-option">
<div class="box">
<div class="buttom"><a href="#">NO-WIDTH</a></div>
<div class="buttom"><a href="#">NO-HEIGHT</a></div>
</div>
<div class="box">
<div class="buttom"><a href="#">SHADOW</a></div>
<div class="buttom"><a href="#">NO-SHADOW</a></div>
</div>
<div class="box">
<div class="buttom"><a href="#">BORDER</a></div>
<div class="buttom" id="change-border"><a href="#">NO-BORDER</a></div>
<div class="buttom"><a href="#">BORDER-SOLID</a></div>
<div class="buttom"><a href="#">BORDER-DOT</a></div>
</div>
</div>
<div id="elements">
<div class="elem" id="layout-1"><p>LAYOUT 1</p></div>
<div class="elem" id="layout-2"><p>LAYOUT 2</p></div>
<div class="elem" id="layout-3"><p>LAYOUT 3</p></div>
<div class="elem" id="layout-4"><p>LAYOUT 4</p></div>
</div>
<div id="display">
<!--
<canvas id="circle-1" width="100" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
-->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment