Commit 569881a8 authored by Jan Koester's avatar Jan Koester
Browse files

new design

parent b9588ede

data/admin.html

+184 −77

File changed.

Preview size limit exceeded, changes collapsed.

data/login.html

+1 −1
Changes for data/login.html: 1 added line, 1 removed line.
Original line number Diff line number Diff line
@@ -6,7 +6,7 @@ 
    </head>

    <body>

        <div id="login" >

            <p><span style="font-size:4em;">AuthDB</span></p>

            <p><span>AuthDB</span></p>

            <form method="post" id="loginform">

                <table>

                <tr>

data/style.css

+258 −89
Changes for data/style.css: 258 added lines, 89 removed lines.
Original line number Diff line number Diff line 
:root {

    --bg: #f4f6f9;

    --surface: #ffffff;

    --surface-2: #f0f2f6;

    --border: #dfe3ea;

    --text: #1d2330;

    --text-muted: #667085;

    --accent: #3b6fe0;

    --accent-hover: #2f5cc2;

    --accent-soft: rgba(59, 111, 224, 0.12);

    --danger: #d64545;

    --danger-soft: rgba(214, 69, 69, 0.12);

    --ok: #1f9d55;

    --radius: 10px;

    --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 16px rgba(16, 24, 40, 0.06);

    color-scheme: light;

}



@media (prefers-color-scheme: dark) {

    :root {

        --bg: #16191e;

        --surface: #1f242b;

        --surface-2: #272d35;

        --border: #343b45;

        --text: #e6e9ee;

        --text-muted: #9aa3b2;

        --accent: #5b8cff;

        --accent-hover: #7aa2ff;

        --accent-soft: rgba(91, 140, 255, 0.16);

        --danger: #f06363;

        --danger-soft: rgba(240, 99, 99, 0.16);

        --ok: #3ccf7f;

        --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);

        color-scheme: dark;

    }

}



* { box-sizing: border-box; }



body {

    background:#222528;

    color:#ffffff;

    background: var(--bg);

    color: var(--text);

    margin: 0;

    padding: 0;

    min-width:1024px;

}



#login {

    min-width:640px;

    min-height:480px;

    padding:2%;

    font-size:1.5em;

    border:solid 1px #ffffff;

    border-radius:10px;

    box-shadow: 1px 1px 5px 5px #ffffff;

    position:absolute;

    top:50%;

    bottom:50%;

    left:50%;

    right:50%;

    margin-left:-20vw;

    margin-right:-20vw;

    margin-top:-20vh;

    margin-bottom:-20vh;

    background:#404347;

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    font-size: 15px;

    line-height: 1.5;

}



#content {

    background: #2F363B;

    margin: 2vw 2vh;

    padding: 2vw 2vh;

}

h1, h2, h3, h4 { margin: 0 0 0.75em; font-weight: 600; }

h3 { font-size: 1.25em; }

h4 { font-size: 1.05em; margin-top: 1.5em; }



a { color: var(--accent); }



/* ---- Layout ---- */

#header {

    width:100vw;

    height:4em;

    background: #2F363B;

    padding:0;

    min-width:1024px;

    display: flex;

    align-items: center;

    gap: 1em;

    height: 56px;

    padding: 0 1.25em;

    background: var(--surface);

    border-bottom: 1px solid var(--border);

    position: sticky;

    top: 0;

    z-index: 10;

}



#header .head {

    padding:2vh;

    margin:0;

    font-size:2em;

    padding:1em;

    font-size: 1.25em;

    font-weight: 700;

    letter-spacing: 0.02em;

}



#header .head::before {

    content: "";

    display: inline-block;

    width: 0.8em;

    height: 0.8em;

    margin-right: 0.5em;

    border-radius: 3px;

    background: var(--accent);

    vertical-align: -0.05em;

}



#maintable {

    display: table;

    min-width:700px;

    min-height:100vh;

    width:100%;

    display: flex;

    min-height: calc(100vh - 56px);

}



#navbar {

    display: table-cell;

    min-width:150px;

    width:5vw;

    background:#2F363B;

    font-size:1em;

    flex: 0 0 210px;

    background: var(--surface);

    border-right: 1px solid var(--border);

    padding: 1em 0.75em;

}



#navbar ul { margin: 0; padding: 0; }



#navbar li {

    list-style: none;

    margin: 2px 0;

}





#navbar a {

    color:#ffffff;

    display: block;

    padding: 0.5em 0.85em;

    border-radius: 8px;

    color: var(--text-muted);

    text-decoration: none;

    font-weight: 500;

}



#navbar a:visited {

    color:#ffffff;

#navbar a:hover {

    background: var(--surface-2);

    color: var(--text);

}



#maincell{

    display: table-cell;

    border:solid 10px #222528;

    width:100%;

    background:#2F363B;

#navbar li.active a {

    background: var(--accent-soft);

    color: var(--accent);

}



a.button {

    padding: 1px 6px;

    border: 1px outset buttonborder;

    border-radius: 3px;

    color: buttontext;

    background-color: buttonface;

#navbar li.nav-logout {

    margin-top: 1em;

    padding-top: 1em;

    border-top: 1px solid var(--border);

}



#content {

    flex: 1;

    min-width: 0;

    margin: 1.5em;

    padding: 1.5em;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    align-self: flex-start;

}



#maincell { flex: 1; }



/* ---- Controls ---- */

a.button,

input[type="button"],

input[type="submit"],

button {

    display: inline-block;

    padding: 0.4em 0.9em;

    border: 1px solid var(--border);

    border-radius: 7px;

    background: var(--surface);

    color: var(--text);

    font: inherit;

    font-size: 0.92em;

    font-weight: 500;

    text-decoration: none;

    cursor: pointer;

    transition: background 0.15s, border-color 0.15s, color 0.15s;

}



#notingroup{

    height:30vh;

    min-width: 20vw;

    width:100%;

    text-align: center;

a.button:hover,

input[type="button"]:hover,

button:hover {

    background: var(--surface-2);

}



a.button.primary,

input[type="button"],

input[type="submit"] {

    background: var(--accent);

    border-color: var(--accent);

    color: #ffffff;

}



a.button.primary:hover,

input[type="button"]:hover,

input[type="submit"]:hover {

    background: var(--accent-hover);

    border-color: var(--accent-hover);

}



a.button.danger {

    color: var(--danger);

}



a.button.danger:hover {

    background: var(--danger-soft);

    border-color: var(--danger);

}



input[type="text"],

input[type="password"],

input[type="search"],

input[type="file"],

select {

    padding: 0.45em 0.7em;

    border: 1px solid var(--border);

    border-radius: 7px;

    background: var(--surface);

    color: var(--text);

    font: inherit;

}



input:focus,

select:focus {

    outline: none;

    border-color: var(--accent);

    box-shadow: 0 0 0 3px var(--accent-soft);

}



input[readonly] {

    background: var(--surface-2);

    color: var(--text-muted);

}



select[multiple] { padding: 0.3em; }

select[multiple] option { padding: 0.3em 0.5em; border-radius: 4px; }



/* ---- Login / Wizard ---- */

#login,

#wizzard {

    width: min(420px, calc(100vw - 32px));

    margin: 12vh auto 0;

    padding: 2em;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 14px;

    box-shadow: var(--shadow);

}



#login p,

#wizzard p { margin: 0 0 1.25em; }



#login p span,

#wizzard p span {

    font-size: 1.75em !important;

    font-weight: 700;

}



#login table,

#wizzard table { width: 100%; border-collapse: collapse; }



#login td,

#wizzard td { padding: 0.35em 0; }



#login td:first-child,

#wizzard td:first-child {

    width: 35%;

    color: var(--text-muted);

}



#login input[type="text"],

#login input[type="password"],

#login select,

#wizzard input[type="text"],

#wizzard input[type="password"] { width: 100%; }



#login input[type="submit"],

#wizzard input[type="submit"] { width: 100%; padding: 0.6em; margin-top: 0.5em; }



#login > span {

    display: block;

    margin-top: 1em;

    padding: 0.6em 0.8em;

    border-radius: 7px;

    background: var(--danger-soft);

    color: var(--danger);

}



/* ---- Legacy helpers ---- */

#notingroup,

#gpoingroup {

    height: 30vh;

    min-width: 20vw;

    width: 100%;

    text-align: center;

}



ul.selectionlist {

    background: #ffffff;;

    color: buttontext;

    border: 1px outset buttonborder;

    text-decoration: none;

    background: var(--surface);

    border: 1px solid var(--border);

    padding: 0 2em;

    height: 100%;

    width: 100%;

}



.switchgpogroup{

    text-align:center;

}

.switchgpogroup { text-align: center; }

.gpoform { width: 100%; }



.gpoform{

    width:100%;

}

.usertoolbar { margin: 0; padding: 0; }



.usertoolbar li {

    list-style: none;

    display: inline-block;

    margin:1em;

    margin: 0.25em 0.5em 0.25em 0;

}



table.userlist {

    margin:1em;

}

input.domaintext { min-width: min(30vw, 100%); }



input.domaintext {

    min-width:30vw;

}

li.sessionel { list-style: none; }



li.sessionel{

    list-style:none;

@media (max-width: 760px) {

    #maintable { flex-direction: column; }

    #navbar {

        flex: none;

        border-right: none;

        border-bottom: 1px solid var(--border);

        padding: 0.5em 16px;

    }



.sessionel span{

    padding:2vw 2vh;

    #navbar ul { display: flex; flex-wrap: wrap; gap: 4px; }

    #navbar li { margin: 0; }

    #navbar li.nav-logout { margin: 0; padding: 0; border: none; }

    #content { margin: 16px; padding: 1em; }

}

data/wizzard.html

+1 −1
Changes for data/wizzard.html: 1 added line, 1 removed line.
Original line number Diff line number Diff line
@@ -6,7 +6,7 @@ 
    </head>

    <body>

        <div id="wizzard" >

            <p><span style="font-size:4em;">AuthDB Initial Wizzard</span></p>

            <p><span>AuthDB Setup</span></p>

            <form method="post" id="createform">

                <table>

                <tr>