ui/css/src/scss/components/details-page.scss

// Licensed to the Apache Software Foundation (ASF) under one
// or more contributor license agreements.  See the NOTICE file
// distributed with this work for additional information
// regarding copyright ownership.  The ASF licenses this file
// to you under the Apache License, Version 2.0 (the
// "License"); you may not use this file except in compliance
// with the License.  You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing,
// software distributed under the License is distributed on an
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
// KIND, either express or implied.  See the License for the
// specific language governing permissions and limitations
// under the License.

//TODO find new stategy to organize this styles
.detail-view {
  padding: 0 0 0 14px;
}

.ui-tabs .info {
  display: inline-block;
  width: 91%;
  height: auto;
  margin: 10px;
  padding: 14px 14px 0;
  border: 1px dashed #d7d7d7;
  /*+box-shadow:inset 0px 1px 2px #FFFFFF;*/
  box-shadow: inset 0 1px 2px #ffffff;
  background: #efefef;
  overflow: visible;
  -moz-box-shadow: inset 0 1px 2px #ffffff;
  -webkit-box-shadow: inset 0 1px 2px #ffffff;
  -o-box-shadow: inset 0 1px 2px #ffffff;
}

.ui-tabs .info li {
  margin: 0 0 18px;
  font-size: 12px;
  color: #3e4c59;
}

.ui-tabs .info li strong {
  font-weight: bold;
  color: #506273;
}

.project-view .ui-tabs ul li.ui-state-default a {
  box-shadow: inset -1px -2px 12px #596066;
  /*+box-shadow:inset -1px -2px 12px #596066;*/
  background: #6d747d;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 -1px 1px #3a3e42;
  -moz-box-shadow: inset -1px -2px 12px #596066;
  -webkit-box-shadow: inset -1px -2px 12px #596066;
  /*+text-shadow:0px -1px 1px #3A3E42;*/
  -o-box-shadow: inset -1px -2px 12px #596066;
  -moz-text-shadow: 0 -1px 1px #3a3e42;
  -webkit-text-shadow: 0 -1px 1px #3a3e42;
  -o-text-shadow: 0 -1px 1px #3a3e42;
}

.project-view .ui-tabs ul li.ui-state-hover a {
  background: #878e97 0 8px;
}

.project-view .ui-tabs ul li.ui-state-active a {
  box-shadow: 0 0;
  background: #dbdddf;
  font-weight: bold;
  /*+text-shadow:0px 0px #FFFFFF;*/
  color: #4f6270;
  text-shadow: 0 0 #ffffff;
  -moz-text-shadow: 0 0 #ffffff;
  -webkit-text-shadow: 0 0 #ffffff;
  /*+box-shadow:0px 0px;*/
  -o-text-shadow: 0 0 #ffffff;
  -moz-box-shadow: 0 0;
  -webkit-box-shadow: 0 0;
  -o-box-shadow: 0 0;
  -moz-box-shadow: 0 0 none;
  -webkit-box-shadow: 0 0 none;
  -o-box-shadow: 0 0 none;
}

.ui-tabs li.ui-state-active.first.last a,
.ui-tabs li.ui-state-default.first.last a {
  /*+border-radius:4px 4px 0 0;*/
  border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  -khtml-border-radius: 4px 4px 0 0;
}

.ui-tabs .ui-tabs-hide {
  display: none !important;
}

.ui-tabs .ui-tabs-panel {
  clear: both;
  width: 97%;
  height: 591px;
  padding: 7px 0 0 0;
  border: 1px solid #d9d9d9;
  overflow: auto;
  overflow-x: hidden;
}

.detail-view .main-groups {
  width: 100%;
  max-height: 407px;
  margin-right: 12px;
  overflow: auto;
  /*[empty]padding:;*/
  overflow-x: hidden;
}

.detail-view.edit-mode .main-groups {
  max-height: 360px;
}

.detail-group table {
  width: 98%;
  margin-top: 10px;
  border-bottom: 1px solid #dfdfdf;
  font-size: 12px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#eaeaea', GradientType=0);
}

.detail-group table tbody {
  border: 0;
}

.detail-group table tr,
.detail-group table td {
  vertical-align: middle;
  border: 0;
  cursor: default;
}

.detail-group table tr.odd {
  background: none;
}

.details.group-multiple table {
  border: 0;
  border-top: 0;
}

.details.group-multiple table.header {
  width: 94%;
  margin-bottom: 1px;
}

.details.group-multiple table tbody {
  border-top: 1px solid #f2f0f0;
}

.detail-group .main-groups table td.name {
  width: 113px;
  padding: 14px 12px 13px 13px;
  border: 0;
  font-weight: bold;
  color: #6d6d6d;
  text-indent: 0;
}

.detail-group .main-groups table td.value {
  text-indent: 0;
}

.detail-group .main-groups table td.value > span {
  display: block;
  position: relative;
  float: left;
  top: 9px;
  width: 245px;
  height: 30px;
  overflow: auto;
}

.detail-group .main-groups table td.value > span.copypasteenabledvalue {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  -o-text-overflow: ellipsis;
}

.detail-group .main-groups table td.value > .copypasteactive {
  display: auto;
  white-space: nowrap;
  overflow: none;
}

div.copypasteicon {
  float: left;
  width: 18px;
  height: 21px;
  margin-top: 0;
  margin-left: 6px;
  background: url('../images/sprites.png') no-repeat -271px -65px;
}

div.copypasteicon:hover {
  background: url('../images/sprites.png') no-repeat -271px -646px;
}

.detail-group .main-groups table td.value > span.copypasteenabledvalue {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  -o-text-overflow: ellipsis;
}

.detail-group .main-groups table td.value > .copypasteactive {
  display: auto;
  white-space: nowrap;
  overflow: none;
}

div.copypasteicon {
  float: left;
  width: 18px;
  height: 21px;
  margin-top: 0;
  margin-left: 6px;
  background: url('../images/sprites.png') no-repeat -271px -65px;
}

div.copypasteicon:hover {
  background: url('../images/sprites.png') no-repeat -271px -646px;
}

.detail-group .main-groups table td.value > span select {
  width: 100% !important;
}

.detail-group .main-groups table td.value .view-all {
  float: right;
  /*[empty]height:;*/
  /*+border-radius:4px 0 0 4px;*/
  margin: 7px 0 0;
  padding: 0;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px 0 0 4px;
  -khtml-border-radius: 4px 0 0 4px;
}

.detail-group .main-groups table td.value .view-all span {
  display: block;
  float: left;
  margin-top: -5px;
  padding: 5px 2px 8px 4px;
  border-left: 1px solid #9fa2a6;
  /*+border-radius:4px 0 0 4px;*/
  border-radius: 4px 0 0 4px;
  background: url('../images/gradients.png') repeat-x 0 -529px;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px 0 0 4px;
  -khtml-border-radius: 4px 0 0 4px;
}

.detail-group .main-groups table td.value .view-all .end {
  float: right;
  width: 22px;
  height: 25px;
  margin: -6px 0 0;
  padding: 0;
  background: url('../images/sprites.png') no-repeat 100% -397px;
}

.detail-group .main-groups table td.value .view-all:hover {
  background-position: 100% -431px;
}

.detail-group .main-groups table td.value .view-all:hover span {
  background-position: 0 -566px;
}

.detail-group .main-groups table td.value .view-all:hover div.end {
  background-position: -618px -430px;
}

.detail-view .detail-group .button.add {
  clear: both;
  margin: 0 21px 13px 0 !important;
}

.detail-view .details.group-multiple {
  float: left;
  width: 100%;
  height: 600px;
  margin-bottom: 30px;
}

.detail-view .details.group-multiple .main-groups {
  width: 98%;
  margin-bottom: 35px;
  overflow: visible;
}


.detail-group .main-groups table td.value .view-all:hover {
  background-position: 100% -431px;
}

.panel.always-maximized .detail-group .main-groups table td.value span {
  width: 565px;
}

.detail-group.head table td.name {
  padding: 20px 0 17px;
}

.detail-view .button.done,
.detail-view .button.cancel {
  display: inline-block;
  position: relative;
  position: absolute;
  top: 550px;
  /*+border-radius:4px;*/
  left: -1px;
  margin: 0 0 0 12px;
  padding: 9px 20px;
  border-radius: 4px;
  border-radius: 4px 4px 4px 4px;
  /*+text-shadow:0px -1px 2px #000000;*/
  box-shadow: 0 1px 4px #adadad;
  background: url('../images/bg-gradients.png') 0 -221px;
  font-size: 12px;
  font-weight: bold;
  /*+box-shadow:0px 1px 4px #ADADAD;*/
  color: #ffffff;
  text-shadow: 0 -1px 2px #000000;
  cursor: pointer;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
  -moz-text-shadow: 0 -1px 2px #000000;
  -webkit-text-shadow: 0 -1px 2px #000000;
  /*+placement:shift -1px 550px;*/
  -o-text-shadow: 0 -1px 2px #000000;
  -moz-box-shadow: 0 1px 4px #adadad;
  -webkit-box-shadow: 0 1px 4px #adadad;
  -o-box-shadow: 0 1px 4px #adadad;
}

.detail-view .button.cancel {
  left: 85px;
  background-position: 0 -795px;
  color: #808080;
  /*+text-shadow:0px -1px 2px #000000;*/
  text-shadow: 0 -1px 2px #000000;
  text-shadow: 0 -1px 2px #cccccc;
  -moz-text-shadow: 0 -1px 2px #000000;
  -webkit-text-shadow: 0 -1px 2px #000000;
  -o-text-shadow: 0 -1px 2px #000000;
  -moz-text-shadow: 0 -1px 2px #cccccc;
  -webkit-text-shadow: 0 -1px 2px #cccccc;
  -o-text-shadow: 0 -1px 2px #cccccc;
}

.detail-view .button.done:hover {
  box-shadow: inset 0 1px 3px #000000;
  /*+box-shadow:inset 0px 1px 3px #000000;*/
  background-position: 0 -950px;
  -moz-box-shadow: inset 0 1px 3px #000000;
  -webkit-box-shadow: inset 0 1px 3px #000000;
  -o-box-shadow: inset 0 1px 3px #000000;
}

.detail-view .button.cancel:hover {
  background-position: 0 -834px;
}

div.group-multiple div.detail-group table {
  margin-top: -1px;
}

div.group-multiple div.detail-group table.header {
  margin-top: 11px;
  border: 0;
}

div.group-multiple div.detail-group table.header thead th {
  border: 0;
  background: transparent;
}

div.ui-tabs-panel table span.none {
  color: #9d9d9d;
}

div.detail-group td.view-all div.view-all {
  float: right;
  width: auto;
}

div.detail-group td.view-all a {
  display: block;
  float: left;
  font-size: 13px;
  font-weight: 100;
  /*+text-shadow:0px 1px 2px #FFFFFF;*/
  color: #0373b7;
  text-decoration: none;
  text-shadow: 0 1px 2px #ffffff;
  -moz-text-shadow: 0 1px 2px #ffffff;
  -webkit-text-shadow: 0 1px 2px #ffffff;
  -o-text-shadow: 0 1px 2px #ffffff;
}

div.detail-group td.view-all:hover a {
  background-position: 0 -566px;
}

div.detail-group td.view-all a span {
  /*+placement:shift -4px -1px;*/
  position: relative;
  top: -1px;
  left: -4px;
}

div.detail-group td.view-all:hover a span {
  color: #000000;
  text-decoration: underline;
}

div.detail-group td.view-all div.view-all div.end {
  display: none;
  float: left;
  width: 15px;
  height: 25px;
  background: url('../images/sprites.png') -617px -398px;
}

div.detail-group td.view-all:hover div.view-all div.end {
  background-position: -617px -431px;
}

div.details div.detail-group td.value input,
div.details div.detail-group td.value select {
  width: 282px;
}

div.details div.detail-group td.value input,
div.details div.detail-group td.value input[type='checkbox'] {
  float: left;
  width: 15px;
  margin-left: 10px;
}

div.details div.detail-group td.value input,
div.details div.detail-group td.value input[type='text'] {
  width: 93%;
}

div.details .main-groups label.error {
  position: absolute;
  top: 6px;
  right: 10%;
}

.detail-view td.view-all.multiple {
  display: block;
  float: left;
  max-width: 145px;
  height: 28px;
  margin-left: 0;
  text-align: left;
}