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

318 lines
5.9 KiB
CSS
Raw Normal View History

.album_card
{
background-color: var(--color_secondary);
}
.album_card:hover
{
box-shadow: 2px 2px 5px 0px var(--color_dropshadow);
}
.album_card_list
{
display: grid;
grid-template:
"title metadata"
/1fr;
margin: 8px;
padding: 4px;
}
.album_card_grid
{
position: relative;
display: inline-grid;
vertical-align: top;
grid-template:
"thumbnail" auto
"title" auto
"metadata" auto
/1fr;
min-width: 150px;
max-width: 300px;
height: 225px;
margin: 8px;
padding: 8px;
border-radius: 8px;
}
.album_card_thumbnail
{
grid-area: thumbnail;
display: flex;
width: 100%;
height: 150px;
}
.album_card_thumbnail img
{
max-width: 100%;
max-height: 150px;
margin: auto;
}
.album_card_list .album_card_thumbnail
{
display: none;
}
.album_card_title
{
grid-area: title;
}
.album_card_metadata
{
grid-area: metadata;
}
.album_card_tools
{
display: none;
position: absolute;
right: 4px;
bottom: 4px;
background-color: var(--color_transparency);
min-width: max-content;
}
.album_card_tools:hover,
.album_card:hover .album_card_tools
{
display: initial;
}
/* ########################################################################## */
/* ########################################################################## */
/* ########################################################################## */
.bookmark_card
{
position: relative;
display: inline-block;
padding: 8px;
margin: 8px;
max-width: 500px;
word-break: break-all;
border-radius: 8px;
background-color: var(--color_secondary);
}
.bookmark_card:hover
{
box-shadow: 2px 2px 5px 0px var(--color_dropshadow);
}
.bookmark_card .bookmark_url
{
display: none;
}
.bookmark_card input
{
width: 100%;
}
.bookmark_card .bookmark_url
{
color: #aaa;
}
/* ########################################################################## */
/* ########################################################################## */
/* ########################################################################## */
.photo_card
{
background-color: var(--color_secondary);
}
2019-12-21 22:50:38 +00:00
.photo_card:hover
{
box-shadow: 2px 2px 5px 0px var(--color_dropshadow);
2019-12-21 22:50:38 +00:00
}
2021-01-21 02:58:13 +00:00
.photo_card_searchhidden
{
border: 2px dotted var(--color_shadow);
}
.photo_card_selected::after
{
content: "";
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
pointer-events: none;
border: 2px solid blue;
background-color: rgba(0, 0, 255, 0.25);
border-radius: inherit;
}
.photo_card_list
{
position: relative;
display: grid;
grid-template:
"checkbox filename metadata tags toolbutton" auto
/auto 1fr auto auto auto;
grid-column-gap: 4px;
margin: 8px;
padding: 4px;
}
.photo_card_grid
{
position: relative;
display: inline-grid;
vertical-align: top;
grid-template:
"thumbnail thumbnail" minmax(0, 1fr)
"filename filename" 50px
"tags metadata" auto
/10px auto;
min-width: 150px;
max-width: 300px;
2019-09-10 22:32:35 +00:00
height: 225px;
padding: 8px;
margin: 8px;
border-radius: 8px;
}
2021-01-21 02:58:13 +00:00
.photo_card_grid .photo_clipboard_selector_checkbox
{
position:absolute;
left:5px;
top:5px;
}
2021-01-21 02:58:13 +00:00
.photo_card_list .photo_clipboard_selector_checkbox
{
grid-area: checkbox;
align-self: center;
}
.photo_card_grid .photo_card_thumbnail
{
grid-area: thumbnail;
align-self: start;
justify-self: center;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
2021-01-21 02:58:13 +00:00
.photo_card_grid .photo_card_thumbnail img
{
width: 100%;
height: 100%;
object-fit: contain;
}
2021-01-21 02:58:13 +00:00
.photo_card_filename
{
/*
The width of photo cards should be based on the aspect ratio of the
thumbnail image. Previously, I had problems where the card would be wider
than necessary because the file had a long name.
The min-width:100% + width:0 prevent the info div from controlling
card size, so we can prioritize the thumbnail instead.
*/
justify-self: start;
grid-area: filename;
position: relative;
overflow: hidden;
min-width: 100%;
width: 0;
background-color: inherit;
word-break: break-word;
}
.photo_card_grid .photo_card_filename
{
align-self: start;
max-height: 30px;
font-size: 12.8px;
}
.photo_card_grid .photo_card_filename:hover
{
overflow: visible;
max-height: none;
z-index: 1;
}
.photo_card_grid .photo_card_filename:hover a
{
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: inherit;
}
2021-01-21 02:58:13 +00:00
.photo_card_list .photo_card_filename
{
align-self: center;
}
.photo_card_tags
{
grid-area: tags;
align-self: end;
justify-self: start;
font-family: monospace;
font-size: 11px;
cursor: help;
}
2021-01-21 02:58:13 +00:00
.photo_card_metadata
{
grid-area: metadata;
2018-12-22 07:44:11 +00:00
align-self: center;
justify-self: end;
font-family: monospace;
font-size: 11px;
}
.photo_card_grid .photo_card_toolbutton
{
position: absolute;
top: 4px;
right: 4px;
width: 16px;
height: 16px;
}
.photo_card_list .photo_card_toolbutton
{
grid-area: toolbutton;
}
.photo_card_tools
{
display: none;
background-color: var(--color_secondary);
border: 2px solid var(--color_shadow);
z-index: 1;
width: max-content;
}
.photo_card_tools.open_contextmenu
{
display: initial;
position: absolute;
}
2021-01-08 22:16:59 +00:00
/* ########################################################################## */
/* ########################################################################## */
/* ########################################################################## */
.tag_card
{
border-radius: 2px;
padding-left: 2px;
padding-right: 2px;
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;
}