cyberbotics / webots-cloud

Apache License 2.0
2 stars 2 forks source link

New layout for the proto tab #124

Closed BenjaminDeleze closed 1 year ago

BenjaminDeleze commented 1 year ago

Implement the changes discussed here: https://github.com/cyberbotics/webots-cloud/discussions/123

omichel commented 1 year ago

Here is my try with the CSS:


/* webots-cloud.css | https://proto.webots.cloud/css/webots-cloud.css */

.scrollable-body {
  /* background-color: #fafafa; */
}

.result-title {
  /* padding: 12px; */
  /* border-top: #dcdcdc solid 1px; */
  /* background-color: #f3f3f3; */
  padding: 0 12px 6px 12px;
  border-top: #f0f0f0 solid 1px;
  background-color: #f8f8f8;
  border-right: #f0f0f0 solid 1px;
  border-left: #f0f0f0 solid 1px;
  box-shadow: 5px 5px 5px 0 #ddd;
}

.result-version {
  /* padding: 12px; */
  /* font-size: 0.8em; */
  /* background-color: #f3f3f3; */
  padding: 0px 6px 4px 4px;
  font-size: 0.7em;
  background-color: #f8f8f8;
  border-bottom: #f0f0f0 solid 1px;
  border-right: #f0f0f0 solid 1px;
  border-left: #f0f0f0 solid 1px;
  box-shadow: 5px 5px 5px 0 #ddd;
  text-align: right;
  color: #888;
}

/* Element | https://proto.webots.cloud/proto */

a.result-element:nth-child(3) {
  background-color: #ffffff80;
}