forked from olcxjas-softworks/LarpixClient
Add fetching invites
This commit is contained in:
parent
81145968a1
commit
81e222250d
10 changed files with 690 additions and 262 deletions
|
|
@ -13,10 +13,10 @@
|
|||
--icon-button-height: 3.4rem;
|
||||
--button-height: 2.4rem;
|
||||
--border-width: 0.09rem;
|
||||
|
||||
--big-default: rgb(207 207 207);
|
||||
--big-red: rgb(202 0 0);
|
||||
--big-green: rgb(25 189 0);
|
||||
|
||||
--big-default: rgb(207, 207, 207);
|
||||
--big-red: rgb(195, 75, 75);
|
||||
--big-green: rgb(75, 165, 95);
|
||||
}
|
||||
*:focus {
|
||||
outline: none;
|
||||
|
|
@ -76,7 +76,7 @@ button, input {
|
|||
background-color: rgba(255, 255, 255, 0.05);
|
||||
margin: var(--button-margin);
|
||||
padding: var(--button-margin);
|
||||
|
||||
|
||||
height: var(--button-height);
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
|
@ -148,12 +148,13 @@ indicator.active {
|
|||
width: calc(var(--icon-button-height) - (var(--border-width) * 2));
|
||||
height: calc(var(--icon-button-height) - (var(--border-width) * 2));
|
||||
pointer-events: none !important;
|
||||
border-radius: 0.6rem;
|
||||
}
|
||||
|
||||
roomcontent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
border-right: var(--border-width) solid var(--light-border-color);
|
||||
|
|
@ -161,7 +162,7 @@ roomcontent {
|
|||
roomcontent2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
height: calc(100% - (var(--button-height) * 1.5));
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -169,7 +170,7 @@ roomcontent2 {
|
|||
sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
height: 100%;
|
||||
width: calc(var(--icon-button-height) + (var(--button-margin) * 2) + var(--border-width));
|
||||
border-right: var(--border-width) solid var(--light-border-color);
|
||||
|
|
@ -252,11 +253,11 @@ hr {
|
|||
box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);
|
||||
|
||||
opacity: 0;
|
||||
transform: translateY(-1rem);
|
||||
transform: translateY(-2rem);
|
||||
transition:
|
||||
opacity 0.3s ease,
|
||||
transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
|
||||
background-color 0.2s ease;
|
||||
opacity 0.2s ease,
|
||||
transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
|
||||
background-color 0.15s ease;
|
||||
}
|
||||
.notification.show {
|
||||
opacity: 1;
|
||||
|
|
@ -290,8 +291,8 @@ roomtopbar {
|
|||
sidebar.second#roomdetailsbar {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-left: var(--border-width) solid var(--light-border-color);
|
||||
flex-direction: column;
|
||||
border-left: var(--border-width) solid var(--light-border-color);
|
||||
}
|
||||
fullcontainer {
|
||||
width: 100%;
|
||||
|
|
@ -330,52 +331,7 @@ herotitle {
|
|||
.bottom-element {
|
||||
margin-top: auto;
|
||||
}
|
||||
@media (hover: hover) {
|
||||
sidebarelement:hover indicator:not(.active) {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 1.2rem;
|
||||
left: -0.08rem;
|
||||
border: 0.15rem solid var(--text-color);
|
||||
border-radius: 0.8rem;
|
||||
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
|
||||
}
|
||||
button:hover, input:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.submit-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.add-action-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
button:active, button.is-pressed, input:active, input.is-pressed {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
transform: var(--press-scale);
|
||||
}
|
||||
button.active, input.active {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.submit-button:active, .submit-button.is-pressed {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.add-action-button:active, .add-action-button.is-pressed {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-color);
|
||||
}
|
||||
sidebarelement:has(.icon-button:active) indicator:not(.active) {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 1.2rem;
|
||||
left: -0.08rem;
|
||||
border: 0.15rem solid var(--text-color);
|
||||
border-radius: 0.8rem;
|
||||
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
|
||||
}
|
||||
|
||||
blah, inherit, .inherit {
|
||||
all: inherit;
|
||||
padding: 0;
|
||||
|
|
@ -419,9 +375,7 @@ space{
|
|||
gap: 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.context-menu button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.mobile-nav-btn {
|
||||
display: none;
|
||||
background: transparent;
|
||||
|
|
@ -466,7 +420,7 @@ space{
|
|||
sidebar, sidebar.second, roomcontent {
|
||||
position: absolute !important;
|
||||
height: 100%;
|
||||
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
sidebar {
|
||||
|
|
@ -492,13 +446,13 @@ space{
|
|||
}
|
||||
|
||||
#roomdetailsbar {
|
||||
left: auto !important;
|
||||
left: auto !important;
|
||||
right: 0;
|
||||
width: 90vw !important;
|
||||
width: 90vw !important;
|
||||
min-width: unset !important;
|
||||
max-width: none !important;
|
||||
transform: translateX(100vw);
|
||||
z-index: 10;
|
||||
transform: translateX(100vw);
|
||||
z-index: 10;
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
|
|
@ -537,7 +491,7 @@ space{
|
|||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
main.mobile-details roomcontent::after {
|
||||
|
|
@ -553,4 +507,115 @@ space{
|
|||
.submit-button.tab-inactive {
|
||||
background-color: transparent;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.list-container {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.list-container.empty {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.invite-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.8rem 1rem;
|
||||
border: var(--border-width) solid var(--light-border-color);
|
||||
border-radius: 0.8rem;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.invite-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
.invite-pfp {
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
border-radius: 0.8rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
.invite-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
}
|
||||
.invite-name {
|
||||
font-weight: 700;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
.invite-desc {
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.invite-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.invite-actions button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
sidebarelement:hover indicator:not(.active) {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 1.2rem;
|
||||
left: -0.08rem;
|
||||
border: 0.15rem solid var(--text-color);
|
||||
border-radius: 0.8rem;
|
||||
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
|
||||
}
|
||||
button:hover, input:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.submit-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.add-action-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-color);
|
||||
}
|
||||
.context-menu button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
}
|
||||
button:active, button.is-pressed, input:active, input.is-pressed {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
transform: var(--press-scale);
|
||||
}
|
||||
button.active, input.active {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.submit-button:active, .submit-button.is-pressed {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.add-action-button:active, .add-action-button.is-pressed {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-color);
|
||||
}
|
||||
.context-menu button:active, .context-menu button.is-pressed {
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
sidebarelement:has(.icon-button:active) indicator:not(.active) {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 1.2rem;
|
||||
left: -0.08rem;
|
||||
border: 0.15rem solid var(--text-color);
|
||||
border-radius: 0.8rem;
|
||||
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue