Ethan Dalool
9a29048ccf
This makes the role of each css definition more clear, and could allow for cases where the side is sticky in wide mode but not sticky in narrow mode.
176 lines
3.1 KiB
CSS
176 lines
3.1 KiB
CSS
:root
|
|
{
|
|
--color_primary: #00d8f4;
|
|
--color_secondary: #ffffd4;
|
|
|
|
--color_tag_object_bg: #fff;
|
|
--color_tag_object_fg: blue;
|
|
|
|
--size_sticky_side: 300px;
|
|
--size_sticky_bottom: 150px;
|
|
}
|
|
|
|
input, select, textarea
|
|
{
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
|
|
padding: 2px;
|
|
|
|
border: none;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.header_element:hover
|
|
{
|
|
background-color: var(--color_secondary);
|
|
}
|
|
|
|
#left
|
|
{
|
|
grid-area: left;
|
|
}
|
|
#right
|
|
{
|
|
grid-area: right;
|
|
}
|
|
|
|
@media screen and (min-width: 800px)
|
|
{
|
|
#content_body.sticky_side_left
|
|
{
|
|
grid-template:
|
|
"left right"
|
|
/var(--size_sticky_side) 1fr;
|
|
}
|
|
#content_body.sticky_side_right
|
|
{
|
|
grid-template:
|
|
"left right"
|
|
/1fr var(--size_sticky_side);
|
|
}
|
|
|
|
#content_body.sticky_side_left #left,
|
|
#content_body.sticky_side_right #right
|
|
{
|
|
z-index: 1;
|
|
position: fixed;
|
|
bottom: 8px;
|
|
top: 34px;
|
|
width: var(--size_sticky_side);
|
|
overflow-y: auto;
|
|
}
|
|
#content_body.sticky_side_left #left
|
|
{
|
|
left: 8px;
|
|
}
|
|
#content_body.sticky_side_right #right
|
|
{
|
|
right: 8px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 800px)
|
|
{
|
|
#content_body.sticky_bottom_left
|
|
{
|
|
grid-template:
|
|
"right" 1fr
|
|
"left" var(--size_sticky_bottom)
|
|
/ 1fr;
|
|
}
|
|
#content_body.sticky_bottom_right
|
|
{
|
|
grid-template:
|
|
"left" 1fr
|
|
"right" var(--size_sticky_bottom)
|
|
/ 1fr;
|
|
}
|
|
#content_body.sticky_bottom_left #left,
|
|
#content_body.sticky_bottom_right #right
|
|
{
|
|
z-index: 1;
|
|
position: fixed;
|
|
background-color: var(--color_primary);
|
|
outline: 8px solid var(--color_primary);
|
|
top: unset;
|
|
width: unset;
|
|
left: 8px;
|
|
right: 8px;
|
|
bottom: 8px;
|
|
height: var(--size_sticky_bottom);
|
|
}
|
|
#content_body.sticky_bottom_left #left:before,
|
|
#content_body.sticky_bottom_right #right:before
|
|
{
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: var(--color_transparency);
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
.editor_input
|
|
{
|
|
width: 100%;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.panel
|
|
{
|
|
background-color: var(--color_transparency);
|
|
border-radius: 5px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.remove_tag_button,
|
|
.remove_tag_button_perm
|
|
{
|
|
/*position: absolute;*/
|
|
vertical-align: middle;
|
|
font-size: 7pt;
|
|
|
|
min-width: 18px;
|
|
min-height: 14px;
|
|
/*padding: 0;*/
|
|
|
|
}
|
|
/*
|
|
The Remove button will be display:none by default, but is shown when the tag
|
|
is hovered over.
|
|
*/
|
|
.remove_tag_button
|
|
{
|
|
display: none;
|
|
}
|
|
.tag_object:hover ~ * .remove_tag_button,
|
|
.tag_object:hover ~ .remove_tag_button,
|
|
.remove_tag_button:hover,
|
|
.remove_tag_button_perm:hover
|
|
{
|
|
display:inline;
|
|
}
|
|
|
|
.tag_object
|
|
{
|
|
border-radius: 2px;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
|
|
background-color: var(--color_tag_object_bg);
|
|
color: var(--color_tag_object_fg);
|
|
|
|
font-size: 0.9em;
|
|
text-decoration: none;
|
|
font-family: monospace;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
#message_area
|
|
{
|
|
flex: 2;
|
|
}
|