defaultkavy
988a9be4c2
add: Timestamp element add: Float property fix: word-wrap: break-word on message and author-name element update: hide paid message on export css
2 lines
8.4 KiB
CSS
2 lines
8.4 KiB
CSS
.input-component{flex:1;display:flex;align-items:center;justify-content:space-between;padding:1rem;background-color:#ffffff15;border-radius:5px}.input-component input.value{font-family:Noto Sans Mono}.input-component .unit{display:none}.input-component select{height:2rem;width:100%;max-width:100px;border:none;padding:.4rem .6rem;background-color:#ffffff20;border-radius:5px;color:#fff}.input-component select option{background-color:#ffffff20;color:#000}.input-component.range>div{display:flex;gap:.2rem;align-items:center;justify-content:end}.input-component.range>div input.value{background-color:transparent;color:#fff;border:none;text-align:right;padding-top:.2rem;width:2rem}.input-component.range>div input.range{appearance:none;height:5px;background-color:#ffffff50;border-radius:10px;outline:none}.input-component.range>div input.range::-webkit-slider-thumb,.input-component.range>div input.range::-moz-range-thumb{background-color:#000}.input-component.color>div{display:flex;gap:.2rem;justify-content:end}.input-component.color input.value{background-color:transparent;color:#fff;border:none;text-align:right;padding-top:.2rem;width:4rem}.input-component.color input.color{padding:0;appearance:none;border:none;background-color:#0000;width:30px}:root{--background-color: #131313;--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}body{display:flex;justify-content:center;font-family:var(--font-family);overflow-y:scroll;overflow-x:hidden;background-color:var(--background-color);color:#fff;font-size:14px}html ::-webkit-scrollbar{background-color:var(--background-color);width:4px}html ::-webkit-scrollbar-thumb{background-color:#ffffff20}html ::-webkit-scrollbar-button{height:0;width:0}button{padding:10px;background-color:#0000;border:1px solid rgba(255,255,255,.1254901961);border-radius:10px;color:#fff;height:100%;cursor:pointer;font-family:var(--font-family)}button:hover,button:focus{background-color:#ffffff10;outline:none}button.done{background-color:#2abe5b}button.error{background-color:#e44141}.button-group{border:1px solid rgba(255,255,255,.1254901961);border-radius:10px;overflow:hidden;display:flex;align-content:stretch}.button-group span{padding:10px;color:#fffa;font-weight:700}.button-group button{border:none;border-radius:0}app{max-width:1200px;width:100%}app h1 span,app h1 a{font-size:14px;color:#ffffff90;font-weight:100;letter-spacing:.1rem;margin-left:10px}app h1 a{background-color:#ffffff10;padding:.1rem .3rem;border-radius:4px;text-decoration:none}app h1 a:hover{background-color:#ffffff20;color:#fff}app label,app button{user-select:none}app .content{display:flex;gap:1rem}@media (max-width: 1200px){app .content{flex-direction:column;justify-content:center;padding-bottom:50vh}}app .content .console{width:100%;max-width:60%}@media (max-width: 1200px){app .content .console{max-width:100%}}app .content .console .menu{display:flex;flex-direction:column;gap:1rem;position:sticky;top:0;background-color:#13131390;backdrop-filter:blur(10px);padding-block:1rem}app .content .console .menu .action-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}app .content .console .menu .action-row .role-list{display:flex;border:1px solid rgba(255,255,255,.1254901961);border-radius:10px;width:fit-content;overflow:hidden}app .content .console .menu .action-row .role-list button{color:#fffa;font-weight:700;border-radius:0;border:none;height:auto}app .content .console .menu .action-row .role-list>div{display:flex}app .content .console .menu .action-row .role-list>div .role{cursor:pointer;display:flex;align-items:center}app .content .console .menu .action-row .role-list>div .role input{display:none}app .content .console .menu .action-row .role-list>div .role label{cursor:pointer;padding:10px}app .content .console .menu .action-row .role-list>div .role:has(input:checked){background-color:#ffffff20}app .content .console .menu .action-row .role-list>div .role:hover{background-color:#ffffff10}app .content .console .menu .action-row .button-list{display:flex;height:100%;gap:.6rem}app .content .console .menu .element-list{display:flex;gap:.1rem}app .content .console .menu .element-list button{flex:1;background-color:transparent;white-space:nowrap;text-overflow:ellipsis;border:none;font-size:16px;padding-block:.6rem .4rem;padding-inline:1rem;cursor:pointer;color:#fff6;border-radius:5px}app .content .console .menu .element-list button.active{background-color:#ffffff20;color:#fff}app .content .console .menu .element-list button:hover{background-color:#ffffff10}app .content .console .style-panel{display:flex;flex-direction:column;gap:.6rem;padding-block:1rem}app .content .console .style-panel section{display:flex;flex-direction:column;gap:.3rem}app .content .console .style-panel section h3{font-size:14px;margin-block:.5em;font-weight:200;letter-spacing:.2rem;text-transform:uppercase}app .content .console .style-panel section header{display:flex;justify-content:space-between;align-items:center}app .content .console .style-panel section>div{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}app .content .console .style-panel section section{display:flex;flex-direction:column;gap:.4rem;border:2px solid rgba(255,255,255,.0823529412);border-radius:5px;padding:1rem}app .content .console .style-panel section section h4{margin:0;font-size:14px;font-weight:200}app .content .console .style-panel section section>div{display:flex;flex-direction:column;background-color:#ffffff15;border-radius:5px}app .content .console .style-panel section section>div .input-component{background-color:#0000}app .content .preview{border:1px solid rgba(255,255,255,.1254901961);border-radius:10px;padding:1rem;width:400px;height:80%;position:fixed;left:calc(50vw + 150px);display:flex;flex-direction:column}@media (max-width: 1200px){app .content .preview{left:0;top:50vh;height:50vh;width:100%;padding:0;border:none;background-color:var(--background-color)}}app .content .preview header{margin-block:.6rem;display:flex;flex-direction:column;gap:.6rem}app .content .preview header h2{margin-block:0}app .content .preview ytchat{flex:5;overflow-y:scroll;padding-right:2px}app .content .preview .input-panel{display:flex;flex-direction:column;gap:.4rem;padding-top:1rem}app .content .preview .input-panel div{display:flex;gap:.4rem;align-items:center}app .content .preview .input-panel select{height:2rem;width:100%;max-width:100px;border:none;padding:.4rem .6rem;background-color:#ffffff20;border-radius:5px;color:#fff}app .content .preview .input-panel select option{background-color:#ffffff20;color:#000}app .content .preview .input-panel textarea,app .content .preview .input-panel input{background-color:#ffffff20;border:none;padding:10px;height:1rem;color:#fff;border-radius:10px;resize:none;flex:5;font-family:var(--font-family);overflow:hidden}yt-live-chat-renderer yt-live-chat-header-renderer,yt-live-chat-renderer yt-live-chat-ticker-renderer,yt-live-chat-renderer yt-live-chat-message-input-renderer,yt-live-chat-renderer yt-reaction-control-panel-overlay-view-model{display:none!important}yt-live-chat-text-message-renderer{position:relative;overflow:hidden}yt-live-chat-text-message-renderer:hover .overlay{display:flex}yt-live-chat-text-message-renderer .overlay{position:absolute;height:100%;width:100%;top:0;left:0;background:linear-gradient(270deg,#000c,#00000080);user-select:none;pointer-events:none;display:none;justify-content:end;align-items:center;color:#ffffff90;padding-right:10px;box-sizing:border-box;font-weight:700;font-size:1.2rem}yt-live-chat-text-message-renderer #author-photo{overflow:hidden;flex-shrink:0}yt-live-chat-text-message-renderer #author-photo img{height:100%;width:100%}yt-live-chat-text-message-renderer #content{width:100%}yt-live-chat-text-message-renderer #content yt-live-chat-author-chip{align-items:unset!important}yt-live-chat-text-message-renderer #content yt-live-chat-author-chip #author-name{word-wrap:break-word}yt-live-chat-text-message-renderer #content yt-live-chat-author-chip #chat-badges{display:flex;align-items:center;gap:.2rem}yt-live-chat-text-message-renderer #content yt-live-chat-author-chip #chat-badges yt-live-chat-author-badge-renderer[type=moderator]{display:block;height:16px;width:16px;fill:#5e84f1}yt-live-chat-text-message-renderer #content yt-live-chat-author-chip #chat-badges yt-live-chat-author-badge-renderer[type=moderator] svg{height:100%;width:100%}yt-live-chat-text-message-renderer #content #message{word-wrap:break-word}yt-live-chat-text-message-renderer #menu{display:none}
|