248 lines
6.8 KiB
CSS
248 lines
6.8 KiB
CSS
/* ----- Smoothing default CyTube CSS (works without JS) ----- */
|
|
|
|
|
|
/* -- body -- */
|
|
|
|
body {overflow-x:hidden}
|
|
|
|
/* -- buttons -- */
|
|
|
|
.btn {text-shadow:none}
|
|
|
|
/* -- modal windows -- */
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.modal-dialog {max-width:950px !important; margin-top:10px}
|
|
}
|
|
|
|
/* -- brand -- */
|
|
|
|
.navbar-brand {cursor:default}
|
|
|
|
/* -- MOTD -- */
|
|
|
|
#motdwrap {padding:10px; border-color:white; box-shadow:none}
|
|
#togglemotd {margin-top:-5px}
|
|
|
|
/* -- superadmin icon -- */
|
|
|
|
.glyphicon-globe {margin-right:3px}
|
|
|
|
/* -- playlist row panes -- */
|
|
|
|
#rightpane, #leftpane {margin-top:5px !important; margin-bottom:5px !important}
|
|
|
|
/* -- left pane wells -- */
|
|
|
|
#leftpane .well {margin-bottom:5px}
|
|
|
|
/* -- queue titles -- */
|
|
|
|
.qe_title {margin-left:4px}
|
|
|
|
/* -- footer -- */
|
|
|
|
#footer {padding-bottom:5px; height:auto}
|
|
|
|
|
|
/* ----- Patching CSS after loading JS (comments only here, actual patches in the JS) ----- */
|
|
|
|
|
|
/*
|
|
#mainpage {padding-top:52px}
|
|
#motdrow, #announcements, #main, #playlistrow {border:solid 2px transparent; margin-bottom:5px}
|
|
#main > div, #playlistrow > div {
|
|
padding-left:5px; padding-right:5px; margin-top:5px; margin-bottom:5px;
|
|
}
|
|
#motdwrap {margin:5px -10px}
|
|
#announcements .alert {margin:0px -10px 5px}
|
|
#drinkcount {margin:0px}
|
|
*/
|
|
|
|
|
|
/* ----- CyTube Plus created elements CSS ----- */
|
|
|
|
|
|
/* -- channel avatar -- */
|
|
|
|
#chanavatar {margin-right:10px}
|
|
|
|
/* -- azuki row (user top logo) -- */
|
|
|
|
#azukirow {
|
|
padding-left:5px; padding-right:5px; border-left:solid 2px transparent; border-right:solid 2px transparent;
|
|
background:transparent; background-repeat:no-repeat !important; background-position:center center !important;
|
|
margin:0px -8px; min-height:5px;
|
|
}
|
|
|
|
/* -- MOTD elements -- */
|
|
|
|
#motdlogo {margin-bottom:8px}
|
|
#motdtabswrap {margin-top:8px}
|
|
.motdtabs-btn {margin-right:5px}
|
|
#motdtabscontent {padding:10px 5px}
|
|
|
|
/* -- rules button and panel -- */
|
|
|
|
#rulesbtnwrap {text-align:center}
|
|
#rules-btn {margin-top:10px; margin-bottom:5px}
|
|
#rulespanel-outer {width:100%; padding:0px}
|
|
#rulespanel {
|
|
max-width:700px; margin:0 auto; margin-top:0px; padding:4px; border:solid 2px white; text-align:left;
|
|
border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px;
|
|
}
|
|
|
|
/* -- attention bar -- */
|
|
|
|
#attbarrow-outer {padding:0px 5px}
|
|
#attbar {height:22px; background-color:white}
|
|
|
|
/* -- full-sized title row -- */
|
|
|
|
#titlerow {
|
|
background-color:white;
|
|
background-image:linear-gradient(to right, #cccccc, #cccccc);
|
|
background-position:0px center;
|
|
background-size:0% 100%; background-repeat:no-repeat;
|
|
margin:-5px -8px 5px;
|
|
border-radius:4px;
|
|
}
|
|
#titlerow-outer {
|
|
padding:3px 5px; text-align:center; font-size:16pt; color:black;
|
|
text-shadow: 0px 0px 10px #666666, 0px 0px 10px #666666;
|
|
}
|
|
#titlerow #currenttitle {border:none; background:transparent}
|
|
|
|
/* -- media info bar -- */
|
|
|
|
#mediainfo {
|
|
background:transparent; margin-bottom:0px; border-width: 1px 1px 0px; border-style:solid solid none;
|
|
border-color:#CCC #CCC -moz-use-text-color; border-radius:5px 5px 0px 0px;
|
|
}
|
|
|
|
/* -- player alert (if hidden video after loading) -- */
|
|
|
|
#ytapiplayer .alert {text-align:left; margin:0px -15px}
|
|
|
|
/* -- player covering layer -- */
|
|
|
|
#coverpl {
|
|
position:absolute; left:5px; top:0px; background-color:white;
|
|
background-repeat:no-repeat; background-position:center center;
|
|
}
|
|
|
|
/* -- sounds and admin panels GUI layers -- */
|
|
|
|
#sounds-dropdown, #chatfunc-dropdown {
|
|
position:absolute; top:22px; display:block; z-index:10000; padding:5px;
|
|
overflow:auto; margin-right:5px;
|
|
}
|
|
#muteall-btn, #spamclear-btn, #antiafk-btn {width:100%}
|
|
|
|
/* -- chat controls buttons group -- */
|
|
|
|
#chatcontrols {margin-top:4px}
|
|
|
|
/* -- chat elements -- */
|
|
|
|
.squavatar {width:24px; height:24px; margin-right:3px; border:solid 6px; vertical-align:middle; display:inline-block}
|
|
.avatar {margin-right:3px}
|
|
.server-whisper + .squavatar {display:none}
|
|
.globalmod {margin-right:2px}
|
|
.embedimg {max-width:200px; max-height:300px}
|
|
.embedvid {max-width:200px; max-height:300px; border:0px; vertical-align:middle}
|
|
|
|
/* -- main fonts and emotes GUI layer -- */
|
|
|
|
#chatpanel {margin-top:0px; margin-bottom:0px}
|
|
#fontspanel, #emotespanel {
|
|
text-align:center; max-width:700px; margin:0px auto 5px auto; border:solid 2px white; border-radius:6px
|
|
}
|
|
.fluidpanel {max-width:1200px !important}
|
|
|
|
/* -- fonts panel -- */
|
|
|
|
#fontsbtnwrap {margin-top:5px; margin-bottom:5px}
|
|
#unibtnwrap {margin:5px 45px 2px}
|
|
@media (max-width:767px) {
|
|
#unibtnwrap {margin:5px 25px 2px}
|
|
}
|
|
#fontsbtnwrap .btn, #unibtnwrap .btn {margin:0px 3px 3px 3px}
|
|
|
|
/* -- emotes panel -- */
|
|
|
|
#emotespanel img {margin:5px; max-height:35px; cursor:pointer}
|
|
#emotesbtnwrap {text-align:center; margin:5px}
|
|
#emotespanel .alert {text-align:left; margin:5px -10px}
|
|
|
|
/* -- advanced playlist controls -- */
|
|
|
|
#advplcontrols {width:100%; padding-top:10px}
|
|
#advplcontrols button {width:25%}
|
|
|
|
/* -- database and galleries buttons gruoup -- */
|
|
|
|
#leftpanecontrols {margin-right:5px}
|
|
|
|
/* -- layout configuration box toggling button -- */
|
|
|
|
#layout-btn {margin-left:5px}
|
|
|
|
/* -- various configuration box elements -- */
|
|
|
|
#configbtnwrap, #modewrap, #themewrap, #funcbtnwrap, #cleardbwrap, #gallery-well, #hidewrap, #embedwrap {
|
|
text-align:center;
|
|
}
|
|
.conf-cap {padding-top:9px}
|
|
#mode-sel, #theme-sel, #gal-sel {width:80%; margin:0px auto}
|
|
.theme-header {text-align:center; font-size:9pt; font-style:italic}
|
|
#embed-help {cursor:pointer; margin-left:7px}
|
|
|
|
/* -- channel database -- */
|
|
|
|
.db-cat {overflow:auto; max-height:400px}
|
|
.db-break {width:100%}
|
|
.db-title {margin-left:4px}
|
|
.db-link {margin-left:5px}
|
|
#previewFrame {margin:0 auto; display:block}
|
|
|
|
/* -- channel galleries -- */
|
|
|
|
#galleryFrame {margin-bottom:10px}
|
|
#gal-sel {margin-bottom:20px}
|
|
|
|
/* -- custom footer -- */
|
|
|
|
#leftfooter {font-size:10pt}
|
|
div[id="leftfooter"] {text-align:center; margin-bottom:5px}
|
|
#rightfooter {float:right; margin:0px 0px 15px 15px}
|
|
|
|
|
|
/* ----- Additional JS classes ----- */
|
|
|
|
|
|
.relative {position:relative}
|
|
|
|
.covered {visibility:hidden; opacity:0}
|
|
|
|
.dist {background-color:gold; color:red; font-size:12pt; font-family:times new roman; padding:3px}
|
|
|
|
.mX {
|
|
-webkit-transform:scaleX(-1); -moz-transform:scaleX(-1); transform:scaleX(-1);
|
|
-ms-transform:scaleX(-1); -o-transform:scaleX(-1);
|
|
}
|
|
|
|
.mY {
|
|
-webkit-transform:scaleY(-1); -moz-transform:scaleY(-1); transform:scaleY(-1);
|
|
-ms-transform:scaleY(-1); -o-transform:scaleY(-1);
|
|
}
|
|
|
|
.rotate {
|
|
-webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); transform:rotate(180deg);
|
|
-ms-transform:rotate(180deg); -o-transform:rotate(180deg);
|
|
}
|
|
|
|
.vertical {
|
|
-webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); transform:rotate(270deg);
|
|
-ms-transform:rotate(270deg); -o-transform:rotate(270deg);
|
|
} |