209 lines
3.2 KiB
CSS
209 lines
3.2 KiB
CSS
#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;
|
|
} |