mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-24 00:02:15 +00:00
docs: add tailwindcss for styles, oidc authorize endpoint playground (#4707)
* variable parser * rm plugin * set fcn * env * EnvCode component * cleanup env demo * env * rm remark plugin * auth request context * auth req component * authorize endpoint construction * rev react page * fix endpoint * styling * query params with anchor * desc * tailwind coexistence * fix styles * add login_hint, organizationId scope * auth request without prompt * show login_hint * sync displayed url with actual href * fix fcn * coloring * Update docs/src/components/authrequest.jsx Co-authored-by: mffap <[email protected]> * Update docs/src/components/authrequest.jsx Co-authored-by: mffap <[email protected]> * Update docs/src/components/authrequest.jsx Co-authored-by: mffap <[email protected]> * Update docs/src/components/authrequest.jsx Co-authored-by: mffap <[email protected]> * Update docs/src/components/authrequest.jsx Co-authored-by: mffap <[email protected]> * Update docs/src/components/authrequest.jsx Co-authored-by: mffap <[email protected]> * add plausible, header * add pkce * move * adds pkce code challenge * replace cboa * reaname and move to required * fall back to cboa due to webpack error * trailing slash * reorder org_id * remove resourceowner * texts * update references * buffer, fix some react dom components * Apply suggestions from code review Co-authored-by: Florian Forster <[email protected]> * standard scopes Co-authored-by: mffap <[email protected]> Co-authored-by: Florian Forster <[email protected]>
This commit is contained in:
Max Peintner
co-authored by
mffap
Florian Forster
mffap
Florian Forster
parent
add232d1dd
commit
97fe041a86
@@ -1,53 +1,10 @@
|
||||
.apicard {
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 200px;
|
||||
background: var(--card-background);
|
||||
padding: 1rem;
|
||||
text-decoration: none;
|
||||
transition: all 0.2 ease-in-out;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.apiauth {
|
||||
background: var(--apiauthbackground);
|
||||
}
|
||||
|
||||
.apimgmt {
|
||||
background: var(--apimgmtbackground);
|
||||
}
|
||||
|
||||
.apiadmin {
|
||||
background: var(--apiadminbackground);
|
||||
}
|
||||
|
||||
.apisystem {
|
||||
background: var(--apisystembackground);
|
||||
}
|
||||
|
||||
.apiasset {
|
||||
background: var(--apiassetbackground);
|
||||
}
|
||||
|
||||
.apicard:hover {
|
||||
text-decoration: none;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* .apicard h2 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.apicard a {
|
||||
color: #bfc1cc;
|
||||
} */
|
||||
|
||||
.apicard h3,
|
||||
h4,
|
||||
h5 {
|
||||
/* color: white; */
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
|
||||
@@ -55,26 +12,3 @@ h5 {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fillspace {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottomicon {
|
||||
width: 24px;
|
||||
margin-right: 0.5rem;
|
||||
color: var(--ifm-font-color-base);
|
||||
}
|
||||
|
||||
.bottomspan {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--ifm-font-color-base);
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
.column {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
border-radius: 1rem;
|
||||
transition: all 0.2s ease;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
@media (min-width: 1180px) {
|
||||
.column {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
+31
-27
@@ -1,9 +1,7 @@
|
||||
/* stylelint-disable docusaurus/copyright-header */
|
||||
/**
|
||||
* Any CSS included here will be global. The classic template
|
||||
* bundles Infima by default. Infima is a CSS framework designed to
|
||||
* work well for content-centric websites.
|
||||
*/
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import "../../static/icons/line-awesome/css/line-awesome.min.css";
|
||||
|
||||
@font-face {
|
||||
@@ -129,6 +127,9 @@
|
||||
--footer-border: rgba(0, 0, 0, 0.12);
|
||||
--card-border: rgba(135, 149, 161, 0.2);
|
||||
--ifm-pagination-nav-color-hover: #000000;
|
||||
--input-border: #1a191954;
|
||||
--input-hover-border: #000000;
|
||||
--input-background: #00000004;
|
||||
}
|
||||
|
||||
pre code {
|
||||
@@ -303,6 +304,9 @@ h2 {
|
||||
--footer-border: rgba(255, 255, 255, 0.12);
|
||||
--card-border: rgba(135, 149, 161, 0.2);
|
||||
--ifm-pagination-nav-color-hover: #ffffff;
|
||||
--input-border: #f9f7f775;
|
||||
--input-hover-border: #ffffff;
|
||||
--input-background: #00000040;
|
||||
}
|
||||
|
||||
.get-started:hover {
|
||||
@@ -325,7 +329,7 @@ main .container img {
|
||||
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.rounded {
|
||||
.custom-rounded {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -336,51 +340,51 @@ main .container img {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.rounded svg {
|
||||
.custom-rounded svg {
|
||||
fill: white;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.rounded i {
|
||||
.custom-rounded i {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.rounded-start {
|
||||
.custom-rounded-start {
|
||||
background: linear-gradient(40deg, #059669 30%, #047857);
|
||||
}
|
||||
|
||||
.rounded-password {
|
||||
.custom-rounded-password {
|
||||
background: linear-gradient(40deg, #f59e0b 30%, #b45309);
|
||||
}
|
||||
|
||||
.rounded-login,
|
||||
.rounded-register {
|
||||
.custom-rounded-login,
|
||||
.custom-rounded-register {
|
||||
background: linear-gradient(40deg, #059669 30%, #047857);
|
||||
}
|
||||
|
||||
.rounded-privatelabel,
|
||||
.rounded-phone,
|
||||
.rounded-email,
|
||||
.rounded-storage,
|
||||
.rounded-service {
|
||||
.custom-rounded-privatelabel,
|
||||
.custom-rounded-phone,
|
||||
.custom-rounded-email,
|
||||
.custom-rounded-storage,
|
||||
.custom-rounded-service {
|
||||
background: linear-gradient(40deg, #3b82f6 30%, #4f46e5);
|
||||
}
|
||||
|
||||
.rounded-split {
|
||||
.custom-rounded-split {
|
||||
background: linear-gradient(40deg, #3b82f6, #4f46e5);
|
||||
}
|
||||
|
||||
.rounded-texts,
|
||||
.rounded-help,
|
||||
.rounded-architecture {
|
||||
.custom-rounded-texts,
|
||||
.custom-rounded-help,
|
||||
.custom-rounded-architecture {
|
||||
background: linear-gradient(40deg, #dc2626 30%, #db2777);
|
||||
}
|
||||
|
||||
.rounded-system,
|
||||
.rounded-apis,
|
||||
.rounded-policy,
|
||||
.rounded-instance {
|
||||
.custom-rounded-system,
|
||||
.custom-rounded-apis,
|
||||
.custom-rounded-policy,
|
||||
.custom-rounded-instance {
|
||||
background: linear-gradient(40deg, #1f2937, #111827);
|
||||
}
|
||||
|
||||
@@ -483,7 +487,7 @@ table th {
|
||||
}
|
||||
|
||||
a {
|
||||
transition: all 1s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.alert {
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
.inputwrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.input {
|
||||
box-sizing: border-box;
|
||||
padding-inline-start: 10px;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
text-align: start;
|
||||
cursor: text;
|
||||
transform: all 0.2 linear;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
border: 1px solid var(--input-border);
|
||||
background-color: var(--input-background);
|
||||
border-radius: 4px;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
max-width: 400px;
|
||||
transition: border-color 0.15s ease-in-out,
|
||||
background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
|
||||
color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
width: 100%;
|
||||
color: var(--ifm-font-color-base);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
input:hover {
|
||||
border-color: var(--input-hover-border);
|
||||
}
|
||||
|
||||
input:active,
|
||||
input:focus {
|
||||
border-color: var(--ifm-color-primary);
|
||||
}
|
||||
Reference in New Issue
Block a user