Ethan Dalool
da5c1ee008
Tags on photos can now have timestamps, so that if you are tagging a video or audio you can reference a specific moment with your tag. In the interface, this means the tag is clickable and seeks to that point in the media. For the user interface, I am finding I need to move away from jinja for the object cards because it is too much hassle to keep the code for jinja-based cards for static rendering and the js-based cards for dynamic rendering in sync. Rather than write the same cards in two languages I can dump the JSON into the script and render the cards on load. Which makes the static HTML worse but that's what the JSON API is for anyway.
308 lines
6.4 KiB
CSS
308 lines
6.4 KiB
CSS
/*
|
|
This file contains styles that apply to all pages within Etiquette, but don't
|
|
belong in common.css because they are specifically for this project.
|
|
*/
|
|
|
|
: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;
|
|
}
|
|
|
|
h1:first-child,
|
|
h2:first-child,
|
|
h3:first-child,
|
|
h4:first-child,
|
|
h5:first-child,
|
|
h6:first-child,
|
|
p:first-child
|
|
{
|
|
margin-top: 0;
|
|
}
|
|
|
|
h1:last-child,
|
|
h2:last-child,
|
|
h3:last-child,
|
|
h4:last-child,
|
|
h5:last-child,
|
|
h6:last-child,
|
|
p:last-child
|
|
{
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#header #logout_button
|
|
{
|
|
color: var(--color_text_link);
|
|
}
|
|
|
|
.navigation_link: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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
li:hover .remove_tag_button,
|
|
.tag_card:hover ~ * .remove_tag_button,
|
|
.tag_card:hover ~ .remove_tag_button,
|
|
.remove_tag_button:hover,
|
|
.remove_tag_button_perm:hover
|
|
{
|
|
display: inline;
|
|
}
|
|
|
|
#message_area
|
|
{
|
|
flex: 2;
|
|
}
|
|
|
|
/******************************************************************************/
|
|
html.theme_slate
|
|
{
|
|
--color_primary: #222;
|
|
--color_secondary: #3b4d5d;
|
|
|
|
--color_text_normal: #efefef;
|
|
--color_text_link: #1edeff;
|
|
--color_text_bubble: black;
|
|
|
|
--color_textfields: var(--color_secondary);
|
|
--color_text_placeholder: gray;
|
|
|
|
--color_transparency: rgba(255, 255, 255, 0.05);
|
|
--color_dropshadow: rgba(0, 0, 0, 0.25);
|
|
--color_shadow: rgba(0, 0, 0, 0.5);
|
|
--color_highlight: rgba(255, 255, 255, 0.5);
|
|
|
|
--color_tag_card_bg: #e6e6e6;
|
|
--color_tag_card_fg: black;
|
|
}
|
|
|
|
html.theme_slate button,
|
|
html.theme_slate button *
|
|
{
|
|
color: black;
|
|
}
|
|
/******************************************************************************/
|
|
html.theme_hotdogstand
|
|
{
|
|
--color_primary: yellow;
|
|
--color_secondary: red;
|
|
|
|
--color_text_normal: black;
|
|
--color_text_link: rebeccapurple;
|
|
--color_text_bubble: black;
|
|
|
|
--color_textfields: var(--color_secondary);
|
|
--color_text_placeholder: black;
|
|
|
|
--color_transparency: yellow;
|
|
--color_dropshadow: rgba(0, 0, 0, 0.25);
|
|
--color_shadow: rgba(0, 0, 0, 0.5);
|
|
--color_highlight: rgba(255, 255, 255, 0.5);
|
|
|
|
--color_tag_card_bg: red;
|
|
--color_tag_card_fg: white;
|
|
}
|
|
|
|
html.theme_hotdogstand button,
|
|
html.theme_hotdogstand button *
|
|
{
|
|
color: black;
|
|
}
|
|
|
|
html.theme_hotdogstand .panel
|
|
{
|
|
border: 1px solid black;
|
|
}
|
|
/******************************************************************************/
|
|
html.theme_pearl
|
|
{
|
|
--color_primary: #f6ffff;
|
|
--color_secondary: #aad7ff;
|
|
|
|
--color_text_normal: black;
|
|
--color_text_link: #00f;
|
|
--color_text_bubble: black;
|
|
|
|
--color_textfields: white;
|
|
--color_text_placeholder: gray;
|
|
|
|
--color_transparency: rgba(0, 0, 0, 0.1);
|
|
--color_dropshadow: rgba(0, 0, 0, 0.25);
|
|
--color_shadow: rgba(0, 0, 0, 0.5);
|
|
--color_highlight: rgba(255, 255, 255, 0.5);
|
|
|
|
--color_tag_card_bg: #fff;
|
|
--color_tag_card_fg: black;
|
|
}
|
|
/******************************************************************************/
|
|
html.theme_turquoise
|
|
{
|
|
--color_primary: #00d8f4;
|
|
--color_secondary: #ffffd4;
|
|
|
|
--color_text_normal: black;
|
|
--color_text_link: blue;
|
|
--color_text_bubble: black;
|
|
|
|
--color_textfields: white;
|
|
--color_text_placeholder: gray;
|
|
|
|
--color_transparency: rgba(0, 0, 0, 0.1);
|
|
--color_dropshadow: rgba(0, 0, 0, 0.25);
|
|
--color_shadow: rgba(0, 0, 0, 0.5);
|
|
--color_highlight: rgba(255, 255, 255, 0.5);
|
|
|
|
--color_tag_card_bg: #fff;
|
|
--color_tag_card_fg: blue;
|
|
}
|