treehouse/static/css/components/chat.css
2024-06-13 21:50:09 +02:00

98 lines
2.4 KiB
CSS

:root {
--icon-choose: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTJMMTAgOEw2IDQiIHN0cm9rZT0iIzU1NDIzZSIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=');
}
@media (prefers-color-scheme: dark) {
:root {
--icon-choose: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTJMMTAgOEw2IDQiIHN0cm9rZT0iI2Q3Y2RiZiIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=');
}
}
th-chat {
display: flex;
flex-direction: column;
}
th-chat-said {
display: flex;
flex-direction: row;
align-items: center;
border: var(--1px) solid var(--border-1);
padding: var(--12px) var(--16px);
margin: var(--8px) 0;
border-radius: var(--8px);
max-width: 60%;
&>.picture {
padding-right: var(--16px);
align-self: baseline;
}
&>.text-container {
display: inline-block;
}
}
th-chat-asked {
display: flex;
flex-direction: row-reverse;
&>button {
/* Reset <button> */
border: none;
background: none;
color: var(--text-color);
user-select: auto;
padding: 0.5em 0;
margin-right: 2rem;
--recursive-wght: 500;
text-decoration: underline;
text-align: right;
opacity: 80%;
cursor: pointer;
transition: opacity var(--transition-duration);
&.asked {
display: none;
opacity: 50%;
}
&[disabled] {
--recursive-wght: 600;
cursor: default;
opacity: 100%;
text-decoration: none;
}
&:hover {
opacity: 100%;
}
&::before {
content: '';
display: inline-block;
width: var(--16px);
height: var(--16px);
margin-right: 0.5em;
background-image: var(--icon-choose);
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 0%;
vertical-align: middle;
translate: -1em 0;
transition: opacity var(--transition-duration), translate var(--transition-duration);
}
&:hover::before,
&[disabled]::before {
opacity: 50%;
translate: 0 0;
}
}
}