etiquette/frontends/etiquette_flask/static/css/etiquette.css

195 lines
3.7 KiB
CSS
Raw Normal View History

:root
{
--size_sticky_side: 300px;
--size_sticky_bottom: 150px;
}
input, select, textarea
{
margin-top: 2px;
margin-bottom: 2px;
padding: 2px;
border: none;
border-radius: 2px;
}
iframe.embedded_search
{
width: 100%;
max-height: 500px;
border: none;
}
.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;
}
/*
Usually, the panels are made by giving them a translucent background, which
stands out from the body layer. But, since the sticky_bottom will probably
be on top of content, we don't want to see through it! So we give it the
same background as the body color, and then use a pseudoelement to get the
transparent panel look back again.
An alternative solution might be to really split the page into a scrollable
top half and the non-scrollable sticky_bottom. I will look into this at
some point.
*/
#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);
overflow-y: scroll;
}
#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;
}
.photos_holder
{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
}
.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: 8pt;
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;
}
2021-01-08 21:57:27 +00:00
.tag_card:hover ~ * .remove_tag_button,
.tag_card:hover ~ .remove_tag_button,
.remove_tag_button:hover,
.remove_tag_button_perm:hover
{
display:inline;
}
2021-01-08 21:57:27 +00:00
.tag_card
{
border-radius: 2px;
padding-left: 2px;
padding-right: 2px;
2021-01-08 21:57:27 +00:00
background-color: var(--color_tag_card_bg);
color: var(--color_tag_card_fg);
font-size: 0.9em;
text-decoration: none;
font-family: monospace;
line-height: 1.5;
}
#message_area
{
flex: 2;
}