annotator3d/style.css at main · ma4096/annotator3d · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
html, body {
  margin:0px;
  height:100%;
  font-family: Lucida Sans Typewriter
}

sidebar {
	background-color: #00c1d4;
	width: 20%;
	height: 100%;
	position: absolute;
	overflow: auto;
}
sidebar > div {
  margin: auto;
  width: 90%;
  aspect-ratio: 2 / 1;
  border: 3px solid black;
  border-radius: 3px;
  margin-bottom: 1em;
  font-size: x-large;
  overflow: hidden;
}
sidebar > div > img {
  width: 45%;
  height: 100%;
  object-fit: cover;
}
sidebar > div > span {
  float: right;
  width: 55%;
  overflow-wrap: break-word;
  margin: auto;
}

nav {
  width: 90%;
  height: 5em;
  margin: auto;
}
nav > img {
  height: 100%;
}

model-viewer {
	width: 100%;
	height: 100%;
	position: absolute;
}
.annotation-selector {
	background-color: #668ea7;
	overflow: hidden;
	position: fixed;
    bottom: 0%;
    height: 0%;
    width: 100%;
}
.anotation-selector > div {
	float: left;
	display: inline;
	margin-right: 2em;
}
#navButton {
	position: absolute;
	float: left;
	margin-left: 20%;
	margin-top: 1em;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	border-style: solid;
	border-width: 3px;
	border-radius: 0px 3px 3px 0px;
	border-color: #00c1d4;
	background-color: #00c1d4;
}
#anoButton {
	position: fixed;
	bottom: 0%;
	right: 1em;
	margin-bottom: 0%;
	border-style: solid;
	border-width: 3px;
	border-radius: 3px 3px 0px 0px;
	border-color: #668ea7;
	background-color: #668ea7;
}
.clickable:hover {
	cursor: pointer;
}

.hotspot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: none;
  background-color: blue;
  box-sizing: border-box;
  asdpointer-events: none;
}
.annotation {
	width: auto;
  background-color: #888888;
  position: absolute;
  transform: translate(10px, 10px);
  border-radius: 10px;
  padding: 10px;
  text-align: left;
}

.center-screen {
	position: fixed;
	left: 50%;
	top: 50%;
}