MediaWiki:KevinWordBubbleMinima.css

.minima-ui { position: relative; display: flex; width: 100%; height: 350px; background-image: url('https://vignette.wikia.nocookie.net/kevins-sandbox/images/2/26/Background.png/revision/latest?cb=20170325050445'); background-size: cover; color: rgba(255, 255, 255, 0.75); font-family: century gothic; border-radius: 10px; overflow: hidden; cursor: default; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

.minima-ui *::-webkit-scrollbar { width: 10px; } .minima-ui *::-webkit-scrollbar-track { background-color: transparent; } .minima-ui *::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.5); border-top-left-radius: 100px 200px; border-top-right-radius: 0; border-bottom-left-radius: 100px 200px; border-bottom-right-radius: 0; } .minima-ui *::-webkit-scrollbar-corner { background: transparent; } .minima-ui .character-info::-webkit-scrollbar, .minima-ui .character-info *::-webkit-scrollbar { width: 10px; height: 10px; } .minima-ui .character-info::-webkit-scrollbar-track, .minima-ui .character-info *::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, 0.25); border-radius: 10px; } .minima-ui .character-info::-webkit-scrollbar-thumb, .minima-ui .character-info *::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.25); border-radius: 100px; } .minima-ui .character-info::-webkit-scrollbar-corner, .minima-ui .character-info *::-webkit-scrollbar-corner { background: transparent; } .minima-ui ::selection { background-color: rgba(0, 0, 0, 0.35); text-shadow: none; } .minima-ui ::-moz-selection { background-color: rgba(0, 0, 0, 0.35); text-shadow: none; } .minima-ui .overlay-header { position: absolute; bottom: 6px; left: 6px; z-index: 2; width: calc(100% - 12px); height: 60px; color: rgba(255, 255, 255, 0.75); font-size: 185%; line-height: 60px; text-align: center; overflow: auto; } .minima-ui.light .overlay-header { background-image: linear-gradient(to top, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%); } .minima-ui.dark .overlay-header { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%); } .minima-ui .overlay-header > a { color: rgba(255, 255, 255, 0.75); } .minima-ui div.character-image { width: auto; max-width: 40% !important; height: auto; border: 6px double rgba(0, 0, 0, 0.5); border-right: transparent; border-radius: 10px 0 0 10px; overflow: hidden; } .minima-ui .main { position: relative; flex-grow: 1; height: auto; border: 6px double rgba(255, 255, 255, 0.35); border-left: transparent; border-radius: 0 10px 10px 0; } .minima-ui.light .main { background-image: linear-gradient(45deg, transparent 0%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.2) 100%); } .minima-ui.dark .main { background-image: linear-gradient(45deg, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.5) 100%); } .minima-ui .roleplay-text { position: absolute; top: 5%; right: 5%; width: 90%; height: 150px; padding: 10px; box-sizing: border-box; border-radius: 10px; font-size: 15px; text-shadow: 1px 1px 8px #000000; white-space: pre-wrap; overflow: auto; user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; scrollbar-track-color: #e6e6e6; scrollbar-arrow-color: #e6e6e6; scrollbar-face-color: #b9b9b9; scrollbar-highlight-color: #b9b9b9; scrollbar-3dlight-color: #b9b9b9; scrollbar-shadow-color: #b9b9b9; scrollbar-darkshadow-color: #b9b9b9; } .minima-ui.light .roleplay-text { background-color: rgba(255, 255, 255, 0.2); } .minima-ui.dark .roleplay-text { background-color: rgba(0, 0, 0, 0.35); } .minima-ui .character-info { position: absolute; bottom: calc(5% + 50px); right: 5%; width: 90%; height: calc(160px - 20%); color: rgba(255, 255, 255, 0.65); padding-right: 15px; box-sizing: border-box; overflow: auto; scrollbar-track-color: #e6e6e6; scrollbar-arrow-color: #e6e6e6; scrollbar-face-color: #b9b9b9; scrollbar-highlight-color: #b9b9b9; scrollbar-3dlight-color: #b9b9b9; scrollbar-shadow-color: #b9b9b9; scrollbar-darkshadow-color: #b9b9b9; } .minima-ui .character-info-flex { display: flex; width: 100%; height: calc(50% - 30px); flex-wrap: wrap; justify-content: space-between; } .minima-ui .character-info-item { display: inline-flex; margin-top: 10px; width: auto; height: 30px; border-left: 4px solid rgba(255, 255, 255, 0.35); padding-left: 10px; font-size: 105%; line-height: 30px; } .minima-ui .character-info-header { font-size: 120%; text-shadow: 1px 1px 5px #000000; } .minima-ui .character-info-text { flex-grow: 1; height: inherit; padding: 0 15px; text-shadow: 1px 1px 8px #000000; text-align: center; word-break: break-word; overflow: auto; scrollbar-track-color: #e6e6e6; scrollbar-arrow-color: #e6e6e6; scrollbar-face-color: #b9b9b9; scrollbar-highlight-color: #b9b9b9; scrollbar-3dlight-color: #b9b9b9; scrollbar-shadow-color: #b9b9b9; scrollbar-darkshadow-color: #b9b9b9; }