MediaWiki:KevinWordBubble/2.0.css

.eden-wb { --main-background-image: url('https://images.pexels.com/photos/129830/pexels-photo-129830.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'); --accent-background-image: url('https://images.pexels.com/photos/592063/pexels-photo-592063.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'); --main-color: #222; --accent-color: #538a74; --accent-color-hover: #a0d0b5; --theme-main: white; --theme-secondary: #222; --theme-drop-shadow: black; --theme-drop-shadow-opacity: rgba(0, 0, 0, 0.75); --backdrop-color: rgba(0, 0, 0, 0.35); --backdrop-blur: blur(2px); --font-stack: Raleway, 'Helvetica Neue', Helvetica, Arial, ui-sans-serif, sans-serif; --font-stack-content: 'Darker Grotesque', 'Helvetica Neue', Helvetica, Arial, ui-sans-serif, sans-serif; grid-template: "first-name content-container" 200px "misc-links content-container" 1fr / 200px 1fr; grid-gap: 10px; gap: 10px; width: calc(100% - 30px); height: 250px; margin: 15px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.eden-wb, .eden-wb .about-content-container { display: grid; }

.eden-wb, .eden-wb .first-name, .eden-wb .first-name > div:only-child, .eden-wb .first-name > div:nth-child(2), .eden-wb .content-container { position: relative; }

.eden-wb::before, .eden-wb::after, .eden-wb .first-name, .eden-wb .content-toggle, .eden-wb .content-container, .eden-wb .about-content-container, .eden-wb .roleplay-content-container, .eden-wb .info-label { box-sizing: border-box; }

.eden-wb::before, .eden-wb::after, .eden-wb .first-name > div:not(:only-child):first-child, .eden-wb .content-container::before, .eden-wb .about-content-container, .eden-wb .roleplay-content-container { position: absolute; }

.eden-wb::before, .eden-wb::after { content: ''; width: 30px; height: 30px; border-width: 2px; }

.eden-wb::before { top: -8px; left: -8px; border-style: solid none none solid; }

.eden-wb::after { bottom: -8px; right: -8px; border-style: none solid solid none; }

.eden-wb div::-webkit-scrollbar { width: 5px; height: 5px; } .eden-wb div::-webkit-scrollbar-track, .eden-wb div::-webkit-scrollbar-corner { background-color: transparent; } .eden-wb .roleplay-content-container *::selection { background-color: #222; }

.eden-wb .roleplay-content-container *::-moz-selection { background-color: #222; } .eden-wb *:focus { outline: none; }

.eden-wb .first-name, .eden-wb .content-toggle::before { font-weight: 900; text-transform: uppercase; }

.eden-wb .first-name, .eden-wb .content-container { background-size: cover; background-position: center; overflow: hidden; }

.eden-wb .first-name { grid-area: first-name; width: 200px; height: 200px; background-image: var(--accent-background-image); border-width: 3px; border-style: solid; font-family: var(--font-stack); font-size: var(--first-name-font-size, 35px); line-height: 87px; letter-spacing: 15px; word-break: break-all; padding: 10px 20px; }

.eden-wb .first-name > div:not(:only-child):first-child, .eden-wb .content-container::before, .eden-wb .about-content-container, .eden-wb .roleplay-content-container { top: 0; left: 0; }

.eden-wb .first-name > div:not(:only-child):first-child, .eden-wb .first-name > div:not(:only-child):first-child img, .eden-wb .content-container::before, .eden-wb .about-content-container, .eden-wb .roleplay-content-container { width: 100%; }

.eden-wb .first-name > div:not(:only-child):first-child, .eden-wb .first-name > div:not(:only-child):first-child img, .eden-wb .content-container::before { height: 100%; }

.eden-wb .first-name > div:only-child, .eden-wb .first-name > div:nth-child(2), .eden-wb .about-content-container, .eden-wb .roleplay-content-container { z-index: 2; }

.eden-wb .first-name > div:only-child, .eden-wb .first-name > div:nth-child(2) { -webkit-text-fill-color: transparent; }

.eden-wb .first-name > div:not(:only-child):first-child img { object-fit: cover; object-position: var(--main-image-position, center) }

.eden-wb .misc-links, .eden-wb .content-container, .eden-wb .info-label { font-size: 18px; }

.eden-wb .misc-links { grid-area: misc-links; display: flex; flex-direction: row; justify-content: space-around; align-items: center; background-color: var(--main-color); border-bottom-left-radius: 20px; padding: 0 5px 0 10px; }

.eden-wb .misc-links > div { line-height: 25px; }

.eden-wb .misc-links > div * { vertical-align: middle; }

.eden-wb .misc-links span.th::before, .eden-wb .misc-links span.th::before { color: var(--accent-color); transition: color 0.5s ease; }

.eden-wb .misc-links span.th:hover::before, .eden-wb .misc-links span.th:hover::before { color: var(--accent-color-hover); transition: color 0.5s ease; }

.eden-wb .content-toggle, .eden-wb .misc-links > div > * { cursor: pointer; }

.eden-wb .misc-links > div > a { text-decoration: none; }

.eden-wb .content-toggle { width: 60px; background-color: var(--accent-color); color: var(--main-color); font-size: 16px; border-radius: 20px; padding: 0 5px; transition: background-color 0.5s ease; }

.eden-wb .content-toggle:hover { background-color: var(--accent-color-hover); transition: background-color 0.5s ease; }

.eden-wb .content-toggle::before { content: 'About'; font-family: var(--font-stack); font-size: 12px; }

.eden-wb .content-toggle.roleplay::before { content: 'RP'; }

.eden-wb .content-container { grid-area: content-container; background-image: var(--main-background-image); border-width: 3px; border-style: solid; font-family: var(--font-stack-content); font-weight: 400; border-top-right-radius: 20px; }

.eden-wb .content-container::before { content: ''; background-color: var(--backdrop-color); -webkit-backdrop-filter: var(--backdrop-blur); backdrop-filter: var(--backdrop-blur); }

.eden-wb .about-content-container, .eden-wb .roleplay-content-container { margin: 20px 0; height: calc(100% - 40px); padding: 0 20px; overflow: auto; opacity: 0; transition: opacity 0.5s ease; }

.eden-wb .about-content-container.active, .eden-wb .roleplay-content-container.active { z-index: 3; opacity: 1; transition: opacity 0.5s 0.5s ease; }

.eden-wb .roleplay-content-container { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }

.eden-wb .roleplay-content-container, .eden-wb .roleplay-content-container p { color: white; line-height: 24px; text-shadow: 1px 1px 2px black; }

.eden-wb .about-content-container { grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; grid-gap: 20px 15px; gap: 20px 15px; }

.eden-wb .info-label, .eden-wb .content-toggle { text-align: center; } .eden-wb .info-label { width: fit-content; min-width: 40px; height: fit-content; min-height: 27px; line-height: 22px; padding: 0 10px 5px 10px; vertical-align: top; }

.eden-wb .info-label:nth-child(odd) { font-weight: 700; }

/* Light and Dark Mode Theming */ .eden-wb.dark-mode { --theme-main: #222; --theme-secondary: white; --theme-drop-shadow: white; --theme-drop-shadow-opacity: rgba(255, 255, 255, 0.5); }

.eden-wb::before, .eden-wb::after, .eden-wb .first-name, .eden-wb .misc-links, .eden-wb .content-container { filter: drop-shadow(1px 1px 3px var(--theme-drop-shadow-opacity)); }

.eden-wb::before, .eden-wb::after, .eden-wb .first-name, .eden-wb .content-container { border-color: var(--theme-main); } .eden-wb div::-webkit-scrollbar-thumb { background-color: var(--theme-main); }

.eden-wb .first-name > div:only-child, .eden-wb .first-name > div:nth-child(2) { filter: drop-shadow(1px 1px 1px var(--theme-drop-shadow)); -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px var(--theme-main); }

.eden-wb .about-content-container, .eden-wb .info-label, .eden-wb .info-label a { color: var(--theme-secondary); }

.eden-wb .info-label { background-color: var(--theme-main); filter: drop-shadow(1px 1px 2px var(--theme-drop-shadow-opacity)); }