Commit 1b6d982e authored by Jonathan Wilkes's avatar Jonathan Wilkes
Browse files

update svg grid background with preset changes, clean up css a bit

parent dbef0fe7
......@@ -112,6 +112,21 @@ mark.console_find_highlighted {
background-color: #3e32a2;
}
/* svg background image. We actually have to parse the CSS file and set
these manually in javascript, so don't change the selectors or remove
the props here... */
#svg_cell {
stroke: #5347b5;
}
#svg_grid {
stroke: #6458c6;
}
#svg_fg {
fill: #bbb;
}
#selection_rectangle {
stroke: #7c71da;
}
......@@ -178,7 +193,6 @@ mark.console_find_highlighted {
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
color: #a49aea; /* text color */
background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
......@@ -186,21 +200,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid #a49aea;
background-color: #3e32a2;
}
#new_object_textentry.msg {
outline: 0px solid #a49aea;
background-image: url(../msg-box.svg);
}
p.msg::after {
content: "";
height: 100%;
width: 5px;
background-image: url(../msg-box-flag.svg);
position: absolute;
top: 0%;
left: 100%;
background-color: transparent;
}
/* not sure what this is doing here... */
......
......@@ -225,6 +225,21 @@ mark.console_find_highlighted {
background-color: white;
}
/* svg background image. We actually have to parse the CSS file and set
these manually in javascript, so don't change the selectors or remove
the props here... */
#svg_cell {
stroke: #ddd;
}
#svg_grid {
stroke: #bbb;
}
#svg_fg {
fill: #bbb;
}
#selection_rectangle {
stroke: #e87216;
}
......@@ -294,7 +309,6 @@ mark.console_find_highlighted {
margin-left: 1px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
color: black; /* text color */
background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
......@@ -302,27 +316,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 2px solid #e87216;
background-color: white;
}
/* We're dynamically creating the svg background data in javascript
(in pdgui.js) so that we can change the stroke color of the svg msg box.
We store the color as the third argument to "outline" below. Since the
outline is 0px it won't show up-- this allows us specify the color here
in the style sheet and retrieve it in javascript when we build the svg
background. */
#new_object_textentry.msg {
outline: 0px solid #e87216;
/* background-image: url(../msg-box.svg); */
}
p.msg::after {
content: "";
height: 100%;
width: 5px;
/* background-image: url(../msg-box-flag.svg); */
position: absolute;
top: 0%;
left: 100%;
background-color: transparent;
}
/* not sure what this is doing here... */
......
......@@ -106,6 +106,21 @@ mark.console_find_highlighted {
font-family: "DejaVu Sans Mono";
}
/* svg background image. We actually have to parse the CSS file and set
these manually in javascript, so don't change the selectors or remove
the props here... */
#svg_cell {
stroke: #ddd;
}
#svg_grid {
stroke: #bbb;
}
#svg_fg {
fill: #bbb;
}
#selection_rectangle {
stroke: black;
}
......@@ -171,7 +186,6 @@ mark.console_find_highlighted {
display: table-cell;
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
......@@ -179,21 +193,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid blue;
background-color: #f8f8f6;
}
#new_object_textentry.msg {
outline: 0px solid blue;
background-image: url(../msg-box.svg);
}
p.msg::after {
content: "";
height: 100%;
width: 5px;
background-image: url(../msg-box-flag.svg);
position: absolute;
top: 0%;
left: 100%;
background-color: transparent;
}
/* not sure what this is doing here... */
......
......@@ -224,6 +224,21 @@ mark.console_find_highlighted {
background-color: white;
}
/* svg background image. We actually have to parse the CSS file and set
these manually in javascript, so don't change the selectors or remove
the props here... */
#svg_cell {
stroke: #ddd;
}
#svg_grid {
stroke: #bbb;
}
#svg_fg {
fill: #bbb;
}
#selection_rectangle {
stroke: #e87216;
}
......@@ -291,7 +306,6 @@ mark.console_find_highlighted {
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
color: black; /* text color */
background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
......@@ -299,27 +313,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid #e87216;
background-color: #f8f8f6;
}
/* We're dynamically creating the svg background data in javascript
(in pdgui.js) so that we can change the stroke color of the svg msg box.
We store the color as the third argument to "outline" below. Since the
outline is 0px it won't show up-- this allows us specify the color here
in the style sheet and retrieve it in javascript when we build the svg
background. */
#new_object_textentry.msg {
outline: 0px solid #e87216;
/* background-image: url(../msg-box.svg); */
}
p.msg::after {
content: "";
height: 100%;
width: 5px;
/* background-image: url(../msg-box-flag.svg); */
position: absolute;
top: 0%;
left: 100%;
background-color: transparent;
}
/* not sure what this is doing here... */
......
......@@ -121,6 +121,21 @@ mark.console_find_highlighted {
background-color: black;
}
/* svg background image. We actually have to parse the CSS file and set
these manually in javascript, so don't change the selectors or remove
the props here... */
#svg_cell {
stroke: #222;
}
#svg_grid {
stroke: #444;
}
#svg_fg {
fill: #bbb;
}
#selection_rectangle {
stroke: white;
}
......@@ -190,7 +205,6 @@ mark.console_find_highlighted {
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
color: white; /* text color */
background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
......@@ -198,21 +212,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid #ffff00;
background-color: #090707;
}
#new_object_textentry.msg {
outline: 0px solid #ffff00;
background-image: url(../msg-box.svg);
}
p.msg::after {
content: "";
height: 100%;
width: 5px;
background-image: url(../msg-box-flag.svg);
position: absolute;
top: 0%;
left: 100%;
background-color: transparent;
}
/* not sure what this is doing here... */
......
......@@ -115,6 +115,21 @@ mark.console_find_highlighted {
background-color: #fdf6e3;
}
/* svg background image. We actually have to parse the CSS file and set
these manually in javascript, so don't change the selectors or remove
the props here... */
#svg_cell {
stroke: #ddd;
}
#svg_grid {
stroke: #bbb;
}
#svg_fg {
fill: #bbb;
}
#selection_rectangle {
stroke: #073642;
}
......@@ -182,7 +197,6 @@ mark.console_find_highlighted {
display: table-cell;
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
......@@ -191,21 +205,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid #268bd2;
background-color: #fdf6e3;
}
#new_object_textentry.msg {
outline: 0px solid #268bd2;
background-image: url(../msg-box.svg);
}
p.msg::after {
content: "";
height: 100%;
width: 5px;
background-image: url(../msg-box-flag.svg);
position: absolute;
top: 0%;
left: 100%;
background-color: transparent;
}
/* not sure what this is doing here... */
......
......@@ -115,6 +115,21 @@ mark.console_find_highlighted {
background-color: #002b36;
}
/* svg background image. We actually have to parse the CSS file and set
these manually in javascript, so don't change the selectors or remove
the props here... */
#svg_cell {
stroke: #444;
}
#svg_grid {
stroke: #555;
}
#svg_fg {
fill: #bbb;
}
#selection_rectangle {
stroke: #b58900;
}
......@@ -182,7 +197,6 @@ mark.console_find_highlighted {
display: table-cell;
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
......@@ -191,21 +205,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid #b58900;
background-color: #002b36;
}
#new_object_textentry.msg {
outline: 0px solid #b58900;
background-image: url(../msg-box.svg);
}
p.msg::after {
content: "";
height: 100%;
width: 5px;
background-image: url(../msg-box-flag.svg);
position: absolute;
top: 0%;
left: 100%;
background-color: transparent;
}
/* not sure what this is doing here... */
......
......@@ -112,6 +112,21 @@ mark.console_find_highlighted {
background-color: black;
}
/* svg background image. We actually have to parse the CSS file and set
these manually in javascript, so don't change the selectors or remove
the props here... */
#svg_cell {
stroke: #222;
}
#svg_grid {
stroke: #333;
}
#svg_fg {
fill: #bbb;
}
#selection_rectangle {
stroke: #53b83b;
}
......@@ -180,7 +195,6 @@ mark.console_find_highlighted {
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
color: #4bd046;
background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
......@@ -188,21 +202,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid #0b560b;
background-color: black;
}
#new_object_textentry.msg {
outline: 0px solid #0b560b;
background-image: url(../msg-box.svg);
}
p.msg::after {
content: "";
height: 100%;
width: 5px;
background-image: url(../msg-box-flag.svg);
position: absolute;
top: 0%;
left: 100%;
background-color: transparent;
}
/* not sure what this is doing here... */
......
......@@ -112,6 +112,21 @@ mark.console_find_highlighted {
background-color: #c0dcc0;
}
/* svg background image. We actually have to parse the CSS file and set
these manually in javascript, so don't change the selectors or remove
the props here... */
#svg_cell {
stroke: #bdc9bd;
}
#svg_grid {
stroke: #a6c1a6;
}
#svg_fg {
fill: #bbb;
}
#selection_rectangle {
stroke: #333333;
}
......@@ -179,7 +194,6 @@ mark.console_find_highlighted {
display: table-cell;
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
......@@ -187,21 +201,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid blue;
background-color: #c0dcc0;
}
#new_object_textentry.msg {
outline: 0px solid blue;
background-image: url(../msg-box.svg);
}
p.msg::after {
content: "";
height: 100%;
width: 5px;
background-image: url(../msg-box-flag.svg);
position: absolute;
top: 0%;
left: 100%;
background-color: transparent;
}
/* not sure what this is doing here... */
......@@ -328,7 +333,7 @@ text {
/* for an object that didn't create */
.obj .border.broken_border {
fill: transparent;
fill: #c0dcc0;
stroke: #f00;
stroke-dasharray: 3 2;
}
......
......@@ -106,6 +106,21 @@ mark.console_find_highlighted {
background-color: white;
}
/* svg background image. We actually have to parse the CSS file and set
these manually in javascript, so don't change the selectors or remove
the props here... */
#svg_cell {
stroke: #bdc9bd;
}
#svg_grid {
stroke: #a6c1a6;
}
#svg_fg {
fill: #bbb;
}
#selection_rectangle {
stroke: black;
}
......@@ -172,7 +187,6 @@ mark.console_find_highlighted {
display: table-cell;
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
......@@ -180,21 +194,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid blue;
background-color: transparent;
}
#new_object_textentry.msg {
outline: 0px solid blue;
background-image: url(../msg-box.svg);
}
p.msg::after {
content: "";
height: 100%;
width: 5px;
background-image: url(../msg-box-flag.svg);
position: absolute;
top: 0%;
left: 100%;
background-color: transparent;
}
/* not sure what this is doing here... */
......
......@@ -112,6 +112,21 @@ mark.console_find_highlighted {
background-color: black;
}
/* svg background image. We actually have to parse the CSS file and set
these manually in javascript, so don't change the selectors or remove
the props here... */
#svg_cell {
stroke: #222;
}
#svg_grid {
stroke: #444;
}
#svg_fg {
fill: #bbb;
}
#selection_rectangle {
stroke: white;
}
......@@ -183,7 +198,6 @@ mark.console_find_highlighted {
padding: 1px 0px 3px 1.5px;
/* box-shadow: inset 1px 0px 0px 1px #000; */
color: white; /* text color */
background-color: transparent;
white-space: pre-wrap;
overflow-wrap: break-word;
-webkit-margin-before: 0px;
......@@ -191,21 +205,12 @@ mark.console_find_highlighted {
#new_object_textentry.obj {
outline: 1px solid yellow;
background-color: transparent;
}
#new_object_textentry.msg {
outline: 0px solid yellow;
background-image: url(../msg-box.svg);
}
p.msg::after {
content: "";
height: 100%;
width: 5px;
background-image: url(../msg-box-flag.svg);
position: absolute;
top: 0%;
left: 100%;
background-color: transparent;
}
/* not sure what this is doing here... */
......
......@@ -3,8 +3,7 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/dejavu.css">
<link id="page_style" rel="stylesheet"
type="text/css" href="css/default.css">
<link id="page_style" rel="stylesheet" type="text/css">
<title></title>
</head>
<body class="patch_body">
......
......@@ -1408,7 +1408,8 @@ function get_grid_coords(cid, svg_elem) {
function create_svg_lock(cid) {
var zoom = patchwin[cid].zoomLevel,
size;
size,
col = bg_style.svg_fg;
// adjust for zoom level