Amatsugu/AobaV2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

search tags

Browse Source 
loading placeholder items
This commit is contained in:
Amatsugu
2025-07-03 21:54:29 -04:00
parent 2a0907cf0d
commit cf55a7d47b
9 changed files with 255 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
AobaClient/assets/style/main.scss
View File

@@ -1,151 +1,154 @@
@import "mixins";
@import "colors";
* {
box-sizing: border-box;
}
:root {
background-color: $mainBGColor;
color: $mainTextColor;
box-sizing: border-box;
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "wdth" 100;
}
.stickyTop {
top: 0;
position: sticky;
}
body {
padding: 0;
margin: 0;
}
#main:has(#content) {
display: grid;
grid-template-columns: $navBarSize 1fr;
grid-template-areas: "Nav Content";
}
#content {
grid-area: Content;
overflow-x: hidden;
padding: 10px;
/* margin-left: $navBarSize; */
}
$mediaItemSize: 300px;
.mediaGrid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 10px 0;
.mediaItem {
width: $mediaItemSize;
height: $mediaItemSize;
overflow: hidden;
display: grid;
grid-template-columns: $mediaItemSize;
grid-template-areas: "A";
box-shadow: 0 0 2px #000;
color: $mainTextColor;
text-decoration: none;
transition:
transform 0.25s ease-out,
box-shadow 0.25s ease-out;
> * {
grid-area: A;
}
img {
aspect-ratio: 1;
object-fit: cover;
width: 100%;
object-position: center;
background-color: $invertTextColor;
border: 0;
outline: none;
}
.info {
align-self: end;
backdrop-filter: blur(20px) brightness(0.5);
transition: transform 0.25s ease-out;
transform: translateY(100%);
padding: 2px;
.name {
text-align: center;
width: 100%;
display: block;
overflow: hidden;
}
.details {
display: flex;
justify-content: space-between;
}
}
&:hover {
transform: scale(110%) translateZ(2px);
box-shadow: 0 0 8px #000;
.info {
transform: translateY(0%);
}
}
}
}
#main:has(#centralModal) {
display: grid;
place-items: center;
height: 100dvh;
width: 100dvw;
}
#centralModal {
display: flex;
flex-direction: column;
}
form {
display: flex;
flex-direction: column;
gap: 5px;
}
.notif {
background-color: red;
display: grid;
grid-template-columns: 50px 1fr;
height: 50px;
border-radius: 20px;
border-bottom-left-radius: 0;
border-top-right-radius: 0;
.icon {
padding: 10px;
}
.message {
padding: 10px;
align-self: center;
}
}
.codeSelect {
line-break: anywhere;
white-space: pre-wrap;
background-color: $featureColor;
padding: 5px;
user-select: all;
}
@import "mixins";
@import "colors";
* {
box-sizing: border-box;
}
:root {
background-color: $mainBGColor;
color: $mainTextColor;
box-sizing: border-box;
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "wdth" 100;
}
.stickyTop {
top: 0;
position: sticky;
}
body {
padding: 0;
margin: 0;
}
#main:has(#content) {
display: grid;
grid-template-columns: $navBarSize 1fr;
grid-template-areas: "Nav Content";
}
#content {
grid-area: Content;
overflow-x: hidden;
padding: 10px;
/* margin-left: $navBarSize; */
}
$mediaItemSize: 300px;
.mediaGrid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 10px 0;
.mediaItem {
width: $mediaItemSize;
height: $mediaItemSize;
overflow: hidden;
display: grid;
grid-template-columns: $mediaItemSize;
grid-template-areas: "A";
box-shadow: 0 0 2px #000;
color: $mainTextColor;
text-decoration: none;
transition:
transform 0.25s ease-out,
box-shadow 0.25s ease-out;
> * {
grid-area: A;
}
img {
aspect-ratio: 1;
object-fit: cover;
width: 100%;
object-position: center;
background-color: $invertTextColor;
border: 0;
outline: none;
}
.info {
align-self: end;
backdrop-filter: blur(20px) brightness(0.5);
transition: transform 0.25s ease-out;
transform: translateY(100%);
padding: 2px;
.name {
text-align: center;
width: 100%;
display: block;
overflow: hidden;
}
.details {
display: flex;
justify-content: space-between;
}
}
&:hover {
transform: scale(110%) translateZ(2px);
box-shadow: 0 0 8px #000;
.info {
transform: translateY(0%);
}
}
&.placeholder {
}
}
}
#main:has(#centralModal) {
display: grid;
place-items: center;
height: 100dvh;
width: 100dvw;
}
#centralModal {
display: flex;
flex-direction: column;
}
form {
display: flex;
flex-direction: column;
gap: 5px;
}
.notif {
background-color: red;
display: grid;
grid-template-columns: 50px 1fr;
height: 50px;
border-radius: 20px;
border-bottom-left-radius: 0;
border-top-right-radius: 0;
.icon {
padding: 10px;
}
.message {
padding: 10px;
align-self: center;
}
}
.codeSelect {
line-break: anywhere;
white-space: pre-wrap;
background-color: $featureColor;
padding: 5px;
user-select: all;
}