Move files
This commit is contained in:
Lncvrt committed
1 parent
30dd940c0e
commit
a58ecbb597
43 files changed
+7
-7
No files matched your search
@@ -0,0 +1,703 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #060606;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: normal;
|
||||
flex-direction: column;
|
||||
font-size: 0.78vw;
|
||||
}
|
||||
|
||||
body.tint::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99998;
|
||||
}
|
||||
|
||||
#container {
|
||||
text-align: center;
|
||||
padding: 1.04vw;
|
||||
border-radius: 0.52vw;
|
||||
margin-top: 1.04vw;
|
||||
background-color: #0E0E0E;
|
||||
box-shadow: 0 0.21vw 0.42vw rgba(0, 0, 0, 0.1);
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
min-width: 15.62vw;
|
||||
max-width: 79%;
|
||||
}
|
||||
|
||||
|
||||
#main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 2.60vw;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 1.04vw;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info-group {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin: 1.04vw;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background-color: #131313;
|
||||
padding: 1.04vw 0.52vw;
|
||||
border-radius: 0.42vw;
|
||||
max-width: 20.83vw;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0.21vw 0.42vw rgba(0, 0, 0, 0.1);
|
||||
margin-left: 0.52vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.info-box p.big {
|
||||
font-size: 1.25vw;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.42vw;
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
font-size: 1vw;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#container h1 {
|
||||
margin-right: auto;
|
||||
margin-left: 1.30vw;
|
||||
margin-bottom: 1.04vw;
|
||||
}
|
||||
|
||||
#container h2 {
|
||||
color: #fff;
|
||||
font-size: 1.5em;
|
||||
margin-top: 1.04vw;
|
||||
margin-bottom: 0.52vw;
|
||||
}
|
||||
|
||||
#uploadStats,
|
||||
#loginStats {
|
||||
margin-top: 1.04vw;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#charts-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 1.56vw;
|
||||
}
|
||||
|
||||
#canvas-group {
|
||||
background-color: #131313;
|
||||
border-radius: 0.52vw;
|
||||
margin: 0 1.04vw;
|
||||
}
|
||||
|
||||
#canvas-group p {
|
||||
font-size: 1.30vw;
|
||||
}
|
||||
|
||||
#canvas-group canvas {
|
||||
max-width: 22vw;
|
||||
max-height: 22vh;
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
text-align: center;
|
||||
max-width: 90%;
|
||||
margin-top: 1.04vw;
|
||||
justify-content: space-between;
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
margin: 0.26vw;
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
background-color: #131313;
|
||||
box-shadow: 0 0.21vw 0.42vw rgba(0, 0, 0, 0.1);
|
||||
padding: 0.26vw;
|
||||
border-radius: 0.52vw;
|
||||
width: 15vw;
|
||||
height: 15vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: transform 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gallery-item img {
|
||||
max-width: 100%;
|
||||
max-height: 50%;
|
||||
height: auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.gallery-item textarea {
|
||||
background-color: #222;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
resize: none;
|
||||
overflow: auto;
|
||||
transition: border-color 0.3s ease;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gallery-item textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.gallery-item textarea:hover {
|
||||
border-color: #370664;
|
||||
}
|
||||
|
||||
.gallery-item:hover {
|
||||
transform: scale(1.015);
|
||||
}
|
||||
|
||||
.gallery-btn {
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
position: absolute;
|
||||
top: 0.52vw;
|
||||
right: 0.52vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.icon-container i {
|
||||
margin-left: 0.52vw;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 1.56vw;
|
||||
background-color: #0E0E0E;
|
||||
margin-right: auto;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
margin-bottom: 1.56vw;
|
||||
font-size: 1.56vw;
|
||||
}
|
||||
|
||||
#upload {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#dropZone {
|
||||
width: 50%;
|
||||
height: 30vh;
|
||||
border: 0.10vw solid #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10%;
|
||||
cursor: pointer;
|
||||
background-color: #0E0E0E;
|
||||
box-shadow: 0 0.21vw 0.42vw rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0.52vw;
|
||||
padding: 1.04vw;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
#dropZone p {
|
||||
color: #fff;
|
||||
font-size: 1.04vw;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#dropZone:hover {
|
||||
transform: scale(1.02)
|
||||
}
|
||||
|
||||
#progressContainer {
|
||||
width: 50%;
|
||||
height: 2vh;
|
||||
border: 0.10vw solid #fff;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 2%;
|
||||
background-color: #0E0E0E;
|
||||
box-shadow: 0 0.21vw 0.42vw rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0.52vw;
|
||||
padding: 1.04vw;
|
||||
}
|
||||
|
||||
#progressBar {
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
#progressText, #uploadSpeed {
|
||||
color: #fff;
|
||||
font-size: 1.04vw;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: #131313;
|
||||
padding: 1.04vw;
|
||||
margin-bottom: 1.04vw;
|
||||
border-radius: 0.42vw;
|
||||
box-shadow: 0 0.21vw 0.42vw rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.half-width {
|
||||
width: calc(50% - 1vw);
|
||||
margin-right: 0.26vw;
|
||||
margin-left: 0.26vw;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 3.12vw;
|
||||
height: 1.77vw;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
border-radius: 1.77vw;
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #222;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.slider-container p {
|
||||
font-size: 0.8vw;
|
||||
margin: 0.2vh 0 0.2vh 0;
|
||||
}
|
||||
|
||||
.slider-label {
|
||||
margin-right: 0.52vw;
|
||||
color: #fff;
|
||||
font-size: 0.8vw;
|
||||
font-weight: bold;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 1.35vw;
|
||||
width: 1.35vw;
|
||||
left: 0.21vw;
|
||||
bottom: 0.21vw;
|
||||
background-color: white;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked+.slider {
|
||||
background-color: #370664;
|
||||
}
|
||||
|
||||
input:focus+.slider {
|
||||
box-shadow: 0 0 0.05vw #370664;
|
||||
}
|
||||
|
||||
input:checked+.slider:before {
|
||||
-webkit-transform: translateX(1.35vw);
|
||||
-ms-transform: translateX(1.35vw);
|
||||
transform: translateX(1.35vw);
|
||||
}
|
||||
|
||||
.icon-check,
|
||||
.icon-times {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 0.52vw;
|
||||
}
|
||||
|
||||
.icon-check {
|
||||
left: 0.42vw;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.icon-times {
|
||||
right: 0.42vw;
|
||||
}
|
||||
|
||||
input:checked~.icon-check {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input:checked~.icon-times {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.upload-tools {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1.04vw;
|
||||
}
|
||||
|
||||
.tool-box {
|
||||
width: 6.67vw;
|
||||
height: 6.67vw;
|
||||
background-color: #333;
|
||||
border-radius: 0.42vw;
|
||||
padding: 0.26vw;
|
||||
text-align: center;
|
||||
margin: 0.26vw;
|
||||
}
|
||||
|
||||
.tool-title {
|
||||
margin-top: 0.26vw;
|
||||
font-size: 1.04vw;
|
||||
color: #fff;
|
||||
margin-bottom: 0.52vw;
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
font-size: 2.50vw;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
padding: 0.52vw 1.04vw;
|
||||
background-color: #3c076e;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-radius: 0.26vw;
|
||||
font-size: 0.94vw;
|
||||
transition: background-color 0.3s, transform 0.3s;
|
||||
cursor: pointer;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #370664;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
margin-bottom: 1.04vw;
|
||||
}
|
||||
|
||||
.settings-label {
|
||||
display: block;
|
||||
margin-bottom: 0.42vw;
|
||||
font-size: 0.83vw;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 0.42vw 0.52vw;
|
||||
font-size: 0.73vw;
|
||||
border: 0.05vw solid #ccc;
|
||||
border-radius: 0.21vw;
|
||||
background-color: #131313;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
select:hover {
|
||||
border-color: #370664;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0.2rem rgba(55, 6, 160, 0.25);
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.settings-radio-group {
|
||||
width: 100%;
|
||||
padding: 0.42vw 0.52vw;
|
||||
font-size: 0.73vw;
|
||||
border: 0.05vw solid #ccc;
|
||||
border-radius: 0.21vw;
|
||||
background-color: #131313;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.settings-radio-group:hover {
|
||||
border-color: #370664;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0.2rem rgba(55, 6, 160, 0.25);
|
||||
}
|
||||
|
||||
.settings-radio-group .settings-label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.26vw;
|
||||
}
|
||||
|
||||
.settings-radio-group label {
|
||||
display: inline-block;
|
||||
margin-right: 0.78vw;
|
||||
font-size: 0.73vw;
|
||||
}
|
||||
|
||||
.radio-container input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.radio-container .fa-circle,
|
||||
.radio-container .fa-check-circle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.radio-container input[type="radio"]:checked+.fa-circle+.fa-check-circle {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.radio-container input[type="radio"]:not(:checked)+.fa-circle {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.radio-container input[type="radio"]:disabled+.fa-circle {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.radio-container input[type="radio"]:disabled+.fa-circle+.fa-check-circle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
width: 90%;
|
||||
padding: 0.52vw;
|
||||
margin-bottom: 1.04vw;
|
||||
background-color: #131313;
|
||||
border: none;
|
||||
border-radius: 0.42vw;
|
||||
color: #fff;
|
||||
font-size: 0.94vw;
|
||||
}
|
||||
|
||||
.input-field:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0.52vw rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin: 1.04vw 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select-field {
|
||||
width: 92%;
|
||||
padding: 0.52vw;
|
||||
background-color: #131313;
|
||||
border: none;
|
||||
border-radius: 0.42vw;
|
||||
color: #fff;
|
||||
font-size: 0.94vw;
|
||||
margin-bottom: 1.04vw;
|
||||
}
|
||||
|
||||
.select-field:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#notification-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 10000;
|
||||
transition: transform 0.5s ease-in-out;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.notification {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin: 10px;
|
||||
padding: 15px;
|
||||
color: white;
|
||||
background-color: #333;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.5s ease-in-out;
|
||||
min-width: 15vw;
|
||||
min-height: 6.5vh;
|
||||
max-width: 30vw;
|
||||
height: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.notification div:first-child {
|
||||
border-right: 1px solid white;
|
||||
padding-right: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.notification i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#notification-message {
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: #131313;
|
||||
border: 0.05vw solid #ccc;
|
||||
border-radius: 0.21vw;
|
||||
color: #fff;
|
||||
font-size: 0.83vw;
|
||||
padding: 0.42vw 0.52vw;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0.3vh 0 0.3vh 0;
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input:hover {
|
||||
border-color: #370664;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 0.2rem rgba(55, 6, 160, 0.25);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0.52vw rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
form textarea {
|
||||
background-color: #131313;
|
||||
border: 0.05vw solid #ccc;
|
||||
border-radius: 0.21vw;
|
||||
color: #fff;
|
||||
font-size: 0.83vw;
|
||||
padding: 0.42vw 0.52vw;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0.3vh 0 0.3vh 0;
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
#account-information .blur-on-hover {
|
||||
filter: blur(8px);
|
||||
font-style: normal;
|
||||
transition: filter 0.25s ease;
|
||||
}
|
||||
|
||||
#account-information .blur-on-hover:hover {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.file-textbox {
|
||||
width: 50vw;
|
||||
min-height: 30vh;
|
||||
max-height: 100vh;
|
||||
background-color: #222;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
resize: none;
|
||||
overflow: auto;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.file-textbox:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.file-textbox:hover {
|
||||
border-color: #370664;
|
||||
}
|
||||
Reference in new issue
Block a user