all repos — website @ 4943e2e871623e6e03eed00550a901763aea6d42

Unnamed repository; edit this file 'description' to name the repository.

src/css/uses.css (view raw)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
 100
 101
 102
 103
 104
 105
 106
 107
 108
 109
 110
 111
 112
 113
 114
 115
 116
 117
 118
 119
 120
 
.uses-category {
	display: flex;
	flex-direction: column;
	background-color: hsl(var(--container-bg));
	padding-bottom: 0;

	&:first-child summary.meta {
		border-radius: 1.35rem 1.35rem 0 0;
	}
	&:last-child:not([open]) summary.meta {
		border-radius: 0 0 1.35rem 1.35rem;
	}
}

.uses-category[open] {
	summary {
		background-color: hsla(var(--surface1) / 0.3);
	}
	.meta-arrow {
		transform: rotate(180deg);
	}
}

.uses-category .meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem;

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

	.meta-arrow {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 2rem;
		height: 2rem;
		color: hsl(var(--subtext1));
		transform-origin: center;
	}

	outline-offset: -2px;

	&:hover,
	&:focus-visible {
		background-color: hsla(var(--surface1) / 0.3);
		cursor: pointer;
		transition: none;
	}

	h3 {
		font-weight: 700;
		font-size: 1.2rem;
	}

	p {
		font-size: 0.9rem;
		color: hsl(var(--subtext1));
		margin-bottom: 0.5rem;
	}
}

.uses-category .items {
	display: flex;
	flex-direction: column;

	.item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 0.5rem;
		padding: 0.2rem 0.5rem;

		background-clip: padding-box;
		border-top: 2px solid hsla(var(--surface0) / 0.25);
		border-bottom: 2px solid transparent;
		margin-top: -2px;

		.label {
			h4 {
				color: hsl(var(--subtext1));
				font-weight: 500;
			}
		}

		.value {
			color: hsl(var(--subtext0));
			font-weight: 400;
			text-align: right;
			.subtext {
				font-size: 0.8rem;
				color: hsla(var(--subtext0) / 0.8);
			}
		}

		&:hover {
			background-color: hsla(var(--surface0) / 1);
			border-bottom: 2px solid hsla(var(--surface1) / 0.5);
			border-top: 2px solid hsla(var(--surface1) / 0.5);

			transition: none;

			&:last-child {
				border-bottom: 2px solid hsla(var(--surface1) / 0.3);
			}

			.label h4,
			.value p,
			.value .subtext {
				color: hsl(var(--text));
				transition: none;
			}
		}
	}
}