aboutsummaryrefslogtreecommitdiffstats
path: root/www/css/fms.css
diff options
context:
space:
mode:
Diffstat (limited to 'www/css/fms.css')
-rw-r--r--www/css/fms.css995
1 files changed, 995 insertions, 0 deletions
diff --git a/www/css/fms.css b/www/css/fms.css
new file mode 100644
index 0000000..1739ece
--- /dev/null
+++ b/www/css/fms.css
@@ -0,0 +1,995 @@
+/* element styles */
+ *{
+ -webkit-user-select: none;
+ box-sizing:border-box;
+ }
+
+ label{
+ display:none;
+ }
+
+ input,
+ select,
+ textarea{
+ border:none;
+ width:100%;
+ padding: 0.5em;
+ border-radius:0;
+ -webkit-border-radius:0;
+ }
+
+ input,
+ textarea,
+ select,
+ a,
+ .ui-btn {
+ pointer-events: all;
+ }
+
+ input,
+ textarea,
+ select {
+ -webkit-user-select: auto;
+ }
+
+ textarea{
+ min-height: 10em;
+ }
+
+ select{
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+
+ background: none;
+ background-color: #fff;
+
+ background-image: url(../images/dropdown-arrow.png);
+ background-image: url(../images/dropdown-arrow.svg);
+ background-size: auto 35%;
+ background-repeat: no-repeat;
+ background-position: 95% 50%;
+ }
+
+/* jquery mobile overrides */
+ .ui-mobile-viewport {
+ background-color: #534741;
+ background-image: url('../images/mapbg.png');
+ }
+
+ .ui-icon-plus,
+ .ui-icon-minus,
+ .ui-icon-delete,
+ .ui-icon-arrow-r,
+ .ui-icon-arrow-l,
+ .ui-icon-arrow-u,
+ .ui-icon-arrow-d,
+ .ui-icon-check,
+ .ui-icon-gear,
+ .ui-icon-refresh,
+ .ui-icon-forward,
+ .ui-icon-back,
+ .ui-icon-grid,
+ .ui-icon-star,
+ .ui-icon-alert,
+ .ui-icon-info,
+ .ui-icon-home,
+ .ui-icon-bars,
+ .ui-icon-edit,
+ .ui-icon-search,
+ .ui-icon-searchfield::after,
+ .ui-icon-checkbox-off,
+ .ui-icon-checkbox-on,
+ .ui-icon-radio-off,
+ .ui-icon-radio-on {
+ background-size: 810px 54px;
+ }
+
+ .ui-input-search {
+ background-image: none;
+ background-color: rgba(255,255,255,0.95);
+ }
+
+ .ui-corner-all,
+ .ui-btn-corner-all {
+ -webkit-border-radius: 0px;
+ border-radius: 0px;
+ }
+ .ui-icon {
+ -webkit-border-radius: 0px;
+ border-radius: 0px;
+ background-color: rgba(0,0,0,0);
+ }
+ .ui-icon-shadow {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+ .ui-li .ui-btn-up-c {
+ border-top-width: 0px;
+ border-bottom-width: 0px;
+ border-right-width: 0px;
+ border-left-width: 1px;
+ }
+ .ui-checkbox,
+ .ui-controlgroup .ui-checkbox
+ {
+ -webkit-border-radius: 0;
+ border-radius:0;
+ margin: 0 -1px;
+ }
+ .ui-icon.ui-icon-checkbox-on,
+ .ui-icon.ui-icon-checkbox-off
+ {
+ background-image: url(images/icons-18-white.png);
+ }
+ @media only screen and (min-resolution: 320dpi),
+ only screen and (-webkit-min-device-pixel-ratio: 2) {
+ .ui-icon.ui-icon-checkbox-on,
+ .ui-icon.ui-icon-checkbox-off
+ {
+ background-image: url(images/icons-36-white.png);
+ }
+ }
+
+ div[data-role='header'] .ui-icon
+ {
+ background-image: url(images/icons-18-black.png);
+ }
+ @media only screen and (min-resolution: 320dpi),
+ only screen and (-webkit-min-device-pixel-ratio: 2) {
+ div[data-role='header'] .ui-icon
+ {
+ background-image: url(images/icons-36-black.png);
+ }
+ }
+ .ui-controlgroup-controls .ui-checkbox label,
+ .ui-controlgroup-controls .ui-checkbox label
+ {
+ border: none; border-width: 0;
+ }
+
+ .ui-loader {
+ height: 100%;
+ width: 100%;
+ top: 0px !important;
+ left: 0px;
+ margin: 0px;
+ opacity: .58;
+ border-radius: 0px;
+ }
+
+ .ui-loader .ui-icon-loading {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-left: -23px;
+ margin-top: -23px;
+ width: 46px;
+ height: 46px;
+ background-size: 46px 46px;
+ opacity: 1;
+ background: url('images/ajax-loader.gif');
+ }
+
+ .ui-loader h1 {
+ position: absolute;
+ top: 50%;
+ margin: 40px 10px 0px 10px;
+ }
+
+ .ui-loader #progress {
+ display: none;
+ position: absolute;
+ top: 50%;
+ left: 10%;
+ margin-top: 80px;
+ background-color: white;
+ height: 10px;
+ }
+
+ .ui-header .ui-title,
+ .ui-footer .ui-title
+ {
+ text-shadow:none;
+ }
+
+ .ui-page {
+ background-image: none;
+ background-color: rgba(0,0,0,0);
+ }
+
+/* ios 7 tweaks to deal with different status bar behaviour */
+ .ios7 .ui-mobile-viewport {
+ background-color: none;
+ background-image: none;
+ }
+
+ .ios7 .ui-page-active {
+ padding-top: 20px;
+ }
+
+ .ios7 .ui-bar-a,
+ body.ios7 {
+ background-color: #F6BE41;
+ background-image: none;
+ }
+
+ .ios7 .ui-bar-a {
+ border-color: #F6BE41;
+ }
+
+ .ios7 .ui-header-fixed {
+ padding-top: 20px;
+ }
+
+ .ios7 .ui-header-fixed .ui-btn-left,
+ .ios7 .ui-header-fixed .ui-btn-right {
+ top: 24px;
+ }
+
+ .ios7 #map_box {
+ top: 20px;
+ background-color: #534741;
+ background-image: url('../images/mapbg.png');
+ }
+
+ .ios7 #around-page #locating {
+ bottom: -22px;
+ }
+
+ .ios7 #map_box .olLayerDiv div {
+ display: block !important;
+ }
+
+/* all app classes and selectors */
+
+ /* This is a bit of hackery as without it jquerymobile never sets the page
+ * to be other than display: none. Should work out why and fix at source */
+ div[data-role="page"] {
+ display: block !important;
+ }
+
+ div.jquerymobile {
+ pointer-events: none;
+ }
+
+ #drafts,
+ div[data-role='content'] {
+ position: relative;
+ margin: 20px 10px;
+ background-color: rgba(255, 255, 255, 0.9);
+ }
+
+ .notopmargin {
+ margin-top: 0em;
+ }
+
+ .nodisplay {
+ display: none;
+ }
+
+ .center {
+ text-align: center;
+ }
+
+ #drafts h2,
+ div[data-role='content'] p.top,
+ div[data-role='content'] h2 {
+ margin-top: 0px;
+ }
+
+/* form styles */
+ .inputcard {
+ font-size: 16px;
+ padding:0;
+ }
+ .inputcard .ui-checkbox,
+ .inputcard .ui-controlgroup .ui-checkboxo{
+ margin: 0px;
+ }
+ .gmailstyletest{
+ font-size: 16px;
+ padding:0;
+ border: none;
+ background: rgba(255, 255, 255, 0.7) !important;
+ }
+ .inputcard > div,
+ .gmailstyletest > div,
+ .ui-field-contain
+ {
+ border:none;
+ border-bottom: 1px solid #ccc;
+ }
+ .inputcard > div.noborder,
+ .inputcard > div.bottom-btn,
+ .gmailstyletest > div.noborder {
+ border:none;
+ }
+ .ui-field-contain{
+ padding: 0;
+ }
+
+ .gmailstyletest input,
+ .gmailstyletest input[type="password"],
+ .gmailstyletest input[type="search"],
+ .gmailstyletest input[type="email"],
+ .gmailstyletest textarea,
+ .gmailstyletest select,
+ .gmailstyletest input[type="range"] {
+ font-size: 16px;
+ background: rgba(255, 255, 255, 0.7) !important;
+ }
+
+ @media only screen and (max-width: 800px) and (min-width: 600px)
+ and (min-resolution: 320dpi) {
+ .gmailstyletest input,
+ .gmailstyletest input[type="password"],
+ .gmailstyletest input[type="search"],
+ .gmailstyletest input[type="email"],
+ .gmailstyletest textarea,
+ .gmailstyletest select,
+ .gmailstyletest input[type="range"] {
+ font-size: 24px;
+ }
+ }
+
+ select.noselection{
+ color: #777;
+ }
+
+/* form errors */
+
+ ::-webkit-input-placeholder { /* WebKit browsers */
+ color: #777;
+ }
+ :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+ color: #777;
+ }
+ ::-moz-placeholder { /* Mozilla Firefox 19+ */
+ color: #777;
+ }
+ :-ms-input-placeholder { /* Internet Explorer 10+ */
+ color: #777;
+ }
+
+ .error::-webkit-input-placeholder { /* WebKit browsers */
+ color: red;
+ }
+ .error:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+ color: red;
+ }
+ .error::-moz-placeholder { /* Mozilla Firefox 19+ */
+ color: red;
+ }
+ .error:-ms-input-placeholder { /* Internet Explorer 10+ */
+ color: red;
+ }
+ input.form-error,
+ select.error {
+ border: 1px solid red;
+ }
+
+ div.form-error {
+ color: red;
+ }
+/* in progress report screen */
+ #existing div[data-role='content'] {
+ background-color: white;
+ }
+
+ #existing h3 {
+ margin-top: 0em;
+ }
+
+ #existing_report h3 {
+ margin-bottom: 5px;
+ }
+
+ #existing_report div.meta {
+ font-weight: italic;
+ font-size: 0.8em;
+ margin-bottom: 0.5em;
+ }
+
+ #existing_report div.meta p {
+ margin-top: 0em;
+ margin-bottom: 0em;
+ }
+
+ #existing_report div.photo {
+ width: 90%;
+ height: 100px;
+ background-position: center center;
+ background-size: cover
+ }
+
+ /* taken and modified from http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/ */
+ #existing_report div.details {
+ max-height: 200px;
+ overflow: hidden;
+ line-height: 20px;
+ }
+
+ #existing_report div.details > *:first-child {
+ float: right;
+ width: 100%;
+ margin-left: -5px;
+ }
+
+ #existing_report div.details:after {
+ content: "\02026";
+
+ box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+
+ position: relative;
+ top: 180px; left: 100%;
+ margin-left: -1em;
+ padding-right: 5px;
+
+ text-align: right;
+ }
+
+ #existing div.right {
+ clear: both;
+ margin-top: 0.5em;
+ }
+
+/* offline report screen */
+
+ #offline div[data-role='content'] {
+ pointer-events: all;
+ }
+
+ #offline div.photo {
+ margin: 0.1em 0em;
+ text-align: center;
+ }
+
+/* home screen */
+
+ #front-page div[data-role='content'] {
+ background-color: rgba(255, 255, 255, 0);
+ }
+
+/* map */
+
+ #map_box{
+ background-color: rgba(0,0,0,0);
+ position: fixed;
+ top: 0px, left: 0, right: 0, bottom: 0;
+ padding: 0px;
+ display:block;
+ height: 100%;
+ width: 100%;
+ transition: all 0.5s linear;
+ -webkit-transition: all 0.5s linear;
+ }
+ #map_box.background-map{
+ -webkit-filter: blur(3px);
+ opacity: 0.9;
+ }
+
+ #map{
+ opacity: 0.85;
+ width: 100%;
+ height: 100%;
+ }
+
+ .olControlPermalink,
+ #fms_pan_zoom {
+ display: none !important;
+ }
+
+ .olControlAttribution {
+ left: 0;
+ right: 0 !important;
+ bottom: 0 !important;
+ font-size: 8px !important;
+ text-align:center;
+ background-color: rgba(255,255,255,0.5);
+ }
+
+ .olControlAttribution img{
+ max-height: 15px;
+ vertical-align:middle;
+ }
+
+ #OpenLayers_Control_Crosshairs_crosshairs {
+ pointer-events: none;
+ background-size: 106px 106px;
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-image: url(../images/crosshairs@x2.png);
+
+ }
+/* locating screen */
+
+ #load-screen,
+ #locating {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: -2px;
+ z-index: 3010;
+ text-align: center;
+ background: #F6BE41;
+ padding-top:20px;
+ color: white;
+ }
+
+ #load-screen .radar,
+ #locating .radar {
+ background: transparent url('../images/radar.png') no-repeat top center;
+ width: 100%;
+ height: 260px;
+ background-size: 260px 260px;
+ }
+
+ #locating #progress {
+ margin-top: 1em;
+ width:100%;
+ height:15px;
+ background-color: grey;
+ }
+
+ #locating #progress-bar {
+ width: 0%;
+ background-color: #FFFF99;
+ height: 15px;
+ }
+
+ #locating p {
+ margin-left: 15px;
+ margin-right: 15px;
+ }
+
+ #locating .ui-shadow {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+
+/* around screen */
+ #around-page div[data-role='content'] {
+ position: static;
+ margin: auto;
+ width: auto;
+ height: auto;
+ background-color: rgba(255, 255, 255, 0);
+ }
+
+ .frontpage-menu{
+ padding: 0px;
+ }
+
+ #front-howto {
+ padding: 0.3em;
+ background-color: rgba(255,255,255,0.8);
+ }
+
+ #front-howto p {
+ margin: 5px;
+ }
+
+ .map-bottom-btn {
+ position: absolute;
+ bottom: 20px;
+ left: 15px;
+ right: 15px;
+ }
+
+ .bottom-btn {
+ position: absolute;
+ bottom: 5px;
+ left: 15px;
+ right: 15px;
+ }
+
+ #confirm-map,
+ #reposition,
+ #view-my-reports,
+ #login-options,
+ #locate-here,
+ #mark-here {
+ display: block;
+ z-index: 3000;
+ }
+
+ #locate-here .ui-btn-text,
+ #mark-here .ui-btn-text{
+ font-size:1.2em;
+ padding: 0.5em 0;
+ display:block;
+ }
+
+ #reposition {
+ bottom: 65px;
+ }
+
+ #view-my-reports,
+ #login-options a.loggedin
+ {
+ text-align:left;
+ font-weight:normal;
+ }
+
+ #view-my-reports strong{
+ display:block;
+ margin-bottom: 0.25em;
+ }
+
+ #view-my-reports .draft_count{
+ -webkit-border-radius: 50%;
+ border-radius: 50%;
+ background-color: rgb(186,21,28);
+ padding: 0 0.4em;
+ color: #fff;
+ text-shadow: none;
+ font-weight: bold;
+ border: 1px solid #ffea3d;
+ min-width: 1em;
+ display: inline-block;
+ }
+
+ #login-options a.loggedin .signout{
+ display:block;
+
+ }
+
+ #relocate {
+ display: block;
+ height: 30px;
+ width: 30px;
+ padding: 5px;
+ margin: 0px;
+ background-color: rgba(248,248,248,0.9);
+ background-image: url(../images/location@x2.png);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 50%;
+ }
+
+ #pc {
+ padding-left: 0.2em;
+ border-left: 1px solid #F6BE41;
+ }
+
+ #postcodeForm .ui-icon-searchfield::after {
+ background-color: rgba(0,0,0,0);
+ height: 30px;
+ width: 30px;
+ left: 0px;
+ margin-top: -14px;
+ background-size: 30px 30px;
+ background-position: 0px 0px;
+ background-image: url(../images/search.png);
+ }
+ @media only screen and (min-resolution: 320dpi),
+ only screen and (-webkit-min-device-pixel-ratio: 2) {
+ #postcodeForm .ui-icon-searchfield::after {
+ background-image: url(../images/search@x2.png);
+ }
+ }
+
+ #postcodeForm .ui-btn {
+ border: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+
+ #postcodeForm .ui-btn-up-c,
+ #postcodeForm .ui-btn-down-c {
+ background-image: none;
+ background-color: rgba(0,0,0,0);
+ }
+
+ #postcodeForm .ui-icon {
+ background-image: url(images/icons-18-black.png);
+ }
+ @media only screen and (min-resolution: 320dpi),
+ only screen and (-webkit-min-device-pixel-ratio: 2) {
+ #postcodeForm .ui-icon {
+ background-image: url(images/icons-36-black.png);
+ }
+ }
+
+ div.testing {
+ position: absolute;
+ left: 0px;
+ right: 0px;
+ top: 40px;
+ width: 100%;
+ padding: 3px;
+ text-align: center;
+ font-size: 12px;
+ background-color: red;
+ color: white;
+ font-weight: bold;
+ text-shadow: none;
+ margin-bottom: 5px;
+ }
+/* drafts screen */
+
+ #drafts {
+ padding: 15px;
+ pointer-events: none;
+ }
+
+ #drafts li.ui-li-has-alt > a .ui-btn {
+ border: 1px;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+ #drafts li.ui-li-has-alt > a .ui-icon {
+ background-image: url(images/icons-18-black.png);
+ }
+ @media only screen and (min-resolution: 320dpi),
+ only screen and (-webkit-min-device-pixel-ratio: 2) {
+ #drafts li.ui-li-has-alt > a .ui-icon {
+ background-image: url(images/icons-36-black.png);
+ }
+ }
+
+ #drafts li.ui-btn-down-c,
+ #drafts li.ui-btn-up-c {
+ border: none;
+ }
+
+ #drafts .use_report {
+ text-align: left;
+ margin-left: 50px;
+ }
+
+ #drafts .with_photo.with_location .use_report {
+ margin-left: 0px;
+ padding-left: 5px;
+ }
+
+ #drafts li.with_photo.with_location:before {
+ content: url(../images/photos.png);
+ background-image: url(../images/pin.png);
+ background-size: 18px 18px;
+ background-repeat: no-repeat;
+ background-position: center left;
+ display: block;
+ float: left;
+ height: 18px;
+ width: 36px;
+ padding-left: 18px;
+ margin-top: 1.5em;
+ margin-left: 5px;
+ }
+
+ #drafts li.with_photo:before {
+ content: url(../images/photos.png);
+ display: block;
+ float: left;
+ height: 18px;
+ width: 18px;
+ margin-top: 1.5em;
+ margin-left: 5px;
+ }
+
+ #drafts li.with_location:before {
+ content: '';
+ background-image: url(../images/pin.png);
+ display: block;
+ float: left;
+ background-size: 18px 18px;
+ background-repeat: no-repeat;
+ background-position: center left;
+ height: 18px;
+ width: 18px;
+ margin-top: 1.5em;
+ margin-left: 5px;
+ }
+
+/* photo screen */
+ div.photo {
+ position: relative;
+ display: inline-block;
+ }
+
+ div.photo-wrapper {
+ margin: auto;
+ text-align: center;
+ }
+
+ img.small {
+ min-height: 45%;
+ max-width: 85%;
+ max-height: 70%;
+ }
+
+ img.placeholder {
+ height: 199px;
+ width: 270px;
+ }
+
+ #id_del_photo_button.photo-corner-button {
+ position: absolute;
+ bottom: -15px;
+ right: 0px;
+ -webkit-border-radius: 50%;
+ border-radius: 50%;
+ background-color: rgb(186,21,28);
+ padding: 12px;
+ color: #fff;
+ text-shadow: none;
+ font-weight: bold;
+ font-size: 30px;
+ }
+
+ @media only screen and (max-width: 800px) and (min-width: 600px) {
+ img.placeholder {
+ height: 398px;
+ width: 540px;
+ }
+ }
+
+ .ui-icon-fms-photo-existing,
+ .ui-icon-fms-photo-new {
+ position: static;
+ float: left;
+ background-size: 16px 16px;
+ }
+ div[data-role='header'] .ui-icon-fms-account {
+ background-image: url(../images/user@x2.png);
+ background-size: 18px 18px;
+ }
+ .ui-icon-fms-photo-new {
+ background-image: url(../images/camera.png);
+ }
+ .ui-icon-fms-photo-existing {
+ background-image: url(../images/photos.png);
+ }
+
+ @media only screen and (min-resolution: 320dpi),
+ only screen and (-webkit-min-device-pixel-ratio: 2) {
+ div[data-role='header'] .ui-icon-fms-account {
+ background-image: url(../images/user@x2.png);
+ }
+ .ui-icon-fms-photo-new {
+ background-image: url(../images/camera@x2.png);
+ }
+ .ui-icon-fms-photo-existing {
+ background-image: url(../images/photos@x2.png);
+ }
+ }
+/* details screen */
+
+ #details-page div[data-role="content"] {
+ background-color: rgba(255, 255, 255, 0) !important;
+ }
+
+ #details-page div[data-role='content'] {
+ position: static;
+ padding: 0px;
+ margin-bottom: 0px;
+ }
+
+/* open311 extra fields screen */
+
+ #details-extra-page div[data-role="content"] {
+ height: auto !important;
+ }
+ #category_meta {
+ margin: 0px 15px 15px 15px;
+ }
+
+ #category_meta h4 {
+ display: none;
+ }
+
+ #category_meta label,
+ #category_meta input,
+ #category_meta textarea,
+ #category_meta select {
+ display: block;
+ }
+
+ #category_meta label:first {
+ padding-top: 1em;
+ }
+ #category_meta label {
+ padding-top: 0.5em;
+ }
+
+/* submission pages */
+
+ #errors {
+ display: none;
+ margin-bottom: 1em;
+ }
+
+ #errors ul {
+ padding: 0px 0px 0px 20px;
+ }
+
+ #errors li.plain {
+ font-weight: bold;
+ margin-left: -20px;
+ list-style: none;
+ }
+
+/* help */
+ #help {
+ position: fixed;
+ top: 0px;
+ display: none;
+ z-index: 3005;
+ height: 100%;
+ background-color: rgba(200,200,200,0.7);
+ }
+
+ #helpContent {
+ margin: 60px 1em 0px 1em;
+ padding: 0.5em;
+ background-color: rgb(255,255,255);
+ overflow: scroll;
+ }
+
+ #help.android2 {
+ position: absolute;
+ background-color: rgb(255,255,255);
+ overflow: auto;
+ }
+
+ #help.android2 #helpContent {
+ margin-top: 0px;
+ }
+
+ #help h1 {
+ font-size: 1.25em;
+ margin-top: 0px;
+ margin-right: 1.25em;
+ }
+
+ #help dt {
+ font-weight: bold;
+ margin-bottom: 0.2em;
+ }
+
+ #help dd {
+ -webkit-margin-start: 0.5em;
+ margin-bottom: 1em;
+ }
+
+ #help a {
+ font-size: 1em;
+ }
+
+ #display-help {
+ position: fixed;
+ display: none;
+ top: 120px;
+ right: 0px;
+ text-align: right;
+ padding: 10px 2px 10px 2px;
+ background-color: rgba(246,190,65,0.95);
+ color: grey;
+ font-weight: bold;
+ font-size: 2em;
+ z-index: 3005;
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ }
+
+ #dismiss {
+ position: fixed;
+ display: none;
+ top: 60px;
+ right: 0.5em;
+ color: grey;
+ font-weight: bold;
+ font-size: 2em;
+ padding: 3px;
+ border-radius: 5px;
+ }
+
+ #help.android2 #dismiss {
+ top: 5px;
+ right: 5px;
+ }
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-26 07:28:14 +0000