comparison popoto_dev/src/css/popotojs-svg.css @ 12:d67c5ad47709

implementation with dropdown popup, unfinished
author alistair
date Fri, 02 Oct 2015 01:08:46 -0400
parents
children
comparison
equal deleted inserted replaced
11:5674d1cf5ab2 12:d67c5ad47709
1 /*
2 * Copyright (C) 2014 Frederic Ciminera
3 *
4 * Popoto.js is free software: you can redistribute it and/or modify
5 * it under the terms of the GNU General Public License as published by
6 * the Free Software Foundation, either version 3 of the License, or
7 * (at your option) any later version.
8 *
9 * Popoto.js is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details.
13 *
14 * You should have received a copy of the GNU General Public License
15 * along with this program. If not, see <http://www.gnu.org/licenses/>.
16 *
17 * contact@popotojs.com
18 */
19
20 .ppt-svg-graph {
21 cursor: move;
22 min-height: 100px;
23 width: 100%;
24 height: 100%;
25 pointer-events: all;
26 }
27
28 /******************Node Styles*************************/
29 .ppt-node-ellipse {
30 stroke: #ffffff;
31 stroke-width: 4px;
32 }
33
34 .ppt-node-ellipse.root {
35 fill: #2aa1d3;
36 }
37
38 .ppt-node-ellipse.root.disabled {
39 fill: #2e3138;
40 stroke: #525863;
41 }
42
43 .ppt-node-ellipse.choose {
44 fill: #8bb71a;
45 }
46
47 .ppt-node-ellipse.choose.disabled {
48 fill: #2e3138;
49 stroke: #525863;
50 }
51
52 .ppt-node-ellipse.value {
53 fill: #f0b017;
54 }
55
56 .ppt-node-ellipse.selected-value {
57 fill: #ee4e10;
58 }
59
60 .ppt-node-ellipse.selected-root-value {
61 fill: #8F5BCC;
62 }
63
64 .ppt-node-ellipse.group {
65 fill: #525863;
66 }
67
68 .ppt-node-ellipse.disabled {
69 fill: #2e3138;
70 stroke: #525863;
71 }
72
73 /* Node background*/
74 .ppt-g-node-background {
75 cursor: pointer;
76 }
77
78 .ppt-node-background-circle {
79 fill-opacity: 0;
80 }
81
82 .ppt-node-background-circle.root {
83 fill: #233E7E;
84 }
85
86 .ppt-node-background-circle.choose {
87 fill: #628b1a;
88 }
89
90 .ppt-node-background-circle.value {
91 fill: #c28a17;
92 }
93
94 .ppt-node-background-circle.selected-value {
95 fill: #c24b30;
96 }
97
98 .ppt-node-background-circle.selected-root-value {
99 fill: #765ab4;
100 }
101
102 .ppt-node-background-circle.group {
103 fill: #3f4450;
104 }
105
106 .ppt-node-background-circle.disabled {
107 fill: #3f4450;
108 }
109
110 /* Node middleground */
111 .ppt-g-node-middleground {
112 cursor: pointer;
113 }
114
115 /* Node foreground */
116 .ppt-g-node-foreground {
117 cursor: pointer;
118 }
119
120 .ppt-count-box.value {
121 fill: #8bb71a;
122 stroke: #ffffff;
123 stroke-width: 2px;
124 }
125
126 .ppt-count-box.root {
127 fill: #ee4e10;
128 stroke: #ffffff;
129 stroke-width: 2px;
130 }
131
132 .ppt-count-box.root.disabled {
133 fill: #2e3138;
134 stroke: #525863;
135 }
136
137 .ppt-count-box.value.disabled {
138 fill: #2e3138;
139 stroke: #525863;
140 }
141
142 .ppt-count-text {
143 fill: white;
144 }
145
146 .ppt-count-text.disabled {
147 fill: #525863;
148 }
149
150 .ppt-rel-plus-icon {
151 }
152
153 .ppt-rel-plus-icon.disabled {
154 display: none;
155 }
156
157 .ppt-rel-plus-background {
158 fill: #f0b017;
159 fill-opacity: 0;
160 }
161
162 .ppt-rel-plus-path {
163 fill: #ff0000;
164 }
165
166 .ppt-rel-minus-icon {
167 }
168
169 .ppt-rel-minus-icon.disabled {
170 display: none;
171 }
172
173 .ppt-rel-minus-path {
174 fill: #ff0000;
175 }
176
177 .ppt-rel-minus-background {
178 fill: #f0b017;
179 fill-opacity: 0;
180 }
181
182 /******************Tool Styles*************************/
183 .ppt-node-foreground-g-arrows {
184 display: none;
185 }
186
187 .ppt-node-foreground-g-arrows.active {
188 display: block;
189 }
190
191 .ppt-arrow {
192 fill: #ffffff;
193 }
194
195 .ppt-larrow {
196 stroke: #ffffff;
197 stroke-width: 4px;
198 fill: #525863;
199 }
200
201 .ppt-rarrow {
202 stroke: #ffffff;
203 stroke-width: 4px;
204 fill: #525863;
205 }
206
207 .ppt-larrow.enabled {
208 fill: #2aa1d3;
209 }
210
211 .ppt-rarrow.enabled {
212 fill: #2aa1d3;
213 }
214
215 /******************Link Styles*************************/
216
217 /* Links */
218 .ppt-link-relation {
219 stroke: #2aa1d3;
220 stroke-width: 2px;
221 stroke-dasharray: 9, 5;
222 }
223
224 .ppt-link-relation.value {
225 stroke: #ee4e10;
226 }
227
228 .ppt-link-relation.value.ppt-link-hover {
229 stroke: #ee4e10;
230 }
231
232 .ppt-link-relation.disabled {
233 stroke: #2e3138;
234 stroke-width: 2px;
235 stroke-dasharray: 9, 5;
236 }
237
238 .ppt-link-value {
239 stroke: #525863;
240 stroke-width: 2px;
241 stroke-dasharray: 9, 5;
242 }
243
244 .ppt-link-hover {
245 stroke: #ee4e10;
246 }
247
248 .ppt-link-text-relation {
249 fill: #ffffff;
250 }
251
252 .ppt-link-text-relation.value {
253 fill: #ffffff;
254 }
255
256 .ppt-link-text-relation.disabled {
257 fill: #525863;
258 }
259
260 .ppt-link-text-value {
261 fill: #525863;
262 }
263
264 /* text in nodes*/
265 .ppt-node-text-root {
266 fill: #ffffff;
267 }
268
269 .ppt-node-text-root.disabled {
270 fill: #525863;
271 }
272
273 .ppt-node-text-choose {
274 fill: #ffffff;
275 }
276
277 .ppt-node-text-choose.disabled {
278 fill: #525863;
279 }
280
281 .ppt-node-text-value {
282 fill: #ffffff;
283 }
284
285 .ppt-node-text-group {
286 fill: #ffffff;
287 }