Шаблон:PageButton/styles.css - История изменений

Weekend943 в 23:49, 24 декабря 2025

2025-12-24T23:49:04Z

← Предыдущая версия		Версия от 23:49, 24 декабря 2025
Строка 57:		Строка 57:
	display: inline-flex;		display: inline-flex;
	justify-content: center;		justify-content: center;
	~~vertical-align: middle;~~
	width: 100%;		width: 100%;
	}		}

Weekend943: test

2025-12-24T23:46:27Z

test

← Предыдущая версия		Версия от 23:46, 24 декабря 2025
Строка 38:		Строка 38:
	display: inline-flex;		display: inline-flex;
	justify-content: center;		justify-content: center;
	~~vertical-align: middle;~~
	background-color: var(--color-tmp-10);		background-color: var(--color-tmp-10);
	transition-property: background-color;		transition-property: background-color;
Строка 58:		Строка 57:
	display: inline-flex;		display: inline-flex;
	justify-content: center;		justify-content: center;
			vertical-align: middle;
	width: 100%;		width: 100%;
	}		}

Weekend943: test

2025-12-24T23:44:54Z

test

← Предыдущая версия		Версия от 23:44, 24 декабря 2025
Строка 38:		Строка 38:
	display: inline-flex;		display: inline-flex;
	justify-content: center;		justify-content: center;
			vertical-align: middle;
	background-color: var(--color-tmp-10);		background-color: var(--color-tmp-10);
	transition-property: background-color;		transition-property: background-color;

Weekend943 в 19:49, 24 декабря 2025

2025-12-24T19:49:52Z

← Предыдущая версия		Версия от 19:49, 24 декабря 2025
Строка 72:		Строка 72:
	font-weight: bold;		font-weight: bold;
	white-space: nowrap;		white-space: nowrap;
			background-color: hsl(from var(--color-tmp-75) h var(--adjust-s) var(--adjust-bg-l));
	color: var(--color-white) !important;		color: var(--color-white) !important;
			border-top: 1px solid hsl(from var(--color-tmp-75) h var(--adjust-s) var(--adjust-bd-l));
	transition-property: background-color, border;		transition-property: background-color, border;
	transition-duration: var(--pagebutton-transition);		transition-duration: var(--pagebutton-transition);

Weekend943 в 19:49, 24 декабря 2025

2025-12-24T19:49:30Z

← Предыдущая версия		Версия от 19:49, 24 декабря 2025
Строка 72:		Строка 72:
	font-weight: bold;		font-weight: bold;
	white-space: nowrap;		white-space: nowrap;
	~~background-color: hsl(from var(--color-tmp-75) h var(--adjust-s) var(--adjust-bg-l));~~
	color: var(--color-white) !important;		color: var(--color-white) !important;
	~~border-top: 1px solid hsl(from var(--color-tmp-75) h var(--adjust-s) var(--adjust-bd-l));~~
	transition-property: background-color, border;		transition-property: background-color, border;
	transition-duration: var(--pagebutton-transition);		transition-duration: var(--pagebutton-transition);

Weekend943 в 18:31, 24 декабря 2025

2025-12-24T18:31:57Z

← Предыдущая версия		Версия от 18:31, 24 декабря 2025
Строка 71:		Строка 71:
	height: calc(1.25rem + 1px);		height: calc(1.25rem + 1px);
	font-weight: bold;		font-weight: bold;
			white-space: nowrap;
			background-color: hsl(from var(--color-tmp-75) h var(--adjust-s) var(--adjust-bg-l));
	color: var(--color-white) !important;		color: var(--color-white) !important;
			border-top: 1px solid hsl(from var(--color-tmp-75) h var(--adjust-s) var(--adjust-bd-l));
			transition-property: background-color, border;
			transition-duration: var(--pagebutton-transition);
	}		}

Weekend943: test

2025-12-24T18:31:28Z

test

← Предыдущая версия		Версия от 18:31, 24 декабря 2025
Строка 71:		Строка 71:
	height: calc(1.25rem + 1px);		height: calc(1.25rem + 1px);
	font-weight: bold;		font-weight: bold;
	~~white-space: nowrap;~~
	~~background-color: hsl(from var(--color-tmp-75) h var(--adjust-s) var(--adjust-bg-l));~~
	color: var(--color-white) !important;		color: var(--color-white) !important;
	~~border-top: 1px solid hsl(from var(--color-tmp-75) h var(--adjust-s) var(--adjust-bd-l));~~
	~~transition-property: background-color, border;~~
	~~transition-duration: var(--pagebutton-transition);~~
	}		}

Weekend943: test

2025-12-23T18:08:14Z

test

← Предыдущая версия		Версия от 18:08, 23 декабря 2025
Строка 1:		Строка 1:
	.pagebutton {		.pagebutton {
			--pagebutton-transition: calc(var(--transition-time) * 2);
			--color-tmp-100: var(--tmp-100);
			--color-tmp-75: var(--tmp-75);
			--color-tmp-50: var(--tmp-50);
			--color-tmp-25: var(--tmp-25);
			--color-tmp-10: var(--tmp-10);

	user-select: none;		user-select: none;
	position: relative;		position: relative;
Строка 5:		Строка 12:
	flex-direction: column;		flex-direction: column;
	overflow: hidden;		overflow: hidden;
	~~position: relative;~~		outline: 1px outset var(--color-tmp-25);
	~~margin: 0.25em;~~
	outline: 1px outset var(--~~pagebutton~~-~~light~~);
	border-radius: var(--border-radius-small);		border-radius: var(--border-radius-small);
	transition-property: box-shadow, transform;		transition-property: box-shadow, outline-color, transform;
	transition-duration: ~~calc(~~var(--transition~~-time) * 2~~);		transition-duration: var(--pagebutton-transition);
	transition-timing-function: var(--linear-bounce);		transition-timing-function: var(--linear-bounce);
	z-index: 1;		z-index: 1;
Строка 16:		Строка 21:

	.pagebutton:hover {		.pagebutton:hover {
	box-shadow: 0 0.2rem 0.4rem var(--~~pagebutton~~-~~primary~~);		--pagebutton-transition: var(--transition-time);
			--color-tmp-100: var(--hover-100, var(--tmp-100));
			--color-tmp-75: var(--hover-75, var(--tmp-75));
			--color-tmp-50: var(--hover-50, var(--tmp-50));
			--color-tmp-25: var(--hover-25, var(--tmp-25));
			--color-tmp-10: var(--hover-10, var(--tmp-10));

			box-shadow: 0 0.2rem 0.4rem var(--color-tmp-75);
	transform: translateY(-0.25rem);		transform: translateY(-0.25rem);
	~~transition-duration: var(--transition-time);~~
	transition-timing-function: ease;		transition-timing-function: ease;
	z-index: 2;		z-index: 2;
Строка 24:		Строка 35:

	.pagebutton-image {		.pagebutton-image {
			flex: 1;
	display: inline-flex;		display: inline-flex;
	justify-content: center;		justify-content: center;
	background-color: var(--pagebutton-~~transparent~~);		background-color: var(--color-tmp-10);
			transition-property: background-color;
			transition-duration: var(--pagebutton-transition);
	}		}

Строка 35:		Строка 49:

	.pagebutton:active .pagebutton-image a {		.pagebutton:active .pagebutton-image a {
	filter: drop-shadow(0 0 6px var(--~~pagebutton~~-~~primary~~));		filter: drop-shadow(0 0 6px var(--color-tmp-75));
	transition-duration: 0s;		transition-duration: 0s;
	}		}
Строка 51:		Строка 65:

	.pagebutton-text {		.pagebutton-text {
	display: ~~contents~~;		overflow: hidden;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			height: calc(1.25rem + 1px);
			font-weight: bold;
			white-space: nowrap;
			background-color: hsl(from var(--color-tmp-75) h var(--adjust-s) var(--adjust-bg-l));
			color: var(--color-white) !important;
			border-top: 1px solid hsl(from var(--color-tmp-75) h var(--adjust-s) var(--adjust-bd-l));
			transition-property: background-color, border;
			transition-duration: var(--pagebutton-transition);
	}		}

	.pagebutton-text a {		.pagebutton-text a {
	~~overflow: hidden;~~		color: var(--color-white) !important;
	~~display: inline-flex;~~
	~~align-items: center;~~
	~~justify-content: center;~~
	~~height: calc(1.25rem + 1px);~~
	~~font-weight: bold;~~
	~~white-space: nowrap;~~
	~~background-color: hsl(from var(--pagebutton-primary) h var(--adjust-s) var(--adjust-bg-l));~~
	color: var(--color-white) !important;
	~~border-top: 1px solid hsl(from var(--pagebutton-primary) h var(--adjust-s) var(--adjust-bd-l))~~;
	}		}

Kar4es: тесты

2025-06-01T07:08:35Z

тесты

Новая страница

.pagebutton {
user-select: none;
position: relative;
display: inline-flex;
flex-direction: column;
overflow: hidden;
position: relative;
margin: 0.25em;
outline: 1px outset var(--pagebutton-light);
border-radius: var(--border-radius-small);
transition-property: box-shadow, transform;
transition-duration: calc(var(--transition-time) * 2);
transition-timing-function: var(--linear-bounce);
z-index: 1;
}

.pagebutton:hover {
box-shadow: 0 0.2rem 0.4rem var(--pagebutton-primary);
transform: translateY(-0.25rem);
transition-duration: var(--transition-time);
transition-timing-function: ease;
z-index: 2;
}

.pagebutton-image {
display: inline-flex;
justify-content: center;
background-color: var(--pagebutton-transparent);
}

.pagebutton-image a {
transition-property: filter;
transition-duration: var(--transition-time);
}

.pagebutton:active .pagebutton-image a {
filter: drop-shadow(0 0 6px var(--pagebutton-primary));
transition-duration: 0s;
}

.pagebutton-image a,
.pagebutton-image span {
display: inline-flex;
justify-content: center;
width: 100%;
}

.pagebutton-image img {
padding: 0.5em;
}

.pagebutton-text {
display: contents;
}

.pagebutton-text a {
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
height: calc(1.25rem + 1px);
font-weight: bold;
white-space: nowrap;
background-color: hsl(from var(--pagebutton-primary) h var(--adjust-s) var(--adjust-bg-l));
color: var(--color-white) !important;
border-top: 1px solid hsl(from var(--pagebutton-primary) h var(--adjust-s) var(--adjust-bd-l));
}

.pagebutton-text a:before {
content: '';
position: absolute;
inset: 0;
}