instiki/public/svg-edit/editor/svg-editor.css
Jacques Distler 08cd194330 Restore line-height fix for foreignObjects
Line-height is inherited, and the setting in SVG-Edit
ever-so-slightly screws up foreignObject (the bounding box
is not where it should be. This can be fixed in the CSS
(and was, till the great migration to the extensions folder).
2010-02-17 15:44:53 -06:00

962 lines
16 KiB
CSS

body {
background: #D8D8D8;
}
#svg_editor {
font-size: 8pt;
font-family: Verdana, Helvetica, Arial;
color: #000000;
}
#svg_editor a {
color: #0000FF;
}
#svg_editor hr {
border: none;
border-bottom: 1px solid #808080;
}
#svg_editor select {
margin-top: 4px;
}
#svg_editor #svgroot {
-moz-user-select: none;
position: absolute;
top: 0;
left: 0;
}
#svg_editor #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));
}
#svg_editor div#palette_holder {
overflow-x: scroll;
overflow-y: hidden;
height: 31px;
border: 1px solid #808080;
border-top: none;
margin-top: 2px;
}
#svg_editor #stroke_bg,
#svg_editor #fill_bg {
height: 16px;
width: 16px;
margin: 2px;
}
#svg_editor #fill_color, #svg_editor #stroke_color {
height: 16px;
width: 16px;
border: 1px solid #808080;
cursor: pointer;
margin-top: -19px;
margin-left: 1px;
}
#svg_editor div#palette {
float: left;
width: 6848px;
height: 16px;
}
#svg_editor div#workarea {
display: inline-table-cell;
position:absolute;
top: 75px;
left: 40px;
bottom: 60px;
right: 14px;
background-color: #A0A0A0;
border: 1px solid #808080;
overflow: auto;
text-align: center;
}
#svg_editor #sidepanels {
display: inline-block;
position:absolute;
top: 75px;
bottom: 60px;
right: 0px;
width: 2px;
padding: 10px;
border-color: #808080;
border-style: solid;
border-width: 1px;
border-left: none;
}
#svg_editor #layerpanel {
display: inline-block;
position:absolute;
top: 1px;
bottom: 0px;
right: 0px;
width: 0px;
overflow: hidden;
margin: 0px;
}
/*
border-style: solid;
border-color: #666;
border-width: 0px 0px 0px 1px;
*/
#svg_editor #sidepanel_handle {
display: inline-block;
position: absolute;
background-color: #D8D8D8;
font-weight: bold;
left: 0px;
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;
}
#svg_editor #sidepanel_handle:hover {
font-weight: bold;
}
#svg_editor #sidepanel_handle * {
cursor: pointer;
-moz-user-select: none;
}
#svg_editor #layerbuttons {
margin: 0px;
padding: 0px;
padding-left: 2px;
padding-right: 2px;
width: 106px;
height: 20px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #808080;
border-top: 1px solid #808080;
overflow: auto;
}
#svg_editor .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;
}
#svg_editor .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;
}
#svg_editor #layerlist {
margin: 1px;
padding: 0px;
width: 110px;
border-collapse: collapse;
border: 1px solid #808080;
background-color: #FFFFFF;
}
#svg_editor #layerlist tr.layer {
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#svg_editor #layerlist tr.layersel {
border: 1px solid #808080;
background-color: #CCCCCC;
}
#svg_editor #layerlist td.layervis {
width: 22px;
cursor:pointer;
}
#svg_editor #layerlist td.layerinvis {
background-image: none;
cursor:pointer;
}
#svg_editor #layerlist td.layervis * {
display: block;
}
#svg_editor #layerlist td.layerinvis * {
display: none;
}
#svg_editor #layerlist td.layername {
cursor: pointer;
}
#svg_editor #layerlist tr.layersel td.layername {
font-weight: bold;
}
#svg_editor #selLayerLabel {
white-space: nowrap;
}
#svg_editor #selLayerNames {
display: block;
}
#svg_editor div.palette_item {
height: 16px;
width: 16px;
float: left;
}
#svg_editor #main_button {
position: absolute;
top: 4px;
left: 4px;
}
#svg_editor #main_icon {
background: #E8E8E8;
position: relative;
top: -2px;
left: -2px;
padding: 1px 0 2px 1px;
width: 44px;
height: 30px;
border-left: 1px solid #FFF;
border-top: 1px solid #FFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
#svg_editor .tool_button:hover,
#svg_editor .push_button:hover,
#svg_editor .buttonup:hover,
#svg_editor .buttondown,
#svg_editor .tool_button_current,
#svg_editor .push_button_pressed
{
border-left: 1px #fcd9ba solid !important;
border-top: 1px #fcd9ba solid !important;
border-right: 1px #e0a874 solid !important;
border-bottom: 1px #e0a874 solid !important;
background-color: #FFC !important;
}
#svg_editor .tool_button_current,
#svg_editor .push_button_pressed,
#svg_editor .buttondown {
background-color: #f4e284 !important;
border-top: 1px solid #630 !important;
border-left: 1px solid #630 !important;
}
#svg_editor #main_icon span {
position: absolute;
width: 100%;
height: 100%;
display: block;
z-index: 2;
}
#svg_editor #main_menu {
z-index: 12;
background: #E8E8E8;
position: relative;
width: 200px;
padding: 5px;
-moz-box-shadow: #555 1px 1px 4px;
-webkit-box-shadow: #555 1px 1px 4px;
font-size: 1.1em;
display: none;
overflow: hidden;
border: 1px outset gray;
clear: both;
}
#svg_editor #main_menu ul,
#svg_editor #main_menu li {
list-style: none;
margin: 0;
padding: 0;
}
#svg_editor #main_menu li {
/* height: 35px;*/
line-height: 22px;
padding-top: 7px;
padding-left: 7px;
margin: -5px;
overflow: auto;
cursor: default;
}
#svg_editor #main_menu li:hover {
background: #FFC;
}
#svg_editor #main_menu li > div {
float: left;
padding-right: 5px;
}
#svg_editor #main_menu p {
margin-top: 5px;
}
#svg_editor #logo img {
border: 0;
width: 32px;
height: 32px;
}
#main_icon > div {
float: left;
}
#svg_editor #main_button .dropdown {
padding-top: 28%;
margin-left: -1px;
}
#svg_editor #tools_top {
position: absolute;
left: 50px;
right: 2px;
top: 2px;
height: 72px;
border-bottom: none;
/* Ideally this should be auto (makes scrollbar if needed), but currently hides
the .dropdown lists.
/* overflow: auto;*/
}
#svg_editor #tools_left {
position: absolute;
border-right: none;
width: 32px;
top: 75px;
left: 0;
padding-left: 2px;
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;
}
#workarea.wireframe #svgcontent text {
fill: #000;
stroke: none;
}
#workarea.wireframe #canvasBackground rect {
fill: #FFF !important;
}
#svg_editor #selected_panel,
#svg_editor #multiselected_panel,
#svg_editor #g_panel,
#svg_editor #rect_panel,
#svg_editor #circle_panel,
#svg_editor #ellipse_panel,
#svg_editor #line_panel,
#svg_editor #image_panel,
#svg_editor #text_panel,
#svg_editor #path_node_panel {
display: none;
}
#svg_editor #multiselected_panel .selected_tool {
vertical-align: 12px;
}
#svg_editor #tools_top > div, #tools_top {
line-height: 26px;
}
#svg_editor div.toolset,
#svg_editor div.toolset > * {
float: left;
}
#svg_editor div.toolset {
height: 34px;
}
#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;
}
#svg_editor #tools_left .tool_button,
#svg_editor #tools_left .tool_button_current {
position: relative;
z-index: 11;
}
#svg_editor .flyout_arrow_horiz {
position: absolute;
bottom: -1px;
right: 0;
z-index: 10;
}
.magic_field > * {
float: left;
}
span.zoom_tool {
line-height: 26px;
padding: 3px;
}
.magic_field input {
margin-top: 5px;
}
.dropdown {
position: relative;
}
#svg_editor .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: -93px;
top: 26px;
display: none;
}
.dropup ul {
top: auto;
bottom: 26px;
}
.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: #B0B0B0;
}
.dropdown li.special {
padding: 10px 4px;
}
.dropdown li.special:hover {
background: #E8E8E8;
}
#font_family_dropdown li {
font-size: 1.4em;
}
#font_family {
margin-left: 5px;
margin-right: 0;
}
#opacity_dropdown li {
width: 140px;
}
#svg_editor .tool_button,
#svg_editor .push_button,
#svg_editor .tool_button_current,
#svg_editor .push_button_pressed
{
height: 24px;
width: 24px;
margin: 2px;
padding: 2px;
border-left: 1px solid #FFF;
border-top: 1px solid #FFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
background-color: #E8E8E8;
cursor: pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#svg_editor #main_menu li#tool_open {
position: relative;
overflow: hidden;
}
#tool_open input {
-moz-transform: scale(4,2); /* Not entirely necessary, but keeps it nice and big for OS X*/
height: 100%;
position: absolute;
opacity: 0;
top: -3px;
right: 270px;
margin: 0;
cursor: pointer; /* Sadly doesn't appear to have an effect */
}
#svg_editor .disabled {
opacity: 0.5;
cursor: default;
}
#svg_editor .tool_sep {
width: 1px;
background: #888;
border-left: 1px outset #EEE;
margin: 2px 3px;
padding: 0;
height: 24px;
}
#tool_bold, #tool_italic {
font: bold 2.1em/1.1em serif;
text-align: center;
padding-left: 2px;
position: relative;
}
#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;
}
#svg_editor #color_picker {
position: absolute;
display: none;
background: #E8E8E8;
height: 350px;
}
#svg_editor .tools_flyout {
position: absolute;
display: none;
cursor: pointer;
width: 400px;
}
#svg_editor .tools_flyout_v {
position: absolute;
display: none;
cursor: pointer;
width: 30px;
}
#svg_editor .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;
}
#svg_editor #tools_bottom {
position: absolute;
left: 40px;
right: 2px;
bottom: 2px;
height: 60px;
}
#svg_editor #tools_bottom_1 {
width: 115px;
float: left;
}
#svg_editor #tools_bottom_2 {
width: 250px;
float: left;
}
#svg_editor #tools_bottom_3 {
}
#svg_editor #copyright {
text-align: right;
}
#svg_source_editor {
display: none;
}
#svg_source_editor #svg_source_overlay {
position: absolute;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
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;
}
#svg_docprops #svg_docprops_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 {
margin-left: 1em;
overflow: auto;
}
#svg_docprops_container #svg_docprops_docprops,
#svg_docprops_container #svg_docprops_prefs {
float: left;
width: 221px;
margin: 5px .7em;
overflow: hidden;
}
#svg_docprops_container #svg_docprops_prefs {
float: right;
}
#svg_docprops legend {
max-width: 195px;
}
#svg_docprops_docprops > legend, #svg_docprops_prefs > legend {
font-weight: bold;
font-size: 1.1em;
}
#svg_docprops_container fieldset {
padding: 5px;
margin: 5px;
border: 1px solid #DDD;
}
#svg_docprops_container label {
display: block;
margin: .5em;
}
#svginfo_bg_note {
font-size: .9em;
font-style: italic;
color: #444;
}
#canvas_title {
display: block;
}
#svg_source_editor #svg_source_textarea {
position: relative;
width: 95%;
top: 5px;
height: 250px;
padding: 5px;
font-size: 12px;
}
#svg_source_editor #tool_source_back {
text-align: left;
padding-left: 20px;
}
#svg_docprops_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 {
margin-top: 0;
margin-bottom: 5px;
}
#svg_docprops {
display: none;
}
#image_save_opts label {
font-size: .9em;
}
#image_save_opts input {
margin-left: 0;
}
#svg_docprops #svg_docprops_overlay {
position: absolute;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
background-color: black;
opacity: 0.6;
z-index: 20000;
}
.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;
}
.toolbar_button button .svg_icon {
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
#dialog_box {
display: none;
}
#dialog_box_overlay {
background: black;
opacity: .5;
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
z-index: 6;
}
#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_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 */
#svg_editor .tools_flyout .tool_button,
#svg_editor .tools_flyout .tool_flyout {
padding: 2px;
width: 24px;
height: 24px;
margin: 0;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
foreignObject {line-height:1.0}