d644ef64bd
For now only alert windows are converted automatically. You can alert custom
HTML code like so: alert('<strong>herp a derp</strong>', true);
Main can use this feature immediately, all plugins that are advertized to be
stable may only use this once 0.7 is released.
714 lines
11 KiB
CSS
714 lines
11 KiB
CSS
/* general rules ******************************************************/
|
||
|
||
html, body, #map {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
body {
|
||
font-size: 14px;
|
||
font-family: "coda",arial,helvetica,sans-serif;
|
||
margin: 0;
|
||
}
|
||
|
||
#scrollwrapper {
|
||
overflow: hidden;
|
||
position: fixed;
|
||
right: -38px;
|
||
top: 0;
|
||
width: 340px;
|
||
bottom: 45px;
|
||
z-index: 1001;
|
||
}
|
||
|
||
#sidebar {
|
||
background-color: rgba(8, 48, 78, 0.9);
|
||
border-left: 1px solid #20A8B1;
|
||
color: #888;
|
||
position: relative;
|
||
left: 0;
|
||
top: 0;
|
||
max-height: 100%;
|
||
overflow-y:scroll;
|
||
overflow-x:hidden;
|
||
z-index: 3000;
|
||
}
|
||
|
||
#sidebartoggle {
|
||
display: block;
|
||
padding: 20px 5px;
|
||
margin-top: -31px; /* -(toggle height / 2) */
|
||
line-height: 10px;
|
||
position: absolute;
|
||
top: 340px; /* (sidebar height / 2) */
|
||
z-index: 3001;
|
||
background-color: rgba(8, 48, 78, 0.9);
|
||
color: #FFCE00;
|
||
border: 1px solid #20A8B1;
|
||
border-right: none;
|
||
border-radius: 5px 0 0 5px;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.enl {
|
||
color: #03fe03 !important;
|
||
}
|
||
|
||
.res {
|
||
color: #00c5ff !important;
|
||
}
|
||
|
||
.none {
|
||
color: #fff;
|
||
}
|
||
|
||
a {
|
||
color: #ffce00;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
}
|
||
|
||
a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* map display, required because GMaps uses a high z-index which is
|
||
* normally above Leaflet’s vector pane */
|
||
.leaflet-map-pane {
|
||
z-index: 1000;
|
||
}
|
||
|
||
.leaflet-control-layers-overlays label.disabled {
|
||
text-decoration: line-through;
|
||
cursor: help;
|
||
}
|
||
|
||
.help {
|
||
cursor: help;
|
||
}
|
||
|
||
.toggle {
|
||
display: block;
|
||
height: 0;
|
||
width: 0;
|
||
}
|
||
|
||
|
||
/* chat ***************************************************************/
|
||
|
||
#chatcontrols {
|
||
color: #FFCE00;
|
||
background: rgba(8, 48, 78, 0.9);
|
||
position: absolute;
|
||
left: 0;
|
||
z-index: 3001;
|
||
height: 26px;
|
||
padding-left:1px;
|
||
}
|
||
|
||
#chatcontrols.expand {
|
||
top: 0;
|
||
bottom: auto;
|
||
}
|
||
|
||
#chatcontrols a {
|
||
margin-left: -1px;
|
||
display: inline-block;
|
||
width: 94px;
|
||
text-align: center;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
border: 1px solid #20A8B1;
|
||
vertical-align: top;
|
||
}
|
||
|
||
#chatcontrols a:first-child {
|
||
letter-spacing:-1px;
|
||
text-decoration: none !important;
|
||
}
|
||
|
||
#chatcontrols a.active {
|
||
border-color: #FFCE00;
|
||
border-bottom-width:0px;
|
||
font-weight:bold
|
||
}
|
||
|
||
#chatcontrols a.active + a {
|
||
border-left-color: #FFCE00
|
||
}
|
||
|
||
|
||
#chatcontrols .toggle {
|
||
border-left: 10px solid transparent;
|
||
border-right: 10px solid transparent;
|
||
margin: 6px auto auto;
|
||
}
|
||
|
||
#chatcontrols .expand {
|
||
border-bottom: 10px solid #FFCE00;
|
||
}
|
||
|
||
#chatcontrols .shrink {
|
||
border-top: 10px solid #FFCE00;
|
||
}
|
||
|
||
|
||
#chat {
|
||
position: absolute;
|
||
width: 708px;
|
||
bottom: 23px;
|
||
left: 0;
|
||
z-index: 3000;
|
||
background: rgba(8, 48, 78, 0.9);
|
||
font-size: 12.6px;
|
||
color: #eee;
|
||
border: 1px solid #20A8B1;
|
||
border-bottom: 0;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
em {
|
||
color: red;
|
||
font-style: normal;
|
||
}
|
||
|
||
#chat.expand {
|
||
height:auto;
|
||
top: 25px;
|
||
}
|
||
|
||
#chatpublic, #chatfull, #chatcompact {
|
||
display: none;
|
||
}
|
||
|
||
#chat > div {
|
||
overflow-x:hidden;
|
||
overflow-y:scroll;
|
||
height: 100%;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
padding: 2px;
|
||
position:relative;
|
||
}
|
||
|
||
#chat table, #chatinput table {
|
||
width: 100%;
|
||
table-layout: fixed;
|
||
border-spacing: 0m;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
#chatinput table {
|
||
height: 100%;
|
||
}
|
||
|
||
#chat td, #chatinput td {
|
||
font-family: Verdana, sans-serif;
|
||
font-size: 12.6px;
|
||
vertical-align: top;
|
||
padding-bottom: 3px;
|
||
}
|
||
|
||
/* time */
|
||
#chat td:first-child, #chatinput td:first-child {
|
||
width: 44px;
|
||
overflow: hidden;
|
||
padding-left: 2px;
|
||
color: #bbb;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
#chat time {
|
||
cursor: help;
|
||
}
|
||
|
||
/* nick */
|
||
#chat td:nth-child(2), #chatinput td:nth-child(2) {
|
||
width: 91px;
|
||
overflow: hidden;
|
||
padding-left: 2px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
mark {
|
||
background: transparent;
|
||
}
|
||
|
||
.invisep {
|
||
display: inline-block;
|
||
width: 1px;
|
||
height: 1px;
|
||
overflow:hidden;
|
||
color: transparent;
|
||
}
|
||
|
||
/* divider */
|
||
summary {
|
||
color: #bbb;
|
||
display: inline-block;
|
||
font-family: Verdana,sans-serif;
|
||
height: 16px;
|
||
overflow: hidden;
|
||
padding: 0 2px;
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
}
|
||
|
||
#chatinput {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
padding: 0 2px;
|
||
background: rgba(8, 48, 78, 0.9);
|
||
width: 708px;
|
||
border: 1px solid #20A8B1;
|
||
z-index: 3001;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#chatinput td {
|
||
padding-bottom: 1px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
|
||
#chatinput input {
|
||
background: transparent;
|
||
font-size: 12.6px;
|
||
font-family: Verdana,sans-serif;
|
||
color: #EEEEEE;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
|
||
|
||
/* sidebar ************************************************************/
|
||
|
||
#sidebar > * {
|
||
border-bottom: 1px solid #20A8B1;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
|
||
#sidebartoggle .toggle {
|
||
border-bottom: 10px solid transparent;
|
||
border-top: 10px solid transparent;
|
||
}
|
||
|
||
#sidebartoggle .open {
|
||
border-right: 10px solid #FFCE00;
|
||
}
|
||
|
||
#sidebartoggle .close {
|
||
border-left: 10px solid #FFCE00;
|
||
}
|
||
|
||
/* player stats */
|
||
#playerstat {
|
||
height: 30px;
|
||
}
|
||
|
||
h2 {
|
||
color: #ffce00;
|
||
font-size: 21px;
|
||
padding: 0 4px;
|
||
margin: 0;
|
||
cursor:help;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
}
|
||
|
||
h2 span {
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
text-overflow: "~";
|
||
vertical-align: top;
|
||
white-space: nowrap;
|
||
width: 205px;
|
||
}
|
||
|
||
h2 div {
|
||
float: right;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
h2 sup, h2 sub {
|
||
display: block;
|
||
font-size: 11px;
|
||
margin-bottom: -1px;
|
||
}
|
||
|
||
|
||
/* gamestats */
|
||
#gamestat {
|
||
height: 22px;
|
||
}
|
||
|
||
#gamestat span {
|
||
display: block;
|
||
float: left;
|
||
font-weight: bold;
|
||
cursor:help;
|
||
height: 21px;
|
||
line-height: 22px;
|
||
}
|
||
|
||
#gamestat .res {
|
||
background: #005684;
|
||
text-align: right;
|
||
}
|
||
|
||
#gamestat .enl {
|
||
background: #017f01;
|
||
}
|
||
|
||
|
||
/* geosearch input, and others */
|
||
input {
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
color: #ffce00;
|
||
height: 24px;
|
||
padding:3px 4px 1px 4px;
|
||
font-size: 14px;
|
||
border:0;
|
||
font-family:inherit;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
::-webkit-input-placeholder {
|
||
font-style: italic;
|
||
}
|
||
|
||
:-moz-placeholder {
|
||
font-style: italic;
|
||
}
|
||
|
||
::-moz-placeholder {
|
||
font-style: italic;
|
||
}
|
||
|
||
|
||
/* portal title and image */
|
||
h3 {
|
||
font-size: 17px;
|
||
padding: 0 4px;
|
||
margin:0;
|
||
height: 25px;
|
||
width: 100%;
|
||
overflow:hidden;
|
||
text-overflow: "~";
|
||
white-space: nowrap;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.imgpreview {
|
||
height: 200px;
|
||
background: no-repeat center center;
|
||
background-size: contain;
|
||
cursor: help;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.imgpreview img.hide {
|
||
display: none;
|
||
}
|
||
|
||
#level {
|
||
font-size: 40px;
|
||
text-shadow: -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000, 0 0 5px #fff;
|
||
display: block;
|
||
margin-right: 15px;
|
||
text-align:right;
|
||
}
|
||
|
||
/* portal mods */
|
||
.mods {
|
||
margin: 5px auto 1px auto;
|
||
padding: 0 2px;
|
||
width: 296px;
|
||
height: 75px;
|
||
text-align: center;
|
||
}
|
||
|
||
.mods span {
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
/* can’t use inline-block because Webkit’s implementation is buggy and
|
||
* introduces additional margins in random cases. No clear necessary,
|
||
* as that’s solved by setting height on .mods. */
|
||
display: block;
|
||
float:left;
|
||
height: 63px;
|
||
margin: 0 2px;
|
||
overflow: hidden;
|
||
padding: 2px;
|
||
text-align: center;
|
||
width: 63px;
|
||
cursor:help;
|
||
border: 1px solid #666;
|
||
}
|
||
|
||
.mods span:not([title]) {
|
||
cursor: auto;
|
||
}
|
||
|
||
.res .mods span, .res .meter {
|
||
border: 1px solid #0076b6;
|
||
}
|
||
.enl .mods span, .enl .meter {
|
||
border: 1px solid #017f01;
|
||
}
|
||
|
||
/* random details, resonator details */
|
||
#randdetails, #resodetails {
|
||
width: 100%;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
padding: 0 4px;
|
||
table-layout: fixed;
|
||
border-spacing: 0m;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
#randdetails td, #resodetails td {
|
||
overflow: hidden;
|
||
text-overflow: "~";
|
||
vertical-align: top;
|
||
white-space: nowrap;
|
||
width: 50%;
|
||
width: calc(50% - 62px);
|
||
}
|
||
|
||
#randdetails th, #resodetails th {
|
||
font-weight: normal;
|
||
text-align: right;
|
||
width: 62px;
|
||
padding-right:4px;
|
||
padding-left:4px;
|
||
}
|
||
|
||
#randdetails th + th, #resodetails th + th {
|
||
text-align: left;
|
||
padding-right: 4px;
|
||
padding-left: 4px;
|
||
}
|
||
|
||
#randdetails td:first-child, #resodetails td:first-child {
|
||
text-align: right;
|
||
padding-left: 2px;
|
||
}
|
||
|
||
#randdetails td:last-child, #resodetails td:last-child {
|
||
text-align: left;
|
||
padding-right: 2px;
|
||
}
|
||
|
||
|
||
#randdetails {
|
||
margin-top: 9px;
|
||
margin-bottom: 9px;
|
||
}
|
||
|
||
|
||
#randdetails tt {
|
||
font-family: inherit;
|
||
cursor: help;
|
||
}
|
||
|
||
/* resonators */
|
||
#resodetails {
|
||
margin-bottom: 9px;
|
||
}
|
||
|
||
.meter {
|
||
background: #000;
|
||
cursor: help;
|
||
display: inline-block;
|
||
height: 18px;
|
||
padding: 1px;
|
||
width: 100%;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.meter span {
|
||
display: block;
|
||
height: 14px;
|
||
}
|
||
|
||
.meter-level {
|
||
position: absolute;
|
||
top: -2px;
|
||
left: 50%;
|
||
margin-left: -6px;
|
||
text-shadow: 0.0em 0.0em 0.3em #808080;
|
||
}
|
||
/* links below resos */
|
||
|
||
.linkdetails {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
aside {
|
||
display: inline-block;
|
||
padding-right: 9px;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
}
|
||
|
||
.linkdetails aside:last-child {
|
||
padding-right: 0;
|
||
}
|
||
|
||
.linkdetails aside:nth-child(1) {
|
||
text-align: right;
|
||
width:88px;
|
||
}
|
||
|
||
.linkdetails aside:nth-child(2) {
|
||
text-align: right;
|
||
width:67px;
|
||
}
|
||
|
||
.linkdetails aside:nth-child(4) {
|
||
margin-left:13px;
|
||
}
|
||
|
||
#toolbox {
|
||
padding: 4px 2px;
|
||
font-size:90%;
|
||
}
|
||
|
||
#toolbox > a {
|
||
padding: 4px;
|
||
}
|
||
|
||
/* a common portal display takes this much space (prevents moving
|
||
* content when first selecting a portal) */
|
||
|
||
#portaldetails {
|
||
min-height: 553px;
|
||
}
|
||
|
||
|
||
/* update status */
|
||
#updatestatus {
|
||
background-color: rgba(8, 48, 78, 0.9);
|
||
border-bottom: 0;
|
||
border-top: 1px solid #20A8B1;
|
||
border-left: 1px solid #20A8B1;
|
||
bottom: 0;
|
||
color: #ffce00;
|
||
font-size:13px;
|
||
padding: 4px;
|
||
position: fixed;
|
||
right: 0;
|
||
z-index:3002;
|
||
-webkit-box-sizing: border-box;
|
||
-moz-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
/* preview */
|
||
|
||
#largepreview {
|
||
left: 50%;
|
||
position: fixed;
|
||
top: 50%;
|
||
z-index: 2000;
|
||
}
|
||
#largepreview img {
|
||
box-shadow: 0 0 40px #000;
|
||
}
|
||
#largepreview img {
|
||
border: 2px solid #f8ff5e;
|
||
}
|
||
|
||
/* tooltips, dialogs */
|
||
.ui-tooltip, .ui-dialog {
|
||
max-width: 300px;
|
||
position: absolute;
|
||
z-index: 9999;
|
||
background-color: #fff;
|
||
border: 1px solid #ccc;
|
||
color: #222;
|
||
font: 13px/15px "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||
padding: 2px 4px;
|
||
}
|
||
|
||
.ui-dialog {
|
||
border: 1px solid #0F0F0F;
|
||
padding: 0;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.ui-widget-overlay {
|
||
height: 100%;
|
||
left: 0;
|
||
position: fixed;
|
||
top: 0;
|
||
width: 100%;
|
||
z-index:9998;
|
||
background: #444;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.ui-dialog-titlebar {
|
||
display: none;
|
||
}
|
||
|
||
.ui-dialog-content {
|
||
padding: 12px;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
max-height: 600px !important;
|
||
max-width: 700px !important;
|
||
}
|
||
|
||
.ui-dialog-buttonpane {
|
||
background: #F2F2F2;
|
||
padding: 12px;
|
||
border-top: 1px solid #E6E6E6;
|
||
}
|
||
|
||
.ui-dialog-buttonset {
|
||
text-align: right;
|
||
}
|
||
|
||
.ui-dialog-buttonset button {
|
||
padding: 2px;
|
||
min-width: 80px;
|
||
}
|
||
|
||
td {
|
||
padding: 0;
|
||
vertical-align: top;
|
||
}
|
||
|
||
td + td {
|
||
padding-left: 4px;
|
||
}
|