Template fixes
This commit is contained in:
@@ -185,7 +185,7 @@
|
||||
--dark-border-subtle: #2b323b;
|
||||
|
||||
/* Typography & layout */
|
||||
--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
|
||||
--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
|
||||
@@ -186,7 +186,7 @@
|
||||
--dark-border-subtle: #2b323b;
|
||||
|
||||
/* Typography & layout */
|
||||
--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
|
||||
--body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
|
||||
@@ -172,7 +172,7 @@
|
||||
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
|
||||
--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||||
--body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
|
||||
@@ -172,7 +172,7 @@
|
||||
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--gradient: linear-gradient(180deg, #ffffff26, #fff0);
|
||||
--body-font-family: var(--optain-cassiopeia-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||||
--body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
||||
--body-font-size: 1rem;
|
||||
--body-font-weight: 400;
|
||||
--body-line-height: 1.5;
|
||||
|
||||
@@ -1,556 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
|
||||
This file is part of a Moko Consulting project.
|
||||
|
||||
SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
# FILE INFORMATION
|
||||
DEFGROUP: Joomla.Template.Site
|
||||
INGROUP: Moko-Cassiopeia
|
||||
PATH: ./media/templates/site/moko-cassiopeia/css/gable.css
|
||||
VERSION: 03.05.00
|
||||
BRIEF: Stylesheet providing gable-specific layout and design rules for Moko-Cassiopeia
|
||||
*/
|
||||
|
||||
:root {
|
||||
--gab-blue: transparent;
|
||||
--gab-green: #7ac143;
|
||||
--gab-red: #3f8ff0;
|
||||
--gab-orange: #F9A541;
|
||||
--gab-gray1: #DDDDDD;
|
||||
--gab-gray2: #AAAAAA;
|
||||
--gab-gray3: #777777;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: var(--gab-gray1);
|
||||
}
|
||||
|
||||
#view_gabble {
|
||||
background-color: var(--gab-blue);
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#mod_gabble {
|
||||
background-color: var(--gab-blue);
|
||||
padding: 3px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#lists_gabble {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
border: 4px solid var(--gab-red);
|
||||
background-color: var(--gab-green);
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#select_list {
|
||||
margin-left: 0px;
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
}
|
||||
|
||||
#options_list {
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
#frame_list {
|
||||
width: 100%;
|
||||
height: 484px;
|
||||
padding: 4px;
|
||||
border-radius: 0px 0px 6px 6px;
|
||||
}
|
||||
|
||||
#windows_list {
|
||||
margin-left: 0px;
|
||||
width: 100%;
|
||||
border: 4px solid var(--gab-red);
|
||||
background-color: var(--gab-green);
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#frame_window {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#openai_btn {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
visibility: hidden;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
cursor: pointer;
|
||||
border: 3px solid var(--gab-gray3);
|
||||
background-color: #FFF;
|
||||
border-radius: 17px;
|
||||
}
|
||||
|
||||
#openai_btn:hover {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 3px solid var(--gab-gray3);
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
#openai_logo_anim {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
padding: 2px;
|
||||
z-index: 1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.openai_logo_sm {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-color: #FFF;
|
||||
border: 3px solid #FFF;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.openai_logo_md {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background-color: #FFF;
|
||||
border: 4px solid #FFF;
|
||||
border-radius: 17px;
|
||||
}
|
||||
|
||||
.btn_on_com {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: -2px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #448344;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn_on_mod {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #448344;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.button_list {
|
||||
border: none;
|
||||
width:100%;
|
||||
outline: none;
|
||||
background-color: var(--gab-gray1);
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.button_list:hover {
|
||||
background-color: var(--gab-gray2);
|
||||
}
|
||||
|
||||
.button_list_s {
|
||||
border: none;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
color: #FFF;
|
||||
background-color: var(--gab-red);
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.window_list {
|
||||
position: relative;
|
||||
margin: 4px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
background-color: var(--gab-gray1);
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.window_list:hover {
|
||||
background-color: var(--gab-gray2);
|
||||
}
|
||||
|
||||
.window_list_s {
|
||||
position: relative;
|
||||
margin: 4px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: #FFF;
|
||||
background-color: var(--gab-red);
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.btn_close {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 10px;
|
||||
padding-left: 1px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #000;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
background-color: var(--gab-gray2);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.btn_close:hover {
|
||||
background-color: var(--gab-gray3);
|
||||
}
|
||||
|
||||
.iframe_list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFF;
|
||||
border: 4px solid var(--gab-red);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.iframe_messages {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFF;
|
||||
border: 4px solid var(--gab-red);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.input_box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input_emoji {
|
||||
position: absolute;
|
||||
right: 48px;
|
||||
top: 11px;
|
||||
cursor: pointer;
|
||||
color: var(--gab-gray2);
|
||||
}
|
||||
|
||||
.input_emoji:hover {
|
||||
color: var(--gab-gray3);
|
||||
}
|
||||
|
||||
.emoji {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.emoji:hover {
|
||||
background-color: var(--gab-orange);
|
||||
}
|
||||
|
||||
.emojis_div {
|
||||
position: absolute;
|
||||
top: -92px;
|
||||
right: 0px;
|
||||
width: 200px;
|
||||
height: 92px;
|
||||
border: 4px solid var(--gab-red);
|
||||
background-color: var(--gab-gray1);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.msg-button-on {
|
||||
margin-left: 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
background-color: var(--gab-orange);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.msg-button-off {
|
||||
margin-left: 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: #FFF;
|
||||
background-color: var(--gab-gray2);
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.taba-content {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.msg-input {
|
||||
padding-left: 10px;
|
||||
padding-right: 26px;
|
||||
width: calc(100% - 35px);
|
||||
height: 30px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.main-windows {
|
||||
position: fixed;
|
||||
margin-bottom: 10px;
|
||||
bottom: 0px;
|
||||
right: 90px;
|
||||
z-index: 901;
|
||||
}
|
||||
|
||||
.list-windows {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 50px;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 20px;
|
||||
z-index: 901;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
display: inline-block;
|
||||
color: #F5F5F5;
|
||||
margin-top: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
border: 3px solid var(--gab-red);
|
||||
background-color: var(--gab-blue);
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
cursor: pointer;
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.notifications {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.n-notifications {
|
||||
position: absolute;
|
||||
bottom: -6px;
|
||||
right: -2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #FFF;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
background-color: #a51f18;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.m-notifications {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #FFF;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
background-color: #a51f18;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.window {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
width: 280px;
|
||||
height: 420px;
|
||||
}
|
||||
|
||||
.window-com {
|
||||
margin-top: 6px;
|
||||
width: 100%;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
.window-title {
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.window-title-com {
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.window-icon {
|
||||
display: inline-block;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.window-header {
|
||||
padding: 6px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: var(--gab-blue);
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
}
|
||||
|
||||
.window-header-com {
|
||||
padding: 4px;
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
background-color: var(--gab-red);
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
}
|
||||
|
||||
.window-content {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
background-color: #DDD;
|
||||
}
|
||||
|
||||
.content-footer {
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: #DDD;
|
||||
border-radius: 0px 0px 8px 8px;
|
||||
}
|
||||
|
||||
.taba-btn {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
float: right;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: #DDD;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.taba-hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.taba-hover:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.taba-self {
|
||||
border: 1px solid #FFF;
|
||||
background-color: #7ac143;
|
||||
padding: 6px;
|
||||
padding-top: 9px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.taba-others {
|
||||
border: 1px solid #FFF;
|
||||
background-color: #5091cd;
|
||||
padding: 6px;
|
||||
padding-top: 9px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.taba-bot {
|
||||
border: 1px solid #FFF;
|
||||
background-color: var(--gab-gray3);
|
||||
padding: 6px;
|
||||
padding-top: 9px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.taba-dice {
|
||||
border: 1px solid #FFF;
|
||||
background-color: #f44321;
|
||||
padding: 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.taba-emoji {
|
||||
border: 1px solid #FFF;
|
||||
background-color: #5091cd;
|
||||
padding: 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.taba-user {
|
||||
border: 1px solid #FFF;
|
||||
background-color: #FFF;
|
||||
padding: 6px;
|
||||
border-radius: 6px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.taba-user-on {
|
||||
border: 1px solid #FFF;
|
||||
background-color: var(--gab-green);
|
||||
padding: 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.taba-feed {
|
||||
border: 1px solid #FFF;
|
||||
background-color: var(--gab-blue);
|
||||
padding: 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.openai_error {
|
||||
border: 1px solid #FFF;
|
||||
background-color: var(--gab-red);
|
||||
padding: 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.taba-msgsystem {
|
||||
border: 1px solid #FFF;
|
||||
background-color: #AAA;
|
||||
padding: 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.taba-msghead {
|
||||
background-color: #f5f5f5;
|
||||
padding: 4px;
|
||||
padding-left: 10px;
|
||||
padding-right: 6px;
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
}
|
||||
|
||||
.taba-msg {
|
||||
background-color: #f5f5f5;
|
||||
padding: 8px;
|
||||
border-radius: 0px 8px 8px 8px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@@ -1,222 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>
|
||||
|
||||
This file is part of a Moko Consulting project.
|
||||
|
||||
SPDX-License-Identifier: GPL-3.0-or-later
|
||||
|
||||
# FILE INFORMATION
|
||||
DEFGROUP: Joomla.Template.Site
|
||||
INGROUP: Moko-Cassiopeia
|
||||
PATH: ./media/templates/site/moko-cassiopeia/css/global/social-media-demo.css
|
||||
VERSION: 03.05.00
|
||||
BRIEF: Demo styles for showcasing social media elements in Moko-Cassiopeia template
|
||||
*/
|
||||
|
||||
/*
|
||||
======================================================================
|
||||
Social Media Demo — FULL CSS (Joomla-safe, fully scoped)
|
||||
Scope: All selectors prefixed with .social-media-demo to avoid leakage
|
||||
Usage: Wrap your article markup in <div class="social-media-demo"> ... </div>
|
||||
Version: 2.0 (2025-08-23)
|
||||
|
||||
How it’s organized:
|
||||
1) Container-level CSS variables (IMAGES ONLY). Colors are hard-coded per brand below.
|
||||
2) Base/layout styles (sections, header shell, placeholders, buttons).
|
||||
3) Platform brand colors (hard-coded) and cover height tweaks.
|
||||
4) Image assignments (map classes like .fb-cover → variable --fb-cover-img).
|
||||
|
||||
INSTRUCTIONS:
|
||||
- Save the images in their requried sizes into the [SITEROOT]/images/social/ folder with the exact names.
|
||||
- For circle images, sue a square image t fille the entire space
|
||||
- All images are center and miiddle aligned when loaded.
|
||||
======================================================================
|
||||
REQUIRED IMAGE SIZES — Social Media Demo Wireframes
|
||||
|
||||
Facebook
|
||||
--fb-cover-img → Cover: 820×312 (desktop), 640×360 (mobile safe)
|
||||
--fb-avatar-img → Profile: 176×176 (shown as circle, but use square image)
|
||||
|
||||
Twitter / X
|
||||
--x-cover-img → Header: 1500×500
|
||||
--x-avatar-img → Profile: up to 400×400 (shown as circle, but use square image)
|
||||
|
||||
LinkedIn Company
|
||||
--li-cover-img → Banner: ~1128×191
|
||||
--li-logo-img → Logo: up to 300×300 (rounded square)
|
||||
|
||||
Google Business Profile
|
||||
--gmb-cover-img → Banner: ~960×200 (mobile ~960×140)
|
||||
--gmb-logo-img → Logo: up to 300×300 (shown as circle, but use square image)
|
||||
|
||||
Instagram Business
|
||||
--ig-cover-img → Not always visible, safe 1080×608 for highlight background
|
||||
--ig-avatar-img → Profile: 320×320 (shown as circle, but use square image)
|
||||
|
||||
YouTube Channel
|
||||
--yt-cover-img → Channel art: 2560×1440 (safe area ~1546×423 center)
|
||||
--yt-avatar-img → Channel icon: 800×800 (shown as circle, but use square image)
|
||||
|
||||
TikTok Business
|
||||
--tt-cover-img → Profile header: ~900×500 (safe area ~720×405)
|
||||
--tt-avatar-img → Profile: 200×200 (shown as circle, but use square image)
|
||||
|
||||
Pinterest Business
|
||||
--pin-cover-img → Board/brand banner: ~800×450
|
||||
--pin-avatar-img → Profile: 165×165 (shown as circle, but use square image)
|
||||
|
||||
Snapchat Public Profile
|
||||
--sc-cover-img → Banner: ~1080×1920 (stories/poster)
|
||||
--sc-avatar-img → Bitmoji/Profile: 320×320 (shown as circle, but use square image)
|
||||
|
||||
Reddit Community
|
||||
--rd-cover-img → Banner: 1920×384
|
||||
--rd-avatar-img → Community icon: 256×256 (shown as circle, but use square image)
|
||||
====================================================================== */
|
||||
|
||||
/* Container variables — IMAGES ONLY (safe-scoped) */
|
||||
.social-media-demo {
|
||||
--fb-cover-img: url('../../../../../image/social/fb-cover.jpg');
|
||||
--fb-avatar-img: url('../../../../../image/social/fb-avatar.jpg');
|
||||
|
||||
--x-cover-img: url('../../../../../image/social/x-cover.jpg');
|
||||
--x-avatar-img: url('../../../../../image/social/x-avatar.jpg');
|
||||
|
||||
--li-cover-img: url('../../../../../image/social/li-cover.jpg');
|
||||
--li-logo-img: url('../../../../../image/social/li-logo.jpg');
|
||||
|
||||
--gmb-cover-img: url('../../../../../image/social/gmb-cover.jpg');
|
||||
--gmb-logo-img: url('../../../../../image/social/gmb-logo.jpg');
|
||||
|
||||
--ig-cover-img: url('../../../../../image/social/ig-cover.jpg');
|
||||
--ig-avatar-img: url('../../../../../image/social/ig-avatar.jpg');
|
||||
|
||||
--yt-cover-img: url('../../../../../image/social/yt-cover.jpg');
|
||||
--yt-avatar-img: url('../../../../../image/social/yt-avatar.jpg');
|
||||
|
||||
--tt-cover-img: url('../../../../../image/social/tt-cover.jpg');
|
||||
--tt-avatar-img: url('../../../../../image/social/tt-avatar.jpg');
|
||||
|
||||
--pin-cover-img: url('../../../../../image/social/pin-cover.jpg');
|
||||
--pin-avatar-img: url('../../../../../image/social/pin-avatar.jpg');
|
||||
|
||||
--sc-cover-img: url('../../../../../image/social/sc-cover.jpg');
|
||||
--sc-avatar-img: url('../../../../../image/social/sc-avatar.jpg');
|
||||
|
||||
--rd-cover-img: url('../../../../../image/social/rd-cover.jpg');
|
||||
--rd-avatar-img: url('../../../../../image/social/rd-avatar.jpg');
|
||||
}
|
||||
|
||||
/* DO NOT TOUCH */
|
||||
.social-media-demo * { box-sizing: border-box; }
|
||||
.social-media-demo section { margin: 24px auto; max-width: 1128px; background: #fff; border: 1px solid #d9dee3; border-radius: 12px; overflow: hidden; }
|
||||
.social-media-demo section h2 { margin: 0; padding: 12px 16px; background: #f9fafb; border-bottom: 1px solid #d9dee3; font-size: 16px; font-weight: 800; color: #111; }
|
||||
.social-media-demo .preview { padding: 16px; }
|
||||
|
||||
/* Header shell */
|
||||
.social-media-demo .header { position: relative; border: 1px solid #d9dee3; border-radius: 12px; overflow: hidden; background: #fff; }
|
||||
.social-media-demo .cover { position: relative; width: 100%; height: 200px; background-size: cover; background-position: center; background-color: #e8edf3; }
|
||||
.social-media-demo .avatar-wrap { position: absolute; left: 16px; bottom: -48px; }
|
||||
.social-media-demo .avatar,
|
||||
.social-media-demo .logo { width: 160px; height: 160px; border: 4px solid #fff; background-size: cover; background-position: center; overflow: hidden; }
|
||||
.social-media-demo .avatar.shown as circle, but use square image { border-radius: 999px; }
|
||||
.social-media-demo .logo.rounded { border-radius: 16px; }
|
||||
|
||||
/* Meta */
|
||||
.social-media-demo .meta { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 16px; padding-top: 56px; }
|
||||
.social-media-demo .name { font-size: 22px; font-weight: 800; color: #111; }
|
||||
.social-media-demo .subline { font-size: 13px; color: #666; }
|
||||
|
||||
/* Buttons */
|
||||
.social-media-demo .btn { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid #d9dee3; background: #fff; font-weight: 700; color: #111; }
|
||||
.social-media-demo .btn.primary { color: #fff; border-color: transparent; }
|
||||
|
||||
/* Placeholder visuals (used until you swap in real images) */
|
||||
.social-media-demo .placeholder { position: relative; width: 100%; height: 100%; display: grid; place-items: center; text-align: center; font-weight: 600; color: #6b7280; background: repeating-linear-gradient(45deg,#f6f7f9 0 12px,#eef0f3 12px 24px); border: 1px dashed #cfd3d8; }
|
||||
.social-media-demo .placeholder .dims { position: absolute; bottom: 8px; right: 8px; font-size: 12px; opacity: .85; }
|
||||
|
||||
/* 3) Platform brand colors & cover height tweaks (hard-coded colors on purpose) */
|
||||
/* Facebook */
|
||||
.social-media-demo #fb .btn.primary { background: #1877F2; }
|
||||
.social-media-demo #fb .cover { height: 312px; }
|
||||
@media (max-width: 480px) { .social-media-demo #fb .cover { height: 360px; } }
|
||||
|
||||
/* Twitter / X */
|
||||
.social-media-demo #x .btn.primary { background: #1D9BF0; }
|
||||
.social-media-demo #x .cover { height: 200px; background-color: #22303C; }
|
||||
@media (max-width: 480px) { .social-media-demo #x .cover { height: 160px; } }
|
||||
|
||||
/* LinkedIn */
|
||||
.social-media-demo #li .btn.primary { background: #0A66C2; }
|
||||
.social-media-demo #li .cover { height: 220px; background-color: #e6edf5; }
|
||||
@media (max-width: 480px) { .social-media-demo #li .cover { height: 160px; } }
|
||||
|
||||
/* Google Business Profile */
|
||||
.social-media-demo #gmb .btn.primary { background: #4285F4; }
|
||||
.social-media-demo #gmb .cover { height: 200px; }
|
||||
@media (max-width: 480px) { .social-media-demo #gmb .cover { height: 140px; } }
|
||||
|
||||
/* Instagram Business */
|
||||
.social-media-demo #ig .btn.primary { background: #E1306C; }
|
||||
.social-media-demo #ig .cover { height: 200px; }
|
||||
|
||||
/* YouTube Channel */
|
||||
.social-media-demo #yt .btn.primary { background: #FF0000; }
|
||||
.social-media-demo #yt .cover { height: 180px; }
|
||||
|
||||
/* TikTok Business */
|
||||
.social-media-demo #tt .btn.primary { background: #000000; color: #fff; }
|
||||
.social-media-demo #tt .cover { height: 200px; }
|
||||
|
||||
/* Pinterest Business */
|
||||
.social-media-demo #pin .btn.primary { background: #E60023; }
|
||||
.social-media-demo #pin .cover { height: 200px; }
|
||||
|
||||
/* Snapchat Public Profile */
|
||||
.social-media-demo #sc .btn.primary { background: #FFFC00; color: #000; }
|
||||
.social-media-demo #sc .cover { height: 160px; }
|
||||
|
||||
/* Reddit Community */
|
||||
.social-media-demo #rd .btn.primary { background: #FF4500; }
|
||||
.social-media-demo #rd .cover { height: 180px; }
|
||||
|
||||
/* 4) Image assignments — map classes to variables (swap vars to change images) */
|
||||
/* Facebook */
|
||||
.social-media-demo .fb-cover { background-image: var(--fb-cover-img); }
|
||||
.social-media-demo .fb-avatar { background-image: var(--fb-avatar-img); }
|
||||
|
||||
/* X */
|
||||
.social-media-demo .x-cover { background-image: var(--x-cover-img); }
|
||||
.social-media-demo .x-avatar { background-image: var(--x-avatar-img); }
|
||||
|
||||
/* LinkedIn */
|
||||
.social-media-demo .li-cover { background-image: var(--li-cover-img); }
|
||||
.social-media-demo .li-logo { background-image: var(--li-logo-img); }
|
||||
|
||||
/* Google Business */
|
||||
.social-media-demo .gmb-cover { background-image: var(--gmb-cover-img); }
|
||||
.social-media-demo .gmb-logo { background-image: var(--gmb-logo-img); }
|
||||
|
||||
/* Instagram */
|
||||
.social-media-demo .ig-cover { background-image: var(--ig-cover-img); }
|
||||
.social-media-demo .ig-avatar { background-image: var(--ig-avatar-img); }
|
||||
|
||||
/* YouTube */
|
||||
.social-media-demo .yt-cover { background-image: var(--yt-cover-img); }
|
||||
.social-media-demo .yt-avatar { background-image: var(--yt-avatar-img); }
|
||||
|
||||
/* TikTok */
|
||||
.social-media-demo .tt-cover { background-image: var(--tt-cover-img); }
|
||||
.social-media-demo .tt-avatar { background-image: var(--tt-avatar-img); }
|
||||
|
||||
/* Pinterest */
|
||||
.social-media-demo .pin-cover { background-image: var(--pin-cover-img); }
|
||||
.social-media-demo .pin-avatar { background-image: var(--pin-avatar-img); }
|
||||
|
||||
/* Snapchat */
|
||||
.social-media-demo .sc-cover { background-image: var(--sc-cover-img); }
|
||||
.social-media-demo .sc-avatar { background-image: var(--sc-avatar-img); }
|
||||
|
||||
/* Reddit */
|
||||
.social-media-demo .rd-cover { background-image: var(--rd-cover-img); }
|
||||
.social-media-demo .rd-avatar { background-image: var(--rd-avatar-img); }
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user