Skip to content

Commit

Permalink
working on bas styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@on
on committed Oct 3, 2025
1 parent 300cf13 commit d9e8803
Showing 1 changed file with 294 additions and 0 deletions.
294 changes: 294 additions & 0 deletions modern-bas-login.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,294 @@
/* Modern Login CSS - Inspired by Bootstrap and modern-bas.css */

:root {
--bs-blue: #0d6efd;
--bs-gray-100: #f8f9fa;
--bs-gray-200: #e9ecef;
--bs-gray-400: #ced4da;
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
--bs-gray-900: #212529;
--bs-white: #fff;
--bs-border-color: #dee2e6;
--bs-border-radius: 0.375rem;

/* Light Theme */
--background-color: var(--bs-gray-100);
--text-color: var(--bs-gray-900);
--primary-color: var(--bs-blue);
--border-color: var(--bs-border-color);
--card-background: var(--bs-white);
--card-header-background: var(--bs-gray-100);
--link-color: var(--bs-blue);
--link-hover-color: #0a58ca;
}

@media (prefers-color-scheme: dark) {
:root {
--bs-dark-bg: #1a1a1a;
--bs-dark-card-bg: #212121;
--bs-dark-border: #444;
--bs-dark-text: #dee2e6;
--bs-dark-header-bg: #2c2c2c;

--background-color: var(--bs-dark-bg);
--text-color: var(--bs-dark-text);
--border-color: var(--bs-dark-border);
--card-background: var(--bs-dark-card-bg);
--card-header-background: var(--bs-dark-header-bg);
--link-color: #4dabf7;
--link-hover-color: #82c9ff;
}
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
background-color: var(--background-color);
color: var(--text-color);
margin: 0;
padding: 0;
font-size: 1rem;
line-height: 1.5;
min-height: 100vh;
display: flex;
flex-direction: column;
}


#orginfo {
display: none;
}

#ntnuheader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
margin-bottom: 0;
background-color: transparent;
border: none;
}

#help_link {
display: flex;
gap: 1rem;
font-size: 0.875rem;
text-transform: none;
font-weight: normal;
position: static;
}

#help_link a {
color: var(--link-color);
text-decoration: none;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
transition: all 0.15s ease-in-out;
}

#help_link a:hover {
background-color: var(--card-header-background);
color: var(--link-hover-color);
}

#pagewrap {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0;
flex: 1;
display: flex;
flex-direction: column;
}

#container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
background-color: transparent;
border: none;
margin: 0;
}

#ntnulogo {
height: 40px;
width: auto;
margin: 0;
}

#login {
background-color: var(--card-background);
border: 1px solid var(--border-color);
border-radius: var(--bs-border-radius);
padding: 2rem;
width: 100%;
max-width: 400px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#login h1 {
font-size: 2rem;
font-weight: 600;
margin: 0 0 2rem 0;
text-align: center;
color: var(--text-color);
}

#login div {
margin-bottom: 1.5rem;
width: 100%;
clear: none;
}

#login div:last-child {
margin-bottom: 0;
margin-top: 2rem;
}

#login label {
display: block;
font-weight: 500;
margin-bottom: 0.5rem;
color: var(--text-color);
float: none;
width: auto;
}

#login label.hidden {
display: none;
}

#login input[type="text"],
#login input[type="password"] {
width: 100%;
padding: 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--text-color);
background-color: var(--card-background);
border: 1px solid var(--border-color);
border-radius: var(--bs-border-radius);
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
box-sizing: border-box;
margin-bottom: 0;
}

#login input[type="text"]:focus,
#login input[type="password"]:focus {
border-color: var(--primary-color);
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

#login input[type="submit"] {
width: 100%;
padding: 0.75rem 1.5rem;
border: 1px solid var(--primary-color);
border-radius: var(--bs-border-radius);
background-color: var(--primary-color);
color: var(--bs-white);
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease-in-out;
text-align: center;
margin: 0;
}

#login input[type="submit"]:hover {
background-color: var(--link-hover-color);
border-color: var(--link-hover-color);
}

.message,
.messages {
background-color: #fff3cd;
color: #856404;
border: 1px solid #ffeaa7;
padding: 0.75rem 1rem;
border-radius: var(--bs-border-radius);
margin-bottom: 1rem;
text-align: center;
}

@media (prefers-color-scheme: dark) {
.message,
.messages {
background-color: #332701;
color: #ffecb5;
border-color: #664d03;
}
}

#messages div.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}

@media (prefers-color-scheme: dark) {
#messages div.error {
background-color: #2c0b0e;
color: #ea868f;
border-color: #842029;
}
}

#messages div {
position: relative;
padding: 0.75rem 1rem;
margin-top: 1rem;
border: 1px solid var(--border-color);
border-radius: var(--bs-border-radius);
background-color: var(--card-background);
}

#messages div:first-child {
margin-top: 0;
}

#messages div div {
margin-top: 0.5rem;
border: none;
padding: 0;
background-color: transparent;
}

#messages .traceback {
color: var(--text-color);
font-family: 'Courier New', Courier, monospace;
}

#messages .traceback pre {
font-size: 0.875rem;
line-height: 1.4;
margin: 0;
padding: 0.5rem;
background-color: var(--card-header-background);
border-radius: 0.25rem;
overflow-x: auto;
}

/* Responsive design */
@media (max-width: 768px) {
#pagewrap {
padding: 1rem;
}

#login {
padding: 1.5rem;
max-width: none;
width: 100%;
}

#login h1 {
font-size: 1.75rem;
}

#ntnuheader {
padding: 1rem;
}
}

0 comments on commit d9e8803

Please sign in to comment.