Шаблон:ModernButton/styles.css: различия между версиями

Источник — https://wiki.starhorizon.ru/index.php/Шаблон:ModernButton/styles.css

@@ Строка 1: / Строка 1: @@
 .modern-button {
-    position: relative;
+	position: relative;
-    display: flex;
+	display: flex;
-    align-items: center;
+	width: 100%;
-    background: #1B263B;
+	min-width: 45%;
-    border: 1px solid #00D4FF;
+	min-height: 64px;
-    border-radius: 8px;
+	overflow: hidden;
-    padding: 10px;
+	box-shadow: var(--box-shadow-medium);
-    overflow: hidden;
+	transition: all 0.1s ease;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+	border-radius: var(--border-radius-high);
-    color: #FFFFFF;
-    text-decoration: none;
-    font-size: 14px;
 }
-.modern-button:hover {
+.modern-button__image {
-    transform: scale(1.03);
+	position: relative;
-    box-shadow: 0 0 10px rgba(0, 212, 255, 0.7);
+	display: flex;
-    background: linear-gradient(to right, #1B263B, rgba(0, 212, 255, 0.2));
+	align-items: center;
+	padding: 4px;
 }
-.modern-button img {
+.modern-button__content {
-    width: 60px;
+	position: relative;
-    margin-right: 10px;
+	display: flex;
-    transition: transform 0.3s ease;
+	flex-direction: column;
+	justify-content: center;
+	gap: 4px;
+	width: 100%;
+	font-size: var(--font-size-xs);
+	padding: 6px 10px;
+	box-sizing: border-box;
+	background: rgba(var(--color-darkened--rgb), 0.1);
 }
-.modern-button:hover img {
+.modern-button__title {
-    transform: rotate(5deg);
+	font-size: var(--font-size-giant);
+	line-height: 1;
+	font-family: var(--font-family-oswald);
 }
-.modern-button .text {
+.modern-button__subtext {
-    font-weight: 500;
+	font-size: var(--font-size-xs);
-}
-.modern-button .subtext {
-    color: #D3D3D3;
-    font-size: 12px;
 }