mirror
/
dex
mirror of https://github.com/dexidp/dex.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feat: update CSS for improved theming and button styles (#4634)

pull/4635/head
Maksim Nabokikh 5 days ago committed by GitHub
parent
f80a89dd5d
commit
80d297b8a4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 137 additions and 115 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      examples/config-dev.yaml
  2. 5
      web/static/img/mock-icon.svg
  3. 61
      web/static/main.css
  4. 105
      web/themes/dark/styles.css
  5. 80
      web/themes/light/styles.css

1
examples/config-dev.yaml
Unescape View File

@ -68,6 +68,7 @@ web:
# issuer: dex # issuer: dex
# logoURL: theme/logo.png # logoURL: theme/logo.png
# dir: web/ # dir: web/
# Allowed values: light, dark
# theme: light # theme: light
# Configuration for telemetry # Configuration for telemetry

5
web/static/img/mock-icon.svg
Unescape View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 3V8.5L5.1 15.1C4.1 16.8 5.3 19 7.2 19H16.8C18.7 19 19.9 16.8 18.9 15.1L15 8.5V3" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9 3H15" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>
<path d="M7 15H17" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 437 B

61
web/static/main.css
Unescape View File

@ -8,28 +8,29 @@ body {
.dex-container { .dex-container {
color: #333; color: #333;
margin: 45px auto; margin: 60px auto;
max-width: 500px; max-width: 480px;
min-width: 320px; min-width: 320px;
padding: 0 16px;
text-align: center; text-align: center;
} }
.dex-btn { .dex-btn {
border-radius: 4px; border-radius: 8px;
border: 0; border: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.25);
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 15px;
padding: 0; padding: 0;
transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
} }
.dex-btn:focus { .dex-btn:focus-visible {
outline: none; outline: 2px solid #4A90D9;
outline-offset: 2px;
} }
.dex-btn:active { .dex-btn:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); transform: scale(0.98);
outline: none;
} }
.dex-btn:disabled { .dex-btn:disabled {
@ -40,17 +41,17 @@ body {
.dex-btn-icon { .dex-btn-icon {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 24px; background-size: 20px;
border-radius: 4px 0 0 4px; border-radius: 8px 0 0 8px;
float: left; float: left;
height: 36px; height: 40px;
margin-right: 5px; margin-right: 4px;
width: 36px; width: 40px;
} }
.dex-btn-icon--google { .dex-btn-icon--google {
background-color: #FFFFFF; background-color: #FFFFFF;
background-image: url(../static/img/google-icon.svg);; background-image: url(../static/img/google-icon.svg);
} }
.dex-btn-icon--local { .dex-btn-icon--local {
@ -115,39 +116,43 @@ body {
background-image: url(../static/img/microsoft-icon.svg); background-image: url(../static/img/microsoft-icon.svg);
} }
.dex-btn-icon--mockCallback,
.dex-btn-icon--mockPassword {
background-color: #6c5ce7;
background-image: url(../static/img/mock-icon.svg);
}
.dex-btn-text { .dex-btn-text {
font-weight: 600; font-weight: 600;
line-height: 36px; line-height: 40px;
padding: 6px 12px; padding: 6px 14px;
text-align: center; text-align: center;
} }
.dex-subtle-text { .dex-subtle-text {
color: #999; color: #888;
font-size: 12px; font-size: 13px;
} }
.dex-separator { .dex-separator {
color: #999; color: #aaa;
} }
.dex-list { .dex-list {
color: #999; color: #888;
display: inline-block; display: inline-block;
font-size: 12px; font-size: 13px;
list-style: circle; list-style: circle;
text-align: left; text-align: left;
} }
.dex-error-box { .dex-error-box {
background-color: #DD1327; background-color: #e5383b;
border-radius: 6px;
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
max-width: 320px;
padding: 4px 0;
}
.dex-error-box {
margin: 20px auto; margin: 20px auto;
max-width: 320px;
padding: 8px 12px;
} }

105
web/themes/dark/styles.css
Unescape View File

@ -1,122 +1,127 @@
.theme-body { .theme-body {
background-color: #0f1218; background-color: #131519;
color: #c8d1d9; color: #b8bcc4;
font-family: 'Source Sans Pro', Helvetica, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
} }
.theme-navbar { .theme-navbar {
background-color: #161b22; background-color: #1a1d23;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); border-bottom: 1px solid #2a2d35;
color: #161B2B; color: #b8bcc4;
font-size: 13px; font-size: 13px;
font-weight: 100; font-weight: 400;
height: 46px; height: 52px;
overflow: hidden; overflow: hidden;
padding: 0 10px; padding: 0 16px;
} }
.theme-navbar__logo-wrap { .theme-navbar__logo-wrap {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
padding: 10px 15px; padding: 12px 15px;
width: 300px; width: 300px;
} }
.theme-navbar__logo { .theme-navbar__logo {
height: 100%; height: 100%;
max-height: 25px; max-height: 26px;
} }
.theme-heading { .theme-heading {
color: #dcdfe5;
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 600;
margin-bottom: 16px;
margin-top: 0; margin-top: 0;
color: #c8d1d9;
} }
.theme-panel { .theme-panel {
background-color: #161b22; background-color: #1a1d23;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); border: 1px solid #2a2d35;
padding: 30px; border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
padding: 32px;
} }
.theme-btn-provider { .theme-btn-provider {
background-color: #1e242d; background-color: #22252c;
color: #c8d1d9; border: 1px solid #33363e;
border: 1px solid #30373c; color: #b8bcc4;
min-width: 250px; min-width: 260px;
} }
.theme-btn-provider:hover { .theme-btn-provider:hover {
background-color: #212731; background-color: #2a2d35;
color: #ffffff; border-color: #3e414a;
color: #dcdfe5;
} }
.theme-btn--primary { .theme-btn--primary {
background-color: #1e242d; background-color: #3d3f47;
border: none; border: none;
color: #c8d1d9; color: #e8eaed;
min-width: 200px; min-width: 200px;
padding: 6px 12px; padding: 8px 16px;
} }
.theme-btn--primary:hover { .theme-btn--primary:hover {
background-color: #212731; background-color: #4a4c55;
color: #e9e9e9; color: #fff;
} }
.theme-btn--success { .theme-btn--success {
background-color: #1891bb; background-color: #2d7d9a;
color: #e9e9e9; color: #e8eaed;
width: 250px; width: 260px;
} }
.theme-btn--success:hover { .theme-btn--success:hover {
background-color: #1da5d4; background-color: #358fae;
} }
.theme-form-row { .theme-form-row {
display: block; display: block;
margin: 20px auto; margin: 16px auto;
} }
.theme-form-input { .theme-form-input {
background-color: #131519;
border: 1px solid #33363e;
border-radius: 8px;
color: #b8bcc4;
display: block; display: block;
height: 36px;
padding: 6px 12px;
font-size: 14px; font-size: 14px;
line-height: 1.42857143; height: 40px;
border: 1px solid #515559; line-height: 1.5;
border-radius: 4px;
color: #c8d1d9;
background-color: #0f1218;
box-shadow: inset 0 1px 1px rgb(27, 40, 46);
width: 250px;
margin: auto; margin: auto;
padding: 8px 12px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
width: 260px;
} }
.theme-form-input:focus, .theme-form-input:focus,
.theme-form-input:active { .theme-form-input:active {
border-color: #5a9bb5;
box-shadow: 0 0 0 3px rgba(90, 155, 181, 0.15);
color: #dcdfe5;
outline: none; outline: none;
border-color: #f8f9f9;
color: #c8d1d9;
} }
.theme-form-label { .theme-form-label {
width: 250px; color: #b8bcc4;
font-size: 14px;
font-weight: 500;
margin: 4px auto; margin: 4px auto;
text-align: left;
position: relative; position: relative;
font-size: 13px; text-align: left;
font-weight: 600; width: 260px;
color: #c8d1d9;
} }
.theme-link-back { .theme-link-back {
margin-top: 4px; margin-top: 8px;
} }
.dex-container { .dex-container {
color: #c8d1d9; color: #b8bcc4;
} }

80
web/themes/light/styles.css
Unescape View File

@ -1,113 +1,119 @@
.theme-body { .theme-body {
background-color: #efefef; background-color: #f4f5f7;
color: #333; color: #1a1a1a;
font-family: 'Source Sans Pro', Helvetica, sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
} }
.theme-navbar { .theme-navbar {
background-color: #fff; background-color: #fff;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); border-bottom: 1px solid #e1e4e8;
color: #333; color: #1a1a1a;
font-size: 13px; font-size: 13px;
font-weight: 100; font-weight: 400;
height: 46px; height: 52px;
overflow: hidden; overflow: hidden;
padding: 0 10px; padding: 0 16px;
} }
.theme-navbar__logo-wrap { .theme-navbar__logo-wrap {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
padding: 10px 15px; padding: 12px 15px;
width: 300px; width: 300px;
} }
.theme-navbar__logo { .theme-navbar__logo {
height: 100%; height: 100%;
max-height: 25px; max-height: 26px;
} }
.theme-heading { .theme-heading {
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 600;
margin-bottom: 10px; margin-bottom: 16px;
margin-top: 0; margin-top: 0;
} }
.theme-panel { .theme-panel {
background-color: #fff; background-color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); border: 1px solid #e1e4e8;
padding: 30px; border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
padding: 32px;
} }
.theme-btn-provider { .theme-btn-provider {
background-color: #fff; background-color: #fff;
color: #333; border: 1px solid #d0d5dd;
min-width: 250px; color: #1a1a1a;
min-width: 260px;
} }
.theme-btn-provider:hover { .theme-btn-provider:hover {
color: #999; background-color: #f9fafb;
border-color: #b0b5bd;
color: #1a1a1a;
} }
.theme-btn--primary { .theme-btn--primary {
background-color: #333; background-color: #1a1a1a;
border: none; border: none;
color: #fff; color: #fff;
min-width: 200px; min-width: 200px;
padding: 6px 12px; padding: 8px 16px;
} }
.theme-btn--primary:hover { .theme-btn--primary:hover {
background-color: #666; background-color: #333;
color: #fff; color: #fff;
} }
.theme-btn--success { .theme-btn--success {
background-color: #2FC98E; background-color: #16a34a;
color: #fff; color: #fff;
width: 250px; width: 260px;
} }
.theme-btn--success:hover { .theme-btn--success:hover {
background-color: #49E3A8; background-color: #15803d;
} }
.theme-form-row { .theme-form-row {
display: block; display: block;
margin: 20px auto; margin: 16px auto;
} }
.theme-form-input { .theme-form-input {
border-radius: 4px; border-radius: 8px;
border: 1px solid #CCC; border: 1px solid #d0d5dd;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); color: #1a1a1a;
color: #666;
display: block; display: block;
font-size: 14px; font-size: 14px;
height: 36px; height: 40px;
line-height: 1.42857143; line-height: 1.5;
margin: auto; margin: auto;
padding: 6px 12px; padding: 8px 12px;
width: 250px; transition: border-color 0.15s ease, box-shadow 0.15s ease;
width: 260px;
} }
.theme-form-input:focus, .theme-form-input:focus,
.theme-form-input:active { .theme-form-input:active {
border-color: #66AFE9; border-color: #4A90D9;
box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
outline: none; outline: none;
} }
.theme-form-label { .theme-form-label {
font-size: 13px; font-size: 14px;
font-weight: 600; font-weight: 500;
margin: 4px auto; margin: 4px auto;
position: relative; position: relative;
text-align: left; text-align: left;
width: 250px; width: 260px;
} }
.theme-link-back { .theme-link-back {
margin-top: 4px; margin-top: 8px;
} }

Write Preview
Loading…
Cancel
Save