zitadel/console/src/app/app.component.scss

.root-header {
	position: fixed;
	z-index: 100;
	display: flex;
	height: 60px;
	align-items: center;
    padding: 0 1rem;
    top: 0;
    left: 0;
    right: 0;
    
	.logo {
		height: 40px;
		width: auto;
    }

	.title {
		text-decoration: none;
		color: white;
		font-size: 1.2rem;
		font-weight: 400;
		margin-left: 1rem;
		line-height: 1.2rem;
        font-family: 'Lato';
        margin-right: 1rem;
    }

    .context-menu {
        border-radius: .5rem;
        background-color: #2d2e30;
    }

	.fill-space {
		flex: 1;
    }

	.icon-container {
		display: flex;
		justify-content: space-between;
        position: relative;
        user-select: none;

		.docs {
			text-decoration: none;
			font-size: 1.4rem;
		}

        .avatar {
            display: block;
            margin: auto;
            cursor: pointer;
        }

        .name {
            font-size: 1rem;
            font-weight: 400;
        }

		.a_card {
			position: absolute;
			top: 60px;
			right: 0;
            overflow: hidden;
            border-radius: .5rem;
		}
	}
}

.admin-line {
    font-size: 12px;
    padding: 4px 2rem;
    position: relative;
    overflow: hidden;
}

.main-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
    width: 100%;
    padding-top: 60px;

	.sidenav {
		width: 300px;
		border-right: none;

		.side-column {
            padding-top: 60px;
			display: flex;
            flex-direction: column;
            align-items: stretch;
            
            .list {
                width: 100%;
                display: flex;
                flex-direction: column;
                height: 100%;
                margin-top: 2rem;
            
                .logout-icon {
                    margin-left: 1rem;
                }
            
                .fill-space {
                    flex: 1;
                }
            
                .nav-item {
                    display: flex;
                    align-items: center;
                    text-decoration: none;
                    cursor: pointer;
                    padding: 0.2rem 1rem;
                    margin-right: 0.5rem;
                    padding-right: 2rem;
            
                    .icon {
                        margin: 0.5rem 1rem;
                    }
            
                    .label {
                        margin-bottom: 0;
                        font-weight: 500;
                        font-size: .9rem;
                    }

                    .c_label {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .count {
                            font-size: 12px;
                        }
                    }
            
                    &:hover {
                        background-color: #00000010;
                        border-top-right-radius: 1.5rem;
                        border-bottom-right-radius: 1.5rem;
                    }
            
                    &.active {
                        border-top-right-radius: 1.5rem;
                        border-bottom-right-radius: 1.5rem;
                    }
                }
            
                .project-status {
                    padding: 1rem;
                }
            }            
	
			.fill-space {
				flex: 1 1 auto;
			}

			.logout-button {
				margin-bottom: 1rem;
			}
		}

		.primary-button {
			margin: 1rem;
			border-radius: 1.5rem;
			height: 2.5rem;
			padding: 0 1rem;
		}
	}

	.content {
		display: flex;
		flex-direction: column;

		.router {
			height: 100%;
			overflow: auto;
		}
    }
    
    .theme-section {
        display: block;
        padding: 0 .5rem; 
        margin-top: 2rem;
        align-self: flex-start;
        border-radius: 1rem;

        .round-light {
            display: inline-block;
            border-radius: 50%;
            height: 30px;
            width: 30px;
            margin: .5rem;
            cursor: pointer;
            background: linear-gradient(315deg, #e6e6e6, #ffffff);
        }
            
        .round-dark {
            display: inline-block;
            border-radius: 50%;
            height: 30px;
            width: 30px;
            margin: .5rem;
            cursor: pointer;
            background: linear-gradient(315deg, #000000, #000000);
        }
    }
}

.divider {
    display: flex;
    align-items: center;
    width: 100%;
    margin: .5rem 0;

    span {
        border: 1px solid #ffffff10;
        padding: 2px 1rem;
        border-radius: 50vw;
        color: #8795a1;
        font-size: 12px;
    }
    .line {
        display: block;
        background-color: #ffffff10;
        height: 1px;
        margin: .5rem 0;
        flex: 1;
    }
}