Github page folder name corrected.
This commit is contained in:
170
docs/index.css
Normal file
170
docs/index.css
Normal file
@@ -0,0 +1,170 @@
|
||||
html {
|
||||
min-height: 100vh;
|
||||
min-width: 100vw;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
#app-content {
|
||||
width: 60%;
|
||||
max-width: 880px;
|
||||
padding: 30px 40px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
background-image: linear-gradient(to right, #ffffff, #e6e6e6);
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
#app-content .header {
|
||||
width: 90%;
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
#app-content .logo {
|
||||
width: 30%;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#app-content .description {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#working-area .areas {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
#reminder-setting-area .reminder-days,
|
||||
#reminder-setting-area .reminder-hours {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#upload-area .button,
|
||||
#upload-area .file-input {
|
||||
padding: 10px 15px;
|
||||
margin-bottom: 15px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: background-color 0.3s, box-shadow 0.3s;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#upload-area .button:hover,
|
||||
#upload-area .file-input:hover {
|
||||
background-color: #007BFF;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#upload-area .file-input {
|
||||
display: block;
|
||||
width: 80%;
|
||||
color: #555;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
#upload-area .button {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#upload-area .button:disabled {
|
||||
background-color: #cccccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#upload-area #ical-upload {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#upload-area #ical-upload-label {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#upload-area #ical-upload-label:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
#app-content #download-area {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
transition: height 1.5s ease, opacity 0.5s ease;
|
||||
}
|
||||
|
||||
#app-content #download-area.show-download-area {
|
||||
height: 175px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#app-content #download-button {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
#app-content #download-button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
#app-content #footer {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
h1,
|
||||
a {
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#app-content #download-area.show-download-area {
|
||||
height: 290px;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user