MediaWiki:KevinWordBubble2.0.css

.eden-wb { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 200px 1fr; grid-gap: 10px; position: relative; margin: 15px 10px; width: calc(100% - 20px); height: 250px; user-select: none; }

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

.eden-wb::before { top: -8px; left: -8px; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; }

.eden-wb::after { bottom: -8px; right: -8px; border-bottom: 2px solid #ffffff; border-right: 2px solid #ffffff; }

.eden-wb div::-webkit-scrollbar { width: 5px; height: 5px; } .eden-wb div::-webkit-scrollbar-track { background-color: transparent; } .eden-wb div::-webkit-scrollbar-thumb { background-color: #ffffff; } .eden-wb div::-webkit-scrollbar-corner { background: transparent; }

.eden-wb .character-module { grid-area: 1 / span 1 / 1 / span 1; position: relative; width: 200px; height: 200px; border: 5px solid #ffffff; background-image: url('https://images.unsplash.com/photo-1500882644194-b83ebad474e9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2036&q=80'); background-size: cover; background-position: center; box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.65); font-family: Raleway, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, sans-serif; line-height: 85px; text-transform: uppercase; letter-spacing: 15px; word-break: break-all; overflow: hidden; padding: 10px; box-sizing: border-box; }

.eden-wb .character-module > div { position: relative; z-index: 2; font-size: 60px; font-weight: 900; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #ffffff; }

.eden-wb .character-module > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

.eden-wb .content-container { grid-area: 1 / 2 / span 2 / span 1; position: relative; border: 5px solid #ffffff; background-image: url('https://images.unsplash.com/photo-1500882644194-b83ebad474e9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2036&q=80'); background-size: cover; background-position: center; color: #ffffff; box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.65); font-family: "Darker Grotesque", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, sans-serif; font-weight: 400; font-size: 18px; line-height: 20px; box-sizing: border-box; }

.eden-wb .content-container::before { content: ''; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

.eden-wb .misc-links { grid-area: 2 / 1 / span 1 / span 1; display: flex; flex-direction: row; justify-content: space-around; align-items: center; background-color: #ffffff; color: #222222; box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.65); font-size: 18px; }

.eden-wb .misc-links > span:last-child { width: 45px; text-align: center; }

.eden-wb .toggle::before, .eden-wb .toggle::after { font-family: Raleway, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, sans-serif; font-weight: 500; font-variant: all-small-caps; }

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

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

.eden-wb .about-content, .eden-wb .roleplay-content { position: absolute; top: 0; left: 0; z-index: 3; margin: 20px 0; width: 100%; height: calc(100% - 40px); padding: 0 20px; box-sizing: border-box; overflow: auto; opacity: 1; transition: opacity 0.5s 0.5s ease; }

.eden-wb .about-content.hidden, .eden-wb .roleplay-content.hidden { z-index: 2; opacity: 0; transition: opacity 0.5s ease; }

.eden-wb .about-content { color: #222222; }

.eden-wb .about-row { width: 100%; height: auto; } .eden-wb .about-row:not(:last-child) { margin-bottom: 20px; }

.eden-wb .about-row-left, .eden-wb .about-row-right { display: inline-block; height: auto; } .eden-wb .about-row-left { width: calc(50% - 20px); } .eden-wb .about-row-right { margin-left: 10px; width: 50%; } .eden-wb .about-label { display: inline-block; position: relative; width: auto; min-width: 40px; max-width: 100%; height: auto; min-height: 26px; background-color: #ffffff; box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.15); line-height: 22px; text-align: center; padding: 0 10px 4px 10px; vertical-align: top; box-sizing: border-box; }

/* Dark Mode */ .eden-wb.dark-mode::before, .eden-wb.dark-mode::after { border-color: #222222; } .eden-wb.dark-mode div::-webkit-scrollbar-thumb { background-color: #222222; }

.eden-wb.dark-mode .character-module { border-color: #222222; }

.eden-wb.dark-mode .character-module > div { -webkit-text-stroke: 3px #222222; }

.eden-wb.dark-mode .misc-links { background-color: #222222; color: #ffffff; }

.eden-wb.dark-mode .content-container { border-color: #222222; }