adding Runge
Mark MacKay
parent
35924c38d5
commit
ef667b78ad
107
src/css/base.css
107
src/css/base.css
|
|
@ -1,41 +1,76 @@
|
|||
:root {
|
||||
/* grays blues reds */
|
||||
--z0:rgb(24, 32, 40); --a0: rgb(24, 32, 40); --b0:rgb(41, 23, 35);
|
||||
--z1:rgb(36, 44, 52); --a1: rgb(34, 52, 68); --b1:rgb(68, 33, 52);
|
||||
--z2:rgb(49, 56, 64); --a2: rgb(42, 74, 97); --b2:rgb(97, 42, 67);
|
||||
--z3:rgb(63, 69, 76); --a3: rgb(47, 98, 127); --b3:rgb(129, 51, 79);
|
||||
--z4:rgb(76, 83, 89); --a4: rgb(49, 122,159); --b4:rgb(161, 60, 88);
|
||||
--z5:rgb(91, 97, 103); --a5: rgb(48, 148,191); --b5:rgb(193, 71, 94);
|
||||
--z6:rgb(105, 111, 116); --a6: rgb(40, 174, 223); --b6:rgb(225, 84, 97);
|
||||
--z7:rgb(120, 125, 130); --a7: rgb(14, 202, 255); --b7:rgb(255, 100, 96);
|
||||
--z8:rgb(120, 125, 130); --a8: rgb(14, 202, 255); --b8:rgb(255, 100, 96);
|
||||
--z9:rgb(137, 142, 146); --a9: rgb(89, 209, 254); --b9:rgb(255, 125, 116);
|
||||
--z10:rgb(155, 159, 163); --a10:rgb(126, 216, 254); --b10:rgb(255, 147, 137);
|
||||
--z11:rgb(174, 177, 180); --a11:rgb(155, 223, 253); --b11:rgb(255, 168, 159);
|
||||
--z12:rgb(192, 195, 197); --a12:rgb(181, 230, 253); --b12:rgb(255, 189, 181);
|
||||
--z13:rgb(211, 213, 214); --a13:rgb(205, 237, 252); --b13:rgb(255, 210, 204);
|
||||
--z14:rgb(230, 231, 232); --a14:rgb(228, 243, 251); --b14:rgb(255, 230, 227);
|
||||
--z15:rgb(250, 250, 250); --a15:rgb(250, 250, 250); --b15:rgb(250, 250, 250);
|
||||
:root { /* red */ /* yellow */ /* green */
|
||||
--z0: #111827; --a0: #291e2a; --b0: #292329; --c0: #16262f;
|
||||
--z1: #1e2433; --a1: #42242e; --b1: #43322a; --c1: #1b373a;
|
||||
--z2: #2b313f; --a2: #5b2a32; --b2: #5d412b; --c2: #1e4944;
|
||||
--z3: #393e4c; --a3: #753035; --b3: #77512b; --c3: #215c4f;
|
||||
--z4: #474c59; --a4: #8f3539; --b4: #926129; --c4: #21705a;
|
||||
--z5: #565a66; --a5: #aa3a3c; --b5: #ad7225; --c5: #218465;
|
||||
--z6: #656974; --a6: #c53e3f; --b6: #ca8320; --c6: #1d9970;
|
||||
--z7: #747782; --a7: #e14242; --b7: #e69515; --c7: #16ae7b;
|
||||
--z8: #848790; --a8: #f2524e; --b8: #f7a327; --c8: #32bd88;
|
||||
--z9: #94969f; --a9: #f76b62; --b9: #fbae48; --c9: #57c596;
|
||||
--z10: #a4a6ae; --a10: #fc8277; --b10: #feb963; --c10: #73cea4;
|
||||
--z11: #b4b7bd; --a11: #ff978d; --b11: #ffc47e; --c11: #8cd6b3;
|
||||
--z12: #c5c7cc; --a12: #ffaca2; --b12: #ffcf97; --c12: #a4ddc1;
|
||||
--z13: #d6d8db; --a13: #ffc1b9; --b13: #ffdab1; --c13: #bbe5d0;
|
||||
--z14: #e7e9eb; --a14: #ffd5d0; --b14: #ffe5cb; --c14: #d1eddf;
|
||||
--z15: #f9fafb; --a15: #fde9e7; --b15: #fdf0e5; --c15: #e7f4ee;
|
||||
|
||||
/* blue */ /* violet */ /* purple */ /* pink */
|
||||
--d0: #172139; --e0: #191f38; --f0: #1c1f39; --g0: #261e31;
|
||||
--d1: #1d2d4f; --e1: #22284e; --f1: #29274f; --g1: #3f253e;
|
||||
--d2: #223966; --e2: #2c3165; --f2: #372f66; --g2: #572c4b;
|
||||
--d3: #28457f; --e3: #363a7d; --f3: #46377f; --g3: #713258;
|
||||
--d4: #2d5298; --e4: #3f4495; --f4: #543f98; --g4: #8b3866;
|
||||
--d5: #315fb2; --e5: #494daf; --f5: #6447b2; --g5: #a63d74;
|
||||
--d6: #356dcd; --e6: #5457c9; --f6: #7350cd; --g6: #c14283;
|
||||
--d7: #397be8; --e7: #5e61e3; --f7: #8358e8; --g7: #de4692;
|
||||
--d8: #5089f7; --e8: #706ef2; --f8: #9466f7; --g8: #ee569f;
|
||||
--d9: #6f96f8; --e9: #867ff4; --f9: #a378f8; --g9: #f26faa;
|
||||
--d10: #88a4f9; --e10: #9a90f5; --f10: #b28bf9; --g10: #f585b5;
|
||||
--d11: #9eb2f9; --e11: #aca2f7; --f11: #c09efa; --g11: #f89ac1;
|
||||
--d12: #b3c0fa; --e12: #bdb3f8; --f12: #cdb1fa; --g12: #faafcd;
|
||||
--d13: #c6cffa; --e13: #cec5f9; --f13: #d9c4fb; --g13: #fbc3d9;
|
||||
--d14: #d8defb; --e14: #ddd8fa; --f14: #e5d7fb; --g14: #fbd6e5;
|
||||
--d15: #eaedfb; --e15: #edeafb; --f15: #f0eafb; --g15: #faeaf1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.inverted {
|
||||
--z15:rgb(24, 32, 40); --a15:rgb(24, 32, 40); --b15:rgb(41, 23, 35);
|
||||
--z14:rgb(36, 44, 52); --a14:rgb(34, 52, 68); --b14:rgb(68, 33, 52);
|
||||
--z13:rgb(49, 56, 64); --a13:rgb(42, 74, 97); --b13:rgb(97, 42, 67);
|
||||
--z12:rgb(63, 69, 76); --a12:rgb(47, 98, 127); --b12:rgb(129, 51, 79);
|
||||
--z11:rgb(76, 83, 89); --a11:rgb(49, 122, 159); --b11:rgb(161, 60, 88);
|
||||
--z10:rgb(91, 97, 103); --a10:rgb(48, 148, 191); --b10:rgb(193, 71, 94);
|
||||
--z9:rgb(105, 111, 116); --a9:rgb(40, 174, 223); --b9 :rgb(225, 84, 97);
|
||||
--z8:rgb(120, 125, 130); --a8:rgb(14, 202, 255); --b8 :rgb(255, 100, 96);
|
||||
--z7:rgb(120, 125, 130); --a7:rgb(14, 202, 255); --b7 :rgb(255, 100, 96);
|
||||
--z6:rgb(137, 142, 146); --a6:rgb(89, 209, 254); --b6 :rgb(255, 125, 116);
|
||||
--z5:rgb(155, 159, 163); --a5:rgb(126, 216, 254); --b5 :rgb(255, 147, 137);
|
||||
--z4:rgb(174, 177, 180); --a4:rgb(155, 223, 253); --b4 :rgb(255, 168, 159);
|
||||
--z3:rgb(192, 195, 197); --a3:rgb(181, 230, 253); --b3 :rgb(255, 189, 181);
|
||||
--z2:rgb(211, 213, 214); --a2:rgb(205, 237, 252); --b2 :rgb(255, 210, 204);
|
||||
--z1:rgb(230, 231, 232); --a1:rgb(228, 243, 251); --b1 :rgb(255, 230, 227);
|
||||
--z0:rgb(250, 250, 250); --a0:rgb(250, 250, 250); --b0 :rgb(250, 250, 250);
|
||||
--z15: #111827; --a15: #291e2a; --b15: #292329; --c15: #16262f;
|
||||
--z14: #1e2433; --a14: #42242e; --b14: #43322a; --c14: #1b373a;
|
||||
--z13: #2b313f; --a13: #5b2a32; --b13: #5d412b; --c13: #1e4944;
|
||||
--z12: #393e4c; --a12: #753035; --b12: #77512b; --c12: #215c4f;
|
||||
--z11: #474c59; --a11: #8f3539; --b11: #926129; --c11: #21705a;
|
||||
--z10: #565a66; --a10: #aa3a3c; --b10: #ad7225; --c10: #218465;
|
||||
--z9: #656974; --a9: #c53e3f; --b9: #ca8320; --c9: #1d9970;
|
||||
--z8: #747782; --a8: #e14242; --b8: #e69515; --c8: #16ae7b;
|
||||
--z7: #848790; --a7: #f2524e; --b7: #f7a327; --c7: #32bd88;
|
||||
--z6: #94969f; --a6: #f76b62; --b6: #fbae48; --c6: #57c596;
|
||||
--z5: #a4a6ae; --a5: #fc8277; --b5: #feb963; --c5: #73cea4;
|
||||
--z4: #b4b7bd; --a4: #ff978d; --b4: #ffc47e; --c4: #8cd6b3;
|
||||
--z3: #c5c7cc; --a3: #ffaca2; --b3: #ffcf97; --c3: #a4ddc1;
|
||||
--z2: #d6d8db; --a2: #ffc1b9; --b2: #ffdab1; --c2: #bbe5d0;
|
||||
--z1: #e7e9eb; --a1: #ffd5d0; --b1: #ffe5cb; --c1: #d1eddf;
|
||||
--z0: #f9fafb; --a0: #fde9e7; --b0: #fdf0e5; --c0: #e7f4ee;
|
||||
|
||||
/* blue */ /* violet */ /* purple */ /* pink */
|
||||
--d15:#172139; --e15: #191f38; --f15: #1c1f39; --g15: #261e31;
|
||||
--d14:#1d2d4f; --e14: #22284e; --f14: #29274f; --g14: #3f253e;
|
||||
--d13:#223966; --e13: #2c3165; --f13: #372f66; --g13: #572c4b;
|
||||
--d12:#28457f; --e12: #363a7d; --f12: #46377f; --g12: #713258;
|
||||
--d11:#2d5298; --e11: #3f4495; --f11: #543f98; --g11: #8b3866;
|
||||
--d10:#315fb2; --e10: #494daf; --f10: #6447b2; --g10: #a63d74;
|
||||
--d9: #356dcd; --e9: #5457c9; --f9: #7350cd; --g9: #c14283;
|
||||
--d8: #397be8; --e8: #5e61e3; --f8: #8358e8; --g8: #de4692;
|
||||
--d7: #5089f7; --e7: #706ef2; --f7: #9466f7; --g7: #ee569f;
|
||||
--d6: #6f96f8; --e6: #867ff4; --f6: #a378f8; --g6: #f26faa;
|
||||
--d5: #88a4f9; --e5: #9a90f5; --f5: #b28bf9; --g5: #f585b5;
|
||||
--d4: #9eb2f9; --e4: #aca2f7; --f4: #c09efa; --g4: #f89ac1;
|
||||
--d3: #b3c0fa; --e3: #bdb3f8; --f3: #cdb1fa; --g3: #faafcd;
|
||||
--d2: #c6cffa; --e2: #cec5f9; --f2: #d9c4fb; --g2: #fbc3d9;
|
||||
--d1: #d8defb; --e1: #ddd8fa; --f1: #e5d7fb; --g1: #fbd6e5;
|
||||
--d0: #eaedfb; --e0: #edeafb; --f0: #f0eafb; --g0: #faeaf1;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
|
|
@ -63,9 +98,9 @@
|
|||
}
|
||||
|
||||
a, a:link, a:active, a:visited {
|
||||
color: var(--a6);
|
||||
color: var(--d6);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--a8);
|
||||
color: var(--d8);
|
||||
}
|
||||
|
|
@ -1,3 +1,76 @@
|
|||
#color_tools #tool_fill .color_block > div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.touch #color_tools #tool_fill .color_block > div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#color_tools #tool_fill .color_block #fill_bg, #color_tools #tool_stroke .color_block #stroke_bg {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
bottom: 1px;
|
||||
right: 1px;
|
||||
}
|
||||
|
||||
#stroke_color:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
background: var(--z9);
|
||||
box-shadow: 0 0 0 1px var(--z0);
|
||||
}
|
||||
|
||||
#tool_switch {
|
||||
cursor: pointer;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: 30px;
|
||||
cursor: nwse-resize
|
||||
}
|
||||
|
||||
#tool_switch svg {
|
||||
fill: var(--z10);
|
||||
}
|
||||
|
||||
#tool_switch:hover svg {
|
||||
fill: var(--z15);
|
||||
}
|
||||
|
||||
#tool_stroke:hover #stroke_color:after {
|
||||
background: var(--z15);
|
||||
}
|
||||
|
||||
.color_block {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
overflow: hidden;
|
||||
border: solid #ccc 1px;
|
||||
}
|
||||
|
||||
.color_block:hover {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.color_block svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#tool_stroke .color_block > div {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#color_tools {
|
||||
position: relative;
|
||||
|
|
@ -18,15 +91,8 @@
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.touch #tool_fill {
|
||||
position: static;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
#tool_fill.active, #tool_stroke.active {
|
||||
#tool_fill.active,
|
||||
#tool_stroke.active {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
|
@ -35,52 +101,18 @@
|
|||
left: 14px;
|
||||
}
|
||||
|
||||
.touch #tool_fill.active, .touch #tool_stroke.active {
|
||||
outline: 4px solid #09f;
|
||||
}
|
||||
|
||||
#tool_fill, #tool_stroke, #tool_canvas {
|
||||
box-shadow: 0 0 0 1px #2f2f2c;
|
||||
box-shadow: 0 0 0 1px var(--z0);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.touch #tool_fill, .touch #tool_stroke, .touch #tool_canvas {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
#tool_canvas .color_block {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#color_canvas_tools {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
#tool_canvas .color_block svg {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#tool_fill .color_block {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
overflow: hidden;
|
||||
border: solid #ccc 1px;
|
||||
}
|
||||
|
||||
#tool_fill .color_block svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.touch #tool_eyedropper {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.touch #tool_fill .color_block {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.touch #tool_fill .color_block svg {
|
||||
width: 36px !important;
|
||||
height: 36px !important;
|
||||
}
|
||||
|
||||
.touch #tool_switch {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -3,42 +3,15 @@
|
|||
.contextMenu {
|
||||
position: absolute;
|
||||
z-index: 99999;
|
||||
border: solid 1px rgba(0,0,0,.33);
|
||||
background: rgba(255,255,255,.95);
|
||||
background: var(--z15);
|
||||
padding: 5px 0;
|
||||
margin: 0px;
|
||||
display: none;
|
||||
font: 14px/18px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",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);
|
||||
}
|
||||
|
||||
.touch .contextMenu {
|
||||
border: solid 5px rgba(0,0,0,.7);
|
||||
padding: 0;
|
||||
margin: 0 0 0 20px;
|
||||
font: 18px/24px sans-serif;
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: 2px 5px 20px 3px #000;
|
||||
box-shadow: 2px 5px 20px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.touch .contextMenu:after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: solid transparent 10px;
|
||||
border-right-color: rgba(0,0,0,.7);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -25px;
|
||||
margin-top: -10px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.contextMenu LI {
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
|
|
@ -51,16 +24,10 @@
|
|||
float:right;
|
||||
}
|
||||
|
||||
.touch .contextMenu .shortcut {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.contextMenu A {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
color: #222;
|
||||
color: var(--z2);
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
|
|
@ -71,29 +38,14 @@
|
|||
padding: 0px 15px 1px 20px;
|
||||
}
|
||||
|
||||
.touch .contextMenu A {
|
||||
padding: 0 15px;
|
||||
border-bottom: #;
|
||||
font-weight: bold;
|
||||
border-top: solid 1px #E3E3E3;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.contextMenu LI.hover A {
|
||||
background-color: #2e5dea;
|
||||
color: white;
|
||||
background-color: var(--d7);
|
||||
color: var(--z15);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.contextMenu LI.disabled A {
|
||||
color: #999;
|
||||
|
||||
}
|
||||
|
||||
.touch .contextMenu LI.disabled A {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contextMenu LI.hover.disabled A {
|
||||
|
|
@ -104,10 +56,4 @@
|
|||
border-top: solid 1px #E3E3E3;
|
||||
padding-top: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.touch .contextMenu LI.separator {
|
||||
border-top: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -4,9 +4,9 @@
|
|||
}
|
||||
|
||||
#dialog_box_overlay {
|
||||
background: black;
|
||||
background: var(--z0);
|
||||
opacity: .5;
|
||||
height:100%;
|
||||
height: 100%;
|
||||
left:0;
|
||||
position:absolute;
|
||||
top:0;
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
transform: translate(-50%, -50%);
|
||||
position:fixed;
|
||||
z-index:50001;
|
||||
background: #fff;
|
||||
background: var(--z15);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
|
||||
.draginput {
|
||||
background: #3f3f3c;
|
||||
.draginput {
|
||||
background: var(--z2);
|
||||
border-radius: 3px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
display: block;
|
||||
|
|
@ -13,7 +11,7 @@
|
|||
|
||||
.draginput .caret {
|
||||
border: solid transparent 5px;
|
||||
border-top-color: #999;
|
||||
border-top-color: var(--z9);
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
|
@ -22,14 +20,14 @@
|
|||
top: 50%;
|
||||
}
|
||||
|
||||
.draginput label {
|
||||
.draginput label {
|
||||
margin: 28px 10px 0 5px;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
color: var(--z15);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.draginput label#resolution_label, .draginput label#seg_type_label {
|
||||
.draginput label#resolution_label, .draginput label#seg_type_label {
|
||||
font: bold 12px/110% sans-serif;
|
||||
position: absolute;
|
||||
left: auto;
|
||||
|
|
@ -38,20 +36,20 @@
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
.draginput label#seg_type_label {
|
||||
.draginput label#seg_type_label {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.draginput label#seg_type_label .caret {
|
||||
.draginput label#seg_type_label .caret {
|
||||
top: 66%;
|
||||
}
|
||||
|
||||
.draginput label#resolution_label .pull {
|
||||
.draginput label#resolution_label .pull {
|
||||
position: relative;
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
.draginput label#resolution_label span {
|
||||
.draginput label#resolution_label span {
|
||||
right: -13px;
|
||||
left: auto;
|
||||
font-size: 16px;
|
||||
|
|
@ -60,43 +58,12 @@
|
|||
color: white;
|
||||
}
|
||||
|
||||
.touch .draginput.active:after {
|
||||
content: attr(data-value);
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
font-size: 16px;
|
||||
top: 0;
|
||||
width: 30px;
|
||||
left: -50px;
|
||||
padding: 0 5px;
|
||||
color: #333;
|
||||
z-index: 10;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.touch .draginput.active:before {
|
||||
content: '';
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: -5px;
|
||||
border: solid transparent 5px;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
|
||||
.draginput input {
|
||||
.draginput input {
|
||||
border: none;
|
||||
background: transparent;
|
||||
font: 24px/normal sans-serif;
|
||||
text-align: center;
|
||||
color: #4F80FF;
|
||||
color: var(--d7);
|
||||
padding: 30px 0 16px;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
|
|
@ -133,29 +100,27 @@
|
|||
}
|
||||
|
||||
.draginput input:invalid {
|
||||
color: #f33;
|
||||
color: var(--a7);
|
||||
}
|
||||
|
||||
.draginput.error {
|
||||
background-color: var(--a7);
|
||||
color: var(--a15);
|
||||
}
|
||||
|
||||
.draginput span {
|
||||
font: 12px/130% sans-serif;
|
||||
color: #ccc;
|
||||
color: var(--z8);
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.draginput.error {
|
||||
background: #900;
|
||||
}
|
||||
|
||||
.draginput.error input {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.draginput.stroke_tool {
|
||||
.draginput.stroke_tool {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -172,17 +137,16 @@
|
|||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
.draginput_cursor{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
border-top: solid rgba(50,100,200,0.25) 3px;
|
||||
border-top: solid var(--d2) 3px;
|
||||
margin-top: -2px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.draginput input[readonly=readonly] {
|
||||
.draginput input[readonly=readonly] {
|
||||
-webkit-appearance: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
|
|
@ -192,17 +156,16 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
.draginput input:focus {
|
||||
background: #50A0FF;
|
||||
color: #fff;
|
||||
.draginput input:focus {
|
||||
background: var(--d7);
|
||||
color: var(--d15);
|
||||
outline: none;
|
||||
box-shadow: 0 0 5px 2px #50A0FF;
|
||||
box-shadow: 0 0 5px 2px var(--d7);
|
||||
}
|
||||
|
||||
.draginput input:focus+span {
|
||||
z-index: 10;
|
||||
color:#fff;
|
||||
color: var(--z15);
|
||||
}
|
||||
|
||||
.draginput .push_bottom {
|
||||
|
|
|
|||
|
|
@ -4,26 +4,26 @@
|
|||
float: left;
|
||||
}
|
||||
|
||||
.dropdown button {
|
||||
.dropdown button {
|
||||
width: 21px;
|
||||
height: 22px;
|
||||
padding: 0 3px 0 3px;
|
||||
border: none;
|
||||
background-color: #555;
|
||||
background-color: var(--z6);
|
||||
border-radius: 0 2px 2px 0;
|
||||
margin-left: -1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown button:hover {
|
||||
background-color: #666;
|
||||
background-color: var(--z7);
|
||||
}
|
||||
|
||||
.dropdown button:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: solid transparent 4px;
|
||||
border-top-color: #999;
|
||||
border-top-color: var(--z9);
|
||||
top: 9px;
|
||||
left: 6px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,21 +10,21 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
#menu_bar {
|
||||
#menu_bar {
|
||||
padding: 0 0 0 50px;
|
||||
background: #2f2f2c;
|
||||
background: var(--z1);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#menu_bar.active .menu.open .menu_list {
|
||||
#menu_bar.active .menu.open .menu_list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu {
|
||||
.menu {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
color: #333;
|
||||
color: var(--z3);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -33,34 +33,28 @@
|
|||
display: inline-block;
|
||||
padding: 7px 10px;
|
||||
z-index: 10;
|
||||
color: #fff;
|
||||
color: var(--z15);
|
||||
position: relative;
|
||||
height: 16px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.touch .menu_title {
|
||||
padding: 7px 17px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.menu .menu_title:hover {
|
||||
.menu .menu_title:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.menu_list .separator {
|
||||
.menu_list .separator {
|
||||
margin: 5px 0;
|
||||
border-top: solid #ddd 1px;
|
||||
border-top: solid var(--z14) 1px;
|
||||
}
|
||||
|
||||
.menu_list {
|
||||
.menu_list {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
background: white;
|
||||
background: var(--z15);
|
||||
padding: 7px 0;
|
||||
border-radius: 0 3px 3px 3px;
|
||||
box-shadow: 0 0 20px rgba(0,0,0,0.8);
|
||||
|
|
@ -70,7 +64,7 @@
|
|||
top: 38px;
|
||||
}
|
||||
|
||||
#menu_bar.active .menu.open .menu_title {
|
||||
#menu_bar.active .menu.open .menu_title {
|
||||
background: white;
|
||||
color: #333;
|
||||
}
|
||||
|
|
@ -80,13 +74,13 @@
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
.menu_list .menu_item {
|
||||
.menu_list .menu_item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
line-height: 22px;
|
||||
padding: 5px 69px 5px 25px;
|
||||
cursor: default;
|
||||
color: #333;
|
||||
color: var(--z3);
|
||||
}
|
||||
|
||||
.menu_list .menu_item.tool_button {
|
||||
|
|
@ -98,7 +92,7 @@
|
|||
width: auto;
|
||||
}
|
||||
|
||||
.menu_list .menu_item.push_button_pressed:before {
|
||||
.menu_list .menu_item.push_button_pressed:before {
|
||||
content: '✔';
|
||||
position: absolute;
|
||||
display: block;
|
||||
|
|
@ -108,35 +102,41 @@
|
|||
height: 20px;
|
||||
}
|
||||
|
||||
.menu_list .menu_item:hover,
|
||||
.menu_list .menu_item.push_button_pressed:hover {
|
||||
background: var(--a14);
|
||||
.menu_list .menu_item:hover,
|
||||
.menu_list .menu_item.push_button_pressed:hover {
|
||||
background: var(--d15);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.menu_list .menu_item.disabled:hover,
|
||||
.menu_list .menu_item.push_button_pressed.disabled:hover {
|
||||
.menu_list .menu_item.disabled:hover,
|
||||
.menu_list .menu_item.push_button_pressed.disabled:hover {
|
||||
background: transparent;
|
||||
color: #333;
|
||||
color: var(--z3);
|
||||
}
|
||||
|
||||
.menu_list .menu_item.push_button_pressed {
|
||||
background: transparent;
|
||||
border: none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
.menu_list .menu_item.push_button_pressed {
|
||||
background: transparent;
|
||||
border: none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu_list .menu_item span {
|
||||
.menu_list .menu_item span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
padding: 5px;
|
||||
background: rgba(0,0,0, 0.1);
|
||||
top: 6px;
|
||||
height: 10px;
|
||||
right: var(--x2);
|
||||
padding: 0 var(--x1);
|
||||
background: var(--z14);
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
line-height: 120%;
|
||||
}
|
||||
font-size: 11px;
|
||||
line-height: var(--x6);
|
||||
border-radius: 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.menu_list .menu_item:not(.disabled):hover span {
|
||||
background: var(--d13);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
/* Comment to prevent wrong concat */
|
||||
|
||||
|
||||
body {
|
||||
background: #3f3f3c;
|
||||
background: var(--z1);
|
||||
font: 14px/120% -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
|
|
@ -31,22 +30,16 @@ html, body {
|
|||
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background: #444;
|
||||
background: var(--z1);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: #666;
|
||||
background: var(--z3);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
#browser-not-supported {
|
||||
font-size: 0.8em;
|
||||
font-family: sans-serif;
|
||||
color: #000000;
|
||||
background: var(--z1);
|
||||
}
|
||||
|
||||
#svgroot {
|
||||
|
|
@ -56,18 +49,18 @@ html, body {
|
|||
}
|
||||
|
||||
#svg_editor {
|
||||
background: #2f2f2c;
|
||||
background: var(--z1);
|
||||
}
|
||||
|
||||
#svgcanvas {
|
||||
background-color: #A0A0A0;
|
||||
background-color: var(--z1);
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
background: #3F3F3C;
|
||||
background: var(--z2);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -100,112 +93,7 @@ html, body {
|
|||
top: 3px;
|
||||
}
|
||||
|
||||
#color_tools #tool_fill .color_block:hover, #color_tools #tool_stroke .color_block:hover {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
#color_tools #tool_fill .color_block > div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.touch #color_tools #tool_fill .color_block > div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#color_tools #tool_fill .color_block #fill_bg, #color_tools #tool_stroke .color_block #stroke_bg {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
bottom: 1px;
|
||||
right: 1px;
|
||||
}
|
||||
|
||||
.touch #color_tools #tool_fill .color_block #fill_bg, .touch #color_tools #tool_stroke .color_block #stroke_bg {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.touch #tool_stroke {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#stroke_color:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
background: #ccc;
|
||||
box-shadow: 0 0 0 1px #000;
|
||||
}
|
||||
|
||||
.touch #stroke_color:after {
|
||||
height: 14px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 14px;
|
||||
|
||||
}
|
||||
|
||||
#tool_switch {
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M3.01 2A6 6 0 019 8h1.83l-2.91 2.91L5 8h2a4 4 0 00-3.99-4v1.93L.1 3.02 3.01.1V2z' fill='%23FFF' fill-rule='evenodd'/%3E%3C/svg%3E") top left no-repeat;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 28px;
|
||||
cursor: nwse-resize
|
||||
}
|
||||
|
||||
#color_tools #cross:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#color_tools #tool_stroke:hover #stroke_color:after {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#color_tools #tool_stroke .color_block {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
overflow: hidden;
|
||||
border: solid #ccc 1px;
|
||||
}
|
||||
|
||||
.touch #color_tools #tool_stroke .color_block {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
#color_tools #tool_stroke .color_block > div {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.touch #color_tools #tool_stroke .color_block > div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#color_tools .icon_label {
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#linkLabel > svg {
|
||||
height: 20px;
|
||||
|
|
@ -219,7 +107,7 @@ html, body {
|
|||
left: 50px;
|
||||
bottom: 40px;
|
||||
right: 175px;
|
||||
background-color: #444;
|
||||
background-color: var(--z2);
|
||||
overflow: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -238,7 +126,7 @@ html, body {
|
|||
position: absolute;
|
||||
width: 160px;
|
||||
height: 100%;
|
||||
background: #2f2f2c;
|
||||
background: var(--z1);
|
||||
right: 0;
|
||||
top: 20px;
|
||||
border-bottom: none;
|
||||
|
|
@ -287,38 +175,7 @@ div#font-selector .font-item:hover {
|
|||
background-color: #eee;
|
||||
}
|
||||
|
||||
#panels #marker_panel * {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#panels #marker_panel h4 {
|
||||
float: none;
|
||||
}
|
||||
|
||||
#panels #marker_panel .dropdown .icon_label {
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
margin-top: 2px;
|
||||
border: solid #3f3f3c 1px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#panels #marker_panel .dropdown button {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
#panels #marker_panel #marker_panel_title {
|
||||
float: none;
|
||||
color: #fff;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
#panels #marker_panel .dropdown .icon_label img {
|
||||
float: none;
|
||||
}
|
||||
|
||||
|
||||
#color_picker input[type=text], #color_picker input[type=number] {
|
||||
#color_picker input[type=text], #color_picker input[type=number] {
|
||||
width: 30px;
|
||||
background: #fff;
|
||||
border: solid rgba(0,0,0,0.3) 1px;
|
||||
|
|
@ -332,8 +189,8 @@ div#font-selector .font-item:hover {
|
|||
input[type=text].tuco, input[type=number].tuco {width: 150px;}
|
||||
|
||||
input[type=submit], input[type=button], button {
|
||||
background: var(--a7);
|
||||
color: var(--z1);
|
||||
background: var(--d7);
|
||||
color: var(--z15);
|
||||
border-radius: var(--x1);
|
||||
padding: var(--x2) var(--x4);
|
||||
border: none;
|
||||
|
|
@ -346,13 +203,13 @@ div#font-selector .font-item:hover {
|
|||
input[type=submit]:hover,
|
||||
input[type=button]:hover,
|
||||
button:hover {
|
||||
background: var(--a9);
|
||||
background: var(--d9);
|
||||
}
|
||||
|
||||
input[type=submit]:active,
|
||||
input[type=button]:active,
|
||||
button:active {
|
||||
box-shadow: 0 0 0 var(--x1) var(--a14);
|
||||
box-shadow: 0 0 0 var(--x1) var(--d14);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -364,12 +221,13 @@ button:focus {
|
|||
|
||||
button.cancel, input.Cancel, input.cancel, input.jGraduate_Cancel, button.cancel {
|
||||
-webkit-appearance: none;
|
||||
background-color: var(--z10);
|
||||
background-color: var(--z12);
|
||||
color: var(--z3);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button.cancel:hover, input.Cancel:hover, input.cancel:hover, input.jGraduate_Cancel:hover, button.cancel:hover {
|
||||
background-color: var(--z11);
|
||||
background-color: var(--z13);
|
||||
}
|
||||
|
||||
button.warning {
|
||||
|
|
@ -390,7 +248,7 @@ button:focus {
|
|||
top: 30px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #2F2F2C; /* Needed so flyout icons don't appear on the left */
|
||||
background: var(--z1);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
|
|
@ -454,10 +312,9 @@ button:focus {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
.tool_button {
|
||||
height: 40px;
|
||||
width: 50px;
|
||||
height: var(--x12);
|
||||
width: var(--x12);
|
||||
cursor: pointer;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
|
|
@ -465,22 +322,25 @@ button:focus {
|
|||
|
||||
.tool_button svg {
|
||||
vertical-align: center;
|
||||
fill: #999;
|
||||
fill: var(--z5);
|
||||
}
|
||||
|
||||
|
||||
.tool_button:hover svg {
|
||||
fill: #ddd;
|
||||
fill: var(--z10);
|
||||
}
|
||||
|
||||
.tool_button.current {
|
||||
background-color: var(--z0);
|
||||
}
|
||||
|
||||
.tool_button.current svg {
|
||||
fill: #0cf;
|
||||
fill: var(--d15);
|
||||
}
|
||||
|
||||
.tool_button.disabled {
|
||||
opacity: 0.2;
|
||||
.tool_button.disabled svg {
|
||||
background-color: #aaa;
|
||||
cursor: not-allowed;
|
||||
fill: var(--z3);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -544,12 +404,12 @@ input[type=file] {
|
|||
bottom: 0;
|
||||
height: 40px;
|
||||
overflow: visible;
|
||||
background: #2f2f2c;
|
||||
background-color: var(--z1);
|
||||
}
|
||||
|
||||
|
||||
#panels h4 {
|
||||
color: #fff;
|
||||
color: var(--z15);
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
padding: 10px 0 5px 0;
|
||||
|
|
@ -587,9 +447,9 @@ input[type=file] {
|
|||
float: left;
|
||||
height: 26px;
|
||||
height: 26px;
|
||||
border: solid #3f3f3c 10px;
|
||||
outline: solid #2f2f2c 1px;
|
||||
background-color: #3f3f3c;
|
||||
border: solid var(--z2) 10px;
|
||||
outline: solid var(--z1) 1px;
|
||||
background-color: var(--z2);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -698,12 +558,6 @@ input[type=file] {
|
|||
clear:both;
|
||||
}
|
||||
|
||||
/* For IE 6/7 (trigger hasLayout) */
|
||||
.clearfix {
|
||||
*zoom:1;
|
||||
}
|
||||
|
||||
|
||||
#group_title {display: none;}
|
||||
|
||||
#tool_font_family .caret {
|
||||
|
|
@ -732,7 +586,7 @@ input[type=file] {
|
|||
}
|
||||
|
||||
#tool_italic {
|
||||
border-top: solid #2f2f2c 2px;
|
||||
border-top: solid var(--z1) 2px;
|
||||
top: 35px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
|
|
@ -757,7 +611,7 @@ input[type=file] {
|
|||
white-space: nowrap;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
border-right: solid #2f2f2c 2px;
|
||||
border-right: solid var(--z1) 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -768,8 +622,8 @@ input[type=file] {
|
|||
top: 3px;
|
||||
bottom: 3px;
|
||||
width: 15px;
|
||||
border-right: solid #3f3f3c 10px;
|
||||
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzU4MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj48c3RvcCBzdG9wLWNvbG9yPSIjM2YzZjNjIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiMzZjNmM2MiIG9mZnNldD0iMC43Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c1ODApIiAvPjwvc3ZnPg==);
|
||||
border-right: solid var(--z2) 10px;
|
||||
background: linear-gradient(to right, rgba(0,0,0,0), var(--z2));
|
||||
}
|
||||
|
||||
#zoom_label {
|
||||
|
|
@ -807,11 +661,11 @@ input[type=file] {
|
|||
}
|
||||
|
||||
#zoomLabel svg {
|
||||
fill: #999;
|
||||
fill: var(--z10);
|
||||
}
|
||||
|
||||
#zoom_label input {
|
||||
color: #ccc;
|
||||
color: var(--z10);
|
||||
font-size: 13px;
|
||||
height: auto;
|
||||
width: 50px;
|
||||
|
|
@ -842,7 +696,7 @@ input[readonly=readonly]:focus {
|
|||
}
|
||||
|
||||
#color_canvas_tools, #fill_bg, #stroke_bg {
|
||||
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAA3NCSVQICAjb4U/gAAAABlBMVEXu7u7///8o06qaAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXRFWHRDcmVhdGlvbiBUaW1lADcvMjIvMTL7FNdCAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABFJREFUCJljYP7AgIb+MKAhAM8/C5vWL6zSAAAAAElFTkSuQmCC) top left repeat;
|
||||
background: var(--z15) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAAA3NCSVQICAjb4U/gAAAABlBMVEXu7u7///8o06qaAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFXRFWHRDcmVhdGlvbiBUaW1lADcvMjIvMTL7FNdCAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABFJREFUCJljYP7AgIb+MKAhAM8/C5vWL6zSAAAAAElFTkSuQmCC) top left repeat;
|
||||
}
|
||||
|
||||
#color_canvas_tools {
|
||||
|
|
@ -871,13 +725,9 @@ input[readonly=readonly]:focus {
|
|||
#tool_angle_indicator_cursor {
|
||||
width: 4px;
|
||||
height: 25px;
|
||||
border-top: solid #50A0FF 3px;
|
||||
border-top: solid var(--d7) 3px;
|
||||
position: absolute;
|
||||
margin: 0 0 0 23px;
|
||||
-webkit-transform-origin: 50% 0;
|
||||
-moz-transform-origin: 50% 0;
|
||||
-o-transform-origin: 50% 0;
|
||||
-ms-transform-origin: 50% 0;
|
||||
transform-origin: 50% 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
#rulers > div {
|
||||
position: absolute;
|
||||
background: #2f2f2c;
|
||||
background: var(--z2);
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: none;
|
||||
|
|
@ -10,9 +10,8 @@
|
|||
#rulers #ruler_corner {
|
||||
top: 30px;
|
||||
left: 50px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: solid #444 1px;
|
||||
width: var(--x4);
|
||||
height: var(--x4);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
|
@ -21,22 +20,7 @@
|
|||
top: 30px;
|
||||
left: 66px;
|
||||
right: 175px;
|
||||
border-top: solid #444 1px;
|
||||
border-right: solid #444 1px;
|
||||
}
|
||||
|
||||
#ruler_x_cursor {
|
||||
height: 15px;
|
||||
border-right: dotted #999 1px;
|
||||
position: absolute;
|
||||
background: #2f2f2c;
|
||||
}
|
||||
|
||||
#ruler_y_cursor {
|
||||
width: 15px;
|
||||
border-top: dotted #999 1px;
|
||||
position: absolute;
|
||||
background: #2f2f2c;
|
||||
|
||||
}
|
||||
|
||||
#rulers.moved #ruler_corner,
|
||||
|
|
@ -49,15 +33,12 @@
|
|||
top: 46px;
|
||||
left: 50px;
|
||||
bottom: 40px;
|
||||
border-left: solid #444 1px;
|
||||
border-bottom: solid #444 1px;
|
||||
}
|
||||
|
||||
#rulers.moved #ruler_y {
|
||||
top: 116px;
|
||||
}
|
||||
|
||||
|
||||
#ruler_x canvas:first-child {
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
|
||||
#shape_buttons {
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
|
|
@ -17,16 +15,16 @@
|
|||
left: 0;
|
||||
top: 0;
|
||||
height: 300px;
|
||||
background: #eee;
|
||||
background: var(--z14);
|
||||
border-radius: 3px 0 0 3px;
|
||||
z-index: 2;
|
||||
}
|
||||
#shape_cats > div {
|
||||
line-height: 1em;
|
||||
padding: 0 .5em;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background: #E8E8E8;
|
||||
color: #444;
|
||||
border-bottom: 1px solid var(--z13);
|
||||
background: var(--z14);
|
||||
color: var(--z3);
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
|
@ -40,13 +38,13 @@
|
|||
}
|
||||
|
||||
#shape_cats div:hover {
|
||||
background: #efefef;
|
||||
color: #000;
|
||||
background: var(--z15);
|
||||
color: var(--z0);
|
||||
}
|
||||
#shape_cats div.current {
|
||||
font-weight: bold;
|
||||
background: #3f3f3c;
|
||||
color: #fff;
|
||||
background: var(--z3);
|
||||
color: var(--z15);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -56,7 +54,7 @@
|
|||
right: -26px;
|
||||
top: 0;
|
||||
border: solid transparent 13px;
|
||||
border-left-color: #3f3f3c;
|
||||
border-left-color: var(--z3);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -69,24 +67,24 @@
|
|||
left: 47px;
|
||||
top: 230px;
|
||||
height: 324px;
|
||||
background: #fff;
|
||||
background: var(--z15);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.tools_flyout .tool_button {
|
||||
float: left;
|
||||
background-color: #fff;
|
||||
background-color: var(--z15);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
/* Necessary to keep the flyouts sized properly */
|
||||
#shape_buttons {background: #fff; border-radius: 0 3px 3px 0; padding: 10px}
|
||||
#shape_buttons {background: var(--z15); border-radius: 0 3px 3px 0; padding: 10px}
|
||||
|
||||
.tools_flyout .tool_button,
|
||||
.tools_flyout .tool_flyout {
|
||||
background: #fff;
|
||||
background: var(--z15);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 5px;
|
||||
|
|
@ -97,10 +95,10 @@
|
|||
}
|
||||
|
||||
.tools_flyout .tool_button svg {
|
||||
fill: #444;
|
||||
fill: var(--z4);
|
||||
}
|
||||
|
||||
.tools_flyout .tool_button:hover svg {
|
||||
fill: #111;
|
||||
fill: var(--z1);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
font-size: 14px;
|
||||
background-color: #eee;
|
||||
background-color: var(--z14);
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
line-height: 140%;
|
||||
font-family: var(--mono-font);
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
color: var(--z4);
|
||||
border: none;
|
||||
padding: 32px;
|
||||
background-color: transparent;
|
||||
|
|
|
|||
|
|
@ -579,7 +579,9 @@
|
|||
</div>
|
||||
|
||||
<div id="color_tools">
|
||||
<div id="tool_switch" title="Switch stroke and fill colors [X]"></div>
|
||||
<div id="tool_switch" title="Switch stroke and fill colors [X]">
|
||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M3.01 2A6 6 0 019 8h1.83l-2.91 2.91L5 8h2a4 4 0 00-3.99-4v1.93L.1 3.02 3.01.1V2z' /></svg>
|
||||
</div>
|
||||
<div class="color_tool active" id="tool_fill">
|
||||
<label class="icon_label" title="Change fill color"></label>
|
||||
<div class="color_block">
|
||||
|
|
|
|||
|
|
@ -2,6 +2,11 @@ MD.Rulers = function(){
|
|||
|
||||
$('#tool_rulers').on("click", toggleRulers);
|
||||
|
||||
const workarea = document.getElementById("workarea");
|
||||
const svgcanvas = document.getElementById("svgcanvas");
|
||||
const ruler_x = document.getElementById("ruler_x");
|
||||
const ruler_y = document.getElementById("ruler_y");
|
||||
|
||||
function toggleRulers(){
|
||||
editor.menu.flash($('#view_menu'));
|
||||
var rulers = !$('#tool_rulers').hasClass('push_button_pressed');
|
||||
|
|
@ -23,9 +28,9 @@ MD.Rulers = function(){
|
|||
state.set("canvasRulers", false);
|
||||
}
|
||||
|
||||
workarea.scroll(function() {
|
||||
$('#ruler_x')[0].scrollLeft = workarea[0].scrollLeft;
|
||||
$('#ruler_y')[0].scrollTop = workarea[0].scrollTop;
|
||||
workarea.addEventListener("scroll", function() {
|
||||
ruler_x.scrollLeft = workarea.scrollLeft;
|
||||
ruler_y.scrollTop = workarea.scrollTop;
|
||||
});
|
||||
|
||||
var r_intervals = [];
|
||||
|
|
@ -36,14 +41,8 @@ MD.Rulers = function(){
|
|||
}
|
||||
|
||||
function update(zoom) {
|
||||
|
||||
var workarea = document.getElementById("workarea");
|
||||
var title_show = document.getElementById("title_show");
|
||||
var offset_x = 66;
|
||||
var offset_y = 48;
|
||||
const gray = getComputedStyle(document.body).getPropertyValue('--z6') || "#999";
|
||||
if(!zoom) zoom = svgCanvas.getZoom();
|
||||
const scanvas = $("#svgcanvas");
|
||||
|
||||
var limit = 30000;
|
||||
var c_elem = svgCanvas.getContentElem();
|
||||
var units = svgedit.units.getTypeMap();
|
||||
|
|
@ -54,18 +53,12 @@ MD.Rulers = function(){
|
|||
var dim = is_x ? 'x' : 'y';
|
||||
var lentype = is_x ?'width':'height';
|
||||
var notlentype = is_x ?'height':'width';
|
||||
var content_d = c_elem.getAttribute(dim)-0;
|
||||
|
||||
var $hcanv_orig = $('#ruler_' + dim + ' canvas:first');
|
||||
|
||||
// Bit of a hack to fully clear the canvas in Safari & IE9
|
||||
$hcanv = $hcanv_orig.clone();
|
||||
$hcanv_orig.replaceWith($hcanv);
|
||||
|
||||
var hcanv = $hcanv[0];
|
||||
var content_d = c_elem.getAttribute(dim);
|
||||
|
||||
var hcanv = document.querySelector('#ruler_' + dim + ' canvas');
|
||||
|
||||
// Set the canvas size to the width of the container
|
||||
var ruler_len = scanvas[lentype]()*2;
|
||||
var ruler_len = svgcanvas[lentype === "width" ? "offsetWidth" : "offsetHeight"]*2;
|
||||
var total_len = ruler_len;
|
||||
hcanv.parentNode.style[lentype] = total_len + 'px';
|
||||
|
||||
|
|
@ -73,18 +66,16 @@ MD.Rulers = function(){
|
|||
var ctx_num = 0;
|
||||
var ctx_arr;
|
||||
var ctx = hcanv.getContext("2d");
|
||||
var scale = window.devicePixelRatio || 1;
|
||||
var scale = window.devicePixelRatio*2 || 1;
|
||||
hcanv.style[lentype] = total_len + "px";
|
||||
hcanv.style[notlentype] = 15 + "px";
|
||||
hcanv[lentype] = Math.floor(total_len * scale);
|
||||
hcanv[notlentype] = Math.floor(15 * scale);
|
||||
ctx.scale(scale,scale);
|
||||
|
||||
ctx.fillStyle = "rgb(200,0,0)";
|
||||
ctx.fillRect(0,0,hcanv.width/scale,hcanv.height/scale);
|
||||
|
||||
// Remove any existing canvasses
|
||||
$hcanv.siblings().remove();
|
||||
$(hcanv).siblings().remove();
|
||||
|
||||
// Create multiple canvases when necessary (due to browser limits)
|
||||
if(ruler_len >= limit) {
|
||||
|
|
@ -120,17 +111,18 @@ MD.Rulers = function(){
|
|||
}
|
||||
|
||||
var big_int = multi * u_multi;
|
||||
ctx.font = "normal 9px 'Verdana', sans-serif";
|
||||
ctx.fillStyle = "#777";
|
||||
ctx.font = "600 9px -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif";
|
||||
ctx.fillStyle = gray;
|
||||
ctx.strokeStyle = gray;
|
||||
ctx.scale(scale,scale);
|
||||
|
||||
var ruler_d = ((content_d / u_multi) % multi) * u_multi;
|
||||
var ruler_d = ((content_d / u_multi) % multi) * u_multi - 50;
|
||||
var label_pos = ruler_d - big_int;
|
||||
for (; ruler_d < total_len; ruler_d += big_int) {
|
||||
label_pos += big_int;
|
||||
var real_d = ruler_d - content_d;
|
||||
|
||||
var cur_d = Math.round(ruler_d) + .5;
|
||||
var cur_d = Math.round(ruler_d);
|
||||
if(is_x) {
|
||||
ctx.moveTo(cur_d, 15);
|
||||
ctx.lineTo(cur_d, 0);
|
||||
|
|
@ -155,12 +147,12 @@ MD.Rulers = function(){
|
|||
|
||||
if(is_x) {
|
||||
ctx.fillText(label, ruler_d+2, 8);
|
||||
ctx.fillStyle = "#777";
|
||||
ctx.fillStyle = gray;
|
||||
} else {
|
||||
var str = (label+'').split('');
|
||||
for(var i = 0; i < str.length; i++) {
|
||||
ctx.fillText(str[i], 1, (ruler_d+9) + i*9);
|
||||
ctx.fillStyle = "#777";
|
||||
ctx.fillStyle = gray;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -190,7 +182,7 @@ MD.Rulers = function(){
|
|||
}
|
||||
}
|
||||
}
|
||||
ctx.strokeStyle = "#666";
|
||||
ctx.strokeStyle = gray;
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue