flake/modules/wm/ags/style.css

* {
	font-family: monospace;
	padding: 0;
	margin: 0;
}

button {
	all: unset;
}

/* Colors */
.transparent {
	background-color: rgba(0, 0, 0, 0.6);
}
.bgcont {
	background-color: #1E1E2E;
	border: 1px solid #11111B;
}
.surface {
	background-color: #11111B;
	color: #CDD6F4;
}
.accent {
	background-color: #94e2d5;
	color: #1e1e2e;
}
.accent-rev {
	color: #94e2d5;
	background-color: #1e1e2e;
}
.secondary {
	background-color: #cba6f7;
	color: #1e1e2e;
}
.red {
	color: #F38BA8;
}
.green {
	color: #A6E3A1;
}

/* Misc */
.bold {
	font-weight: bold;
}
.f16 {
	font-size: 16px;
}
.round {
	border-radius: 50%;
}
.r20 {
	border-radius: 20px;
}
.r100 {
	border-radius: 100px;
}
.p10 {
	padding: 10px;
}

separator {
	border-radius: 10px;
	min-height: 1px;
	min-width: 1px;
}

/* Slider */
slider {
	box-shadow: none;
	background-color: transparent;
	border: 1px solid transparent;
	transition: 200ms;
	min-height: 1rem;
	border-radius: 100px;
}
trough {
	transition: 200ms;
	border: 1px;
	background-color: #000;
	border-radius: 100px;
}
highlight, fill {
	background-color: #94e2d5;
	border-radius: 100px;
	transition: 200ms;
}
mark {
	background-color: #F38BA8;
	min-width: 1px;
	min-height: 3px;
}

switch {
	background-color: #1E1E2E;
	border-radius: 100px;
}

switch slider {
	all: unset;
	transition: 200ms;
	background-color: #94e2d5;
	border-radius: 100px;
	min-width: 1rem;
	min-height: 1rem;
}

switch image {
	all: unset;
	color: transparent;
}

/* Bar */
.module {
	padding: 1px 10px;
	margin: 0 4px;
}
.tags {
	min-width: 2rem;
}
.qs-item {
	padding: 3px;
}

/* On Screen Display */
.osd {
	border-radius: 20px;
	margin-bottom: 150px;
	min-width: 175px;
	min-height: 30px;
}

/* Quick settings */
.qs-container {
	min-width: 400px;
	padding: 25px;
	margin: 10px;
	border-radius: 20px;
}
.qs-button {
	padding: 0px;
	margin: 5px;
	border-radius: 20px;
	min-width: 225px;
	min-height: 75px;
	transition: background-color 0.3s ease-in-out;
	transition: color 0.3s ease-in-out;
}
.qs-icon {
	padding: 12px;
}

.qs-slider > * {
	margin: 5px;
}

.qs-submenu {
	margin-top: 8px;
	margin-bottom: 8px;
	padding: 12px;
	border-radius: 20px;
}
.qs-sub-title {
	padding: 14px 20px;
	border-radius: 100px;
	margin-bottom: 8px;
}
.qs-sub-title > *:first-child {
	margin-right: 14px;
}
.qs-sub-content image {
	margin-right: 8px;
}

.qs-sub-content > * {
	margin: 6px;
}

.qs-sub-sub-content > * {
	margin: 6px 0px;
}

.avatar {
	border-radius: 50%;
	min-width: 70px;
	min-height: 70px;
	background-size: cover;
}

.sys-button {
	min-width: 40px;
	min-height: 40px;
	border-radius: 15px;
}

.mpris-cover-art {
	background-size: cover;
	background-position: center;
	margin: 10px 0;
	min-height: 205px;
	border-radius: 20px;
	transition: all 0.2s;
}
.mpris-cover-art > * {
	padding: 20px;
}
.mpris-play {
	min-width: 60px;
	min-height: 60px;
	border-radius: 20px;
	padding: 0;
	transition: all 0.3s;
}
.mpris-position-slider {
	margin: 0 10px;
}
.mpris-position-slider trough {
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.6);
	min-height: 4px;
}
.mpris-position-slider highlight, .mpris-position-slider progress {
	background-color: #fff;
	border-radius: 100px;
}

.mpris-position-slider slider {
	border-radius: 100px;
	min-height: 4px;
	min-width: 4px;
	background-color: #fff;
}