1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/*
CSS
Content panels for Grammalecte
*/
div.grammalecte_panel {
all: initial;
padding: 0;
margin: 0;
position: fixed;
box-sizing: content-box;
z-index: 2147483641; /* maximum is 2147483647: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index */
border: 2px solid hsl(210, 50%, 50%);
border-radius: 10px 10px 10px 10px;
background-color: hsl(210, 0%, 100%);
color: hsl(0, 0%, 0%);
font-family: "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
|
>
>
>
>
>
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/*
CSS
Content panels for Grammalecte
*/
div.grammalecte_panel {
all: initial;
padding: 0;
margin: 0;
position: fixed;
/* flexbox */
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: stretch;
/* end flexbox */
box-sizing: content-box;
z-index: 2147483641; /* maximum is 2147483647: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index */
border: 2px solid hsl(210, 50%, 50%);
border-radius: 10px 10px 10px 10px;
background-color: hsl(210, 0%, 100%);
color: hsl(0, 0%, 0%);
font-family: "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
|
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
display: inline-block;
margin: 0;
padding: 0;
}
div.grammalecte_panel_bar {
position: sticky;
width: 100%;
background-color: hsl(210, 50%, 50%);
border-radius: 10px 10px 0 0;
border-bottom: 1px solid hsl(210, 20%, 86%);
}
div.grammalecte_panel_title {
padding: 3px 20px;
|
|
|
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
display: inline-block;
margin: 0;
padding: 0;
}
div.grammalecte_panel_bar {
position: sticky;
/*width: 100%;*/
background-color: hsl(210, 50%, 50%);
border-radius: 10px 10px 0 0;
border-bottom: 1px solid hsl(210, 20%, 86%);
}
div.grammalecte_panel_title {
padding: 3px 20px;
|
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
}
div.grammalecte_menu_button:hover {
background-color: hsl(210, 80%, 40%);
}
div.grammalecte_panel_content {
position: absolute;
width: 100%;
height: calc(100% - 65px); /* panel height - title_bar */
|
<
|
<
|
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
}
div.grammalecte_menu_button:hover {
background-color: hsl(210, 80%, 40%);
}
div.grammalecte_panel_content {
flex-grow: 1;
overflow: auto;
}
div#grammalecte_panel_message_block {
display: none;
padding: 10px;
background-color: hsl(0, 50%, 50%);
|