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

96flo в 14:02, 31 мая 2025

2025-05-31T14:02:20Z

← Предыдущая версия		Версия от 14:02, 31 мая 2025
Строка 1:		Строка 1:
	.tooltip~~-container~~ {		.tooltip {
	position: relative;		position: relative;
	display: inline-~~block~~;		display: inline;
			}

			.tooltiptext {
			position: absolute;
			min-width: 240px;
			max-width: 100%;
			left: -240px;
			right: -240px;
			top: 125%;
			margin-left: auto;
			margin-right: auto;
			z-index: 99;
			padding: 22px;
			visibility: hidden;
			opacity: 0;
			transform: translateY(10px);
			transition: opacity 0.3s ease, transform 0.3s ease;
			border: 1px solid #402e75;
			border-radius: 1.4rem;
			background: rgba(20, 24, 31, 0.5);
	}		}

	.tooltip {		.tooltip:hover > .tooltiptext {
	~~position~~: ~~relative~~;		visibility: visible;
	~~cursor~~: ~~pointer~~;		opacity: 1;
			transform: translateY(0);
	}		}

	.~~tooltiptext~~ {		@media screen and (min-width: 851px) {
	~~visibility~~: ~~hidden~~;		.mobile {
	~~width: 120px;~~		display: none;
	~~background-color: black;~~		}
	~~color~~: ~~white~~;
	~~text-align~~: ~~center~~;		.headder {
	~~border~~-~~radius~~: ~~6px~~;		width: 25%;
	~~padding: 5px;~~		float: right;
	~~position: absolute;~~		margin-left: 1em;
	~~z-index: 1;~~		}
	~~bottom~~: ~~125%~~;
	~~left~~: ~~50%~~;		.stiky {
	~~margin-left: -60px;~~		position: sticky;
			top: 0.1em;
			}
	}		}

	.tooltip:~~hover~~ .tooltiptext {		@media screen and (max-width: 850px) {
	~~visibility~~: ~~visible~~;		.nomobile {
			display: none !important;
			}

			.headder {
			width: 100%;
			margin-left: 0;
			}

			.tooltip {
			position: static;
			}

			.tooltiptext {
			position: fixed !important;
			width: 80vw !important;
			top: 40vh !important;
			left: 0 !important;
			margin: 0 auto !important;
			right: 0 !important;
			}

			.mobile-image img {
			width: 32px;
			height: 32px;
			}
	}		}

96flo в 13:37, 31 мая 2025

2025-05-31T13:37:03Z

@@ Строка 1: / Строка 1: @@
 .tooltip {
-    position: relative;
+  position: relative;
-    display: inline;
+  cursor: pointer;
+}
 .tooltiptext {
-    position: absolute;
+  visibility: hidden;
-    min-width: 240px;
+  width: 120px;
-    max-width: 100%;
+  background-color: black;
-    left: -240px;
+  color: white;
-    right: -240px;
+  text-align: center;
-    top: 125%;
+  border-radius: 6px;
-    margin-left: auto;
+  padding: 5px;
-    margin-right: auto;
+  position: absolute;
-    z-index: 99;
+  z-index: 1;
-    padding: 22px;
+  bottom: 125%;
-    visibility: hidden;
+  left: 50%;
-    opacity: 0;
+  margin-left: -60px;
+}
-@media screen and (max-width: 850px) {
+.tooltip:hover .tooltiptext {
-    .nomobile {
+  visibility: visible;
+}

96flo: Новая страница: «.tooltip { position: relative; display: inline; } .tooltiptext { position: absolute; min-width: 240px; max-width: 100%; left: -240px; right: -240px; top: 125%; margin-left: auto; margin-right: auto; z-index: 99; padding: 22px; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; border: 1px solid #402e75; border-radius: 1.4rem;...»

2025-05-31T13:17:09Z

Новая страница: «.tooltip { position: relative; display: inline; } .tooltiptext { position: absolute; min-width: 240px; max-width: 100%; left: -240px; right: -240px; top: 125%; margin-left: auto; margin-right: auto; z-index: 99; padding: 22px; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; border: 1px solid #402e75; border-radius: 1.4rem;...»

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

.tooltip {
position: relative;
display: inline;
}

.tooltiptext {
position: absolute;
min-width: 240px;
max-width: 100%;
left: -240px;
right: -240px;
top: 125%;
margin-left: auto;
margin-right: auto;
z-index: 99;
padding: 22px;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease;
border: 1px solid #402e75;
border-radius: 1.4rem;
background: rgba(20, 24, 31, 0.5);
}

.tooltip:hover > .tooltiptext {
visibility: visible;
opacity: 1;
transform: translateY(0);
}

@media screen and (min-width: 851px) {
.mobile {
display: none;
}

.headder {
width: 25%;
float: right;
margin-left: 1em;
}

.stiky {
position: sticky;
top: 0.1em;
}
}

@media screen and (max-width: 850px) {
.nomobile {
display: none !important;
}

.headder {
width: 100%;
margin-left: 0;
}

.tooltip {
position: static;
}

.tooltiptext {
position: fixed !important;
width: 80vw !important;
top: 40vh !important;
left: 0 !important;
margin: 0 auto !important;
right: 0 !important;
}

.mobile-image img {
width: 32px;
height: 32px;
}
}