Skip to content

fix: Revamp CSS for Login Screen #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sergioceron wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix: Revamp CSS for Login Screen #55

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 42 additions & 28 deletions styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,18 @@
html {
font-size: 9px;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size:1.2em;
margin:0 auto;
padding:.5em 1.5em 1.5em 1.5em;
min-width:730px;
background:#FFF;
behavior:url("csshover2.htc");
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
margin: 0;
padding: 0;
min-width: 320px;
background: linear-gradient(to bottom, #f0f4f8, #d9e8ef);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
Comment on lines +43 to +46
Copy link

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

body is now a flex container with justify-content/align-items:center and height:100vh. Since includes/header.php renders multiple top-level siblings in <body> (header, menu, nav, content, etc.), this will lay them out as flex items (default flex-direction: row) and will visibly break the layout across the entire site, not just the login screen. Please scope these styles to the login page (e.g., a body.login class or a wrapper on login.php) or keep the global body layout non-flex.

Suggested change
display: flex;
justify-content: center;
align-items: center;
height: 100vh;

Copilot uses AI. Check for mistakes.
}

h1{
font-size:16px;
Expand Down Expand Up @@ -200,9 +202,16 @@

/* header */

div#header {
min-height:65px;
}
div#header {
min-height: 65px;
background-color: #317082;
color: #fff;
font-size: 1.5em;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
Comment on lines +205 to +214
Copy link

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

div#header is now display:flex with justify-content: space-between, but existing header styling/markup still relies on floats (#logo { float:left; }, div#header ul { float:right; }). Mixing flex layout with float-based layout is unreliable and makes it harder to reason about the header across browsers; flex items also ignore float. Consider updating the child rules to use flex positioning consistently (remove floats / set appropriate flex properties) or avoid switching #header to flex if the rest of the header remains float-based.

Copilot uses AI. Check for mistakes.

div#logo{
float: left;
Expand All @@ -223,9 +232,12 @@
}

div#header p, div#header form{
margin:0 0 0 146px;
padding-bottom:2px;
}
div#header p, div#header form {
margin: 0;
padding: 0;
display: flex;
align-items: center;
}

div#header form label{
display:none;
Expand Down Expand Up @@ -365,13 +377,14 @@

/* content - general */

div#content{
background-color: #fff;
width:982px;
padding:20px 20px;
border-left: 1px solid #485C5A;
border-right: 1px solid #485C5A;
}
div#content {
background-color: #fff;
width: 100%;
max-width: 500px;
padding: 40px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
Comment on lines +383 to +386
Copy link

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

div#content is used by many pages (admin screens, register, evaluate, etc.) and historically sized for the app layout (e.g., other global elements are fixed ~1000px wide). Changing it to max-width: 500px with card-like styling will shrink/wrap all content site-wide and likely break tables/forms. If the intent is only to restyle the login screen, scope these #content changes to the login page (or a more specific selector) rather than the global div#content rule.

Suggested change
max-width: 500px;
padding: 40px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

Copilot uses AI. Check for mistakes.
}

div#content p{
padding-bottom:1.5em;
Expand Down Expand Up @@ -711,11 +724,12 @@

/* content - settings type */

form#settings td{
padding:10px 20px 0px 0;
margin:0;
vertical-align: top;
}
form#settings td {
padding: 10px 0;
margin: 0;
vertical-align: top;
width: 100%;
}
Comment on lines +727 to +732
Copy link

Copilot AI Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The form#settings td padding/width changes apply to many unrelated forms because id="settings" is reused throughout the app (registration, admin edit forms, etc.). This means the PR will unintentionally change layouts beyond the login screen. Consider scoping this rule to the specific page/container being revamped (e.g., #content form#settings td for only the card, or a page-specific class) or introducing a dedicated form id/class for the login screen.

Copilot uses AI. Check for mistakes.

form#settings th{
text-align:right;
Expand Down