riki/treehouse
riki/treehouse
1
Fork 0
Code Issues 33 Activity

change units in CSS to properly scaled rem

Browse source 
yeah I should've done that from the start should have I
This commit is contained in:
りき萌 2024-12-10 23:21:36 +01:00
parent 6d3037791a
commit ae9273cdff
6 changed files with 138 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

30
static/css/components/chat.css
View file

@ -1,10 +1,10 @@
:root {
--icon-choose: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTJMMTAgOEw2IDQiIHN0cm9rZT0iIzU1NDIzZSIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=');
--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=');
--icon-choose: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMTJMMTAgOEw2IDQiIHN0cm9rZT0iI2Q3Y2RiZiIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=");
}
}
@ -18,19 +18,19 @@ th-chat-said {
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);
border: 0.1rem solid var(--border-1);
padding: 1.2rem 1.6rem;
margin: 0.8rem 0;
border-radius: 0.8rem;
max-width: 60%;
&>.picture {
padding-right: var(--16px);
& > .picture {
padding-right: 1.6rem;
align-self: baseline;
}
&>.text-container {
& > .text-container {
display: inline-block;
}
}
@ -39,7 +39,7 @@ th-chat-asked {
display: flex;
flex-direction: row-reverse;
&>button {
& > button {
/* Reset <button> */
border: none;
background: none;
@ -74,10 +74,10 @@ th-chat-asked {
}
&::before {
content: '';
content: "";
display: inline-block;
width: var(--16px);
height: var(--16px);
width: 1.6rem;
height: 1.6rem;
margin-right: 0.5em;
background-image: var(--icon-choose);
background-position: 50% 50%;
@ -85,7 +85,9 @@ th-chat-asked {
opacity: 0%;
vertical-align: middle;
translate: -1em 0;
transition: opacity var(--transition-duration), translate var(--transition-duration);
transition:
opacity var(--transition-duration),
translate var(--transition-duration);
}
&:hover::before,