mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-01-04 05:45:59 +00:00
575 lines
9.4 KiB
SCSS
575 lines
9.4 KiB
SCSS
/*
|
|
|-------------------------------------------------------------
|
|
| INDEX
|
|
|-------------------------------------------------------------
|
|
*/
|
|
.info-text {
|
|
@include defaultFont();
|
|
|
|
margin: 1rem 0 1rem 0.5rem;
|
|
padding: 0;
|
|
|
|
text-align: center;
|
|
|
|
h1 {
|
|
font-family: $font-header;
|
|
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
p {
|
|
font-family: $font-body;
|
|
|
|
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;
|
|
|
|
background-color: $bg;
|
|
color: $fg;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
|
|
border: 0.2rem solid $page-accent;
|
|
|
|
border-radius: $rad;
|
|
box-shadow: $shadow;
|
|
}
|
|
|
|
.gallery-item {
|
|
margin: 0.25rem;
|
|
padding: 0;
|
|
|
|
height: auto;
|
|
max-width: calc(33.33% - 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%;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
position: absolute;
|
|
z-index: 5;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
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
|
|
|-------------------------------------------------------------
|
|
*/
|
|
.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 {
|
|
width: 1.5rem;
|
|
|
|
padding: 0;
|
|
|
|
position: absolute;
|
|
bottom: 0.5rem;
|
|
right: 0.5rem;
|
|
|
|
display: block;
|
|
box-sizing: border-box;
|
|
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
font-family: $font-body;
|
|
|
|
text-decoration: none;
|
|
|
|
border: none;
|
|
border-radius: calc($rad - (0.5rem + 3px));
|
|
|
|
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
|
|
|
|
background-color: $black;
|
|
|
|
opacity: 0.8;
|
|
|
|
box-shadow: $shadow;
|
|
|
|
img {
|
|
width: 1.5rem;
|
|
|
|
display: block;
|
|
}
|
|
|
|
&:hover {
|
|
outline: $white 0.2rem solid;
|
|
color: $fg;
|
|
}
|
|
}
|
|
|
|
// DESCRIPTION
|
|
.image-description {
|
|
@include defaultDecoration($page-accent);
|
|
@include defaultFont();
|
|
}
|
|
|
|
|
|
// DETAILS
|
|
.image-detail {
|
|
@include defaultDecoration($page-accent);
|
|
@include defaultFont();
|
|
|
|
&>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
|
|
.tags-root {
|
|
@include defaultDecoration($page-accent);
|
|
@include defaultFont();
|
|
}
|
|
|
|
.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 + 3px));
|
|
|
|
font-family: $font-body;
|
|
|
|
&::before {
|
|
content: '# ';
|
|
}
|
|
}
|
|
|
|
// DANGER ZONE
|
|
.danger-zone {
|
|
@include defaultDecoration($red);
|
|
@include defaultFont();
|
|
}
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| ABOUT
|
|
|-------------------------------------------------------------
|
|
*/
|
|
.about-root {
|
|
@include defaultDecoration($page-accent);
|
|
@include defaultFont();
|
|
}
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| UPLOAD
|
|
|-------------------------------------------------------------
|
|
*/
|
|
.upload-root {
|
|
@include defaultDecoration($page-accent);
|
|
@include defaultFont();
|
|
}
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| ACCOUNT
|
|
|-------------------------------------------------------------
|
|
*/
|
|
.account-root {
|
|
@include defaultDecoration($page-accent);
|
|
@include defaultFont();
|
|
}
|
|
.admin-root {
|
|
@include defaultDecoration($page-accent);
|
|
@include defaultFont();
|
|
}
|
|
|
|
.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 + 3px));
|
|
}
|
|
.log {
|
|
min-width: 769px;
|
|
|
|
padding: 0.5rem;
|
|
|
|
display: flex; flex-direction: row;
|
|
|
|
justify-content: space-between;
|
|
|
|
&:nth-child(even) {
|
|
background-color: #ffffff11;
|
|
}
|
|
|
|
& > * {
|
|
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 + 3px));
|
|
}
|
|
.ban {
|
|
min-width: 769px;
|
|
|
|
padding: 0.5rem;
|
|
|
|
display: flex; flex-direction: row;
|
|
|
|
justify-content: space-between;
|
|
|
|
&:nth-child(even) {
|
|
background-color: #ffffff11;
|
|
}
|
|
|
|
& > * {
|
|
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: $red 0.2rem solid;
|
|
}
|
|
.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 + 3px));
|
|
}
|
|
.user {
|
|
min-width: 769px;
|
|
|
|
padding: 0.5rem;
|
|
|
|
display: flex; flex-direction: row;
|
|
|
|
justify-content: space-between;
|
|
|
|
&:nth-child(even) {
|
|
background-color: #ffffff11;
|
|
}
|
|
|
|
& > * {
|
|
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: $page-accent 0.2rem solid;
|
|
}
|
|
.user:first-of-type {
|
|
background-color: $bg;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
.signup-root {
|
|
@include defaultDecoration($page-accent);
|
|
@include defaultFont();
|
|
// By default its hidden, in place is login
|
|
display: none;
|
|
}
|
|
.login-root {
|
|
@include defaultDecoration($page-accent);
|
|
@include defaultFont();
|
|
}
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| PASSWORD RESET
|
|
|-------------------------------------------------------------
|
|
*/
|
|
.password-reset-root {
|
|
@include defaultDecoration($red);
|
|
@include defaultFont();
|
|
}
|
|
|
|
/*
|
|
|-------------------------------------------------------------
|
|
| ERROR PAGE
|
|
|-------------------------------------------------------------
|
|
*/
|
|
.error-root {
|
|
@include defaultDecoration($page-accent);
|
|
@include defaultFont();
|
|
} |