lots and lots of transitions
This commit is contained in:
@@ -57,7 +57,6 @@ html{height: 100%;}
|
||||
body{
|
||||
background-color: var(--background_color);
|
||||
background-repeat: repeat;
|
||||
font-size: 16px;
|
||||
font-family: 'Ubuntu';
|
||||
margin: 0;
|
||||
text-align: center; /* Center the header and body */
|
||||
@@ -103,7 +102,7 @@ body{
|
||||
text-decoration: none;
|
||||
font-family: "Lato Thin", sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 26px;
|
||||
font-size: 1.8em;
|
||||
transition: box-shadow 0.5s;
|
||||
}
|
||||
.navigation a:hover {
|
||||
@@ -214,13 +213,13 @@ pre{
|
||||
}
|
||||
|
||||
.big_button{
|
||||
height: 40px;
|
||||
height: 1.3em;
|
||||
width: 40%;
|
||||
min-width: 200px;
|
||||
max-width: 400px;
|
||||
margin: 10px !important;
|
||||
border-radius: 10px;
|
||||
font-size: 30px;
|
||||
font-size: 1.9em;
|
||||
font-weight: normal;
|
||||
line-height: 8px;
|
||||
}
|
||||
@@ -252,14 +251,6 @@ pre{
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.uploads_queue{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.file_button{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
@@ -276,7 +267,7 @@ pre{
|
||||
text-align: left;
|
||||
line-height: 120%;
|
||||
display: inline-block;
|
||||
transition: box-shadow 0.3s;
|
||||
transition: box-shadow 0.3s, opacity 2s;
|
||||
}
|
||||
.file_button:hover{
|
||||
box-shadow: 0px 0px 10px 3px var(--highlight_color), inset 0px 0px 6px 1px var(--highlight_color);
|
||||
@@ -344,7 +335,7 @@ input[type="button"]:active,
|
||||
input[type="color"]:active,
|
||||
select:active{
|
||||
background: linear-gradient(var(--input_color_dark), var(--input_color));
|
||||
box-shadow: inset 3px 3px 6px var(--shadow_color);
|
||||
box-shadow: inset 5px 5px 10px var(--shadow_color);
|
||||
padding: 11px 3px 1px 13px; /* Exactly 5px offset compared to the inactive padding to give a depth effect */
|
||||
}
|
||||
.button_full_width {width: calc(100% - 4px);}
|
||||
@@ -371,8 +362,8 @@ input[type="number"]{
|
||||
padding: 3px 5px;
|
||||
color: var(--input_text_color);
|
||||
height: 26px;
|
||||
font-size: 18px;
|
||||
font-family: 'Ubuntu', sans-serif;
|
||||
font-size: 1em;
|
||||
vertical-align: bottom;
|
||||
outline: 0;
|
||||
transition: box-shadow 0.3s;
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
/*
|
||||
Created on : Jul 30, 2015, 12:46:39 PM
|
||||
Author : Fornax
|
||||
*/
|
||||
|
||||
.file-container{
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.file-container-frame{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#listNavigator{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -100px;
|
||||
height: 98px;
|
||||
background-color: #000;
|
||||
box-shadow: 2px 2px 8px #000000;
|
||||
border-bottom: 2px ridge var(--highlight_color);
|
||||
text-align: center;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
#listNavigatorItems{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
border: none;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.listItem{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 95%;
|
||||
width: 100px;
|
||||
margin-right: 5px;
|
||||
text-align: center;
|
||||
border: #333 solid 2px;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.listItemThumbnail{
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
max-height: 84%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#arrow-left,
|
||||
#arrow-right{
|
||||
position: absolute;
|
||||
display: block;
|
||||
border-top: 30px solid transparent;
|
||||
border-bottom: 30px solid transparent;
|
||||
height: 0;
|
||||
width: 0;
|
||||
top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#arrow-left{
|
||||
border-right: 40px solid var(--highlight_color);
|
||||
left: 10px;
|
||||
}
|
||||
#arrow-right{
|
||||
border-left: 40px solid var(--highlight_color);
|
||||
right: 10px;
|
||||
}
|
||||
@@ -18,6 +18,7 @@ body{
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
transition: left 1s, top 1.5s;
|
||||
}
|
||||
|
||||
/* =====================
|
||||
@@ -107,6 +108,7 @@ body{
|
||||
text-align: left;
|
||||
border-right: 2px ridge var(--highlight_color);
|
||||
box-shadow: 2px 2px 8px var(--shadow_color);
|
||||
transition: left 1s, top 1.5s;
|
||||
}
|
||||
|
||||
/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
|
||||
@@ -129,7 +131,6 @@ body{
|
||||
|
||||
#button-expand-toolbar{
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
left: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
@@ -175,6 +176,7 @@ body{
|
||||
border-right: 2px ridge var(--highlight_color);
|
||||
z-index: 50;
|
||||
overflow: hidden;
|
||||
transition: left 1s, top 1.5s;
|
||||
}
|
||||
.sharebar-button {text-align: center;}
|
||||
|
||||
@@ -184,7 +186,9 @@ body{
|
||||
|
||||
.full_popup{
|
||||
position: fixed;
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 1s, opacity 1s, left 1s;
|
||||
background-color: var(--background_color);
|
||||
left: 142px;
|
||||
right: 20px;
|
||||
@@ -215,20 +219,6 @@ table > tbody > tr {border: none !important;}
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
#frmDownload{
|
||||
display: none;
|
||||
width: 1px;
|
||||
height: 0px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#copy-text{
|
||||
left: -100px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.bytecounter{
|
||||
color: var(--text_color);
|
||||
font-size: 16px;
|
||||
@@ -237,10 +227,100 @@ table > tbody > tr {border: none !important;}
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
background-image: url("/res/img/bytecounter.png");
|
||||
/*background-attachment: fixed;*/
|
||||
background-position: top right;
|
||||
width: 108px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
padding-right: 1px;
|
||||
}
|
||||
|
||||
/* ====================
|
||||
|| LIST NAVIGATOR ||
|
||||
==================== */
|
||||
|
||||
.file-container{
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.file-container-frame{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#listNavigator{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -100px;
|
||||
height: 98px;
|
||||
background-color: #000;
|
||||
box-shadow: 2px 2px 8px #000000;
|
||||
border-bottom: 2px ridge var(--highlight_color);
|
||||
text-align: center;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
z-index: 50;
|
||||
transition: top 1.5s;
|
||||
}
|
||||
|
||||
#listNavigatorItems{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
border: none;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.listItem{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 95%;
|
||||
width: 100px;
|
||||
margin-right: 5px;
|
||||
text-align: center;
|
||||
border: #333 solid 2px;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.listItemThumbnail{
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
max-height: 84%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#arrow-left,
|
||||
#arrow-right{
|
||||
position: absolute;
|
||||
display: block;
|
||||
border-top: 30px solid transparent;
|
||||
border-bottom: 30px solid transparent;
|
||||
height: 0;
|
||||
width: 0;
|
||||
top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#arrow-left{
|
||||
border-right: 40px solid var(--highlight_color);
|
||||
left: 10px;
|
||||
}
|
||||
#arrow-right{
|
||||
border-left: 40px solid var(--highlight_color);
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user