Modify vc
diff --git a/public/css/vc.css b/public/css/vc.css
index 0474e36..0b25c66 100644
--- a/public/css/vc.css
+++ b/public/css/vc.css
@@ -9,9 +9,10 @@
background-color: #7ba400;
color: white;
font-family: tahoma, verdana, arial;
+ font-size: 10pt;
}
-.vc span + span {
+.vc .doc > span + span {
margin-left: 5pt;
}
@@ -19,13 +20,18 @@
position: relative;
background-color: #7ba400;
color: white;
- margin-left: 2em;
display: inline-block;
border-radius: 10px;
- border-width: 0 3px 0 3px;
border-style: solid;
- padding-left: 10px;
- padding-right: 10px;
+
+ /* See margin-left in docGroup::before */
+ margin-left: 2.8em;
+ border-width: 0 3px 0 3px;
+ padding: .6em .5em;
+}
+
+.vc > .docGroup {
+ margin-left: 0;
}
.vc .operators {
@@ -36,13 +42,10 @@
line-height: 0;
}
-.vc .operators > span,
-.vc .docGroup::before {
+.vc .operators > span {
+ cursor: pointer;
font-size: 9pt;
line-height: 1.3em;
-}
-
-.vc .operators > span {
padding: 0 4px;
display: inline-block;
}
@@ -52,6 +55,12 @@
color: #7ba400;
}
+.vc .doc > .operators > span.and {
+ border-radius: inherit;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
.vc .operators > span.or {
background-color: #ffa500;
color: white;
@@ -63,23 +72,101 @@
color: white;
}
+.vc .doc > .operators > span.delete {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+.vc .doc > .operators {
+ margin-left: 10px;
+}
+
+.vc .docGroup[data-operation=or] > .doc::before,
+.vc .docGroup[data-operation=or] > .docGroup::before {
+ content: "oder";
+}
+
+.vc .docGroup[data-operation=and] > .doc::before,
+.vc .docGroup[data-operation=and] > .docGroup::before {
+ content: "und";
+}
+
+.vc .docGroup[data-operation] > .doc:first-child::before,
+.vc .docGroup[data-operation] > .docGroup:first-child::before {
+ content: '';
+}
+
+.vc .docGroup[data-operation] > .doc::before,
+.vc .docGroup[data-operation] > .docGroup::before {
+ display: inline-block;
+ text-align: right;
+ width: 2.2em;
+}
+
+
+.vc .docGroup[data-operation] > .doc::before {
+ padding-right: 1.2em;
+}
+
+.vc .docGroup[data-operation] > .docGroup::before {
+ position: absolute;
+}
+
+.vc .docGroup[data-operation] > .doc::before {
+ margin-right: .1em;
+}
+
+.vc .docGroup > .docGroup::before {
+ margin-left: -3.4em;
+}
+
+/*
.vc .docGroup[data-operation=and]::before,
.vc .docGroup[data-operation=and] .operators {
background-color: white;
}
+*/
+
+.vc .docGroup[data-operation] > .doc::before,
+.vc .docGroup[data-operation] > .docGroup::before {
+ color: #496000;
+}
.vc .docGroup[data-operation=or] {
border-color: #ffa500;
}
-.vc .docGroup[data-operation=or]::before,
-.vc .docGroup[data-operation=or] .operators {
+.vc .docGroup[data-operation=or] > .operators {
border-color: #ffa500;
background-color: #ffa500;
color: white;
}
-.vc .docGroup::before,
+.docGroup > .operators {
+ z-index: 30;
+}
+
+.docGroup .docGroup > .operators {
+ z-index: 31;
+}
+
+.docGroup .docGroup .docGroup > .operators {
+ z-index: 32;
+}
+
+.docGroup .docGroup .docGroup .docGroup > .operators {
+ z-index: 33;
+}
+
+.docGroup .docGroup .docGroup .docGroup .docGroup > .operators {
+ z-index: 34;
+}
+
+.vc .doc > span.key,
+.vc .doc > span.value {
+ font-weight: bold;
+}
+
.vc .operators {
color: #7ba400;
border-color: white;
@@ -88,7 +175,6 @@
border-style: solid;
}
-.vc .docGroup::before,
.vc .docGroup > .operators {
position: absolute;
display: block;
@@ -96,29 +182,9 @@
vertical-align: middle;
}
-
-
-.vc .docGroup::before {
- width: 3em;
- /* width */
- left: -3em;
- /* border sizes (own and reals) */
- margin-left: -5px;
- border-width: 2px 0 2px 2px;
- border-top-left-radius: 7px;
- border-bottom-left-radius: 7px;
-}
-
-.vc .docGroup[data-operation=and]::before {
- content: "und";
-}
-
-.vc .docGroup[data-operation=or]::before {
- content: "oder";
-}
-
.vc .doc > .operators {
display: inline-block;
+ border-color: #ffa500;
border-width: 2px 2px 2px 2px;
border-radius: 7px;
}
@@ -129,6 +195,7 @@
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
margin-left: 100%;
+ padding: 0;
}
.vc .docGroup:hover {