mirror of
https://github.com/zitadel/zitadel.git
synced 2024-12-12 11:04:25 +00:00
docs(apis): cleanup navigation, better overview (#2608)
* api cards, cleanup overview * endpoint, definition shortcuts, links * update quickstart links * mobile overflow * Update docs/docs/apis/introduction.mdx Co-authored-by: Florian Forster <florian@caos.ch> * Update docs/docs/apis/introduction.mdx Co-authored-by: Florian Forster <florian@caos.ch> Co-authored-by: Florian Forster <florian@caos.ch>
This commit is contained in:
Max Peintner
GitHub
parent
80b811c12e
commit
8df5614e4d
@ -1,68 +0,0 @@
|
|||||||
---
|
|
||||||
title: ZITADEL APIs
|
|
||||||
---
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Proto
|
|
||||||
|
|
||||||
All of our APIs are generated by proto defintions. You can find all the proto definitions in the [Proto API Definitions](proto/auth).
|
|
||||||
|
|
||||||
> More about [Protocol Buffer](https://developers.google.com/protocol-buffers)
|
|
||||||
|
|
||||||
## Swagger Documentation
|
|
||||||
|
|
||||||
We provide some json files for the swagger documentation of our APIs with the following link: [https://api.zitadel.ch/openapi/v2/swagger/](https://api.zitadel.ch/openapi/v2/swagger/)
|
|
||||||
The easiest way to have a look at them is, to import them in the [Swagger Editor](https://editor.swagger.io/)
|
|
||||||
|
|
||||||
## Authentication API aka Auth
|
|
||||||
|
|
||||||
The authentication API (aka Auth API) is used for all operations on the currently logged in user.
|
|
||||||
The user id is taken from the sub claim in the token.
|
|
||||||
|
|
||||||
| Service | URI |
|
|
||||||
|:--------|:----------------------------------------------------------------------------------------------------------------------------|
|
|
||||||
| REST | [https://api.zitadel.ch/auth/v1/](https://api.zitadel.ch/auth/v1/) |
|
|
||||||
| GRPC | [https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService/](https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService) |
|
|
||||||
|
|
||||||
> At a later date we might expose functions to build your own login GUI
|
|
||||||
> You can build your own user Register GUI already by utilizing the [Management API](#management)
|
|
||||||
|
|
||||||
[Latest API Version](https://github.com/caos/zitadel/blob/main/proto/zitadel/auth.proto)
|
|
||||||
|
|
||||||
|
|
||||||
## Management API
|
|
||||||
|
|
||||||
The management API is as the name states the interface where systems can mutate IAM objects like, organizations, projects, clients, users and so on if they have the necessary access rights.
|
|
||||||
To identify the current organization you can send a header `x-zitadel-orgid` or if no header is set, the organization of the authenticated user is set.
|
|
||||||
|
|
||||||
| Service | URI |
|
|
||||||
|:--------|:----------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
||||||
| REST | [https://api.zitadel.ch/management/v1/](https://api.zitadel.ch/management/v1/) |
|
|
||||||
| GRPC | [https://api.zitadel.ch/caos.zitadel.management.api.v1.ManagementService/](https://api.zitadel.ch/caos.zitadel.management.api.v1.ManagementService) |
|
|
||||||
|
|
||||||
[Latest API Version](https://github.com/caos/zitadel/blob/main/proto/zitadel/management.proto)
|
|
||||||
|
|
||||||
|
|
||||||
## Administration API aka Admin
|
|
||||||
|
|
||||||
This API is intended to configure and manage the IAM itself.
|
|
||||||
|
|
||||||
| Service | URI |
|
|
||||||
|:--------|:--------------------------------------------------------------------------------------------------------------------------------|
|
|
||||||
| REST | [https://api.zitadel.ch/admin/v1/](https://api.zitadel.ch/admin/v1/) |
|
|
||||||
| GRPC | [https://api.zitadel.ch/caos.zitadel.admin.api.v1.AdminService/](https://api.zitadel.ch/caos.zitadel.admin.api.v1.AdminService) |
|
|
||||||
|
|
||||||
[Latest API Version](https://github.com/caos/zitadel/blob/main/proto/zitadel/admin.proto)
|
|
||||||
|
|
||||||
## Assets API
|
|
||||||
|
|
||||||
|
|
||||||
The Assets API allows you to up- and download all kinds of assets. This can be files such as logos, fonts or user avatar.
|
|
||||||
|
|
||||||
|
|
||||||
| Service | URI |
|
|
||||||
|:--------|:--------------------------------------------------------------------------------------------------------------------------------|
|
|
||||||
| REST | [https://api.zitadel.ch/assets/v1/](https://api.zitadel.ch/assets/v1/) |
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
---
|
|
||||||
title: Domains
|
|
||||||
---
|
|
||||||
|
|
||||||
| Domain Name | Example | Description |
|
|
||||||
| :---------- | :-------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
|
||||||
| issuer | `issuer.zitadel.ch` | Provides the [OpenID Connect 1.0 Discovery Endpoint](openidoauth/endpoints#openid-connect-10-discovery) |
|
|
||||||
| api | `api.zitadel.ch` | All ZITADEL API's are located under this domain. |
|
|
||||||
| login | `accounts.zitadel.ch` | The accounts.* page provides server renderer pages like login and register and as well the authorization_endpoint for OpenID Connect |
|
|
||||||
| console | `console.zitadel.ch` | With the console.* domain we serve the assets for the management gui |
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
---
|
|
||||||
title: Introduction
|
|
||||||
---
|
|
||||||
|
|
||||||
## APIs
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
ZITADEL provides four API's for different use cases. Three API's are built with GRPC and then generate a REST service.
|
|
||||||
Each service's proto definition is located in the source control on GitHub.
|
|
||||||
As we generate the REST services and Swagger file out of the proto definition we recommend that you rely on the proto file.
|
|
||||||
We annotate the corresponding REST methods on each possible call as well as the AuthN and AuthZ requirements.
|
|
||||||
The last API (assets) is only a REST API because we use multipart form data.
|
|
||||||
|
|
||||||
See below for an example with the call **GetMyUser**.
|
|
||||||
|
|
||||||
```Go
|
|
||||||
//User
|
|
||||||
rpc GetMyUser(google.protobuf.Empty) returns (UserView) {
|
|
||||||
option (google.api.http) = {
|
|
||||||
get: "/users/me"
|
|
||||||
};
|
|
||||||
|
|
||||||
option (caos.zitadel.utils.v1.auth_option) = {
|
|
||||||
permission: "authenticated"
|
|
||||||
};
|
|
||||||
}
|
|
||||||
```
|
|
||||||
---
|
|
||||||
|
|
||||||
As you can see the `GetMyUser` function is also available as a REST service under the path `/users/me`.
|
|
||||||
|
|
||||||
In the table below you can see the URI of those calls.
|
|
||||||
|
|
||||||
| Service | URI |
|
|
||||||
|:--------|:-----------------------------------------------------------------------------------------------------------------------------------------------|
|
|
||||||
| REST | [https://api.zitadel.ch/auth/v1/users/me](https://api.zitadel.ch/auth/v1/users/me) |
|
|
||||||
| GRPC | [https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService/GetMyUser](https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService/GetMyUser) |
|
|
||||||
172
docs/docs/apis/introduction.mdx
Normal file
172
docs/docs/apis/introduction.mdx
Normal file
@ -0,0 +1,172 @@
|
|||||||
|
---
|
||||||
|
title: Overview
|
||||||
|
---
|
||||||
|
|
||||||
|
import {ApiCard} from '../../src/components/apicard';
|
||||||
|
import Column from '../../src/components/column';
|
||||||
|
|
||||||
|
## APIs
|
||||||
|
|
||||||
|
ZITADEL provides four APIs for different use cases. Three of these APIs are built with GRPC and generate a REST service.
|
||||||
|
Each service's proto definition is located in the source control on GitHub.
|
||||||
|
As we generate the REST services and Swagger file out of the proto definition we recommend that you rely on the proto file.
|
||||||
|
We annotate the corresponding REST methods on each possible call as well as the AuthN and AuthZ requirements.
|
||||||
|
The last API (assets) is only a REST API because ZITADEL uses multipart form data for certain elements.
|
||||||
|
|
||||||
|
### Proto
|
||||||
|
|
||||||
|
All of our APIs are generated by proto defintions. You can find all the proto definitions in the [Proto API Definitions](proto/auth).
|
||||||
|
|
||||||
|
> More about [Protocol Buffer](https://developers.google.com/protocol-buffers)
|
||||||
|
|
||||||
|
### Swagger Documentation
|
||||||
|
|
||||||
|
We provide some json files for the swagger documentation of our APIs with the following link: [https://api.zitadel.ch/openapi/v2/swagger/](https://api.zitadel.ch/openapi/v2/swagger/)
|
||||||
|
The easiest way to have a look at them is, to import them in the [Swagger Editor](https://editor.swagger.io/)
|
||||||
|
|
||||||
|
<ApiCard title="Authentication" type="AUTH">
|
||||||
|
<Column>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
## Authentication
|
||||||
|
The authentication API (aka Auth API) is used for all operations on the currently logged in user. The user id is taken from the sub claim in the token.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="apicard-right">
|
||||||
|
|
||||||
|
### GRPC
|
||||||
|
Endpoint:
|
||||||
|
[https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService/](https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService)
|
||||||
|
|
||||||
|
Definition:
|
||||||
|
[Auth Proto](/docs/apis/proto/auth)
|
||||||
|
|
||||||
|
### REST
|
||||||
|
Endpoint:
|
||||||
|
[https://api.zitadel.ch/auth/v1/](https://api.zitadel.ch/auth/v1/)
|
||||||
|
|
||||||
|
Definition:
|
||||||
|
[Swagger Definition](https://api.zitadel.ch/openapi/v2/swagger/auth.swagger.json)
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Column>
|
||||||
|
</ApiCard>
|
||||||
|
|
||||||
|
<ApiCard title="Management" type="MGMT">
|
||||||
|
<Column>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
## Management
|
||||||
|
|
||||||
|
The management API is as the name states the interface where systems can mutate IAM objects like, organizations, projects, clients, users and so on if they have the necessary access rights.
|
||||||
|
To identify the current organization you can send a header `x-zitadel-orgid` or if no header is set, the organization of the authenticated user is set.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="apicard-right">
|
||||||
|
|
||||||
|
### GRPC
|
||||||
|
Endpoint:
|
||||||
|
[https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService/](https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService)
|
||||||
|
|
||||||
|
Definition:
|
||||||
|
[Management Proto](/docs/apis/proto/management)
|
||||||
|
|
||||||
|
### REST
|
||||||
|
Endpoint:
|
||||||
|
[https://api.zitadel.ch/management/v1/](https://api.zitadel.ch/management/v1/)
|
||||||
|
|
||||||
|
Definition:
|
||||||
|
[Swagger Definition](https://api.zitadel.ch/openapi/v2/swagger/management.swagger.json)
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Column>
|
||||||
|
</ApiCard>
|
||||||
|
|
||||||
|
<ApiCard title="Administration" type="ADMIN">
|
||||||
|
<Column>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
## Administration
|
||||||
|
|
||||||
|
This API is intended to configure and manage the IAM itself.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="apicard-right">
|
||||||
|
|
||||||
|
### GRPC
|
||||||
|
Endpoint:
|
||||||
|
[https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService/](https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService)
|
||||||
|
|
||||||
|
Definition:
|
||||||
|
[Admin Proto](/docs/apis/proto/auth)
|
||||||
|
|
||||||
|
### REST
|
||||||
|
Endpoint:
|
||||||
|
[https://api.zitadel.ch/admin/v1/](https://api.zitadel.ch/admin/v1/)
|
||||||
|
|
||||||
|
Definition:
|
||||||
|
[Swagger Definition](https://api.zitadel.ch/openapi/v2/swagger/admin.swagger.json)
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Column>
|
||||||
|
</ApiCard>
|
||||||
|
|
||||||
|
<ApiCard title="Assets" type="ASSET">
|
||||||
|
<Column>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
## Assets
|
||||||
|
|
||||||
|
The Assets API allows you to up- and download all kinds of assets. This can be files such as logos, fonts or user avatar.
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
### REST
|
||||||
|
Endpoint:
|
||||||
|
[https://api.zitadel.ch/assets/v1/](https://api.zitadel.ch/assets/v1/)
|
||||||
|
|
||||||
|
Definition:
|
||||||
|
[/docs/apis/assets/assets](/docs/apis/assets/assets)
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Column>
|
||||||
|
</ApiCard>
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
See below for an example with the call **GetMyUser**.
|
||||||
|
|
||||||
|
```Go
|
||||||
|
//User
|
||||||
|
rpc GetMyUser(google.protobuf.Empty) returns (UserView) {
|
||||||
|
option (google.api.http) = {
|
||||||
|
get: "/users/me"
|
||||||
|
};
|
||||||
|
|
||||||
|
option (caos.zitadel.utils.v1.auth_option) = {
|
||||||
|
permission: "authenticated"
|
||||||
|
};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
As you can see the `GetMyUser` function is also available as a REST service under the path `/users/me`.
|
||||||
|
|
||||||
|
In the table below you can see the URI of those calls.
|
||||||
|
|
||||||
|
| Service | URI |
|
||||||
|
|:--------|:-----------------------------------------------------------------------------------------------------------------------------------------------|
|
||||||
|
| REST | [https://api.zitadel.ch/auth/v1/users/me](https://api.zitadel.ch/auth/v1/users/me) |
|
||||||
|
| GRPC | [https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService/GetMyUser](https://api.zitadel.ch/caos.zitadel.auth.api.v1.AuthService/GetMyUser) |
|
||||||
|
|
||||||
|
## Domains
|
||||||
|
|
||||||
|
| Domain Name | Example | Description |
|
||||||
|
| :---------- | :-------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
|
| issuer | `issuer.zitadel.ch` | Provides the [OpenID Connect 1.0 Discovery Endpoint](openidoauth/endpoints#openid-connect-10-discovery) |
|
||||||
|
| api | `api.zitadel.ch` | All ZITADEL API's are located under this domain. |
|
||||||
|
| login | `accounts.zitadel.ch` | The accounts.* page provides server renderer pages like login and register and as well the authorization_endpoint for OpenID Connect |
|
||||||
|
| console | `console.zitadel.ch` | With the console.* domain we serve the assets for the management gui |
|
||||||
@ -64,4 +64,4 @@ kubectl apply --filename ./boom.yml
|
|||||||
watch "kubectl --namespace caos-system get pods"
|
watch "kubectl --namespace caos-system get pods"
|
||||||
```
|
```
|
||||||
|
|
||||||
Congratulations, you can accept traffic at four new ZITADEL [subdomains](/docs/apis/domains) now.
|
Congratulations, you can accept traffic at four new ZITADEL [subdomains](/docs/apis/introduction#domains) now.
|
||||||
|
|||||||
@ -52,4 +52,4 @@ orbctl --gitops takeoff
|
|||||||
watch "kubectl --namespace caos-system get pods"
|
watch "kubectl --namespace caos-system get pods"
|
||||||
```
|
```
|
||||||
|
|
||||||
Congratulations, you can accept traffic at four new ZITADEL [subdomains](/docs/apis/domains) now.
|
Congratulations, you can accept traffic at four new ZITADEL [subdomains](/docs/apis/introduction#domains) now.
|
||||||
|
|||||||
@ -56,7 +56,7 @@ import TabItem from '@theme/TabItem';
|
|||||||
</TabItem>
|
</TabItem>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
|
|
||||||
- We need you to point [four DNS subdomains](/docs/apis/domains) to the CAOS-generated IP address.
|
- We need you to point [four DNS subdomains](/docs/apis/introduction#domains) to the CAOS-generated IP address.
|
||||||
- For being able to send SMS, we need a Twilio sender name, SID and an auth token.
|
- For being able to send SMS, we need a Twilio sender name, SID and an auth token.
|
||||||
- ZITADEL also needs to connect to an email relay of your choice. We need the SMTP host, user and app key as well as the ZITADEL emails sender address and name.
|
- ZITADEL also needs to connect to an email relay of your choice. We need the SMTP host, user and app key as well as the ZITADEL emails sender address and name.
|
||||||
|
|
||||||
|
|||||||
@ -300,6 +300,6 @@ If you get stuck consider checking out our [template](https://github.com/caos/zi
|
|||||||
|
|
||||||
### Whats next?
|
### Whats next?
|
||||||
|
|
||||||
Now you can proceed implementing our APIs to include Authorization. Refer to our [Docs](../../apis/apis) or checkout our Console Code on [Github](https://github.com/caos/zitadel) which is using GRPC to access data.
|
Now you can proceed implementing our APIs to include Authorization. Refer to our [Docs](../../apis/introduction) or checkout our Console Code on [Github](https://github.com/caos/zitadel) which is using GRPC to access data.
|
||||||
|
|
||||||
For more information about creating an angular application we refer to [Angular](https://angular.io/start) and for more information about the used oauth/oidc library consider reading their docs at [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc).
|
For more information about creating an angular application we refer to [Angular](https://angular.io/start) and for more information about the used oauth/oidc library consider reading their docs at [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc).
|
||||||
|
|||||||
@ -110,6 +110,6 @@ You have successfully integrated ZITADEL in your React Application!
|
|||||||
|
|
||||||
### Whats next?
|
### Whats next?
|
||||||
|
|
||||||
Now you can proceed implementing our APIs to include Authorization. You can find our API Docs [here](../../apis/apis)
|
Now you can proceed implementing our APIs to include Authorization. You can find our API Docs [here](../../apis/introduction)
|
||||||
|
|
||||||
For more information about creating a React application we refer to [React](https://reactjs.org/docs/getting-started.html) and for more information about the used oauth/oidc library consider reading their docs at [oidc-react](https://www.npmjs.com/package/oidc-react).
|
For more information about creating a React application we refer to [React](https://reactjs.org/docs/getting-started.html) and for more information about the used oauth/oidc library consider reading their docs at [oidc-react](https://www.npmjs.com/package/oidc-react).
|
||||||
|
|||||||
@ -130,21 +130,14 @@ module.exports = {
|
|||||||
],
|
],
|
||||||
apis: [
|
apis: [
|
||||||
'apis/introduction',
|
'apis/introduction',
|
||||||
'apis/domains',
|
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
label: 'Rate Limits',
|
label: 'API Definition',
|
||||||
collapsed: true,
|
collapsed: true,
|
||||||
items: [
|
items: [
|
||||||
'legal/rate-limit-policy',
|
|
||||||
'apis/ratelimits/accounts',
|
|
||||||
'apis/ratelimits/api',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
'apis/apis',
|
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
label: 'Proto API Definition',
|
label: 'Proto',
|
||||||
collapsed: true,
|
collapsed: true,
|
||||||
items: [
|
items: [
|
||||||
'apis/proto/auth',
|
'apis/proto/auth',
|
||||||
@ -162,17 +155,19 @@ module.exports = {
|
|||||||
'apis/proto/message',
|
'apis/proto/message',
|
||||||
'apis/proto/text',
|
'apis/proto/text',
|
||||||
'apis/proto/object',
|
'apis/proto/object',
|
||||||
'apis/proto/options',
|
'apis/proto/options'
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
label: 'Assets API Definition',
|
label: 'Assets API',
|
||||||
collapsed: false,
|
collapsed: true,
|
||||||
items: [
|
items: [
|
||||||
'apis/assets/assets',
|
'apis/assets/assets',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
label: 'OpenID Connect & OAuth',
|
label: 'OpenID Connect & OAuth',
|
||||||
@ -185,6 +180,16 @@ module.exports = {
|
|||||||
'apis/openidoauth/grant-types'
|
'apis/openidoauth/grant-types'
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
label: 'Rate Limits',
|
||||||
|
collapsed: true,
|
||||||
|
items: [
|
||||||
|
'legal/rate-limit-policy',
|
||||||
|
'apis/ratelimits/accounts',
|
||||||
|
'apis/ratelimits/api',
|
||||||
|
],
|
||||||
|
},
|
||||||
],
|
],
|
||||||
concepts: [
|
concepts: [
|
||||||
'concepts/introduction',
|
'concepts/introduction',
|
||||||
|
|||||||
31
docs/src/components/apicard.jsx
Normal file
31
docs/src/components/apicard.jsx
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import styles from '../css/apicard.module.css';
|
||||||
|
|
||||||
|
export function ApiCard({ title, type, label, children}) {
|
||||||
|
let style = styles.apiauth;
|
||||||
|
switch (type) {
|
||||||
|
case 'AUTH':
|
||||||
|
style = styles.apiauth;
|
||||||
|
break;
|
||||||
|
case 'MGMT':
|
||||||
|
style = styles.apimgmt;
|
||||||
|
break;
|
||||||
|
case 'ADMIN':
|
||||||
|
style = styles.apiadmin;
|
||||||
|
break;
|
||||||
|
case 'ASSET':
|
||||||
|
style = styles.apiasset;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`${styles.apicard} ${style} `}>
|
||||||
|
{/* {title && <h2 className={styles.apicard.title}>{title}</h2>} */}
|
||||||
|
{/* <p className={styles.apicard.description}>
|
||||||
|
|
||||||
|
</p> */}
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
73
docs/src/css/apicard.module.css
Normal file
73
docs/src/css/apicard.module.css
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
.apicard {
|
||||||
|
border-radius: .5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 200px;
|
||||||
|
background: var(--card-background);
|
||||||
|
padding: 1rem;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all .2 ease-in-out;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apiauth {
|
||||||
|
background: var(--apiauthbackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.apimgmt {
|
||||||
|
background: var(--apimgmtbackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.apiadmin {
|
||||||
|
background: var(--apiadminbackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apicard p {
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fillspace {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottomicon {
|
||||||
|
width: 24px;
|
||||||
|
margin-right: .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;
|
||||||
|
}
|
||||||
@ -54,6 +54,15 @@
|
|||||||
--card-background: #fafafa;
|
--card-background: #fafafa;
|
||||||
--list-background: #f7fafc;
|
--list-background: #f7fafc;
|
||||||
--ifm-spacing-horizontal: 1.5rem;
|
--ifm-spacing-horizontal: 1.5rem;
|
||||||
|
--apiauthbackground: linear-gradient(40deg, #a9d9ca 30%, #b4d5cb);
|
||||||
|
--apimgmtbackground: linear-gradient(40deg, #c6d7f3 30%, #c7c6e3);
|
||||||
|
--apiadminbackground: linear-gradient(40deg, #c192c790, #c192c790);
|
||||||
|
--apiassetbackground: linear-gradient(40deg, #e4eaf1, #eef2f9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.apicard-right {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.padding-top--md {
|
.padding-top--md {
|
||||||
@ -198,6 +207,10 @@ h2 {
|
|||||||
--ifm-color-warning-contrast-foreground: #ffc1c1;
|
--ifm-color-warning-contrast-foreground: #ffc1c1;
|
||||||
--card-background: #454a66;
|
--card-background: #454a66;
|
||||||
--list-background: #3c405850;
|
--list-background: #3c405850;
|
||||||
|
--apiauthbackground: linear-gradient(40deg, #506e6e90 30%, #506e6e90);
|
||||||
|
--apimgmtbackground: linear-gradient(40deg, #595d8090 30%, #595d8090);
|
||||||
|
--apiadminbackground: linear-gradient(40deg, #6a506e90, #6a506e90);
|
||||||
|
--apiassetbackground: linear-gradient(40deg, #3c4257, #3c4257);
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu li li a {
|
.menu li li a {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user