From 120382aa3ebadaa0e30b86f43eb306072a8b7e94 Mon Sep 17 00:00:00 2001 From: Henrik Mildner Date: Fri, 31 Jan 2025 15:11:11 +0100 Subject: [PATCH] Nice login.css --- core/accounts/static/accounts/css/login.css | 129 +++++++++++++++++++- 1 file changed, 126 insertions(+), 3 deletions(-) diff --git a/core/accounts/static/accounts/css/login.css b/core/accounts/static/accounts/css/login.css index 2af334c..c086d0b 100644 --- a/core/accounts/static/accounts/css/login.css +++ b/core/accounts/static/accounts/css/login.css @@ -1,4 +1,127 @@ -/*This is the Stylesheet for the Login Screen*/ + body { - background-color: #bbbbbb; -} \ No newline at end of file + background-color: #1e1e1e; + color: #d3d3d3; + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + + + + +.login-container { + background-color: #2e2e2e; + padding: 30px; + border-radius: 15px; + width: 400px; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); + text-align: center; + border: 2px solid #da1f3d; +} + +.login-header { + color: #d3d3d3; + font-size: 24px; + margin-bottom: 20px; +} + + +.input-group { + width: 350px; + margin-bottom: 15px; + display: flex; + flex-direction: column; + align-items: center; + padding-left: 25px; + padding-right: 25px; +} + + +.input-group input { + width: 100%; + padding: 10px; + border: 1px solid #555; + border-radius: 15px; + background-color: #4a4a4a; + color: #d3d3d3; + outline: none; + transition: transform 0.2s ease; +} + + +.input-group input:focus { + transform: scale(1.06); + border-color: #da1f3d; +} + + +.login-button { + width: 50%; + padding: 13px; + background-color: #da1f3d; + color: #d3d3d3; + border: none; + border-radius: 15px; + cursor: pointer; + transition: background-color 0.3s ease; + font-size: 20px; + font-weight: bold; + margin-top: 10px; + transition: transform 0.2s ease; +} + + +.login-button:hover { + background-color: #d2324d; + transform: scale(1.06); +} + + +.login-logo { + width: 400px; + height: auto; + margin-bottom: 20px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; +} +.login-logo-mobile { + width: 150px; +} + + +.login-container { + text-align: center; +} + +/* MOBILE DEVICES */ +@media (max-width: 768px) { + .login-container { + width: 250px; + padding: 10px; + } + .input-group { + width: 200px; + } + .login-logo { + display:none; + } + .login-button { + height: auto; + } + .login-form { + padding-bottom: 12px; + } +} + +/* DESKTOP DEVICES*/ +@media (min-width: 768px) { + .login-logo-mobile { + display: none; + } +}