GsFH/style.css at main · GsLibrary/GsFH · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
body {
    box-sizing: border-box;
    background-color: #0a0a0a;
    /* border: 3px solid red; */
}

.container {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center; /* Left/Right/Center Aligning */
    align-items: center; /* Up/Down/Center Aligning */
}

.form {
    display: flex; /* Changed from block to flex */
    flex-direction: column; /* Arrange items in a column */
    box-sizing: border-box;
    background-color: #1a1a1a;
    width: 45%;
    height: 85%;
    border: 1px solid black;
    border-radius: 4%;
    padding: 4%;
    justify-content: left; /* Center elements vertically */
    align-items: center; /* Center elements horizontally */
}


.file-upload {
    display: inline-flex;
    position: relative;
    cursor: pointer;
    padding: 20px 60px;
    border: 2px dashed #aaa;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 20px;
    color: #aaa;
    transition: 0.3s ease-out;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: nowrap;
    width: 360px; /* Fixed width of the button */
    height: 40px; /* Fixed height of the button */
    /* background-image: url(y.png); */
    background: linear-gradient(45deg, #1b1b1b, #2a2a2a);
    background-size: 400% 400%;
    animation: gradientBG 10s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

.file-upload:hover {
    border-color: #bb2222;
    color: #bb2222;
}

.file-upload input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload span {
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: calc(1vw + 10px); /* Dynamically adjusts text size, but doesn't cause overflow */
    text-align: center; /* Ensures the text remains centered */
    line-height: 1.2; /* Adjusts line height to fit the content */
    word-wrap: break-word; /* Prevents text overflow */
}


.configs {
    display: flex;
    justify-content: center; /* Left/Right/Center Aligning */
    align-items: center; /* Up/Down/Center Aligning */
    margin-top: 5%;
    gap: 1%;
}

.config {
    display: inline;
    font-family: Arial, sans-serif;
    font-size: 20px;
    color: #aaa;
    background-color: #2a2a2a;
    padding: 10px 30px;
    border: 1px solid #aaa;
    border-radius: 8px;
    cursor: pointer;
}

.upload-button {
    display: flex;
    justify-content: center; /* Left/Right/Center Aligning */
    align-items: center; /* Up/Down/Center Aligning */
    margin-top: 80%;
    gap: 1%;
}

#upload {
    cursor: pointer;
    padding: 20px 60px;
    border: 1px solid #aaa;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 20px;
    color: #aaa;
    transition: 0.3s ease-out;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #2a2a2a;
}