Moodle by blankyet

/*==UserStyle==
 * @name				Moodle
 * @description	Amoled, rounded and systemized
 * @author			blankyet <blankyet@noreply.codeberg.org> (//codeberg.org/blankyet)
 * @namespace		about:blank
 * @license			CC-BY-NC-SA-4.0
 * @version			2023.10.05-00
===/UserStyle==*/	@-moz-document regexp("https://.*/moodle/.*")

{@layer --actions , --articles , --document

;&:not(#\6#\9#\e#\6#\2#\1)

{	--easing : ease

;	--time--nano : .06s
;	--time--micro : .18s
;	--time--milli : .3s

;	--number--type : 18
;	--length--base : calc(
		1rem / var(--number--type))

;	--length--line : calc(
		3 * var(--length--base))
;	--length--radius : calc(
		6 * var(--length--base))

;	--type : ui-rounded , ui-sans-serif , system-ui

;	--color--ray : oklch(
		1 none none)
;	--color--air : oklch(
		none none none / 0)
;	--color--abyss : oklch(
		0 none none)

;	--accent : color-mix( in oklch ,
		100% var(--ink) ,
		var(--canvas--accent))
;	--accent--tinted : color-mix( in oklch ,
		30% var(--color--air) ,
		var(--accent))

;	--ink : color-mix( in oklch ,
		90% var(--color--ray) ,
		var(--color--air))
;	--ink--accent : accentcolortext

;	--canvas--accent : accentcolor
;	--canvas--accent--glowed : color-mix( in oklch ,
		30% var(--ink) ,
		var(--canvas--accent))

;	--canvas : color-mix( in oklch ,
		6% var(--color--ray) ,
		var(--color--abyss))
;	--canvas--raised : color-mix( in oklch ,
		30% var(--color--ray) ,
		var(--canvas))
;	--canvas--overlay : color-mix( in oklch ,
		18% var(--color--ray) ,
		var(--color--air))

/*\---------------+
 #    документ    #
 +---------------\*/

;@layer --document

{	font-size :	max(
		var(--number--type) * 1px
	,	100%)
	!	important
;	font-family
	:	var(--type)
	!	important

;	color-scheme
	:	only dark
	!	important
;	scrollbar-color
	:	var(--ink) var(--color--air)
	!	important
;	color
	:	var(--ink)
	!	important
;	border-color
	:	var(--ink)
	!	important
;	background
	:	var(--canvas)
	!	important

;	> *

	{	font-size
		:	inherit
		!	important

}	:not([class *= icon])

	{	font-family
		:	inherit
		!	important

}	*

	{	color
		:	currentcolor
		!	important
	;	border-color
		:	currentcolor
		!	important
	;	background
		:	#0000
		!	important

	;	border-radius
		:	var(--length--radius)
		!	important

	;	text-decoration
		:	none
		!	important

}

/*\---------------+
 #    артикули    #
 +---------------\*/

}@layer --articles

{	.maincalendar .calendar-controls

	{	display
		:	flex
		!	important
	;	align-items
		:	baseline
		!	important

}	.current

	{	flex-grow
		:	1
		!	important

}	.current
,	.next
,	.previous

	{	inline-size
		:	auto
		!	important

}	.fixed-top

	{	background
		:	var(--canvas)
		!	important

}	.message-app
,	.popover-region-container
,	.dropdown-menu

	{	background
		:	var(--canvas--raised)
		!	important

}	.card
,	.border
,	#region-main

	{	border-color
		:	#0000
		!	important
	;	background
		:	var(--canvas--overlay)
		!	important

}	.navbar

	{	border-radius
		:	0
		!	important

}

/*\---------------+
 #    действия    #
 +---------------\*/

}@layer --actions

{	.logo

	{	visibility
		:	hidden
		!	important

	;	> *
		{	visibility
			:	visible
			!	important

}}	:any-link:not(.btn , .list-group-item-action)

	{	transition
		:	var(--time--micro) text-decoration var(--easing) var(--time--nano)
		!	important

	;	color
		:	var(--accent)
		!	important
	;	border-color
		:	#0000
		!	important

	;	text-decoration
		:	var(--length--line) var(--accent--tinted) underline
		!	important
	;	text-underline-offset :	calc(
			-1 * var(--length--line))
		!	important
	;	text-underline-position
		:	under
		!	important
	;	text-decoration-skip-ink
		:	none
		!	important

	;	&:not(:is(:active , :focus-visible , :hover))

		{	text-decoration-color
			:	#0000
			!	important

}}	.btn
,	.list-group-item-action

	{	transition
		:	var(--time--milli) background var(--easing) var(--time--nano)
		!	important

	;	background
		:	var(--canvas--accent)
		!	important
	;	color
		:	var(--ink--accent)
		!	important

	;	&:is(:active , :focus-visible , :hover)

		{	background
			:	var(--canvas--accent--glowed)
			!	important

}}	.list-group-item

	{	:not(:first-child) > &

		{	border-start-start-radius
			:	0
			!	important
		;	border-start-end-radius
			:	0
			!	important

	}	:not(:last-child) > &

		{	border-end-start-radius
			:	0
			!	important
		;	border-end-end-radius
			:	0
			!	important

}}	.input-group

	{	.form-control

		{	border-start-end-radius
			:	0
			!	important
		;	border-end-end-radius
			:	0
			!	important

	}	.btn

		{	border-start-start-radius
			:	0
			!	important
		;	border-end-start-radius
			:	0
			!	important

}}}}}