mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-01-29 17:28:27 +00:00
Optimising CSS/sAss
This commit is contained in:
parent
e19bab45cd
commit
1be364c4ef
10
account.php
10
account.php
|
|
@ -23,7 +23,7 @@
|
|||
<?php
|
||||
if ($user_info->is_loggedin()) {
|
||||
?>
|
||||
<div class="profile-settings">
|
||||
<div class="defaultDecoration defaultSpacing defaultFonts">
|
||||
<h2>Profile</h2>
|
||||
<div class="pfp-upload">
|
||||
<form id="pfpForm" method="POST" enctype="multipart/form-data">
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
<a href="profile.php?user=<?php echo $_SESSION['id']; ?>" class="btn btn-neutral">Go to profile</a>
|
||||
</div>
|
||||
|
||||
<div class="account-root">
|
||||
<div class="warningDecoration defaultSpacing defaultFonts">
|
||||
<h2>Account</h2>
|
||||
<a class='btn btn-bad' href='password-reset.php'><img class='svg' src='assets/icons/password.svg'>Reset Password</a>
|
||||
<button class="btn btn-bad" onclick="deleteAccount()"><img class='svg' src='assets/icons/trash.svg'>Delete account</button>
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
<?php
|
||||
if ($user_info->is_admin($conn, $_SESSION['id'])) {
|
||||
?>
|
||||
<div class="admin-root">
|
||||
<div class="defaultDecoration defaultSpacing defaultFonts">
|
||||
<h2>Admin</h2>
|
||||
<h3>Invite Codes</h3>
|
||||
<?php
|
||||
|
|
@ -383,7 +383,7 @@
|
|||
}
|
||||
} else {
|
||||
?>
|
||||
<div class="login-root">
|
||||
<div class="login-root defaultDecoration defaultSpacing defaultFonts">
|
||||
<h2>Login</h2>
|
||||
<p>Passwords are important to keep safe. Don't tell anyone your password, not even Fluffy!</p>
|
||||
<br>
|
||||
|
|
@ -409,7 +409,7 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<div class="signup-root">
|
||||
<div class="signup-root defaultDecoration defaultSpacing defaultFonts" style="display: none;">
|
||||
<h2>Make account</h2>
|
||||
<p>And amazing things happened here...</p>
|
||||
<br>
|
||||
|
|
|
|||
465
css/main.css
465
css/main.css
|
|
@ -30,9 +30,6 @@
|
|||
|-------------------------------------------------------------
|
||||
*/
|
||||
nav {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.4rem;
|
||||
|
|
@ -53,10 +50,6 @@ nav {
|
|||
align-items: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
nav > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
nav p {
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
|
|
@ -141,6 +134,53 @@ nav .btn {
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| DEFAULTS
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.defaultSpacing {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
}
|
||||
.defaultSpacing > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.defaultDecoration {
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.4rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
}
|
||||
|
||||
.warningDecoration {
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.4rem;
|
||||
border: 0.2rem solid #B66467;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
}
|
||||
|
||||
.defaultFonts h1,
|
||||
.defaultFonts h2,
|
||||
.defaultFonts h3,
|
||||
.defaultFonts h4,
|
||||
.defaultFonts h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.defaultFonts p,
|
||||
.defaultFonts a,
|
||||
.defaultFonts button,
|
||||
.defaultFonts input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| INDEX
|
||||
|
|
@ -151,28 +191,11 @@ nav .btn {
|
|||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.info-text h1,
|
||||
.info-text h2,
|
||||
.info-text h3,
|
||||
.info-text h4,
|
||||
.info-text h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.info-text p,
|
||||
.info-text a,
|
||||
.info-text button,
|
||||
.info-text input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.info-text h1 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.info-text p {
|
||||
font-family: "Secular One", sans-serif;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -207,14 +230,10 @@ nav .btn {
|
|||
.gallery-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.25rem;
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
border: 0.2rem solid #8C977D;
|
||||
border-radius: 0.4rem;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
justify-content: none;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
|
|
@ -275,6 +294,10 @@ nav .btn {
|
|||
}
|
||||
|
||||
.nsfw-warning {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
|
|
@ -283,10 +306,6 @@ nav .btn {
|
|||
right: 0;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
font-family: "Secular One", sans-serif;
|
||||
background-color: rgba(21, 21, 21, 0.7333333333);
|
||||
|
|
@ -419,65 +438,6 @@ nav .btn {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-description {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.4rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
}
|
||||
.image-description > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.image-description h1,
|
||||
.image-description h2,
|
||||
.image-description h3,
|
||||
.image-description h4,
|
||||
.image-description h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.image-description p,
|
||||
.image-description a,
|
||||
.image-description button,
|
||||
.image-description input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.image-detail {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.4rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
}
|
||||
.image-detail > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.image-detail h1,
|
||||
.image-detail h2,
|
||||
.image-detail h3,
|
||||
.image-detail h4,
|
||||
.image-detail h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.image-detail p,
|
||||
.image-detail a,
|
||||
.image-detail button,
|
||||
.image-detail input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.image-detail > div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -502,36 +462,6 @@ nav .btn {
|
|||
width: auto;
|
||||
}
|
||||
}
|
||||
.tags-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.4rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
}
|
||||
.tags-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.tags-root h1,
|
||||
.tags-root h2,
|
||||
.tags-root h3,
|
||||
.tags-root h4,
|
||||
.tags-root h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.tags-root p,
|
||||
.tags-root a,
|
||||
.tags-root button,
|
||||
.tags-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -552,72 +482,11 @@ nav .btn {
|
|||
content: "# ";
|
||||
}
|
||||
|
||||
.danger-zone {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.4rem;
|
||||
border: 0.2rem solid #B66467;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
}
|
||||
.danger-zone > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.danger-zone h1,
|
||||
.danger-zone h2,
|
||||
.danger-zone h3,
|
||||
.danger-zone h4,
|
||||
.danger-zone h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.danger-zone p,
|
||||
.danger-zone a,
|
||||
.danger-zone button,
|
||||
.danger-zone input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| Groups
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.group-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.4rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1) transform 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
.group-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.group-root h1,
|
||||
.group-root h2,
|
||||
.group-root h3,
|
||||
.group-root h4,
|
||||
.group-root h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.group-root p,
|
||||
.group-root a,
|
||||
.group-root button,
|
||||
.group-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.selectedImage {
|
||||
outline: #8C977D solid 0.3rem;
|
||||
}
|
||||
|
|
@ -632,21 +501,8 @@ nav .btn {
|
|||
z-index: 6;
|
||||
opacity: 0;
|
||||
font-size: 17px;
|
||||
}
|
||||
.group-name h1,
|
||||
.group-name h2,
|
||||
.group-name h3,
|
||||
.group-name h4,
|
||||
.group-name h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.group-name p,
|
||||
.group-name a,
|
||||
.group-name button,
|
||||
.group-name input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gallery-group {
|
||||
|
|
@ -667,7 +523,6 @@ nav .btn {
|
|||
.group-item:hover .nsfw-warning > * {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.group-item:hover .group-name {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -678,38 +533,11 @@ nav .btn {
|
|||
|-------------------------------------------------------------
|
||||
*/
|
||||
.profile-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.4rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
margin: 3rem auto 1rem auto;
|
||||
min-height: 7rem;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.profile-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.profile-root h1,
|
||||
.profile-root h2,
|
||||
.profile-root h3,
|
||||
.profile-root h4,
|
||||
.profile-root h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.profile-root p,
|
||||
.profile-root a,
|
||||
.profile-root button,
|
||||
.profile-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.profile-root img {
|
||||
width: 9rem;
|
||||
height: 9rem;
|
||||
|
|
@ -767,35 +595,6 @@ nav .btn {
|
|||
| UPLOAD
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.upload-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.4rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
}
|
||||
.upload-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.upload-root h1,
|
||||
.upload-root h2,
|
||||
.upload-root h3,
|
||||
.upload-root h4,
|
||||
.upload-root h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.upload-root p,
|
||||
.upload-root a,
|
||||
.upload-root button,
|
||||
.upload-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.upload-root > img {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
|
|
@ -810,36 +609,6 @@ nav .btn {
|
|||
| ACCOUNT
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.profile-settings {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.4rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
}
|
||||
.profile-settings > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.profile-settings h1,
|
||||
.profile-settings h2,
|
||||
.profile-settings h3,
|
||||
.profile-settings h4,
|
||||
.profile-settings h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.profile-settings p,
|
||||
.profile-settings a,
|
||||
.profile-settings button,
|
||||
.profile-settings input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.pfp-upload {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -871,66 +640,6 @@ nav .btn {
|
|||
height: 10rem;
|
||||
}
|
||||
}
|
||||
.account-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.4rem;
|
||||
border: 0.2rem solid #B66467;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
}
|
||||
.account-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.account-root h1,
|
||||
.account-root h2,
|
||||
.account-root h3,
|
||||
.account-root h4,
|
||||
.account-root h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.account-root p,
|
||||
.account-root a,
|
||||
.account-root button,
|
||||
.account-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.admin-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.4rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
}
|
||||
.admin-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.admin-root h1,
|
||||
.admin-root h2,
|
||||
.admin-root h3,
|
||||
.admin-root h4,
|
||||
.admin-root h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.admin-root p,
|
||||
.admin-root a,
|
||||
.admin-root button,
|
||||
.admin-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -1105,86 +814,18 @@ nav .btn {
|
|||
top: 0;
|
||||
}
|
||||
|
||||
.signup-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.4rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
display: none;
|
||||
}
|
||||
.signup-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.signup-root h1,
|
||||
.signup-root h2,
|
||||
.signup-root h3,
|
||||
.signup-root h4,
|
||||
.signup-root h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.signup-root p,
|
||||
.signup-root a,
|
||||
.signup-root button,
|
||||
.signup-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.login-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.4rem;
|
||||
border: 0.2rem solid #8C977D;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
}
|
||||
.login-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.login-root h1,
|
||||
.login-root h2,
|
||||
.login-root h3,
|
||||
.login-root h4,
|
||||
.login-root h5 {
|
||||
font-family: "Lexend Deca", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.login-root p,
|
||||
.login-root a,
|
||||
.login-root button,
|
||||
.login-root input {
|
||||
font-family: "Secular One", sans-serif;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| PASSWORD RESET
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.password-reset-root {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
width: calc(100% - 1.4rem);
|
||||
background-color: #151515;
|
||||
color: #E8E3E3;
|
||||
border-radius: 0.4rem;
|
||||
border: 0.2rem solid #B66467;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
}
|
||||
.password-reset-root > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.password-reset-root h1,
|
||||
.password-reset-root h2,
|
||||
.password-reset-root h3,
|
||||
|
|
|
|||
|
|
@ -1,26 +1,40 @@
|
|||
/*
|
||||
|-------------------------------------------------------------
|
||||
| DEFAULTS
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.defaultSpacing {
|
||||
@include defaultSpacing();
|
||||
}
|
||||
|
||||
.defaultDecoration {
|
||||
@include defaultDecoration($page-accent);
|
||||
}
|
||||
.warningDecoration {
|
||||
@include defaultDecoration($red);
|
||||
}
|
||||
|
||||
.defaultFonts {
|
||||
@include defaultFont();
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| 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;
|
||||
}
|
||||
|
|
@ -46,17 +60,7 @@
|
|||
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;
|
||||
@include flexLeft(none);
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
|
|
@ -130,6 +134,9 @@
|
|||
}
|
||||
|
||||
.nsfw-warning {
|
||||
@include flexDown(center);
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
|
@ -141,11 +148,6 @@
|
|||
position: absolute;
|
||||
z-index: 5;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
text-decoration: none;
|
||||
font-family: $font-body;
|
||||
|
||||
|
|
@ -322,18 +324,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
// DESCRIPTION
|
||||
.image-description {
|
||||
@include defaultDecoration($page-accent);
|
||||
@include defaultFont();
|
||||
}
|
||||
|
||||
|
||||
// DETAILS
|
||||
.image-detail {
|
||||
@include defaultDecoration($page-accent);
|
||||
@include defaultFont();
|
||||
|
||||
&>div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -364,12 +357,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// TAGS
|
||||
.tags-root {
|
||||
@include defaultDecoration($page-accent);
|
||||
@include defaultFont();
|
||||
}
|
||||
|
||||
.tags {
|
||||
@include flexLeft(auto);
|
||||
margin-bottom: 0;
|
||||
|
|
@ -392,29 +379,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
// DANGER ZONE
|
||||
.danger-zone {
|
||||
@include defaultDecoration($red);
|
||||
@include defaultFont();
|
||||
}
|
||||
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
| Groups
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.group-root {
|
||||
@include defaultDecoration($page-accent);
|
||||
@include defaultFont();
|
||||
|
||||
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1) transform 0.15s cubic-bezier(.19, 1, .22, 1);
|
||||
}
|
||||
.selectedImage {
|
||||
outline: $page-accent solid 0.3rem;
|
||||
}
|
||||
.group-name {
|
||||
@include defaultFont();
|
||||
|
||||
margin: 0;
|
||||
|
||||
position: absolute;
|
||||
|
|
@ -428,6 +401,8 @@
|
|||
|
||||
opacity: 0;
|
||||
font-size: 17px;
|
||||
font-family: $font-body;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gallery-group {
|
||||
|
|
@ -443,16 +418,18 @@
|
|||
z-index: 5;
|
||||
}
|
||||
|
||||
.group-item:hover {
|
||||
& .gallery-group {
|
||||
backdrop-filter: brightness(0.5);
|
||||
.group-item {
|
||||
&:hover {
|
||||
& .gallery-group {
|
||||
backdrop-filter: brightness(0.5);
|
||||
}
|
||||
& .nsfw-warning > * {
|
||||
display: none;
|
||||
}
|
||||
& .group-name {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
& .nsfw-warning > * {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.group-item:hover .group-name {
|
||||
opacity: 1;
|
||||
}
|
||||
/*
|
||||
|-------------------------------------------------------------
|
||||
|
|
@ -460,9 +437,6 @@
|
|||
|-------------------------------------------------------------
|
||||
*/
|
||||
.profile-root {
|
||||
@include defaultDecoration($page-accent);
|
||||
@include defaultFont();
|
||||
|
||||
margin: 3rem auto 1rem auto;
|
||||
|
||||
min-height: 7rem;
|
||||
|
|
@ -536,9 +510,6 @@
|
|||
|-------------------------------------------------------------
|
||||
*/
|
||||
.upload-root {
|
||||
@include defaultDecoration($page-accent);
|
||||
@include defaultFont();
|
||||
|
||||
& > img {
|
||||
margin: 0 auto;
|
||||
|
||||
|
|
@ -557,10 +528,6 @@
|
|||
| ACCOUNT
|
||||
|-------------------------------------------------------------
|
||||
*/
|
||||
.profile-settings {
|
||||
@include defaultDecoration($page-accent);
|
||||
@include defaultFont();
|
||||
}
|
||||
.pfp-upload {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -599,15 +566,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.account-root {
|
||||
@include defaultDecoration($red);
|
||||
@include defaultFont();
|
||||
}
|
||||
.admin-root {
|
||||
@include defaultDecoration($page-accent);
|
||||
@include defaultFont();
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex; flex-direction: row;
|
||||
|
||||
|
|
@ -794,17 +752,6 @@
|
|||
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
|
||||
|
|
|
|||
|
|
@ -1,9 +1,4 @@
|
|||
@mixin defaultDecoration($border) {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
|
||||
width: calc(100% - 1.4rem);
|
||||
|
||||
background-color: $bg;
|
||||
color: $fg;
|
||||
|
||||
|
|
@ -11,8 +6,13 @@
|
|||
border: 0.2rem solid $border;
|
||||
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
@mixin defaultSpacing() {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0.5rem 0 0.5rem;
|
||||
|
||||
width: calc(100% - 1.4rem);
|
||||
|
||||
>* {
|
||||
margin-top: 0;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<body>
|
||||
<?php require_once __DIR__."/assets/ui/nav.php"; ?>
|
||||
|
||||
<div class="group-root">
|
||||
<div class="defaultDecoration defaultSpacing defaultFonts">
|
||||
<?php
|
||||
if (!isset($_GET['id']) || empty($_GET['id'])) {
|
||||
header("Location: index.php");
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
?>
|
||||
</div>
|
||||
|
||||
<div class="gallery-root">
|
||||
<div class="gallery-root defaultDecoration">
|
||||
<?php
|
||||
if (isset($_GET['mode']) && $_GET['mode'] == "edit") {
|
||||
$image_request = mysqli_query($conn, "SELECT * FROM images ORDER BY id DESC");
|
||||
|
|
|
|||
|
|
@ -174,13 +174,13 @@
|
|||
if ($image_present) {
|
||||
?>
|
||||
|
||||
<div class="image-description default-window">
|
||||
<div class="defaultDecoration defaultSpacing defaultFonts">
|
||||
<h2>Description</h2>
|
||||
<p><?php echo htmlentities($image_alt, ENT_QUOTES); ?></p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="image-detail">
|
||||
<div class="image-detail defaultDecoration defaultSpacing defaultFonts">
|
||||
<h2>Details</h2>
|
||||
<div>
|
||||
<div>
|
||||
|
|
@ -261,7 +261,7 @@
|
|||
</script>
|
||||
</div>
|
||||
|
||||
<div class="tags-root default-window">
|
||||
<div class="defaultDecoration defaultSpacing defaultFonts">
|
||||
<h2>Tags</h2>
|
||||
<div class="tags">
|
||||
<?php
|
||||
|
|
@ -294,7 +294,7 @@
|
|||
if ($privilaged) {
|
||||
?>
|
||||
<!-- Danger zone -->
|
||||
<div class='danger-zone'>
|
||||
<div class='warningDecoration defaultSpacing defaultFonts'>
|
||||
<h2>Danger zone</h2>
|
||||
|
||||
<!--
|
||||
|
|
|
|||
10
index.php
10
index.php
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
?>
|
||||
|
||||
<div class="info-text">
|
||||
<div class="info-text defaultFonts">
|
||||
<?php
|
||||
// Set time for message
|
||||
$time = date("H");
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
?>
|
||||
</div>
|
||||
|
||||
<div class="gallery-root">
|
||||
<div class="gallery-root defaultDecoration">
|
||||
<?php
|
||||
// Reading images from table
|
||||
$group_list = mysqli_query($conn, "SELECT * FROM groups ORDER BY id DESC");
|
||||
|
|
@ -75,20 +75,20 @@
|
|||
echo "<div class='gallery-item group-item'>
|
||||
<a href='group.php?id=".$group['id']."' class='nsfw-warning gallery-group'><img class='svg' src='assets/icons/warning_red.svg'><span>NSFW</span></a>
|
||||
<a href='group.php?id=".$group['id']."'><img class='gallery-image nsfw-blur' loading='lazy' src='".$image_path."' id='".$group['id']."'></a>
|
||||
<p class='group-name'>".$group['group_name']."</p>
|
||||
<a href='group.php?id=".$group['id']."' class='group-name'>".$group['group_name']."</a>
|
||||
</div>";
|
||||
} else {
|
||||
echo "<div class='gallery-item group-item'>
|
||||
<a href='group.php?id=".$group['id']."' class='gallery-group'></a>
|
||||
<a href='group.php?id=".$group['id']."'><img class='gallery-image' loading='lazy' src='".$image_path."' id='".$group['id']."'></a>
|
||||
<p class='group-name'>".$group['group_name']."</p>
|
||||
<a href='group.php?id=".$group['id']."' class='group-name'>".$group['group_name']."</a>
|
||||
</div>";
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<div class="gallery-root">
|
||||
<div class="gallery-root defaultDecoration">
|
||||
<?php
|
||||
// Reading images from table
|
||||
$image_request = mysqli_query($conn, "SELECT * FROM images ORDER BY id DESC");
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
?>
|
||||
|
||||
<div class="password-reset-root">
|
||||
<div class="warningDecoration defaultSpacing defaultFonts">
|
||||
<h2>Reset Password</h2>
|
||||
<p>After reset, you will be kicked out to login again</p>
|
||||
<br>
|
||||
|
|
@ -32,6 +32,8 @@
|
|||
<br>
|
||||
<button id="passwordSubmit" class="btn btn-bad" type="submit" name="reset"><img class="svg" src="assets/icons/sign-in.svg">Reset</button>
|
||||
</form>
|
||||
<br>
|
||||
<a href="account.php" class="btn btn-neutral" ><img class="svg" src="assets/icons/sign-in.svg">Cancel</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
$join_date = new DateTime($user['created_at']);
|
||||
?>
|
||||
|
||||
<div class="profile-root">
|
||||
<div class="profile-root defaultDecoration defaultSpacing defaultFonts">
|
||||
<?php
|
||||
if (!empty($user)) {
|
||||
if (is_file("images/pfp/".$user['pfp_path'])) {
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
?>
|
||||
</div>
|
||||
|
||||
<div id="gallery" class="gallery-root">
|
||||
<div id="gallery" class="gallery-root defaultDecoration">
|
||||
<?php
|
||||
|
||||
// Reading images from table
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
}
|
||||
?>
|
||||
|
||||
<div class="upload-root">
|
||||
<div class="defaultDecoration defaultSpacing defaultFonts">
|
||||
<h2>Upload image</h2>
|
||||
<p>In this world you have 2 choices, to upload a really cute picture of an animal or fursuit, or something other than those 2 things.</p>
|
||||
<img id="imagePreview" src="">
|
||||
|
|
|
|||
Loading…
Reference in a new issue