zitadel/site/static/base.css

/*
-----------------------------------------------
	vars – css custom-properties

	NOTE
	- some vars change inside media-queries!
	- under normal conditions, there's no need to touch these
-----------------------------------------------
*/
:root {
	--nav-h: 6rem;
    --top-offset: 10rem;
    --searchbar-space: 140px;
	--sidebar-w: 30rem;
	--sidebar-mid-w: 36rem;
	--sidebar-large-w: 48rem;
	--main-width: 80rem;
	--side-nav: 3.2rem;
	--side-page: var(--side-nav);

	/* easings */
	--out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@media screen and (min-width: 768px) {
	:root {
		--side-page: 14vw;
		--top-offset: 10rem;
		--side-nav: 4.8rem;
	}
}

/*	theme vars */
.theme-default {
    --back: #1a1f36;
    --back-hover: #242b4b;
	--back-light: transparent;
	--back-api: #1a1f36;
	--prime: #6c8eef;
    --second: #ff2069;
    --flash:  #8fa6e7;

    --nav-back: #1a1f36;
    --side-nav-back: #1a1f36;

	--heading: #f7fafc;
    --text: #c1c9d2;
    --grey-text: #a3acb9;
    --dark-text: #8795a1;
	--sidebar-text: #eff8ff;
	--border-w: .3rem; /* border-width  */
	--border-r: .4rem; /* border-radius */
}

/*	typo vars */
.typo-default {
	--code-fs: 1.3rem;
	--h6: 1.3rem;
	--h5: 1.6rem;
	--h4: 1.6rem; /* default font-size */
	--h3: 2.5rem;
	--h2: 3rem;
	--h1: 3rem;
	--linemax: 50em; /* max line-length */
	--lh: 1.5; /* base line-height */
}

body {
	--font: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono: 'Lato', 'Fira Mono', monospace;
}

/*	fonts ---------------------------------- */

@font-face {
	font-family: 'ailerons';
	src: local('ailerons'), url('../fonts/ailerons/ailerons.otf') format('opentype');
}

/*	base reset ----------------------------- */
html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	box-sizing: border-box;
    border-collapse: collapse;
}

html,
body,
#sapper {
	width: 100%;
    height: 100%;
}

* {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

/*	link reset ----------------------------- */
a {
	text-decoration: none;
	cursor: pointer;
	color: inherit;
}

a:hover,
a:active {
	color: var(--flash);
}
a:focus {
	outline: none;
}

/*
-----------------------------------------------
	global styles
-----------------------------------------------
*/

/*	typography ----------------------------- */
body {
	font: 300 var(--h4)/var(--lh) var(--font);
	background-color: var(--back);
	color: var(--text);
	/* default spacing of Overpass is a bit too airy */
	/* letter-spacing: -.013em; */
}

h1,
h2,
h3,
h4,
h5,
h6,
blockquote {
	position: relative;
	margin: 0;
    color: var(--heading);
}

/* h1, h2, h3, h4, h5, h6 { font-weight: 600 } */
h6 {
	font-size: var(--h6);
}
h5 {
	font-size: var(--h5);
}
h4 {
	font-size: var(--h4);
}
h3 {
	font-size: var(--h3);
}
h2 {
	font-size: var(--h2);
}
h1 {
	font-size: var(--h1);
}

h1,
h2 {
	font-family: var(--font);
	line-height: 1.25;
}

h3 {
	font-weight: 300;
}

p,
ol,
ul {
	margin: 0 0 1em 0;
}

.b,
b,
strong {
    font-weight: 600;
    color: white;
}

tt,
/* code, */
kbd,
samp {
	font: 400 var(--code-fs)/1.7 var(--font-mono);
}

code {
	position: relative;
	border-radius: .3em;
    white-space: nowrap;
    font-size: var(--h6);
	/* color: var(--text); */
    -webkit-font-smoothing: initial;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

pre code {
	top: 0;
	white-space: inherit;
	background-color: none;
}

.CodeMirror {
	font-size: var(--code-fs) !important;
}

::selection {
	background: var(--flash);
	color: white;
}

/*	opinionated styles --------------------- */

li:not(.white) > h2 {
	color: var(--second);
}

blockquote {
	position: relative;
	margin: 1.6rem 0 2.4rem;
	padding: 1rem 2.4rem 1rem 2.4rem;
	border-radius: var(--border-r);
	font-family: var(--font);
	max-width: var(--linemax);
}

blockquote p {
	font-size: var(--h5);
}

blockquote :last-child {
	margin: 0;
}

/*  buttons -------------------------------- */
button {
	font-family: inherit;
	font-size: inherit;
	background-color: transparent;
	border: none;
	color: currentColor;
	cursor: pointer;
}

button:focus,
.btn:focus {
	outline: 0;
}

button[disabled],
.btn[disabled],
.btn:hover[disabled] {
	opacity: .55;
	pointer-events: none;
}

button > svg,
.btn > svg {
	position: relative;
	top: -.1rem;
	width: 2rem !important;
	height: 2rem !important;
	stroke: currentColor !important;
}

/*  reset ------- */
.btn {
	--btn-h: 4rem;
	--btn-outline: .2rem;
	--btn-font: var(--font);
	--btn-calc-h: calc(var(--btn-h) - var(--btn-outline) * 2);
	--btn-hover: linear-gradient(to top, rgba(0, 0, 0, .07), rgba(0, 0, 0, .07));

	position: relative;
	margin: 0 .8rem .8rem 0;
	vertical-align: middle;
	white-space: nowrap;
	display: inline-block;
	zoom: 1;
	border: none transparent;
	font: var(--h4) var(--btn-font);
	border-radius: var(--border-r);
	color: currentColor;
	cursor: pointer;
}

/*  default */
.btn {
	line-height: var(--btn-h);
	height: var(--btn-h);
	padding: 0 1.6rem;
	transition: all .1s;
}

.btn:hover {
	transform: scale(.98);
	mix-blend-mode: multiply;
	background-image: var(--btn-hover);
}

/*  optional */
.btn[outline] {
	line-height: var(--btn-calc-h);
	height: var(--btn-calc-h);
	border: var(--btn-outline) solid currentColor;
	background-color: white;
	color: currentColor;
}

/*  links ------------------------------------- */
a {
	position: relative;
	padding: 0 0 1px 0;
	border-bottom: 1px solid currentColor;
	user-select: none;
	color: var(--prime);
	transition: color .2s,
}

a:hover {
	color: var(--flash);
}

a.no-underline {
	border-bottom: none;
	padding: 0;
}

/* a:hover:not(.disabled) > .icon { stroke: var(--flash) } */

/*  lists ---------------------------------- */
.listify ol,
.listify ul {
	--list-padding: 2.9rem;

	list-style: none;
	color: currentColor;
	margin-left: var(--list-padding);
}

.listify ol > li,
.listify ul > li {
	max-width: calc(var(--linemax) - var(--list-padding));
	line-height: 1.5;
	margin: 0 0 0.4rem 0;
}

.listify ul > li:before {
	content: '';
	position: absolute;
	margin-top: .9rem;
	margin-left: -1.8rem;
	background-color: var(--second);
	width: .6rem;
	height: .6rem;
	border-radius: 2px;
	opacity: 0.7;
}

.listify ol {
	list-style: decimal;
}

/*  tables --------------------------------- */
.table-wrapper {
    max-width: var(--linemax);
    overflow-x: auto;
}

.table-wrapper::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #00000010;
    border-radius: 8px;
}

.table-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #00000010;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background-color: #6c8eef30;
    border-radius: 8px;
    cursor: pointer;
}

table {
	width: 100%;
    font-size: var(--h5);
}

td,
th {
	text-align: left;
	border-bottom: 1px solid #eee;
	padding: 4px 8px 4px 0;
}

td[align='right'] {
    text-align: right !important;
}

th[align='right'] {
    text-align: right !important;
}

td[align='left'] {
    text-align: left !important;
}

th[align='left'] {
    text-align: left !important;
}

table code,
table span {
	white-space: pre;
}

/*	grid ----------------------------------- */
.grid,
.grid.half {
	display: grid;
	grid-gap: 2.4rem;
	grid-template-columns: 1fr;
	align-items: center;
}

.grid.stretch {
	align-items: stretch;
}

.grid > .cols-2,
.grid > .cols-3 {
	grid-column: span 1;
}

@media screen and (min-width: 840px) {
	.grid.half,
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.grid > .cols-2,
	.grid > .cols-3 {
		grid-column: span 2;
	}
}

@media screen and (min-width: 1100px) {
	.grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.grid > .cols-2 {
		grid-column: span 2;
	}
	.grid > .cols-3 {
		grid-column: span 3;
	}
}

/*	helper styles -------------------------- */
.flex-auto {
	flex: 1 0 auto;
}

.py0 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.legend,
figcaption,
.post aside {
	max-width: none;
	margin: 0 auto;
	padding: 1.6rem 0 0 .8rem;
	font: 1.2rem/1.6 var(--font-mono);
}

.filename {
	display: inline-block;
	padding: 1.6rem 0 0 1rem;
	font: var(--h6) var(--font-mono);
}

.box {
	padding: 2.4rem 3.2rem;
	border-radius: var(--border-r);
}

/*	theme colors --------------------------- */
.prime {
	color: var(--prime) !important;
}
.second {
	color: var(--second) !important;
}
.flash {
	color: var(--flash) !important;
}
.black {
	color: black !important;
}
.white {
	color: white !important;
}

.back {
	background-color: var(--back) !important;
}
.back-light {
	background-color: var(--back-light) !important;
}
.bg-prime {
	background-color: var(--prime) !important;
}
.bg-second {
	background-color: var(--second) !important;
}
.bg-flash {
	background-color: var(--flash) !important;
}

/*	inputs --------------------------------- */
input[type="checkbox"] {
	/* display: block; */
	position: relative;
	height: 1em;
	width: calc(100% - 0.6em);
	max-width: 2em;
	top: -2px;
	border-radius: 0.5em;
	-webkit-appearance: none;
	outline: none;
	margin: 0 0.6em 0 0;
}

input[type="checkbox"]::before {
	content: "";
	position: absolute;
	display: block;
	height: 100%;
	width: 100%;
	padding: 2px;
	border-radius: 1em;
	top: 0;
	left: 0;
	background: var(--second);
	/* box-sizing: border-box; */
	box-sizing: content-box;
}

input[type="checkbox"]:checked::before {
	background: var(--prime);
}

input[type="checkbox"]::after {
	content: "";
	position: absolute;
	display: block;
	height: 1em;
	width: 1em;
	top: 2px;
	left: 2px;
	border-radius: 1em;
	background: white;
	box-shadow: 0 0px 1px rgba(0, 0, 0, .4), 0 4px 2px rgba(0, 0, 0, .1);
	-webkit-transition: background .2s ease-out, left .2s ease-out;
}

input[type="checkbox"]:checked::after {
	left: calc(100% - 9px);
}

.zitadel-gallery {
    display: flex;
    width: 100%;
    max-width: 56em;
    flex-wrap: wrap;
}

.zitadel-gallery img {
    width: 100%;
    object-fit: contain;
    border-radius: 4px;
}
.zitadel-gallery figure {
    flex-basis: 30%;
    object-fit: contain;
    margin: 5px 5px 5px 0;
    width: 150px;
    border-radius: 4px;
}