htmx/test/realtime/static/stylesheet.css

/***************************
 * GLOBAL RESET
 ***************************/

 *{
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	box-sizing: border-box;
}


:root {
	--white: #ffffff;
	--gray05: #fafafa;
	--gray10: #f4f4f4;
	--gray15: #eaeaea;
	--gray20: #e0e0e0;
	--gray30: #c6c6c6;
	--gray40: #a8a8a8;
	--gray50: #8d8d8d;
	--gray60: #6f6f6f;
	--gray70: #525252;
	--gray80: #393939;
	--gray90: #262626;
	--black: #000000;

	--blue10: #edf5ff;
	--blue20: #d0e2ff;
	--blue30: #a6c8ff;
	--blue40: #78a9ff;
	--blue50: #4589ff;
	--blue60: #0f62fe;
	--blue70: #0043ce;
	--blue80: #002d9c;
	--blue90: #001d6c;
	--blue100: #001141;

	--red10: #fff1f1;
	--red20: #ffd7d9;
	--red30: #ffb3b8;
	--red40: #ff8389;
	--red50: #fa4d56;
	--red60: #da1e28;
	--red70: #a2191f;
	--red80: #750e13;
	--red90: #520408;
	--red100: #2d0709;

	--input-border: var(--gray30);
	--input-background: var(--gray05);
	--input-color: var(--gray80);

	--input-border-invalid: var(--red40);
	--input-background-invalid: var(--red20);
	--input-color-invalid: var(--red50);

	--border-radius: 7px;
}


/***************************
 * CHROME AND LAYOUT
 ***************************/

body {
	background-color: white;
	padding:0px;
	margin:0px;
	width:100%;
}

#header {
	width:100%;
	height: 100px;
	background-image:url('white_transparent.svg');
	background-position:left 50px center;
	background-repeat:no-repeat;
	background-size: 300px;
	background-color:black;
}

#navigation {
	position:absolute;
	width:200px;
	margin-top:50px;
	margin-left:20px;
}

#navigation .group {
	margin-top:20px;
}

#navigation a:first-child {
	color: black;
	font-weight:500;
	display:block;
	text-decoration:none;
	padding:10px 20px;
	white-space: nowrap;
}

#navigation a {
	display:block;
	cursor: pointer;
	text-decoration:none;
	padding:10px 20px;
	white-space: nowrap;
	border-radius:5px;
}

#navigation a:hover {
	background-color:#eee;
}

#navigation a.selected {
	color:white;
	background-color:#3465a4;
	font-weight:bold;
}

#page {
	margin: 50px;
	padding-left:200px;
}

.container {
	padding: 10px;
	border: solid 1px gray;
	margin-bottom: 20px;
	background-color:#f7f7f7;
	height:130px;
	overflow:hidden;
}

.container.htmx-settling {
	border:solid 3px red!important;
	padding:8px!important;
}

.container.elastic {
	height:auto!important;
}

/***************************
 * TAB STYLES
 ***************************/

[role="tablist"] {
    border-bottom: solid 1px var(--gray40);
    margin-bottom:20px;
    line-height:normal;
}

[role="tablist"] > [role="tab"] {
    cursor: pointer;
    display:inline-block;
    padding: 8px 16px 4px 16px;
    margin:0px 2px -1px 0px;
    background-color:var(--gray05);
    border:solid 1px var(--gray30);
    border-bottom: solid 1px var(--gray40);
    border-radius: 4px 4px 0px 0px; 
    color: var(--gray50);
    font-family: inherit;
    font-size:1.1rem;
    text-decoration: none;
}

[role="tablist"] > [role="tab"]:hover,
[role="tablist"] > [role="tab"]:focus {
    background-color: var(--gray20);
    border-color:var(--gray10);
    border-bottom: solid 1px var(--gray40);
    color:#666;
}

[role="tablist"] > [role="tab"][aria-selected="true"] {
    border-color: var(--gray40);
    border-bottom: solid 1px white;
    background-color: white;
    color: var(--gray100);
}


/***************************
 * OTHER UTILITIES
 ***************************/


pre.code {
	font-family:'Courier New', Courier, monospace;
	background-color: #444440;
	color: #0f0;
	padding:30px 5px 30px 15px;
	overflow-y:scroll;
	display:block;
}

.bold {
	font-weight:bold;
}

.nowrap {
	white-space: nowrap;
}

table {
	border-collapse: collapse;
}

td {
	padding:10px 20px;
	border:solid 1px #ddd;
	vertical-align: top;
}

.demo {
	padding:10px;
	margin:20px 0px;
	color:white;
	background-color: #999;
	height:100px;
}

a, a:visited {
	color:#3465a4;
}