Styling
This commit is contained in:
parent
10b01b713e
commit
316089176a
210
css/main.css
210
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}
|
||||
#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;
|
||||
}
|
Loading…
Reference in New Issue