mirror of
https://github.com/netbirdio/dex.git
synced 2026-05-22 18:43:53 -07:00
feat: update CSS for improved theming and button styles (#4634)
This commit is contained in:
Maksim Nabokikh
@@ -68,6 +68,7 @@ web:
|
||||
# issuer: dex
|
||||
# logoURL: theme/logo.png
|
||||
# dir: web/
|
||||
# Allowed values: light, dark
|
||||
# theme: light
|
||||
|
||||
# Configuration for telemetry
|
||||
|
||||
@@ -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>
|
||||
|
After Width: | Height: | Size: 437 B |
+33
-28
@@ -8,28 +8,29 @@ body {
|
||||
|
||||
.dex-container {
|
||||
color: #333;
|
||||
margin: 45px auto;
|
||||
max-width: 500px;
|
||||
margin: 60px auto;
|
||||
max-width: 480px;
|
||||
min-width: 320px;
|
||||
padding: 0 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dex-btn {
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
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;
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
padding: 0;
|
||||
transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
|
||||
}
|
||||
|
||||
.dex-btn:focus {
|
||||
outline: none;
|
||||
.dex-btn:focus-visible {
|
||||
outline: 2px solid #4A90D9;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.dex-btn:active {
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
outline: none;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.dex-btn:disabled {
|
||||
@@ -40,17 +41,17 @@ body {
|
||||
.dex-btn-icon {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 24px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
background-size: 20px;
|
||||
border-radius: 8px 0 0 8px;
|
||||
float: left;
|
||||
height: 36px;
|
||||
margin-right: 5px;
|
||||
width: 36px;
|
||||
height: 40px;
|
||||
margin-right: 4px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.dex-btn-icon--google {
|
||||
background-color: #FFFFFF;
|
||||
background-image: url(../static/img/google-icon.svg);;
|
||||
background-image: url(../static/img/google-icon.svg);
|
||||
}
|
||||
|
||||
.dex-btn-icon--local {
|
||||
@@ -115,39 +116,43 @@ body {
|
||||
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 {
|
||||
font-weight: 600;
|
||||
line-height: 36px;
|
||||
padding: 6px 12px;
|
||||
line-height: 40px;
|
||||
padding: 6px 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dex-subtle-text {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.dex-separator {
|
||||
color: #999;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.dex-list {
|
||||
color: #999;
|
||||
color: #888;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
list-style: circle;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dex-error-box {
|
||||
background-color: #DD1327;
|
||||
background-color: #e5383b;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
max-width: 320px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.dex-error-box {
|
||||
margin: 20px auto;
|
||||
max-width: 320px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
+55
-50
@@ -1,122 +1,127 @@
|
||||
.theme-body {
|
||||
background-color: #0f1218;
|
||||
color: #c8d1d9;
|
||||
font-family: 'Source Sans Pro', Helvetica, sans-serif;
|
||||
background-color: #131519;
|
||||
color: #b8bcc4;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.theme-navbar {
|
||||
background-color: #161b22;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
color: #161B2B;
|
||||
background-color: #1a1d23;
|
||||
border-bottom: 1px solid #2a2d35;
|
||||
color: #b8bcc4;
|
||||
font-size: 13px;
|
||||
font-weight: 100;
|
||||
height: 46px;
|
||||
font-weight: 400;
|
||||
height: 52px;
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.theme-navbar__logo-wrap {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 10px 15px;
|
||||
padding: 12px 15px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.theme-navbar__logo {
|
||||
height: 100%;
|
||||
max-height: 25px;
|
||||
max-height: 26px;
|
||||
}
|
||||
|
||||
.theme-heading {
|
||||
color: #dcdfe5;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 0;
|
||||
color: #c8d1d9;
|
||||
}
|
||||
|
||||
.theme-panel {
|
||||
background-color: #161b22;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
|
||||
padding: 30px;
|
||||
background-color: #1a1d23;
|
||||
border: 1px solid #2a2d35;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.theme-btn-provider {
|
||||
background-color: #1e242d;
|
||||
color: #c8d1d9;
|
||||
border: 1px solid #30373c;
|
||||
min-width: 250px;
|
||||
background-color: #22252c;
|
||||
border: 1px solid #33363e;
|
||||
color: #b8bcc4;
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
.theme-btn-provider:hover {
|
||||
background-color: #212731;
|
||||
color: #ffffff;
|
||||
background-color: #2a2d35;
|
||||
border-color: #3e414a;
|
||||
color: #dcdfe5;
|
||||
}
|
||||
|
||||
.theme-btn--primary {
|
||||
background-color: #1e242d;
|
||||
background-color: #3d3f47;
|
||||
border: none;
|
||||
color: #c8d1d9;
|
||||
color: #e8eaed;
|
||||
min-width: 200px;
|
||||
padding: 6px 12px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.theme-btn--primary:hover {
|
||||
background-color: #212731;
|
||||
color: #e9e9e9;
|
||||
background-color: #4a4c55;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.theme-btn--success {
|
||||
background-color: #1891bb;
|
||||
color: #e9e9e9;
|
||||
width: 250px;
|
||||
background-color: #2d7d9a;
|
||||
color: #e8eaed;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.theme-btn--success:hover {
|
||||
background-color: #1da5d4;
|
||||
background-color: #358fae;
|
||||
}
|
||||
|
||||
.theme-form-row {
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
margin: 16px auto;
|
||||
}
|
||||
|
||||
.theme-form-input {
|
||||
background-color: #131519;
|
||||
border: 1px solid #33363e;
|
||||
border-radius: 8px;
|
||||
color: #b8bcc4;
|
||||
display: block;
|
||||
height: 36px;
|
||||
padding: 6px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
border: 1px solid #515559;
|
||||
border-radius: 4px;
|
||||
color: #c8d1d9;
|
||||
background-color: #0f1218;
|
||||
box-shadow: inset 0 1px 1px rgb(27, 40, 46);
|
||||
width: 250px;
|
||||
height: 40px;
|
||||
line-height: 1.5;
|
||||
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:active {
|
||||
border-color: #5a9bb5;
|
||||
box-shadow: 0 0 0 3px rgba(90, 155, 181, 0.15);
|
||||
color: #dcdfe5;
|
||||
outline: none;
|
||||
border-color: #f8f9f9;
|
||||
color: #c8d1d9;
|
||||
}
|
||||
|
||||
.theme-form-label {
|
||||
width: 250px;
|
||||
color: #b8bcc4;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin: 4px auto;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #c8d1d9;
|
||||
text-align: left;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.theme-link-back {
|
||||
margin-top: 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.dex-container {
|
||||
color: #c8d1d9;
|
||||
color: #b8bcc4;
|
||||
}
|
||||
|
||||
+43
-37
@@ -1,113 +1,119 @@
|
||||
.theme-body {
|
||||
background-color: #efefef;
|
||||
color: #333;
|
||||
font-family: 'Source Sans Pro', Helvetica, sans-serif;
|
||||
background-color: #f4f5f7;
|
||||
color: #1a1a1a;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.theme-navbar {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
|
||||
color: #333;
|
||||
border-bottom: 1px solid #e1e4e8;
|
||||
color: #1a1a1a;
|
||||
font-size: 13px;
|
||||
font-weight: 100;
|
||||
height: 46px;
|
||||
font-weight: 400;
|
||||
height: 52px;
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.theme-navbar__logo-wrap {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 10px 15px;
|
||||
padding: 12px 15px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.theme-navbar__logo {
|
||||
height: 100%;
|
||||
max-height: 25px;
|
||||
max-height: 26px;
|
||||
}
|
||||
|
||||
.theme-heading {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.theme-panel {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
|
||||
padding: 30px;
|
||||
border: 1px solid #e1e4e8;
|
||||
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 {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
min-width: 250px;
|
||||
border: 1px solid #d0d5dd;
|
||||
color: #1a1a1a;
|
||||
min-width: 260px;
|
||||
}
|
||||
|
||||
.theme-btn-provider:hover {
|
||||
color: #999;
|
||||
background-color: #f9fafb;
|
||||
border-color: #b0b5bd;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.theme-btn--primary {
|
||||
background-color: #333;
|
||||
background-color: #1a1a1a;
|
||||
border: none;
|
||||
color: #fff;
|
||||
min-width: 200px;
|
||||
padding: 6px 12px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.theme-btn--primary:hover {
|
||||
background-color: #666;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.theme-btn--success {
|
||||
background-color: #2FC98E;
|
||||
background-color: #16a34a;
|
||||
color: #fff;
|
||||
width: 250px;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.theme-btn--success:hover {
|
||||
background-color: #49E3A8;
|
||||
background-color: #15803d;
|
||||
}
|
||||
|
||||
.theme-form-row {
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
margin: 16px auto;
|
||||
}
|
||||
|
||||
.theme-form-input {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #CCC;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
color: #666;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #d0d5dd;
|
||||
color: #1a1a1a;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
height: 36px;
|
||||
line-height: 1.42857143;
|
||||
height: 40px;
|
||||
line-height: 1.5;
|
||||
margin: auto;
|
||||
padding: 6px 12px;
|
||||
width: 250px;
|
||||
padding: 8px 12px;
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.theme-form-input:focus,
|
||||
.theme-form-input:active {
|
||||
border-color: #66AFE9;
|
||||
border-color: #4A90D9;
|
||||
box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.theme-form-label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin: 4px auto;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
width: 250px;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.theme-link-back {
|
||||
margin-top: 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user