New mission: revamp the portals to make them look actually tolerable to the eye. They are currently placeholders as of now.
The Gold Network: Soyworld | SNCApedia | SoyPlace

Please do not be surprised when the site randomly loads extremely slow. It is probably being DDoSed.

I'm not dead, just inactive for the moment. Faggot (talk) 20:16, 9 April 2026 (UTC)

Template:Tiktok/styles.css: Difference between revisions

From SNCApedia, the shit nobody cares about encyclopedia
Jump to navigationJump to search
← Older editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
/* Container for the hidden TikTok Easter Egg */
/* Main Wrapper */
.tiktok-wrapper {
.tiktok-wrapper {
background: #000;
margin: 1em auto;
color: #fff;
max-width: 650px;
max-width: 350px;
text-align: center;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
border-top: 1px solid #222;
}
}


.tiktok-main {
/* The Roundy Clickable Banner */
position: relative;
.tiktok-banner {
height: 450px;
background: #000;
background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
color: #fff;
display: flex;
border-radius: 50px; /* Modern rounded corners */
flex-direction: column;
padding: 10px 25px;
}
display: inline-flex;
 
align-items: center;
/* Video/Main Image Area */
.tiktok-video {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 1;
display: flex;
justify-content: center;
justify-content: center;
align-items: center;
gap: 12px;
overflow: hidden;
cursor: pointer;
user-select: none;
/* TikTok glitch effect on the rounded border */
box-shadow: -3px -3px 0 #00f7ef, 3px 3px 0 #ff004f;
transition: transform 0.1s ease;
font-size: 1.1em;
}
}


.tiktok-video a.image img,
.tiktok-banner:active {
.tiktok-video img {
transform: scale(0.98); /* Satisfying click animation */
width: 100%;
height: 100%;
object-fit: cover;
}
}


/* Overlay for Text and Buttons */
/* Hide standard Wiki [Expand] text */
.tiktok-overlay {
.tiktok-banner .mw-collapsible-text {
position: absolute;
display: none !important;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 40%);
}
}


/* Sidebar Action Buttons */
.tk-banner-text {
.tiktok-sidebar {
position: absolute;
right: 12px;
bottom: 25px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
 
.tk-profile-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 5px;
}
 
.tk-profile {
width: 36px;
height: 36px;
border-radius: 50%;
background: #ddd;
border: 2px solid #fff;
display: flex;
justify-content: center;
align-items: center;
color: #000;
overflow: hidden;
}
 
.tk-profile a.image img,
.tk-profile img {
width: 100%;
height: 100%;
object-fit: cover;
}
 
.tk-plus {
background: #ea4359;
color: #fff;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: bold;
font-weight: bold;
line-height: 18px;
white-space: nowrap;
margin-top: -9px;
z-index: 2;
border: 2px solid #000;
}
 
.tk-action {
text-align: center;
font-size: 1.5em;
text-shadow: 1px 1px 2px #000;
}
 
.tk-action span {
display: block;
font-size: 0.4em;
font-weight: 600;
margin-top: 4px;
}
 
/* Spinning Vinyl Animation */
.tk-disc-container {
margin-top: 5px;
}
}


.tk-disc {
/* The "Music Button Next To It" */
width: 34px;
.tk-music-btn {
height: 34px;
display: inline-flex;
border-radius: 50%;
background: radial-gradient(circle, #444 20%, #111 25%, #222 40%, #111 100%);
display: flex;
justify-content: center;
align-items: center;
align-items: center;
animation: tk-spin 4s linear infinite;
gap: 5px;
border: 5px solid #222;
font-size: 0.5em;
}
 
@keyframes tk-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
 
/* Bottom Information Area */
.tiktok-bottom-info {
padding: 15px;
padding-right: 70px;
text-align: left;
}
 
.tk-user {
font-weight: bold;
font-weight: bold;
font-size: 1.1em;
margin-bottom: 5px;
text-shadow: 1px 1px 2px #000;
}
.tk-desc {
font-size: 0.9em;
font-size: 0.9em;
margin-bottom: 8px;
color: #fff;
line-height: 1.3;
background: #222;
text-shadow: 1px 1px 2px #000;
padding: 5px 12px;
border-radius: 20px;
margin-left: 5px;
}
}


/* Music Marquee */
/* Easter Egg Container */
.tk-music {
.tiktok-easter-egg {
font-size: 0.85em;
margin-top: 20px;
display: flex;
background: #000;
align-items: center;
border-radius: 15px;
gap: 8px;
}
 
.tk-music-marquee {
display: inline-block;
white-space: nowrap;
overflow: hidden;
overflow: hidden;
width: 150px;
border: 1px solid #333;
}
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
 
.tk-music-text {
display: inline-block;
padding-left: 100%;
animation: tk-marquee 8s linear infinite;
}
 
@keyframes tk-marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
}


Line 188: Line 67:
display: flex;
display: flex;
overflow-x: auto;
overflow-x: auto;
gap: 10px;
gap: 12px;
padding: 15px 10px;
padding: 15px;
background: #050505;
background: #050505;
border-top: 1px solid #222;
}
}


.tiktok-swipe-feed a.image,
.tiktok-swipe-feed a.image,
.tiktok-swipe-feed > div {
.tiktok-swipe-feed > div {
flex: 0 0 100px;
flex: 0 0 120px;
height: 140px;
height: 180px;
background: #1a1a1a;
background: #1a1a1a;
border-radius: 6px;
border-radius: 8px;
overflow: hidden;
overflow: hidden;
display: flex;
display: flex;
Line 205: Line 83:
justify-content: center;
justify-content: center;
border: 1px solid #222;
border: 1px solid #222;
position: relative;
}
}


Line 216: Line 93:
.tk-audio {
.tk-audio {
padding: 10px;
padding: 10px;
background: #000;
background: #111;
border-top: 1px solid #333;
}
}

Revision as of 08:33, 20 April 2026

/* Main Wrapper */
.tiktok-wrapper {
	margin: 1em auto;
	max-width: 650px;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The Roundy Clickable Banner */
.tiktok-banner {
	background: #000;
	color: #fff;
	border-radius: 50px; /* Modern rounded corners */
	padding: 10px 25px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	cursor: pointer;
	user-select: none;
	/* TikTok glitch effect on the rounded border */
	box-shadow: -3px -3px 0 #00f7ef, 3px 3px 0 #ff004f;
	transition: transform 0.1s ease;
	font-size: 1.1em;
}

.tiktok-banner:active {
	transform: scale(0.98); /* Satisfying click animation */
}

/* Hide standard Wiki [Expand] text */
.tiktok-banner .mw-collapsible-text {
	display: none !important;
}

.tk-banner-text {
	font-weight: bold;
	white-space: nowrap;
}

/* The "Music Button Next To It" */
.tk-music-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: bold;
	font-size: 0.9em;
	color: #fff;
	background: #222;
	padding: 5px 12px;
	border-radius: 20px;
	margin-left: 5px;
}

/* Easter Egg Container */
.tiktok-easter-egg {
	margin-top: 20px;
	background: #000;
	border-radius: 15px;
	overflow: hidden;
	border: 1px solid #333;
	box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* Horizontal Swipe Feed (The Easter Egg) */
.tiktok-swipe-feed {
	display: flex;
	overflow-x: auto;
	gap: 12px;
	padding: 15px;
	background: #050505;
}

.tiktok-swipe-feed a.image,
.tiktok-swipe-feed > div {
	flex: 0 0 120px;
	height: 180px;
	background: #1a1a1a;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #222;
}

.tiktok-swipe-feed img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tk-audio {
	padding: 10px;
	background: #111;
	border-top: 1px solid #333;
}
Retrieved from "https://www.sncapedia.org/index.php?title=Template:Tiktok/styles.css&oldid=31871"