devol
/
LinkStack
mirror of https://github.com/LinkStackOrg/LinkStack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added custom button editor 

Added the long planned button editor. This solution does not look optimal, but works... mostly.

This solution is implemented with JavaScript and the current versions code is very unorganized mostly uncommented and the HTML is still mostly done with inline code. I hope I will fix this in future revisions.

To learn more about the new button editor, read:
https://littlelink-custom.com/blog/upcoming-features/
https://littlelink-custom.com/blog/progress-of-the-new-button-editor/
This commit is contained in:
Julian Prieber 2022-04-27 20:55:19 +02:00
parent 243e4b55c6
commit 62c9baba23
67 changed files with 15440 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

661
resources/views/studio/button-editor.blade.php Normal file
View File

@ -0,0 +1,661 @@
<!doctype html>
<html lang="en">
<head>
<title>Studio ⚙️ {{ config('app.name') }}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
<link href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
<!-- begin dark mode detection -->
<script src="{{ asset('littlelink/js/js.cookie.min.js') }}"></script>
<script>
// code to set the `color_scheme` cookie
var $color_scheme = Cookies.get("color_scheme");
function get_color_scheme() {
return (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) ? "dark" : "light";
}
function update_color_scheme() {
Cookies.set("color_scheme", get_color_scheme());
}
// read & compare cookie `color-scheme`
if ((typeof $color_scheme === "undefined") || (get_color_scheme() != $color_scheme))
update_color_scheme();
// detect changes and change the cookie
if (window.matchMedia)
window.matchMedia("(prefers-color-scheme: dark)").addListener( update_color_scheme );
// reloads page to apply the dark mode cookie
window.onload = function() {
if(!window.location.hash && get_color_scheme() == "dark" && (get_color_scheme() != $color_scheme)) {
window.location = window.location + '#dark';
window.location.reload();
}
}
</script>
<?php // loads dark mode CSS if dark mode detected
$color_scheme = isset($_COOKIE["color_scheme"]) ? $_COOKIE["color_scheme"] : false; ?>
@if ($color_scheme == 'dark')
<!-- switch the two <link> Tags below to default to dark mode if cookie detection fails -->
<link rel="stylesheet" href="{{ asset('/studio/css/bootstrap.min-dark.css') }}">
<link rel="stylesheet" href="{{ asset('/studio/css/style-dashboard-dark.css') }}">
@else
<link rel="stylesheet" href="{{ asset('/studio/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('/studio/css/style-dashboard.css') }}">
@endif
<!-- end dark mode detection -->
@if(file_exists(base_path("littlelink/images/avatar.png" )))
<link rel="icon" type="image/png" href="{{ asset('littlelink/images/avatar.png') }}">
@else
<link rel="icon" type="image/svg+xml" href="{{ asset('littlelink/images/logo.svg') }}">
@endif
<!-- start button editor -->
<style type="text/css">
#inside{
background:white;
height:600px;
padding-top:50px;
padding-right:30px;
padding-left:30px;
}
</style>
<title> MELANGE button generator </title>
<link rel="stylesheet" type="text/css" href="./styles/button-gen.css">
<link rel="stylesheet" href="./styles/jquery.gradientPicker.css" type="text/css" />
<!--<link rel="stylesheet" href="./vendor/jqPlugins/colorpicker/css/colorpicker.css" type="text/css" /> -->
<link rel="stylesheet" href="./styles/colorpicker_1.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="./themes/blackboard.css">
<script src="./js/rainbow.js"></script>
<script src="./js/css.js"></script>
<script src="./js/jquery-1.7.js"></script>
<script src="./js/jqueryUI-custom.js"></script>
<script src="./js/colorpicker.js"></script>
<script src="./js/jquery.gradientPicker.js"></script>
<script>
$(document).ready(function() {
$('#code').click(function() {
var css_text = 'padding-top : '+button_css.padding_top+';'+'\npadding-bottom :'+button_css.padding_bottom+';'+'\npadding-left :'+button_css.padding_left+';';
css_text = css_text+'\npadding-right :'+button_css.padding_right+';'+'\ncolor :'+button_css.color+';'+'\nbackground-image :'+button_css.background_image+';';
css_text = css_text+'\nborder-radius :'+button_css.border_radius+';'+'\nfont-size :'+button_css.font_size+';'+'\nfont-family :'+button_css.font_family+';';
css_text = css_text+'\nborder-color :'+button_css.border_color+';'+'\nborder-style :'+button_css.border_style+';'+'\nborder-width :'+button_css.border_width+';';
$('#sCode').html(css_text);
Rainbow.color(div, function() {
document.getElementById('output').appendChild(div);
});
$('.modal-profile').fadeIn("slow");
$('.modal-lightsout').fadeTo("slow", .9);
});
$('a.modal-close-profile, .modal-lightsout').click(function() {
$('.modal-profile').fadeOut("slow");
$('.modal-lightsout').fadeOut("slow");
});
var $button = $("#sample");
$("#ex1").gradientPicker({
change: function(points, styles) {
for (i = 1; i < styles.length; ++i) {
$button.css("background-image", styles[i]);
button_css.background_image = styles[i];
}
},
fillDirection: "45deg",
controlPoints: ["white 0%", "#888888 100%"]
});
$('#color').ColorPicker({
color: '#000000',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#color').css('background-color', '#' + hex);
document.getElementById("sample").style.color='#'+hex;
button_css.color = '#'+hex;
}
});
$('#border-color').ColorPicker({
color: '#000000',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('#border-color').css('background-color', '#' + hex);
document.getElementById("sample").style.borderColor='#'+hex;
button_css.border_color = '#'+hex;
}
});
document.getElementById("pdtb").onchange = $.proxy(function(){
var val = document.getElementById('pdtb').value;
$('#sample').css("padding-top",val+'px');
$('#sample').css("padding-bottom",val+'px');
button_css.padding_top = val+'px';
button_css.padding_bottom = val+'px';
},document);
document.getElementById("pdlr").onchange = $.proxy(function(){
var val = document.getElementById('pdlr').value;
$('#sample').css("padding-left",val+'px');
$('#sample').css("padding-right",val+'px');
button_css.padding_left = val+'px';
button_css.padding_right = val+'px';
},document);
document.getElementById("ftb").onchange = $.proxy(function(){
var val = document.getElementById('ftb').value;
$('#sample').css("font-size",val+'px');
button_css.font_size = val+'px';
},document);
document.getElementById("br").onchange = $.proxy(function(){
var val = document.getElementById('br').value;
$('#sample').css("border-radius",val+'px');
button_css.border_radius = val+'px';
},document);
document.getElementById("tsub").onclick = $.proxy(function(){
var val = document.getElementById('text').value;
$('#sample').text(val);
},document);
document.getElementById("ffsub").onclick = $.proxy(function(){
var font1 = document.getElementById("font-face"); // or in jQuery use: select = this;
var FontFace = font1.options[font1.selectedIndex].text;
document.getElementById('sample').style.fontFamily=FontFace;
button_css.font_family = FontFace;
// $('#sample').text(val);
// button_css.font_family = FontFace;
},document);
document.getElementById("bssub").onclick = $.proxy(function(){
var bor = document.getElementById("border-style"); // or in jQuery use: select = this;
var borstyle = bor.options[bor.selectedIndex].text;
document.getElementById('sample').style.borderStyle=borstyle;
$('#sample').text(val);
button_css.border_style = borstyle;
},document);
document.getElementById("bw").onchange = $.proxy(function(){
var val = document.getElementById('bw').value;
$('#sample').css("border-width",val+'px');
button_css.border_width = val+'px';
},document);
});
var button_css = {
padding_top:'0px',
padding_bottom:'0px',
color:'black',
background_image : 'none',
padding_left: '0px',
padding_right : '0px',
border_radius : '8px',
font_family : 'Open Sans',
font_size : '18px',
border_color : 'black',
border_style : 'none',
border_width : '0px'
};
</script>
<!-- end button editor -->
<style type="text/css">
#inside{
background:white;
height:600px;
padding-top:50px;
padding-right:30px;
padding-left:30px;
}
</style>
<title> MELANGE button generator </title>
<link rel="stylesheet" type="text/css" href="./styles/button-gen.css">
<link rel="stylesheet" href="./styles/jquery.gradientPicker.css" type="text/css" />
<!--<link rel="stylesheet" href="./vendor/jqPlugins/colorpicker/css/colorpicker.css" type="text/css" /> -->
<link rel="stylesheet" href="./styles/colorpicker_1.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="./themes/blackboard.css">
<script src="./js/rainbow.js"></script>
<script src="./js/css.js"></script>
<script src="./js/jquery-1.7.js"></script>
<script src="./js/jqueryUI-custom.js"></script>
<script src="./js/colorpicker.js"></script>
<script src="./js/jquery.gradientPicker.js"></script>
</head>
<body>
<style>
.button-demo,
button-demo {
display: inline-block;
text-decoration: none;
height: 48px;
text-align: center;
vertical-align: middle;
font-size: 18px;
width: 300px;
font-weight: 700;
line-height: 48px;
letter-spacing: 0.1px;
white-space: wrap;
border-radius: 8px;
cursor: pointer;
}
button-demo:hover,
.button-demo:focus {
color: #333;
border-color: #888;
outline: 0; }
.button-demo.button-primary {
color: #FFF;
filter: brightness(90%) }
.button-demo.button-primary:hover,
.button-demo.button-primary:focus {
color: #FFF;
filter: brightness(90%) }
.icon {
padding: 0px 8px 3.5px 0px;
vertical-align: middle;
width: 20px;
height: 20px;
}
.button.button-custom {
color: #FFFFFF;
background-color: #FFFFFF;
background-image: linear-gradient(-135deg,#0f0c29,#302b63,#24243e) }
.button.button-custom:hover,
.button.button-custom:focus {
filter: brightness(90%) }
details {
width: 64.7%;
background: #282828;
color: #ffffff;
cursor: pointer;
padding: 12px;
margin-bottom: 0;
box-sizing: border-box;
border-radius: 4px;
transition: border-radius 100ms cubic-bezier(0.66, 0.01, 0.35, 0.99);
overflow: hidden;
position:relative;
left:1%;
}
summary {
padding: 1rem;
display: block;
background: #333;
padding-left: 1rem;
cursor: pointer;
}
summary:before {
content: '';
border-width: .4rem;
border-style: solid;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 1.3rem;
left: 1rem;
transform: rotate(0);
transform-origin: .2rem 50%;
transition: .25s transform ease;
}
details[open] > summary:before {
transform: rotate(90deg);
}
details summary::-webkit-details-marker {
display:none;
}
details > ul {
padding-bottom: 1rem;
margin-bottom: 0;
.body-container {
position: absolute;
height: 80%;
width: 80%;
top: 10%;
left: 10%;
}
</style>
<script src="https://kit.fontawesome.com/c4a5e06183.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
<div style="position: relative; top: 50px; z-index: 2;"><a href="{{ url('/studio/links') }}" style="font-size: 40px;" >&nbsp; &nbsp; &nbsp; Back</a></div>
<a style="position:relative;float:right;z-index:10;right:25px;" href="{{ url('') }}/@<?= Auth::user()->littlelink_name ?>" target="_blank">Watch Page</a>
<div style="position: absolute;height: 80%; width: 80%; top: 15%; left: 10%;">
<h2 class="mb-4"><i class="bi bi-pen"> Button Editor</i><p style="color: tomato;">B E T A</p></h2><br><br>
<h2>Custom Button</h2><br>
<!-- start button editor -->
<div style="left: 10px;">
<div class="modal-profile">
<h2>CSS</h2>
<a class="modal-close-profile" title="Close profile window" href="#"><img src="./images/close.png" alt="Close profile window" /></a>
<div id="output">
</div>
</div>
<div class="modal-lightsout"></div>
<aside id="panel-right">
</br>
<div class="tool">
<heading>Color &nbsp;<span>Text</span></heading>
</br>
<input type="button" id="color" style="background-color:#FFFFFF; border:thin solid white;height:50px;width:50px;margin-left:5px;">
</div>
</br>
<div class="tool">
<heading>background &nbsp;<span>gradient</span></heading>
</br>
<div class="grad_ex" id="ex1"></div>
</div>
</br>
</aside>
<section id="preview">
<center><div id="sample" style="--delay: 1s; border-radius:8px !important; width: 400px; class="button-entrance"><div class="button-demo button hvr-grow hvr-icon-wobble-vertical"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . 'custom' }}.svg">Example</div></div></center>
</section>
</div>
<!-- end button editor -->
<br>
<details>
<summary>Show CSS</summary>
<div style="padding-left: 15px;">
<form action="{{ route('editCSS', $id) }}" method="post">
@csrf
<div class="form-group col-lg-8"><br>
<p>Custom CSS</p>
<textarea name="custom_css" rows="9" id="sCode" type="text" value="{{ $custom_css }}" class="form-control">{{ $custom_css }}</textarea>
</div>
</div>
</details>
<br><button id="code" class="mt-3 ml-3 btn btn-info">Submit</button><br>
</form>
<form action="{{ route('editCSS', $id) }}" method="post">
@csrf
<div class="form-group col-lg-8">
<textarea style="display: none;" rows="9" type="text" name="custom_css" value="" class="form-control">
color: #FFFFFF;
background-color: #FFFFFF;
background-image: linear-gradient(-135deg,#0f0c29,#302b63,#24243e)
</textarea>
</div>
<button type="submit" class="mt-3 ml-3 btn btn-info">Reset to default</button>
</form>
<br><br><div style="left: 1%; position: relative; background-color:#2c2d3a; border-radius: 25px; width:65%; height:300px; box-shadow: 0 10px 20px -10px rgba(0,0,0, 0.6);">
<div style="position: relative; top: 50%; transform: translateY(-50%);">
<h2 align="center" style="color:white">Result:</h2>
@if($custom_css === "")
<center><div style="--delay: 1s" class="button-entrance"><div class="button-demo button-custom button hvr-grow hvr-icon-wobble-vertical" href=""><img class="icon hvr-icon fa {{$custom_icon}}">Example</div></div></center>
@elseif($custom_css != "")
<center><div style="--delay: 1s" class="button-entrance"><div style="{{ $custom_css }}" class="button-demo hvr-grow hvr-icon-wobble-vertical" href=""><i style="color: {{$custom_icon}}" class="icon hvr-icon fa {{$custom_icon}}"></i>Example</div></div></center>
@endif
</div>
</div>
<br><br>
<form action="{{ route('editCSS', $id) }}" method="post">
@csrf
<div class="form-group col-lg-8">
<h2>Custom Icon</h2>
<textarea id="textareabox" type="text" name="custom_icon" value="{{ $custom_icon }}" class="form-control">{{ $custom_icon }}</textarea>
</div>
<script type="text/javascript">
// Displays alert if custom icon doesn't contain string "fa-"
var textarea = document.getElementById('textareabox');
var word = 'fa-';
var textValue=textarea.value;
if (textValue.indexOf(word)==-1)
{
alert('Your custom icon\'s short code does not contain the string "fa-" always use icons in the format: fa-ghost, for example.')
}
</script>
<details>
<p>Custom icons can be added to buttons via Font Awesome. You can use any icon from the list below, you can access this list by clicking the 'See all icons' button. Each icon on that list has a short code, which you can copy and enter in the custom icon field.</p>
<p>Every icon short code consists of a prefix and main part. If the short code is not a brand icon, you can simply enter the code in the format: fa-icon-name. The 'fa-...' formatting is important here. For example 'fa-code'.</p>
<p>If the short code is a brand icon, it is important to include a 'fab' before the short code part. Again, The 'fa-...' formatting still applies here. For example, 'fab fa-github'</p>
<p>To apply color to your icons, you can simply write out the color name or just write the HEX value before the icon, followed by a ';'. Here it is important to put the color before the icon short code and the color code must be ended with a semicolon.<br>
You can find a list of available colors <a href="https://www.w3schools.com/cssref/css_colors.asp" target="_blank">here</a>.</p>
<br><table class="table table-bordered">
<thead>
<tr>
<th scope="col">Style</th>
<th scope="col">Prefix</th>
<th scope="col" style="width: 1%">Icon</th>
<th scope="col">Short Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>Regular</td>
<td></td>
<td><i class="fa fa-user"></i></td>
<td><p>fa-user</p></td>
</tr>
<tr>
<td>Brands</td>
<td>fab</td>
<td><i class="fab fa-github"></i></td>
<td><p>fab fa-github</p></td>
</tr>
<tr>
<td>Color</td>
<td>color_name;</td>
<td><i style="color: red;" class="fa fa-ghost"></i></td>
<td><p style="color: red;">red; fa-ghost</p></td>
</tr>
<tr>
<td>Color HEX</td>
<td>color_HEX;</td>
<td><i style="color: #1DA1F2;" class="fab fa-twitter"></i></td>
<td><p style="color: #1DA1F2;">#1DA1F2; fab fa-twitter</p></td>
</tr>
</tbody>
</table>
</details>
<div class="row">
<button type="submit" class="mt-3 ml-3 btn btn-info">Submit</button>
<button class="mt-3 ml-3 btn btn-info"><a href="https://fontawesome.com/search?m=free" target="_blank">See all icons</a></button>
</div>
</form><br><br><br><br>
</div>
</body>
</html>

6
resources/views/studio/links.blade.php
View File

@ -13,6 +13,7 @@
<th scope="col">Order ⏶</th>
<th scope="col">Pin Link ⏶</th>
<th scope="col">Edit</th>
<th scope="col">Button Editor<span style="color:tomato">&nbsp; beta</span></th>
<th scope="col">Delete</th>
</tr>
</thead>
@ -25,6 +26,11 @@
<td class="text-right">{{ $link->order }}</td>
<td><a href="{{ route('upLink', ['up' => $link->up_link, 'id' => $link->id]) }}" class="text-primary">{{ $link->up_link }}</a></td>
<td><a href="{{ route('editLink', $link->id ) }}">Edit</a></td>
@if($link->button_id == 1 or $link->button_id == 2)
<td><a href="{{ route('editCSS', $link->id ) }}" class="text-success">Customize Button</a></td>
@else
<td><a> - </a></td>
@endif
<td><a href="{{ route('deleteLink', $link->id ) }}" class="text-danger">Delete</a></td>
</tr>
@endforeach

2
routes/web.php
View File

@ -54,6 +54,8 @@ Route::get('/deleteLink/{id}', [UserController::class, 'deleteLink'])->name('del
Route::get('/upLink/{up}/{id}', [UserController::class, 'upLink'])->name('upLink');
Route::get('/studio/edit-link/{id}', [UserController::class, 'showLink'])->name('showLink');
Route::post('/studio/edit-link/{id}', [UserController::class, 'editLink'])->name('editLink');
Route::get('/studio/button-editor/{id}', [UserController::class, 'showCSS'])->name('showCSS');
Route::post('/studio/button-editor/{id}', [UserController::class, 'editCSS'])->name('editCSS');
Route::get('/studio/page', [UserController::class, 'showPage'])->name('showPage');
Route::get('/studio/no_page_name', [UserController::class, 'showPage'])->name('showPage');
Route::post('/studio/page', [UserController::class, 'editPage'])->name('editPage');

724
studio/button-editor/css/global.css vendored Normal file
View File

@ -0,0 +1,724 @@
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }
body
{
font:14px/1.41 sans-serif;
font-family: 'Proxima-Nova-1', Proxima Nova, Myriad Pro, Arial, sans-serif;
*font-size:small;
-webkit-font-smoothing: antialiased;
color: #666;
background:black;
overflow-x: hidden;
/*padding-top: 70px;*/
}
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }
html { overflow-y: scroll; }
a:hover, a:active, button { outline: none; }
ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td { vertical-align: top; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
pre
{
white-space: pre; white-space: pre-wrap; word-wrap: break-word;
padding: 15px;
}
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; }
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid {
border-radius: 1px; -moz-box-shadow: 0px 0px 5px red;
-webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
::-moz-selection{ background: #e62f6f; color:#fff; text-shadow: none; }
::selection { background:#e62f6f; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #2376c6; }
button { width: auto; overflow: visible; font-family: "Proxima-Nova-1", Arial, sans-serif; }
.ie7 img { -ms-interpolation-mode: bicubic; }
h1, h2, h3, h4, h5, h6
{
color: #353639;
font-size: 14px;
font-weight: bold;
}
a, a:active, a:visited
{
color: #2376c6;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
a:hover
{
color: #0367c7;
}
/* 960 gs */
body{min-width:960px}
.grid_4{display:inline;float:left;margin-left:50px;margin-right:10px}
.container_12{margin-left:auto;margin-right:auto;width:960px}
.grid_1,.grid_2,.grid_3,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{
display:inline;float:left;margin-left:10px;margin-right:10px}
.push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11{
position:relative}
.alpha{margin-left:0}
.omega{margin-right:0}
.container_12 .grid_1{width:60px}
.container_12 .grid_2{width:140px}
.container_12 .grid_3{width:220px}
.container_12 .grid_4{width:400px}
.container_12 .grid_5{width:380px}
.container_12 .grid_6{width:460px}
.container_12 .grid_7{width:540px}
.container_12 .grid_8{width:620px}
.container_12 .grid_9{width:700px}
.container_12 .grid_10{width:780px}
.container_12 .grid_11{width:860px}
.container_12 .grid_12{width:940px}
.container_12 .prefix_1{padding-left:80px}
.container_12 .prefix_2{padding-left:160px}
.container_12 .prefix_3{padding-left:240px}
.container_12 .prefix_4{padding-left:320px}
.container_12 .prefix_5{padding-left:400px}
.container_12 .prefix_6{padding-left:480px}
.container_12 .prefix_7{padding-left:560px}
.container_12 .prefix_8{padding-left:640px}
.container_12 .prefix_9{padding-left:720px}
.container_12 .prefix_10{padding-left:800px}
.container_12 .prefix_11{padding-left:880px}
.container_12 .suffix_1{padding-right:80px}
.container_12 .suffix_2{padding-right:160px}
.container_12 .suffix_3{padding-right:240px}
.container_12 .suffix_4{padding-right:320px}
.container_12 .suffix_5{padding-right:400px}
.container_12 .suffix_6{padding-right:480px}
.container_12 .suffix_7{padding-right:560px}
.container_12 .suffix_8{padding-right:640px}
.container_12 .suffix_9{padding-right:720px}
.container_12 .suffix_10{padding-right:800px}
.container_12 .suffix_11{padding-right:880px}
.container_12 .push_1{left:80px}
.container_12 .push_2{left:160px}
.container_12 .push_3{left:240px}.container_12 .push_4{left:320px}.container_12 .push_5{left:400px}.container_12 .push_6{left:480px}.container_12 .push_7{left:560px}.container_12 .push_8{left:640px}.container_12 .push_9{left:720px}.container_12 .push_10{left:800px}.container_12 .push_11{left:880px}.container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px}.container_12 .pull_3{left:-240px}.container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px}.container_12 .pull_6{left:-480px}.container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px}.container_12 .pull_9{left:-720px}.container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both}.clearfix{zoom:1}
/**
* Primary styles
*/
#main_nav
{
float: right;
margin-top: 0px;
position: relative;
z-index: 3;
margin-right: 5px;
width: 250px;
}
#main_nav li
{
float: left;
}
#main_nav ul li a.icons, #main_nav ul li a.iconsho
{
width: 48px;
height: 70px;
display: block;
padding: 0;
}
#main_nav ul li a.iconsho
{
position: absolute;
top: 0;
opacity: 0;
-webkit-transition: opacity 0.8s ease;
-moz-transition: opacity 0.8s ease;
-o-transition: opacity 0.8s ease;
transition: opacity 0.8s ease;
}
#main_nav ul li:hover a.iconsho{ opacity: 1; }
#main_nav ul li:hover a.iconsho.selected{ opacity: 0.3; }
#main_nav ul li a.icons.home{ background-position: -15px -119px; }
#main_nav ul li a.icons.portfolio{ background-position: -65px -119px; }
#main_nav ul li a.icons.resources{ background-position: -115px -119px; }
#main_nav ul li a.icons.photoblog{ background-position: -165px -119px; }
#main_nav ul li a.icons.about{ background-position: -215px -119px; }
#main_nav ul li a.icons.home.selected{ background-position: -15px -219px; }
#main_nav ul li a.icons.portfolio.selected{ background-position: -65px -219px; }
#main_nav ul li a.icons.resources.selected{ background-position: -115px -219px; }
#main_nav ul li a.icons.photoblog.selected{ background-position: -165px -219px; }
#main_nav ul li a.icons.about.selected{ background-position: -215px -219px; }
#main_nav ul li a.iconsho.home{ background-position: -15px -169px; }
#main_nav ul li a.iconsho.portfolio{ background-position: -65px -169px; }
#main_nav ul li a.iconsho.resources{ background-position: -115px -169px; }
#main_nav ul li a.iconsho.photoblog{ background-position: -165px -169px; }
#main_nav ul li a.iconsho.about{ background-position: -215px -169px; }
#main_nav ul li a.tooltips
{
position: absolute;
font-size: 10px;
color: #fff;
background: rgba( 30,30,30,0.93 );
padding: 3px 8px;
text-align: center;
border-radius: 4px;
margin-top: -14px;
opacity: 0;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
-webkit-transform: translate3d( 0, -10px, 0);
}
#main_nav ul li a.tooltips:before
{
content: '';
position: absolute;
width: 8px;
height: 3px;
background: url('../images/header_assets_new.png') no-repeat -535px -79px;
left: 50%;
margin-left: -3px;
top: -3px;
}
#main_nav ul li a.tooltips.home{margin-left:4px; }
#main_nav ul li a.tooltips.portfolio{margin-left: -5px; }
#main_nav ul li a.tooltips.resources{margin-left: -7px; }
#main_nav ul li a.tooltips.photoblog{margin-left: 3px; }
#main_nav ul li a.tooltips.about{margin-left: 7px; }
#main_nav ul li:hover a.tooltips
{
opacity: 1;
-webkit-transform: translate3d( 0, 0px, 0);
}
.footer_wrapp
{
background: #28292e;
position: relative;
z-index: 0;
}
footer
{
padding-top: 50px;
padding-bottom: 20px;
color: #fff;
}
footer a, #details a
{
color: #3296fd;
text-decoration: none;
}
footer a:hover, #details a:hover
{
color: #8da4f9;
}
footer h1
{
color: #fff;
font-size: 16px;
padding-bottom: 20px;
}
footer aside .me
{
width: 91px;
height: 86px;
float: left;
background: url( ../images/me.png );
background-position: -3px -10px;
margin: 7px 20px 0px 0px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px rgba( 0,0,0,0.68 );
-moz-box-shadow: 0px 1px 3px rgba( 0,0,0,0.68 );
-o-box-shadow: 0px 1px 3px rgba( 0,0,0,0.68 );
-ms-box-shadow: 0px 1px 3px rgba( 0,0,0,0.68 );
box-shadow: 0px 1px 3px rgba( 0,0,0,0.68 );
-webkit-transition: background-position 0.3s ease;
-ms-transition: background-position 0.3s ease;
-o-transition: background-position 0.3s ease;
-moz-transition: background-position 0.3s ease;
transition: background-position 0.3s ease;
}
footer aside .me:after
{
content: '';
position: absolute;
width: 91px;
height: 86px;
z-index: 100;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-webkit-box-shadow: inset 0px 1px 0px rgba( 255,255,255,0.15 );
-moz-box-shadow: inset 0px 1px 0px rgba( 255,255,255,0.15 );
-o-box-shadow: inset 0px 1px 0px rgba( 255,255,255,0.15 );
-ms-box-shadow: inset 0px 1px 0px rgba( 255,255,255,0.15 );
box-shadow: inset 0px 1px 0px rgba( 255,255,255,0.15 );
}
footer aside.grid_8:hover .me
{
background-position: -3px -50px;
}
footer aside p
{
font-size: 18px;
font-weight: 300;
line-height: 1.7;
padding-top: 5px;
padding-bottom: 36px;
}
#dribbbleshots
{
margin-right: -16px;
}
#dribbbleshots img
{
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#dribbbleshots span
{
position: relative;
display: inline-block;
max-width: 200px;
-webkit-box-shadow: 0px 1px 3px rgba( 0,0,0,0.5 );
-ms-box-shadow: 0px 1px 3px rgba( 0,0,0,0.5 );
-o-box-shadow: 0px 1px 3px rgba( 0,0,0,0.5 );
-moz-box-shadow: 0px 1px 3px rgba( 0,0,0,0.5 );
box-shadow: 0px 1px 3px rgba( 0,0,0,0.5 );
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
line-height: 0;
margin-right: 12px;
}
#dribbbleshots span:after {
content:"";
position:absolute;
bottom:0px;
top: 0px;
left:0px;
right: 0px;
-webkit-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0px 1px 0px rgba( 255,255,255,0.1 );
-moz-box-shadow: inset 0px 1px 0px rgba( 255,255,255,0.1 );
-o-box-shadow: inset 0px 1px 0px rgba( 255,255,255,0.1 );
-ms-box-shadow: inset 0px 1px 0px rgba( 255,255,255,0.1 );
box-shadow: inset 0px 1px 0px rgba( 255,255,255,0.1 );
}
#dribbbleshots a:hover span:after
{
background: rgba( 255,255,255,0.1);
}
footer .social ul
{
list-style: none;
background: rgba( 0,0,0,0.14 );
border-radius: 5px;
border: 1px solid #1a1a1e;
-webkit-box-shadow: 0 1px 0 rgba( 255,255,255,0.04), inset 0 2px 2px rgba( 0,0,0,0.19 );
-moz-box-shadow: 0 1px 0 rgba( 255,255,255,0.04), inset 0 2px 2px rgba( 0,0,0,0.19 );
-ms-box-shadow: 0 1px 0 rgba( 255,255,255,0.04), inset 0 2px 2px rgba( 0,0,0,0.19 );
-o-box-shadow: 0 1px 0 rgba( 255,255,255,0.04), inset 0 2px 2px rgba( 0,0,0,0.19 );
box-shadow: 0 1px 0 rgba( 255,255,255,0.04), inset 0 2px 2px rgba( 0,0,0,0.19 );
}
footer .social ul li
{
padding: 3px 0px 4px 60px;
font-size: 15px;
line-height: 3;
background: #323339;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.27) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.27)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.27) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.27) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.27) 1040%);
background: linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.27) 100%);
-webkit-box-shadow: 0 -1px 0 rgba( 0,0,0,0.24), inset 0 1px 0 rgba( 255,255,255,0.03 );
-o-box-shadow: 0 -1px 0 rgba( 0,0,0,0.24), inset 0 1px 0 rgba( 255,255,255,0.03 );
-moz-box-shadow: 0 -1px 0 rgba( 0,0,0,0.24), inset 0 1px 0 rgba( 255,255,255,0.03 );
-ms-box-shadow: 0 -1px 0 rgba( 0,0,0,0.24), inset 0 1px 0 rgba( 255,255,255,0.03 );
box-shadow: 0 -1px 0 rgba( 0,0,0,0.24), inset 0 1px 0 rgba( 255,255,255,0.03 );
}
footer .social ul li:first-child
{
-webkit-box-shadow:none
}
footer .social ul li:hover
{
background: #17171b;
-webkit-box-shadow: 0 -1px 0 rgba( 0,0,0,0.24), inset 0 1px 0 rgba( 255,255,255,0.01 );
-moz-box-shadow: 0 -1px 0 rgba( 0,0,0,0.24), inset 0 1px 0 rgba( 255,255,255,0.01 );
-o-box-shadow: 0 -1px 0 rgba( 0,0,0,0.24), inset 0 1px 0 rgba( 255,255,255,0.01 );
-ms-box-shadow: 0 -1px 0 rgba( 0,0,0,0.24), inset 0 1px 0 rgba( 255,255,255,0.01 );
box-shadow: 0 -1px 0 rgba( 0,0,0,0.24), inset 0 1px 0 rgba( 255,255,255,0.01 );
}
footer .social li a
{
color: #8e92a0;
display: block;
width: 100%;
}
footer .social li a:hover
{
color: #fff;
}
footer .social ul li a span
{
width: 46px;
height: 46px;
background: url( ../images/header_assets.png );
display: block;
position: absolute;
margin-left: -56px;
}
footer .social .twitter span{background-position: -115px -197px;}
footer .social .twitter:hover span{background-position: -115px -237px;}
footer .social .dribbble span{background-position: -63px -197px;}
footer .social .dribbble:hover span{background-position: -63px -237px;}
footer .social .da span{background-position: -254px -199px;}
footer .social .da:hover span{background-position: -254px -239px;}
footer .social .flickr span{background-position: -304px -200px;}
footer .social .flickr:hover span{background-position: -304px -240px;}
footer .social .vimeo span{background-position: -204px -196px;}
footer .social .vimeo:hover span{background-position: -204px -236px;}
footer .social .linkedIn span{background-position: -352px -199px;}
footer .social .linkedIn:hover span{background-position: -352px -239px;}
footer .social .facebook span{background-position: -161px -198px;}
footer .social .facebook:hover span{background-position: -161px -238px;}
#details
{
#background: #1c1d21;
background: rgba( 0,0,0,0.15 );
margin-top: 0px;
padding: 25px 0 10px 0;
border-top: 1px solid rgba( 255,255,255,0.05 );
box-shadow: inset 0px 1px 0px rgba( 0,0,0,0.25 );
-webkit-box-shadow: inset 0px 1px 0px rgba( 0,0,0,0.25 );
-moz-box-shadow: inset 0px 1px 0px rgba( 0,0,0,0.25 );
-o-box-shadow: inset 0px 1px 0px rgba( 0,0,0,0.25 );
-ms-box-shadow: inset 0px 1px 0px rgba( 0,0,0,0.25 );
font-size: 12px;
}
#details nav
{
}
#details nav li
{
float: left;
line-height: ;
}
#details nav li a
{
padding-right: 7px;
padding-left: 7px;
color: #fff;
text-decoration: none;
background-position: 0 4px;
}
#details nav li a.home
{
background: no-repeat;
padding-left: 0;
}
#sub_details
{
margin-bottom: 10px;
margin-top: 12px;
}
#sub_details a
{
text-decoration: none;
}
#sub_details p
{
font-size: 11px;
color: #767780;
padding-top: 10px;
}
#sub_details p.grid_3
{
text-align: right;
}
#details .backtop
{
text-align: right;
}
#details .backtop a
{
padding: 5px 20px;
color: #fff;
text-shadow: 0 -1px -1px rgba( 0,0,0,0.5 );
background: #3a5bd8;
border-radius: 5px;
-o-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
padding-bottom: 5px;
-webkit-box-shadow: 0px 0px 0px 1px rgba( 0,0,0, 0.5), 0px 2px 0px rgba( 255,255,255,0.052 ), inset 0px 1px 0px rgba( 255,255,255,0.26), inset 0px -9px 9px rgba( 40,63,198,1 );
-moz-box-shadow: 0px 0px 0px 1px rgba( 0,0,0, 0.5), 0px 2px 0px rgba( 255,255,255,0.052 ), inset 0px 1px 0px rgba( 255,255,255,0.26), inset 0px -9px 9px rgba( 40,63,198,1 );
-o-box-shadow: 0px 0px 0px 1px rgba( 0,0,0, 0.5), 0px 2px 0px rgba( 255,255,255,0.052 ), inset 0px 1px 0px rgba( 255,255,255,0.26), inset 0px -9px 9px rgba( 40,63,198,1 );
-ms-box-shadow: 0px 0px 0px 1px rgba( 0,0,0, 0.5), 0px 2px 0px rgba( 255,255,255,0.052 ), inset 0px 1px 0px rgba( 255,255,255,0.26), inset 0px -9px 9px rgba( 40,63,198,1 );
box-shadow: 0px 0px 0px 1px rgba( 0,0,0, 0.5), 0px 2px 0px rgba( 255,255,255,0.052 ), inset 0px 1px 0px rgba( 255,255,255,0.26), inset 0px -9px 9px rgba( 40,63,198,1 );
}
/**
* Non-semantic helper classes: please define your styles before this section.
*/
/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
/* Hide for both screenreaders and browsers:
*/
.hidden { display: none; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: by Jon Neal.
*/
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
*/
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
@media all and (orientation:portrait) {
}
@media all and (orientation:landscape) {
}
@media screen and (max-device-width: 480px) {
}
@media screen and (min-width: 825px) and (max-width: 1100px) {
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
-ms-filter: none !important; }
a, a:visited { color: #444 !important; text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}

169
studio/button-editor/css/header.css vendored Normal file
View File

@ -0,0 +1,169 @@
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
}
#main-footer {
clear:both;
width:100%;
float:left;
background: black;
}
#footer-wrap {
position:relative;
margin:0 auto;
width:900px;
color: white;
font-family: Arial,Verdana,sans-serif;
background: black;
padding:30px;
padding-left:40px;
padding-top:30px;
}
.foot-tab {
float:left;
margin-right: 100px;
}
.foot-tab header{
margin-botom:10px;
font-size:1.1em;
font-family: sans-serif;
}
.foot-tab div {
margin-top:20px;
color:#818181;
font-size: 0.8em;
font-family: Tahoma;
font-weight: normal;
margin-bottom: 40px;
}
.bold {
font-size: 0.9em;
color:white;
font-family: Helvetica;
}
.footer-email {
background: #818181;
color:#ffffff;
border: none;
outline:none;
height:25px;
width: 130px;
margin-left:-3px;
}
::-webkit-input-placeholder {
color: #b1b1b1;
}
:-moz-placeholder {
color: #b1b1b1;
}
.foot-submit {
height: 26px;
width: 26px;
color:black;
background: white;
font-family: "Lucida Grande";
border: none;
}
.headertile{
width:200px;
float:left;
height:50px;
/*margin-left:5px;*/
top:0;
background:black;
/*outline: 1px #ffffff solid;*/
}
.header{
margin-top:1px;
margin-bottom:1px;
background:black;
height:50px;
box-shadow:50px 50px 50px 20px black;
}
.headertile:hover{
background:#7FBA00;
opacity:0.9;
}
#heading{
margin-left:150px;
}
.heading
{
color:white;
text-align:center;
margin:10px 10px 0px 0px;
font:Times New Roman, serif;
font-weight:400;
font-size:20px;
}
#heading:hover{
color:white;
}
#userinfo{
float:right;
text-align:right;
color:white;
margin-right:140px;
margin-top:10px;
font-size:20px;
}
#userimage{
margin-left:20px;
}

396
studio/button-editor/css/modern.css vendored Normal file
View File

@ -0,0 +1,396 @@
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
.page {
width: 984px !important;
margin: auto;
background:black;
margin-left:20px;/*distance of tiles fronleft*/
}
.place-left {
float: left !important;
margin-right: 10px;
}
.place-right {
float: right !important;
margin-left: 0px;
}
.scroll-y,
.scroll-vertical {
overflow-y: scroll;
}
.scroll-x,
.scroll-horizontal {
overflow-x: scroll;
}
.page .page-header .page-header-content {
font-family: "Open Sans", sans-serif, sans;
font-size: 18pt;
display: block;
margin: 0;
}
.page .page-header {
font-family: "Open Sans", sans-serif, sans;
font-size: 10pt;
display: block;
margin: 0;
}
.page .page-region {
display: block;
}
.page .page-region .page-region-content {
padding-top: 60px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
display: block;
height: 100%;
position: relative;
}
.page.secondary .page-region .page-region-content {
padding-left: 0px;
}
.page.snapped {
width: 33.33%;
height: 100%;
float: left;
border-right: 1px #ccc solid;
}/*
/*
* Tiles.less
*/
.tile-group {
margin: 0;
margin-right: 80px;
float: left;
width: auto;
height: auto;
min-height: 1px;
width: 802px;
}
.tile {
display: block;
float: left;
background-color: #525252;
width: 150px;
height: 150px;
cursor: pointer;
box-shadow: inset 0px 0px 1px #FFFFCC;
text-decoration: none;
color: #ffffff;
overflow: hidden;
position: relative;
font-weight: 400;
margin: 0 10px 10px 0;
}
.tile * {
color: #ffffff;
}
.tile .tile-content {
width: 150px;
height: 110px;
padding: 0;
vertical-align: top;
padding: 10px 15px;
overflow: hidden;
text-overflow: ellipsis;
color: #000000;
font-weight: 400;
font-size: 9pt;
letter-spacing: 0.02em;
color: #ffffff;
line-height: 16px;
overflow: hidden;
text-overflow: ellipsis;
}
.tile .tile-content:hover {
color: rgba(0, 0, 0, 0.8);
}
.tile .tile-content:active {
color: rgba(0, 0, 0, 0.4);
}
.tile .tile-content:hover {
color: #ffffff;
}
.tile .tile-content h1,
.tile .tile-content h2,
.tile .tile-content h3,
.tile .tile-content h4,
.tile .tile-content h5,
.tile .tile-content h6,
.tile .tile-content p {
padding: 0;
margin: 0;
line-height: 24px;
}
.tile .tile-content h1:hover,
.tile .tile-content h2:hover,
.tile .tile-content h3:hover,
.tile .tile-content h4:hover,
.tile .tile-content h5:hover,
.tile .tile-content h6:hover,
.tile .tile-content p:hover {
color: #ffffff;
}
.tile .tile-content p {
color: #000000;
font-weight: 400;
font-size: 9pt;
letter-spacing: 0.02em;
color: #ffffff;
line-height: 16px;
overflow: hidden;
text-overflow: ellipsis;
}
.tile .tile-content p:active {
color: rgba(0, 0, 0, 0.4);
}
.tile .tile-content.icon {
display: table-cell !important;
vertical-align: middle !important;
text-align: center;
}
.tile .tile-content.icon img {
width: 64px;
height: 64px;
}
.tile .tile-content.image {
padding: 0;
margin: 0;
height: 100%;
text-align: center;
}
.tile .tile-content.image img {
width: 100%;
height: auto;
min-height: 100%;
max-width: 100%;
}
.tile .tile-content.images-set {
padding: 0;
margin: 0;
height: 100%;
max-height: 150px;
}
.tile .tile-content.images-set img {
width: 25%;
min-height: 50%;
float: left;
border: 1px #1e1e1e solid;
}
.tile .tile-content.images-set img:first-child {
float: left;
width: 50%;
min-height: 100%;
}
.tile.double {
width: 310px;
}
.tile.double .tile-content {
width: 310px;
}
.tile.triple {
width: 470px;
}
.tile.triple .tile-content {
width: 470px;
}
.tile.quadro {
width: 630px;
}
.tile.quadro .tile-content {
width: 630px;
}
.tile.double-vertical {
height: 310px;
}
.tile.double-vertical .tile-content {
height: 270px;
}
.tile.triple-vertical {
height: 470px;
}
.tile.triple-vertical .tile-content {
height: 430px;
}
.tile.quadro-vertical {
height: 630px;
}
.tile.quadro-vertical .tile-content {
height: 590px;
}
/*tile colors*/
#tile1{
background:#ffc40d;
}
#tile2{
background:#00a300;
}
#tile3{
/*background:#da532c;*/
background:#f98b00;
}
#tile4{
background:#02AEDC;
}
#tile5{
background:#603cba;
}
#tile6{
background:#525252;
}
#tile7{
background:#b91d47;
}
#lin{
margin-top:30px;
}
#limage{
width:200px;
height:200px;
}
#loginbox{
width:350px;
height:310px;
background:#525252;
/*opacity:0.2;*/
float:right;
/*margin-left:20px;*/
margin-top:-340px;
margin-right:30px;
font-size:20px;
color:#488bf5;
text-align:center;
opacity:0.9;
}
#download{
width:60px;
height:60px;
float:right;
position:relative;
margin-right:10px;
margin-bottom:10px;
}
#down{
margin-bottom:40px;
margin-right:60px;
text-align:left;
font-size:16px;
}
/*responsible after hover*/
.tile:hover {
outline: 1px #ffffff solid;
}
/*tile icon controls*/
#designicon{
position:relative;
margin-top:25px;
width:150px;
height:170px;
vertical-align: middle ;
left:0px;
}
#codeicon{
width:120px;
height:120px;
padding-top:18px;
margin-top:-30px;
}
#showcaseicon{
margin-top:-20px;
width:120px;
height:120px;
}
#doubletileicon{
width:100px;
height:100px;
margin-top:-5px;
margin-left:100px;
}
#signupicon
{
margin-left:15px;
margin-top:5px;
width:120px;
height:120px;
}
/*tile heading controls*/
#creat{
text-align:center;
padding-top:20px;
padding-left:4px;
font-size:22px;
color:white;
margin-right:1px;
}
#codep{
position:relative;
font-size:22px;
margin-top:-15px;
margin-left:5px;
text-align:center;
}
#doubletiletitle
{
font-size:22px;
margin-left:20px;
margin-top:-70px;
}
#dhome{
margin-left:10px;
}
#ricon{
position:relative;
left:200px;
top:100px;
}
#dicon{
position:relative;
left:200px;
top:00px;
}

484
studio/button-editor/css/style.css vendored Normal file
View File

@ -0,0 +1,484 @@
html
{
overflow-x: hidden;
}
.home_nav .grid_12
{
text-align: center;
position: absolute;
z-index: 50;
margin-top: -57px;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.home_nav button
{
border: none;
-webkit-transition: background-position 0.2s ease;
-moz-transition: background-position 0.2s ease;
-o-transition: background-position 0.2s ease;
transition: background-position 0.2s ease;
}
.home_nav .sides
{
width: 11px;
height: 17px;
background: url('navarrow.png');/*side arrows of navigation*/
background-position: -17px 0;
margin-right: 10px;
margin-top:20px;
}
.home_nav .right
{
margin-right: 0px;
margin-left: 10px;
background-position: -28px 0;
}
.home_nav .left:hover{ background-position: -17px -17px; }
.home_nav .right:hover{ background-position: -28px -17px; }
.home_nav .direct
{
width: 14px;
height: 14px;
background: url('nav.png'); /*the center navigation buttons*/
background-position: 0 0px;
}
.home_nav .direct:hover, .home_nav .selected{ background-position: 0px -16px; }
#home_slider
{
margin-left: 0;
height: 616px;
position: relative;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
transition: margin 1s ease;
width: 50000px;
background: #fafafa;
}
.webmadeclean, .imake, .welcome, .menuslide, .myphotoblog
{
height: 616px;
width: 2000px;
overflow: hidden;
float: left;
z-index: 1;
background: #ececee
}
#home_loader
{
background: #66a6be;
position: absolute;
height: 616px;
width: 100%;
z-index: 1;
}
#home_loader img
{
position: absolute;
left: 50%;
top: 50%;
margin-left: -8px;
margin-top: -8px;
}
.welcome
{
background-image: url('sliderfront.jpg');
}
.welcome h1
{ color:white; /*the color of melange*/
font-size: 187px;
text-transform: uppercase;
line-height: 218px;
padding-top: 24px;
font-weight: 900;
font-family: "Proxima-Nova-1", Arial, sans-serif;
}
.white
{
color: #fff;
text-shadow: 1px 1px 1px rgba( 0,0,0,0.3 );
}
.welcome p
{
font-size: 28px;
color: #fff;
padding-top: 3px;
text-transform: uppercase;
font-weight: 300;
text-shadow: 1px 1px 0px rgba( 0,0,0,0.22 );
}
.welcome .image
{
text-align: center;
line-height: 0;
font-size: 0;
margin-top: 10px;
}
.welcome div.grid_4
{
margin-top: 19px;
display: block;
width: 500px;
height: 13px;
}
.welcome div.grid_4:after
{
content: "";
position: absolute;
width: 500px;
margin-top: 15px;
height: 1px;
}
.welcome p
{
text-align: center;
}
.welcome .start
{
font-size: 111px;
margin-top: -35px;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
.welcome .keyboard_help
{
position: absolute;
font-size: 41px;
margin-top: -35px;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE < 8 */
}
.welcome .start_tour:hover .keyboard_help
{
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); /* IE < 8 */
}
.welcome .start_tour:hover .start
{
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE < 8 */
}
.webmadeclean h1, .imake h1, .myphotoblog h1
{
font-size: 50px;/*controlling the heading of eadh slider page*/
margin-top: 60px;
padding-bottom: 20px;
margin-bottom: 15px;
font-family:Arial Narrow;
/*padding-left: 55px;*/
}
.webmadeclean h1:before, .imake h1:before, .myphotoblog h1:before
{
content: '';
position: absolute;
width: 45px;
height: 36px;
background-position: -20px 0;
margin-left: -60px;
margin-top: -5px;
}
.imake h1:before{ background-position: -64px 4px; }
.myphotoblog h1:before{ background-position: -110px 0px; }
.webmadeclean p, .imake p, .myphotoblog p
{
font-size: 18px;
line-height: 29px;
}
.webmadeclean img.approved
{
position: absolute;
margin-left: 230px;
margin-top: 5px;
}
.webmadeclean a, .imake a, .myphotoblog a
{
color: #fff;
text-decoration: none;
background: #c2c3c8;
background-position: right center;
font-size: 13px;
padding: 6px 50px 5px 10px;
line-height: 60px;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.webmadeclean a:hover, .imake a:hover, .myphotoblog a:hover
{
background: #4a4b4f no-repeat;
background-position: right;
}
.webmadeclean aside
{
text-align: right;
padding-top: 30px;
}
.imake aside
{
text-align: left;
margin-top: 60px;
}
.imake .approved
{
margin-left: 200px;
margin-top: 10px;
}
.myphotoblog aside figure
{
line-height: 0;
width: 680px;
height: 443px;
background: #fff;
padding: 10px;
-webkit-box-shadow: 0px 1px 3px rgba( 0,0,0,0.23 );
-moz-box-shadow: 0px 1px 3px rgba( 0,0,0,0.23 );
-o-box-shadow: 0px 1px 3px rgba( 0,0,0,0.23 );
box-shadow: 0px 1px 3px rgba( 0,0,0,0.23 );
margin-top: 55px;
}
.myphotoblog .coverpic
{
position: absolute;
margin-top: -443px;
display: block;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE < 8 */
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
.myphotoblog figure:hover .coverpic
{
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); /* IE < 8 */
}
.menuslide
{
padding-top: 12px;
height: 604px;
}
.menuslide a
{
color: #353639;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: bold;
text-align: center;
margin-top: 20px;
padding-bottom: 20px;
background: #f9f9fb;
background: rgba( 255,255,255,0.5 );
border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-box-shadow: 0px 0px 1px rgba( 0,0,0,0.2 );
-moz-box-shadow: 0px 0px 1px rgba( 0,0,0,0.2 );
-o-box-shadow: 0px 0px 1px rgba( 0,0,0,0.2 );
box-shadow: 0px 0px 1px rgba( 0,0,0,0.2 );
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
#welcometab{
margin-left:270px;
}
.menuslide a.grid_3
{ align:center;
width: 218px;
font-size: 18px;
line-height: 50px;
padding-bottom: 15px;
}
.menuslide a span.icon
{
display: block;
width: 54px;
height: 54px;
margin-left: 124px;
margin-top: 15px;
}
.menuslide a.grid_3 span.icon
{
margin-left: 80px;
margin-top: 30px;
}
.menuslide a span
{
display: block;
text-transform: none;
font-size: 15px;
font-weight: normal;
font-family: "Proxima-Nova-1", Arial, sans-serif;
color: #777777;
}
.menuslide a:hover
{
background: rgba( 255,255,255,0.9 );
color: #b6d76e;
}
.menuslide a span.portfolio{ background-position: 0 0; }
.menuslide a:hover span.portfolio{ background-position: 0 -54px; }
.menuslide a span.resources{ background-position: -54px 0; }
.menuslide a:hover span.resources{ background-position: -54px -54px; }
.menuslide a span.photoblog{ background-position: -108px 0; }
.menuslide a:hover span.photoblog{ background-position: -108px -54px; }
.menuslide a span.experiments{ background-position: -162px 0; }
.menuslide a:hover span.experiments{ background-position: -162px -54px; }
.menuslide a span.about{ background-position: -216px 0; }
.menuslide a:hover span.about{ background-position: -216px -54px; }
.menuslide a span.contact{ background-position: -269px 0; }
.menuslide a:hover span.contact{ background-position: -269px -54px; }
.menuslide a span.deviantart{ background-position: -323px 0; }
.menuslide a:hover span.deviantart{ background-position: -323px -54px; }
.menuslide a span.twitter{ background-position: -377px 0; width: 55px; }
.menuslide a:hover span.twitter{ background-position: -377px -54px; }
.menuslide a span.flickr{ background-position: -432px 0; }
.menuslide a:hover span.flickr{ background-position: -432px -54px; }
.menuslide a span.facebook{ background-position: -486px 0; }
.menuslide a:hover span.facebook{ background-position: -486px -54px; }
/*logo management*/
#wikiicon{
background:url('wikiicon.png');
}
#giticon{
background:url('github.png');
}
#abouticon{
background:url('aboutus.jpg');
}
#fbicon{
background:url('fb.jpg');
}
#blogicon{
background:url('blogicon.png');
}
#resourceicon{
background:url('rssb.png');
}
#twittericon{
background:url('twitter.png');
}
#contacticon{
background:url('contacticon.jpg');
}
#poster{
margin-right:30px;
width:700px;
margin-top:-120px;
}
.menuslide a span.grid4logo
{
display: block;
width: 50px;
height: 50px;
margin-left: 85px;
margin-top: 15px;
}
.menuslide a span.grid3logo
{
display: block;
width: 50px;
height: 50px;
margin-left: 170px;
margin-top: 15px;
}

BIN
studio/button-editor/images/colorpicker_background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
studio/button-editor/images/colorpicker_hex.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 532 B

BIN
studio/button-editor/images/colorpicker_hsb_b.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 970 B

BIN
studio/button-editor/images/colorpicker_hsb_h.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1012 B

BIN
studio/button-editor/images/colorpicker_hsb_s.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
studio/button-editor/images/colorpicker_indic.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 B

BIN
studio/button-editor/images/colorpicker_overlay.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
studio/button-editor/images/colorpicker_rgb_b.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 970 B

BIN
studio/button-editor/images/colorpicker_rgb_g.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
studio/button-editor/images/colorpicker_rgb_r.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
studio/button-editor/images/colorpicker_select.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 B

BIN
studio/button-editor/images/colorpicker_submit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 984 B

BIN
studio/button-editor/images/custom_background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
studio/button-editor/images/custom_hex.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 562 B

BIN
studio/button-editor/images/custom_hsb_b.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
studio/button-editor/images/custom_hsb_h.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 970 B

BIN
studio/button-editor/images/custom_hsb_s.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
studio/button-editor/images/custom_indic.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 B

BIN
studio/button-editor/images/custom_rgb_b.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1008 B

BIN
studio/button-editor/images/custom_rgb_g.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
studio/button-editor/images/custom_rgb_r.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1018 B

BIN
studio/button-editor/images/custom_submit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 997 B

BIN
studio/button-editor/images/select.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 506 B

BIN
studio/button-editor/images/select2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 518 B

BIN
studio/button-editor/images/slider.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 315 B

476
studio/button-editor/js/colorpicker.js vendored Normal file
View File

@ -0,0 +1,476 @@
(function ($) {
var ColorPicker = function () {
var
ids = {},
inAction,
charMin = 65,
visible,
tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
defaults = {
eventName: 'click',
onShow: function () {},
onBeforeShow: function(){},
onHide: function () {},
onChange: function () {},
onSubmit: function () {},
color: 'ff0000',
livePreview: true,
flat: false
},
fillRGBFields = function (hsb, cal) {
var rgb = HSBToRGB(hsb);
$(cal).data('colorpicker').fields
.eq(1).val(rgb.r).end()
.eq(2).val(rgb.g).end()
.eq(3).val(rgb.b).end();
},
fillHSBFields = function (hsb, cal) {
$(cal).data('colorpicker').fields
.eq(4).val(hsb.h).end()
.eq(5).val(hsb.s).end()
.eq(6).val(hsb.b).end();
},
fillHexFields = function (hsb, cal) {
$(cal).data('colorpicker').fields
.eq(0).val(HSBToHex(hsb)).end();
},
setSelector = function (hsb, cal) {
$(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
$(cal).data('colorpicker').selectorIndic.css({
left: parseInt(150 * hsb.s/100, 10),
top: parseInt(150 * (100-hsb.b)/100, 10)
});
},
setHue = function (hsb, cal) {
$(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
},
setCurrentColor = function (hsb, cal) {
$(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
},
setNewColor = function (hsb, cal) {
$(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
},
keyDown = function (ev) {
var pressedKey = ev.charCode || ev.keyCode || -1;
if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
return false;
}
var cal = $(this).parent().parent();
if (cal.data('colorpicker').livePreview === true) {
change.apply(this);
}
},
change = function (ev) {
var cal = $(this).parent().parent(), col;
if (this.parentNode.className.indexOf('_hex') > 0) {
cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
} else if (this.parentNode.className.indexOf('_hsb') > 0) {
cal.data('colorpicker').color = col = fixHSB({
h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
});
} else {
cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
}));
}
if (ev) {
fillRGBFields(col, cal.get(0));
fillHexFields(col, cal.get(0));
fillHSBFields(col, cal.get(0));
}
setSelector(col, cal.get(0));
setHue(col, cal.get(0));
setNewColor(col, cal.get(0));
cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
},
blur = function (ev) {
var cal = $(this).parent().parent();
cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus');
},
focus = function () {
charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
$(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
$(this).parent().addClass('colorpicker_focus');
},
downIncrement = function (ev) {
var field = $(this).parent().find('input').focus();
var current = {
el: $(this).parent().addClass('colorpicker_slider'),
max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
y: ev.pageY,
field: field,
val: parseInt(field.val(), 10),
preview: $(this).parent().parent().data('colorpicker').livePreview
};
$(document).bind('mouseup', current, upIncrement);
$(document).bind('mousemove', current, moveIncrement);
},
moveIncrement = function (ev) {
ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
if (ev.data.preview) {
change.apply(ev.data.field.get(0), [true]);
}
return false;
},
upIncrement = function (ev) {
change.apply(ev.data.field.get(0), [true]);
ev.data.el.removeClass('colorpicker_slider').find('input').focus();
$(document).unbind('mouseup', upIncrement);
$(document).unbind('mousemove', moveIncrement);
return false;
},
downHue = function (ev) {
var current = {
cal: $(this).parent(),
y: $(this).offset().top
};
current.preview = current.cal.data('colorpicker').livePreview;
$(document).bind('mouseup', current, upHue);
$(document).bind('mousemove', current, moveHue);
},
moveHue = function (ev) {
change.apply(
ev.data.cal.data('colorpicker')
.fields
.eq(4)
.val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
.get(0),
[ev.data.preview]
);
return false;
},
upHue = function (ev) {
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
$(document).unbind('mouseup', upHue);
$(document).unbind('mousemove', moveHue);
return false;
},
downSelector = function (ev) {
var current = {
cal: $(this).parent(),
pos: $(this).offset()
};
current.preview = current.cal.data('colorpicker').livePreview;
$(document).bind('mouseup', current, upSelector);
$(document).bind('mousemove', current, moveSelector);
},
moveSelector = function (ev) {
change.apply(
ev.data.cal.data('colorpicker')
.fields
.eq(6)
.val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
.end()
.eq(5)
.val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
.get(0),
[ev.data.preview]
);
return false;
},
upSelector = function (ev) {
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
$(document).unbind('mouseup', upSelector);
$(document).unbind('mousemove', moveSelector);
return false;
},
enterSubmit = function (ev) {
$(this).addClass('colorpicker_focus');
},
leaveSubmit = function (ev) {
$(this).removeClass('colorpicker_focus');
},
clickSubmit = function (ev) {
var cal = $(this).parent();
var col = cal.data('colorpicker').color;
cal.data('colorpicker').origColor = col;
setCurrentColor(col, cal.get(0));
cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
},
show = function (ev) {
var cal = $('#' + $(this).data('colorpickerId'));
cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
var pos = $(this).offset();
var viewPort = getViewport();
var top = pos.top + this.offsetHeight;
var left = pos.left;
if (top + 176 > viewPort.t + viewPort.h) {
top -= this.offsetHeight + 176;
}
if (left + 356 > viewPort.l + viewPort.w) {
left -= 356;
}
cal.css({left: left + 'px', top: top + 'px'});
if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
cal.show();
}
$(document).bind('mousedown', {cal: cal}, hide);
return false;
},
hide = function (ev) {
if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
ev.data.cal.hide();
}
$(document).unbind('mousedown', hide);
}
},
isChildOf = function(parentEl, el, container) {
if (parentEl == el) {
return true;
}
if (parentEl.contains) {
return parentEl.contains(el);
}
if ( parentEl.compareDocumentPosition ) {
return !!(parentEl.compareDocumentPosition(el) & 16);
}
var prEl = el.parentNode;
while(prEl && prEl != container) {
if (prEl == parentEl)
return true;
prEl = prEl.parentNode;
}
return false;
},
getViewport = function () {
var m = document.compatMode == 'CSS1Compat';
return {
l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
};
},
fixHSB = function (hsb) {
return {
h: Math.min(360, Math.max(0, hsb.h)),
s: Math.min(100, Math.max(0, hsb.s)),
b: Math.min(100, Math.max(0, hsb.b))
};
},
fixRGB = function (rgb) {
return {
r: Math.min(255, Math.max(0, rgb.r)),
g: Math.min(255, Math.max(0, rgb.g)),
b: Math.min(255, Math.max(0, rgb.b))
};
},
fixHex = function (hex) {
var len = 6 - hex.length;
if (len > 0) {
var o = [];
for (var i=0; i<len; i++) {
o.push('0');
}
o.push(hex);
hex = o.join('');
}
return hex;
},
HexToRGB = function (hex) {
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
},
HexToHSB = function (hex) {
return RGBToHSB(HexToRGB(hex));
},
RGBToHSB = function (rgb) {
var hsb = {
h: 0,
s: 0,
b: 0
};
var min = Math.min(rgb.r, rgb.g, rgb.b);
var max = Math.max(rgb.r, rgb.g, rgb.b);
var delta = max - min;
hsb.b = max;
if (max != 0) {
}
hsb.s = max != 0 ? 255 * delta / max : 0;
if (hsb.s != 0) {
if (rgb.r == max) {
hsb.h = (rgb.g - rgb.b) / delta;
} else if (rgb.g == max) {
hsb.h = 2 + (rgb.b - rgb.r) / delta;
} else {
hsb.h = 4 + (rgb.r - rgb.g) / delta;
}
} else {
hsb.h = -1;
}
hsb.h *= 60;
if (hsb.h < 0) {
hsb.h += 360;
}
hsb.s *= 100/255;
hsb.b *= 100/255;
return hsb;
},
HSBToRGB = function (hsb) {
var rgb = {};
var h = Math.round(hsb.h);
var s = Math.round(hsb.s*255/100);
var v = Math.round(hsb.b*255/100);
if(s == 0) {
rgb.r = rgb.g = rgb.b = v;
} else {
var t1 = v;
var t2 = (255-s)*v/255;
var t3 = (t1-t2)*(h%60)/60;
if(h==360) h = 0;
if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
else {rgb.r=0; rgb.g=0; rgb.b=0}
}
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
},
RGBToHex = function (rgb) {
var hex = [
rgb.r.toString(16),
rgb.g.toString(16),
rgb.b.toString(16)
];
$.each(hex, function (nr, val) {
if (val.length == 1) {
hex[nr] = '0' + val;
}
});
return hex.join('');
},
HSBToHex = function (hsb) {
return RGBToHex(HSBToRGB(hsb));
},
restoreOriginal = function () {
var cal = $(this).parent();
var col = cal.data('colorpicker').origColor;
cal.data('colorpicker').color = col;
fillRGBFields(col, cal.get(0));
fillHexFields(col, cal.get(0));
fillHSBFields(col, cal.get(0));
setSelector(col, cal.get(0));
setHue(col, cal.get(0));
setNewColor(col, cal.get(0));
};
return {
init: function (opt) {
opt = $.extend({}, defaults, opt||{});
if (typeof opt.color == 'string') {
opt.color = HexToHSB(opt.color);
} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
opt.color = RGBToHSB(opt.color);
} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
opt.color = fixHSB(opt.color);
} else {
return this;
}
return this.each(function () {
if (!$(this).data('colorpickerId')) {
var options = $.extend({}, opt);
options.origColor = opt.color;
var id = 'collorpicker_' + parseInt(Math.random() * 1000);
$(this).data('colorpickerId', id);
var cal = $(tpl).attr('id', id);
if (options.flat) {
cal.appendTo(this).show();
} else {
cal.appendTo(document.body);
}
options.fields = cal
.find('input')
.bind('keyup', keyDown)
.bind('change', change)
.bind('blur', blur)
.bind('focus', focus);
cal
.find('span').bind('mousedown', downIncrement).end()
.find('>div.colorpicker_current_color').bind('click', restoreOriginal);
options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
options.selectorIndic = options.selector.find('div div');
options.el = this;
options.hue = cal.find('div.colorpicker_hue div');
cal.find('div.colorpicker_hue').bind('mousedown', downHue);
options.newColor = cal.find('div.colorpicker_new_color');
options.currentColor = cal.find('div.colorpicker_current_color');
cal.data('colorpicker', options);
cal.find('div.colorpicker_submit')
.bind('mouseenter', enterSubmit)
.bind('mouseleave', leaveSubmit)
.bind('click', clickSubmit);
fillRGBFields(options.color, cal.get(0));
fillHSBFields(options.color, cal.get(0));
fillHexFields(options.color, cal.get(0));
setHue(options.color, cal.get(0));
setSelector(options.color, cal.get(0));
setCurrentColor(options.color, cal.get(0));
setNewColor(options.color, cal.get(0));
if (options.flat) {
cal.css({
position: 'relative',
display: 'block'
});
} else {
$(this).bind(options.eventName, show);
}
}
});
},
showPicker: function() {
return this.each( function () {
if ($(this).data('colorpickerId')) {
show.apply(this);
}
});
},
hidePicker: function() {
return this.each( function () {
if ($(this).data('colorpickerId')) {
$('#' + $(this).data('colorpickerId')).hide();
}
});
},
setColor: function(col) {
if (typeof col == 'string') {
col = HexToHSB(col);
} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
col = RGBToHSB(col);
} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
col = fixHSB(col);
} else {
return this;
}
return this.each(function(){
if ($(this).data('colorpickerId')) {
var cal = $('#' + $(this).data('colorpickerId'));
cal.data('colorpicker').color = col;
cal.data('colorpicker').origColor = col;
fillRGBFields(col, cal.get(0));
fillHSBFields(col, cal.get(0));
fillHexFields(col, cal.get(0));
setHue(col, cal.get(0));
setSelector(col, cal.get(0));
setCurrentColor(col, cal.get(0));
setNewColor(col, cal.get(0));
}
});
}
};
}();
$.fn.extend({
ColorPicker: ColorPicker.init,
ColorPickerHide: ColorPicker.hidePicker,
ColorPickerShow: ColorPicker.showPicker,
ColorPickerSetColor: ColorPicker.setColor
});
})(jQuery)

212
studio/button-editor/js/css-engine.js vendored Normal file
View File

@ -0,0 +1,212 @@
function CssEngine() {
this. cssText = '';
this.domNode = null;
this.multiOccurence = '';
}
CssEngine.prototype.upperCaseOccurence = function (str) {
var i=0;
var character ='';
while (i <= str.length){
character = str.charAt(i);
if (!isNaN(character * 1)){
}else{
if (character == character.toUpperCase()) {
return i;
}
}
i++;
}
}
CssEngine.prototype.multipleUpperCaseOccurence = function (str) {
this.multiOccurence = '';
var i=0;
var count = 0;
var character ='';
while (i <= str.length){
character = str.charAt(i);
if (!isNaN(character * 1)){
}else{
if (character == character.toUpperCase()) {
count++;
if(this.multiOccurence == '')
this.multiOccurence = i;
else
this.multiOccurence = this.multiOccurence+','+i;
//alert(this.multiOccurence);
}
}
i++;
}
//alert(str+"---"+this.multiOccurence);
return count;
}
CssEngine.prototype.loadNode = function(node) {
this.domNode = node;
}
CssEngine.prototype.getCssText = function() {
return this.cssText;
}
CssEngine.prototype.refreshCssText = function() {
this.cssText = '';
}
CssEngine.prototype.isNumber = function(n)
{
return !isNaN(parseFloat(n)) && isFinite(n);
}
CssEngine.prototype.prepareCss = function(element) {
this.loadNode(element);
var style = this.domNode.style;
var styleName = '';
var suffix ='';
var nodeId = '#'+this.domNode.id;
this.cssText = this.cssText+'\n'+nodeId+'\n{';
var pos = -1; // position of first uppercase property
/* iterating over style objects of its own node */
for (var property in style)
{
//pos = -1;
if (style.hasOwnProperty(property))
{
if(!style[property])
continue;
if(this.isNumber(property.substr(0)))
continue;
if(property === "cssText")
continue;
pos = this.upperCaseOccurence(property);
var m = this.multipleUpperCaseOccurence(property);
//alert(this.multiOccurence);
//alert(m);
if(m>1)
{
var cn = this.multiOccurence.split(',');
var i=0;
while(i<=cn.length)
{
if(i==0)
styleName = property.substr(0, cn[0]);
else if(i==cn.length)
{
suffix = property.substr(cn[i-1],cn[i-1]- cn.length);
//alert(cn.length - cn[i-1]);
suffix = suffix.charAt(0).toLowerCase() + suffix.substr(1);
//alert(property+"-"+suffix);
styleName = styleName+'-'+suffix;
}
else
{
suffix = property.substr(cn[i-1],cn[i]-cn[i-1]);
//alert(suffix);
suffix = suffix.charAt(0).toLowerCase() + suffix.substr(1);
//alert(property+"-"+suffix);
styleName = styleName+'-'+suffix;
}
i++;
}
}
else if(m==1)
{
styleName = property.substr(0, pos);
suffix = property.substr(pos,property.length);
//alert(suffix.charAt(0).toLowerCase());
suffix = suffix.charAt(0).toLowerCase() + suffix.substr(1);
//alert(property+"-"+suffix);
styleName = styleName+'-'+suffix;
}
else
{
styleName = property;
}
// console.log(property+"p");
this.cssText = this.cssText+'\n\t'+styleName+':'+style[property]+';';
}
}
this.cssText = this.cssText+'\n}';
}

83
studio/button-editor/js/css.js vendored Normal file
View File

@ -0,0 +1,83 @@
Rainbow.extend('css', [
{
'name': 'comment',
'pattern': /\/\*[\s\S]*?\*\//gm
},
{
'name': 'constant.hex-color',
'pattern': /#([a-f0-9]{3}|[a-f0-9]{6})(?=;|\s)/gi
},
{
'matches': {
1: 'constant.numeric',
2: 'keyword.unit'
},
'pattern': /(\d+)(px|em|cm|s|%)?/g
},
{
'name': 'string',
'pattern': /('|")(.*?)\1/g
},
{
'name': 'support.css-property',
'matches': {
1: 'support.vendor-prefix'
},
'pattern': /(-o-|-moz-|-webkit-|-ms-)?[\w-]+(?=\s?:)(?!.*\{)/g
},
{
'matches': {
1: [
{
'name': 'entity.name.sass',
'pattern': /&amp;/g
},
{
'name': 'direct-descendant',
'pattern': /&gt;/g
},
{
'name': 'entity.name.class',
'pattern': /\.[\w\-_]+/g
},
{
'name': 'entity.name.id',
'pattern': /\#[\w\-_]+/g
},
{
'name': 'entity.name.pseudo',
'pattern': /:[\w\-_]+/g
},
{
'name': 'entity.name.tag',
'pattern': /\w+/g
}
]
},
'pattern': /([\w\ ,:\.\#\&\;\-_]+)(?=.*\{)/g
},
{
'matches': {
2: 'support.vendor-prefix',
3: 'support.css-value'
},
'pattern': /(:|,)\s?(-o-|-moz-|-webkit-|-ms-)?([a-zA-Z-]*)(?=\b)(?!.*\{)/g
},
{
'matches': {
1: 'support.tag.style',
2: [
{
'name': 'string',
'pattern': /('|")(.*?)(\1)/g
},
{
'name': 'entity.tag.style',
'pattern': /(\w+)/g
}
],
3: 'support.tag.style'
},
'pattern': /(&lt;\/?)(style.*?)(&gt;)/g
}
], true);

9404
studio/button-editor/js/jquery-1.7.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

330
studio/button-editor/js/jquery.gradientPicker.js vendored Normal file
View File

@ -0,0 +1,330 @@
/**
@author Matt Crinklaw-Vogt (tantaman)
*/
(function( $ ) {
if (!$.event.special.destroyed) {
$.event.special.destroyed = {
remove: function(o) {
if (o.handler) {
o.handler();
}
}
}
}
function ctrlPtComparator(l,r) {
return l.position - r.position;
}
function bind(fn, ctx) {
if (typeof fn.bind === "function") {
return fn.bind(ctx);
} else {
return function() {
fn.apply(ctx, arguments);
}
}
}
var browserPrefix = "";
if ($.browser.mozilla) {
browserPrefix = "-moz-";
} else if ($.browser.webkit) {
browserPrefix = "-webkit-";
} else if ($.browser.opera) {
browserPrefix = "-o-";
} else if ($.browser.msie) {
browserPrefix = "-ms-";
}
function GradientSelection($el, opts) {
this.$el = $el;
this.$el.css("position", "relative");
this.opts = opts;
var $preview = $("<canvas class='gradientPicker-preview'></canvas>");
this.$el.append($preview);
var canvas = $preview[0];
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
this.g2d = canvas.getContext("2d");
var $ctrlPtContainer = $("<div class='gradientPicker-ctrlPts'></div>");
this.$el.append($ctrlPtContainer)
this.$ctrlPtContainer = $ctrlPtContainer;
this.updatePreview = bind(this.updatePreview, this);
this.controlPoints = [];
this.ctrlPtConfig = new ControlPtConfig(this.$el, opts);
for (var i = 0; i < opts.controlPoints.length; ++i) {
var ctrlPt = this.createCtrlPt(opts.controlPoints[i]);
this.controlPoints.push(ctrlPt);
}
this.docClicked = bind(this.docClicked, this);
this.destroyed = bind(this.destroyed, this);
$(document).bind("click", this.docClicked);
this.$el.bind("destroyed", this.destroyed);
this.previewClicked = bind(this.previewClicked, this);
$preview.click(this.previewClicked);
this.updatePreview();
}
GradientSelection.prototype = {
docClicked: function() {
this.ctrlPtConfig.hide();
},
createCtrlPt: function(ctrlPtSetup) {
return new ControlPoint(this.$ctrlPtContainer, ctrlPtSetup, this.opts.orientation, this, this.ctrlPtConfig)
},
destroyed: function() {
$(document).unbind("click", this.docClicked);
},
updateOptions: function(opts) {
$.extend(this.opts, opts);
this.updatePreview();
},
updatePreview: function() {
var result = [];
this.controlPoints.sort(ctrlPtComparator);
if (this.opts.orientation == "horizontal") {
var grad = this.g2d.createLinearGradient(0, 0, this.g2d.canvas.width, 0);
for (var i = 0; i < this.controlPoints.length; ++i) {
var pt = this.controlPoints[i];
grad.addColorStop(pt.position, pt.color);
result.push({
position: pt.position,
color: pt.color
});
}
} else {
}
this.g2d.fillStyle = grad;
this.g2d.fillRect(0, 0, this.g2d.canvas.width, this.g2d.canvas.height);
if (this.opts.generateStyles)
var styles = this._generatePreviewStyles();
this.opts.change(result, styles);
},
removeControlPoint: function(ctrlPt) {
var cpidx = this.controlPoints.indexOf(ctrlPt);
if (cpidx != -1) {
this.controlPoints.splice(cpidx, 1);
ctrlPt.$el.remove();
}
},
previewClicked: function(e) {
var offset = $(e.target).offset();
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
var imgData = this.g2d.getImageData(x,y,1,1);
var colorStr = "rgb(" + imgData.data[0] + "," + imgData.data[1] + "," + imgData.data[2] + ")";
var cp = this.createCtrlPt({
position: x / this.g2d.canvas.width,
color: colorStr
});
this.controlPoints.push(cp);
this.controlPoints.sort(ctrlPtComparator);
},
_generatePreviewStyles: function() {
//linear-gradient(top, rgb(217,230,163) 86%, rgb(227,249,159) 9%)
var str = this.opts.type + "-gradient(" + ((this.opts.type == "linear") ? (this.opts.fillDirection + ", ") : "");
var first = true;
for (var i = 0; i < this.controlPoints.length; ++i) {
var pt = this.controlPoints[i];
if (!first) {
str += ", ";
} else {
first = false;
}
str += pt.color + " " + ((pt.position*100)|0) + "%";
}
str = str + ")"
var styles = [str, browserPrefix + str];
return styles;
}
};
function ControlPoint($parentEl, initialState, orientation, listener, ctrlPtConfig) {
this.$el = $("<div class='gradientPicker-ctrlPt'></div>");
$parentEl.append(this.$el);
this.$parentEl = $parentEl;
this.configView = ctrlPtConfig;
if (typeof initialState === "string") {
initialState = initialState.split(" ");
this.position = parseFloat(initialState[1])/100;
this.color = initialState[0];
} else {
this.position = initialState.position;
this.color = initialState.color;
}
this.listener = listener;
this.outerWidth = this.$el.outerWidth();
this.$el.css("background-color", this.color);
if (orientation == "horizontal") {
var pxLeft = ($parentEl.width() - this.$el.outerWidth()) * (this.position);
this.$el.css("left", pxLeft);
} else {
var pxTop = ($parentEl.height() - this.$el.outerHeight()) * (this.position);
this.$el.css("top", pxTop);
}
this.drag = bind(this.drag, this);
this.stop = bind(this.stop, this);
this.clicked = bind(this.clicked, this);
this.colorChanged = bind(this.colorChanged, this);
this.$el.draggable({
axis: (orientation == "horizontal") ? "x" : "y",
drag: this.drag,
stop: this.stop,
containment: $parentEl
});
this.$el.click(this.clicked);
}
ControlPoint.prototype = {
drag: function(e, ui) {
// convert position to a %
var left = ui.position.left;
this.position = (left / (this.$parentEl.width() - this.outerWidth));
this.listener.updatePreview();
},
stop: function(e, ui) {
this.listener.updatePreview();
this.configView.show(this.$el.position(), this.color, this);
},
clicked: function(e) {
this.configView.show(this.$el.position(), this.color, this);
e.stopPropagation();
return false;
},
colorChanged: function(c) {
this.color = c;
this.$el.css("background-color", this.color);
this.listener.updatePreview();
},
removeClicked: function() {
this.listener.removeControlPoint(this);
this.listener.updatePreview();
}
};
function ControlPtConfig($parent, opts) {
//color-chooser
this.$el = $('<div class="gradientPicker-ptConfig" style="visibility: hidden"></div>');
$parent.append(this.$el);
var $cpicker = $('<div class="color-chooser"></div>');
this.$el.append($cpicker);
var $rmEl = $("<div class='gradientPicker-close'></div>");
this.$el.append($rmEl);
this.colorChanged = bind(this.colorChanged, this);
this.removeClicked = bind(this.removeClicked, this);
$cpicker.ColorPicker({
onChange: this.colorChanged
});
this.$cpicker = $cpicker;
this.opts = opts;
this.visible = false;
$rmEl.click(this.removeClicked);
}
ControlPtConfig.prototype = {
show: function(position, color, listener) {
this.visible = true;
this.listener = listener;
this.$el.css("visibility", "visible");
this.$cpicker.ColorPickerSetColor(color);
this.$cpicker.css("background-color", color);
if (this.opts.orientation === "horizontal") {
this.$el.css("left", position.left);
} else {
this.$el.css("top", position.top);
}
//else {
// this.visible = false;
//this.$el.css("visibility", "hidden");
//}
},
hide: function() {
if (this.visible) {
this.$el.css("visibility", "hidden");
this.visible = false;
}
},
colorChanged: function(hsb, hex, rgb) {
hex = "#" + hex;
this.listener.colorChanged(hex);
this.$cpicker.css("background-color", hex)
},
removeClicked: function() {
this.listener.removeClicked();
this.hide();
}
};
var methods = {
init: function(opts) {
opts = $.extend({
controlPoints: ["#FFF 0%", "#000 100%"],
orientation: "horizontal",
type: "linear",
fillDirection: "left",
generateStyles: true,
change: function() {}
}, opts);
this.each(function() {
var $this = $(this);
var gradSel = new GradientSelection($this, opts);
$this.data("gradientPicker-sel", gradSel);
});
},
update: function(opts) {
this.each(function() {
var $this = $(this);
var gradSel = $this.data("gradientPicker-sel");
if (gradSel != null) {
gradSel.updateOptions(opts);
}
});
}
};
$.fn.gradientPicker = function(method, opts) {
if (typeof method === "string" && method !== "init") {
methods[method].call(this, opts);
} else {
opts = method;
methods.init.call(this, opts);
}
};
})( jQuery );

17
studio/button-editor/js/jqueryUI-custom.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

768
studio/button-editor/js/rainbow.js vendored Normal file
View File

@ -0,0 +1,768 @@
window['Rainbow'] = (function() {
/**
* array of replacements to process at the end
*
* @type {Object}
*/
var replacements = {},
/**
* an array of start and end positions of blocks to be replaced
*
* @type {Object}
*/
replacement_positions = {},
/**
* an array of the language patterns specified for each language
*
* @type {Object}
*/
language_patterns = {},
/**
* an array of languages and whether they should bypass the default patterns
*
* @type {Object}
*/
bypass_defaults = {},
/**
* processing level
*
* replacements are stored at this level so if there is a sub block of code
* (for example php inside of html) it runs at a different level
*
* @type {number}
*/
CURRENT_LEVEL = 0,
/**
* constant used to refer to the default language
*
* @type {number}
*/
DEFAULT_LANGUAGE = 0,
/**
* used as counters so we can selectively call setTimeout
* after processing a certain number of matches/replacements
*
* @type {number}
*/
match_counter = 0,
/**
* @type {number}
*/
replacement_counter = 0,
/**
* @type {null|string}
*/
global_class,
/**
* @type {null|Function}
*/
onHighlight;
/**
* cross browser get attribute for an element
*
* @see http://stackoverflow.com/questions/3755227/cross-browser-javascript-getattribute-method
*
* @param {Node} el
* @param {string} attr attribute you are trying to get
* @returns {string|number}
*/
function _attr(el, attr, attrs, i) {
var result = (el.getAttribute && el.getAttribute(attr)) || 0;
if (!result) {
attrs = el.attributes;
for (i = 0; i < attrs.length; ++i) {
if (attrs[i].nodeName === attr) {
return attrs[i].nodeValue;
}
}
}
return result;
}
/**
* adds a class to a given code block
*
* @param {Element} el
* @param {string} class_name class name to add
* @returns void
*/
function _addClass(el, class_name) {
el.className += el.className ? ' ' + class_name : class_name;
}
/**
* checks if a block has a given class
*
* @param {Element} el
* @param {string} class_name class name to check for
* @returns {boolean}
*/
function _hasClass(el, class_name) {
return (' ' + el.className + ' ').indexOf(' ' + class_name + ' ') > -1;
}
/**
* gets the language for this block of code
*
* @param {Element} block
* @returns {string|null}
*/
function _getLanguageForBlock(block) {
// if this doesn't have a language but the parent does then use that
// this means if for example you have: <pre data-language="php">
// with a bunch of <code> blocks inside then you do not have
// to specify the language for each block
var language = _attr(block, 'data-language') || _attr(block.parentNode, 'data-language');
// this adds support for specifying language via a css class
// you can use the Google Code Prettify style: <pre class="lang-php">
// or the HTML5 style: <pre><code class="language-php">
if (!language) {
var pattern = /\blang(?:uage)?-(\w+)/,
match = block.className.match(pattern) || block.parentNode.className.match(pattern);
if (match) {
language = match[1];
}
}
return language;
}
/**
* makes sure html entities are always used for tags
*
* @param {string} code
* @returns {string}
*/
function _htmlEntities(code) {
return code.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/&(?![\w\#]+;)/g, '&amp;');
}
/**
* determines if a new match intersects with an existing one
*
* @param {number} start1 start position of existing match
* @param {number} end1 end position of existing match
* @param {number} start2 start position of new match
* @param {number} end2 end position of new match
* @returns {boolean}
*/
function _intersects(start1, end1, start2, end2) {
if (start2 >= start1 && start2 < end1) {
return true;
}
return end2 > start1 && end2 < end1;
}
/**
* determines if two different matches have complete overlap with each other
*
* @param {number} start1 start position of existing match
* @param {number} end1 end position of existing match
* @param {number} start2 start position of new match
* @param {number} end2 end position of new match
* @returns {boolean}
*/
function _hasCompleteOverlap(start1, end1, start2, end2) {
// if the starting and end positions are exactly the same
// then the first one should stay and this one should be ignored
if (start2 == start1 && end2 == end1) {
return false;
}
return start2 <= start1 && end2 >= end1;
}
/**
* determines if the match passed in falls inside of an existing match
* this prevents a regex pattern from matching inside of a bigger pattern
*
* @param {number} start - start position of new match
* @param {number} end - end position of new match
* @returns {boolean}
*/
function _matchIsInsideOtherMatch(start, end) {
for (var key in replacement_positions[CURRENT_LEVEL]) {
key = parseInt(key, 10);
// if this block completely overlaps with another block
// then we should remove the other block and return false
if (_hasCompleteOverlap(key, replacement_positions[CURRENT_LEVEL][key], start, end)) {
delete replacement_positions[CURRENT_LEVEL][key];
delete replacements[CURRENT_LEVEL][key];
}
if (_intersects(key, replacement_positions[CURRENT_LEVEL][key], start, end)) {
return true;
}
}
return false;
}
/**
* takes a string of code and wraps it in a span tag based on the name
*
* @param {string} name name of the pattern (ie keyword.regex)
* @param {string} code block of code to wrap
* @returns {string}
*/
function _wrapCodeInSpan(name, code) {
return '<span class="' + name.replace(/\./g, ' ') + (global_class ? ' ' + global_class : '') + '">' + code + '</span>';
}
/**
* finds out the position of group match for a regular expression
*
* @see http://stackoverflow.com/questions/1985594/how-to-find-index-of-groups-in-match
*
* @param {Object} match
* @param {number} group_number
* @returns {number}
*/
function _indexOfGroup(match, group_number) {
var index = 0,
i;
for (i = 1; i < group_number; ++i) {
if (match[i]) {
index += match[i].length;
}
}
return index;
}
/**
* matches a regex pattern against a block of code
* finds all matches that should be processed and stores the positions
* of where they should be replaced within the string
*
* this is where pretty much all the work is done but it should not
* be called directly
*
* @param {RegExp} pattern
* @param {string} code
* @returns void
*/
function _processPattern(regex, pattern, code, callback)
{
var match = regex.exec(code);
if (!match) {
return callback();
}
++match_counter;
// treat match 0 the same way as name
if (!pattern['name'] && typeof pattern['matches'][0] == 'string') {
pattern['name'] = pattern['matches'][0];
delete pattern['matches'][0];
}
var replacement = match[0],
start_pos = match.index,
end_pos = match[0].length + start_pos,
/**
* callback to process the next match of this pattern
*/
processNext = function() {
var nextCall = function() {
_processPattern(regex, pattern, code, callback);
};
// every 100 items we process let's call set timeout
// to let the ui breathe a little
return match_counter % 100 > 0 ? nextCall() : setTimeout(nextCall, 0);
};
// if this is not a child match and it falls inside of another
// match that already happened we should skip it and continue processing
if (_matchIsInsideOtherMatch(start_pos, end_pos)) {
return processNext();
}
/**
* callback for when a match was successfully processed
*
* @param {string} replacement
* @returns void
*/
var onMatchSuccess = function(replacement) {
// if this match has a name then wrap it in a span tag
if (pattern['name']) {
replacement = _wrapCodeInSpan(pattern['name'], replacement);
}
// console.log('LEVEL', CURRENT_LEVEL, 'replace', match[0], 'with', replacement, 'at position', start_pos, 'to', end_pos);
// store what needs to be replaced with what at this position
if (!replacements[CURRENT_LEVEL]) {
replacements[CURRENT_LEVEL] = {};
replacement_positions[CURRENT_LEVEL] = {};
}
replacements[CURRENT_LEVEL][start_pos] = {
'replace': match[0],
'with': replacement
};
// store the range of this match so we can use it for comparisons
// with other matches later
replacement_positions[CURRENT_LEVEL][start_pos] = end_pos;
// process the next match
processNext();
},
// if this pattern has sub matches for different groups in the regex
// then we should process them one at a time by rerunning them through
// this function to generate the new replacement
//
// we run through them backwards because the match position of earlier
// matches will not change depending on what gets replaced in later
// matches
group_keys = keys(pattern['matches']),
/**
* callback for processing a sub group
*
* @param {number} i
* @param {Array} group_keys
* @param {Function} callback
*/
processGroup = function(i, group_keys, callback) {
if (i >= group_keys.length) {
return callback(replacement);
}
var processNextGroup = function() {
processGroup(++i, group_keys, callback);
},
block = match[group_keys[i]];
// if there is no match here then move on
if (!block) {
return processNextGroup();
}
var group = pattern['matches'][group_keys[i]],
language = group['language'],
/**
* process group is what group we should use to actually process
* this match group
*
* for example if the subgroup pattern looks like this
* 2: {
* 'name': 'keyword',
* 'pattern': /true/g
* }
*
* then we use that as is, but if it looks like this
*
* 2: {
* 'name': 'keyword',
* 'matches': {
* 'name': 'special',
* 'pattern': /whatever/g
* }
* }
*
* we treat the 'matches' part as the pattern and keep
* the name around to wrap it with later
*/
process_group = group['name'] && group['matches'] ? group['matches'] : group,
/**
* takes the code block matched at this group, replaces it
* with the highlighted block, and optionally wraps it with
* a span with a name
*
* @param {string} block
* @param {string} replace_block
* @param {string|null} match_name
*/
_replaceAndContinue = function(block, replace_block, match_name) {
replacement = _replaceAtPosition(_indexOfGroup(match, group_keys[i]), block, match_name ? _wrapCodeInSpan(match_name, replace_block) : replace_block, replacement);
processNextGroup();
};
// if this is a sublanguage go and process the block using that language
if (language) {
return _highlightBlockForLanguage(block, language, function(code) {
_replaceAndContinue(block, code);
});
}
// if this is a string then this match is directly mapped to selector
// so all we have to do is wrap it in a span and continue
if (typeof group === 'string') {
return _replaceAndContinue(block, block, group);
}
// the process group can be a single pattern or an array of patterns
// _processCodeWithPatterns always expects an array so we convert it here
_processCodeWithPatterns(block, process_group.length ? process_group : [process_group], function(code) {
_replaceAndContinue(block, code, group['matches'] ? group['name'] : 0);
});
};
processGroup(0, group_keys, onMatchSuccess);
}
/**
* should a language bypass the default patterns?
*
* if you call Rainbow.extend() and pass true as the third argument
* it will bypass the defaults
*/
function _bypassDefaultPatterns(language)
{
return bypass_defaults[language];
}
/**
* returns a list of regex patterns for this language
*
* @param {string} language
* @returns {Array}
*/
function _getPatternsForLanguage(language) {
var patterns = language_patterns[language] || [],
default_patterns = language_patterns[DEFAULT_LANGUAGE] || [];
return _bypassDefaultPatterns(language) ? patterns : patterns.concat(default_patterns);
}
/**
* substring replace call to replace part of a string at a certain position
*
* @param {number} position the position where the replacement should happen
* @param {string} replace the text we want to replace
* @param {string} replace_with the text we want to replace it with
* @param {string} code the code we are doing the replacing in
* @returns {string}
*/
function _replaceAtPosition(position, replace, replace_with, code) {
var sub_string = code.substr(position);
return code.substr(0, position) + sub_string.replace(replace, replace_with);
}
/**
* sorts an object by index descending
*
* @param {Object} object
* @return {Array}
*/
function keys(object) {
var locations = [],
replacement,
pos;
for(var location in object) {
if (object.hasOwnProperty(location)) {
locations.push(location);
}
}
// numeric descending
return locations.sort(function(a, b) {
return b - a;
});
}
/**
* processes a block of code using specified patterns
*
* @param {string} code
* @param {Array} patterns
* @returns void
*/
function _processCodeWithPatterns(code, patterns, callback)
{
// we have to increase the level here so that the
// replacements will not conflict with each other when
// processing sub blocks of code
++CURRENT_LEVEL;
// patterns are processed one at a time through this function
function _workOnPatterns(patterns, i)
{
// still have patterns to process, keep going
if (i < patterns.length) {
return _processPattern(patterns[i]['pattern'], patterns[i], code, function() {
_workOnPatterns(patterns, ++i);
});
}
// we are done processing the patterns
// process the replacements and update the DOM
_processReplacements(code, function(code) {
// when we are done processing replacements
// we are done at this level so we can go back down
delete replacements[CURRENT_LEVEL];
delete replacement_positions[CURRENT_LEVEL];
--CURRENT_LEVEL;
callback(code);
});
}
_workOnPatterns(patterns, 0);
}
/**
* process replacements in the string of code to actually update the markup
*
* @param {string} code the code to process replacements in
* @param {Function} onComplete what to do when we are done processing
* @returns void
*/
function _processReplacements(code, onComplete) {
/**
* processes a single replacement
*
* @param {string} code
* @param {Array} positions
* @param {number} i
* @param {Function} onComplete
* @returns void
*/
function _processReplacement(code, positions, i, onComplete) {
if (i < positions.length) {
++replacement_counter;
var pos = positions[i],
replacement = replacements[CURRENT_LEVEL][pos];
code = _replaceAtPosition(pos, replacement['replace'], replacement['with'], code);
// process next function
var next = function() {
_processReplacement(code, positions, ++i, onComplete);
};
// use a timeout every 250 to not freeze up the UI
return replacement_counter % 250 > 0 ? next() : setTimeout(next, 0);
}
onComplete(code);
}
var string_positions = keys(replacements[CURRENT_LEVEL]);
_processReplacement(code, string_positions, 0, onComplete);
}
/**
* takes a string of code and highlights it according to the language specified
*
* @param {string} code
* @param {string} language
* @param {Function} onComplete
* @returns void
*/
function _highlightBlockForLanguage(code, language, onComplete) {
var patterns = _getPatternsForLanguage(language);
_processCodeWithPatterns(_htmlEntities(code), patterns, onComplete);
}
/**
* highlight an individual code block
*
* @param {Array} code_blocks
* @param {number} i
* @returns void
*/
function _highlightCodeBlock(code_blocks, i, onComplete) {
if (i < code_blocks.length) {
var block = code_blocks[i],
language = _getLanguageForBlock(block);
if (!_hasClass(block, 'rainbow') && language) {
language = language.toLowerCase();
_addClass(block, 'rainbow');
return _highlightBlockForLanguage(block.innerHTML, language, function(code) {
block.innerHTML = code;
// reset the replacement arrays
replacements = {};
replacement_positions = {};
// if you have a listener attached tell it that this block is now highlighted
if (onHighlight) {
onHighlight(block, language);
}
// process the next block
setTimeout(function() {
_highlightCodeBlock(code_blocks, ++i, onComplete);
}, 0);
});
}
return _highlightCodeBlock(code_blocks, ++i, onComplete);
}
if (onComplete) {
onComplete();
}
}
/**
* start highlighting all the code blocks
*
* @returns void
*/
function _highlight(node, onComplete) {
// the first argument can be an Event or a DOM Element
// I was originally checking instanceof Event but that makes it break
// when using mootools
//
// @see https://github.com/ccampbell/rainbow/issues/32
//
node = node && typeof node.getElementsByTagName == 'function' ? node : document;
var pre_blocks = node.getElementsByTagName('pre'),
code_blocks = node.getElementsByTagName('code'),
i,
final_blocks = [];
// alert(vl);
// @see http://stackoverflow.com/questions/2735067/how-to-convert-a-dom-node-list-to-an-array-in-javascript
// we are going to process all <code> blocks
for (i = 0; i < code_blocks.length; ++i) {
final_blocks.push(code_blocks[i]);
}
// loop through the pre blocks to see which ones we should add
for (i = 0; i < pre_blocks.length; ++i) {
// if the pre block has no code blocks then process it directly
if (!pre_blocks[i].getElementsByTagName('code').length) {
final_blocks.push(pre_blocks[i]);
}
}
_highlightCodeBlock(final_blocks, 0, onComplete);
}
/**
* public methods
*/
return {
/**
* extends the language pattern matches
*
* @param {*} language name of language
* @param {*} patterns array of patterns to add on
* @param {boolean|null} bypass if true this will bypass the default language patterns
*/
extend: function(language, patterns, bypass) {
// if there is only one argument then we assume that we want to
// extend the default language rules
if (arguments.length == 1) {
patterns = language;
language = DEFAULT_LANGUAGE;
}
bypass_defaults[language] = bypass;
language_patterns[language] = patterns.concat(language_patterns[language] || []);
},
/**
* call back to let you do stuff in your app after a piece of code has been highlighted
*
* @param {Function} callback
*/
onHighlight: function(callback) {
onHighlight = callback;
},
/**
* method to set a global class that will be applied to all spans
*
* @param {string} class_name
*/
addClass: function(class_name) {
global_class = class_name;
},
/**
* starts the magic rainbow
*
* @returns void
*/
color: function() {
// if you want to straight up highlight a string you can pass the string of code,
// the language, and a callback function
if (typeof arguments[0] == 'string') {
return _highlightBlockForLanguage(arguments[0], arguments[1], arguments[2]);
}
// if you pass a callback function then we rerun the color function
// on all the code and call the callback function on complete
if (typeof arguments[0] == 'function') {
return _highlight(0, arguments[0]);
}
//alert("lol");
// otherwise we use whatever node you passed in with an optional
// callback function as the second parameter
//alert(arguments[0]);
_highlight(arguments[0], arguments[1]);
},
beautify : function() {
_highlight(arguments[0], arguments[1]);
}
};
}) ();
/**
* adds event listener to start highlighting
*/
(function() {
if (window.addEventListener) {
return window.addEventListener('load', Rainbow.color, false);
}
window.attachEvent('onload', Rainbow.color);
}) ();
// When using Google closure compiler in advanced mode some methods
// get renamed. This keeps a public reference to these methods so they can
// still be referenced from outside this library.
Rainbow["onHighlight"] = Rainbow.onHighlight;
Rainbow["addClass"] = Rainbow.addClass;

207
studio/button-editor/styles/button-gen.css vendored Normal file
View File

@ -0,0 +1,207 @@
#panel-right {
padding:20px;
border: thin solid #bfbfbf;
margin-right: 0;
margin-top: 5px;
background-color: #2c2d3a;
margin-top:-10px;
width: 67%;
left:1%;
}
#panel-left {
float:left;
padding:20px;
border: thin solid #bfbfbf;
margin-left: 0;
margin-top: 5px;
background-color: rgba(243,243,243,0.7);
overflow: scroll;
margin-top:-10px;
}
#preview {
width: 67%;
height: 300px;
margin-top:50px;
background: url('../images/grid2.png');
padding: 20px;
border: thin solid #d7d7d7;
left:1%;
}
#sample {
position: relative;
top:110px;
padding:10px;
font-size:12px;
border-style:none;
font-family:tahoma;
border-color:black;
}
.tool {
font-family:impact;
}
.tool heading {
color:#20a0dc;
letter-spacing: 3px;
}
.tool heading span {
color:rgb(255, 255, 255);
font-style: italic;
font-weight: 100;
font-family: courier;
font-size: 0.9em;
}
input[type="range"] {
-webkit-appearance: none;
background-color: black;
height: 2px;
width: 200px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
position: relative;
top: -1px;
z-index: 1;
width: 15px;
height: 15px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
/*background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb));*/
background-color:#f79b23;
}
.awesome{
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
background-color: #a9014b;
}
.bawesome{
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px #222;
position: relative;
cursor: pointer;
background-color: #2bbff4;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
}
.grad_ex {
width: 200px;
height: 20px;
margin-bottom: 32px;
}
.modal-profile h2 {
text-align: center;
font-family:tahoma;
margin-top:-20px;
font-weight: 100;
color: #73b651;
}
.modal-profile {
display:none;
height: 320px;
width: 460px;
padding:25px;
border:1px solid #fff;
box-shadow: 0px 2px 7px #292929;
-moz-box-shadow: 0px 2px 7px #292929;
-webkit-box-shadow: 0px 2px 7px #292929;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background: #f2f2f2;
z-index:1111;
/* margin-left:auto;
margin-right: auto;*/
position: absolute;
top:90px;
left: 380px;
}
a.modal-close-profile {
position:absolute;
top:-15px;
right:-15px;
}
a.modal-social {
margin:0 10px 0 0;
}
.modal-lightsout {
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height: 100%;
z-index:1000;
background:rgba(0,0,0,0.95);
}

163
studio/button-editor/styles/colorpicker.css vendored Normal file
View File

@ -0,0 +1,163 @@
.colorpicker {
width: 356px;
height: 176px;
overflow: hidden;
position: absolute;
background: url(../images/colorpicker_background.png);
font-family: Arial, Helvetica, sans-serif;
display: none;
margin-top:-70px;
margin-left:-90px;
}
.colorpicker_color {
width: 150px;
height: 150px;
left: 14px;
top: 13px;
position: absolute;
background: #f00;
overflow: hidden;
cursor: crosshair;
}
.colorpicker_color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: url(../images/colorpicker_overlay.png);
}
.colorpicker_color div div {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: url(../images/colorpicker_select.gif);
margin: -5px 0 0 -5px;
}
.colorpicker_hue {
position: absolute;
top: 13px;
left: 171px;
width: 35px;
height: 150px;
cursor: n-resize;
}
.colorpicker_hue div {
position: absolute;
width: 35px;
height: 9px;
overflow: hidden;
background: url(../images/colorpicker_indic.gif) left top;
margin: -4px 0 0 0;
left: 0px;
}
.colorpicker_new_color {
position: absolute;
width: 60px;
height: 30px;
left: 213px;
top: 13px;
background: #f00;
}
.colorpicker_current_color {
position: absolute;
width: 60px;
height: 30px;
left: 283px;
top: 13px;
background: #f00;
}
.colorpicker input {
background-color: transparent;
border: 1px solid transparent;
position: absolute;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #898989;
top: 4px;
right: 11px;
text-align: right;
margin: 0;
padding: 0;
height: 11px;
}
.colorpicker_hex {
position: absolute;
width: 72px;
height: 22px;
background: url(../images/colorpicker_hex.png) top;
left: 212px;
top: 142px;
}
.colorpicker_hex input {
right: 6px;
}
.colorpicker_field {
height: 22px;
width: 62px;
background-position: top;
position: absolute;
}
.colorpicker_field span {
position: absolute;
width: 12px;
height: 22px;
overflow: hidden;
top: 0;
right: 0;
cursor: n-resize;
}
.colorpicker_rgb_r {
background-image: url(../images/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(../images/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(../images/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(../images/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(../images/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(../images/colorpicker_hsb_b.png);
top: 112px;
left: 282px;
}
.colorpicker_submit {
position: absolute;
width: 22px;
height: 22px;
background: url(../images/colorpicker_submit.png) top;
left: 322px;
top: 142px;
overflow: hidden;
}
.colorpicker_focus {
background-position: center;
}
.colorpicker_hex.colorpicker_focus {
background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
background-position: bottom;
}
.colorpicker_slider {
background-position: bottom;
}

185
studio/button-editor/styles/colorpicker_1.css vendored Normal file
View File

@ -0,0 +1,185 @@
.colorpicker {
width: 356px;
height: 176px;
overflow: hidden;
position: absolute;
background: url(../images/colorpicker_background.png);
font-family: Arial, Helvetica, sans-serif;
display: none;
z-index:500;
}
.color-chooser {
width: 30px;
height: 30px;
margin-top: 5px;
background: url("../images/select.png") center;
}
.color-chooser > div {
width: 30px;
height: 30px;
background: url("../images/select.png") center;
}
.colorpicker_color {
width: 150px;
height: 150px;
left: 14px;
top: 13px;
position: absolute;
background: #f00;
overflow: hidden;
cursor: crosshair;
}
.colorpicker_color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: url(../images/colorpicker_overlay.png);
}
.colorpicker_color div div {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: url(../images/colorpicker_select.gif);
margin: -5px 0 0 -5px;
}
.colorpicker_hue {
position: absolute;
top: 13px;
left: 171px;
width: 35px;
height: 150px;
cursor: n-resize;
}
.colorpicker_hue div {
position: absolute;
width: 35px;
height: 9px;
overflow: hidden;
background: url(../images/colorpicker_indic.gif) left top;
margin: -4px 0 0 0;
left: 0px;
}
.colorpicker_new_color {
position: absolute;
width: 60px;
height: 30px;
left: 213px;
top: 13px;
background: #f00;
}
.colorpicker_current_color {
position: absolute;
width: 60px;
height: 30px;
left: 283px;
top: 13px;
background: #f00;
}
.colorpicker input {
background-color: transparent;
border: 1px solid transparent;
position: absolute;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #898989;
top: 4px;
right: 11px;
text-align: right;
margin: 0;
padding: 0;
height: 11px;
}
.colorpicker_hex {
position: absolute;
width: 72px;
height: 22px;
background: url(../images/colorpicker_hex.png) top;
left: 212px;
top: 142px;
}
.colorpicker_hex input {
right: 6px;
}
.colorpicker_field {
height: 22px;
width: 62px;
background-position: top;
position: absolute;
}
.colorpicker_field > input {
width: 42px;
}
.colorpicker_hex > input {
width: 42px;
}
.colorpicker_field span {
position: absolute;
width: 12px;
height: 22px;
overflow: hidden;
top: 0;
right: 0;
cursor: n-resize;
}
.colorpicker_rgb_r {
background-image: url(../images/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(../images/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(../images/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(../images/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(../images/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(../images/colorpicker_hsb_b.png);
top: 112px;
left: 282px;
}
.colorpicker_submit {
position: absolute;
width: 22px;
height: 22px;
background: url(../images/colorpicker_submit.png) top;
left: 322px;
top: 142px;
overflow: hidden;
}
.colorpicker_focus {
background-position: center;
}
.colorpicker_hex.colorpicker_focus {
background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
background-position: bottom;
}
.colorpicker_slider {
background-position: bottom;
}

BIN
studio/button-editor/styles/images/grid.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
studio/button-editor/styles/images/grid2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
studio/button-editor/styles/images/paper1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
studio/button-editor/styles/images/paper2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
studio/button-editor/styles/images/paper3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 648 KiB

BIN
studio/button-editor/styles/images/paper4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
studio/button-editor/styles/images/ui-bg_diagonals-thick_18_b81900_40x40.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 260 B

BIN
studio/button-editor/styles/images/ui-bg_diagonals-thick_20_666666_40x40.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 251 B

BIN
studio/button-editor/styles/images/ui-bg_flat_10_000000_40x100.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 B

BIN
studio/button-editor/styles/images/ui-bg_glass_100_f6f6f6_1x400.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 B

BIN
studio/button-editor/styles/images/ui-bg_glass_100_fdf5ce_1x400.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 B

BIN
studio/button-editor/styles/images/ui-bg_glass_65_ffffff_1x400.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 B

BIN
studio/button-editor/styles/images/ui-bg_gloss-wave_35_f6a828_500x100.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
studio/button-editor/styles/images/ui-bg_highlight-soft_100_eeeeee_1x100.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 B

BIN
studio/button-editor/styles/images/ui-bg_highlight-soft_75_ffe45c_1x100.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 B

BIN
studio/button-editor/styles/images/ui-icons_222222_256x240.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
studio/button-editor/styles/images/ui-icons_228ef1_256x240.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
studio/button-editor/styles/images/ui-icons_ef8c08_256x240.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
studio/button-editor/styles/images/ui-icons_ffd27a_256x240.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
studio/button-editor/styles/images/ui-icons_ffffff_256x240.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

563
studio/button-editor/styles/jquery-ui.css vendored Normal file
View File

@ -0,0 +1,563 @@
/*!
* jQuery UI CSS Framework 1.8.23
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*f
* http://docs.jquery.com/UI/Theming/API
*/
/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
.ui-helper-clearfix:after { clear: both; }
.ui-helper-clearfix { zoom: 1; }
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }
/* Icons
----------------------------------*/
/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*!
* jQuery UI CSS Framework 1.8.23
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Theming/API
*
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS,%20Tahoma,%20Verdana,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=02_glass.png&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=08_diagonals_thick.png&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=08_diagonals_thick.png&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=01_flat.png&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
*/
/* Component containers
----------------------------------*/
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #dddddd;}
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }
/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1c94c4; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #c77405; }
.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #fbd850; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #eb8f00; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; text-decoration: none; }
.ui-widget :active { outline: none; }
/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #fed22f; background: #ffe45c url(images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x; color: #363636; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #b81900 url(images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat; color: #ffffff; }
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #ffffff; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #ffffff; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
/* Icons
----------------------------------*/
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_ef8c08_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_ef8c08_256x240.png); }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_ef8c08_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_228ef1_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_ffd27a_256x240.png); }
/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-off { background-position: -96px -144px; }
.ui-icon-radio-on { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
/* Misc visuals
----------------------------------*/
/* Corner radius */
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
/* Overlays */
.ui-widget-overlay { background: #666666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat; opacity: .50;filter:Alpha(Opacity=50); }
.ui-widget-shadow { margin: -5px 0 0 -5px; padding: 5px; background: #000000 url(images/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }/*!
* jQuery UI Resizable 1.8.23
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Resizable#theming
*/
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }f
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/*!
* jQuery UI Selectable 1.8.23
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Selectable#theming
*/
.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }
/*!
* jQuery UI Accordion 1.8.23
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Accordion#theming
*/
/* IE/Win - Fix animation bug - #4615 */
.ui-accordion { width: 100%; }
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
.ui-accordion .ui-accordion-content-active { display: block; }
/*!
* jQuery UI Autocomplete 1.8.23
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Autocomplete#theming
*/
.ui-autocomplete { position: absolute; cursor: default; }
/* workarounds */
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
/*
* jQuery UI Menu 1.8.23
*
* Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Menu#theming
*/
.ui-menu {
list-style:none;
padding: 2px;
margin: 0;
display:block;
float: left;
}
.ui-menu .ui-menu {
margin-top: -3px;
}
.ui-menu .ui-menu-item {
margin:0;
padding: 0;
zoom: 1;
float: left;
clear: left;
width: 100%;
}
.ui-menu .ui-menu-item a {
text-decoration:none;
display:block;
padding:.2em .4em;
line-height:1.5;
zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
}
/*!
* jQuery UI Button 1.8.23
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Button#theming
*/
.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
.ui-button-icons-only { width: 3.4em; }
button.ui-button-icons-only { width: 3.7em; }
/*button text element */
.ui-button .ui-button-text { display: block; line-height: 1.4; }
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
/* no icon support for input elements, provide padding by default */
input.ui-button { padding: .4em 1em; }
/*button icon element(s) */
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
/*button sets*/
.ui-buttonset { margin-right: 7px; }
.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }
/* workarounds */
button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
/*!
* jQuery UI Dialog 1.8.23
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Dialog#theming
*/
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
/*!
* jQuery UI Slider 1.8.23
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Slider#theming
*/
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }/*!
* jQuery UI Tabs 1.8.23
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Tabs#theming
*/
.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }
/*!
* jQuery UI Datepicker 1.8.23
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Datepicker#theming
*/
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }
/* RTL support */
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
position: absolute; /*must have*/
z-index: -1; /*must have*/
filter: mask(); /*must have*/
top: -4px; /*must have*/
left: -4px; /*must have*/
width: 200px; /*must have*/
height: 200px; /*must have*/
}/*!
* jQuery UI Progressbar 1.8.23
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Progressbar#theming
*/
.ui-progressbar { height:2em; text-align: left; overflow: hidden; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }

57
studio/button-editor/styles/jquery.gradientPicker.css vendored Normal file
View File

@ -0,0 +1,57 @@
.gradientPicker-preview {
width: 100%;
height: 100%;
border: 1px solid rgba(0,0,0,0.2);
/*box-sizing: border-box;
-moz-box-sizing: border-box;*/
}
.gradientPicker-ctrlPt {
width: 8px;
height: 8px;
border: 2px solid gray;
position: absolute;
display: inline-block;
}
.gradientPicker-ctrlPts {
position: relative;
height: 10px;
width: 100%;
}
.gradientPicker-ptConfig {
position: absolute;
width: 35px;
height: 40px;
z-index: 1;
margin-top: 2px;
background-color: white;
border-radius: 5px;
border: 1px solid rgba(0,0,0,0.2);
padding: 0 3px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.gradientPicker-close {
position: absolute;
top: -4px;
right: -4px;
/*font-size: 18px;
font-weight: bold;
color: black;
line-height: 20px;
text-shadow: 0 1px 0 white;
opacity: 0.2;
filter: alpha(opacity=20);*/
width: 16px;
height: 16px;
background-image: url("../images/circle_remove.png");
}
.gradientPicker-ptConfig .color-chooser {
float: left;
}

478
studio/button-editor/styles/main-style.css vendored Normal file
View File

@ -0,0 +1,478 @@
/*CSS RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
}
/***********************/
body {
}
.wrap {
position:relative;
margin:0 auto;
width:900px;
color: white;
opacity: 1;
font-family: Arial,Verdana,sans-serif;
}
#main-header{
width:100%;
float:left;
padding:15px 0;
padding-left:0px;
padding-top:30px;
/*background:rgba(7,164,249,0.84);*/
background: rgba(21,15,15,0.83);
padding-left: 20px;
padding-bottom: 15px;
box-shadow: 2px 6px 8px 6px black;
/*border: 1px solid rgba(255, 255, 255, 0.1);*/
margin-bottom: 30px;
height:40px;
margin-top:0px;
border-bottom:thin solid #0c84ec;
}
#left{
float:left;
margin-top:0px;
margin-left:-75px;
}
#info {
right:0px;
position: absolute;
margin-top: -15px;
}
#info section {
float:left;
}
#cogs {
margin-left:50px;
margin-top:-5px;
}
#download {
margin-left:10px;
margin-top:-5px;
}
#user {
float: left;
margin-right:10px;
}
#mybutton {
margin-top:-5px;
float:left;
}
body {
background: url('../images/texture.jpg');
}
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
#toolbar {
float:left;
width: 140px;
margin-left: 8px;
margin-right:-10px;
}
#surface {
margin-left:5px;
border: 0px solid black;
width:863px;
height: 710px;
display: inline-block;
/*float: left;*/
box-shadow: 13px 10px 12px black;
border: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 0;
-webkit-background-origin: border-box;
-moz-background-origin: border;
background-origin: border-box;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, .15)), to(rgba(0, 0, 0, .25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, .15)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
background: -moz-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
background: linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
}
#trash {
top:525px;
margin-left:10px;
position: absolute;
}
#trash img {
width: 100px;
height: 100px;
}
#tool-bar {
padding:10px;
margin-left: 10px;
}
#toolbar-icon img{
width:100px;
height: 100px;
}
#vertical-list {
display: none;
}
.button-set {
padding-top:5px;
padding-bottom: 5px;
clear: both;
height: 58px;
}
.button, .button:before, .button:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 35px;
}
.button {
font-family: 'pictos';
font-size: 16px;
line-height: 20px;
padding-right:5px;
color: rgba(0,0,0,0.5);
text-shadow: rgba(0,0,0,0.1) 0px -2px 1px, rgb(255,255,255) 0px 1px 2px;
width: 43px;
height: 43px;
padding: 10px;
text-indent: -2px;
margin: 10px auto;
position: static;
z-index: 50;
cursor: pointer;
margin-top: 10px;
background-color: transparent;
border: rgba(0,0,0,0.3) 1px solid;
border-top-color: rgba(0,0,0,0.1);
border-left-color: rgba(0,0,0,0.2);
border-right-color: rgba(0,0,0,0.2);
border-bottom-color: rgba(0,0,0,0.3);
box-shadow: inset rgba(255,255,255,0.3) -5px -30px 10px,
inset rgba(255,255,255,0.3) 0px 30px 10px,
inset rgba(255,255,255,1) 0px 2px 1px,
rgba(0,0,0,0.4) 0px 10px 15px;
-webkit-transition: -webkit-box-shadow 0s ease-in-out;
-khtml-transition: -khtml-box-shadow 0s ease-in-out;
-moz-transition: -moz-box-shadow 0s ease-in-out;
-o-transition: -o-box-shadow 0s ease-in-out;
transition: box-shadow 0s ease-in-out;
background-image: -webkit-radial-gradient( 50% 0%, 8% 50%, hsla(0,0%,100%,.2) 0%, hsla(0,0%,100%,0) 100%),
-webkit-radial-gradient( 50% 100%, 12% 50%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 100%),
-webkit-radial-gradient( 0% 50%, 50% 7%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 100%),
-webkit-radial-gradient( 100% 50%, 50% 5%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 100%),
-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 3.5%),
-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),
-webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,0) 2.2%);
margin-left:5px;
display: inline-block;
}
.button:before, .button:after {
content: "";
display: block;
position: absolute;
}
.button:before {
z-index: -50;
width: 43px;
height: 47px;
margin-top: -15px;
margin-left: -11px;
background: #666666;
background: -moz-linear-gradient(left, #666666 0%, #bbbbbb 50%, #666666 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#666666), color-stop(50%,#bbbbbb), color-stop(100%,#666666));
background: -webkit-linear-gradient(left, #666666 0%,#bbbbbb 50%,#666666 100%);
background: -o-linear-gradient(left, #666666 0%,#bbbbbb 50%,#666666 100%);
background: -ms-linear-gradient(left, #666666 0%,#bbbbbb 50%,#666666 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#666666',GradientType=1 );
background: linear-gradient(left, #666666 0%,#bbbbbb 50%,#666666 100%);
box-shadow: #000 0px 0px 2px;
}
.button:after {
z-index: -100;
width: 53px;
height: 53px;
margin-top: -34px;
margin-left: -16px;
background: rgba(0,0,0,0.1);
box-shadow: inset rgba(255,255,255,0.1) 0px -5px 5px,
rgba(0,0,0,0.1) 0px 3px 3px,
rgba(255,255,255,0.05) 0px -3px 3px;
}
.button:hover {
color: rgba(183,15,15,0.97);
text-shadow: #c16262 0px 0px 4px;
box-shadow: inset rgba(255,255,255,0.4) 0px -30px 15px,
inset rgba(255,255,255,0.2) -25px 25px 10px,
inset rgba(255,255,255,1) 0px 2px 1px,
rgba(0,0,0,0.4) 0px 10px 15px;
}
.button:active {
margin-top: 6px;
color: #fff;
box-shadow: inset rgba(255,255,255,0.4) 0px -30px 15px,
inset rgba(255,255,255,0.2) -25px 25px 10px,
inset rgba(255,255,255,1) 0px 2px 1px,
rgba(0,0,0,0.4) 0px 2px 3px;
}
.button:active:before {
height: 43px;
margin-top: -13px;
}
.button:active:after {
margin-top: -39px;
}
#mybutton {
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
position: relative;
cursor: pointer;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
background-color: #ff5c00;
border-color: black;
}
#page-footer {
display: block;
clear:both;
margin-top: 100px;
border-top:2px solid rgba(167,167,167,0.71);
color: rgba(194,191,191,0.78);
font-family: Helvetica;
padding:20px;
width:70%;
margin-left:auto;
margin-right: auto;
}
#page-footer section {
text-align: center;
text-shadow: 5px 4px 10px black;
}
#page-footer ul {
margin-left:30%;
}
#page-footer li {
margin-right: 8px;
margin-left:auto;
display: inline;
}
#dim {
position:absolute;
top:0;
left:0;
width:100%;
height: 100%;
z-index:9999;
background:url('../images/pattern.gif');
}
.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spinPulse 1s infinite ease-in-out;
-webkit-animation:spinPulse 1s infinite linear;
z-index:10000;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-50px;
-moz-animation:spinoffPulse 1s infinite linear;
-webkit-animation:spinoffPulse 1s infinite linear;
z-index:10000;
}
@-moz-keyframes spinPulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes spinPulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
#v-align {
top:50%;
left:50%;
position:absolute;
}

54
studio/button-editor/themes/blackboard.css vendored Normal file
View File

@ -0,0 +1,54 @@
pre {
background: #0B1022;
word-wrap: break-word;
margin: 0px;
padding: 0px;
padding: 10px;
color: #fff;
font-size: 14px;
margin-bottom: 20px;
}
pre, code {
font-family: 'Monaco', courier, monospace;
}
pre .comment {
color: #727272;
}
pre .constant {
color: #D8FA3C;
}
pre .storage {
color: #FBDE2D;
}
pre .string, pre .comment.docstring {
color: #61CE3C;
}
pre .string.regexp, pre .support.tag.script, pre .support.tag.style {
color: #fff;
}
pre .keyword, pre .selector {
color: #FBDE2D;
}
pre .inherited-class {
font-style: italic;
}
pre .entity {
color: #FF6400;
}
pre .support, *[data-language="c"] .function.call {
color: #8DA6CE;
}
pre .variable.global, pre .variable.class, pre .variable.instance {
color: #FF6400;
}