Skip to content

Commit 7dcb6b1

Browse files
kia-zkia-z
committedAug 16, 2024
main html, js, css
0 parents  commit 7dcb6b1

File tree

4 files changed

+1537
-0
lines changed

4 files changed

+1537
-0
lines changed
 

‎index.html

+223
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>RTI_UniGraz</title>
6+
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<meta charset="UTF-8" />
9+
10+
<!-- bootstrap -->
11+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
12+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
13+
14+
<!-- openlime style -->
15+
<link rel="icon" type="image/png" href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHdpZHRoPSI2MnB4IgogICBoZWlnaHQ9IjYycHgiCiAgIHZpZXdCb3g9IjAgMCA2MiA2MiIKICAgdmVyc2lvbj0iMS4xIj4KICA8Y2lyY2xlCiAgICAgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIgogICAgIHN0eWxlPSJvcGFjaXR5OjE7ZmlsbDojZmFjZDVhO2ZpbGwtb3BhY2l0eToxIgogICAgIGN4PSI0My44NDA2MjIiCiAgICAgY3k9IjAiCiAgICAgcj0iMjguODgxNjk3IiAvPgogIDxwYXRoCiAgICAgZD0ibSAzOC4zOTk2OTUsMjcuMDUxODA5IC03LjkzNjQzNiwtNC42MTIwMjIgLTEuMjY1OTc2LC0xLjI2NTk3NiAtOC4wOTgzOTUsLTguMDk4Mzk1IC0yLjk1NzIzNCwtMi45NTcyMzQgYyAtMC43MDEzNTEsLTAuNzAxMzUwNSAtMS44MzA1OTcsLTAuNzAxMzU0IC0yLjUzMTk0OCwtMmUtNiBsIC01LjA1MzM4Niw1LjA1MzM4NiBjIC0wLjcwMTM1MjYsMC43MDEzNTIgLTAuNzAxMzQ5LDEuODMwNTk4IDNlLTYsMi41MzE5NDggbCAyLjk1NzIzMywyLjk1NzIzNSA4LjA5ODM5NSw4LjA5ODM5NSAxLjI2NTk3NSwxLjI2NTk3NSA0LjYxMjAyMiw3LjkzNjQzNyA1LjY3NDYzLDUuNjc0NjMxIDEwLjkwOTc0OCwtMTAuOTA5NzQ3IHoiCiAgICAgc3R5bGU9ImZpbGw6IzVmODJjMzsiLz4KICA8cGF0aCBkPSJtIDM4LjM5OTY5MiwyNy4wNTE4MTIgMi4yODEwNjksMi4yODEwNyAtMTAuOTA5NzQ0LDEwLjkwOTc0NCAtMi4yODEwNjksLTIuMjgxMDcgeiIKICAgICBzdHlsZT0iZmlsbDojNDE1YTg3OyIvPgogIDxjaXJjbGUKICAgICB0cmFuc2Zvcm09InJvdGF0ZSg0NSkiCiAgICAgcj0iMS43MTg0MjI4IgogICAgIGN5PSItMC4zMDk4MDYyOSIKICAgICBjeD0iMzYuOTc3MjI2IgogICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjAuMjQ3NDc0NzYiLz4KICA8cGF0aAogICAgIGQ9Ik0gNTkuMDUzMDkyLDM3LjIwOTcgNDMuMTc3MjMsMzMuNjIzMjI1IDMzLjkwODMwMSw0Mi44OTIxNTMgYyAwLDAgMS45ODAxNjIsOS4yMjExNiAzLjQ0NjE1OSwxNi4xMDA5NTIgQSAyOC44ODE2OTcsMjguODgxNjk3IDAgMCAwIDUxLjMwNDI1OSw1MS4zMDQxOTkgMjguODgxNjk3LDI4Ljg4MTY5NyAwIDAgMCA1OS4wNTMwOTIsMzcuMjA5NyBaIgogICAgIHN0eWxlPSJmaWxsOiNmY2UwOTQ7Ii8+CiAgPHBhdGgKICAgICBkPSJtIDU2Ljc4NTczOCw0My41NzQwMDMgLTE0Ljk1OTA1NCwtOC42MDAyMzIgLTYuNDE0NzMsNi40MTQ3MyA4LjczMzI0MSwxNS4xMzczNzMgYSAyOC44ODE2OTcsMjguODgxNjk3IDAgMCAwIDcuMTU5MDY0LC01LjIyMTY3NSAyOC44ODE2OTcsMjguODgxNjk3IDAgMCAwIDUuNDgxNDc5LC03LjczMDE5NiB6IgogICAgIHN0eWxlPSJmaWxsOiNmZWY5ZDQ7Ii8+Cjwvc3ZnPgo=">
16+
<link rel="stylesheet" href="skin.css"/>
17+
18+
<style>
19+
html, body {
20+
margin: 0px;
21+
padding: 0px;
22+
height: 100%;
23+
}
24+
25+
#openlime {
26+
position:relative;
27+
height: 100%
28+
}
29+
30+
#openlime>canvas {
31+
width: 100%;
32+
height: 100%;
33+
/* this is important, it would cause firefox flickering! */
34+
overflow: hidden;
35+
}
36+
37+
</style>
38+
</head>
39+
40+
<body>
41+
42+
<header>
43+
<div class="container">
44+
<div class="row flex">
45+
<div class="col-10">
46+
<h1>Seals collection</h1>
47+
<h2>RTI viewer</h2>
48+
</div>
49+
<div class="col-2">
50+
<div>
51+
<a href="http://www.uni-graz.at" class="unilogo" target="_blank">
52+
<img src="https://static.uni-graz.at/fileadmin/grafik/logos/Logo_Uni-Graz_4c.jpg" alt="University of Graz Logo" style="max-height: 100px;">
53+
</a>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</header>
59+
60+
<!-- to add navbar and other pages eventually -->
61+
<div class="container">
62+
<p> Presenting the results of RTI with the seals collection of the Department of History, University of Graz.
63+
</p>
64+
</div>
65+
66+
<div>
67+
<div class="row">
68+
<!-- choose seal -->
69+
<div class="col-md-2">
70+
<ul id="seals">
71+
<li id="062">062</li>
72+
<li id="070">070</li>
73+
<li id="071">071</li>
74+
<li id="085">085</li>
75+
</ul>
76+
</div>
77+
<!-- viewer -->
78+
<div class="col-md-10" id="openlime">
79+
</div>
80+
</div>
81+
82+
<footer class="footer" style="padding-top: 25px;">
83+
<div class="container">
84+
<div class="row">
85+
<div class="col-md-6">
86+
<h6>Weitere Informationen</h6>
87+
<p>
88+
<a href="...">Link</a>
89+
<br/>
90+
</p>
91+
<p>
92+
<a href="...">Impressum</a>
93+
<br/>
94+
</p>
95+
<div>
96+
Add licenses
97+
</div>
98+
</div>
99+
<div class="col-md-6">
100+
<h6>Contact</h6>
101+
<p>
102+
Tanja<br/>
103+
Department of History
104+
<br/>University of Graz
105+
</p>
106+
<p>
107+
Chiara Zuanni<br/>
108+
Department of Digital Humanities
109+
<br/>University of Graz
110+
</p>
111+
<p>
112+
<a href="mailto:chiara.zuanni@uni-graz.at">chiara.zuanni@uni-graz.at</a>
113+
</p>
114+
</div>
115+
</div>
116+
</div>
117+
</footer>
118+
119+
</body>
120+
121+
<script src="openlime.min.js"></script>
122+
<script>
123+
//variables for seal selection
124+
var seal;
125+
var current;
126+
127+
var plane0tzi;
128+
var plane0dzi;
129+
var planes;
130+
var plane0jpg;
131+
var normalstzi;
132+
var normalsdzi;
133+
var normalsjpg;
134+
var infojson;
135+
136+
document.getElementById("seals").addEventListener("click",function(e) {
137+
if(e.target && e.target.nodeName == "LI") {
138+
// console.log(e.target.id);
139+
current = e.target.id;
140+
var seal = `rti_${current}`
141+
// console.log(seal)
142+
143+
// variables needed for each object in viewer
144+
plane0tzi = `/${seal}/plane_0.tzi`
145+
plane0dzi = `/${seal}/plane_0.dzi`
146+
planes = `/${seal}/planes.tzi`
147+
plane0jpg = `/${seal}/plane_0.jpg`
148+
normalstzi = `/${seal}/normals.tzi`
149+
normalsdzi = `/${seal}/normals.dzi`
150+
normalsjpg = `/${seal}/normals.jpg`
151+
infojson = `/${seal}/info.json`
152+
153+
//autodetect type:
154+
async function autodetect() {
155+
let response = await fetch(plane0tzi);
156+
if(response.status == 200)
157+
return "tarzoom";
158+
159+
response = await fetch(plane0dzi);
160+
if(response.status == 200)
161+
return "deepzoom";
162+
163+
response = await fetch(planes);
164+
if(response.status == 200)
165+
return "itarzoom";
166+
167+
response = await fetch(plane0jpg);
168+
if(response.status == 200)
169+
return "image";
170+
171+
alert("Could not detect an RTI here");
172+
return "";
173+
}
174+
175+
async function autodetectNormals(layout) {
176+
if(layout == 'tarzoom') {
177+
let response = await fetch(normalstzi);
178+
if(response.status == 200)
179+
return true;
180+
}
181+
if(layout == 'deepzoom') {
182+
let response = await fetch(normalsdzi);
183+
if(response.status == 200)
184+
return true;
185+
}
186+
if(layout == 'image') {
187+
let response = await fetch(normalsjpg);
188+
if(response.status == 200)
189+
return true;
190+
}
191+
192+
return false;
193+
}
194+
195+
async function init() {
196+
let layout = await autodetect();
197+
let normals = await autodetectNormals(layout);
198+
var lime = new OpenLIME.Viewer('#openlime', { background:'black' });
199+
200+
let layer = new OpenLIME.Layer({
201+
layout: layout,
202+
type:'rti',
203+
url: infojson,
204+
normals: normals
205+
});
206+
207+
lime.canvas.addLayer('RTI', layer);
208+
OpenLIME.Skin.setUrl('skin.svg');
209+
let ui = new OpenLIME.UIBasic(lime, { skin: 'skin.svg', showLightDirections: true });
210+
ui.actions.light.active = true;
211+
ui.actions.layers.display = true;
212+
lime.camera.maxFixedZoom = 1;
213+
window.lime = lime;
214+
}
215+
216+
init();
217+
218+
}
219+
});
220+
221+
</script>
222+
223+
</html>

‎openlime.min.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎skin.css

+520
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,520 @@
1+
.openlime {
2+
position: relative;
3+
background-color:#000;
4+
height:100%;
5+
}
6+
7+
.openlime > canvas {
8+
width: 100%;
9+
height: 100%;
10+
overflow: hidden; /* this is important, it would cause firefox flickering! */
11+
padding: 0px;
12+
}
13+
14+
.openlime-overlay, .openlime-svgoverlay {
15+
position: absolute;
16+
top: 0;
17+
width: 100%;
18+
height: 100%;
19+
}
20+
21+
.openlime-overlay {
22+
position:absolute;
23+
top:0px;
24+
width:100%;
25+
height:100%;
26+
}
27+
28+
.openlime-scale {
29+
position:absolute;
30+
bottom:25px;
31+
left:0px;
32+
width:200px;
33+
height:30px;
34+
padding:15px;
35+
fill:white;
36+
}
37+
38+
.openlime-scale > text {
39+
font-size:24px;
40+
}
41+
42+
.openlime-scale > line {
43+
stroke:white;
44+
stroke-width:2px;
45+
}
46+
47+
/* DIALOG */
48+
49+
.openlime-dialog-background {
50+
opacity: 1.0;
51+
transition: visibility 0s linear 300ms, opacity 300ms;
52+
53+
position:absolute;
54+
top: 0;
55+
left: 0;
56+
right: 0;
57+
bottom: 0;
58+
color:#fff;
59+
background: rgb(0, 0, 0, 0.5);
60+
padding:20px 40px;
61+
border-radius:5px;
62+
cursor:pointer;
63+
}
64+
65+
.openlime-dialog {
66+
position:absolute;
67+
top: 10%;
68+
left: 15%;
69+
right: 15%;
70+
bottom: 7%;
71+
color:#fff;
72+
font-family: "Open Sans",sans-serif;
73+
background: rgb(32, 32, 32, 0.9);
74+
opacity:0.95;
75+
padding:20px 40px;
76+
border-radius:5px;
77+
cursor:auto;
78+
transition: visibility 0s linear 0s, opacity 300ms;
79+
overflow-y: auto;
80+
}
81+
82+
.openlime-dialog.openlime-info {
83+
position:absolute;
84+
top:10px;
85+
left:10px;
86+
width:25%;
87+
height:fit-content;
88+
background-color:rgb(20, 20, 20, 0.9);
89+
padding:0px 10px;
90+
color:white;
91+
border-radius:3px;
92+
border:1px solid rgb(60, 60, 60);
93+
}
94+
95+
.openlime-dialog.fading {
96+
opacity:0.0;
97+
}
98+
99+
.openlime-dialog.hidden, .openlime-dialog-background.hidden {fad
100+
visibility:hidden;
101+
opacity:0.0;
102+
}
103+
104+
.openlime-dialog .openlime-close {
105+
position:absolute;
106+
top:10px;
107+
right:10px;
108+
width:30px;
109+
height:30px;
110+
cursor:pointer;
111+
}
112+
113+
.openlime-close * {
114+
stroke:#fff !important;
115+
fill:#fff !important;
116+
}
117+
118+
.openlime-close:hover * {
119+
opacity: 70%;
120+
}
121+
122+
/* TOOLBAR */
123+
124+
.openlime-toolbar rect[style] {
125+
fill:rgb(255, 255, 255, 0) !important;
126+
stroke:none !important;
127+
}
128+
129+
.openlime-toolbar path[style] {
130+
stroke:white !important;
131+
fill:white !important
132+
}
133+
134+
.openlime-toolbar text {
135+
stroke:white !important;
136+
fill:white !important
137+
}
138+
139+
.openlime-toolbar {
140+
position:absolute;
141+
bottom:0px;
142+
right:0px;
143+
padding:5px;
144+
background-color: transparent;
145+
display:flex;
146+
}
147+
148+
.openlime-toolbar svg:not(:root) {
149+
width:auto;
150+
height: 5vh;
151+
display: block;
152+
}
153+
154+
.openlime-toolbar .openlime-button:hover {
155+
cursor:pointer;
156+
opacity:70%;
157+
}
158+
159+
.openlime-light path[style] {
160+
fill:#80808011 !important;
161+
}
162+
163+
.openlime-light-active .openlime-light path[style] {
164+
fill:#ffcc00 !important;
165+
}
166+
167+
.openlime-lightdir {
168+
position:absolute;
169+
top:0px;
170+
left:0px;
171+
width:100%;
172+
height:100%;
173+
pointer-events:none;
174+
}
175+
176+
.openlime-lightdir line {
177+
stroke: #ff0;
178+
opacity: 0.4;
179+
stroke-width:1.5px;
180+
vector-effect: non-scaling-stroke;
181+
}
182+
183+
g.openlime-compact {
184+
visibility:hidden !important;
185+
}
186+
187+
g.openlime-expand {
188+
visibility:visible !important;
189+
}
190+
191+
.openlime-fullscreen-active g.openlime-compact {
192+
visibility:visible !important;
193+
}
194+
195+
.openlime-fullscreen-active g.openlime-expand {
196+
visibility:hidden !important;
197+
}
198+
199+
.openlime-help-window.shown {
200+
visibility:visible;
201+
opacity:0.95;
202+
transition: visibility 0s linear 0s, opacity 300ms;
203+
204+
}
205+
206+
.openlime-help-window {
207+
208+
opacity: 0.0;
209+
visibility:hidden;
210+
transition: visibility 0s linear 300ms, opacity 300ms;
211+
212+
position:absolute;
213+
top: 0;
214+
left: 0;
215+
right: 0;
216+
bottom: 0;
217+
color:#fff;
218+
background: rgb(0, 0, 0, 0.5);
219+
padding:20px 40px;
220+
border-radius:5px;
221+
font-family: "Open Sans",sans-serif;
222+
cursor:pointer;
223+
}
224+
225+
.openlime-help-content {
226+
position:absolute;
227+
top: 10%;
228+
left: 30%;
229+
right: 30%;
230+
bottom: 10%;
231+
color:#fff;
232+
background: #222;
233+
opacity:0.95;
234+
padding:20px 40px;
235+
border-radius:5px;
236+
cursor:auto;
237+
}
238+
239+
.openlime-help-window .openlime-close {
240+
position:absolute;
241+
top:10px;
242+
right:10px;
243+
width:30px;
244+
height:30px;
245+
cursor:pointer;
246+
}
247+
248+
/* ATTRIBUTION */
249+
250+
.openlime-attribution {
251+
position:absolute;
252+
left:20px;
253+
bottom:0;
254+
font-family: "Open Sans",sans-serif;
255+
font-size:10px;
256+
color:white;
257+
}
258+
259+
/* LAYERS MENU */
260+
261+
.openlime-layers-menu {
262+
position:absolute;
263+
display:flex;
264+
flex-direction:column;
265+
justify-content:start;
266+
top:0px;
267+
left:0px;
268+
height:100%;
269+
width:0%;
270+
max-width:200px;
271+
overflow:hidden;
272+
273+
transition: width 0.3s;
274+
275+
font-family:"Open Sans",sans-serif;
276+
color:#ccc;
277+
background-color: rgb(20, 20, 20, 0.8);
278+
list-style: none;
279+
padding:0px;
280+
margin:0px;
281+
z-index: 1;
282+
}
283+
284+
.openlime-layers-menu > * {
285+
margin:10px 10px 0px 10px;
286+
}
287+
288+
.openlime-layers-menu.open {
289+
width:100%
290+
}
291+
292+
.openlime-list {
293+
margin-left:20px;
294+
display:flex;
295+
flex-direction:column;
296+
justify-content:start;
297+
height:0;
298+
max-height:0;
299+
overflow:hidden;
300+
transition: max-height 0.5s;
301+
transition: height 0.5s;
302+
}
303+
304+
.active + .openlime-list {
305+
height:auto;
306+
max-height:100%;
307+
}
308+
309+
.openlime-layers-menu .openlime-entry {
310+
color: #ccc;
311+
background-color: rgb(20, 20, 20, 0.8);
312+
padding:8px 20px;
313+
border-radius:3px;
314+
cursor:pointer;
315+
text-decoration:none;
316+
}
317+
318+
.openlime-layers-menu .openlime-entry:hover,
319+
.openlime-layers-menu .openlime-entry:focus {
320+
321+
background-color: rgb(40, 40, 40);
322+
color:#fff;
323+
}
324+
325+
.openlime-layers-menu .openlime-entry:active {
326+
position:relative;
327+
top:1px;
328+
}
329+
330+
.openlime-layers-menu .openlime-entry.active,
331+
.openlime-layers-menu .openlime-entry:active {
332+
background-color: rgb(80, 80, 80);
333+
color:#fff;
334+
}
335+
336+
.openlime-layers-menu .openlime-entry.selected {
337+
background-color: rgb(80, 80, 80);
338+
color:#fff;
339+
}
340+
341+
.openlime-layers-menu .openlime-list .openlime-entry {
342+
font-size:90%;
343+
max-width:100%;
344+
padding: 5px 5px 0px 20px;
345+
}
346+
347+
.openlime-layers-menu .openlime-tool {
348+
padding:0px !important;
349+
}
350+
351+
.openlime-list .openlime-tools {
352+
flex-direction:row;
353+
}
354+
355+
.openlime-annotations {
356+
padding: 0px 5px;
357+
margin:0px;
358+
}
359+
360+
.openlime-list.openlime-annotations {
361+
overflow:auto;
362+
}
363+
364+
365+
/* Works on Firefox */
366+
.openlime-list.openlime-annotations {
367+
scrollbar-width: thin;
368+
scrollbar-color: rgb(80, 80, 80);
369+
}
370+
371+
/* Works on Chrome, Edge, and Safari */
372+
.openlime-list.openlime-annotations::-webkit-scrollbar {
373+
width: 10px;
374+
}
375+
376+
.openlime-list.openlime-annotations::-webkit-scrollbar-track {
377+
background: transparent;
378+
}
379+
380+
.openlime-list.openlime-annotations::-webkit-scrollbar-thumb {
381+
background-color: rgb(80, 80, 80);
382+
border-radius: 10px;
383+
border: 0px solid black;
384+
}
385+
386+
/* editor */
387+
388+
.openlime-annotation-edit.hidden { display: none; }
389+
.openlime-annotation-edit-tools svg, .openlime-tools svg { height:25px; cursor: pointer; margin-right: 10px }
390+
.openlime-annotation-edit-tools { margin-top: 5px; }
391+
.openlime-tool { height: 25px; width:25px; }
392+
393+
.openlime-annotation-edit select, .openlime-annotation-edit option { width: 40px; }
394+
.openlime-annotation-edit option:hover { background:red; }
395+
396+
.openlime-eye, .openlime-eye-off { height:14px; float: right;}
397+
.openlime-eye, .hidden .openlime-eye-off { display: block; }
398+
.openlime-eye-off, .hidden .openlime-eye { display: none; }
399+
400+
.openlime-eye:hover, .openlime-eye-off:hover { color: #ffa; }
401+
402+
/*.openlime-annotation-edit-tools .active { background-color:rgb(80, 80, 80); } */
403+
404+
.openlime-tool.active, .openlime-tool.active * { stroke:#fff !important; }
405+
.openlime-annotation-edit-tools .active * { stroke:#fff !important; }
406+
407+
.openlime-overlay.erase {
408+
cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><circle fill='rgba(255, 255, 255, 0.7)' cx='11' cy='11' r='10'/></svg>") 11 11, pointer;
409+
}
410+
.openlime-overlay.crosshair {
411+
cursor: crosshair;
412+
}
413+
414+
/* Editor select */
415+
416+
.openlime-select {
417+
background: #888;
418+
position: relative;
419+
cursor: pointer;
420+
display: inline-block;
421+
height:24px;
422+
width:100%;
423+
}
424+
425+
.openlime-select-button {
426+
position:absolute;
427+
top: 0;
428+
right: 0;
429+
bottom: 0;
430+
left: 0;
431+
background-color: #888;
432+
padding: 2px 15px;
433+
}
434+
435+
.openlime-select-button:after {
436+
content:"";
437+
width: 0;
438+
height: 0;
439+
border: 7px solid transparent;
440+
border-color: #fff transparent transparent transparent;
441+
position: absolute;
442+
top: 8px;
443+
right: 10px;
444+
}
445+
446+
.openlime-select-button:hover {
447+
background-color: #444;
448+
}
449+
450+
.active .openlime-select-button {
451+
background-color: #888;
452+
}
453+
454+
.active .openlime-select-button:after {
455+
top: 1px;
456+
border-color: transparent transparent #fff transparent;
457+
458+
}
459+
460+
.openlime-select-menu {
461+
display: none;
462+
position: absolute;
463+
top: 100%;
464+
right: 0;
465+
left: 0;
466+
z-index: 999;
467+
margin: 0;
468+
padding: 0;
469+
list-style: none;
470+
}
471+
472+
.active .openlime-select-menu { display: block; }
473+
474+
.openlime-select-menu li {
475+
margin: 0;
476+
padding: 2px 0;
477+
text-indent: 15px;
478+
/* border-top: 1px solid darken($select-background, 10); */
479+
/* @include transition(all 0.15s ease-in); */
480+
}
481+
482+
.openlime-select-menu li:hover {
483+
color: #fff;
484+
border: 1px #aaa;
485+
}
486+
487+
.openlime-ruler {
488+
width:100%;
489+
height:100%;
490+
}
491+
492+
.openlime-ruler path, .openlime-ruler line {
493+
stroke:yellow;
494+
stroke-width:2px;
495+
vector-effect:non-scaling-stroke;
496+
}
497+
.openlime-ruler text {
498+
fill: yellow;
499+
}
500+
501+
.openlime-overlaymsg {
502+
background:white;
503+
opacity:80%;
504+
position:absolute;
505+
top:0px;
506+
width:100%;
507+
height:100%;
508+
display:flex;
509+
align-items: center;
510+
justify-content: center;
511+
512+
animation: fadeOut 3s;
513+
}
514+
515+
@keyframes fadeOut {
516+
0% { opacity: 0.8; }
517+
33% { opacity: 0.8; }
518+
66% { opacity: 0; }
519+
100% { opacity: 0; }
520+
}

‎skin.svg

+793
Loading

0 commit comments

Comments
 (0)
Please sign in to comment.