-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c89074b
commit b74369d
Showing
1 changed file
with
137 additions
and
137 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,248 +1,248 @@ | ||
| /* Light Theme */ | ||
| body { | ||
| font-family: Arial, sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| background-color: #f5f5f5; | ||
| display: flex; | ||
| flex-direction: column; | ||
| min-height: 100vh; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| transition: background-color 0.3s ease; | ||
| font-family: Arial, sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| background-color: #f5f5f5; | ||
| display: flex; | ||
| flex-direction: column; | ||
| min-height: 100vh; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
|
|
||
| .header { | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| background-color: transparent; | ||
| z-index: 999; | ||
| padding: 10px; | ||
| box-sizing: border-box; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| background-color: transparent; | ||
| z-index: 999; | ||
| padding: 10px; | ||
| box-sizing: border-box; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-grow: 1; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-grow: 1; | ||
| } | ||
|
|
||
| .theme-toggle { | ||
| padding: 5px; | ||
| border-radius: 20px; | ||
| display: flex; | ||
| align-items: center; | ||
| padding: 5px; | ||
| border-radius: 20px; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .theme-icon { | ||
| font-size: 24px; | ||
| margin: 0 10px; | ||
| color: #333; | ||
| transition: color 0.3s ease; | ||
| font-size: 24px; | ||
| margin: 0 10px; | ||
| color: #333; | ||
| transition: color 0.3s ease; | ||
| } | ||
|
|
||
| .switch { | ||
| position: relative; | ||
| display: inline-block; | ||
| width: 60px; | ||
| height: 34px; | ||
| position: relative; | ||
| display: inline-block; | ||
| width: 60px; | ||
| height: 34px; | ||
| } | ||
|
|
||
| .switch input { | ||
| opacity: 0; | ||
| width: 0; | ||
| height: 0; | ||
| opacity: 0; | ||
| width: 0; | ||
| height: 0; | ||
| } | ||
|
|
||
| .slider { | ||
| position: absolute; | ||
| cursor: pointer; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| background-color: #333; | ||
| -webkit-transition: 0.4s; | ||
| transition: 0.4s; | ||
| position: absolute; | ||
| cursor: pointer; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| background-color: #333; | ||
| -webkit-transition: 0.4s; | ||
| transition: 0.4s; | ||
| } | ||
|
|
||
| .slider:before { | ||
| position: absolute; | ||
| content: ""; | ||
| height: 26px; | ||
| width: 26px; | ||
| left: 4px; | ||
| bottom: 4px; | ||
| background-color: white; | ||
| -webkit-transition: 0.4s; | ||
| transition: 0.4s; | ||
| position: absolute; | ||
| content: ""; | ||
| height: 26px; | ||
| width: 26px; | ||
| left: 4px; | ||
| bottom: 4px; | ||
| background-color: white; | ||
| -webkit-transition: 0.4s; | ||
| transition: 0.4s; | ||
| } | ||
|
|
||
| input:checked + .slider { | ||
| background-color: #fff; | ||
| input:checked+.slider { | ||
| background-color: #fff; | ||
| } | ||
|
|
||
| input:focus + .slider { | ||
| box-shadow: 0 0 1px #2196F3; | ||
| input:focus+.slider { | ||
| box-shadow: 0 0 1px #2196F3; | ||
| } | ||
|
|
||
| input:checked + .slider:before { | ||
| -webkit-transform: translateX(26px); | ||
| -ms-transform: translateX(26px); | ||
| transform: translateX(26px); | ||
| background-color: #333; | ||
| input:checked+.slider:before { | ||
| -webkit-transform: translateX(26px); | ||
| -ms-transform: translateX(26px); | ||
| transform: translateX(26px); | ||
| background-color: #333; | ||
| } | ||
|
|
||
| .slider.round { | ||
| border-radius: 34px; | ||
| border-radius: 34px; | ||
| } | ||
|
|
||
| .slider.round:before { | ||
| border-radius: 50%; | ||
| border-radius: 50%; | ||
| } | ||
|
|
||
| .container { | ||
| max-width: 500px; | ||
| padding: 20px; | ||
| background-color: #fff; | ||
| box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); | ||
| text-align: center; | ||
| border-radius: 12px; | ||
| margin-top: 140px; | ||
| transition: background-color 0.3s ease; | ||
| max-width: 500px; | ||
| padding: 20px; | ||
| background-color: #fff; | ||
| box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); | ||
| text-align: center; | ||
| border-radius: 12px; | ||
| margin-top: 140px; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
|
|
||
| h1 { | ||
| margin-top: 0; | ||
| color: #333; | ||
| transition: color 0.3s ease; | ||
| margin-top: 0; | ||
| color: #333; | ||
| transition: color 0.3s ease; | ||
| } | ||
|
|
||
| .location-input { | ||
| margin-bottom: 20px; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| #location-input { | ||
| padding: 10px; | ||
| font-size: 16px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 4px; | ||
| outline: none; | ||
| width: 70%; | ||
| transition: border-color 0.3s ease; | ||
| padding: 10px; | ||
| font-size: 16px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 4px; | ||
| outline: none; | ||
| width: 70%; | ||
| transition: border-color 0.3s ease; | ||
| } | ||
|
|
||
| #location-input:focus { | ||
| border-color: #4CAF50; | ||
| border-color: #4CAF50; | ||
| } | ||
|
|
||
| #location-submit { | ||
| padding: 10px 20px; | ||
| font-size: 16px; | ||
| background-color: #4CAF50; | ||
| color: white; | ||
| border: none; | ||
| border-radius: 4px; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s ease; | ||
| padding: 10px 20px; | ||
| font-size: 16px; | ||
| background-color: #4CAF50; | ||
| color: white; | ||
| border: none; | ||
| border-radius: 4px; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s ease; | ||
| } | ||
|
|
||
| #location-submit:hover { | ||
| background-color: #45a049; | ||
| background-color: #45a049; | ||
| } | ||
|
|
||
| .weather-info { | ||
| display: none; | ||
| margin-top: 20px; | ||
| font-weight: bold; | ||
| display: none; | ||
| margin-top: 20px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .weather-info { | ||
| display: none; | ||
| margin-top: 20px; | ||
| font-weight: bold; | ||
| display: none; | ||
| margin-top: 20px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .location, | ||
| .current-weather { | ||
| margin-bottom: 15px; | ||
| margin-bottom: 15px; | ||
| } | ||
|
|
||
| #weather-icon { | ||
| font-size: 100px; | ||
| color: #333; | ||
| transition: color 0.3s ease; | ||
| font-size: 100px; | ||
| color: #333; | ||
| transition: color 0.3s ease; | ||
| } | ||
|
|
||
| .current-weather #temperature { | ||
| font-size: 46px; | ||
| font-weight: bold; | ||
| transition: color 0.3s ease; | ||
| margin-top: 20px; | ||
| margin-bottom: 20px; | ||
| font-size: 46px; | ||
| font-weight: bold; | ||
| transition: color 0.3s ease; | ||
| margin-top: 20px; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .current-weather #wind-speed { | ||
| margin-top: 0px; | ||
| font-size: 16px; | ||
| transition: color 0.3s ease; | ||
| margin-top: 0px; | ||
| font-size: 16px; | ||
| transition: color 0.3s ease; | ||
| } | ||
|
|
||
| .footer { | ||
| background-color: transparent; | ||
| margin-top: auto; | ||
| padding: 10px; | ||
| text-align: center; | ||
| z-index: 999; | ||
| background-color: transparent; | ||
| margin-top: auto; | ||
| padding: 10px; | ||
| text-align: center; | ||
| z-index: 999; | ||
| } | ||
|
|
||
| .social-icons a { | ||
| color: #333; | ||
| text-decoration: none; | ||
| margin: 0 15px; | ||
| font-size: 24px; | ||
| transition: color 0.3s ease; | ||
| color: #333; | ||
| text-decoration: none; | ||
| margin: 0 15px; | ||
| font-size: 24px; | ||
| transition: color 0.3s ease; | ||
| } | ||
|
|
||
| /* Dark Theme */ | ||
| body.dark-theme { | ||
| background-color: #333; | ||
| color: #fff; | ||
| background-color: #333; | ||
| color: #fff; | ||
| } | ||
|
|
||
| body.dark-theme .theme-icon { | ||
| color: #fff; | ||
| color: #fff; | ||
| } | ||
|
|
||
| body.dark-theme .container { | ||
| background-color: #222; | ||
| background-color: #222; | ||
| } | ||
|
|
||
| body.dark-theme h1, | ||
| body.dark-theme #weather-icon, | ||
| body.dark-theme .temperature, | ||
| body.dark-theme .wind-speed, | ||
| body.dark-theme .social-icons a { | ||
| color: #fff; | ||
| color: #fff; | ||
| } | ||
|
|
||
| body.dark-theme #location-input { | ||
| background-color: #444; | ||
| color: #fff; | ||
| border-color: #555; | ||
| background-color: #444; | ||
| color: #fff; | ||
| border-color: #555; | ||
| } | ||
|
|
||
| body.dark-theme #location-submit { | ||
| background-color: #555; | ||
| background-color: #555; | ||
| } | ||
|
|
||
| body.dark-theme #location-submit:hover { | ||
| background-color: #666; | ||
| background-color: #666; | ||
| } |