mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-01-04 05:45:59 +00:00
920 lines
15 KiB
SCSS
920 lines
15 KiB
SCSS
/*
|
|
|-------------------------------------------------------------
|
|
| DEFAULTS
|
|
|-------------------------------------------------------------
|
|
*/
|
|
.defaultSpacing {
|
|
@include defaultSpacing();
|
|
}
|
|
|
|
.defaultDecoration {
|
|
@include defaultDecoration($page-accent);
|
|
}
|
|
.warningDecoration {
|
|
@include defaultDecoration($red);
|
|
}
|
|
|
|
.defaultFonts {
|
|
@include defaultFont();
|
|
}
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| INDEX
|
|
|-------------------------------------------------------------
|
|
*/
|
|
.info-text {
|
|
margin: 1rem 0 1rem 0.5rem;
|
|
padding: 0;
|
|
|
|
text-align: center;
|
|
|
|
h1 {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
p {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
.gallery-order {
|
|
@include defaultFont();
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
& > * {
|
|
margin-right: 0.5rem;
|
|
}
|
|
& > *:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.gallery-root {
|
|
margin-bottom: 1rem;
|
|
padding: 0.25rem;
|
|
|
|
@include flexLeft(none);
|
|
}
|
|
|
|
.gallery-item {
|
|
margin: 0.25rem;
|
|
padding: 0;
|
|
|
|
height: auto;
|
|
max-width: calc(20% - 0.5rem);
|
|
min-width: calc(20% - 0.5rem);
|
|
|
|
background-color: $bg;
|
|
border-radius: calc($rad - 0.5rem);
|
|
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
|
|
flex: 1 0 150px;
|
|
|
|
transition: transform 0.15s cubic-bezier(.19, 1, .22, 1);
|
|
|
|
&:hover {
|
|
transform: scale(1.1) rotate(5deg);
|
|
box-shadow: $shadow;
|
|
|
|
z-index: 9;
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
padding-bottom: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.gallery-item {
|
|
max-width: calc(25% - 0.5rem);
|
|
min-width: calc(25% - 0.5rem);
|
|
}
|
|
}
|
|
@media (max-width: 550px) {
|
|
.gallery-item {
|
|
max-width: calc(33.33% - 0.5rem);
|
|
min-width: calc(33.33% - 0.5rem);
|
|
}
|
|
}
|
|
|
|
.gallery-image {
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
position: absolute;
|
|
|
|
object-fit: cover;
|
|
object-position: center;
|
|
|
|
border-radius: calc($rad - 0.5rem);
|
|
}
|
|
|
|
.nsfw-blur {
|
|
filter: blur(8px);
|
|
}
|
|
|
|
.nsfw-warning {
|
|
@include flexDown(center);
|
|
align-items: center;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
position: absolute;
|
|
z-index: 5;
|
|
|
|
text-decoration: none;
|
|
font-family: $font-body;
|
|
|
|
background-color: $bg-alt;
|
|
|
|
span {
|
|
color: $red;
|
|
|
|
text-align: center;
|
|
|
|
&::after {
|
|
content: ' Content';
|
|
}
|
|
}
|
|
|
|
img {
|
|
margin: 0.25rem;
|
|
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.nsfw-warning {
|
|
span::after {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| IMAGE
|
|
|-------------------------------------------------------------
|
|
*/
|
|
.fullscreen-image {
|
|
width: 101vw; height: 101vh;
|
|
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-050%) translateY(-50%);
|
|
|
|
background-color: $bg-alt;
|
|
backdrop-filter: blur(15px);
|
|
|
|
z-index: 999;
|
|
|
|
transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
|
|
display: none; // Automatically hidden, revealed on fullscreen
|
|
opacity: 0; // expose
|
|
|
|
img {
|
|
max-width: 95%; max-height: 95%;
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
|
border-radius: $rad;
|
|
|
|
z-index: +1;
|
|
}
|
|
|
|
button {
|
|
padding: 0.25rem;
|
|
|
|
width: 2rem; height: 2rem;
|
|
|
|
position: absolute;
|
|
top: 1.25rem;
|
|
right: 1.25rem;
|
|
|
|
display: block;
|
|
box-sizing: border-box;
|
|
|
|
border: none;
|
|
border-radius: $rad;
|
|
|
|
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
|
|
|
|
background-color: $black;
|
|
|
|
z-index: +2;
|
|
|
|
img {
|
|
width: 1.5rem;
|
|
|
|
display: block;
|
|
}
|
|
|
|
&:hover {
|
|
outline: $white 0.2rem solid;
|
|
color: $fg;
|
|
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.image-container {
|
|
margin: 1rem 0 2rem 0;
|
|
padding: 0;
|
|
|
|
width: 100%;
|
|
max-height: 50vh;
|
|
height: auto;
|
|
min-height: 30vh;
|
|
|
|
display: flex;
|
|
|
|
background-color: $bg-alt;
|
|
backdrop-filter: blur(8px);
|
|
|
|
border-radius: $rad;
|
|
|
|
transition: max-height 0.15s cubic-bezier(.19, 1, .22, 1);
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.image-container {
|
|
max-height: 42vh;
|
|
}
|
|
}
|
|
|
|
.image {
|
|
margin: auto;
|
|
|
|
max-width: 100%;
|
|
width: auto;
|
|
max-height: inherit;
|
|
height: auto;
|
|
|
|
border-radius: $rad;
|
|
|
|
transition: opacity 0.5s;
|
|
}
|
|
|
|
.preview-button {
|
|
padding: 0.25rem;
|
|
|
|
width: 2rem; height: 2rem;
|
|
|
|
position: absolute;
|
|
bottom: 0.5rem;
|
|
right: 0.5rem;
|
|
|
|
display: block;
|
|
box-sizing: border-box;
|
|
|
|
border: none;
|
|
border-radius: $rad;
|
|
|
|
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
|
|
|
|
background-color: $bg-alt;
|
|
|
|
z-index: +2;
|
|
|
|
img {
|
|
width: 1.5rem;
|
|
|
|
display: block;
|
|
}
|
|
|
|
&:hover {
|
|
outline: $white 0.2rem solid;
|
|
color: $fg;
|
|
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
|
|
// DETAILS
|
|
.image-detail {
|
|
&>div {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
&>div {
|
|
width: 50%;
|
|
|
|
* {
|
|
margin-top: 0;
|
|
margin-bottom: 0.5rem;
|
|
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 669px) {
|
|
.image-detail {
|
|
&>div {
|
|
flex-direction: column;
|
|
&>div {
|
|
width: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tags {
|
|
@include flexLeft(auto);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tag {
|
|
margin: 0 0.5rem 0.5rem 0;
|
|
padding: 0.5rem;
|
|
|
|
display: block;
|
|
|
|
background-color: $page-accent;
|
|
|
|
border-radius: calc($rad - 0.5rem);
|
|
|
|
font-family: $font-body;
|
|
|
|
&::before {
|
|
content: '# ';
|
|
}
|
|
}
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| Groups
|
|
|-------------------------------------------------------------
|
|
*/
|
|
.group-banner {
|
|
position: relative;
|
|
}
|
|
|
|
.group-description {
|
|
height: auto;
|
|
width: auto;
|
|
|
|
position: relative;
|
|
|
|
z-index: +1;
|
|
|
|
h2 {
|
|
span {
|
|
margin-left: 0.25rem;
|
|
|
|
font-size: 16px;
|
|
}
|
|
a {
|
|
margin-left: 0.25rem;
|
|
|
|
font-size: 16px;
|
|
|
|
color: $page-accent;
|
|
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
& > * {
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: $page-accent;
|
|
}
|
|
}
|
|
|
|
.btn:hover {
|
|
color: $fg;
|
|
}
|
|
}
|
|
|
|
.group-cover {
|
|
height: 100%;
|
|
max-width: 50%;
|
|
width: auto;
|
|
|
|
position: absolute;
|
|
|
|
display: inline-block;
|
|
|
|
right: 0;
|
|
top: 0;
|
|
|
|
overflow: hidden;
|
|
|
|
z-index: 0;
|
|
|
|
span {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
position: absolute;
|
|
|
|
background: linear-gradient(to right, $bg, rgba($bg, 0.8), rgba($bg, 0.2));
|
|
|
|
z-index: +1;
|
|
|
|
border-radius: calc($rad - $border-thickness);
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
object-fit: cover;
|
|
|
|
margin-left: auto;
|
|
|
|
border-radius: calc($rad - $border-thickness);
|
|
}
|
|
}
|
|
|
|
.selectedImage {
|
|
outline: $page-accent solid 0.3rem;
|
|
}
|
|
.group-name {
|
|
margin: 0;
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
|
transition: opacity 0.1s cubic-bezier(.19, 1, .22, 1);
|
|
|
|
z-index: 6;
|
|
|
|
opacity: 0;
|
|
font-size: 17px;
|
|
font-family: $font-body;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.gallery-group {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
position: absolute;
|
|
z-index: 5;
|
|
}
|
|
|
|
.group-item {
|
|
& .gallery-group {
|
|
backdrop-filter: brightness(0.5);
|
|
}
|
|
& .nsfw-warning > * {
|
|
display: none;
|
|
}
|
|
& .group-name {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.group-make {
|
|
margin: 0.25rem;
|
|
padding: 0;
|
|
|
|
height: auto;
|
|
max-width: calc(20% - 0.5rem);
|
|
min-width: calc(20% - 0.5rem);
|
|
|
|
border-radius: calc($rad - 0.5rem);
|
|
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
|
|
flex: 1 0 150px;
|
|
|
|
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
|
|
|
|
&:hover {
|
|
outline: $white 0.2rem solid;
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
padding-bottom: 100%;
|
|
}
|
|
|
|
button {
|
|
@include flexDown(center);
|
|
align-items: center;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
padding: 0;
|
|
|
|
background-color: $black;
|
|
border-radius: calc($rad - 0.5rem);
|
|
border: none;
|
|
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
position: absolute;
|
|
z-index: 5;
|
|
|
|
text-decoration: none;
|
|
font-family: $font-body;
|
|
|
|
&:hover {
|
|
color: $fg;
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
span {
|
|
text-align: center;
|
|
}
|
|
|
|
img {
|
|
margin: 0.25rem;
|
|
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: 800px) {
|
|
.group-make {
|
|
max-width: calc(25% - 0.5rem);
|
|
min-width: calc(25% - 0.5rem);
|
|
}
|
|
}
|
|
@media (max-width: 550px) {
|
|
.group-make {
|
|
max-width: calc(33.33% - 0.5rem);
|
|
min-width: calc(33.33% - 0.5rem);
|
|
}
|
|
}
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| profile
|
|
|-------------------------------------------------------------
|
|
*/
|
|
.profile-root {
|
|
margin: 3rem auto 1rem auto;
|
|
|
|
min-height: 7rem;
|
|
|
|
position: relative;
|
|
|
|
text-align: center;
|
|
|
|
img {
|
|
width: 9rem;
|
|
height: 9rem;
|
|
object-fit: cover;
|
|
|
|
position: absolute;
|
|
left: 6rem;
|
|
top: -3rem;
|
|
transform: translateX(-50%);
|
|
|
|
border-radius: $rad;
|
|
border: $border;
|
|
|
|
background-color: $bg;
|
|
}
|
|
h2, & > p {
|
|
margin: 0 0 0.5rem 0;
|
|
padding-left: 11rem;
|
|
}
|
|
}
|
|
.profile-info {
|
|
margin-top: 0;
|
|
margin-bottom: 0.5rem;
|
|
padding-left: 11rem;
|
|
|
|
display: flex; flex-direction: column;
|
|
|
|
text-align: center;
|
|
& > * {
|
|
margin-top: 0;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 669px) {
|
|
.profile-root {
|
|
img {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: -3rem;
|
|
transform: translateX(-50%);
|
|
}
|
|
h2 {
|
|
margin: 7rem 0 0.5rem 0;
|
|
padding: 0;
|
|
}
|
|
& > p {
|
|
padding: 0;
|
|
}
|
|
}
|
|
.profile-info {
|
|
padding: 0;
|
|
|
|
& > * {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| UPLOAD
|
|
|-------------------------------------------------------------
|
|
*/
|
|
.upload-root > img {
|
|
margin: 0 auto;
|
|
|
|
max-width: 100%;
|
|
max-height: 15rem;
|
|
|
|
border-radius: calc($rad - 0.5rem);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| ACCOUNT
|
|
|-------------------------------------------------------------
|
|
*/
|
|
.pfp-upload {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
& > img {
|
|
margin-left: 0.5rem;
|
|
|
|
width: 7.813rem;
|
|
height: 7.813rem;
|
|
|
|
object-fit: cover;
|
|
|
|
border-radius: calc($rad - 0.5rem);
|
|
|
|
background-color: $black;
|
|
}
|
|
|
|
form > * {
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
form > *:last-child {
|
|
margin: 0 0 0 0;
|
|
}
|
|
}
|
|
@media (max-width: 621px) {
|
|
.pfp-upload {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
|
|
& > img {
|
|
margin: 0 auto 1rem;
|
|
|
|
width: 10rem;
|
|
height: 10rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabs {
|
|
display: flex; flex-direction: row;
|
|
|
|
& > button {
|
|
margin-right: 0.5rem;
|
|
width: 33.33%;
|
|
}
|
|
& > button:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.active-tab {
|
|
background-color: $page-accent !important;
|
|
}
|
|
|
|
.logs {
|
|
width: 100%;
|
|
height: 21rem;
|
|
|
|
padding: 0;
|
|
|
|
overflow-y: scroll;
|
|
|
|
display: none; flex-direction: column;
|
|
|
|
background-color: $bg;
|
|
border-radius: calc($rad - 0.5rem);
|
|
}
|
|
.log {
|
|
min-width: 850px;
|
|
|
|
padding: 0.5rem;
|
|
|
|
display: flex; flex-direction: row;
|
|
|
|
justify-content: space-between;
|
|
|
|
&:nth-child(even) {
|
|
background-color: #E8E3E311;
|
|
}
|
|
|
|
& > * {
|
|
margin: 0 0.5rem 0 0;
|
|
padding: 0;
|
|
word-wrap: break-word;
|
|
|
|
&:nth-child(1) {
|
|
width: 5%;
|
|
}
|
|
&:nth-child(2) {
|
|
width: 17%;
|
|
}
|
|
&:nth-child(3) {
|
|
width: 38%;
|
|
}
|
|
&:nth-child(4) {
|
|
width: 40%;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
.log:first-of-type {
|
|
background-color: $bg;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
.bans {
|
|
width: 100%;
|
|
height: 21rem;
|
|
|
|
padding: 0;
|
|
|
|
overflow-y: scroll;
|
|
|
|
display: none; flex-direction: column;
|
|
|
|
background-color: $bg;
|
|
border-radius: calc($rad - 0.5rem);
|
|
}
|
|
.ban {
|
|
min-width: 900px;
|
|
|
|
padding: 0.5rem;
|
|
|
|
display: flex; flex-direction: row;
|
|
|
|
justify-content: space-between;
|
|
|
|
&:nth-child(even) {
|
|
background-color: #E8E3E311;
|
|
}
|
|
|
|
& > * {
|
|
margin: 0 0.5rem 0 0;
|
|
padding: 0;
|
|
word-wrap: break-word;
|
|
|
|
&:nth-child(1) {
|
|
width: 5%;
|
|
}
|
|
&:nth-child(2) {
|
|
width: 17%;
|
|
}
|
|
&:nth-child(3) {
|
|
width: 34%;
|
|
}
|
|
&:nth-child(4) {
|
|
width: 10%;
|
|
}
|
|
&:nth-child(5) {
|
|
width: 34%;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
.perm {
|
|
border-left: $border;
|
|
}
|
|
.ban:first-of-type {
|
|
background-color: $bg;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
.user-settings {
|
|
width: 100%;
|
|
height: 21rem;
|
|
|
|
padding: 0;
|
|
|
|
overflow-y: scroll;
|
|
|
|
display: none; flex-direction: column;
|
|
|
|
background-color: $bg;
|
|
border-radius: calc($rad - 0.5rem);
|
|
}
|
|
.user {
|
|
min-width: 950px;
|
|
|
|
padding: 0.5rem;
|
|
|
|
display: flex; flex-direction: row;
|
|
|
|
justify-content: space-between;
|
|
|
|
&:nth-child(even) {
|
|
background-color: #E8E3E311;
|
|
}
|
|
|
|
& > * {
|
|
margin: 0 0.5rem 0 0;
|
|
padding: 0;
|
|
word-wrap: break-word;
|
|
|
|
&:nth-child(1) {
|
|
width: 5%;
|
|
}
|
|
&:nth-child(2) {
|
|
width: 15%;
|
|
}
|
|
&:nth-child(3) {
|
|
width: 35%;
|
|
}
|
|
&:nth-child(4) {
|
|
width: 15%;
|
|
}
|
|
&:nth-child(5) {
|
|
width: 15%;
|
|
}
|
|
&:nth-child(6) {
|
|
width: 15%;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
.is-admin {
|
|
border-left: $border;
|
|
}
|
|
.user:first-of-type {
|
|
background-color: $bg;
|
|
position: sticky;
|
|
top: 0;
|
|
} |