ancient-unit-converter/styles.css at master · normansimonr/ancient-unit-converter · 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
/* General body styles */
body {
  font-family: 'Kantumruy Pro', serif;
  font-size: 0.75em;
  color: #1f1e21;
  margin: 0;
  padding: 0;
  background-color: #202029;
}

h1 {
  font-family: 'Julius Sans One', serif;
  font-size: 2.1em;
  font-weight: bold;
  color: #400554;
  margin: 10px 0;
}

h2 {
  font-family: 'Julius Sans One', serif;
  font-size: 1.7em;
  font-weight: bold;
  color: #400554;
  margin: 10px 0;
}

.container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr; /* Three rows: top, middle, bottom */
  grid-template-columns: 1fr; /* Single column for all panels */
  height: 100vh;
  gap: 10px;
}

/* Top panel (formerly top left) */
.info-panel {
  grid-row: 1 / 2; /* First row */
  grid-column: 1 / 2; /* First column */
}

/* Middle panel (formerly top right) */
.applet-panel {
  grid-row: 2 / 3; /* Second row */
  grid-column: 1 / 2; /* First column */
}

/* Bottom panel */
.table-panel {
  grid-row: 3 / 4; /* Third row */
  grid-column: 1 / 2; /* First column */
}

/* Panel styles */
.panel {
  display: flex;
  justify-content: center; /* Centre the inner-box horizontally */
  align-items: center; /* Centre the inner-box vertically */
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.0); /* Semi-transparent background */
  border: 0px solid rgba(0, 0, 0, 0.2); /* Subtle border */
  --box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
  --backdrop-filter: blur(5px); /* Optional blur for frosted glass effect */
}

/* Inner box styles */
.inner-box {
  border: 5px solid rgba(255, 255, 255, 0.3); /* Subtle border */
  border-radius: 10px; /* Rounded corners */
  background-color: #faf9e8;
  padding: 20px; /* Padding inside the box */
  margin: auto; /* Automatically centre */
  width: 80%; /* Adjust width to fit within the parent */
  box-shadow: 20px 20px 5px rgba(0, 0, 0, 0.5); /* Slight shadow for depth */
  text-align: center; /* Centre-align text within the box */
}

/* Table styles */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

table, th, td {
  border: 1px solid #ccc;
}

th, td {
  padding: 8px;
  text-align: left;
}

td {
  font-family: 'Open Sans', serif;
}

/* Input and button styles */
label, input, select, button {
  display: block;
  margin: 10px auto;
}

label {
  font-style:normal;
}

input, select {
  font-family: 'Open Sans', serif;
  font-size: 1em;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
}

button {
  font-family: 'Julius Sans One', serif;
  font-weight: bold;
  padding: 10px 20px;
  background-color: #400554;
  color: #faf9e8;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #f2d233;
  color: #400554;
}

/* Result display styles */
#result {
  margin-top: 20px;
  font-size: 1em;
  text-align: left;
}

#result p {
  margin: 5px 0;
}