failed-galleries/php-gallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2024-12-28 18:36:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixing up some CSS

Browse source
This commit is contained in:
Michał 2022-08-08 19:59:40 +01:00
parent d8b20c9b34
commit bf449271e6
6 changed files with 34 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
Flyout/flyout.css
View file

@ -1,13 +1,16 @@
.flyout-dim { .flyout-dim {
margin: 0; padding: 0;
width: 100vw; height: 100vh; width: 100vw; height: 100vh;
display: none; display: none;
position: fixed; z-index: 99; top: 0; bottom: 0; left: 0; right: 0;
object-position: center; position: fixed; z-index: 999;
background-color: #151515aa; background-color: var(--bg);
backdrop-filter: blur(8px);
opacity: 0; opacity: 0;
@ -20,18 +23,21 @@
max-width: 621px; width: calc(100% - 3.5rem); max-width: 621px; width: calc(100% - 3.5rem);
max-height: 20rem; height: auto; min-height: 10rem; max-height: 20rem; height: auto; min-height: 10rem;
position: fixed; z-index: 999999999; position: fixed; z-index: 9999;
left: 50%; bottom: -15rem; left: 50%; bottom: -15rem;
transform: translateX(-50%) scale(0.5); transform: translateX(-50%) scale(0.5);
background-color: #151515; overflow-y: auto;
background-color: var(--bg);
backdrop-filter: blur(8px);
color: white; color: white;
transition: transform 1s cubic-bezier(.19,1,.22,1), bottom 1s cubic-bezier(.19,1,.22,1); transition: transform 1s cubic-bezier(.19,1,.22,1), bottom 1s cubic-bezier(.19,1,.22,1);
border-radius: var(--rad); border-radius: var(--rad);
border: 0.2rem solid var(--green); border: 0.2rem solid var(--green);
outline: 0.5rem solid var(--bg); /*outline: 0.5rem solid var(--bg);*/
} }
.flyout-header { .flyout-header {

4
Flyout/flyout.js
View file

@ -8,6 +8,8 @@ $(document).ready(function() {
}); });
function flyoutShow(header, description, actionbox) { function flyoutShow(header, description, actionbox) {
// Hide overflow
document.querySelector("html").style.overflow = "hidden";
// Checking if actionbox is set // Checking if actionbox is set
if (typeof actionbox === 'undefined') { if (typeof actionbox === 'undefined') {
flyoutActionbox.style.display = "none"; flyoutActionbox.style.display = "none";
@ -36,6 +38,8 @@ function flyoutShow(header, description, actionbox) {
}; };
function flyoutClose() { function flyoutClose() {
// Show overflow
document.querySelector("html").style.overflow = "auto";
// Hide the flyout // Hide the flyout
flyoutRoot.style.transform = "translateX(-50%) scale(0.5)"; flyoutRoot.style.transform = "translateX(-50%) scale(0.5)";
flyoutRoot.style.bottom = "-20rem"; flyoutRoot.style.bottom = "-20rem";

2
Sniffle/sniffle.css
View file

@ -41,7 +41,7 @@
background-color: #151515; background-color: #151515;
box-shadow: 5px 5px 5px #151515aa; box-shadow: var(--shadow);
transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1); transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1);

2
css/footer.css
View file

@ -10,7 +10,7 @@ footer {
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 0.2rem solid var(--green); border: 0.2rem solid var(--green);
outline: 0.5rem solid var(--bg); /*outline: 0.5rem solid var(--bg);*/
border-radius: var(--rad); border-radius: var(--rad);
box-shadow: var(--shadow); box-shadow: var(--shadow);

20
css/master.css
View file

@ -11,7 +11,7 @@
@import "footer.css"; @import "footer.css";
:root { :root {
--bg: #15151588; --bg: #151515bb;
--bg-1: #242621; --bg-1: #242621;
--bg-2: #1D1E1C; --bg-2: #1D1E1C;
--bg-3: #151515; --bg-3: #151515;
@ -25,8 +25,8 @@
--black: #151515; --black: #151515;
--white: #E8E3E3; --white: #E8E3E3;
--shadow: 6px 6px 10px #15151588; --shadow: 6px 6px 2px #15151588;
--rad: 5px; --rad: 2px;
--square: 33.33%; --square: 33.33%;
} }
@ -62,6 +62,8 @@ body {
display: flex; display: flex;
position: relative;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
} }
@ -72,7 +74,7 @@ body {
#back-to-top { #back-to-top {
margin: 0; padding: 0.5rem; margin: 0; padding: 0.5rem;
position: fixed; z-index: 9999999; position: fixed; z-index: 99;
right: -2.5rem; bottom: 1rem; right: -2.5rem; bottom: 1rem;
object-position: center; object-position: center;
@ -109,7 +111,7 @@ body {
background-color: var(--bg); background-color: var(--bg);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
outline: 0.5rem solid var(--bg); /*outline: 0.5rem solid var(--bg);*/
border-radius: var(--rad); border-radius: var(--rad);
box-shadow: var(--shadow); box-shadow: var(--shadow);
@ -152,7 +154,7 @@ body {
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 0.2rem solid var(--green); border: 0.2rem solid var(--green);
outline: 0.5rem solid var(--bg); /*outline: 0.5rem solid var(--bg);*/
border-radius: var(--rad); border-radius: var(--rad);
box-shadow: var(--shadow); box-shadow: var(--shadow);
@ -203,7 +205,7 @@ body {
-=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
*/ */
.image-container { .image-container {
padding: 0.5rem; /*padding: 0.5rem;*/
width: calc(100vw - var(--space-medium)); width: calc(100vw - var(--space-medium));
max-height: 69vh; height: auto; max-height: 69vh; height: auto;
@ -212,7 +214,7 @@ body {
background-color: var(--bg); background-color: var(--bg);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
outline: 0.5rem solid var(--bg); /*outline: 0.5rem solid var(--bg);*/
border-radius: var(--rad); border-radius: var(--rad);
@ -355,7 +357,7 @@ body {
display: block; display: block;
border-radius: var(--rad); border-radius: var(--rad);
outline: 0.5rem solid var(--bg); /*outline: 0.5rem solid var(--bg);*/
} }
.alert { .alert {

6
css/nav.css
View file

@ -16,7 +16,7 @@ nav {
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 0.2rem solid var(--green); border: 0.2rem solid var(--green);
outline: 0.5rem solid var(--bg); /*outline: 0.5rem solid var(--bg);*/
border-radius: var(--rad); border-radius: var(--rad);
box-shadow: var(--shadow); box-shadow: var(--shadow);
@ -33,6 +33,10 @@ nav hr {
} }
.nav-name p, .nav-name { .nav-name p, .nav-name {
font-family: "Lexend Deca", sans-serif;
font-size: 22px;
display: block; display: block;
} }
.nav-links { .nav-links {