diff --git a/css/main.css b/css/main.css index 0cf9eb6b..fbb1954c 100644 --- a/css/main.css +++ b/css/main.css @@ -1 +1,209 @@ -#emote-menu,#tc-settings-panel-body{overflow:auto}#twitchcord-button-container{position:absolute;width:50px;height:45px;right:0;top:0;display:block}#twitchcord-button{position:absolute;width:50px;height:100%;background-image:url(https://static-cdn.jtvnw.net/jtv_user_pictures/chansub-global-emoticon-9f2ac5d4b53913d7-24x18.png);background-repeat:no-repeat;background-size:36px;background-position:7px}#emote-menu{background:#2f2f2f;height:450px;width:300px;position:absolute;bottom:45px;right:0;border:1px solid #000;border-radius:15px 0 0}#emote-menu-header{width:100%;height:36px;background:#36483e;border-bottom:1px solid #000}#emote-menu-header span{width:100%;text-align:center;display:block;line-height:36px;font-weight:700;color:#ADADAD}#emote-container{padding:10px}.emote-container{display:inline-block;padding:2px;border-radius:5px;width:30px;height:30px;position:relative}.emote-container img{max-width:100%;max-height:100%;position:absolute;margin:auto;top:0;right:0;bottom:0;left:0}.emote-container:hover{background:rgba(123,123,123,.37)}//settings panel #tc-settings-panel{position:fixed;width:50%;height:75%;background:#2e3136;display:block;z-index:9001;margin-left:25%;margin-top:5%;border:1px solid #000;box-shadow:0 0 20px 0 #000;max-height:800px}#tc-settings-panel-header{background:#36393e;height:60px;border-bottom:1px solid #000;box-shadow:0 1px 0 0 #4e4e4e}#tc-settings-panel-header h2{margin:0 0 0 10px;line-height:60px;color:#ADADAD;display:inline-block;float:left}#tc-settings-panel-header span{float:right;display:inline;line-height:50px;margin-right:15px;font-size:29px;font-weight:700;color:#ADADAD}#tc-settings-panel-body ul{padding:0;margin-top:0;border-bottom:1px solid #000}#tc-settings-panel-body ul li{padding:15px;color:#ADADAD;background:#2E3136;border-bottom:1px solid #000;box-shadow:0 1px 0 #404040 inset}#tc-settings-panel-body ul li:nth-child(odd){background:#33363B}#tc-settings-panel-body ul li h2{display:inline}#tc-links a{color:#FFF}#tc-settings-panel-footer{background:#36393e;height:40px;position:absolute;bottom:0;right:0;left:0;border-top:1px solid #000;box-shadow:0 1px 0 #505050 inset;line-height:40px;padding-left:10px;color:#ADADAD!important}.tc-switch,.tc-switch span{display:inline-block;height:24px}#tc-links{float:right;margin-right:10px}.tc-switch{background:#2e3136;width:100px;float:right;padding:7px;margin:-7px;border:1px solid #000;outline:#404040 solid 1px}.tc-switch span{line-height:24px;width:50px;text-align:center} \ No newline at end of file +#twitchcord-button-container { + position:absolute; + width:50px; + height:45px; + right:0; + top:0; + display:block; +} + +#twitchcord-button { + position:absolute; + width:50px; + height:100%; + background-image:url(https://static-cdn.jtvnw.net/emoticons/v1/5/1.0); + background-repeat:no-repeat; + background-size:36px; + background-position:7px; +} + +.twitchcord-button-open { + background-image:url(https://static-cdn.jtvnw.net/emoticons/v1/3/1.0) !important; } + +#emote-menu { + background:#2E3136; + height:0; + width:300px; + position:absolute; + bottom:45px; + right:0; + border:1px solid #000; + border-radius: 5px 5px 0 0; + overflow:auto; + visibility:hidden; + transition: all 1s; + -webkit-transition: all 1s; +} + +.emotemenu-open { + height:450px !important; + visibility:visible !important; +} + +#emote-menu-header { + width:100%; + height:36px; + background:#36393E; + border-bottom:1px solid #000; +} + +#emote-menu-header span { + width:100%; + text-align:center; + display:block; + line-height:36px; + font-weight:bold; + color:#ADADAD; +} + +#emote-container { + padding:10px; +} + +.emote-container { + display:inline-block; + padding:2px; + border-radius:5px; + width:30px; + height:30px; + position:relative; +} + +.emote-container img { + max-width:100%; + max-height:100%; + position:absolute; + margin:auto; + top:0; + right:0; + bottom:0; + left:0; + cursor:pointer; +} + +.emote-container:hover { + background: rgba(123, 123, 123, 0.37); +} + +#tc-settings-panel { + position:fixed; + width:50%; + height:75%; + background:rgb(46,49,54); + display:block; + z-index:9001; + margin-left:25%; + margin-top:5%; + border:1px solid #000; + box-shadow:0 0 20px 0 #000; + max-height:800px; +} + +#tc-settings-panel-header { + background:rgb(54,57,62); + height:60px; + border-bottom:1px solid #000; + box-shadow:0 1px 0 0 rgb(78,78,78); +} + +#tc-settings-panel-header h2 { + margin:0; + line-height:60px; + margin-left:10px; + color:#ADADAD; + display:inline-block; + float:left; +} + +#tc-settings-panel-header span { + float:right; + display:inline; + line-height:50px; + margin-right:15px; + font-size:29px; + font-weight:bold; + color:#ADADAD; +} + +#tc-settings-panel-body { + overflow:auto; +} + +#tc-settings-panel-body ul { + overflow: auto; + position:absolute; + padding:0; + margin-top:0; + border-bottom:1px solid #000; + left:0; + right:0; + bottom:0; + top:61px; +} + +#tc-settings-panel-body ul li { + padding:15px; + color:#ADADAD; + background:#2E3136; + border-bottom:1px solid #000; + box-shadow:0 1px 0 #404040 inset; +} + +#tc-settings-panel-body ul li:nth-child(odd) { + background:#33363B; +} + +#tc-settings-panel-body ul li h2 { + display:inline; +} + +#tc-links a { + color:#FFF; +} + +#tc-settings-panel-footer { + background: rgb(54,57,62); + height:40px; + position:absolute; + bottom:0; + right:0; + left:0; + border-top:1px solid #000; + box-shadow:0 1px 0 #505050 inset; + line-height:40px; + padding-left:10px; + color:#ADADAD !important; +} + +#tc-links { + float:right; + margin-right:10px; +} + +.tc-switch { + background: rgb(46, 49, 54); + width: 100px; + height: 24px; + display: inline-block; + float: right; + margin: -7px; + border: 1px solid #000; + outline: 1px solid #404040; + cursor:pointer; +} + +.tc-switch span { + line-height:24px; + display:inline-block; + width:50px; + text-align:center; + height:24px; +} + +.tc-switch-on.active { + background:green; +} + +.tc-switch-off.active { + background:#860606; +} \ No newline at end of file