518467617e
that, this patch uses the CSS pointer-events directive to make the area between the side bar and the map status usable. This should avoid cutting off the sidebar and force users to scroll even if there is space available but still allow to interact with that area. Please report if there are any problems with this. fix #467, fix #461
769 lines
12 KiB
CSS
769 lines
12 KiB
CSS
/* general rules ******************************************************/
|
||
|
||
html, body, #map {
|
||
height: 100%;
|
||
width: 100%;
|
||
overflow: hidden; /* workaround for #373 */
|
||
background: #0e3d4e;
|
||
}
|
||
|
||
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;
|
||
pointer-events: none;
|
||
}
|
||
|
||
#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;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
#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;
|
||
right: 301px; /* overwritten later by the script with SIDEBAR_WIDTH */
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* field mu count */
|
||
.fieldmu {
|
||
color: #FFCE00;
|
||
font-size: 13px;
|
||
font-family: "coda",arial,helvetica,sans-serif; /*override leaflet-container */
|
||
text-align: center;
|
||
text-shadow: 0 0 0.2em black, 0 0 0.2em black, 0 0 0.2em black;
|
||
pointer-events: none;
|
||
}
|
||
|
||
|
||
/* 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 #name {
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
text-overflow: "~";
|
||
vertical-align: top;
|
||
white-space: nowrap;
|
||
width: 205px;
|
||
position: relative;
|
||
}
|
||
|
||
h2 #stats {
|
||
float: right;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
h2 #signout {
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
line-height: 29px;
|
||
padding: 0 4px;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
background-color: rgba(8, 48, 78, 0.5);
|
||
display: none; /* starts 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;
|
||
}
|
||
|
||
.leaflet-control-layers input {
|
||
height: auto;
|
||
padding: 0;
|
||
}
|
||
|
||
|
||
/* 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: rgba(8, 48, 78, 0.9);
|
||
border: 1px solid #20A8B1;
|
||
color: #eee;
|
||
font: 13px/15px "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||
padding: 2px 4px;
|
||
}
|
||
|
||
.ui-tooltip, .ui-dialog a {
|
||
color: #FFCE00;
|
||
}
|
||
|
||
.ui-dialog {
|
||
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 {
|
||
padding: 12px;
|
||
border-top: 1px solid #20A8B1;
|
||
}
|
||
|
||
.ui-dialog-buttonset {
|
||
text-align: right;
|
||
}
|
||
|
||
.ui-dialog-buttonset button,
|
||
.ui-dialog-content button {
|
||
padding: 2px;
|
||
min-width: 80px;
|
||
color: #FFCE00;
|
||
border: 1px solid #FFCE00;
|
||
background-color: rgba(8, 48, 78, 0.9);
|
||
}
|
||
|
||
.ui-dialog-buttonset button:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
td {
|
||
padding: 0;
|
||
vertical-align: top;
|
||
}
|
||
|
||
td + td {
|
||
padding-left: 4px;
|
||
}
|
||
|
||
/* redeem results *****************************************************/
|
||
.redeem-result {
|
||
font-size: 14px;
|
||
font-family: arial,helvetica,sans-serif;
|
||
table-layout: fixed;
|
||
}
|
||
|
||
.redeem-result tr > td:first-child {
|
||
width: 50px;
|
||
text-align: right;
|
||
}
|