517 lines
9.9 KiB
CSS
517 lines
9.9 KiB
CSS
|
body
|
||
|
|
{
|
||
|
|
background-color: #292929;
|
||
|
|
font-family: 'Asap', sans-serif;
|
||
|
|
color: #E3E3E3;
|
||
|
|
-moz-user-select: -moz-none;
|
||
|
|
-khtml-user-select: none;
|
||
|
|
-webkit-user-select: none;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1
|
||
|
|
{
|
||
|
|
margin-top: 3px;
|
||
|
|
margin-bottom: 17px;
|
||
|
|
text-shadow: 0px 0px 9px #2D2D2D;
|
||
|
|
-moz-text-shadow: 0px 0px 9px #2D2D2D;
|
||
|
|
-o-text-shadow: 0px 0px 9px #2D2D2D;
|
||
|
|
-ms-text-shadow: 0px 0px 9px #2D2D2D;
|
||
|
|
-webkit-text-shadow: 0px 0px 9px #2D2D2D;
|
||
|
|
}
|
||
|
|
|
||
|
|
fieldset
|
||
|
|
{
|
||
|
|
margin-bottom: 12px;
|
||
|
|
padding: 12px;
|
||
|
|
padding-top: 9px;
|
||
|
|
border: 2px solid #656565;
|
||
|
|
box-shadow: 0px 0px 17px #1A1A1A;
|
||
|
|
border-radius: 8px;
|
||
|
|
-moz-border-radius: 8px;
|
||
|
|
-o-border-radius: 8px;
|
||
|
|
-ms-border-radius: 8px;
|
||
|
|
-webkit-border-radius: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
legend
|
||
|
|
{
|
||
|
|
padding: 4px 6px;
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #8C8C8C;
|
||
|
|
background-color: black;
|
||
|
|
box-shadow: 0px 0px 4px black;
|
||
|
|
border-radius: 5px;
|
||
|
|
-moz-border-radius: 5px;
|
||
|
|
-o-border-radius: 5px;
|
||
|
|
-webkit-border-radius: 5px;
|
||
|
|
-ms-border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
label
|
||
|
|
{
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
legend, .button
|
||
|
|
{
|
||
|
|
font-family: 'Armata', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.clear
|
||
|
|
{
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.strong
|
||
|
|
{
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Page layout */
|
||
|
|
|
||
|
|
div.wrapper
|
||
|
|
{
|
||
|
|
width: 900px;
|
||
|
|
margin: 0px auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.main
|
||
|
|
{
|
||
|
|
background-color: black;
|
||
|
|
border: 2px solid #0E0E0E;
|
||
|
|
margin-top: 36px;
|
||
|
|
padding: 18px;
|
||
|
|
box-shadow: 0px 0px 10px #080808;
|
||
|
|
-moz-box-shadow: 0px 0px 10px #080808;
|
||
|
|
-o-box-shadow: 0px 0px 10px #080808;
|
||
|
|
-ms-box-shadow: 0px 0px 10px #080808;
|
||
|
|
-webkit-box-shadow: 0px 0px 10px #080808;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.left-pane
|
||
|
|
{
|
||
|
|
float: left;
|
||
|
|
width: 510px;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.right-pane
|
||
|
|
{
|
||
|
|
float: right;
|
||
|
|
width: 342px;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.inner-pane
|
||
|
|
{
|
||
|
|
padding: 5px 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.form-field
|
||
|
|
{
|
||
|
|
margin-bottom: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
fieldset label
|
||
|
|
{
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
fieldset input, fieldset .colorfield
|
||
|
|
{
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
fieldset .colorfield input
|
||
|
|
{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Preview area */
|
||
|
|
|
||
|
|
textarea#preview
|
||
|
|
{
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
/* width: 40px; */
|
||
|
|
height: 100px;
|
||
|
|
padding: 8px;
|
||
|
|
font-family: 'Asap', sans-serif;
|
||
|
|
font-size: 26px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
-o-box-sizing: border-box;
|
||
|
|
-ms-box-sizing: border-box;
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
background-color: #4E4E4E;
|
||
|
|
color: white;
|
||
|
|
border: 0px;
|
||
|
|
border-collapse: separate;
|
||
|
|
}
|
||
|
|
|
||
|
|
fieldset#fieldset_preview
|
||
|
|
{
|
||
|
|
padding: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Listbox element */
|
||
|
|
.listbox
|
||
|
|
{
|
||
|
|
background-color: #121212;
|
||
|
|
border: 1px solid #212121;
|
||
|
|
height: 250px;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.listbox-item
|
||
|
|
{
|
||
|
|
color: #CACACA;
|
||
|
|
padding: 6px 8px 6px 5px;
|
||
|
|
font-size: 15px;
|
||
|
|
height: 17px;
|
||
|
|
background: #0B0B0C;
|
||
|
|
background: -moz-linear-gradient(top, #0B0B0C 0%, #000000 100%);
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0B0B0C), color-stop(100%,#000000));
|
||
|
|
background: -webkit-linear-gradient(top, #0B0B0C 0%,#000000 100%);
|
||
|
|
background: -o-linear-gradient(top, #0B0B0C 0%,#000000 100%);
|
||
|
|
background: -ms-linear-gradient(top, #0B0B0C 0%,#000000 100%);
|
||
|
|
background: linear-gradient(top, #0B0B0C 0%,#000000 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.listbox-item:hover
|
||
|
|
{
|
||
|
|
color: white;
|
||
|
|
background: #19191c;
|
||
|
|
background: -moz-linear-gradient(top, #19191c 0%, #0F0F0F 100%);
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#19191c), color-stop(100%,#0F0F0F));
|
||
|
|
background: -webkit-linear-gradient(top, #19191c 0%,#0F0F0F 100%);
|
||
|
|
background: -o-linear-gradient(top, #19191c 0%,#0F0F0F 100%);
|
||
|
|
background: -ms-linear-gradient(top, #19191c 0%,#0F0F0F 100%);
|
||
|
|
background: linear-gradient(top, #19191c 0%,#0F0F0F 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.listbox-item.selected
|
||
|
|
{
|
||
|
|
color: white;
|
||
|
|
background: #303038;
|
||
|
|
background: -moz-linear-gradient(top, #303038 0%, #212121 100%);
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303038), color-stop(100%,#212121));
|
||
|
|
background: -webkit-linear-gradient(top, #303038 0%,#212121 100%);
|
||
|
|
background: -o-linear-gradient(top, #303038 0%,#212121 100%);
|
||
|
|
background: -ms-linear-gradient(top, #303038 0%,#212121 100%);
|
||
|
|
background: linear-gradient(top, #303038 0%,#212121 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.listbox-item-placeholder
|
||
|
|
{
|
||
|
|
color: #CACACA;
|
||
|
|
padding: 6px 8px;
|
||
|
|
font-size: 15px;
|
||
|
|
height: 17px;
|
||
|
|
background: #0A0A0A;
|
||
|
|
}
|
||
|
|
|
||
|
|
.listbox-header
|
||
|
|
{
|
||
|
|
margin-top: 10px;
|
||
|
|
margin-left: 5px;
|
||
|
|
margin-bottom: 2px;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
a.listbox-button
|
||
|
|
{
|
||
|
|
display: block;
|
||
|
|
float: left;
|
||
|
|
padding: 7px 0px;
|
||
|
|
width: 50%;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #CACACA;
|
||
|
|
text-decoration: none;
|
||
|
|
background: #101011;
|
||
|
|
background: -moz-linear-gradient(top, #101011 0%, #000000 100%);
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#101011), color-stop(100%,#000000));
|
||
|
|
background: -webkit-linear-gradient(top, #101011 0%,#000000 100%);
|
||
|
|
background: -o-linear-gradient(top, #101011 0%,#000000 100%);
|
||
|
|
background: -ms-linear-gradient(top, #101011 0%,#000000 100%);
|
||
|
|
background: linear-gradient(top, #101011 0%,#000000 100%);
|
||
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#101011', endColorstr='#000000',GradientType=0 );
|
||
|
|
}
|
||
|
|
|
||
|
|
a.listbox-button:hover, a.listbox-button:active
|
||
|
|
{
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
a.listbox-button:hover
|
||
|
|
{
|
||
|
|
background: #181819;
|
||
|
|
background: -moz-linear-gradient(top, #181819 0%, #000000 100%);
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#181819), color-stop(100%,#000000));
|
||
|
|
background: -webkit-linear-gradient(top, #181819 0%,#000000 100%);
|
||
|
|
background: -o-linear-gradient(top, #181819 0%,#000000 100%);
|
||
|
|
background: -ms-linear-gradient(top, #181819 0%,#000000 100%);
|
||
|
|
background: linear-gradient(top, #181819 0%,#000000 100%);
|
||
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#181819', endColorstr='#000000',GradientType=0 );
|
||
|
|
}
|
||
|
|
|
||
|
|
a.listbox-button:active
|
||
|
|
{
|
||
|
|
background: #2e2e30;
|
||
|
|
background: -moz-linear-gradient(top, #2e2e30 0%, #0f0f0f 100%);
|
||
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e2e30), color-stop(100%,#0f0f0f));
|
||
|
|
background: -webkit-linear-gradient(top, #2e2e30 0%,#0f0f0f 100%);
|
||
|
|
background: -o-linear-gradient(top, #2e2e30 0%,#0f0f0f 100%);
|
||
|
|
background: -ms-linear-gradient(top, #2e2e30 0%,#0f0f0f 100%);
|
||
|
|
background: linear-gradient(top, #2e2e30 0%,#0f0f0f 100%);
|
||
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e2e30', endColorstr='#0f0f0f',GradientType=0 );
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Color picker button */
|
||
|
|
|
||
|
|
.colorbutton
|
||
|
|
{
|
||
|
|
background-image: url(../images/select5.png);
|
||
|
|
background-position: -1px -2px;
|
||
|
|
border: 1px solid #DEDEDE;
|
||
|
|
border-radius: 5px;
|
||
|
|
-moz-border-radius: 5px;
|
||
|
|
-o-border-radius: 5px;
|
||
|
|
-ms-border-radius: 5px;
|
||
|
|
-webkit-border-radius: 5px;
|
||
|
|
width: 21px;
|
||
|
|
height: 21px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Form layout */
|
||
|
|
|
||
|
|
.form-element
|
||
|
|
{
|
||
|
|
margin-bottom: 7px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-field
|
||
|
|
{
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Top menu */
|
||
|
|
|
||
|
|
.header h1
|
||
|
|
{
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-buttons
|
||
|
|
{
|
||
|
|
float: right;
|
||
|
|
margin-top: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-buttons a
|
||
|
|
{
|
||
|
|
display: block;
|
||
|
|
float: left;
|
||
|
|
border: 1px solid gray;
|
||
|
|
border-left: 0px;
|
||
|
|
padding: 10px 13px;
|
||
|
|
text-decoration: none;
|
||
|
|
color: #E3E3E3;
|
||
|
|
font-size: 15px;
|
||
|
|
transition-property:color, background-color;
|
||
|
|
transition-duration: .15s, .15s;
|
||
|
|
transition-timing-function: ease-in-out, ease-in-out;
|
||
|
|
-moz-transition-property:color, background-color;
|
||
|
|
-moz-transition-duration: .15s, .15s;
|
||
|
|
-moz-transition-timing-function: ease-in-out, ease-in-out;
|
||
|
|
-webkit-transition-property:color, background-color;
|
||
|
|
-webkit-transition-duration: .15s, .15s;
|
||
|
|
-webkit-transition-timing-function: ease-in-out, ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-buttons a:hover
|
||
|
|
{
|
||
|
|
color: white;
|
||
|
|
background-color: #171717;
|
||
|
|
transition-property:color, background-color;
|
||
|
|
transition-duration: .15s, .15s;
|
||
|
|
transition-timing-function: ease-in-outl, ease-in-out;
|
||
|
|
-moz-transition-property:color, background-color;
|
||
|
|
-moz-transition-duration: .15s, .15s;
|
||
|
|
-moz-transition-timing-function: ease-in-out, ease-in-out;
|
||
|
|
-webkit-transition-property:color, background-color;
|
||
|
|
-webkit-transition-duration: .15s, .15s;
|
||
|
|
-webkit-transition-timing-function: ease-in-out, ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-buttons a:first-child
|
||
|
|
{
|
||
|
|
border-left: 1px solid gray;
|
||
|
|
border-radius: 20px 0px 0px 20px;
|
||
|
|
-moz-border-radius: 20px 0px 0px 20px;
|
||
|
|
-o-border-radius: 20px 0px 0px 20px;
|
||
|
|
-ms-border-radius: 20px 0px 0px 20px;
|
||
|
|
-webkit-border-radius: 20px 0px 0px 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-buttons a:nth-last-child(2)
|
||
|
|
{
|
||
|
|
border-radius: 0px 20px 20px 0px;
|
||
|
|
-moz-border-radius: 0px 20px 20px 0px;
|
||
|
|
-o-border-radius: 0px 20px 20px 0px;
|
||
|
|
-ms-border-radius: 0px 20px 20px 0px;
|
||
|
|
-webkit-border-radius: 0px 20px 20px 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Special */
|
||
|
|
|
||
|
|
.layer-id
|
||
|
|
{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tools
|
||
|
|
{
|
||
|
|
margin: 1px;
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tools img
|
||
|
|
{
|
||
|
|
margin-left: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#settings label
|
||
|
|
{
|
||
|
|
margin-top: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#settings label.buttonset
|
||
|
|
{
|
||
|
|
margin-top: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slider, .slider-negative
|
||
|
|
{
|
||
|
|
width: 180px;
|
||
|
|
margin-top: 6px;
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slider-field input
|
||
|
|
{
|
||
|
|
width: 30px;
|
||
|
|
margin-left: 12px;
|
||
|
|
float: right;
|
||
|
|
background-color: black;
|
||
|
|
border: 1px solid #212121;
|
||
|
|
color: white;
|
||
|
|
font-size: 12px;
|
||
|
|
padding: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Dialogs */
|
||
|
|
|
||
|
|
#dialog_confirm_deletion, #dialog_code, #dialog_save, #dialog_load, #dialog_rename, #dialog_confirm_clear, #dialog_presets
|
||
|
|
{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#dialog_code, #dialog_save, #dialog_load, #dialog_rename
|
||
|
|
{
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#dialog_code textarea, #dialog_save textarea, #dialog_load textarea
|
||
|
|
{
|
||
|
|
height: 180px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#dialog_code textarea, #dialog_save textarea, #dialog_load textarea, #dialog_rename input
|
||
|
|
{
|
||
|
|
width: 450px;
|
||
|
|
background-color: black;
|
||
|
|
border: 1px solid #212121;
|
||
|
|
color: white;
|
||
|
|
padding: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#dialog_presets ul
|
||
|
|
{
|
||
|
|
list-style-type: none;
|
||
|
|
margin: 0px;
|
||
|
|
padding: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#dialog_presets li
|
||
|
|
{
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
padding: 14px;
|
||
|
|
margin: 7px;
|
||
|
|
overflow: hidden;
|
||
|
|
float: left;
|
||
|
|
background-color: #232323;
|
||
|
|
border: 1px solid transparent;
|
||
|
|
font-size: 42px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#dialog_presets li:hover
|
||
|
|
{
|
||
|
|
border: 1px solid silver;
|
||
|
|
}
|
||
|
|
|
||
|
|
#dialog_presets li .preset-test
|
||
|
|
{
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
margin: 5px;
|
||
|
|
background-color: black;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 36px;
|
||
|
|
padding: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Sortables */
|
||
|
|
|
||
|
|
.sortable
|
||
|
|
{
|
||
|
|
list-style-type: none;
|
||
|
|
margin: 0px;
|
||
|
|
padding: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sortable li
|
||
|
|
{
|
||
|
|
margin: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#fieldset_settings
|
||
|
|
{
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
#start_arrow
|
||
|
|
{
|
||
|
|
position: absolute;
|
||
|
|
left: 235px;
|
||
|
|
top: 135px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hacks */
|
||
|
|
|
||
|
|
.colorpicker_submit
|
||
|
|
{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.handle
|
||
|
|
{
|
||
|
|
float: left;
|
||
|
|
margin-right: 3px;
|
||
|
|
margin-top: 1px;
|
||
|
|
}
|