973 lines
16 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* general rules ******************************************************/
html, body, #map {
height: 100%;
width: 100%;
overflow: hidden; /* workaround for #373 */
background: #0e3d4e;
}
body {
font-size: 14px;
font-family: "roboto",arial,helvetica,sans-serif;
margin: 0;
}
#scrollwrapper {
overflow-x: hidden;
overflow-y: auto;
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: 108px;
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: -50px; /* overwritten later by the script with SIDEBAR_WIDTH */
}
.enl {
color: #03fe03 !important;
}
.res {
color: #00c5ff !important;
}
.none {
color: #fff;
}
.nickname {
cursor: pointer !important;
}
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 Leaflets vector pane */
.leaflet-map-pane {
z-index: 1000;
}
/* leaflet layer chooser, when opened, is above other panels */
/* doesn't actually work :( - left commented out for reference
.leaflet-control-layers-expanded {
z-index: 9999 !important;
}
*/
.leaflet-control-layers-overlays label.disabled {
text-decoration: line-through;
cursor: help;
}
/* base layer selection - first column */
.leaflet-control-layers-base {
float: left;
}
/* overlays layer selection - 2nd column */
.leaflet-control-layers-overlays {
float: left;
margin-left: 8px;
border-left: 1px solid #DDDDDD;
padding-left: 8px;
}
/* hide the usual seperator */
.leaflet-control-layers-separator {
display: none;
}
.help {
cursor: help;
}
.toggle {
display: block;
height: 0;
width: 0;
}
/* field mu count */
.fieldmu {
color: #FFCE00;
font-size: 13px;
font-family: "roboto",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: 3000;
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;
}
#chat td .system_narrowcast {
color: #f66 !important;
}
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%;
padding:3px 4px 1px 4px;
}
/* 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;
}
#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 */
}
#name:hover #signout {
display: block;
}
h2 sup, h2 sub {
display: block;
font-size: 11px;
margin-bottom: -2px;
}
/* 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:0px 4px 0px 4px;
font-size: 12px;
border:0;
font-family:inherit;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#geosearch{
width:272px;
background-color: transparent;
}
#geosearchwrapper {
height:25px;
background-color: rgba(0, 0, 0, 0.3);
}
#geosearchwrapper img{
vertical-align: bottom;
margin-bottom: 2px;
cursor: pointer;
}
::-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: 16px;
padding: 0 4px;
margin:0;
height: 23px;
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: 190px;
background: no-repeat center center;
background-size: contain;
cursor: help;
overflow: hidden;
}
.imgpreview img.hide {
display: none;
}
.imgpreview .portalDetails {
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: 3px auto 1px auto;
width: 296px;
height: 67px;
text-align: center;
}
.mods span {
background-color: rgba(0, 0, 0, 0.3);
/* cant use inline-block because Webkit's implementation is buggy and
* introduces additional margins in random cases. No clear necessary,
* as thats 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:0px;
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: 4px;
margin-bottom: 5px;
}
#randdetails tt {
font-family: inherit;
cursor: help;
}
/* resonators */
#resodetails {
margin-bottom: 0px;
}
.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: 0px;
text-align: center;
}
.linkdetails aside {
display: inline-block;
white-space: nowrap;
font-size: 12px;
margin-left: 5px;
margin-right: 5px;
}
#toolbox {
font-size: 12px;
text-align: left; /* centre didn't look as nice here as it did above in .linkdetails */
}
#toolbox > a {
margin-left: 5px;
margin-right: 5px;
white-space: nowrap;
display: inline-block;
}
/* a common portal display takes this much space (prevents moving
* content when first selecting a portal) */
#portaldetails {
min-height: 63px;
position: relative; /* so the below '#portaldetails .close' is relative to this */
}
#portaldetails .close {
position: absolute;
top: -2px;
right: 2px;
cursor: pointer;
color: #FFCE00;
font-family: "Arial", sans;
font-size: 16px;
}
/* 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;
}
#updatestatus .map {
margin-left: 8px;
}
#loadlevel {
background: #FFF;
color: #000000;
display: inline-block;
min-width: 1.8em;
border: 1px solid #20A8B1;
border-width: 0 1px;
margin: -4px 0;
padding: 4px 0.2em;
}
/* Dialogs
*/
.ui-tooltip, .ui-dialog {
position: absolute;
z-index: 9999;
background-color: rgba(8, 48, 78, 0.9);
border: 1px solid #20A8B1;
color: #eee;
font: 13px/15px Roboto, Arial, Helvetica, sans-serif;
padding: 2px 4px;
}
.ui-tooltip {
max-width: 300px;
}
.ui-widget-overlay {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
background: #444;
opacity: 0.6;
}
.ui-modal {
z-index: 10001 !important;
}
.ui-tooltip {
z-index: 10002 !important;
}
.ui-tooltip, .ui-dialog a {
color: #FFCE00;
}
.ui-dialog {
padding: 0;
border-radius: 2px;
}
.ui-dialog-modal .ui-dialog-titlebar-close {
display: none;
}
.ui-dialog-titlebar {
text-align: center;
padding: 4px;
background-color: rgba(8, 60, 78, 0.9);
min-width: 250px;
}
.ui-dialog-title {
padding: 2px;
font-weight: bold;
}
.ui-dialog-title-active {
color: #ffce00;
}
.ui-dialog-title-inactive {
color: #ffffff;
}
.ui-dialog-titlebar-button {
position: absolute;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 17px;
height: 17px;
top: 3px;
cursor: pointer;
border: 1px solid rgb(32, 168, 177);
background-color: rgba(0, 0, 0, 0);
}
.ui-dialog-titlebar-button:active {
background-color: rgb(32, 168, 177);
}
.ui-dialog-titlebar-button-close {
right: 4px;
}
.ui-dialog-titlebar-button-collapse {
right: 25px;
}
.ui-dialog-titlebar-button-collapse-expanded {
/* For future changes */
}
.ui-dialog-titlebar-button-collapse-collapsed {
background-color: rgb(32, 168, 177);
}
.ui-dialog-content {
padding: 12px;
overflow-y: auto;
overflow-x: hidden;
max-height: 600px !important;
max-width: 700px !important;
position: relative;
}
.ui-dialog-content-hidden {
display: none !important;
}
.ui-dialog-buttonpane {
padding: 6px;
border-top: 1px solid #20A8B1;
}
.ui-dialog-buttonset {
text-align: right;
}
.ui-dialog-buttonset button,
.ui-dialog-content button {
padding: 2px;
min-width: 40px;
color: #FFCE00;
border: 1px solid #FFCE00;
background-color: rgba(8, 48, 78, 0.9);
}
.ui-dialog-buttonset button:hover {
text-decoration: underline;
}
.ui-dialog-aboutIITC {
width: auto !important;
min-width: 400px !important;
max-width: 600px !important;
}
td {
padding: 0;
vertical-align: top;
}
td + td {
padding-left: 4px;
}
#qrcode > canvas {
border: 8px solid white;
}
/* redeem results *****************************************************/
.redeem-result-table {
font-size: 14px;
font-family: Roboto, Arial, Helvetica, sans-serif;
table-layout: fixed;
}
.redeem-result tr > td:first-child {
width: 50px;
text-align: right;
}
.redeem-result-html {
font-family: Inconsolata, Consolas, Menlo, "Courier New", monospace;
}
.pl_nudge_date {
background-color: #724510;
border-left: 1px solid #ffd652;
border-bottom: 1px solid #ffd652;
border-top: 1px solid #ffd652;
color: #ffd652;
display: inline-block;
float: left;
font-size: 12px;
height: 18px;
text-align: center;
}
.pl_nudge_pointy_spacer {
background: no-repeat url(//commondatastorage.googleapis.com/ingress.com/img/nudge_pointy.png);
display: inline-block;
float: left;
height: 20px;
left: 47px;
width: 5px;
}
.pl_nudge_player {
cursor: pointer;
}
.pl_nudge_me {
color: #ffd652;
}
.RESISTANCE {
color: #00c2ff;
}
.ALIENS, .ENLIGHTENED {
color: #28f428;
}
#portal_highlight_select{
position: absolute;
top:5px;
left:10px;
z-index: 2500;
font-size:11px;
font-family: "roboto",arial,helvetica,sans-serif;
background-color:#0E3C46;
color:#ffce00;
}
.portal_details th, .portal_details td {
vertical-align: top;
text-align: left;
}
.portal_details th {
white-space: nowrap;
padding-right: 1em;
}
.portal_details tr.padding-top th, .portal_details tr.padding-top td {
padding-top: 0.7em;
}