Skip to content

Commit 0f0586c

Browse files
hmskleehmsklee
authored
Merge pull request #11 from CreativeCodingLab/refxr
Refxr
2 parents cfa2c0f + d76fccd commit 0f0586c

25 files changed

+10916
-456
lines changed

‎css/style.css‎

Lines changed: 60 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,36 +14,25 @@ svg text {
1414
user-select: none;
1515
}
1616

17-
#header {
17+
/*#header {
1818
position:absolute;
1919
top:0;
2020
left:0;
2121
background:#333;
2222
color:white;
2323
width:calc( 100% - 20px );
2424
padding:10px;
25-
}
25+
}*/
2626

2727
#drawing {
2828
margin-top:30px;
2929
margin-bottom: 210px;
3030
}
31-
32-
button {
33-
position:absolute;
34-
background:white;
35-
border:none;
36-
outline:none;
37-
cursor:pointer;
38-
}
39-
40-
.node { cursor: pointer; }
41-
.link, .link--dashed {
42-
fill: none;
43-
stroke: #999;
31+
#drawing.bracket-left, #drawing.bracket-left rect {
32+
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAZCAYAAADnstS2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NDQxNzM1NTQ2MUMxMUU3QTRFNDkxNDI3MkNCQjJGRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4NDQxNzM1NjQ2MUMxMUU3QTRFNDkxNDI3MkNCQjJGRCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjg0NDE3MzUzNDYxQzExRTdBNEU0OTE0MjcyQ0JCMkZEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjg0NDE3MzU0NDYxQzExRTdBNEU0OTE0MjcyQ0JCMkZEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+3b/Z1wAAAR5JREFUeNrMlE2KhDAQhZNoEH9AT6E7TzJzDfEW3sFTuHA5YJ+h98qgbgbBvStxQGtSYSLdTJrWTTMFCSZ+9awqeFIAIEfDxG1ZFmjblqzrSiilchmGQaZpIrZtkziOP8T5naBy0zTg+z6YpgniJXDO8XMQhiGUZTmioKwAt7quwXEcCQhVmZSmKYzj+IVglmVsh1HZ8zwJYkKe53sjSZLwO2WEXdeVIK6qqhTMVRJyTB2wKRXzPKvH7XYa7DZzv2RMOzqt8qPQKj+Fj8QLyjilfKrmfwhv23YcRnf8hvEQVuPr+15dfd8xOqegrdApwzBctU4JguCPB6MogqIoPpUoxQ3d3XXd3hiWIxKluy3LWoW7L8Ldb/TMf+NHgAEAjFyqDEH528wAAAAASUVORK5CYII='), e-resize !important;
4433
}
45-
.link--dashed {
46-
stroke-dasharray: 2,2;
34+
#drawing.bracket-right, #drawing.bracket-right rect {
35+
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAZCAYAAADnstS2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4NDQxNzM1MTQ2MUMxMUU3QTRFNDkxNDI3MkNCQjJGRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4NDQxNzM1MjQ2MUMxMUU3QTRFNDkxNDI3MkNCQjJGRCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjg0NDE3MzRGNDYxQzExRTdBNEU0OTE0MjcyQ0JCMkZEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjg0NDE3MzUwNDYxQzExRTdBNEU0OTE0MjcyQ0JCMkZEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7MeYRQAAARlJREFUeNrEVEuKhDAQzUcRP6CXUK8yizmHeAvv4ClcuJsB7zBLQZmFm0HwCmKjpvMCpu3pYWxXXZCiEl69VIp6oUII8qwZcMuyfNR1/T6OI/F9H3sCEizOOYmiiFiWRcnGXJblIA+xEaZpCtu2hWEYQiaLtm2FwsFlWcaQMAzDT5qmCkQpVYmO44imaW5gWJIk5lZbnucKiATP8+6Zd6YSqqpSYCzXdTWY/XrwCoeHbibZdcz+ahFjt+P9zeyot4fMezvFfFfe68o4xXyq5heC13V9Cszh5OAfghFfEHRd99A23fRNKX3ff0EpkNW/SimK4juO4wcNBkGgh5/CSTV/SnW/TdPEoe55njUJZjsMQ6VueubfuAowAPZKsAzs/sUoAAAAAElFTkSuQmCC'), w-resize !important;
4736
}
4837

4938
#graph {
@@ -59,7 +48,7 @@ button {
5948
}
6049

6150
#graph:before {
62-
cursor:ns-resize;
51+
cursor:row-resize;
6352
content:'';
6453
width:100%;
6554
height:7px;
@@ -70,10 +59,62 @@ button {
7059
display:block;
7160
}
7261

62+
#graph button {
63+
position:absolute;
64+
}
65+
66+
#toggle-minimap {
67+
display:block;
68+
cursor:pointer;
69+
}
70+
#search-minimap {
71+
display:block;
72+
width:100px;
73+
}
74+
#minimap {
75+
pointer-events:none;
76+
position:fixed;
77+
z-index:100;
78+
top:40px;
79+
right:0;
80+
}
81+
#minimap * {
82+
pointer-events: all;
83+
}
84+
85+
#minimap canvas {
86+
background:rgba(200,200,200,0.5);
87+
margin-top:5px;
88+
width:100px;
89+
height:100px;
90+
}
91+
92+
.noselect {
93+
-webkit-touch-callout: none; /* iOS Safari */
94+
-webkit-user-select: none; /* Safari */
95+
-khtml-user-select: none; /* Konqueror HTML */
96+
-moz-user-select: none; /* Firefox */
97+
-ms-user-select: none; /* Internet Explorer/Edge */
98+
user-select: none; /* Non-prefixed version, currently
99+
supported by Chrome and Opera */
100+
}
101+
73102
/* svg classes */
74103
#drawing text, .link--labels text {
75104
pointer-events: none;
76105
}
106+
#drawing text {
107+
text-anchor: middle;
108+
}
109+
110+
.node { cursor: pointer; }
111+
.link, .link--dashed {
112+
fill: none;
113+
stroke: #999;
114+
}
115+
.link--dashed {
116+
stroke-dasharray: 2,2;
117+
}
77118

78119
.row--0, .link--label {
79120
fill: #f6f6f6;
@@ -103,4 +144,4 @@ button {
103144
}
104145
.word:hover .word--handle {
105146
opacity: 0.7;
106-
}
147+
}

‎css/style2.css‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
body {
2+
margin:0;
3+
-moz-osx-font-smoothing:grayscale;
4+
-webkit-font-smoothing:antialiased;
5+
font-family: BrownPro, Brown, futura, helvetica, arial, sans-serif;
6+
font-size: 11px;
7+
min-height:100%;
8+
overflow-y: scroll;
9+
}
10+
11+
svg text {
12+
cursor: default;
13+
-webkit-user-select: none;
14+
-moz-user-select: none;
15+
-ms-user-select: none;
16+
user-select: none;
17+
}
18+
19+
#header {
20+
position:fixed;
21+
z-index:100;
22+
background:#555;
23+
width:100%;
24+
height:40px;
25+
top:0;
26+
font: 14px/1.5em helvetica, arial, sans-serif;
27+
}
28+
29+
#options {
30+
float:right;
31+
display:inline-block;
32+
background:inherit;
33+
color:white;
34+
}
35+
#dataset,
36+
#options button {
37+
color:white;
38+
height:40px;
39+
padding: 0 20px;
40+
background: none;
41+
outline:none;
42+
cursor:pointer;
43+
font:inherit;
44+
border:none;
45+
}
46+
#options button {
47+
border: 1px solid #999;
48+
border-width:0 0 0 1px;
49+
border-radius:0;
50+
}
51+
#options.open button {
52+
background: #333;
53+
border-color: #555;
54+
border-width:0 0 1px 0;
55+
}
56+
#options ul {
57+
display:none;
58+
margin:0;
59+
list-style-type: none;
60+
padding: 4px 0;
61+
background: #333;
62+
}
63+
#options > ul {
64+
position:absolute;
65+
min-width:125px;
66+
padding: 10px;
67+
padding-left: 0;
68+
right: 0;
69+
}
70+
#options.open ul {
71+
display:block;
72+
}
73+
#options li {
74+
padding: 3px 10px;
75+
padding-right: 0;
76+
}
77+
#options li input[type="checkbox"] {
78+
margin-right: 5px;
79+
}
80+
81+
#tooltip {
82+
width:175px;
83+
background:hsl(40,10%,98%);
84+
margin-bottom:10px;
85+
box-shadow: 0 0 10px #555;
86+
border-radius:3px;
87+
position:absolute;
88+
padding: 8px 0;
89+
font: 14px helvetica, arial, sans-serif;
90+
font-weight: 400;
91+
color:#444;
92+
display:none;
93+
}
94+
#tooltip.active {
95+
display:block;
96+
}
97+
#tooltip p {
98+
padding: 4px 14px;
99+
margin:0;
100+
cursor:default;
101+
}
102+
#tooltip p:hover {
103+
background-color: rgb(77, 157, 250);
104+
color:white;
105+
}
106+
#tooltip hr {
107+
border-width: 0;
108+
border-top:1px solid #ddd;
109+
}
110+
111+
112+
/* svg styles for main vis */
113+
#main {
114+
margin-top:40px;
115+
position:relative;
116+
}
117+
#main svg {
118+
background-color: hsl(40,10%,90%);
119+
}
120+
#main text {
121+
font-family: BrownPro, Brown, futura, helvetica, arial, sans-serif;
122+
text-anchor: middle;
123+
}
124+
.row-drag {
125+
stroke-width:2;
126+
stroke-dasharray: 2,1;
127+
stroke:rgba(100,100,100,0.3);
128+
transition: stroke 300ms ease;
129+
cursor: row-resize;
130+
}
131+
.row-drag:hover {
132+
stroke-dasharray:none;
133+
stroke:rgba(100,100,100,0.8);
134+
}
135+
136+
.word text {
137+
font-size:16px;
138+
fill:black;
139+
}
140+
.word path {
141+
stroke:#333;
142+
fill:none;
143+
}
144+
.word .word-text {
145+
cursor: pointer;
146+
}
147+
148+
.word-cluster text,
149+
.word .word-tag {
150+
font-size: 12px;
151+
cursor: text;
152+
}
153+
154+
.word-cluster text,
155+
.word .word-tag {
156+
fill:#333;
157+
}
158+
.word .syntax-tag {
159+
fill: rgb(208, 150, 143);
160+
}
161+
.toggle-syntax .syntax-tag, .toggle-syntax .syntax-link {
162+
display:none;
163+
}
164+
165+
.editing .word-tag,
166+
.editing text {
167+
fill: #fff;
168+
}
169+
.editing rect {
170+
fill:#a94442;
171+
}
172+
173+
.link path.polyline {
174+
stroke: #6590b4;
175+
fill: none;
176+
}
177+
.link {
178+
font-size: 12px;
179+
fill:#6590b4;
180+
stroke-width:1.5px;
181+
}
182+
.link.syntax-link {
183+
fill: #999;
184+
}
185+
.syntax-link path.polyline {
186+
stroke: #999;
187+
fill: none;
188+
}
189+
190+
.link:hover {
191+
stroke-width:2.5px;
192+
}

0 commit comments

Comments
 (0)