svgedit/editor/svg-editor.css

1461 lines
24 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

body {
background: #D0D0D0;
}
html, body, div{
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
/* this will work for QtWebKit in future */
-webkit-user-drag: text;
}
#svg_editor * {
transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
#svg_editor {
font-size: 8pt;
font-family: Verdana, Helvetica, Arial;
color: #000000;
}
a {
color: #19c;
}
hr {
border: none;
border-bottom: 1px solid #808080;
}
select {
margin-top: 4px;
}
#svgroot {
-moz-user-select: none;
-webkit-user-select: none;
position: absolute;
top: 0;
left: 0;
}
#svgcanvas {
line-height: normal;
display: inline-block;
background-color: #A0A0A0;
text-align: center;
vertical-align: middle;
width: 640px;
height: 480px;
-apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px); /* for widget regions that shouldn't react to dragging */
position: relative;
/*
A subtle gradient effect in the canvas.
Just experimenting - not sure if this is worth it.
*/
background: -moz-radial-gradient(45deg,#bbb,#222);
background: -webkit-gradient(radial, center center, 3, center center, 1000, from(#bbb), to(#222));
}
/* Rulers
——————————————————————————————————————*/
#rulers > div {
position: absolute;
background: #DDD;
z-index: 1;
overflow: hidden;
}
#ruler_corner {
top: 41px;
left: 41px;
width: 15px;
height: 15px;
}
#ruler_x {
height: 15px;
top: 41px;
left: 56px;
right: 30px;
border-bottom: 1px solid;
border-left: 1px solid #777;
}
#ruler_y {
width: 15px;
top: 55px;
left: 41px;
bottom: 56px;
border-right: 1px solid;
border-top: 1px solid #777;
}
#ruler_x canvas:first-child {
margin-left: -16px;
}
#ruler_x canvas {
float: left;
}
#ruler_y canvas {
margin-top: -16px;
}
#ruler_x > div,
#ruler_y > div {
overflow: hidden;
}
#palette_holder {
overflow: hidden;
margin-top: 5px;
padding: 5px;
position: absolute;
right: 15px;
height: 16px;
background: #f0f0f0;
border-radius: 3px;
z-index: 2;
}
#stroke_bg,
#fill_bg {
height: 16px;
width: 16px;
margin: 1px;
}
#zoomLabel {
cursor: pointer;
margin-right: 5px;
padding-top: 4px
}
#linkLabel > svg {
height: 20px;
padding-top: 4px;
}
#palette {
float: left;
width: 632px;
height: 16px;
}
#workarea {
display: inline-table-cell;
position:absolute;
top: 40px;
left: 40px;
bottom: 40px;
right: 14px;
background-color: #A0A0A0;
border: 1px solid #808080;
overflow: auto;
text-align: center;
}
#sidepanels {
display: inline-block;
position:absolute;
top: 40px;
bottom: 40px;
right: 0;
width: 2px;
padding: 10px;
border-color: #808080;
border-style: solid;
border-width: 1px;
border-left: none;
overflow-x:hidden;
overflow-y:visible;
}
#layerpanel {
display: inline-block;
position:relative;
top: 0px;
bottom: 0;
left: 12px;
width: 0;
overflow: hidden;
margin: 0;
-moz-user-select: none;
-webkit-user-select: none;
}
/*
border-style: solid;
border-color: #666;
border-width: 0px 0px 0px 1px;
*/
#sidepanel_handle {
display: inline-block;
position: absolute;
background-color: #D0D0D0;
font-weight: bold;
left: 0;
top: 40%;
width: 1em;
padding: 5px 1px 5px 5px;
margin-left: 3px;
cursor: pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-user-select: none;
-webkit-user-select: none;
}
#sidepanel_handle:hover {
font-weight: bold;
}
#sidepanel_handle * {
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
}
#layerbuttons {
margin: 0;
padding: 0;
padding-left: 2px;
padding-right: 2px;
width: 125px;
height: 20px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #808080;
border-top: 1px solid #808080;
overflow: hidden;
}
.layer_button {
width: 14px;
height: 14px;
padding: 1px;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
cursor: pointer;
float: left;
margin-right: 3px;
}
.layer_button:last-child {
margin-right: 0;
}
.layer_buttonpressed {
width: 14px;
height: 14px;
padding: 1px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #808080;
border-top: 1px solid #808080;
cursor: pointer;
}
#layerlist {
margin: 1px;
padding: 0;
width: 127px;
border-collapse: collapse;
border: 1px solid #808080;
background-color: #FFFFFF;
}
#layerlist tr.layer {
background-color: #FFFFFF;
margin: 0;
padding: 0;
}
#layerlist tr.layersel {
border: 1px solid #808080;
background-color: #CCCCCC;
}
#layerlist td.layervis {
width: 22px;
cursor: pointer;
}
#layerlist td.layerinvis {
background-image: none;
cursor: pointer;
}
#layerlist td.layervis * {
display: block;
}
#layerlist td.layerinvis * {
display: none;
}
#layerlist td.layername {
cursor: pointer;
}
#layerlist td.layername:hover {
color: blue;
font-style: italic;
}
#layerlist tr.layersel td.layername {
font-weight: bold;
}
#selLayerLabel {
white-space: nowrap;
}
#selLayerNames {
display: block;
}
div.palette_item {
height: 15px;
width: 15px;
float: left;
}
div.palette_item:first-child {
background: white;
}
/* Main button
—————————————————————————————*/
#main_button {
position: absolute;
top: 4px;
left: 5px;
z-index: 5;
}
#main_icon {
position: relative;
top: -2px;
left: -2px;
width: 95px;
line-height: 26px;
}
#main_icon:hover {
background: #eee !important;
}
#main_icon.buttondown {
background: #eee !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border-radius: 3px 3px 0 0;
}
#logo {
margin-top: -2px;
}
#logo img {
border: 0;
width: 28px;
height: 28px;
}
#main_icon > div {
float: left;
}
#main_button .dropdown {
position: absolute;
right: 7px;
top: 4px;
}
#main_icon span {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: block;
z-index: 2;
font-weight: bold;
padding-left: 34px;
line-height: 32px;
font-family: sans-serif;
}
#main_menu {
z-index: 12;
background: #eee;
position: relative;
width: 230px;
padding: 5px;
-moz-box-shadow: #555 1px 1px 4px;
-webkit-box-shadow: #555 1px 1px 4px;
box-shadow: #555 1px 1px 4px;
font-size: 1.1em;
display: none;
overflow: hidden;
clear: both;
top: -9px;
}
#main_menu ul,
#main_menu li {
list-style: none;
margin: 0;
padding: 0;
}
#main_menu li {
/* height: 35px;*/
line-height: 22px;
padding-top: 7px;
padding-left: 7px;
margin: -5px;
overflow: auto;
cursor: default;
}
#main_menu li:hover {
background: #FFC;
}
#main_menu li > div {
float: left;
padding-right: 5px;
}
#main_menu p {
margin-top: 5px;
}
/*—————————————————————————————*/
.tool_button:hover,
.push_button:hover,
.buttonup:hover,
.buttondown,
.tool_button_current,
.push_button_pressed
{
background-color: #ffc !important;
}
.tool_button_current,
.push_button_pressed,
.buttondown {
background-color: #f4e284 !important;
-webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
-moz-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4), 1px 1px 0 white !important;
}
#tools_top {
position: absolute;
left: 108px;
right: 2px;
top: 2px;
height: 40px;
border-bottom: none;
overflow: auto;
}
#tools_top .tool_sep {
margin-top: 5px;
}
#tools_left {
position: absolute;
border-right: none;
width: 32px;
top: 40px;
left: 1px;
margin-top: -2px;
padding-left: 2px;
background: #D0D0D0; /* Needed so flyout icons don't appear on the left */
z-index: 4;
}
#workarea.wireframe #svgcontent * {
fill: none;
stroke: #000;
stroke-width: 1px;
stroke-opacity: 1.0;
stroke-dasharray: 0;
opacity: 1;
pointer-events: stroke;
vector-effect: non-scaling-stroke;
filter: none;
}
#workarea.wireframe #svgcontent text {
fill: #000;
stroke: none;
}
#workarea.wireframe #canvasBackground > rect {
fill: #FFF !important;
}
#tools_top div[id$="_panel"]:not(#editor_panel):not(#history_panel) {
display: none;
}
#editor_panel, #history_panel {
height: 34px;
float: left;
}
#multiselected_panel .selected_tool {
vertical-align: 12px;
}
/*TODO: Adjust position of rulers are not visible*/
#cur_context_panel {
position: absolute;
top: 57px;
left: 56px;
line-height: 22px;
overflow: auto;
padding-left: 5px;
font-size: 12px;
background: rgba(0, 0, 0, 0.8);
color: #ccc;
padding: 0 10px;
border-radius: 0 0 3px 0;
}
#cur_context_panel a {
float: none;
text-decoration: none;
}
#cur_context_panel a:hover {
text-decoration: underline;
}
#tools_top > div, #tools_top {
line-height: 26px;
}
div.toolset,
div.toolset > * {
float: left;
}
div.toolset {
height: 34px;
}
div.toolset label span {
/* outline: 1px solid red;*/
padding-top: 3px;
display: inline-block;
}
#tools_top > div > * {
float: left;
margin-right: 2px;
}
#tools_top label {
margin-top: 0;
margin-left: 5px;
}
#tools_top input {
margin-top: 5px;
height: 15px;
}
input[type=text] {
padding: 2px;
}
#tools_left .tool_button,
#tools_left .tool_button_current {
position: relative;
z-index: 11;
}
.flyout_arrow_horiz {
position: absolute;
bottom: -1px;
right: 0;
z-index: 10;
}
span.zoom_tool {
line-height: 26px;
padding: 3px;
}
#zoom_panel {
margin-top: 5px;
}
.dropdown {
position: relative;
}
.dropdown button {
width: 15px;
height: 21px;
margin: 6px 0 0 1px;
padding: 0;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
background-color: #E8E8E8;
}
.dropdown button.down {
border-left: 1px solid #808080;
border-top: 1px solid #808080;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
background-color: #B0B0B0;
}
.dropdown ul {
list-style: none;
position: absolute;
margin: 0;
padding: 0;
left: -85px;
top: 26px;
z-index: 4;
display: none;
}
.dropup ul {
top: auto;
bottom: 24px;
}
.dropdown li {
display: block;
width: 120px;
padding: 4px;
background: #E8E8E8;
border: 1px solid #B0B0B0;
margin: 0 0 -1px 0;
line-height: 16px;
}
.dropdown li:hover {
background-color: #FFC;
}
.dropdown li.special {
padding: 10px 4px;
}
.dropdown li.special:hover {
background: #FFC;
}
#font_family_dropdown-list li {
font-size: 1.4em;
}
#font_family {
margin-left: 5px;
margin-right: 0;
}
.tool_button,
.push_button,
.tool_button_current,
.push_button_pressed
{
height: 24px;
width: 24px;
margin: 2px 2px 4px 2px;
padding: 3px;
-webkit-box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
moz-box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
box-shadow: inset 1px 1px 2px white, 1px 1px 1px rgba(0,0,0,0.3);
background-color: #E8E8E8;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#main_menu li#tool_open, #main_menu li#tool_import {
position: relative;
overflow: hidden;
}
#tool_image {
overflow: hidden;
}
#tool_open input,
#tool_import input,
#tool_image input {
position: absolute;
opacity: 0;
font-size: 10em;
top: -5px;
right: -5px;
margin: 0;
cursor: pointer; /* Sadly doesn't appear to have an effect */
}
.disabled {
opacity: 0.5;
cursor: default;
}
.tool_sep {
width: 1px;
background: #888;
border-left: 1px outset #EEE;
margin: 2px 3px;
padding: 0;
height: 24px;
}
.icon_label {
float: left;
padding-top: 3px;
padding-right: 3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
height: 0;
}
.width_label {
padding-right: 5px;
}
#tool_bold, #tool_italic {
font: bold 2.1em/1.1em serif;
text-align: center;
padding-left: 2px;
position: relative;
}
#text {
position: absolute;
left: -9999px;
}
#tool_bold span, #tool_italic span {
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
background: #000;
opacity: 0;
}
#tool_italic {
font-weight: normal;
font-style: italic;
}
#url_notice {
padding-top: 4px;
display: none;
}
#color_picker {
position: absolute;
display: none;
background: #E8E8E8;
height: 350px;
z-index: 5;
}
.tools_flyout {
position: absolute;
display: none;
cursor: pointer;
width: 400px;
z-index: 1;
}
.tools_flyout_v {
position: absolute;
display: none;
cursor: pointer;
width: 30px;
}
.tools_flyout .tool_button {
float: left;
background-color: #E8E8E8;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
height: 28px;
width: 28px;
}
#tools_bottom {
position: absolute;
left: 40px;
right: 0;
bottom: 0;
height: 40px;
overflow: visible;
}
#tools_bottom_1 {
width: 115px;
float: left;
}
#tools_bottom input[type=text] {
width: 2.2em;
}
/* Color tools: fill, stroke, opacity
*/
#tools_bottom_2 {
float: left;
width: 300px;
position: relative;
margin-top: 5px;
-webkit-transition: width 150ms ease;
}
.expanded #tools_bottom_2 {
width: 450px;
}
#tools_bottom #tools_bottom_2 .dropdown button {
margin-top: 2px;
}
.dropdown li.tool_button {
width: 24px;
}
#tools_bottom_2 .icon_label {
display: block;
margin: 3px 5px;
padding: 0;
}
#tool_opacity { right: 0;}
#tool_fill { left: 0; }
#tool_stroke { left: 60px;}
#fill_color, #stroke_color {
height: 16px;
width: 16px;
border: 1px solid #808080;
cursor: pointer;
overflow: hidden;
}
#stroke_expand {
width: 0;
overflow: hidden;
}
#toggle_stroke_tools {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 25px;
text-align: center;
border-radius: 0 3px 3px 0;
margin: 0;
}
#toggle_stroke_tools:before {
content: '>>';
letter-spacing: -3px;
font-weight: bold;
color: #666;
}
.expanded #tool_stroke.color_tool {
width: 280px;
}
.expanded #toggle_stroke_tools:before {
content: '<<';
}
#toggle_stroke_tools:hover {
background: white;
}
.color_tool {
position: absolute;
overflow: hidden;
background: #f0f0f0;
height: 26px;
line-height: 26px;
border-radius: 3px;
min-width: 52px;
}
#tool_stroke.color_tool {
width: 130px;
z-index: 2;
-webkit-transition: width 150ms ease;
-moz-transition: width 150ms ease;
-o-transition: width 150ms ease;
-ms-transition: width 150ms ease;
transition: width 150ms ease;
}
.color_block {
position: absolute;
top: 0;
left: 0;
}
.color_block svg {
display: block;
}
.color_tool > * {
float: left;
margin-right: 5px;
}
.color_tool .dropdown > * {
float: left;
}
.color_tool .stroke_label {
margin-left: 25px;
float: left;
}
.color_tool > .color_block {
top: 3px;
left: 29px;
}
.color_tool input {
margin: 0;
}
#tool_opacity {
overflow: visible;
}
@media screen and (max-width:1250px) {
.expanded #palette_holder {
left: 560px;
overflow-x: scroll;
padding: 0 5px;
margin-top: 2px;
height: 30px;
}
#tools_top {
height: 71px;
}
#workarea, #sidepanels {
top: 70px;
}
#rulers #ruler_corner,
#rulers #ruler_x, #tools_left {
top: 71px;
}
#rulers #ruler_y {
top: 86px;
}
#cur_context_panel {
top: 87px;
}
#selected_panel {
clear: right;
}
}
@media screen and (max-width:1100px) {
#tools_bottom:not(.expanded) #palette_holder {
left: 410px;
overflow-x: scroll;
padding: 0 5px;
margin-top: 2px;
height: 30px;
}
}
/**/
#option_lists ul {
display: none;
position: absolute;
height: auto;
z-index: 3;
margin: -10px;
list-style: none;
padding-left: 0;
}
#option_lists .optcols2 {
width: 70px;
margin-left: -15px;
}
#option_lists .optcols3 {
width: 90px;
margin-left: -31px;
}
#option_lists .optcols4 {
width: 130px;
margin-left: -44px;
}
#option_lists ul[class^=optcols] li {
float: left;
}
ul li.current {
background-color: #F4E284;
}
#option_lists ul li {
margin: 0;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#tools_bottom .dropdown button {
margin-top: 2px;
}
#opacity_dropdown li {
width: 140px;
}
#copyright {
text-align: right;
padding-right: .3em;
}
#svg_source_editor {
display: none;
}
.overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 5;
}
#svg_source_editor #svg_source_container {
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
background-color: #B0B0B0;
opacity: 1.0;
text-align: center;
border: 1px outset #777;
z-index: 6;
}
#save_output_btns {
display: none;
text-align: left;
}
#save_output_btns p {
margin: .5em 1.5em;
display: inline-block;
}
#bg_blocks {
overflow: auto;
margin-left: 30px;
}
#bg_blocks .color_block {
position: static;
}
#svg_docprops #svg_docprops_container,
#svg_prefs #svg_prefs_container {
position: absolute;
top: 50px;
padding: 10px;
background-color: #B0B0B0;
border: 1px outset #777;
opacity: 1.0;
/* width: 450px;*/
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;
z-index: 20001;
}
#svg_docprops .error {
border: 1px solid red;
padding: 3px;
}
#svg_docprops #resolution {
max-width: 14em;
}
#tool_docprops_back,
#tool_prefs_back {
margin-left: 1em;
overflow: auto;
}
#svg_docprops_container #svg_docprops_docprops,
#svg_prefs #svg_docprops_prefs {
float: left;
width: 221px;
margin: 5px .7em;
overflow: hidden;
}
#svg_prefs_container fieldset + fieldset {
float: right;
}
#svg_docprops legend,
#svg_prefs legend {
max-width: 195px;
}
#svg_docprops_docprops > legend,
#svg_prefs_container > fieldset > legend {
font-weight: bold;
font-size: 1.1em;
}
#svg_docprops_container fieldset,
#svg_prefs fieldset {
padding: 5px;
margin: 5px;
border: 1px solid #DDD;
}
#svg_docprops_container label,
#svg_prefs_container label {
display: block;
margin: .5em;
}
#svginfo_bg_note {
font-size: .9em;
font-style: italic;
color: #444;
}
#canvas_title, #canvas_bg_url {
display: block;
width: 96%;
}
#svg_source_editor form {
position: absolute;
top: 40px;
bottom: 30px;
width: 100%;
}
#svg_source_editor #svg_source_textarea {
position: relative;
width: 95%;
height: 95%;
padding: 5px;
font-size: 12px;
}
#svg_source_editor #tool_source_back {
text-align: left;
padding-left: 20px;
}
#svg_prefs_container div.color_block {
float: left;
margin: 2px;
padding: 20px;
}
#change_background div.cur_background {
border: 2px solid blue;
padding: 18px;
}
#background_img {
position: absolute;
top: 0;
left: 0;
text-align: left;
}
#svg_docprops button,
#svg_prefs button {
margin-top: 0;
margin-bottom: 5px;
}
#svg_docprops,
#svg_prefs {
display: none;
}
#image_save_opts label {
font-size: .9em;
}
#image_save_opts input {
margin-left: 0;
}
#tool_prefs_option {
float: right;
}
.toolbar_button button {
border:1px solid #dedede;
line-height:130%;
float: left;
background: #E8E8E8 none;
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
margin: 5px 20px 0 0;
border: 1px #808080 solid;
border-top-color: #FFF;
border-left-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.toolbar_button button:hover {
border: 1px #e0a874 solid;
border-top-color: #fcd9ba;
border-left-color: #fcd9ba;
background-color: #FFC;
}
.toolbar_button button:active {
background-color: #F4E284;
border-left: 1px solid #663300;
border-top: 1px solid #663300;
}
.toolbar_button button .svg_icon {
margin: 0 3px -3px 0 !important;
padding: 0;
border: none;
width: 16px;
height: 16px;
}
#dialog_box {
display: none;
}
#dialog_content {
height: 95px;
margin: 10px 10px 5px 10px;
background: #DDD;
overflow: auto;
text-align: left;
border: 1px solid #B0B0B0;
}
#dialog_content.prompt {
height: 75px;
}
#dialog_content p {
margin: 10px;
line-height: 1.3em;
}
#dialog_container {
position: absolute;
font-family: Verdana;
text-align: center;
left: 50%;
top: 50%;
width: 300px;
margin-left: -150px;
height: 150px;
margin-top: -80px;
position: fixed;
z-index: 50001;
background: #CCC;
border: 1px outset #777;
font-family:Verdana,Helvetica,sans-serif;
font-size:0.8em;
}
#dialog_container, #dialog_content {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#dialog_buttons input[type=text] {
width: 90%;
display: block;
margin: 0 0 5px 11px;
}
#dialog_buttons input[type=button] {
margin: 0 1em;
}
/* Slider
----------------------------------*/
.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; }
.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; }
.ui-slider {
border: 1px solid #B0B0B0;
}
.ui-slider-handle {
background: #B0B0B0;
border: 1px solid #000;
}
/* Necessary to keep the flyouts sized properly */
.tools_flyout .tool_button,
.tools_flyout .tool_flyout {
padding: 2px;
width: 24px;
height: 24px;
margin: 0;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
/* Generic context menu styles */
.contextMenu {
position: absolute;
z-index: 99999;
border: solid 1px rgba(0,0,0,.33);
background: rgba(255,255,255,.95);
padding: 5px 0;
margin: 0px;
display: none;
font: 12px/15px Lucida Sans, Helvetica, Verdana, sans-serif;
border-radius: 5px;
-moz-border-radius: 5px;
-moz-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
-webkit-box-shadow: 2px 5px 10px rgba(0,0,0,.3);
box-shadow: 2px 5px 10px rgba(0,0,0,.3);
}
.contextMenu LI {
list-style: none;
padding: 0px;
margin: 0px;
}
.contextMenu .shortcut {
width: 115px;
text-align:right;
float:right;
}
.contextMenu A {
-moz-user-select: none;
-webkit-user-select: none;
color: #222;
text-decoration: none;
display: block;
line-height: 20px;
height: 20px;
background-position: 6px center;
background-repeat: no-repeat;
outline: none;
padding: 0px 15px 1px 20px;
}
.contextMenu LI.hover A {
background-color: #2e5dea;
color: white;
cursor: default;
}
.contextMenu LI.disabled A {
color: #999;
}
.contextMenu LI.hover.disabled A {
background-color: transparent;
}
.contextMenu LI.separator {
border-top: solid 1px #E3E3E3;
padding-top: 5px;
margin-top: 5px;
}
/*
Adding Icons
You can add icons to the context menu by adding
classes to the respective LI element(s)
*/
/*
.contextMenu LI.edit A { background-image: url(images/page_white_edit.png); }
.contextMenu LI.cut A { background-image: url(images/cut.png); }
.contextMenu LI.copy A { background-image: url(images/page_white_copy.png); }
.contextMenu LI.paste A { background-image: url(images/page_white_paste.png); }
.contextMenu LI.delete A { background-image: url(images/page_white_delete.png); }
.contextMenu LI.quit A { background-image: url(images/door.png); }
*/