magnacarto/app/css/style.css

/* Base */
html, body {
  height: 100%;
}

.top-buffer-1 {
  padding-top: 1em;
}

.top-buffer-2 {
  padding-top: 2em;
}

/* Sitebar */
.row {
  margin-right: 0;
  margin-left: 0;
}

#wrapper {
  height: 100%;
}

#wrapper #sidebar-wrapper.active {
  left: 275px;
}

#sidebar-wrapper {
  margin-left: -275px;
  left: 50px;
  width: 275px;
  background: #4c4a49;
  position: fixed;
  height: 100%;
  z-index: 1000;
}

#content-wrapper {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 80px;
  overflow: auto;
}

#sidebar-wrapper ~ #content-wrapper,
#sidebar-wrapper ~ #logging-wrapper,
#sidebar-wrapper ~ #logging-resizer {
  left: 50px;
}

#sidebar-wrapper.active ~ #content-wrapper,
#sidebar-wrapper.active ~ #logging-wrapper,
#sidebar-wrapper.active ~ #logging-resizer {
  left: 275px;
}

#sidebar-resizer,
#logging-resizer {
  background-color: #666;
  position: fixed;
  z-index: 1000;
}

#sidebar-resizer {
  top: 0;
  bottom: 0;
  left: 270px;
  width: 5px;
  cursor: ew-resize;
}

#logging-resizer {
  left: 275px;
  right: 0;
  bottom: 75px;
  height: 5px;
  cursor: ns-resize;
}

#sidebar-resizer:hover,
#sidebar-resizer.active,
#logging-resizer:hover,
#logging-resizer.active {
  background-color: #aaa;
}

.sidebar-nav {
  display: block;
  float: left;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav.delimiter {
  line-height: 20px;
  height: 20px;
}

.sidebar-nav li {
  line-height: 35px;
  border-bottom: 1px solid #454241;
  outline:none;
}

.sidebar-nav li a {
  display: block;
  color: #F2F2F2;
  text-decoration: none;
  outline:none;
  cursor: pointer;
  margin-left: 10px;
}

.sidebar-nav li:hover {
  color: #F2F2F2;
  background: rgba(255,255,255,0.2);
  text-decoration: none;
}

.sidebar-nav li a.disabled,
.sidebar-nav li a.disabled:hover {
  color: #353535;
  background: #4c4a49;
  cursor: default;
}

.sidebar-nav > .sidebar-brand {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
}

.sidebar-nav > .sidebar-brand:hover {
  background-color: #4c4a49;
}
.sidebar-nav > .sidebar-brand a:hover {
 cursor: default;
}
.sidebar-nav > .sidebar-brand span:hover {
 cursor: pointer;
}

.sidebar-nav > .sidebar-brand .menu-icon {
 padding-top: 10px;
 right: -3px;
}

.sidebar-nav > .collapse.in,
.sidebar-nav li > .collapse.in {
  color: #bbbbbb;
  background-color: #454241;
}

.sidebar-nav li div.collapse a {
  color: #bbbbbb;
  margin-left: 15px;
}

.menu-icon {
  float:right;
  padding-right: 20px;
  padding-top: 10px;
  cursor: pointer;
}

.style-list,
.layer-list,
.sidebar-nav li.active {
  border-left: 4px solid #19aa8d;
}

.sidebar-nav li.active:hover {
  background-color: #4c4a49;
}

.sidebar-nav li.active div a:hover {
  background-color: rgba(255,255,255,0.2);
  cursor: pointer
}

/* Logging */
#logging-wrapper {
  position: fixed;
  bottom: 0;
  height: 0;
  overflow: auto;
  right: 0;
}

#logging-wrapper.active {
  height: 80px;
  padding-top: 5px;
}

#logging-wrapper table {
  margin: 0;
}

#logging-wrapper table tbody tr td:first-of-type {
  padding-left: 5px;
  padding-right: 5px;
  white-space: nowrap;
}

#logging-wrapper table tbody tr td:last-of-type {
  width: 100%;
}

#logging-wrapper table tbody tr td ul {
  margin: 0;
}

.table > tbody > tr.outdated > td {
  background-color: #eee;
  color: #aaa;
}

/* Map-grid used in Dashboard and on Bookmaprs */
.grid-map {
  border: 1px solid #ccc;
}

.map-box {
  height: 100%;
  width: 100%;
}


/* Bookmark map controls */
.map-control-btns {
  z-index: 1000;
  top: 10px;
  right: 10px;
  cursor: pointer;
  position: absolute;
}

.map-control-btns a {
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 4px;
  border-bottom: 1px solid #ccc;
  display: block;
  text-align: center;
  text-decoration: none;
  color: black;
  opacity: 0.9;
  float:left;
  margin-left: 10px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  background-color: rgba(255, 255, 255, 0.9);
}

.map-control-btns a:hover {
  background-color: rgba(238, 238, 238, 0.9);
}

.map-control-btns a:active {
  background-color: rgba(221, 221, 221, 0.9);
}

.map-title {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
  background-color: #fff;
  opacity: 0.9;
  line-height: 26px;
}

.map-title h4 {
  margin: 0;
  padding: 4px;
}

.map-title input {
  font-size: 18px;
  font-weight: 500;
  color: rgb(51, 51, 51);
  line-height: 19.8px;
  border-radius: 0;
}

.map-title button {
  border-radius: 0;
}


/* Project Overview */
.list-group-item:hover {
  background-color: #999;
  border: 1px solid #999;
}


/* Layer / Style lists */
.style-nav,
.layer-nav {
  color: #999999;
  margin-left: 0;
  position: relative;
}

.style-list,
.layer-list {
  height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

.style-list label,
.layer-list label {
  font-weight: normal;
}

.style-list-item,
.layer-list-item {
  margin-left: 15px;
  cursor: default;
}

.layer-list-item i {
  width: 16px;
}

.layer-list label {
  line-height: 22px;
}

.layer-list label,
div.as-sortable-dragging .layer-list-item label {
  width: 100%;
  overflow: hidden;
  vertical-align: top;
}

.style-list .glyphicon,
.layer-list .glyphicon {
  padding-right: 2px;
}

.as-sortable-placeholder {
  border-radius: 4px;
  background-color: #333;
  max-width: 95%;
  margin-top: 5px;
}

div.as-sortable-dragging {
  background-color: rgba(24, 24, 24, 0.8);
  color: #999;
  overflow: hidden;
  z-index: 10000;
  border-radius: 4px;
  white-space: nowrap;
  padding-top: 2px;
  padding-right: 2px;
  padding-left: 2px;
}

div.as-sortable-dragging label {
  font-weight: normal;
}

i.mca-icon {
  display: inline-block;
  font-style: normal;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  top: 1px;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  border: 1px solid #999;
  cursor: default;
}

i.mca-icon.icon-postgis:before {
  content: 'P';
}

i.mca-icon.icon-gdal:before {
  content: 'G';
}

i.mca-icon.icon-shape:before {
  content: 'S';
}

i.mca-icon.icon-sqlite:before {
  content: 'Q';
}

i.mca-icon.icon-ogr:before {
  content: 'O';
}

i.mca-icon.icon-geojson:before {
  content: 'J';
}

i.mca-icon.icon-point:before {
  content: 'Pt';
}

i.mca-icon.icon-linestring:before {
  content: 'Ls';
}

i.mca-icon.icon-polygon:before {
  content: 'Po';
}

i.mca-icon.icon-raster:before {
  content: 'Ra';
}


/* Notification Styling */
.alert-box {
  position: fixed;
  right: 0px;
  top: 10px;
  max-width: 80%;
  z-index: 2001;
}

.alert {
  position: relative;
  z-index: 1001;
  top: 5px;
  right: 5px;
  background: #fefefe;
  color: #666666;
  font-weight: bold;
  font-size: small;
  padding: 12px;
  padding-left: 16px;
  border-top: solid 3px #CCCCCC;
  border-radius: 5px;
  margin-bottom: 10px;
  -webkit-box-shadow: 0 10px 10px -5px rgba(0,0,0,.08);
  -moz-box-shadow: 0 10px 10px -5px rgba(0,0,0,.08);
  box-shadow: 0 10px 10px -5px rgba(0,0,0,.08);
}

.alert .close {
  position: absolute;
  top: -5px;
  right: 1px;
}

.alert div {
  padding-right: 10px;
}

.alert-info {
  border-color: #b8dbf2;
}
.alert-success {
  border-color: #8DCE77;
  color: #898989;
}

.alert-warning {
  border-color: rgba(255,165,0,.5);
  color: #db9e34;
}
.alert-danger {
  border-color: #ec8282;
  color: #c9302c;
}
.alert-primary {
  border-color: #9ca6f1;
}

/* Modals common */
.modal-dialog .modal-header .close {
  position: absolute;
  top: 5px;
  right: 10px;
}

/* Edit layer from */
.layer-modal .modal-dialog {
  max-width: 980px;
  width: 90%;
}

.layer-modal .modal-dialog .modal-header .modal-title {
  font-size: 24px;
  margin-bottom: 10px;
  margin-top: 20px;
  font-weight: 500;
  line-height: 1.1;
}

.layer-modal .modal-dialog .modal-header .copy-layer-form {
  margin-right: 28px;
}

.layer-form {
  overflow: auto;
  max-height: 75vh;
  padding: 0;
}

.layer-form .panel {
  border: none;
  border-radius: 0;
  box-shadow: 0;
  margin: 0;
}

.layer-form .panel .panel-heading span {
  margin-right: 5px;
}

.layer-form .panel .panel-body {
  margin-right: 15px;
}

.layer-form .panel .panel-body textarea {
  font-family: monospace,Courier;
}

.layer-form .form-horizontal .control-label {
  cursor: pointer;
}


/* OpenLayers 3 controls and overwrites */
.ol-control,
.ol-control:hover {
  border-radius: 2px;
  background-color: inherit;
}

.ol-zoom button {
  background-color: rgba(255, 255, 255, 0.9);
  color: black;
  cursor: pointer;
}

.ol-zoom button:hover {
  background-color: rgba(238, 238, 238, 0.9);
}

.ol-zoom button:active {
  background-color: rgba(221, 221, 221, 0.9);
}

.ol-zoom .ol-zoom-in {
  border-radius: 4px 4px 0 0;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

.ol-zoom .ol-zoom-out {
  border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}

.ol-control.display-zoom-level,
.ol-control.display-render-time {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 2px;
    padding: 0 5px;
    position: absolute;
}

.ol-control.display-zoom-level span,
.ol-control.display-render-time span {
  margin-left: 5px;
}

.ol-control.display-zoom-level {
    bottom: 35px;
    right: 10px;
}

.ol-control.display-render-time {
    bottom: 10px;
    right: 10px;
}


/* Angular Gridster overwrites */
.gridster-loaded {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: color 0 ease-in;
  transition: none;
}

.gridster-loaded .gridster-item {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: color 0 ease-in;
  transition: none;
  -webkit-transition-delay: none;
  -moz-transition-delay: none;
  -o-transition-delay: none;
  transition-delay: none;
}

.gridster-loaded .gridster-item.gridster-item-moving,
.gridster-loaded .gridster-preview-holder {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: color 0 ease-in;
  transition: none;
}


/* Helper */
.disable-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cursor-pointer {
  cursor: pointer;
}

.margin-r-16 {
  margin-right: 16px;
}