IW4M-Admin/Admin/webfront/main.css

237 lines
35 KiB
CSS
Raw Normal View History

* { margin: 0; padding: 0; }
html { background-color: rgb(34, 34, 34); color: rgb(204, 204, 204); font-family: 'Open Sans', serif; min-width: 720px; }
body { background-color: rgb(34,34,34); color: rgb(204, 204, 204); font-family: 'Open Sans'; }
a:link, a:visited, input[type="submit"], input[type="submit"]:hover { -webkit-transition: color 100ms ease-out; -moz-transition: color 100ms ease-out; -o-transition: color 100ms ease-out; transition: color 100ms ease-out; text-decoration: none; color: rgb(204, 204, 204); }
a:link:hover, a:visited:hover { color: rgb(0, 122, 204); }
.error { color: rgba(255, 69, 69, 0.85); }
div#header { border-bottom: solid #ff6633 1px; width: calc(100% - 10px); background-color: #181818; padding-left: 10px; }
div#header #navHeader { color: #fff; font-size: 4vw; width: 25vw; }
div#header #navContainer { display: table; width: 100%; }
div#header #navContainer .navEntry { display: table-cell; text-align: center; vertical-align: middle; }
div#header #navContainer .navEntry a { padding: 1.2vw; width: 4vw; }
div#header #navContainer .navEntry:hover { background-color: rgb(34, 34, 34); }
div#content { margin: 3em 10%; }
div#content .serverContainer { background-color: #191919; margin-top: 0; margin-bottom: 0; font-size: 1.25vw; padding-bottom: 100px; }
div#content hr { border-width: 0; height: 0.25em; background-color: #007ACC; }
div#content .serverInfo { width: 100%; }
div#content .serverInfo .tableCell { padding: 0 0.5em; }
div#content .serverTitle { width: calc( 100% / 3); background-color: #007ACC; }
div#content .serverPlayers { text-align: right; width: calc( 100% / 3); background-color: #007ACC; }
div#content .serverMap { text-align: center; width: calc( 100% / 3); background-color: #007ACC; }
div#content .serverPlayerList {float: right; margin: 0.5em; }
div#content .serverChatList { float: left; margin: 0.5em; max-width: 60%; overflow:hidden }
div#content .playerName { font-size: 1.1vw; color: rgba(78, 140, 77, 0.64); width: 10em; text-align: right; }
div#content .playerName:hover { color: rgb(0, 122, 204) !important; }
div#content .chatPlayerName { font-weight: bold; font-size: 1.1vw; color:#fff; padding-right: 0.5em; opacity: 0.5; }
div#content .chatPlayerMessage {font-size: 1.1vw; color: #fff; opacity: 1; }
div#content .playerPenalty, div#content .playerInfo { margin: 0 auto; padding: 1em 10px; background-color: #181818; width: calc(100% - 20px); }
div#content .penaltyName { width: 15%; }
div#content .penaltyName a:link, div#content .penaltyName a:visited, div#content .playerInfo a:link, div#content .playerInfo a:visited { color: rgb(0, 122, 204) !important; }
div#content .penaltyName a:hover, div#content .playerInfo a:hover { color: rgb(255, 255, 255) !important; opacity: 0.75; }
div#content .penaltyTime { text-align: left; width:8%; }
div#content .penaltyOrigin {width: 12%;}
div#content .penaltyRemaining { text-align: right; width: 10%; }
div#content .playerPenalty .penaltyTime { opacity: 0.5; }
div#content .penaltyType { width: 10%; }
div#content .penaltyReason { width: 45%; }
div#content .penaltyHeader, div#content .contentHeader { width: calc(100% - 20px); background-color: #007ACC; font-size: 15pt; padding: 0.5em 10px; }
div#content .alternate_1 { background-color: rgb(34, 34, 34); }
div#content #paginationButtons { color: #007ACC; font-size: 30pt; }
div#content #nextPage, div#content #previousPage { padding-right: 0.5em; padding-top: 0.5em; }
div#content .contentColumn { width: 16%; }
div#content .playerSearchWrap { width: 60%; margin-bottom: 3em; }
div#content .search { background-color: #181818; border: none; color: #fff; font-size: 16pt; width: 60%; font-size: 15pt; padding: 0.5em 10px; }
div#content .searchButton { width: 20%; background-color: #007ACC; font-size: 16pt; border: none; color: #fff; font-size: 15pt; padding: 0.5em 10px; margin-right: -5px; }
div#content .searchButton:hover { color: #fff; }
div#content .playerInfo .tableCell { width: 16%; }
div#content .hiddenElements { display: none; color: rgb(204, 204, 204); }
div#content .hiddenWrapper { color: #007ACC;}
div#content #consoleWrap { width: 60%; margin: 0 auto; }
div#content #console { padding: 1em; height: 35vh; background-color: #181818; }
div#content #consoleWrap .search { width: calc(80% - 10px); float: left; }
div#consoleWrap .playerSearchWrap input[type="text"]:focus, select:focus { border-width: 0; outline: none; }
div#consoleWrap .playerSearchWrap { margin: 0 !important; width: 100%; }
div#consoleWrap .searchButton { width: calc(20% - 10px); }
div#consoleWrap .searchButton:hover { background-color: #007ACC !important; }
input[type="text"], input[type="password"], textarea, select#threadCategory, select#serverSelection { margin: 0.25em; background-color: rgb(34, 34, 34); border: solid 1px rgb(55, 55, 55); color: #fff; font-size: 16pt; font-size: 15pt; padding: 0.5em 10px; }
select#serverSelection { background-color: #181818; margin: 0;}
input.search { margin: 0; }
input[type="submit"]:hover, div#submitReplyButton:hover { background-color: #ff6633 !important; }
label { text-align: right; }
div.infoBox .header { text-align: center; background-color: #007ACC; padding: 0.5em 0; width: 100%; margin: 0 auto; }
div.infoBox form { padding: 10px; }
div.infoBox { width: 50%; margin: 0 auto; background-color: #181818; border: 1em solid #007ACC; border-width: 0 0 0.25em 0; min-width: 550px; }
div.infoBox input[type="text"], div.infoBox input[type="password"] { width: 70%; }
div.infoBox input[type="submit"], #userCP input[type="submit"] { width: 20%; background-color: #007ACC; font-size: 16pt; border: none; color: #fff; font-size: 15pt; padding: 0.5em 10px; margin: 0.25em; }
div.alertBox { display: none; margin-top: 15px; margin-left: 15px; }
div#consoleWrap select { width: 100%; }
div#view { width: 100%; margin: 0 auto; }
div#threadView { width: 80%; padding-right: 3em;}
div#threadView hr { width: 100%; }
div#recentTitle { position: relative; top: -1em; }
div#view .threadPreview { background-color: #181818; padding: 0 10px; width: calc(100% - 20px); }
div#view .threadPreview .threadTitle { padding: 0 0.5em; width: 80%; }
div#view .threadPreview .threadInfo { font-size: 9pt; text-align: right; width: 50%; }
div#view .categoryDescription { font-size: 10.5pt; opacity: 0.5; margin-left: 2em; position: relative; top: -2.5px; }
div#content .individualThreadInfo { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 0.5em 1em; display: table; width: calc(100% - 2em); }
div#content .individualThreadInfo:nth-child(3) { border-bottom: none; padding-bottom: 0.5em; }
div#content .individualThreadInfo i { font-size: 16pt; width: 16pt; }
div.title a:link:hover, div.title a:visited:hover { color: #ff6633 !important; }
div#categoryHeader { font-size: 2em; position: relative; top: -15px; }
hr.simple { position: absolute; left: 0; width: 100% !important; border: none; height: 1px !important; background-color: rgba(255,255,255, 0.3) !important; margin: 1em 0; }
div#categoryContainer { width: 100%; background-color: rgb(24, 24, 24); margin-top: 1em; /*border: 1px solid rgba(255,255,255, 0.2); border-top: none; border-botom:*/ }
div#categoryContainer .categoryThread { padding: 0.5em; width: calc(100% - 1em); }
div#categoryContainer .categoryThread:nth-child(even) { background-color: rgb(19, 19, 19); }
div#categoryContainer .threadTitle { font-weight: bold; text-align: left; }
div#categoryContainer .threadAuthor { font-size: 0.75em; opacity: 0.5; font-style: italic; }
div#categoryContainer .threadTime { vertical-align: middle; text-align: right; }
div#categoryContainer .threadReplyCount { vertical-align: middle; width: 1em; text-align: center; padding: 0 0.5em; }
div#categoryContainer .threadReplyBG { background-color: #007ACC; width: 2em; height: 1.4em; border-radius: 8px; }
div#postThreadCaption, div#replyThreadCaption, div#submitReplyButton { background-color: #007ACC; padding: 0.5em 1em; opacity: 0.9; margin-top: -10px; }
div#replyThreadCaption { margin: 0; }
div#postThreadCaption:hover, div#replyThreadCaption:hover { color: #fff; opacity: 1; }
div#postThreadContainer, div#threadContainer { width: 80%; margin: 0 auto; }
textarea#threadContent { width: calc(100% - 40px); height: 20em; font-size: 12pt; max-width: calc(100% - 40px); min-width: calc(100% - 40px);}
select#threadCategory { border: solid 1px rgb(55, 55, 55); width: 25%; }
input#threadTitle { width: calc(75% - 50px); }
div#threadContainer .userInfo { width: 10em; padding: 1em; margin: 0 auto; text-align: center; }
div#threadContainer .threadInfo { padding: 1em; vertical-align: top; background-color: #181818; }
div#threadContainer .threadStart { border-bottom: 1px solid rgba(255,255,255,0.2); }
div.threadInfo .threadTitle { font-size: 24pt; word-break: break-all; }
div#threadContainer .userAvatar { margin: 0.5em 0; width: 10em; height: 10em; text-align: center; background-size: contain; border-radius: 10px; background-repeat: no-repeat; background-position: center center; }
div#threadContainer .threadContent { margin: 1em 0; font-size: 11pt; word-break: break-all; }
div#threadContainer .threadContent img { max-width: 100%;}
div#threadContainer .threadContent a { color: rgb(0, 122, 204) !important; }
div#threadContainer .threadContent a:hover { color: #fff !important; }
div.threadContent ol, div.threadContent ol { margin: 1em; }
div.categoryThread .threadActions { color: rgba(255, 69, 69, 0.85); font-size: 18pt; width: 19px; }
div#postReplyContainer { position: fixed; bottom: 0; left: 0; width: 100%; height: 20em; background-color: #181818; }
div#postReplyClose { position: absolute; right: 0.25em; font-size: 24pt; }
div#postReplyClose:hover { color: #007ACC; cursor: pointer; }
div#replyContentContainer { width: 68%; margin: 0.75em auto; }
textarea#replyContentBox { background-color: rgb(14,14,14); width: 100%; height: 10em; margin: 0.5em 0; resize: none; overflow:hidden }
div#submitReplyButton { margin: 0; width: 3em; text-align: center; cursor: pointer; }
div#textNav { position: relative; top: -1.5em; word-break: break-all; }
.categoryThread .fa-circle-o { width: 1em; padding-right: 0.5em; display: table-cell; vertical-align: middle; }
div #userCover {
position: absolute;
left: 0;
padding: 0.5em 0;
width: 100%;
background: #ff6633;
font-size: 24pt;
text-align: center;
color: #fff;
margin-top: -1.5em;
}
div#userInfoBox { background-color: #181818; padding: 1em; padding-top: 2em; width: 65%; margin: 0 auto; }
div#userInfoBox .fa { font-size: 3em; width: 65px; padding: 0.25em 0; }
div.userInfoField .tableCell { vertical-align: middle; padding-right: 1em; padding-left: 0.25em; }
div#userAvatar { width: 20em; height: 20em; background-size: contain; margin-right: 1.5em; border-radius: 50px; background-position: center center; background-color: rgba(0,0,0,0.1); }
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('data:image/gif;base64,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
background-repeat: no-repeat;
background-position: center center;
background-size: 5%;
opacity: 0.5;
display: none;
}
.table { display: table; }
.tableCell { display: table-cell; }
.alignRight { text-align: right; }
.themeBlue { color: #007ACC !important; }
.themeBlue:hover { color: #fff !important; }
.themeOrange { color: #ff6633; }
.themeOrange:hover{ color: #007ACC !important; }
div.threadInfo .actionHover { float: right; color: rgba(255, 69, 69, 0.85); margin: 0 4px; }
.actionHover { cursor: pointer; }
.actionHover:hover { color: #007ACC !important; }
.actionHover.actionEdit { color:#007ACC !important; }
.datThing { background-color: #007ACC; font-size: 16pt; border: none; color: #fff; font-size: 15pt; padding: 0.5em 10px; }
span.light { opacity: 0.5; }
span.userTitle span:hover {color: #007ACC !important; }
input#bannercolor { margin: 0.35em; width: 265px; border: none; height: 45px; }
div#footer { position: fixed; bottom: 0.5em; right: 0.5em; opacity: 0.5; }
.privilege-title { font-size: 24pt; }
.privilege-title + hr { margin-bottom: 10px; }
.privilege hr { margin-top: 10px !important; }
.admin-name a { font-size: 14pt; color: #007ACC !important; }
.admin-name a:hover { color: #fff !important; }
.clients { margin: 0.5em; }
.canvasjs-chart-credit { display: none; }
.player-history { margin-top: -100px; height: 100px; }
.stats-minimap-image { height: 512px; width: 512px; }
.stats-minimap-container { max-width: 512px; margin: 2em 0; float: left;}
#stats { width: 100%; }
.stats-serverinfo { float: left;margin: 2em 1em; font-size: 16pt; }
#KillEventCount { margin-bottom: 1em; }
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
background: rgb(24,24,24);
outline: 1px rgba(255, 255, 255, 0.1) solid;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #007ACC;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #007ACC;
cursor: pointer;
}