Template:Infobox buttons/styles.css - Revision history

Muqsit at 19:16, 24 February 2025

2025-02-24T19:16:41Z

← Older revision		Revision as of 19:16, 24 February 2025
Line 10:		Line 10:
	border-radius: 0 0 12px 12px;		border-radius: 0 0 12px 12px;
	color: #fff;		color: #fff;
			}

			.text {
			color: inherit !important;
	}		}

Muqsit at 19:11, 24 February 2025

2025-02-24T19:11:35Z

← Older revision		Revision as of 19:11, 24 February 2025
Line 10:		Line 10:
	border-radius: 0 0 12px 12px;		border-radius: 0 0 12px 12px;
	color: #fff;		color: #fff;
			}

			.infobox-extlink-button a.external {
			background-image: none !important;
	}		}

Muqsit: Undo revision 182 by Muqsit (talk)

2025-02-24T18:34:22Z

Undo revision 182 by Muqsit (talk)

@@ Line 1: / Line 1: @@
-/* Simple Button */
+/* Infobox button */
 .infobox-button {
-    display: inline-block;
+	position: relative;
+}
 .infobox-extlink-button {
-    display: inline-block;
+	display: block;
-    padding: 10px 20px;
+	padding: 10px 20px;
-    background-color: #4CAF50; /* Green background */
+	background: var( --color-progressive );
-    color: white;
+	border-radius: 0 0 12px 12px;
-    text-decoration: none;
+	color: #fff;
+}
-.infobox-extlink-button:hover {
+.infobox-extlink-button-icon {
-     background-color: #45a049; /* Darker green */
+	margin-right: 8px;
+}

Muqsit at 18:30, 24 February 2025

2025-02-24T18:30:30Z

@@ Line 1: / Line 1: @@
-/* Infobox button */
+/* Simple Button */
 .infobox-button {
-	position: relative;
+    display: inline-block;
+}
 .infobox-extlink-button {
-	display: block;
+    display: inline-block;
-	padding: 10px 20px;
+    padding: 10px 20px;
-	background: var( --color-progressive );
+    background-color: #4CAF50; /* Green background */
-	border-radius: 0 0 12px 12px;
+    color: white;
-	color: #fff;
+    text-decoration: none;
+}
-.infobox-extlink-button-icon {
+.infobox-extlink-button:hover {
-	margin-right: 8px;
+     background-color: #45a049; /* Darker green */
+}

Muqsit at 17:21, 24 February 2025

2025-02-24T17:21:17Z

← Older revision		Revision as of 17:21, 24 February 2025
Line 23:		Line 23:
	overflow: hidden;		overflow: hidden;
	width: 100%;		width: 100%;
	/*padding-top: var( --space-md );		padding-top: var( --space-md );
	padding-bottom: var( --space-xs );*/		padding-bottom: var( --space-xs );
	background: var( --color-surface-1 );		background: var( --color-surface-1 );
	/*border-radius: var( --border-radius-medium );		border-radius: var( --border-radius-medium );
	box-shadow: var( --box-shadow-drop-xx-large );*/		box-shadow: var( --box-shadow-drop-xx-large );
	opacity: 0;		opacity: 0;
	text-align: left;		text-align: left;
Line 50:		Line 50:
	padding: 0 15px;		padding: 0 15px;
	margin: 5px 0;		margin: 5px 0;
	/color: var( --color-subtle );/		color: var( --color-subtle );
	font-size: 0.8125rem;		font-size: 0.8125rem;
	font-weight: normal;		font-weight: normal;

Muqsit: Created page with "/* Infobox button / .infobox-button { position: relative; } .infobox-extlink-button { display: block; padding: 10px 20px; background: var( --color-progressive ); border-radius: 0 0 12px 12px; color: #fff; } .infobox-extlink-button-icon { margin-right: 8px; filter: invert( 1 ); } / Popup card / .infobox-extlink-list { position: absolute; z-index: -1; overflow: hidden; width: 100%; /padding-top: var( --space-md ); padding-bottom: var( --space-xs );*/..."

2025-02-24T16:00:21Z

Created page with "Infobox button: .infobox-button { position: relative; } .infobox-extlink-button { display: block; padding: 10px 20px; background: var( --color-progressive ); border-radius: 0 0 12px 12px; color: #fff; } .infobox-extlink-button-icon { margin-right: 8px; filter: invert( 1 ); } Popup card: .infobox-extlink-list { position: absolute; z-index: -1; overflow: hidden; width: 100%; padding-top: var( --space-md ); padding-bottom: var( --space-xs );: ..."

New page

/* Infobox button */
.infobox-button {
position: relative;
}

.infobox-extlink-button {
display: block;
padding: 10px 20px;
background: var( --color-progressive );
border-radius: 0 0 12px 12px;
color: #fff;
}

.infobox-extlink-button-icon {
margin-right: 8px;
filter: invert( 1 );
}

/* Popup card */
.infobox-extlink-list {
position: absolute;
z-index: -1;
overflow: hidden;
width: 100%;
/*padding-top: var( --space-md );
padding-bottom: var( --space-xs );*/
background: var( --color-surface-1 );
/*border-radius: var( --border-radius-medium );
box-shadow: var( --box-shadow-drop-xx-large );*/
opacity: 0;
text-align: left;
transition: transform 250ms ease, opacity 250ms ease;
visibility: hidden;
transform: translateY( -20px );
}

.infobox-extlink-list p {
margin-bottom: 0;
}

.infobox-button:hover .infobox-extlink-list {
z-index: 10;
opacity: 1;
visibility: visible;
transform: none;
}

.infobox-extlink-title {
display: block;
padding: 0 15px;
margin: 5px 0;
/*color: var( --color-subtle );*/
font-size: 0.8125rem;
font-weight: normal;
letter-spacing: 0.75px;
}

.infobox-extlink-list ul {
display: flex;
flex-wrap: wrap;
padding: 0 5px;
margin: 0 0 10px 0;
list-style: none;
}

.infobox-extlink a.external {
display: block;
/* Override external link and file icons */
padding: 5px 10px;
background-image: none;
border-radius: 4px;
transition: background 0.2s ease, color 0.2s ease;
}

.infobox-extlink a:hover {
background-color: var( --background-color-button-quiet--hover );
}

.infobox-extlink a:active {
background-color: var( --background-color-button-quiet--active );
}

.infobox-extlink-title:before {
position: absolute;
z-index: -1;
right: 20px;
display: block;
width: 120px;
height: 120px;
margin-top: 5px;
background-position: top right;
background-repeat: no-repeat;
background-size: contain;
opacity: 0.1;
}

/* Dark mode */
html.skin-citizen-dark .infobox-extlink-title:before {
filter: invert( 1 );
}