Template:Tiktok/styles.css - Revision history

SomebodyRum at 09:25, 20 April 2026

2026-04-20T09:25:24Z

← Older revision		Revision as of 09:25, 20 April 2026
Line 176:		Line 176:

	.tk-app-vinyl {		.tk-app-vinyl {
	width: 36px;		width: 36px;
	height: 36px;		height: 36px;
	border-radius: 50%;		border-radius: 50%;
	background: #~~333~~;		background: #000;
	border: ~~6px~~ solid #~~111~~;		border: 2px solid #555;
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	justify-content: center;		justify-content: center;
	~~font-size: 0.6em;~~		overflow: hidden;
	~~animation: tk-spin 4s linear infinite;~~
	~~box-shadow~~: ~~0 0 5px #000~~;
	}		}

	~~@keyframes~~ tk-~~spin~~ {		.tk-app-vinyl a.image img,
	~~from { transform~~: ~~rotate(0deg)~~; }		.tk-app-vinyl img {
	~~to { transform~~: ~~rotate(360deg)~~; }		width: 100%;
			height: 100%;
			object-fit: cover;
	}		}

SomebodyRum at 09:09, 20 April 2026

2026-04-20T09:09:09Z

← Older revision		Revision as of 09:09, 20 April 2026
Line 18:		Line 18:
	padding: 5px 15px;		padding: 5px 15px;
	gap: 15px;		gap: 15px;
	~~/* Removed wrap to prevent dead spacing and force single line */~~
	}		}

Line 32:		Line 31:
	font-weight: bold;		font-weight: bold;
	font-size: 1.1em;		font-size: 1.1em;
	white-space: nowrap; ~~/* Prevents text from squishing */~~		white-space: nowrap;
	}		}

Line 39:		Line 38:
	}		}

	/* Right Side: Audio Player (~~Isolated~~) */		/* Right Side: Audio Player (Standard Size) */
	.tk-audio-player {		.tk-audio-player {
	background: #111;		background: #111;
Line 47:		Line 46:
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	}

	~~.tk-audio-player .roundedplayer {~~
	~~display: inline-block;~~
	}		}

Line 89:		Line 84:
	}		}

	/* ~~Horizontal~~ Video Feed */		/* Vertical Video Feed (Top-to-Bottom) */
	.tk-app-feed {		.tk-app-feed {
	display: flex;		display: flex;
			flex-direction: column;
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
	overflow-x: auto;		overflow-y: auto;
	overflow-y: hidden;		overflow-x: hidden;
			background: #111;
	}		}

	/* ~~Force MP4s and Images to be full-screen~~ */		/* Fix Wiki Parser spacing from newlines */
	.tk-app-feed > * {		.tk-app-feed p { display: contents; }
	~~flex: 0 0 100%;~~		.tk-app-feed br { display: none; }
	~~width: 100%;~~
	~~height: 100%;~~
	~~background: #111;~~
	display: ~~flex~~;
	~~align~~-~~items: center;~~
	~~justify~~-~~content~~: ~~center~~;
	}

			/* Force MP4s and Images to be exactly 600px tall (full screen) */
	.tk-app-feed .mediaContainer,		.tk-app-feed .mediaContainer,
	.tk-app-feed video,		.tk-app-feed video,
	.tk-app-feed img,		.tk-app-feed img,
	.tk-app-feed a.image {		.tk-app-feed a.image {
	width: ~~100%~~ !important;		display: block;
	height: ~~100%~~ !important;		width: 350px !important;
			height: 600px !important;
	max-height: none !important;		max-height: none !important;
	object-fit: cover;		object-fit: cover;
	margin: 0;		margin: 0;
	padding: 0;		padding: 0;
			flex-shrink: 0;
	}		}

Line 125:		Line 118:
	position: absolute;		position: absolute;
	right: 10px;		right: 10px;
	bottom: 25px; ~~/* Shifted down since navbar is gone */~~		bottom: 25px;
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
Line 154:		Line 147:
	border: 2px solid #fff;		border: 2px solid #fff;
	position: relative;		position: relative;
			}

			/* Ensure the PFP inside fits nicely */
			.tk-app-pfp a.image,
			.tk-app-pfp img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			object-fit: cover;
			display: block;
	}		}

Line 195:		Line 198:
	position: absolute;		position: absolute;
	left: 12px;		left: 12px;
	bottom: 15px; ~~/* Shifted down since navbar is gone */~~		bottom: 15px;
	right: 60px; ~~/* Avoid sidebar overlap */~~		right: 60px;
	z-index: 10;		z-index: 10;
	color: #fff;		color: #fff;

SomebodyRum at 08:54, 20 April 2026

2026-04-20T08:54:57Z

← Older revision		Revision as of 08:54, 20 April 2026
Line 2:		Line 2:
	.tiktok-wrapper {		.tiktok-wrapper {
	margin: 1em auto;		margin: 1em auto;
	~~max-width: 650px;~~
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	display: flex;		display: flex;
Line 17:		Line 16:
	border-radius: 50px;		border-radius: 50px;
	box-shadow: -3px -3px 0 #00f7ef, 3px 3px 0 #ff004f;		box-shadow: -3px -3px 0 #00f7ef, 3px 3px 0 #ff004f;
	padding: 5px ~~8px~~;		padding: 5px 15px;
	gap: ~~5px~~;		gap: 15px;
	~~max-width: 100%;~~		/* Removed wrap to prevent dead spacing and force single line */
	~~flex-~~wrap~~: wrap;~~
	~~justify-content: center;~~
	}		}

Line 28:		Line 25:
	cursor: pointer;		cursor: pointer;
	user-select: none;		user-select: none;
	~~padding: 5px 15px;~~
	display: flex;		display: flex;
	align-items: center;		align-items: center;
	gap: 12px;		gap: 12px;
	border-radius: 50px;		border-radius: 50px;
	transition: ~~background~~ 0.2s;		transition: opacity 0.2s;
	font-weight: bold;		font-weight: bold;
	font-size: 1.1em;		font-size: 1.1em;
	}		white-space: nowrap; /* Prevents text from squishing */

	~~.tk-main~~-~~toggle:hover {~~
	~~background~~: ~~#1a1a1a~~;
	}		}

Line 50:		Line 43:
	background: #111;		background: #111;
	border-radius: 30px;		border-radius: 30px;
	padding: 2px ~~15px~~;		padding: 2px 10px;
	border: 1px solid #333;		border: 1px solid #333;
	display: flex;		display: flex;
Line 64:		Line 57:
	margin-top: 20px;		margin-top: 20px;
	width: 350px;		width: 350px;
	height: 600px; ~~/* Exact mobile phone dimensions */~~		height: 600px;
	background: #000;		background: #000;
	border-radius: 16px;		border-radius: 16px;
Line 132:		Line 125:
	position: absolute;		position: absolute;
	right: 10px;		right: 10px;
	bottom: ~~90px~~;		bottom: 25px; /* Shifted down since navbar is gone */
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
Line 202:		Line 195:
	position: absolute;		position: absolute;
	left: 12px;		left: 12px;
	bottom: ~~70px~~;		bottom: 15px; /* Shifted down since navbar is gone */
	right: 60px; /* Avoid sidebar overlap */		right: 60px; /* Avoid sidebar overlap */
	z-index: 10;		z-index: 10;
Line 219:		Line 212:
	line-height: 1.2;		line-height: 1.2;
	margin-bottom: 8px;		margin-bottom: 8px;
	}

	~~/* Bottom App Navbar */~~
	~~.tk-app-navbar {~~
	~~position: absolute;~~
	~~bottom: 0;~~
	~~width: 100%;~~
	~~height: 55px;~~
	~~background: rgba(0,0,0,0.8);~~
	~~border-top: 1px solid #333;~~
	~~display: flex;~~
	~~justify-content: space-around;~~
	~~align-items: center;~~
	~~z-index: 10;~~
	~~color: #888;~~
	~~font-size: 0.7em;~~
	~~padding-bottom: 5px;~~
	}

	~~.tk-nav-item {~~
	~~display: flex;~~
	~~flex-direction: column;~~
	~~align-items: center;~~
	~~gap: 4px;~~
	~~font-size: 1.8em;~~
	}

	~~.tk-nav-item span {~~
	~~font-size: 0.4em;~~
	}

	~~.tk-nav-add {~~
	~~width: 42px;~~
	~~height: 28px;~~
	~~background: #fff;~~
	~~color: #000;~~
	~~border-radius: 8px;~~
	~~display: flex;~~
	~~align-items: center;~~
	~~justify-content: center;~~
	~~font-size: 20px;~~
	~~font-weight: bold;~~
	~~box-shadow: -2px 0 0 #00f7ef, 2px 0 0 #ff004f;~~
	~~margin-top: -5px;~~
	}		}

SomebodyRum at 08:44, 20 April 2026

2026-04-20T08:44:56Z

Show changes

SomebodyRum at 08:38, 20 April 2026

2026-04-20T08:38:34Z

Show changes

SomebodyRum at 08:33, 20 April 2026

2026-04-20T08:33:39Z

Show changes

SomebodyRum at 08:26, 20 April 2026

2026-04-20T08:26:20Z

Show changes

SomebodyRum: Created page with "/* Container and Layout */ .tiktok-wrapper { background: #000; color: #fff; max-width: 350px; margin: 1em auto; border-radius: 12px; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; box-shadow: 0 4px 15px rgba(0,0,0,0.5); border: 1px solid #222; } .tiktok-main { position: relative; height: 550px; background: linear-gradient(135deg, #1a1a1a, #0a0a0a); display: flex; flex-direction: column; }..."

2026-04-20T08:20:09Z

Created page with "Container and Layout: .tiktok-wrapper { background: #000; color: #fff; max-width: 350px; margin: 1em auto; border-radius: 12px; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; box-shadow: 0 4px 15px rgba(0,0,0,0.5); border: 1px solid #222; } .tiktok-main { position: relative; height: 550px; background: linear-gradient(135deg, #1a1a1a, #0a0a0a); display: flex; flex-direction: column; }..."

New page

/* Container and Layout */
.tiktok-wrapper {
background: #000;
color: #fff;
max-width: 350px;
margin: 1em auto;
border-radius: 12px;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
border: 1px solid #222;
}

.tiktok-main {
position: relative;
height: 550px;
background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
display: flex;
flex-direction: column;
}

/* Video/Main Image Area */
.tiktok-video {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.tiktok-video a.image img,
.tiktok-video img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Overlay for Text and Buttons */
.tiktok-overlay {
position: absolute;
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.9) 0%, rgba(0,0,0,0) 40%);
}

/* Sidebar Action Buttons */
.tiktok-sidebar {
position: absolute;
right: 12px;
bottom: 25px;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}

.tk-profile-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 5px;
}

.tk-profile {
width: 42px;
height: 42px;
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: 20px;
height: 20px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: bold;
line-height: 20px;
margin-top: -10px;
z-index: 2;
border: 2px solid #000;
}

.tk-action {
text-align: center;
font-size: 1.8em;
text-shadow: 1px 1px 2px #000;
cursor: pointer;
}

.tk-action span {
display: block;
font-size: 0.35em;
font-weight: 600;
margin-top: 4px;
}

/* Spinning Vinyl Animation */
.tk-disc-container {
margin-top: 10px;
}

.tk-disc {
width: 38px;
height: 38px;
border-radius: 50%;
background: radial-gradient(circle, #444 20%, #111 25%, #222 40%, #111 100%);
display: flex;
justify-content: center;
align-items: center;
animation: tk-spin 4s linear infinite;
border: 6px 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: 80px; /* Don't overlap sidebar */
}

.tk-user {
font-weight: bold;
font-size: 1.1em;
margin-bottom: 5px;
text-shadow: 1px 1px 2px #000;
}

.tk-desc {
font-size: 0.95em;
margin-bottom: 10px;
line-height: 1.3;
text-shadow: 1px 1px 2px #000;
}

/* Music Marquee */
.tk-music {
font-size: 0.85em;
display: flex;
align-items: center;
gap: 8px;
}

.tk-music-marquee {
display: inline-block;
white-space: nowrap;
overflow: hidden;
width: 150px;
}

.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%); }
}

/* Optional Audio Player block */
.tk-audio {
margin-top: 10px;
}

.tk-audio audio {
height: 30px;
width: 100%;
}

/* Easter Egg: Expandable Swipe Feed */
.tiktok-easter-egg {
background: #000;
border-top: 1px solid #222;
}

.tiktok-swipe-prompt {
list-style: none;
text-align: center;
padding: 12px;
font-size: 0.85em;
color: #aaa;
cursor: pointer;
user-select: none;
transition: background 0.2s, color 0.2s;
}

.tiktok-swipe-prompt:hover {
background: #111;
color: #fff;
}

.tiktok-easter-egg[open] .tiktok-swipe-prompt {
border-bottom: 1px solid #222;
color: #fff;
}

/* Horizontal Scrolling Logic */
.tiktok-swipe-feed {
display: flex;
overflow-x: auto;
gap: 10px;
padding: 15px 10px;
background: #050505;
}

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

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