mirror of
https://github.com/DerTyp7/teamspeak-obs-overlay.git
synced 2025-10-29 21:02:10 +01:00
2 lines
5.5 KiB
CSS
2 lines
5.5 KiB
CSS
.viewer{display:flex;flex-direction:column;padding:.5rem}.viewer h1{font-size:5vw}.viewer h1,.viewer p{background-color:#2f313680;padding:.25rem .5rem;border-radius:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:20ch;-webkit-user-select:none;user-select:none}.viewer .channelNameContainer{display:flex;align-items:center;margin-bottom:20px}.viewer .client{display:flex;flex-direction:row;gap:0 0;align-items:center;margin:.5rem 0}.viewer .client svg{width:5vw;aspect-ratio:1/1;margin-right:.5rem;filter:drop-shadow(0 0 .75rem rgba(15,15,15,.1))}.viewer .client p{font-size:5vw}@keyframes tooltipAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.generator{background-color:#232528;color:#fff;width:100%;display:flex;height:100%;flex-direction:column;align-items:center;gap:50px;padding:50px 0}.generator .headline{text-align:center;letter-spacing:1.8px}.generator .instructions{border-bottom:2px solid rgba(117,121,119,.4509803922);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px 50px;flex-wrap:wrap;padding-bottom:10px}.generator .instructions p,.generator .instructions a{font-size:.8rem}.generator .instructions p{color:#b4b4b4}.generator .output{display:flex;flex-direction:row;align-items:center;justify-content:center;column-gap:20px;position:relative;height:50px}.generator .output .url{white-space:nowrap;overflow:auto;font-weight:700;width:500px;padding:5px 10px;background-color:#313136;border-radius:5px;text-align:center}.generator .output .copy{padding:5px 10px;border:2px solid rgba(49,243,153,.4509803922);transition:all .1s ease-in-out}.generator .output .copy:hover{border-color:#42d486;background-color:transparent;color:#fff}.generator .output .copiedTooltip{opacity:0;position:absolute;right:-90px;background-color:#31f399;color:#202024;padding:5px 10px;border-radius:5px;font-size:.8rem;font-weight:700}.generator .generatorContent{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0 50px;gap:30px;width:100%}.generator .generatorContent .configurations{display:flex;flex-direction:column;align-items:center;height:100%;flex:1;gap:50px}.generator .generatorContent .configurations .options{display:flex;flex-direction:row;align-items:center;gap:100px;-webkit-user-select:none;user-select:none}.generator .generatorContent .configurations .options section{display:flex;flex-direction:column;align-items:center;justify-content:left;gap:10px}.generator .generatorContent .configurations .options .option{display:flex;flex-direction:row;align-items:center;justify-content:left;column-gap:10px;width:100%}.generator .generatorContent .configurations .options .option input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:2px solid #31f399;border-radius:5px;background-color:#202024;outline:none;transition:all .2s ease-in-out;position:relative;color:#fff;text-align:center;cursor:pointer}.generator .generatorContent .configurations .options .option input::-webkit-outer-spin-button,.generator .generatorContent .configurations .options .option input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.generator .generatorContent .configurations .options .option input:checked:after{content:"";position:absolute;width:10px;height:2px;background-color:#31f399;transform:rotate(45deg)}.generator .generatorContent .configurations .options .option input:checked:before{content:"";position:absolute;width:10px;height:2px;background-color:#31f399;transform:rotate(-45deg)}.generator .generatorContent .configurations .options .option input:checked:after,.generator .generatorContent .configurations .options .option input:checked:before{top:7px;left:3px}.generator .generatorContent .configurations .options .option input[type=number]{width:50px;height:25px;cursor:text;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.generator .generatorContent .configurations .options .option label{cursor:pointer}.generator .generatorContent .preview{flex:1;border:2px solid rgba(49,243,153,.4509803922)}.generator .generatorContent .preview .viewer{background-image:url(../images/viewer_example_background.png);background-repeat:no-repeat;background-size:cover;min-height:500px}@media screen and (max-width: 1200px){.generator .generatorContent{flex-direction:column}.generator .generatorContent .preview{width:80%}}@media screen and (max-width: 790px){.generator .output .url{width:300px}.generator .generatorContent .preview{width:100%}}@media screen and (max-width: 600px){.generator .output .url{width:200px}.generator .output .generatorContent .configurations .options{flex-direction:column;gap:30px}}*{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:1rem;margin:0;padding:0;box-sizing:border-box}body,html{min-height:100vh;min-width:100%;display:flex;overflow-x:hidden;color:#fff}#root{height:100%;min-width:100%}h1{font-size:1.8rem}h2{font-size:1.5rem}h3{font-size:1.2rem}h4{font-size:1.1rem}h1,h2,h3,h4,h5,h6{font-weight:700}a{color:#3abe78;font-weight:700;text-decoration:none;transition:all .1s ease-in-out}a:hover{color:#31f399}button{background-color:#202024;color:#fff;font-weight:700;border:2px solid #31f399;border-radius:5px;padding:10px 20px;cursor:pointer;transition:all .3s ease-in-out}button:hover{background-color:#42d486;color:#202024}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:#363638;border-radius:10px}::-webkit-scrollbar-thumb{background:rgba(49,243,153,.4509803922);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#48ee95}
|