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

make the command line a bit more accessible by including a :| icon at the bottom

Browse source 
also add a few extra commands for navigating around the house
This commit is contained in:
りき萌 2024-12-10 20:40:44 +01:00
parent 7c93750b32
commit 6d3037791a
9 changed files with 169 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

117
static/css/main.css
View file

@ -545,78 +545,45 @@ footer {
display: flex;
flex-direction: row;
& #version-info {
& > .left {
flex-grow: 1;
}
& #footer-icon {
& > .right {
flex-shrink: 0;
}
& #version-info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: end;
& #footer-icon {
display: block;
& > svg {
display: block;
color: var(--text-color);
opacity: 40%;
}
}
& #open-command-line {
width: 32px;
height: 32px;
background: none;
border: none;
padding: 0;
background-image: var(--icon-cmd);
background-repeat: no-repeat;
background-position: 50% 50%;
opacity: 50%;
transition: var(--transition-duration) opacity;
& .icon-history {
display: inline-block;
width: 32px;
height: 32px;
margin-right: 0.5rem;
background-image: var(--icon-history);
background-repeat: no-repeat;
background-position: 50% 50%;
}
& > ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
margin: 0;
padding-left: 0;
list-style: none;
opacity: 0%;
transition: var(--transition-duration) opacity;
}
& > ul > li {
flex-shrink: 0;
}
& > ul > li:not(:first-child)::before {
content: "·";
text-decoration: none;
display: inline-block;
padding-left: 0.75em;
padding-right: 0.75em;
}
& a {
display: inline-block;
color: var(--text-color);
}
&:hover > ul {
&:hover {
opacity: 100%;
}
}
& #footer-icon {
& > a {
display: block;
}
& > a > svg {
display: block;
color: var(--text-color);
opacity: 40%;
&:active {
opacity: 75%;
}
}
}
@ -727,8 +694,9 @@ th-command-line {
& > .input-wrapper {
display: flex;
flex-direction: row;
align-items: center;
padding: 2px 4px;
padding: 0 4px;
width: 100%;
&::before {
@ -743,6 +711,8 @@ th-command-line {
border: none;
flex-grow: 1;
padding: 2px 0;
&:focus {
outline: none;
}
@ -758,6 +728,9 @@ th-command-line {
margin: 0;
padding: 0;
max-height: 25vh;
overflow: auto;
& > li {
padding: 2px 8px;
@ -774,6 +747,30 @@ th-command-line {
background-color: var(--liquidex-brand-blue);
color: white;
}
&.immediate {
cursor: pointer;
}
}
}
}
@media (hover: none) {
th-command-line {
& > ul.suggestions > li {
border-bottom: 1px solid var(--border-1);
}
}
}
@media (pointer: coarse) {
th-command-line {
& > .input-wrapper > input {
padding: 8px 0;
}
& > ul.suggestions > li {
padding: 8px 8px;
}
}
}