ae65dff2d9
* disable tracking for tooltips and make them behave more like regular ones (this also stops my fan from spinning up when using the intel map) Improvements welcome. Tooltips are currently placed at the bottom of the element instead of next to cursor. It seems it’s either tracking or placing it not anywhere where one would expect a tooltip. I immediately regret having chosen jQueryUI. It’s not very flexible and has awkward defaults.
629 lines
9.6 KiB
CSS
629 lines
9.6 KiB
CSS
/* update notice */
|
||
body:after {
|
||
background: none repeat scroll 0 0 #FFFFFF;
|
||
color: red;
|
||
content: "Please update your total conversion script or it will not work properly anymore. \a Google \"ingress total conversion\".";
|
||
display: block;
|
||
font-weight: bold;
|
||
left: 381px;
|
||
padding: 2px;
|
||
position: absolute;
|
||
top: 0;
|
||
z-index: 9001;
|
||
white-space: pre;
|
||
text-align: center;
|
||
}
|
||
|
||
/* general rules ******************************************************/
|
||
|
||
html, body, #map {
|
||
height: 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: 24px;
|
||
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;
|
||
}
|
||
|
||
em {
|
||
color: red;
|
||
font-style: normal;
|
||
}
|
||
|
||
#chat.expand {
|
||
height:auto;
|
||
top: 25px;
|
||
}
|
||
|
||
#chatpublic, #chatfull, #chatcompact, /* FIXME DEPRECATED: */#chatautomated {
|
||
display: none;
|
||
}
|
||
|
||
#chat > div {
|
||
overflow-x:hidden;
|
||
overflow-y:scroll;
|
||
height: 100%; /* fallback for Opera which doesn’t support calc */
|
||
height: calc(100% - 4px);
|
||
height: -webkit-calc(100% - 4px);
|
||
height: -moz-calc(100% - 4px);
|
||
padding: 2px;
|
||
position:relative;
|
||
}
|
||
|
||
#chat p {
|
||
display: block;
|
||
padding: 1px 2px;
|
||
margin:0;
|
||
}
|
||
|
||
#chat time {
|
||
cursor: help;
|
||
}
|
||
|
||
time, mark, #chat span, #chat a {
|
||
font-family: Verdana, sans-serif;
|
||
font-size: 12.6px;
|
||
vertical-align: top;
|
||
}
|
||
|
||
time {
|
||
display: inline-block;
|
||
width: 44px;
|
||
color: #bbb;
|
||
overflow: hidden;
|
||
}
|
||
|
||
mark {
|
||
display: inline-block;
|
||
width: 91px;
|
||
margin-right:4px;
|
||
overflow:hidden;
|
||
vertical-align: top;
|
||
background: transparent;
|
||
}
|
||
|
||
summary {
|
||
color: #bbb;
|
||
display: inline-block;
|
||
font-family: Verdana,sans-serif;
|
||
height: 16px;
|
||
overflow: hidden;
|
||
padding: 0 2px;
|
||
white-space: nowrap;
|
||
width: 683px;
|
||
}
|
||
|
||
#chat span {
|
||
display: inline-block;
|
||
width: 540px;
|
||
}
|
||
|
||
#chatinput {
|
||
line-height:22px;
|
||
padding: 0 4px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
background: rgba(8, 48, 78, 0.9);
|
||
width: 700px;
|
||
border: 1px solid #20A8B1;
|
||
z-index: 3001;
|
||
}
|
||
|
||
#chat .invisibleseparator {
|
||
color: rgba(8, 48, 78, 0.0);
|
||
overflow: hidden;
|
||
width: 0px;
|
||
}
|
||
|
||
|
||
#chatinput span {
|
||
font-family: Verdana,sans-serif;
|
||
display: inline-block;
|
||
font-size: 12.6px;
|
||
width: 84px;
|
||
color: red;
|
||
padding: 0 4px 0 1px;
|
||
width: 85px;
|
||
}
|
||
|
||
#chatinput input {
|
||
background: transparent;
|
||
font-size: 12.6px;
|
||
font-family: Verdana,sans-serif;
|
||
color: #EEEEEE;
|
||
width: 558px
|
||
}
|
||
|
||
|
||
|
||
/* sidebar ************************************************************/
|
||
|
||
#sidebar > * {
|
||
border-bottom: 1px solid #20A8B1;
|
||
}
|
||
|
||
|
||
|
||
#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;
|
||
}
|
||
|
||
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, #gamestat span {
|
||
height: 22px;
|
||
line-height: 22px;
|
||
}
|
||
|
||
#gamestat span {
|
||
display: block;
|
||
float: left;
|
||
font-weight: bold;
|
||
cursor:help;
|
||
}
|
||
|
||
#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: 22px;
|
||
line-height: 22px;
|
||
padding: 0 4px;
|
||
font-size: 14px;
|
||
border:0;
|
||
font-family:inherit;
|
||
}
|
||
|
||
::-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;
|
||
}
|
||
|
||
.imgpreview {
|
||
height: 200px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.imgpreview img {
|
||
cursor: help;
|
||
}
|
||
|
||
#level {
|
||
font-size: 40px;
|
||
position: absolute;
|
||
right: 10px;
|
||
text-shadow: -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000, 0 0 5px #fff;
|
||
top: 100px;
|
||
}
|
||
|
||
/* portal mods */
|
||
.mods {
|
||
margin-bottom: 1px;
|
||
margin-top: 5px;
|
||
height: 75px;
|
||
}
|
||
|
||
.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: 63.7px;
|
||
margin-left: 4px;
|
||
overflow: hidden;
|
||
padding: 2px;
|
||
text-align: center;
|
||
width: 63.7px;
|
||
cursor:help;
|
||
border: 1px solid #666;
|
||
}
|
||
|
||
.res .mods span, .res .meter {
|
||
border: 1px solid #0076b6;
|
||
}
|
||
.enl .mods span, .enl .meter {
|
||
border: 1px solid #017f01;
|
||
}
|
||
|
||
/* random details list */
|
||
#randdetails {
|
||
margin: 0 4px;
|
||
margin-top: 11px;
|
||
}
|
||
|
||
aside {
|
||
display: inline-block;
|
||
width: 140px;
|
||
}
|
||
|
||
aside span {
|
||
overflow: hidden;
|
||
text-overflow: "~";
|
||
white-space: nowrap;
|
||
width: 74px;
|
||
}
|
||
|
||
aside:nth-child(odd) {
|
||
margin-right: 4px;
|
||
text-align: right;
|
||
}
|
||
|
||
aside:nth-child(even) {
|
||
margin-left: 4px;
|
||
text-align: left;
|
||
}
|
||
|
||
aside:nth-child(even) span {
|
||
float: right;
|
||
padding-left: 4px;
|
||
text-align: left;
|
||
}
|
||
|
||
aside:nth-child(odd) span {
|
||
float: left;
|
||
padding-right: 4px;
|
||
text-align: right;
|
||
}
|
||
|
||
#randdetails tt {
|
||
font-family: inherit;
|
||
cursor: help;
|
||
}
|
||
|
||
|
||
/* resonators */
|
||
#resodetails {
|
||
white-space: nowrap;
|
||
margin: 16px 0;
|
||
-moz-column-gap: 10px;
|
||
-moz-column-width: 141px;
|
||
-webkit-column-gap: 10px;
|
||
-webkit-column-width: 141px;
|
||
}
|
||
|
||
.meter {
|
||
background: #000;
|
||
cursor: help;
|
||
display: inline-block;
|
||
height: 14px;
|
||
padding: 1px;
|
||
width: 58px;
|
||
}
|
||
|
||
.meter-text {
|
||
display: inline-block;
|
||
height: 18px;
|
||
margin: 0 4px;
|
||
overflow: hidden;
|
||
text-overflow: "~";
|
||
vertical-align: top;
|
||
white-space: nowrap;
|
||
width: 75px;
|
||
}
|
||
|
||
.meter-text.left {
|
||
text-align: right;
|
||
}
|
||
|
||
.meter span {
|
||
display: block;
|
||
height: 14px;
|
||
}
|
||
|
||
.meter-rel {
|
||
position: relative;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.meter-level {
|
||
position: absolute;
|
||
top: -2px;
|
||
left: 25px;
|
||
text-shadow: 0.0em 0.0em 0.3em #808080;
|
||
}
|
||
/* links below resos */
|
||
|
||
.linkdetails {
|
||
text-align: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
.linkdetails aside {
|
||
margin: 0 4px;
|
||
width: 140px;
|
||
}
|
||
|
||
#toolbox {
|
||
padding: 4px;
|
||
font-size:90%;
|
||
}
|
||
|
||
#toolbox > a {
|
||
padding: 5px;
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
|
||
/* 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 */
|
||
.ui-tooltip {
|
||
background: #1E425D;
|
||
border: 1px solid #20A8B1;
|
||
box-shadow:0 0 7px #000;
|
||
color: #EEEEEE;
|
||
font-family: Verdana, sans-serif;
|
||
font-size:13px;
|
||
max-width: 300px;
|
||
padding: 8px;
|
||
position: absolute;
|
||
z-index: 9999;
|
||
}
|