MediaWiki:Commontablo4.css - Revizyon geçmişi

Fenpedia 01.56, 25 Ağustos 2026 tarihinde

2026-08-25T01:56:26Z

Fenpedia 01.15, 25 Ağustos 2026 tarihinde

2026-08-25T01:15:01Z

← Önceki sürüm		04.15, 25 Ağustos 2026 tarihindeki hâli
1. satır:		1. satır:
	/* ~~MediaWiki:commontablo4.css - Güvenli ve İzole Versiyon~~ */		/* Orijinal Kırmızı Konuşma Balonları */

	~~/* Ortak özellikler ve değişken kapsamı */~~		.bubble-k {
	~~.bubble-k,~~ .bubble-k~~-sh,~~		height: 25px;
	~~.bubble-t, .bubble-t-sh,~~		vertical-align: text-top;
	~~.bubble-y, .bubble-y-sh,~~
	~~.bubble-m, .bubble-m-sh,~~
	~~.bubble, .bubble-sh~~ {
	~~/* Değişkenler sadece bu balon sınıfları içinde geçerlidir */~~
	~~--bubble-red~~: ~~#faaaaa~~;
	-~~-bubble-yellow: #fce083;~~
	~~--bubble-green~~: ~~#aafa9d;~~
	-~~-bubble-blue: #81bffc;~~
	~~--bubble-gray: #ddd;~~
	~~--bubble-shadow: 0 0 5px #B2B2B2;~~

	~~min-height: 25px~~;
	position: relative;		position: relative;
			background: #faaaaa;
	border-radius: 20px;		border-radius: 20px;
	padding: 15px;		padding: 15px;
	~~vertical-align: text-top;~~
	}		}

	~~/* Renk Atamaları */~~		.bubble-altsag-k:before {
	~~.bubble-k, .bubble-k-sh { background-color: var(--bubble-red); }~~
	~~.bubble-t, .bubble-t-sh { background-color: var(--bubble-yellow); }~~
	~~.bubble-y, .bubble-y-sh { background-color: var(--bubble-green); }~~
	~~.bubble-m, .bubble-m-sh { background-color: var(--bubble-blue); }~~
	~~.bubble, .bubble-sh { background-color: var(--bubble-gray); }~~

	~~/* Gölge Efektleri */~~
	~~.bubble-k-sh, .bubble-t-sh, .bubble-y-sh, .bubble-m-sh, .bubble-sh {~~
	~~box-shadow: var(--bubble-shadow);~~
	}

	~~/* Kuyruk Yapıları - currentColor kullanımı sayesinde değişkenlere bağımlılık azalır */~~
	.bubble-altsag-k~~:before, .bubble-altsag-t:before, .bubble-altsag-y:before,~~
	~~.bubble-altsag-m:before, .bubble-altsag-golge:before,~~
	~~.bubble-alt-k:before, .bubble-alt-t:before, .bubble-alt-y:before,~~
	~~.bubble-alt-m:before, .bubble-alt-golge~~:before {
	content: "";		content: "";
	width: 0; height: 0;		width: 0px;
			height: 0px;
	position: absolute;		position: absolute;
			border-left: 6px solid transparent;
			border-right: 12px solid #faaaaa;
			border-top: 6px solid #faaaaa;
			border-bottom: 10px solid transparent;
			right: 32px;
	bottom: -14px;		bottom: -14px;
	~~border: 6px solid transparent;~~
	}		}

	~~/* Kuyruk Yönleri ve Renk Eşleşmeleri */~~		.bubble-alt-k:before {
	.bubble-~~altsag~~-k:before~~, .bubble-altsag-t~~:~~before, .bubble-altsag-y~~:~~before, .bubble-altsag-m~~:~~before, .bubble-altsag-golge:before {~~		content: "";
	~~right~~: ~~32px~~;		width: 0px;
	border-~~right-width~~: 12px;		height: 0px;
	border-right~~-color~~: ~~inherit~~; ~~/* Arka plan rengini otomatik alır */~~		position: absolute;
	border-top~~-color~~: ~~inherit~~;		border-left: 12px solid #faaaaa;
	}		border-right: 6px solid transparent;
			border-top: 6px solid #faaaaa;
	~~.bubble~~-~~alt-k~~:~~before, .bubble-alt-t:before, .bubble-alt-y:before, .bubble-alt-m:before, .bubble-alt-golge:before {~~		border-bottom: 10px solid transparent;
	left: 32px;		left: 32px;
	~~border-left-width~~: ~~12px;~~		bottom: -14px;
	~~border-left~~-~~color: inherit;~~
	~~border-top-color: inherit~~;
	}		}

	~~/* Yan Kuyruklar */~~		.bubble-yan-k:before {
	.bubble-yan-k:before~~, .bubble-yan-t:before, .bubble-yan-y:before,~~		background-color: #faaaaa;
	~~.bubble-yan-m:before, .bubble~~-~~yan-golge~~:~~before {~~
	content: "\00a0";		content: "\00a0";
	display: block;		display: block;
	height: 18px;		height: 18px;
	~~width: 17px;~~
	position: absolute;		position: absolute;
	top: 13px;		top: 13px;
	transform: rotate(45deg);		transform: rotate( 45deg ) ;
	~~background~~-~~color~~: ~~inherit~~; ~~/* Rengi üst klasörden~~ (~~parent~~) ~~miras alır */~~		-moz-transform: rotate( 45deg ) ;
			-ms-transform: rotate( 45deg ) ;
			-o-transform: rotate( 45deg ) ;
			-webkit-transform: rotate( 45deg ) ;
			width: 17px;
	}		}

	~~/* Konumlandırma */~~		.bubble-k-sh {
	.~~me, .you~~ { ~~margin~~: ~~5px 15px~~; }		height: 25px;
	~~.me~~::~~before { left~~: ~~-6px~~; }		vertical-align: text-top;
	~~.you~~::~~before { right~~: ~~-6px~~; }		box-shadow: 0 0 5px #B2B2B2;
			position: relative;
			background: #faaaaa;
			border-radius: 20px;
			padding: 15px;
			}

Fenpedia 00.56, 25 Ağustos 2026 tarihinde

2026-08-25T00:56:06Z

← Önceki sürüm		03.56, 25 Ağustos 2026 tarihindeki hâli
1. satır:		1. satır:
	/* MediaWiki:commontablo4.css - ~~Optimize Edilmiş~~ Versiyon */		/* MediaWiki:commontablo4.css - Güvenli ve İzole Versiyon */

	/* 1. ~~Renk Değişkenleri~~ - ~~Buradan renkleri kolayca değiştirebilirsiniz~~ */		/* Ortak özellikler ve değişken kapsamı */
	~~:root {~~		.bubble-k, .bubble-k-sh,
			.bubble-t, .bubble-t-sh,
			.bubble-y, .bubble-y-sh,
			.bubble-m, .bubble-m-sh,
			.bubble, .bubble-sh {
			/* Değişkenler sadece bu balon sınıfları içinde geçerlidir */
	--bubble-red: #faaaaa;		--bubble-red: #faaaaa;
	--bubble-yellow: #fce083;		--bubble-yellow: #fce083;
9. satır:		14. satır:
	--bubble-gray: #ddd;		--bubble-gray: #ddd;
	--bubble-shadow: 0 0 5px #B2B2B2;		--bubble-shadow: 0 0 5px #B2B2B2;
	}

	~~/* 2. Ortak Balon Yapısı - Tüm balonların paylaştığı özellikler */~~		min-height: 25px;
	~~.bubble-k, .bubble-k-sh,~~
	~~.bubble-t, .bubble-t-sh,~~
	~~.bubble-y, .bubble-y-sh,~~
	~~.bubble-m, .bubble-m-sh,~~
	~~.bubble, .bubble~~-~~sh {~~
	height: 25px; ~~/* Sabit height yerine min-height daha güvenlidir */~~
	position: relative;		position: relative;
	border-radius: 20px;		border-radius: 20px;
24. satır:		22. satır:
	}		}

	/* 3. Renk Atamaları */		/* Renk Atamaları */
	.bubble-k, .bubble-k-sh { background-color: var(--bubble-red); }		.bubble-k, .bubble-k-sh { background-color: var(--bubble-red); }
	.bubble-t, .bubble-t-sh { background-color: var(--bubble-yellow); }		.bubble-t, .bubble-t-sh { background-color: var(--bubble-yellow); }
31. satır:		29. satır:
	.bubble, .bubble-sh { background-color: var(--bubble-gray); }		.bubble, .bubble-sh { background-color: var(--bubble-gray); }

	/* 4. Gölge Efektleri */		/* Gölge Efektleri */
	.bubble-k-sh, .bubble-t-sh, .bubble-y-sh, .bubble-m-sh, .bubble-sh {		.bubble-k-sh, .bubble-t-sh, .bubble-y-sh, .bubble-m-sh, .bubble-sh {
	box-shadow: var(--bubble-shadow);		box-shadow: var(--bubble-shadow);
	}		}

	/* 5. Kuyruk Yapıları ~~(Pseudo~~-~~elements) */~~		/* Kuyruk Yapıları - currentColor kullanımı sayesinde değişkenlere bağımlılık azalır */

	~~/* Alt Sağ Kuyruklar~~ */
	.bubble-altsag-k:before, .bubble-altsag-t:before, .bubble-altsag-y:before,		.bubble-altsag-k:before, .bubble-altsag-t:before, .bubble-altsag-y:before,
	.bubble-altsag-m:before, .bubble-altsag-golge:before {		.bubble-altsag-m:before, .bubble-altsag-golge:before,
			.bubble-alt-k:before, .bubble-alt-t:before, .bubble-alt-y:before,
			.bubble-alt-m:before, .bubble-alt-golge:before {
	content: "";		content: "";
	width: 0; height: 0;		width: 0; height: 0;
	position: absolute;		position: absolute;
			bottom: -14px;
			border: 6px solid transparent;
			}

			/* Kuyruk Yönleri ve Renk Eşleşmeleri */
			.bubble-altsag-k:before, .bubble-altsag-t:before, .bubble-altsag-y:before, .bubble-altsag-m:before, .bubble-altsag-golge:before {
	right: 32px;		right: 32px;
	~~bottom:~~ -~~14px;~~		border-right-width: 12px;
	~~border~~-~~left~~: ~~6px solid transparent~~;		border-right-color: inherit; /* Arka plan rengini otomatik alır */
	border-right: ~~12px solid currentColor~~; /* ~~Rengi~~ otomatik ~~ebeveynden~~ alır */		border-top-color: inherit;
	border-top~~: 6px solid currentColor;~~
	~~border~~-~~bottom~~: ~~10px solid transparent~~;
	}		}

	~~/* Alt Sol Kuyruklar */~~		.bubble-alt-k:before, .bubble-alt-t:before, .bubble-alt-y:before, .bubble-alt-m:before, .bubble-alt-golge:before {
	.bubble-alt-k:before, .bubble-alt-t:before, .bubble-alt-y:before,
	.bubble-alt-m:before, .bubble-alt-golge:before {
	~~content: "";~~
	~~width: 0; height: 0;~~
	~~position: absolute;~~
	left: 32px;		left: 32px;
	~~bottom: -14px;~~		border-left-width: 12px;
	border-left: 12px ~~solid currentColor~~;		border-left-color: inherit;
	border-~~right~~: ~~6px solid transparent~~;		border-top-color: inherit;
	border-top~~: 6px solid currentColor;~~
	~~border~~-~~bottom~~: ~~10px solid transparent~~;
	}		}

	~~/* Renklerin kuyruklara uygulanması (currentColor için gerekli) */~~
	~~.bubble-altsag-k:before, .bubble-alt-k:before { color: var(--bubble-red); }~~
	~~.bubble-altsag-t:before, .bubble-alt-t:before { color: var(--bubble-yellow); }~~
	~~.bubble-altsag-y:before, .bubble-alt-y:before { color: var(--bubble-green); }~~
	~~.bubble-altsag-m:before, .bubble-alt-m:before { color: var(--bubble-blue); }~~
	~~.bubble-altsag-golge:before, .bubble-alt-golge:before { color: var(--bubble-gray); }~~

	/* Yan Kuyruklar */		/* Yan Kuyruklar */
82. satır:		70. satır:
	position: absolute;		position: absolute;
	top: 13px;		top: 13px;
	transform: rotate(45deg); ~~/* Prefixler kaldırıldı */~~		transform: rotate(45deg);
	}		background-color: inherit; /* Rengi üst klasörden (parent) miras alır */

	~~.bubble-yan-k:before~~ { background-color: ~~var(--bubble-red)~~; }
	~~.bubble-yan-t:before { background-color: var(--bubble-yellow); }~~
	~~.bubble-yan-y:before { background-color: var(--bubble-green); }~~
	~~.bubble-yan-m:before { background-color: var~~(~~--bubble-blue~~)~~; }~~
	~~.bubble-yan-golge:before { background-color: var(--bubble-gray); }~~

	~~/* 6. Mesaj Konumlandırma~~ */
	~~.me, .you {~~
	~~margin: 5px 15px;~~
	}		}

			/* Konumlandırma */
			.me, .you { margin: 5px 15px; }
	.me::before { left: -6px; }		.me::before { left: -6px; }
	.you::before { right: -6px; }		.you::before { right: -6px; }

Fenpedia 00.49, 25 Ağustos 2026 tarihinde

2026-08-25T00:49:33Z

Değişiklikleri göster

Fenpedia: "/üst konuşma balonları/ .bubble-k { height: 25px; vertical-align: text-top; position: relative; background: #faaaaa; border-radius: 20px; padding: 15px; } .bubble-altsag-k:before { content: ""; width: 0px; height: 0px; position: absolute; border-left: 6px solid transparent; border-right: 12px solid #faaaaa; border-top: 6px solid #faaaaa; border-bottom: 10px solid transparent; right: 32px; bottom: -14px; } .bubble-alt-..." içeriğiyle yeni sayfa oluşturdu

2026-08-24T10:36:02Z

"üst konuşma balonları: .bubble-k { height: 25px; vertical-align: text-top; position: relative; background: #faaaaa; border-radius: 20px; padding: 15px; } .bubble-altsag-k:before { content: ""; width: 0px; height: 0px; position: absolute; border-left: 6px solid transparent; border-right: 12px solid #faaaaa; border-top: 6px solid #faaaaa; border-bottom: 10px solid transparent; right: 32px; bottom: -14px; } .bubble-alt-..." içeriğiyle yeni sayfa oluşturdu

Yeni sayfa

/*üst konuşma balonları*/
.bubble-k {
height: 25px;
vertical-align: text-top;
position: relative;
background: #faaaaa;
border-radius: 20px;
padding: 15px;
}
.bubble-altsag-k:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 6px solid transparent;
border-right: 12px solid #faaaaa;
border-top: 6px solid #faaaaa;
border-bottom: 10px solid transparent;
right: 32px;
bottom: -14px;
}
.bubble-alt-k:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 12px solid #faaaaa;
border-right: 6px solid transparent;
border-top: 6px solid #faaaaa;
border-bottom: 10px solid transparent;
left: 32px;
bottom: -14px;
}
.bubble-yan-k:before {
background-color: #faaaaa;
content: "\00a0";
display: block;
height: 18px;
position: absolute;
top: 13px;
transform: rotate( 45deg ) ;
-moz-transform: rotate( 45deg ) ;
-ms-transform: rotate( 45deg ) ;
-o-transform: rotate( 45deg ) ;
-webkit-transform: rotate( 45deg ) ;
width: 17px;
}
.bubble-k-sh {
height: 25px;
vertical-align: text-top;
box-shadow: 0 0 5px #B2B2B2;
position: relative;
background: #faaaaa;
border-radius: 20px;
padding: 15px;
}
.bubble-t {
height: 25px;
position: relative;
background: #fce083;
border-radius: 20px;
padding: 15px;
}
.bubble-altsag-t:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 6px solid transparent;
border-right: 12px solid #fce083;
border-top: 6px solid #fce083;
border-bottom: 10px solid transparent;
right: 32px;
bottom: -14px;
}
.bubble-alt-t:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 12px solid #fce083;
border-right: 6px solid transparent;
border-top: 6px solid #fce083;
border-bottom: 10px solid transparent;
left: 32px;
bottom: -14px;
}
.bubble-yan-t:before {
background-color: #fce083;
content: "\00a0";
display: block;
height: 18px;
position: absolute;
top: 13px;
transform: rotate( 45deg ) ;
-moz-transform: rotate( 45deg ) ;
-ms-transform: rotate( 45deg ) ;
-o-transform: rotate( 45deg ) ;
-webkit-transform: rotate( 45deg ) ;
width: 17px;
}
.bubble-t-sh {
height: 25px;
box-shadow: 0 0 5px #B2B2B2;
position: relative;
background: #fce083;
border-radius: 20px;
padding: 15px;
}
.bubble-y {
height: 25px;
position: relative;
background: #aafa9d;
border-radius: 20px;
padding: 15px;
}
.bubble-altsag-y:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 6px solid transparent;
border-right: 12px solid #aafa9d;
border-top: 6px solid #aafa9d;
border-bottom: 10px solid transparent;
right: 32px;
bottom: -14px;
}
.bubble-alt-y:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 12px solid #aafa9d;
border-right: 6px solid transparent;
border-top: 6px solid #aafa9d;
border-bottom: 10px solid transparent;
left: 32px;
bottom: -14px;
}
.bubble-yan-y:before {
background-color: #aafa9d;
content: "\00a0";
display: block;
height: 18px;
position: absolute;
top: 13px;
transform: rotate( 45deg ) ;
-moz-transform: rotate( 45deg ) ;
-ms-transform: rotate( 45deg ) ;
-o-transform: rotate( 45deg ) ;
-webkit-transform: rotate( 45deg ) ;
width: 17px;
}
.bubble-y-sh {
height: 25px;
box-shadow: 0 0 5px #B2B2B2;
position: relative;
background: #aafa9d;
border-radius: 20px;
padding: 15px;
}
.bubble-m {
height: 25px;
position: relative;
background: #81bffc;
border-radius: 20px;
padding: 15px;
}
.bubble-altsag-m:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 6px solid transparent;
border-right: 12px solid #81bffc;
border-top: 6px solid #81bffc;
border-bottom: 10px solid transparent;
right: 32px;
bottom: -14px;
}
.bubble-alt-m:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 12px solid #81bffc;
border-right: 6px solid transparent;
border-top: 6px solid #81bffc;
border-bottom: 10px solid transparent;
left: 32px;
bottom: -14px;
}
.bubble-yan-m:before {
background-color: #81bffc;
content: "\00a0";
display: block;
height: 18px;
position: absolute;
top: 13px;
transform: rotate( 45deg ) ;
-moz-transform: rotate( 45deg ) ;
-ms-transform: rotate( 45deg ) ;
-o-transform: rotate( 45deg ) ;
-webkit-transform: rotate( 45deg ) ;
width: 17px;
}
.bubble-m-sh {
height: 25px;
box-shadow: 0 0 5px #B2B2B2;
position: relative;
background: #81bffc;
border-radius: 20px;
padding: 15px;
}
.bubble {
height: 25px;
position: relative;
background: #ddd;
border-radius: 20px;
padding: 15px;
}
.bubble-sh {
height: 25px;
box-shadow: 0 0 5px #B2B2B2;
position: relative;
background: #ddd;
border-radius: 20px;
padding: 15px;
}
.bubble-altsag-golge:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 6px solid transparent;
border-right: 12px solid #ddd;
border-top: 6px solid #ddd;
border-bottom: 10px solid transparent;
right: 32px;
bottom: -14px;
}
.bubble-alt-golge:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 12px solid #ddd;
border-right: 6px solid transparent;
border-top: 6px solid #ddd;
border-bottom: 10px solid transparent;
left: 32px;
bottom: -14px;
}
.bubble-yan-golge:before {
background-color: #ddd;
content: "\00a0";
display: block;
height: 18px;
position: absolute;
top: 13px;
transform: rotate( 45deg ) ;
-moz-transform: rotate( 45deg ) ;
-ms-transform: rotate( 45deg ) ;
-o-transform: rotate( 45deg ) ;
-webkit-transform: rotate( 45deg ) ;
width: 17px;
}

.me {
margin: 5px 15px 5px 15px;
}

.me::before {
left: -6px;
}

.you {
margin: 5px 15px 5px 15px;
}

.you::before {
right: -6px;
}