.zci--bitcoin_address .zci__body .zci__more-at{
    padding-top: 1em;
}
.zci--bitcoin_address .record .record__cell__value {
    word-wrap: break-word;
    padding: 0.4em;
}

.zci--bitcoin_address .record .record__cell__key {
    padding: 0.4em;
    width: 150px;
}

.is-mobile .zci--bitcoin_address .record .record__cell__value {
    max-width: 150px;
}

.zci--bitcoin_address .record .record__body{
    width: 100%;
}

.is-mobile .zci--bitcoin_address .record .record__cell__key {
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zci--bitcoin_address .zci__body .zci__more-at{
    padding-top: 1em;
}
.zci--bitcoin_address .record .record__cell__value {
    word-wrap: break-word;
    padding: 0.4em;
}

.zci--bitcoin_address .record .record__cell__key {
    padding: 0.4em;
    width: 150px;
}

.is-mobile .zci--bitcoin_address .record .record__cell__value {
    max-width: 150px;
    text-overflow: ellipsis;
}

.zci--bitcoin_address .record .record__body{
    width: 100%;
}

.is-mobile .zci--bitcoin_address .record .record__cell__key {
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 700px) {
  .zci--bitcoin_address .zci__img-wrap{
    display: none;
  }
}

Use media query to hide qr code when screen becomes too narrow


.region-content {
  font-family: 'Open Sans', sans-serif;
}
#page-header {
  display: none;
}
legend {
  margin: 10px 0;
}

.crm-container .crm-section .label {
  width: 25%;
}
.crm-container .crm-section .content {
  margin-left: 27%;
}
.crm-container .crm-section.other_amount-section {
  display: none;
}
.crm-container .crm-section.is_recur-section .label {
  display: none;
}

#crm-container.crm-public .label,
#crm-container.crm-public .content {
  padding: .2em .6em;
  line-height: 1.8em;
}
#crm-container.crm-public .price-set-row {
  display: inline-block;
}
#crm-container.crm-public .price-set-row input {
  margin: 0 4px;
}

@media screen and (max-width:767px) {
  .crm-container .crm-section .label {
    float: none;
  }
  .crm-container .crm-section .content {
    margin-left: auto;
  }
}

.region-content {
  font-family: 'Open Sans', sans-serif;
}
#page-header, footer.footer {
  display: none;
}
.language-switcher-locale-url {
  visibility: hidden;
}
legend {
  margin: 10px 0;
}

.crm-container .crm-section .label {
  width: 25%;
}
.crm-container .crm-section .content {
  margin-left: 27%;
}
.crm-container .crm-section.other_amount-section {
  display: none;
}
.crm-container .crm-section.is_recur-section .label {
  display: none;
}

#crm-container.crm-public .label,
#crm-container.crm-public .content {
  padding: .2em .6em;
  line-height: 1.8em;
}
#crm-container.crm-public .price-set-row {
  display: inline-block;
}
#crm-container.crm-public .price-set-row input {
  margin: 0 4px;
}

@media screen and (max-width:767px) {
  .crm-container .crm-section .label {
    float: none;
  }
  .crm-container .crm-section .content {
    margin-left: auto;
  }
}

Hide lang links and footer

Hide lang links and footer


[class^=chr] {
    box-sizing: border-box;
}

.chrExtBar {
    display: block;
    border-top: 1px solid #ddd;
    padding: 10px;
    width: 100%;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99999;
    background-color: #fafafa;
    color: black;
}

.chrExtButton {
    margin-right: 20px;
    border: 0;
    background: #444;
    color: white;
    text-transform: capitalize;
}

.chrExtInput {
    box-shadow: none !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
    padding: 10px !important;
    border-radius: 0 !important;
    border: 1px solid #ddd !important;
    border-right: 0;
}

.chrExtLabel {
    display: inline-block;
    font-weight: bold;
    margin-right: 10px;
}

.chrExtInput,
.chrExtButton {
    height: 35px !important;
}

.chrExtInput+.chrExtInput {
    margin-left: 20px;
}

[class^=chr] {
    box-sizing: border-box;
}

.chrExtBar {
    display: block;
    border-top: 1px solid #ddd;
    padding: 10px;
    width: 100%;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99999;
    background-color: #fafafa;
    color: black;
}

.chrExtBar p {
    margin: 0;
}

.chrExtButton {
    margin-right: 20px;
    border: 0;
    background: #444;
    color: white;
    text-transform: capitalize;
}

.chrExtInput {
    box-shadow: none !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
    padding: 10px !important;
    border-radius: 0 !important;
    border: 1px solid #ddd !important;
    border-right: 0;
}

.chrExtLabel {
    display: inline-block;
    font-weight: bold;
    margin-right: 10px;
}

.chrExtInput,
.chrExtButton {
    height: 35px !important;
}

.chrExtInput+.chrExtInput {
    margin-left: 20px;
}

Remove spacing from `<p>` inside of `.chrExtBar`


@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);

code {
    white-space: pre;
    font-family: Source Code Pro, monospace;
    position: relative;
    left: 2%;
}

.header {
    text-align: right;
    margin-bottom: 2%;
}

a {
    text-decoration: none;
    color: blue;
}

a:visited {
    color: blue;
}

body {
    background-color: #FFF;
    font-family: Open Sans, sans-serif;
    font-size: 1.2em;
}

.content {
    margin-top: 5%;
    margin-left: 7%;
    margin-right: 7%;
}

.demo-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.demo-container iframe {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);

code {
    white-space: pre-wrap;
    font-family: Source Code Pro, monospace;
    position: relative;
    left: 2%;
}

.header {
    text-align: right;
    margin-bottom: 2%;
}

a {
    text-decoration: none;
    color: blue;
}

a:visited {
    color: blue;
}

body {
    background-color: #FFF;
    font-family: Open Sans, sans-serif;
    font-size: 1.2em;
}

.content {
    margin-top: 5%;
    margin-left: 7%;
    margin-right: 7%;
}

.demo-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.demo-container iframe {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

Fix code tag wrapping issue

Fix code tag wrapping issue


@import url("platform:/plugin/org.eclipse.ui.themes/css/e4_default_mac.css");

.MPartStack, .MPartStack.active {
	swt-corner-radius: 6;
}

#org-eclipse-ui-editorss .MPartStack.active {
	swt-selected-tab-fill: '#org-eclipse-ui-workbench-ACTIVE_TAB_BG_START' #F4F4F4 100% 50%;
	background-color: #F4F4F4;
}

CTabFolder {
  swt-selected-tabs-background: #F4F4F4 100% 50%;
}

Improve custom tabs colors in the Phaser Editor theme.


.center {
    text-align: center;
}

iframe {
	border:none;
}

#map {
    width:100%;
    height:300px;
}

#header {
    width: 200px;
}

.content {
   margin-top: 60px;
}

input {
    width: 98px;
}

.block label {
    display: inline-block;
    width: 100px;
    text-align: right;
}
.well {
    margin-top: 30px;
}

.block {
    margin-top: 8px;
}

.block input{
    max-width: 250px;
    width:40%;
}

.green {
    color:green;
    font-weight:bold;
}
.block .error {
    display: inline;
    color: red;
}

.well img {
    width: auto;
    height : auto;
    max-height: 100%;
    max-width: 100%;
}

.center {
    text-align: center;
}

iframe {
	border:none;
}

#map {
    width:100%;
    height:300px;
}

.product input {
    margin-left:-4px;
    width:68px;
}

#header {
    width: 200px;
    margin-top:60px
}

.content {
   margin-top: 60px;
}

.block label {
    display: inline-block;
    width: 100px;
    text-align: right;
}
.well {
    margin-top: 30px;
}

.block {
    margin-top: 8px;
}

.block input{
    max-width: 250px;
    width:40%;
}

.green {
    color:green;
    font-weight:bold;
}
.block .error {
    display: inline;
    color: red;
}

.well img {
    width: auto;
    height : auto;
    max-height: 100%;
    max-width: 100%;
}

Fix input width in product page and cart popup


/* https://bitsofco.de/holy-grail-layout-css-grid */
:root {
  --lighter:  #ccc;
  --lightest: #fff;
  --darker:   #999;
  --darkest:  #444;
  --background: pink;
}

header, footer
  { background: var(--darker) }

aside
  { background: var(--background) }

/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout */

Add link to grid layout

Add link to grid layout


@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

* { margin: 0; padding: 0; }

html {
 font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 font-size: 14px;
 font-weight: 400;
}

body { color: rgb(68,68,68) }

header {
 min-height: 100px;
 background-color: rgb(0,106,20);
}

article { width: 66%; margin: 0 2.6em; }

h1, h2, h3 {
 text-transform: uppercase;
 color: rgb(0,106,20);
}

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

html {
 font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 font-size: 14px;
 font-weight: 400;
}

body { margin: 0; color: rgb(68,68,68) }

header {
 min-height: 100px;
 background-color: rgb(0,106,20);
}

article { width: 66%; margin: 0 2.6em; }

h1, h2, h3 {
 text-transform: uppercase;
 color: rgb(0,106,20);
}

Add margins and padding back

Add margins and padding back


Fix navbar color, was transparent

Fix navbar color, was transparent


Create a row with 3 buttons on your homepage

6 user edits needed inside!


Allow multiple css to be included for one vendor


/* The same stars, but in the proble panel */
.criticity-inpb-icon-1 {
    width: 20px;
    height: 20px;
    position: absolute;
    margin-left: 60px;
    z-index: 1;
    outline: none;
    left: 20px;
    top : 10px;
}

/* The show problem image, on the right of the impact*/
.criticity-inpb-icon-2 {
    width: 20px;
    height: 20px;
    position: absolute;
    margin-left: 72px;
    z-index: 1;
    outline: none;
    left: 20px;
    top : 10px;
}

/* The show problem image, on the right of the impact*/
.criticity-inpb-icon-3 {
    width: 20px;
    height: 20px;
    position: absolute;
    margin-left: 84px;
    z-index: 1;
    outline: none;
    left: 20px;
    top : 10px;
}

.admin-photo{
    width  : 20px;
    height : 20px;
}

.impact_img{
    width  : 20px;
    height : 20px;
}

.ack{
    width  : 16px;
    height : 16px;
}

Fix : forgot a css file.

Fix : forgot a css file.


.scheduler-view-month-hidden {
  display: none;
}

.scheduler-view-month .scheduler-view-table-colgrid-first {
  border-left: 0 none;
}

.scheduler-view-month-table-data-col-nomonth {
  color: #ccc;
  font-size: 11px;
}

.scheduler-view-month .scheduler-event-title,
.scheduler-view-month .scheduler-event-content {
  font-size: 14px;
}

.scheduler-view-month-hidden {
  display: none;
}

.scheduler-view-month .scheduler-view-table-colgrid-first {
  border-left: 0 none;
}

.scheduler-view-month-table-data-col-nomonth {
  color: #ccc;
  font-size: 11px;
}

.scheduler-view-month .scheduler-event-title,
.scheduler-view-month .scheduler-event-content {
  font-size: 13px;
}

Decrease font-size on Month view

Decrease font-size on Month view


#contextMenu {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-flow: column;

    border: 1px solid rgba(0,0,0,0.15);
    border-radius:2px;
    box-shadow:0 1px 1px 1px rgba(0,0,0,0.05);
    padding: 10px 15px;

    background: #f8f8f8;
    visibility: hidden;
}
#contextMenu span {
        cursor: pointer;
        font-size: 14px;
        line-height: 26px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
}

#contextMenu img {
    left: 0;
    margin-right: 10px;
    height:20px;
    width:20px;
}

#contextMenu {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-flow: column;
    border-radius:5px;
    box-shadow:0 1px 11px 0px rgba(0,0,0,0.2), 0px 0px 0px 0.5px #AAAAAA inset;
    padding: 4.5px 0px;

    background: #f0f0f0;
    visibility: hidden;
}
#contextMenu span {
    padding: 0 15px 0px;
        cursor: pointer;
        font-size: 14.5px;
        line-height: 19px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: #3E3E3E;
        font-family: Helvetica,Arial,sans-serif;
        font-weight: 500;
}

#contextMenu span:hover {
    background: #689afb;
    color: white;
}

#contextMenu img {
    left: 0;
    margin-right: 10px;
    height:20px;
    width:20px;
}

Improve styling of the context menu to match chrome's context menu


.footer {
  font-size: 10px;
  padding: 5px 0 30px 0;
  border-top: 1px solid #eee;
  margin-top: 30px;
}
.collection tbody tr td:last-child {
  text-align: right;
}

.alert {
  margin-top: 15px;
}
.collection tbody tr td:last-child {
  text-align: right;
}
.footer {
  font-size: 10px;
  padding: 5px 0 30px 0;
  border-top: 1px solid #eee;
  margin-top: 30px;
}

Add top margin for alerts

Add top margin for alerts


/*
 *= require admin/spree_backend
*/

#stock-removals {
  #no_charge_payment {
    #no_charge_note_field {
      label {
        display: block;
      }

      input[type=text] {
        width: 100%;
      }
    }
  }

  #stock_field {
    input[type=text] {
      width: 45px;
    }
  }
}

#admin_stock_removal {
  margin-right: 5px;
}

#admin_stock_removal {
  margin-right: 5px;
}

Fix style for button in admin header

Fix style for button in admin header


div.video {
  clear: both;
  min-height: 7em;
  border-top: 1px solid rgba(0,0,0,0.12);
}

div.poster {
  float: left;
}

div.poster.small {
  width: 5.5em;
  height: 8em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-align: center;
}
div.poster.small img {
  max-height: 100%;
  max-width: 100%;
  margin: 0 auto;
}

div.desc
{
  vertical-align: top;
  margin-left: 7em;
}

span.title {
  font-size: 1.4em;
  font-weight: bold;
  margin-right: 1em;
}

span.info {
  white-space: nowrap;
}
span.year, span.rated, span.duration {
  color: rgba(0,0,0,0.54);
  font-size: 0.9em;
  margin-right: 0.7em;
}

.summary {
  color: rgba(0,0,0,0.54);
}

div.video {
  clear: both;
  min-height: 7em;
  border-top: 1px solid rgba(0,0,0,0.12);
}
div.video:first-child {
  border-top: none;
}

div.poster {
  float: left;
}

div.poster.small {
  width: 5.5em;
  height: 8em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  text-align: center;
}
div.poster.small img {
  max-height: 100%;
  max-width: 100%;
  margin: 0 auto;
}

div.desc
{
  vertical-align: top;
  margin-left: 7em;
}

span.title {
  font-size: 1.4em;
  font-weight: bold;
  margin-right: 1em;
}

span.info {
  white-space: nowrap;
}
span.year, span.rated, span.duration {
  color: rgba(0,0,0,0.54);
  font-size: 0.9em;
  margin-right: 0.7em;
}

.summary {
  color: rgba(0,0,0,0.54);
}

Remove border on first title

Remove border on first title


body{
  background-image: url(emmettgarber.github.io/imgs/wood-floor-1170743_1920.jpg);
  background-color: #6E4A3B;
}
p{
  margin-left: 50%;
  Margin-right: 50%;
  width: 80%;
  background-color: #CBC8CC;
  display: block;
  margin-bottom: 0px;
}
h1{
  display: block;
  margin-left: 50%;
  margin-right: 50%;
  color: #F5E6F7;
  height: 5em;
  width: 25em;
}
h2{
  display: block;
  width: 40%;
  margin-left: 50%;
  margin-right: 50%;
  color: #F5E6F7;
}
h3{
  display: block;
  width: 40%;
  margin-left: 50%;
  margin-right: 50%;
  color: #F5E6F7;
}
h4{
  display: block;
  width: 40%;
  margin-left: 50%;
  margin-right: 50%;
  color: #F5E6F7;
}
footer a{
  display: block;
  background-color: transparent;
  color: #F5E6F7;
}
section a{
  display: block;
  background-color: transparent;
  color: #F5E6F7;
}

body{
  background-image: url(http://emmettgarber.github.io/imgs/wood-floor-1170743_1920.jpg);
  background-color: #6E4A3B;
}
p{
  margin-left: 50%;
  Margin-right: 50%;
  width: 80%;
  background-color: #CBC8CC;
  display: block;
  margin-bottom: 0px;
}
h1{
  display: block;
  margin-left: 50%;
  margin-right: 50%;
  color: #F5E6F7;
  height: 5em;
  width: 25em;
}
h2{
  display: block;
  width: 40%;
  margin-left: 50%;
  margin-right: 50%;
  color: #F5E6F7;
}
h3{
  display: block;
  width: 40%;
  margin-left: 50%;
  margin-right: 50%;
  color: #F5E6F7;
}
h4{
  display: block;
  width: 40%;
  margin-left: 50%;
  margin-right: 50%;
  color: #F5E6F7;
}
footer a{
  display: block;
  background-color: transparent;
  color: #F5E6F7;
}
section a{
  display: block;
  background-color: transparent;
  color: #F5E6F7;
}

Add correct background image link

Add correct background image link


html {
  font-family: "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (min-width: 38em) {
  html {
    font-size: 19px;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

code,
pre {
  font-family: "source-code-pro", Menlo, Monaco, "Courier New", monospace;
}

code {
  font-size: 0.8rem;
}

pre {
  font-size: 0.75rem;
  background-color: white;
  border-left: .25rem solid #e5e5e5;
}

a:hover,
a:focus {
  text-decoration: none;
}

.masthead-title img {
  display: inline;
  float: left;
  border-radius: 50%;
  margin-bottom: 0;
  margin-right: 1rem;
}

Put site title right of Gravatar

Put site title right of Gravatar


/* SwatToolbar  */

ul.swat-toolbar {
	background: #f6f2ea url(../images/swat-toolbar-background.png) top left repeat-x;
	border-bottom: 1px solid #efe8da;
	margin: 0 -16px;
	list-style-type: none;
	padding: 5px 0;
	position: relative;
	top: -16px;
}

.swat-toolbar li {
	display: inline;
}

/* SwatToolLink when inside a SwatToolbar */

.swat-toolbar .swat-tool-link,
.swat-toolbar .swat-tool-link-insensitive {
	padding: 5px 8px;
	border-top: none;
	border-bottom: none;
	border-left: none;
	text-decoration: none;
	background-color: transparent;
}

/* SwatToolbar when inside a SwatNotebook */

.yui-navset div.yui-content div ul.swat-toolbar {
	margin: 0 -12px;
	top: -12px;
}

Patch from griffbrad:
"The negative margin and position on SwatToolbar doesn't work inside a SwatNotebookPage.  The attached patch, adjust the margins and top properties of the CSS to make it align properly."

svn commit r21598


/*
 * Author:        Pierre-Henry Soria <ph7software@gmail.com>
 * Copyright:     (c) 2012-2016, Pierre-Henry Soria. All Rights Reserved.
 * License:       GNU General Public License <http://www.gnu.org/licenses/gpl.html>
 */

body{margin:0;padding:0;color:#555;font:normal 10pt Arial,Helvetica,sans-serif;background:#EFEFEF}section{margin-bottom:5px}a{color:#08c}.success{color:green}.error,.warning,.mandatory{color:red;font-size:13px}.italic{font-style:italic}.underline{text-decoration:underline}input{margin:6px;width:220px;height:24px;font-size:16px}input[type="submit"],input[type="reset"]{width:190px}iframe{border:1px #475C9E solid;width:100%}ul li{display:block;line-height:1.5rem}#block{margin-top:5px}abbr{border-bottom:1px dotted #666}.center{text-align:center;margin-left:auto;margin-right:auto;width:80%}.right{float:right}.left{float:left}.success,.error,.warning,.mandatory,.bold{font-weight:bold}img,video,iframe {max-width:100%}figure{margin-top:30px;margin-bottom:30px}

/*
 * Author:        Pierre-Henry Soria <ph7software@gmail.com>
 * Copyright:     (c) 2012-2016, Pierre-Henry Soria. All Rights Reserved.
 * License:       GNU General Public License <http://www.gnu.org/licenses/gpl.html>
 */

body{margin:0;padding:0;color:#555;font:normal 10pt Arial,Helvetica,sans-serif;background:#EFEFEF}section{margin-bottom:5px}a{color:#08c}.success{color:green}.error,.warning,.mandatory{color:red;font-size:13px}.italic{font-style:italic}.underline{text-decoration:underline}input{margin:6px;width:220px;height:24px;font-size:16px}input[type="submit"],input[type="reset"]{width:190px}iframe{border:1px #475C9E solid;width:100%}ul li{display:block;line-height:1.5rem}#block{margin-top:5px}abbr{border-bottom:1px dotted #666}.center{text-align:center;margin-left:auto;margin-right:auto;width:80%}.right{float:right}.left{float:left}.success,.error,.warning,.mandatory,.bold{font-weight:bold}img,video,iframe{max-width:100%}figure{margin-top:30px;margin-bottom:30px}figcaption{font-style:italic}

Set figcaption text in italic

Set figcaption text in italic


/* Copyright 2015 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

.button {
  /* TODO(apacible): Update to use Chromium paper color. */
  background-color: rgb(238, 238, 238);
  color: rgb(44, 44, 44);
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  overflow: hidden;
  text-align: center;
  width: 100%;
}

/* Copyright 2015 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

.button {
  /* TODO(apacible): Update to use Chromium paper color. */
  background-color: rgb(238, 238, 238);
  color: rgb(44, 44, 44);
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  margin: 0;
  overflow: hidden;
  text-align: center;
  width: 100%;
}

Update Media Router button style.

Update Media Router button style.

This change removes the margin on either side of buttons in the Media Router WebUI.

Review URL: https://codereview.chromium.org/1133283005

Cr-Commit-Position: 972c6d2dc6dd5efdad1377c0d224e03eb8f276f7@{#330268}


:global(section.column).index {
  &:first-of-type { padding-right: var(--inner-column-padding) !important; }
  &:last-of-type { padding-left: var(--inner-column-padding) !important; }

  &:not(:first-of-type):not(:last-of-type) {
    padding-left: var(--inner-column-padding);
    padding-right: var(--inner-column-padding);
  }
}

:global(.basic.segment).column-head {
  margin-bottom: 0;
  padding-right: 0;
  padding-left: 0;
}

.divider {
  background-color: var(--semantic-light-grey);
}

.list {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow-y: auto;
  height: 50vh;
}

:global(section.column).index {
  &:first-of-type { padding-right: var(--inner-column-padding) !important; }
  &:last-of-type { padding-left: var(--inner-column-padding) !important; }

  &:not(:first-of-type):not(:last-of-type) {
    padding-left: var(--inner-column-padding);
    padding-right: var(--inner-column-padding);
  }

  .column-head {
    margin-bottom: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .divider {
    background-color: var(--semantic-light-grey);
  }

  .list {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow-y: auto;
    height: 50vh;
  }
}

Refactor category column css module to leverage nesting


/*patch the drawer hambuger to vertically-align to centre*/
.mdl-layout__drawer-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*seems like to good idea not to have them show while CodeMirror is loading*/
textarea {
  border: none;
  background-color: transparent;
  resize: none;
}

.fhir-input {
  /*width: 50%;*/
  height: calc(100% - 195px);
  box-sizing: border-box;
  /*display: inline-block;*/
}

.fhir-input .CodeMirror {
  height: 100%;
}

#privacy-and-terms-dialog {
    width: 50%;
    overflow-y: scroll;
    max-height: calc(100vh - 50px);

}
#policy-footnote {
  padding-top: 10px;
  font-size: smaller;
}

/*patch the drawer hambuger to vertically-align to centre*/
.mdl-layout__drawer-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*seems like to good idea not to have them show while CodeMirror is loading*/
textarea {
  border: none;
  background-color: transparent;
  resize: none;
}

.fhir-input {
  /*width: 50%;*/
  height: calc(100% - 195px);
  box-sizing: border-box;
  /*display: inline-block;*/
}

.fhir-input .CodeMirror {
  height: 100%;
}

#privacy-and-terms-dialog {
  width: 50%;
  overflow-y: scroll;
  max-height: calc(100vh - 50px);
}
/*on smaller screens, expand the dialogs width*/
@media(max-width: 600px) {
  #privacy-and-terms-dialog {
    width: 90%;
  }
}

#policy-footnote {
  padding-top: 10px;
  font-size: smaller;
}

Expand privacy's dialogs width on smaller displays


html {
	background-color: #7F7E7F;
	color: white;
}
header {
	position: relative;
	width: 100%;
	background-color: #0A1E40;
	height: 190px;
}
header img {
	width: 150px;
	height: 180px;
	float: left;
	padding: 5px;
	display: inline-block;
}
header h1 {
	font-weight: lighter;
	font-family: 'Raleway', sans-serif;
	font-size: 700%;
	text-align: center;
	display: inline-block;
	margin: auto;
	padding-top: 20px;
	padding-bottom: 0px;
	padding-left: 120px;
}
header form {
	top: 40px;
	right: 30px;
	display: inline-block;
	position: absolute;
}
body {
	width: 100%;
}
nav {
	position: relative;
	width: 100%;
	background-color: #BFBEBE;
	border: 1px solid black;
}
main {
	font-family: 'Open Sans', sans-serif;
	font-weight: lighter;
	position: relative;
	float: left;
	display: inline-block;
	background-color: #7F7E7F;
	width: 100%;
}
.resize {
	height: 50px;
	width: 50px;
}
aside {
	display: inline-block;
	position: fixed;
	right: 0px;
	background-color: #BFBEBE;
	border: 1px solid black;
	width: 50px;
	height: 450px;
	right: 0;
}
footer {
	font-weight: lighter;
	font-family: 'Raleway', sans-serif;
	background-color: #0A1E40;
	width: 100%;
	left: 0;
	bottom: 0;
	position: fixed;
}

Update HTML code on the website and create/update a CSS sheet


/* workaround: make text red for select if contained in has-error, not in patternfly */
.has-error > .bootstrap-select > button > span {
    color: #A94442;
}

.ipv4-address {
  display: inline;
}

.ipv4-address input {
  width: 2em;
  background: none;
  border: none;
  text-align: center;
}

.network-number-field {
    width: 4em;
}

.network-ip-settings-row {
    border-bottom: 1px solid lightgray;
    padding-bottom: 10px;
}

.network-ip-settings-row:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.available-interfaces-group input[type='checkbox'] {
    margin: 4px 4px 4px -20px;
}

.available-interfaces-group > .list-group-item {
    border: none;
    padding: 0px;
}

ul.available-interfaces-group {
    margin-bottom: 0px;
}

/* Fix padding for network graph controls */

#networking-graph-toolbar {
    margin-right: 20px;
}

Fix margin for network graph controls

networkmanager: Fix margin for network graph controls

Closes #2875
Reviewed-by: Stef Walter <8a7fbf0f15d3ad982af54ef28f5c117d2494b76c@redhat.com>


.root {
  padding: 0 10px;
}

.datasetSelector {
  composes: select from 'part:@sanity/components/selects/default-style';
}

.datasetSelectorLabel {
  composes: level_2 from 'part:@sanity/components/labels/default-style';
  margin-right: 20px;
}

.executeQueryButton {
  float: right;
}

.querySplit {
  display: inline-block;
  margin: 0.25em 0 0.1em 0;
}

.inputLabelQuery {
  composes: querySplit;
  width: 70%;
}

.inputLabelParams {
  composes: querySplit;
  width: 30%;
}

.textarea {
  composes: textarea from 'part:@sanity/components/textareas/default-style';
  font-family: Consolas, monospace;
}

.queryEditor {
  composes: textarea;
  width: 70% !important;
}

.paramsEditor {
  composes: textarea;
  width: 30% !important;
}

.paramsEditorInvalid {
  composes: paramsEditor;
  background: red;
}

.controls {
  margin: 10px 0;
}

.controls:after {
  content: ' ';
  display: block;
  clear: both;
}

.queryTiming {
  margin: -10px 0 0 0;
  padding: 0 5px;
  font-size: 0.8em;
}

.root {
  padding: 0 10px;
}

.datasetSelector {
  composes: select from 'part:@sanity/components/selects/default-style';
}

.datasetSelectorLabel {
  composes: level_2 from 'part:@sanity/components/labels/default-style';
  margin-right: 20px;
}

.executeQueryButton {
  float: right;
}

.querySplit {
  display: inline-block;
  margin: 0.25em 0 0.1em 0;
}

.inputLabelQuery {
  composes: querySplit;
  width: 70%;
}

.inputLabelParams {
  composes: querySplit;
  width: 30%;
}

.textarea {
  composes: textarea from 'part:@sanity/components/textareas/default-style';
  font-family: Consolas, monospace;
}

.queryEditor {
  composes: textarea;
  width: 70% !important;
}

.paramsEditor {
  composes: textarea;
  width: 30% !important;
}

.paramsEditorInvalid {
  composes: paramsEditor;
  background: red;
}

.controls {
  margin: 10px 0;
}

.controls:after {
  content: ' ';
  display: block;
  clear: both;
}

.queryTiming {
  margin: 0 0 10px 0;
  padding: 0 5px;
  font-size: 0.8em;
}

Fix timing info styling for Sanity

Fix timing info styling for Sanity


#thumbs2 {
	width: 518px;
	height: 85px;
	overflow: hidden;
}

#thumbs3 {
	width: 518px;
	height: 300px;
	overflow: hidden;
}

#scroller {
	width: 1250px;
	overflow: hidden;
}

.content {
	width: 115px;
	height: 69px;
	float: left;
	margin-right: 11px;
	font-size: 0.8em;
}

.scrollNav, .scrollNav a:link, .scrollNav a:visited  {
  font-size: .8em;
  color:#00009C;
  font-weight: bold;
}

[if IE]>
<style type="text/css">

#scroller{
  width: 1482px; /* = width + margin left + margin right from the content rule + border*2 from the container rule*/
}

</style>
<! [endif]

#thumbs2 {
	width: 518px;
	height: 85px;
	overflow: hidden;
}

#thumbs3 {
	width: 518px;
	height: 300px;
	overflow: hidden;
}

#scroller {
	width: 1250px;
}

.content {
	width: 115px;
	height: 69px;
	float: left;
	margin-right: 11px;
	font-size: 0.8em;
}

.scrollNav, .scrollNav a:link, .scrollNav a:visited  {
  font-size: .8em;
  color:#00009C;
  font-weight: bold;
}

[if IE]>
<style type="text/css">

#scroller{
  width: 1482px; /* = width + margin left + margin right from the content rule + border*2 from the container rule*/
}

</style>
<! [endif]

Revert "hid overflow of scroller"

Revert "hid overflow of scroller"

This reverts commit 16e83d5ca1042bdaa01479bfa5f0cf430f55ca31.


html, body {
	height: 100%;
	min-width: 500px;
}

.nojs .js-warning {
	display: block;
}

.js-warning {
	display: none;
}

.container {
	min-height: 100%;
	position: relative;
}

.nojs .container {
	display: none !important;
}

.bingo-row span {
	border: 1px solid black;
	box-sizing: border-box;
	font-size: 32px;
	position: relative;
	overflow: hidden;
}

.bingo-row span.active {
	background-color: #ffcccc;
}

.bingo-row span p {
	position: absolute;
	left: 50%;
	top: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

html, body {
	height: 100%;
	min-width: 500px;
}

.nojs .js-warning {
	display: block;
}

.js-warning {
	display: none;
}

.container {
	min-height: 100%;
	position: relative;
}

.nojs .container {
	display: none !important;
}

.bingo-row span {
	border: 1px solid black;
	box-sizing: border-box;
	font-size: 16px;
	position: relative;
	overflow: hidden;
}

.bingo-row span.active {
	background-color: #ffcccc;
}

.bingo-row span p {
	position: absolute;
	left: 50%;
	top: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

Change font size so texts will fit the boxes


.AuthorshipMarkers {
  float: left;
  width: 1cm;
  height: calc(100% - 5em);
  overflow-y: hidden;
}

.AuthorshipMarkers__Section {
  height: 100%;
  width: 4px;
  float: right;
  position: relative;
}

.AuthorshipMarkers__Marker {
  position: absolute;
  right: 0;
  border-left: transparent 2px solid;
}

.Presence__User {
  position: relative;
  border-left: 4px solid transparent;
}
.Presence__User input[type=color] {
  width:1cm;
  position:absolute;
  right: 0;
  top: .05cm;
}

.AuthorshipMarkers {
  float: left;
  width: 1cm;
  height: calc(100% - 5em);
  overflow-y: hidden;
  padding-right: 2px;
}

.AuthorshipMarkers__Section {
  height: 100%;
  width: 4px;
  float: right;
  position: relative;
}

.AuthorshipMarkers__Marker {
  position: absolute;
  right: 0;
  border-left: transparent 2px solid;
}

.Presence__User {
  position: relative;
  border-left: 4px solid transparent;
}
.Presence__User input[type=color] {
  width:1cm;
  position:absolute;
  right: 0;
  top: .05cm;
}

Styling: Add a padding to make room for chrome's contenteditable border


svg.timeslider {
  opacity: .8;
  border: 1px solid black;
  height: 4em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.39);
  font: 400 12px Arial;
}

.timeslider {
   cursor: ew-resize;
}

svg.timeslider {
  opacity: .8;
  border: 1px solid black;
  height: 6em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.39);
  font: 400 12px Arial;
}

.timeslider {
   cursor: ew-resize;
}

Make timeslider a little higher for better histogram view.


html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  font-family: Roboto,"Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: 'Roboto', sans-serif;
  height: 100%;
  background-color: #fafafa;
  margin: 0;
}

header {
  background-color: #596362;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
  height: 54px;
  border-bottom:2px solid #3ab7a5;
  position: fixed;
  width: 100%;
  z-index: 999;
}

:global #root, :global #root > * {
  height: 100%;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  font-family: Roboto,"Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: 'Roboto', sans-serif;
  height: 100%;
  background-color: #f2f5f4;
  color:#7c8382;
  margin: 0;
}

header {
  background-color: #596362;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.22);
  height: 54px;
  border-bottom:2px solid #3ab7a5;
  position: fixed;
  width: 100%;
  z-index: 999;
}

:global #root, :global #root > * {
  height: 100%;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

Set main bg and foreground colours

Set main bg and foreground colours


.liquid-destination.has-wormholes {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
}

.modal-dialog {
  z-index: 2002;
  right: 0;
  margin: 0 auto !important;
  padding: 10px !important;
}

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 0 auto !important;
    padding: 30px !important;
  }
}

.modal-backdrop {
  z-index: 2001;
  opacity: 0.8;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.modal-backdrop.clickable {
  cursor: pointer;
}

.liquid-destination.has-wormholes {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
}

.bootstrap-modal {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 2000;
  overflow-y: auto;
}

.modal-dialog {
  position: relative;
  z-index: 2002;
  right: 0;
  margin: 0 auto !important;
  padding: 10px !important;
}

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 0 auto !important;
    padding: 30px !important;
  }
}

.modal-backdrop {
  z-index: 2001;
  opacity: 0.8;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.modal-backdrop.clickable {
  cursor: pointer;
}

Fix modal not showing in IE

Fix modal not showing in IE


html {
  background-color: #2A2744;
  color: white;
}

#root, #root > div {
    height: 100%;
}

.navbar, .toolbar, .subnavbar {
    background: #473E6B;
    color: #ffffff;
}

.page {
    background: #2C2844;
    color: #ffffff;
}

html {
  background-color: #2A2744;
  color: white;
}

#root, #root > div {
    height: 100%;
}

.statusbar-overlay, .navbar, .toolbar, .subnavbar {
    background: #473E6B;
    color: #ffffff;
}

.page {
    background: #2C2844;
    color: #ffffff;
}

Add the status bar overlay background

Add the status bar overlay background


.selected-canvas-element {
  /* TODO: Add a proper selected canvas element effect. */
}

.selected-canvas-element {
  box-shadow: 0 0 16px black;
  background: rgba(255, 255, 255, 0.5);
}

Revert "Revert "Revert "Revert "Revert "Remove selected canvas element effect CSS."""""

This reverts commit e68ab4a9457c2931371693cd63141ce82e233b34.


:host {
    display: block;
}

table {
    min-width: 600px;
    margin-bottom: 0px;
}

.mylabel {
    margin: 2px;
    display: inline-block !important;
    cursor: pointer;
    font-size: 14px !important;
    white-space: inherit;
}

th > button {
    border: none;
    padding: 0;
    outline: none;
    background-color: inherit;
}

table tr {
    white-space: normal;
}

table {
    width: auto;
}

.anchored::before {
    content: '';
    display: block;
    height:48px;
    margin:-48px 0 0;
}

Set table anchores 48px higher

Set table anchores 48px higher

Clicking on an anchor in the table resulted in an element hidden beneath the table header.
This is now resolved.
The anchor jumps 48px higher than the anchor.

solves #75

Signed-off-by: Armin Hueneburg <ce14971603cce67272d611a4f194786e96eb4828@gmail.com>


.cover {
  composes: contentContainer from 'app/styles/utilities.css';
  max-height: 300px;
  padding: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  overflow: hidden;
  position: relative;

  img {
    object-fit: cover;
  }
}

.content {
  composes: contentContainer from 'app/styles/utilities.css';
  width: 100%;
  padding-top: 20px;
}

.contentWithBanner {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.cover {
  composes: contentContainer from 'app/styles/utilities.css';
  max-height: 400px;
  padding: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  overflow: hidden;
  position: relative;

  img {
    object-fit: cover;
    display: block;
  }
}

.content {
  composes: contentContainer from 'app/styles/utilities.css';
  width: 100%;
  padding-top: 20px;
}

.contentWithBanner {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

Fix content cover image height

Fix content cover image height


.ProseMirror {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
}

.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px; top: -2px; bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

.ProseMirror {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
}

.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px; top: -2px; bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

Hide the caret when a hidden selection is active

FIX: Fix issue where the cursor was visible when a node was selected
on recent Chrome versions.


#ember-testing-container {
  position: absolute;
  background: white;
  bottom: 0;
  right: 0;
  width: 640px;
  height: 384px;
  overflow: auto;
  z-index: 9999;
  border: 1px solid #ccc;
}
#ember-testing {
  zoom: 50%;
}

#ember-testing-container {
  position: fixed;
  background: white;
  bottom: 0;
  right: 0;
  width: 640px;
  height: 384px;
  overflow: auto;
  z-index: 9999;
  border: 1px solid #ccc;
}
#ember-testing {
  zoom: 50%;
}

Fix position of Ember testing root element.

The CSS provided by mocha differs from qunit's so absolute
positioning doesn't work.


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require foundation_and_overrides
 *= require global
 *= require checkbox
 *= require slider

 */

*{
  box-sizing: inherit;
  font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
}

.party-theme{
	/*background: -webkit-canvas(squares);*/
	background-color: red;
}

body {
  background: #F7F7F7;
}

.header-holder {
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  background-color: #fff;
}

h1 small {
  color: #6D6D6D;
  font-weight: 200;
  font-size: 70%;
}

h1 {
  padding: 10px;
  font-size: 3rem;
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require foundation_and_overrides
 *= require global
 *= require checkbox
 *= require slider

 */

*{
  box-sizing: inherit;
  font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
}

.party-theme{
	/*background: -webkit-canvas(squares);*/
	background-color: red;
}

body {
  background: #F7F7F7;
}

.header-holder {
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  background-color: #fff;
}

h1 small {
  color: #6D6D6D;
  font-weight: 200;
}

h1 {
  padding: 10px;
  font-size: 3rem;
}

Increase font size in header

Increase font size in header


body {
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', helvetica, arial, Verdana, sans-serif;
}

input.extensionActionButton {
  color: white;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  border: 1px solid white;
  line-height: 1.5;
  display: block;
  text-transform: uppercase;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: black 0 0 3px;
  box-shadow: black 0 0 3px;
  -moz-box-shadow: 0px 0px 3px black;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', helvetica, arial, Verdana, sans-serif;
}

input.extensionActionButton:hover {
  -webkit-box-shadow: black 0 0 6px;
  box-shadow: black 0 0 6px;
  -moz-box-shadow: 0px 0px 6px black;
}

input.extensionDownloadButton, input.extensionInstallButton {
  background-color: #2277aa;
}

input.extensionDownloadButton:hover, input.extensionInstallButton:hover {
  background-color: #00aaaa;
}

input.extensionUninstallButton {
  background-color: #007f09;
}

input.extensionUninstallButton:hover {
  background-color: #6eb04b;
}

body {
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', helvetica, arial, Verdana, sans-serif;
}

input.extensionActionButton {
  color: white;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  border: 1px solid #aaaaaa;
  line-height: 1.5;
  display: block;
  text-transform: uppercase;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', helvetica, arial, Verdana, sans-serif;
}

input.extensionDownloadButton, input.extensionInstallButton {
  background-color: #2277aa;
}

input.extensionDownloadButton:hover, input.extensionInstallButton:hover {
  background-color: #00aaaa;
}

input.extensionUninstallButton {
  background-color: #007f09;
}

input.extensionUninstallButton:hover {
  background-color: #6eb04b;
}

Make button css compatible with Qt4.7's webkit


@import '@teamleader/ui-colors';
@import '@teamleader/ui-typography';

.header-row-overlay {
  background: var(--color-neutral-light);
  position: absolute;
  right: 0;
  height: 48px;
  z-index: 3;

  &.data-grid-checkbox-size-small {
    left: 60px;
  }

  &.data-grid-checkbox-size-medium {
    left: 63px;
  }

  &.data-grid-checkbox-size-large {
    left: 66px;
  }
}

@import '@teamleader/ui-colors';
@import '@teamleader/ui-typography';

.header-row-overlay {
  background: var(--color-neutral-light);
  position: absolute;
  right: 0;
  height: 48px;
  z-index: 3;
  border-top-right-radius: 4px;

  &.data-grid-checkbox-size-small {
    left: 60px;
  }

  &.data-grid-checkbox-size-medium {
    left: 63px;
  }

  &.data-grid-checkbox-size-large {
    left: 66px;
  }
}

Add a border top right radius to HeaderRowOverlay


.page-content {
  padding: 1rem;
  background-color: #eeeeee;
}

.page-content > .mdl-card {
  width: 100%;
}

.page-content > :not(:first-child) {
  margin-top: 1rem;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  align-items: start;
  padding-top: 10px;
}

.icon-group {
  display: flex;
  justify-content: flex-end;
}

.grains-table {
  width: 100%;
  border: none;
}

.grains-table tr:last-child:hover {
  background-color: inherit;
}

.grains-table tr:last-child td {
  border: none;
  font-weight: 700;
}

.wd-100 {
  width: 100%;
}

.wd-auto {
  width: auto;
}

.text-right {
  text-align: right !important;
}

.mdl-button:hover{
	/*background-color: transparent;*/
	color: rgb(83,109,254);
}

.page-content {
  padding: 1rem;
  background-color: #eeeeee;
}

@media (min-width: 768px) {
  .mdl-layout__drawer-button {
    display: none;
  }
}

@media (max-width: 767px) {
  .mdl-layout-spacer {
    display: none;
  }

  .mdl-layout__header-row {
    justify-content: space-around;
  }

  .mdl-layout__header-row > .mdl-navigation {
    display: none;
  }
}

.page-content > .mdl-card {
  width: 100%;
}

.page-content > :not(:first-child) {
  margin-top: 1rem;
}

.button-group {
  display: flex;
  justify-content: flex-end;
  align-items: start;
  padding-top: 10px;
}

.icon-group {
  display: flex;
  justify-content: flex-end;
}

.grains-table {
  width: 100%;
  border: none;
}

.grains-table tr:last-child:hover {
  background-color: inherit;
}

.grains-table tr:last-child td {
  border: none;
  font-weight: 700;
}

.wd-100 {
  width: 100%;
}

.wd-auto {
  width: auto;
}

.text-right {
  text-align: right !important;
}

.mdl-button:hover{
	/*background-color: transparent;*/
	color: rgb(83,109,254);
}

Add responsive behavior to app bar

Add responsive behavior to app bar


div.biotea_annot_tooltip {
    z-index: 50000;
    position: absolute;
    text-align: left;
    min-width: 100px;
    padding: 3px;
    border: 0px;
    border-radius: 2px;
    pointer-events: none;
    background: white;
}
.biotea_annot_tooltip_table, div.biotea_annot_tooltip table {
    border: 1px solid grey;
    font-weight: lighter;
    font-size: .8em;
    font-family: Calibri, sans-serif;
    border-collapse: initial;
}

.biotea_annot_tooltip_header, div.biotea_annot_tooltip th {
    background: grey;
    color: white;
    padding: 3px;
}

.biotea_annot_tooltip_body, div.biotea_annot_tooltip td {
    background: lightgrey;
    color: black;
    padding: 3px;
}

.biotea_annot_show_tooltip {
    cursor: help;
}

div.biotea_annot_tooltip {
    z-index: 50000;
    position: absolute;
    text-align: left;
    min-width: 100px;
    max-width: 350px;
    padding: 3px;
    border: 0px;
    border-radius: 2px;
    pointer-events: none;
}
.biotea_annot_tooltip_table, div.biotea_annot_tooltip table {
    border: 1px solid grey;
    font-weight: lighter;
    font-size: .8em;
    font-family: Calibri, sans-serif;
    border-collapse: initial;
    background: white;
}

.biotea_annot_tooltip_header, div.biotea_annot_tooltip th {
    background: grey;
    color: white;
    padding: 3px;
}

.biotea_annot_tooltip_body, div.biotea_annot_tooltip td {
    background: lightgrey;
    color: black;
    padding: 3px;
}

.biotea_annot_show_tooltip {
    cursor: help;
}

Move tooltip background to table.

Move tooltip background to table.


@CHARSET "UTF-8";

#imgupload {
	position: relative;
	top: -21px;
	float: right;
	right: 5px;
	overflow: hidden;
	background-color: #036;
	color: #fff;
	margin: -5px;
	padding: 4px;
}

#imghover {
	position: absolute;
	top: 0px;
	right: 0px;
	margin: 0px;
	padding: 0px;
	cursor: pointer;
	font-size: 118px;
}

#custompic {
	position: absolute;
	float:	right;
	top:	3px;
	right: 3px;
}

@CHARSET "UTF-8";

#imgupload {
	position: relative;
	top: -21px;
	float: right;
	right: 5px;
	overflow: hidden;
	background-color: #036;
	color: #fff;
	margin: -5px;
	padding: 4px;
}

#imghover {
	position: absolute;
	top: 0px;
	right: 0px;
	margin: 0px;
	padding: 0px;
	cursor: pointer;
	font-size: 118px;
	opacity: 0.1;
	filter:alpha(opacity=10);
}

#custompic {
	position: absolute;
	float:	right;
	top:	3px;
	right: 3px;
}

Fix for the 'upload' group picture button not displayin right in ff an ie


#elements {
	overflow: hidden;
}

div.element {
	width: 100px;
	height: 50px;
	border: 1px solid black;
	background-color: #f9f9f9;
	float: left;
	margin: 5px;
}

div.otherElement {
	height: 20px;
}

pre {
	padding: 5px 7px;
	margin: 5px 0;
	background: #f5f5f5;
	border: 1px solid #ddd;
	color: #333;
	overflow: auto;
	font-size: 12px;
}

p.margin {
	margin: 5px 0;
}

Remove some unused CSS in the Native Demo


body {
  background-color: beige;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

body {
  background-color: lightblue;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

Change bg color to lightblue

Change bg color to lightblue


Fix alignment of action icons in Forwarded Ports view


@font-face {
  font-family: 'Droid-Sans';
  src: url('/fonts/droid-sans.ttf');
}

body { font-family: 'Droid-Sans'; }

a {
  color: #777;
  text-decoration:none;
}

a:hover { color: #333; }

@font-face {
  font-family: 'Droid-Sans';
  src: url('/fonts/droid-sans.ttf');
}

h1 { font-size: 2rem }
h2 { font-size: 1.5rem }
h3 { font-size: 1.25rem }
h4 { font-size: 1rem }
h5 { font-size: .875rem }
h6 { font-size: .75rem }

body { font-family: 'Droid-Sans'; }

a {
  color: #777;
  text-decoration:none;
}

a:hover { color: #333; }

Add css file for thematic css

Add css file for thematic css


.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1200px) {
  #map-container {
    min-width: 1000px;
  }
}

.plot-widget {
  min-width: 500px;
}

.plot-widget .x_panel {
  height: 100%;
  min-height: 500px;
}

#map-container .x_panel{
  padding: 15px;
}

#map-container .x_panel .x_content{
  height: 100%;
}

#map-div {
  height: 100%;
}

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
  padding: 0px 5px;
}

@media (min-width: 1200px) {
  #map-container {
    min-width: 1000px;
  }
}

.plot-widget {
  min-width: 500px;
}

.plot-widget .x_panel {
  height: 100%;
  min-height: 500px;
}

#map-container .x_panel{
  padding: 15px;
}

#map-container .x_panel .x_content{
  height: 100%;
}

#map-div {
  height: 100%;
}

Change padding between plot widgets in map layout


.scrubber {
    margin-top: 10px;
    width: 200px;
    height: 40px;
    position: relative;
}

.scrubber .track {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 6px;
    background: #DDD;
    border-radius: 3px;
    margin-top: -3px;
}

.scrubber .thumb {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    margin-top: -11px;
    cursor: pointer;
    opacity: 0.7;
    border: 8px solid #BECFE4;
    border-radius: 100%;
    background: #4F81BD;
    transition: border-width 0.2s ease 0s;
}

.scrubber .thumb:hover {
  border-width: 0px;
  opacity: 1;
}

.thumb.dragging {
  border-width: 0px;
  opacity: 1;
}

Add .dragging class for full opacity on drag


.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
  padding: unset;
  flex-grow: 1;
}

.plot-widget {
  min-width: 500px;
}
.ant-card-body a{
  color: #1890ff;
}

Make links for missing input files more obvious


.skift-ui-container {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 300px;
  height: 300px;
  padding: 10px;
  color: #292929;
  z-index: 999;
  background-color: #FFFFFF;
  border: 1px solid #f2800d;
  box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.2);
  transition: all .5s ease-out;
  opacity: 1;
}
.skift-ui-container.hideme {
  bottom: -350px;
  opacity: 0;
}
.skift-ui-container .skift-header {
  position: relative;
  top: 0;
  left: 0;
  padding: 10px;
  margin: -10px;
  margin-bottom: 10px;
  background-color: #292929;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  width: 298px;
}
.skift-ui-container .skift-data-label {
  display: inline-block;
  margin-bottom: 2px;
  margin-right: 5px;
  color: #292929;
}
.skift-ui-container .skift-data-label:after {
  content: ":";
}
.skift-ui-container .skift-data-value {
  color: #000;
  font-weight: bold;
  text-transform: capitalize;
}
.skift-ui-container .skift-variant {
  text-transform: uppercase;
  color: #66ff33;
}
.skift-ui-container .skift-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #f2800d;
  color: #000;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
}
.skift-ui-container .delete-skift-cookie {
  display: block;
  margin: 10px auto;
  padding: 5px 10px;
  background-color: #f2800d;
  font-size: 18px;
  color: #FFFFFF;
  border: 0;
}

Add the styling for the UI

Add the styling for the UI


html, body, #map-canvas {
  height: 92%;
  margin: 0px;
  padding: 0px;
}

#directions-panel {
  height: 92%;
  float: right;
  width: 390px;
}

#map-canvas {
  margin-right: 400px;
}

#control {
  background: #fff;
  padding: 5px;
  font-size: 14px;
  font-family: Arial;
  border: 1px solid #ccc;
  box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
}

.route {
  display: inline-block;
  float: left;
  margin-left: 20px;
}

#submit-route {
  display: block;
  clear: both;
  margin: 10px auto;
}

#logo {
  float: right;
  margin-right: 30px;
}

html, body, #map-canvas {
  height: 92%;
  margin: 0px;
  padding: 0px;
}

#directions-panel {
  height: 92%;
  float: right;
  width: 390px;
}

#map-canvas {
  margin-right: 400px;
}

#control {
  background: #fff;
  padding: 5px;
  font-size: 14px;
  font-family: 'Architects Daughter';
  border: 1px solid #ccc;
  box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
}

.route {
  display: inline-block;
  float: left;
  margin-left: 20px;
}

#submit-route {
  display: block;
  clear: both;
  margin: 10px auto;
}

#logo {
  float: right;
  margin-right: 30px;
  font-size: 1.4em;
}

#instructions {
  font-family: 'Architects Daughter';
  font-weight: 200;
  margin: 20px;
}

Change font and font sizes to be easier to read


/* textVideo.html */

	#textHolder {
		padding-bottom:	20px;
	}

	#transcriptHolder {
		margin-top:	10px;
		text-align:	right;
	}

	#transcript {
		text-align:		left;
	}

	#pageVideo.iframe {
		position: relative;
		overflow: hidden;
	}

	#pageVideo.iframe iframe {
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
	}

/* textVideo.html */

	#textHolder {
		padding-bottom:	20px;
	}

	#transcriptHolder {
		margin-top:	10px;
		text-align:	right;
	}

	#transcript {
		text-align:		left;
		min-width:100%;
	}

	#pageVideo.iframe {
		position: relative;
		overflow: hidden;
	}

	#pageVideo.iframe iframe {
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
	}

Fix issue whereby if an iframe has been used as the source in the video page, rather than a directly uploaded video, then the transcript was being displayed in a narrow left column and not filling the width of it's container. From my tests setting min-width:100%; resolves that issue.


body {
  background-color: #336;
  position: relative;
  text-align: center;
}
canvas {
  background-color: rgba(0, 0, 0, 0);
  border: 4px solid #FF4;
  border-radius: 12px;
  left: 40vw;
  margin: 3em;
  padding: 8px 0;
  position: absolute;
}
input {
  max-width: 80%;
}

#board {
  background-color: #000;
  z-index: 0;
}
#pellets {
  z-index: 1;
}
#pac {
  z-index: 2;
}
#blinky {
  z-index: 3;
}
#inky {
  z-index: 4;
}
#pinky {
  z-index: 5;
}
#clyde {
  z-index: 6;
}

#debug {
  background-color: #000;
  color: #FFF;
  display: none;
  font-family: monospace;
  left: 0px;
  min-height: 180px;
  padding: 1em;
  position: absolute;
  text-align: left;
  top: 0px;
  width: 180px;
}

body {
  background-color: #336;
  position: relative;
  text-align: center;
}
canvas {
  background-color: rgba(0, 0, 0, 0);
  border: 4px solid #FF4;
  border-radius: 12px;
  left: 40vw;
  margin: 3em;
  padding: 8px 0;
  position: absolute;
}
input {
  max-width: 80%;
}

#board {
  background-color: #000;
  z-index: 0;
}
#pellets {
  z-index: 1;
}
#blinky {
  z-index: 2;
}
#inky {
  z-index: 3;
}
#pinky {
  z-index: 4;
}
#clyde {
  z-index: 5;
}
#pac {
  z-index: 6;
}

#debug {
  background-color: #000;
  color: #FFF;
  display: none;
  font-family: monospace;
  left: 0px;
  min-height: 180px;
  padding: 1em;
  position: absolute;
  text-align: left;
  top: 0px;
  width: 180px;
}

Move Pac's canvas to highest z index

Move Pac's canvas to highest z index


.iconImage {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.75));
  border-radius: 22%;
  width: 96px;
  height: 96px;
}

@media (min-width: 320px) {
  .iconImage {
    width: 128px;
    height: 128px;
  }
}

.iconImage {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.3));
  border-radius: 22%;
  width: 96px;
  height: 96px;
}

@media (prefers-color-scheme: light) {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.75));
}

@media (min-width: 320px) {
  .iconImage {
    width: 128px;
    height: 128px;
  }
}

Improve app icon drop shadow on dark theme


/* The Modal (background) */
.gentle-alerts-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.gentle-alerts-modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

.gentle-alerts-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.gentle-alerts-modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

Remove superfluous comments from css

Remove superfluous comments from css


.wrapper{
	width: 80%;
	border: 1px solid black;
	margin: 0 auto 0 auto;
}

.heading{
	height: 100px;
	background: -webkit-linear-gradient(rgba(39,9,236,0.66) 0%, #ffffff 100%);
	padding: 20px;
	text-align: center;
}

.content{
	min-height: 400px;
	background: #c5c5d1;
	width: 75%;
}

Add .css definition of content

Add .css definition of content


.normalSize, .normalSize td, .normalSize pre {
   line-height: 1.45;
}

@external windows, macintosh, linux;

.macintosh .normalSize, .macintosh .normalSize td, .macintosh .normalSize pre {
   line-height: 1.45;
}

.normalSize, .normalSize td, .normalSize pre {
   line-height: 1.3;
}

Decrease line height for windows and linux


/* Copyright 2015 Mozilla Foundation
 *
 * Licensed 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.
 */

/* Used in 'text' tests */

.textLayer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.textLayer > span {
  position: absolute;
  white-space: pre;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  border: solid 1px rgba(255, 0, 0, 0.5);
  background-color: rgba(255, 255, 32, 0.1);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Copyright 2015 Mozilla Foundation
 *
 * Licensed 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.
 */

/* Used in 'text' tests */

.textLayer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  line-height: 1;
}
.textLayer > span {
  position: absolute;
  white-space: pre;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  border: solid 1px rgba(255, 0, 0, 0.5);
  background-color: rgba(255, 255, 32, 0.1);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Fix text layer regression tests in using the correct line-height property


.moon-button-sample-wrapper .moon-button-caption-decorator,
.moon-button-sample-group .moon-button,
.moon-button-sample-wrapper > .moon-button {
	margin: 20px;
}

.moon-button-sample .moon-item.tap-area-toggle-container {
	width: 320px;
	margin: 20px 0px 0px 20px;
}

.moon-button-sample.visible-tap-area .moon-button:after {
	background: rgba(0, 100, 200, 0.2);
	border: 1px solid rgba(0, 100, 200, 0.4);
}

.moon-button-sample .image-background {
	background: url(http://lorempixel.com/output/nature-q-c-640-480-10.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	padding: 20px;
}

.moon-button-sample-wrapper .moon-button-caption-decorator,
.moon-button-sample-group .moon-button,
.moon-button-sample-wrapper > .moon-button {
	margin: 20px;
}

.moon-button-sample .moon-item.tap-area-toggle-container {
	width: 320px;
	margin: 20px 0px 0px 20px;
}

.moon-button-sample.visible-tap-area .moon-button:before{
	background: rgba(0, 100, 200, 0.2);
	border: 1px solid rgba(0, 100, 200, 0.4);
}

.moon-button-sample .image-background {
	background: url(http://lorempixel.com/output/nature-q-c-640-480-10.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	padding: 20px;
}

ENYO-2550: Make show tap area button works on button sample

Change :after to :before.

Enyo-DCO-1.1-Signed-off-by: Kunmyon Choi <kunmyon.choi@lge.com>


/* ===================================
CSS overrides for Gaffer documentation
==================================== */

/* Match regular nav background to Gaffer brand colors */
.wy-side-nav-search {
    background-color: #343131;
}

/* Match mobile nav background to Gaffer brand colors */
.wy-nav-top {
    background-color: #b92227;
}

/* Increase nav version color visibility */
.wy-side-nav-search > div.version {
    color: inherit;
}

/* Add "Gaffer" in front of nav version (this sidesteps changing the Sphinx template) */
.wy-side-nav-search > div.version::before {
    content: "Gaffer ";
}

/* Make nav search simpler and a little duller when not focused */
.wy-side-nav-search input[type="text"] {
    border-width: 2px;
    border-color: transparent;
    background-color: lightgrey;
    background-clip:  padding-box;
    transition: all 0.3s linear;
}

/* Transition search bar to white bg with Gaffer red border on focus */
.wy-side-nav-search input[type="text"]:focus {
    border-color: #b92227;
    background-color: white;
}

/* Make nav button color red on click */
.wy-menu-vertical a:active {
    background-color:#b92227;
}

/* Increase font size for mobile header title */
.wy-nav-top a {
    font-size: 120%;
}

/* Adjust the mobile menu button (and center-align mobile header title) */
.wy-nav-top i {
    display: block;
    position: absolute;
    left: 15px;
    top: 15px;
}

/* Add icon after external links */
a[href^="http"]:after {
    content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
    color: #2980B9;
}

/* Fix fallback image text vertically alignment when inline */
img {
    vertical-align: initial;
}

/* Make nested and serial headers more distinguishable */
h2 {
    margin-top: 2em;
    padding-bottom: 0.25em;
    border-bottom: 1px solid #e1e4e5;
}

h3 {
    font-size: 100%;
}

Add custom stylesheet - Add Gaffer branding and colors to nav and search - Minor adjustments to headers and links - Adjust mobile header title and menu button


Remove CSS Reset & Style

Remove CSS Reset & Style


.LandingPageContent {
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.Hero {
    width: 40%;
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.Hero h1, h3 {
    font-weight: 400;
    text-align: left;
}

.Hero h1 {
    color: #202124;
}

.Hero h3 {
    color: #5f6368;
    font-size: 1em;
}

.LandingPageContent {
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.Hero {
    width: 40%;
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.Hero h1, h3 {
    font-weight: 400;
    text-align: left;
}

.Hero h1 {
    color: #202124;
    font-size: 3.5vw;
}

.Hero h3 {
    color: #5f6368;
    font-size: 1.1vw;
}

Change font size of hero to be slightly more dynamic


body {
    margin-top: 4em;
}
#button-header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    padding-bottom: 3px;
    padding-left: 3px;
    background-color: #aaaaaa;
    border-bottom: 1px solid #888888;
    overflow: hidden;
}

.hidden {
    display: none;
}

#message-header {
    display: none;
}

#form-data {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 4em;
    font-family: monospace;
    white-space: pre;
    border: 2px solid black;
    overflow: hidden;
    height: auto;
    background-color: #eeeeee;
}

form :invalid {
  box-shadow: 0 0 5px 1px red;
}

form :focus:invalid {
  outline: none;
}

form fieldset:invalid {
    box-shadow: none;
}

#button-header.valid {
    background-color: #a8e8a8;
}

body {
    margin-top: 4em;
}
#button-header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    padding-bottom: 3px;
    padding-left: 3px;
    background-color: #aaaaaa;
    border-bottom: 1px solid #888888;
    overflow: hidden;
}

.hidden {
    display: none;
}

#message-header {
    display: none;
}

#form-data {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 95%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    margin-top: 4em;
    font-family: monospace;
    white-space: pre;
    border: 2px solid black;
    overflow: hidden;
    height: auto;
    background-color: #eeeeee;
}

form :invalid {
    box-shadow: 0 0 5px 1px #e86060;
}

form :focus:invalid {
  outline: none;
}

form fieldset:invalid {
    box-shadow: none;
}

#button-header.valid {
    background-color: #a8e8a8;
}

Reduce saturation of invalid field highlighting

Reducing the saturation retains the desired effect of drawing the
user's eye to the remaining fields required to make the form valid
without being quite as distracting when first viewing a form with a
lot of invalid fields.


/* Thumbnails */

#changelist .thumbnail img, #ghost .thumbnail img, .FileNodeForeignKeyRawIdWidget .thumbnail img {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 3px;
    background: white;
    border-radius: 3px;
    line-height: 1px;
    -moz-box-shadow: 0px 3px 7px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0px 3px 7px rgba(0, 0, 0, .1);
    box-shadow: 0px 3px 7px rgba(0, 0, 0, .1);
}

.FileNodeForeignKeyRawIdWidget .preview {
    display: inline-block;
    margin: .5em 1em .5em 1em;
}

.FileNodeForeignKeyRawIdWidget .preview, .FileNodeForeignKeyRawIdWidget .name {
    cursor: pointer;
}

.FileNodeForeignKeyRawIdWidget .clear-widget {
    margin-left: .5em;
}

/* Thumbnails */

#changelist .thumbnail img, #ghost .thumbnail img, .change-form .thumbnail img, .FileNodeForeignKeyRawIdWidget .thumbnail img {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 3px;
    background: white;
    border-radius: 3px;
    line-height: 1px;
    -moz-box-shadow: 0px 3px 7px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0px 3px 7px rgba(0, 0, 0, .1);
    box-shadow: 0px 3px 7px rgba(0, 0, 0, .1);
}

.FileNodeForeignKeyRawIdWidget .preview {
    display: inline-block;
    margin: .5em 1em .5em 1em;
}

.FileNodeForeignKeyRawIdWidget .preview, .FileNodeForeignKeyRawIdWidget .name {
    cursor: pointer;
}

.FileNodeForeignKeyRawIdWidget .clear-widget {
    margin-left: .5em;
}

Apply thumbnail styling to change form

Apply thumbnail styling to change form


/**
 * Copyright 2020 Google LLC
 *
 * Licensed 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
 *
 *     https://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.
 */

.body-container {
  background-image: url(/assets/img/happy-land.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
}

.logo {
  background-image: url(/assets/img/logo.png);
  width: 48px;
  height: 48px;
}

.title {
  font-family: 'Open Sans', 'Helvetica neue', sans-serif;
}

.card {
  width: 400px;
  height: 400px;
}

.content {
  text-align: center;
  padding: 40px;
}

.welcome {
  font-size: 1.2em;
}

.button {
  padding: 12px 16px 12px 12px;
  margin-top: 36px;
}

/**
 * Copyright 2020 Google LLC
 *
 * Licensed 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
 *
 *     https://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.
 */

.body-container {
  background-image: url(/assets/img/happy-land.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
}

.logo {
  background-image: url(/assets/img/logo.png);
  width: 48px;
  height: 48px;
}

.title {
  font-family: 'Open Sans', 'Helvetica neue', sans-serif;
}

.card {
  width: 400px;
  height: 400px;
}

.content {
  text-align: center;
  padding: 40px;
}

.welcome {
  font-family: 'Open Sans', 'Helvetica neue', sans-serif;
  font-size: 1.4em;
  font-weight: bold;
}

.button {
  padding: 12px 16px 12px 12px;
  margin-top: 36px;
}

Update sign in page title font

Update sign in page title font


h1 {
  margin-top: 25px;
}

img[alt="logo"] {
  width: 200px;
}

code.hljs {
  padding: 0.6em;
  font-size: 0.8em;
  line-height: 1.5em;
}

Make code blocks easier to read.

Make code blocks easier to read.


/**
 * Copyright (c) 2011 Metropolitan Transportation Authority
 *
 * Licensed 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.
 */

/* Insert agency-specific branding overrides here */

#branding h1 a {
	display: block;
	text-indent: -9999px;
	background-image: url("../img/oba_puget_sound_web_header.png");
	background-repeat: no-repeat;
	width: 294px;
	height: 91px;
}

/**
 * Copyright (c) 2011 Metropolitan Transportation Authority
 *
 * Licensed 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.
 */

/* Insert agency-specific branding overrides here */

#branding h1 a {
	display: block;
	text-indent: -9999px;
	background-image: url("../img/agency_logo.png");
	background-repeat: no-repeat;
	width: 294px;
	height: 91px;
}

Add correct reference to agency_logo.png


/**
 * Numenta Web Platform and Sites source code
 * MIT License (see LICENSE.txt)
 * Copyright © 2005—2017 Numenta <http://numenta.com>
 */

.columns {
  composes: layout-columns from '../../static/assets/css/theme.css';
}

.content {
  composes: pr4-l from 'tachyons';
  composes: layout-content from '../../static/assets/css/theme.css';
  margin-top: -0.5rem;
}

.aside {
  composes: layout-aside from '../../static/assets/css/theme.css';
  margin-top: -2rem;
}

.release {
  composes: b--light-gray from 'tachyons';
  composes: bt from 'tachyons';
  composes: pb1 from 'tachyons';
  composes: pt3 from 'tachyons';
}

.link {
  composes: lh-copy from 'tachyons';
}

/**
 * Numenta Web Platform and Sites source code
 * MIT License (see LICENSE.txt)
 * Copyright © 2005—2017 Numenta <http://numenta.com>
 */

.columns {
  composes: layout-columns from '../../static/assets/css/theme.css';
}

.content {
  composes: pr4-l from 'tachyons';
  composes: layout-content from '../../static/assets/css/theme.css';
  margin-top: -0.5rem;
}

.aside {
  composes: layout-aside from '../../static/assets/css/theme.css';
}
@media screen and (min-width: 768px) {
  .aside {
    margin-top: -2rem;
  }
}

.release {
  composes: b--light-gray from 'tachyons';
  composes: bt from 'tachyons';
  composes: pb1 from 'tachyons';
  composes: pt3 from 'tachyons';
}

.link {
  composes: lh-copy from 'tachyons';
}

Fix 'press links' on mobile

Fix 'press links' on mobile


.github-corner svg {
    z-index: 1000;
}

.vertical-timeline-element--work .vertical-timeline-element-content {
    border-top: 3px solid #2196f3;
}

.vertical-timeline-element--education .vertical-timeline-element-content {
    border-top: 3px solid #e91e63;
}

.github-corner svg {
    z-index: 1000;
}

.vertical-timeline-element-content {
    color: black;
}

.vertical-timeline-element--work .vertical-timeline-element-content {
    border-top: 3px solid #2196f3;
}

.vertical-timeline-element--education .vertical-timeline-element-content {
    border-top: 3px solid #e91e63;
}

Fix default color for demo

Fix default color for demo


.component {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
}

.visible {
  display: flex;
}

.backdrop {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
}

.dialog {
  min-width: 25rem;
  max-width: 80%;
  position: absolute;
  box-shadow: 0 0 0.5rem 0.25rem rgba(0, 0, 0, 0.15);
  border: none;
}

.close {
  font-size: 2rem;
  composes: icon close from 'css/flaticon.css';
}

.close:hover {
  color: #484d79;
}

.component {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
}

.visible {
  display: flex;
}

.backdrop {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
}

.dialog {
  min-width: 25rem;
  max-width: 80%;
  position: absolute;
  box-shadow: 0 0 0.5rem 0.25rem rgba(0, 0, 0, 0.15);
  border: none;
}

.close {
  font-size: 2rem;
  composes: icon close from 'css/flaticon.css';
  padding-left: 1rem;
}

.close:hover {
  color: #484d79;
}

Add 1rem padding from close symbol, so text can't be very close to it.


/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

.jp-InputAreaWidget .CodeMirror {
  height: auto;
  background-color: #f7f7f7;
  border: 1px solid #cfcfcf;
}

Add css to style the codemirror widget

Add css to style the codemirror widget


Add styling to H1 and H2

Add styling to H1 and H2


.anchor {
    text-decoration: none;
    font-size: large;
    padding: 0.25em 0 0 0.25em;
    opacity: 0.20;
}

.anchor:hover {
    opacity: 1;
}

table {
    border-collapse: collapse;
}

table > thead > tr:last-child > th {
    vertical-align: bottom;
}

table > tbody > tr > th {
    position: relative;
}

table > tbody > tr > th > .anchor {
    position: absolute;
    top: 0;
    left: 0;
}

th {
    text-align: left;
    padding-left: 0.5em;
}

td, th {
    border: solid thin lightgray;
    padding: 1em 0.5em;
}

table tr > th:first-child {
    text-align: right;
}

li {
    margin-top: 1em;
}

li li {
    margin-top: 0.25em;
}

.anchor {
    text-decoration: none;
    font-size: large;
    padding: 0.25em 0 0 0.25em;
    opacity: 0.20;
}

.anchor:hover {
    opacity: 1;
}

table {
    border-collapse: collapse;
}

table > thead > tr:last-child > th {
    vertical-align: bottom;
}

table > tbody > tr > th {
    position: relative;
}

table > tbody > tr > th > .anchor {
    position: absolute;
    top: 0;
    left: 0;
}

th {
    text-align: left;
    padding-left: 0.5em;
    background-color: #E0E0E0;
}

td {
    background-color: #ECECEC;
}

td, th {
    border: solid thin lightgray;
    padding: 1em 0.5em;
}

table tr > th:first-child {
    text-align: right;
}

li {
    margin-top: 1em;
}

li li {
    margin-top: 0.25em;
}

Add some background color for tables.

Add some background color for tables.


/* Start remove giant gap on bottom of pages*/
body {
  padding-bottom: 0;
}
.navbar {
  margin-bottom: 0;
}
/*End remove giant gap on bottom of pages*/

/*Make links a little darker in color*/
a {
  color: #159d82;
}

/*Remove rounded borders on bottom navbar*/
.navbar {
  border-radius: 0;
}

/* Start remove giant gap on bottom of pages*/
body {
  padding-bottom: 0;
}
.navbar {
  margin-bottom: 0;
}
/*End remove giant gap on bottom of pages*/

/*Make links in admonitions visible*/
.admonition a {
  color: #ffffff !important;
  text-decoration: underline;
}

/*Make links a little darker in color*/
a {
  color: #159d82;
}

/*Remove rounded borders on bottom navbar*/
.navbar {
  border-radius: 0;
}

Make links in admonitions visible

CSS: Make links in admonitions visible


/* app css stylesheet */

.menu {
  list-style: none;
  border-bottom: 0.1em solid black;
  margin-bottom: 2em;
  padding: 0 0 0.5em;
}

.menu:before {
  content: "[";
}

.menu:after {
  content: "]";
}

.menu > li {
  display: inline;
}

.menu > li:before {
  content: "|";
  padding-right: 0.3em;
}

.menu > li:nth-child(1):before {
  content: "";
  padding: 0;
}

#wrap {
width:1000px;
margin:0 auto;
padding-top:50px;
}
#main {
float:right;
width:800px;
min-height:300px;
}
#sidebar {
float:left;
width:200px;
}

#footer {
 clear: both;
 position: relative;
 padding:3em;
 text-align:center;
}

/* app css stylesheet */

.menu {
  list-style: none;
  border-bottom: 0.1em solid black;
  margin-bottom: 2em;
  padding: 0 0 0.5em;
}

.menu:before {
  content: "[";
}

.menu:after {
  content: "]";
}

.menu > li {
  display: inline;
}

.menu > li:before {
  content: "|";
  padding-right: 0.3em;
}

.menu > li:nth-child(1):before {
  content: "";
  padding: 0;
}

html body {
background-color:#EEEEEE;
}

#wrap {
width:1000px;
margin:0 auto;
padding-top:50px;
background-color:#EEEEEE;
}
#main {
float:right;
width:800px;
min-height:300px;
}
#sidebar {
float:left;
width:200px;
}

#footer {
 clear: both;
 position: relative;
 padding:3em;
 text-align:center;
}

Change background color to grey.

Change background color to grey.


@import 'part:@sanity/base/theme/variables-style';

.root {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  height: 100%;
}

.inner {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.hasFocus {
  composes: root;
}

.noFocus {
  composes: root;
}

.iconContainer {
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--small-padding);
}

.strong {
  font-weight: 500;
  margin: 0;
  padding: 0;
}

.dropFile,
.pasteFile {
  padding: 1rem;
  display: none;

  @media (--screen-medium) {
    display: block;
  }
}

.pasteFile {
  opacity: 0.2;
  transition: opacity linear 0.1s;

  @nest .hasFocus & {
    opacity: 1;
  }
}

@import 'part:@sanity/base/theme/variables-style';

.root {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}

.inner {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.hasFocus {
  composes: root;
}

.noFocus {
  composes: root;
}

.iconContainer {
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--small-padding);
}

.strong {
  font-weight: 500;
  margin: 0;
  padding: 0;
}

.dropFile,
.pasteFile {
  padding: 1rem;
  display: none;

  @media (--screen-medium) {
    display: block;
  }
}

.pasteFile {
  opacity: 0.2;
  transition: opacity linear 0.1s;

  @nest .hasFocus & {
    opacity: 1;
  }
}

Fix placement of upload instructions

[form-builder] Fix placement of upload instructions


.logview {
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  padding: 5px;
}

.logview {
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  padding: 5px;
  color: black;
}

Use black in logview to improve readability


.backtrace {
  --max-height: 25em;
  --gradient-height: calc(var(--max-height) - 4em);
  margin: 5px;
  padding: 0;
  max-height: var(--max-height);
  overflow: hidden;
  position: relative; /* For the positioning of the generated content below */

  /* The gradient is defined towards the bottom so that we hide the end of the
   * backtrace only when the element is tall enough, which is when the backtrace
   * is long. */
  -webkit-mask-image: linear-gradient(to bottom, white, white var(--gradient-height), transparent);
  mask-image: linear-gradient(to bottom, white, white var(--gradient-height), transparent);
}

.backtraceStackFrame {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 30em;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.backtraceStackFrameOrigin {
  color: rgba(0,0,0,0.4);
  margin-left: 10px;
  font-style: normal;
}

.backtrace {
  --max-height: 30em;
  --gradient-height: calc(var(--max-height) - 5em);

  margin: 5px;
  padding: 0;
  max-height: var(--max-height);
  overflow: hidden;

  font-size: .9em;
  line-height: 1.5;

  /* The gradient is defined towards the bottom so that we hide the end of the
   * backtrace only when the element is tall enough, which is when the backtrace
   * is long. */
  -webkit-mask-image: linear-gradient(to bottom, white, white var(--gradient-height), transparent);
  mask-image: linear-gradient(to bottom, white, white var(--gradient-height), transparent);
}

.backtraceStackFrame {
  display: block;
  margin: 0;
  padding: 0;
  max-width: 35em;

  list-style: none;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.backtraceStackFrameOrigin {
  color: rgba(0,0,0,0.4);
  margin-left: 10px;
  font-style: normal;
}

Reduce the font size of the backtrace information


.landing {
  display: flex;
  flex-direction: column;
  flex: 1 0 100%;
  align-items: center;
}

.pageHeading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top:10vw;
  text-align: center;
  padding-bottom:20px;
}

.pageHeading h1 {
  width: 80%;
  color: #fff;
}

@media screen and (max-width: 900px) {
  .pageHeading {
    margin-top:5vw;
  }
  .pageHeading h1 {
    font-size:16px;
  }
}

@media screen and (max-width: 500px) {
  .pageHeading {
    margin-top:3vw;
  }
  .pageHeading h1 {
    font-size:14px;
  }
}

.landing {
  display: flex;
  flex-direction: column;
  flex: 1 0 100%;
  align-items: center;
  width: 100%;
}

.pageHeading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top:10vw;
  text-align: center;
  padding-bottom:20px;
}

.pageHeading h1 {
  width: 80%;
  color: #fff;
}

@media screen and (max-width: 900px) {
  .pageHeading {
    margin-top:5vw;
  }
  .pageHeading h1 {
    font-size:16px;
  }
}

@media screen and (max-width: 500px) {
  .pageHeading {
    margin-top:3vw;
  }
  .pageHeading h1 {
    font-size:14px;
  }
}

Set fixed width on Landing component container

Horizontally centers content at mobile widths less than 400px


.status-bar {
  background-color: #e5e5e5;
  border-top: 1px solid #959595;
  color: #333;
}

.status-bar .git-status.octicons.modified-status-icon {
  color: #f78a46;
  display: inline-block;
}

.status-bar .git-status.octicons.new-status-icon {
  color: #5293d8;
  display: inline-block;
}

.status-bar .grammar-name:hover {
  color: #000;
  border: 1px solid rgba(50, 50, 50, 0.2);
  border-radius: 2px;
}

Add grammar name hover style to light theme


.infinite-tree-scroll {
  overflow: auto;
}
.infinite-tree-content {
  outline: 0;
}
.infinite-tree-content .tree-selected.tree-item,
.infinite-tree-content .tree-selected.tree-item:hover {
  background: #deecfd;
  border: 1px solid #06c;
}
.infinite-tree-content .tree-item {
  border: 1px solid transparent;
  cursor: default;
}
.infinite-tree-content .tree-item:hover {
  background: #f2fdff;
}
.infinite-tree-content .tree-toggler {
  color: #333;
}
.infinite-tree-content .tree-toggler:hover {
  color: #000;
  text-decoration: none;
}
.infinite-tree-content .tree-title {
  cursor: pointer;
}
.infinite-tree-no-data {
  text-align: center;
}

.infinite-tree-scroll {
  overflow: auto;
}
.infinite-tree-content {
  outline: 0;
}
.infinite-tree-content .tree-selected.tree-item,
.infinite-tree-content .tree-selected.tree-item:hover {
  background: #deecfd;
  border: 1px solid #06c;
}
.infinite-tree-content .tree-item {
  border: 1px solid transparent;
  cursor: default;
}
.infinite-tree-content .tree-item:hover {
  background: #f2fdff;
}
.infinite-tree-content .tree-toggler {
  color: #333;
  user-select: none;
}
.infinite-tree-content .tree-toggler:hover {
  color: #000;
  text-decoration: none;
}
.infinite-tree-content .tree-title {
  cursor: pointer;
  user-select: none;
}
.infinite-tree-no-data {
  text-align: center;
}

Disable user-select for tree-toggler and tree-title


.leia-mais {
    padding: .5em;
    margin: 1em;
    display: block;
    font-size: 1.25em;
    text-align: center;
    background-color: #E6E7E8;
}

.post-blog {
    padding-bottom: 30px;
    margin-bottom: 20px;
    background-image: linear-gradient(to right,
        rgba(200, 200, 200, 0),
        rgba(200, 200, 200, 1),
        rgba(200, 200, 200, 0));
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom center;
}

.leia-mais {
    padding: .5em;
    margin: 1em;
    display: block;
    font-size: 1.25em;
    text-align: center;
    background-color: #E6E7E8;
}

.post-blog {
    padding-bottom: 30px;
    margin-bottom: 20px;
}

.post-blog + .post-blog {
  /* trocamos padding-bottom e margin-bottom por
     padding-top e margin-top */
  padding-top: 1em;
  margin-top: 1.5em;
  background-image: linear-gradient(to right, rgba(200, 200, 200, 0), rgba(200, 200, 200, 1), rgba(200, 200, 200, 0));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  /* trocamos "bottom center" por "top center" */
  background-position: top center;
}

Insert new files, Alura, Avançando no HTML e CSS, Aula 7


html, body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
  font-size: 1em;
}

html, body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 1em;
}

Change the font to Arial Helvetica

Change the font to Arial Helvetica


html {
	background-color: honeydew;
}
header	{
	font-family: Papyrus, fantasy;
	font-size: 30px;
	padding-left: 10px;
}
h2	{
	font-family: Copperplate, fantasy;
	font-size: 25px;
}
body {
	font-family: Arial;
	font-size: 15px;
}

html {
	background-color: honeydew;
	padding-left: 12px;
}

body {
	font-family: Arial;
	font-size: 15px;
}

header	{
	font-family: Papyrus, fantasy;
	font-size: 30px;
	padding-left: 10px;
	margin-top: -25px;
	margin-bottom: -40px;
	border: 1px blue;
}

section {
	display: block;
	border: 1px solid black;
}

h2	{
	font-family: Copperplate, fantasy;
	font-size: 25px;
}

fieldset {
	background-image: url(http://sr.photos2.fotosearch.com/bthumb/CSP/CSP990/k11061406.jpg);
}

footer {
	display: block;
	border: 1px solid pink;
	margin: auto;
	border-top: dashed thick green;
	/*MAKE THIS CENTERED*/
}

Add background image to survey, add padding/margin/borders to elements


body {
  font-size: 150%;
  color: #333333;
  font-family: 'Open Sans', sans-serif;
  margin: 0em;
}

a:link {color: #cccccc; text-decoration: none; }
a:active {color: #cccccc; text-decoration: none; }
a:visited {color: #cccccc; text-decoration: none; }
a:hover {color: #ffffff; text-decoration: none; }

.header {
  background-color: #222222;
  color: #cccccc;
  padding: 0.5em;
}

.title {
  font-weight: bold;
}

.menu {
  float: right;
  font-size: 80%;
}

.canvas {
  background-color: #f8f8f8;
  width: 100%;
  height: 1000px;
}

.card {
  background-color: #fcf0ad;
  padding: 0.5em;
}

body {
  font-size: 150%;
  color: #333333;
  font-family: 'Open Sans', sans-serif;
  margin: 0em;
}

a:link {color: #cccccc; text-decoration: none; }
a:active {color: #cccccc; text-decoration: none; }
a:visited {color: #cccccc; text-decoration: none; }
a:hover {color: #ffffff; text-decoration: none; }

.header {
  background-color: #222222;
  color: #cccccc;
  padding: 0.5em;
}

.title {
  font-weight: bold;
}

.menu {
  float: right;
  font-size: 80%;
}

.canvas {
  background-color: #f8f8f8;
  width: 100%;
  height: 1000px;
}

.card {
  background-color: #fcf0ad;
  padding: 0.5em;
  box-shadow: 2px 2px 2px #666;
}

Add some shadow to the cards.

Add some shadow to the cards.


/* Block */
.ov-block-content img{ width: 100%; border: 1px solid #f1f1f1; position: absolute;}
.ov-block-content .placeholder{
  width:100%;
  min-height: 200px;
  background-color: #eee;
  transition: background-color 0.4s ease;
  position: relative;
  border-radius: 20px;
}
.ov-block-content .play {
  position: absolute;
  left: 46%;
  top: 38%;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-left: 40px solid #fff;
  border-bottom: 25px solid transparent;
  transition: border-color 0.4s ease;
}
.ov-block-content .placeholder:hover .play {
  border-left: 40px solid #1bbbe9;
}
.ov-block-content .placeholder:hover {
  background-color: #fff;
}

/* Block */
.ov-block-content img{ width: 100%; border: 1px solid #f1f1f1; }
.ov-block-content .placeholder{
  width:100%;
  min-height: 200px;
  background-color: #eee;
  transition: background-color 0.4s ease;
  position: relative;
  border-radius: 20px;
}
.ov-block-content .play {
  position: absolute;
  left: 46%;
  top: 38%;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-left: 40px solid #fff;
  border-bottom: 25px solid transparent;
  transition: border-color 0.4s ease;
}
.ov-block-content .placeholder:hover .play {
  border-left: 40px solid #1bbbe9;
}
.ov-block-content .placeholder:hover {
  background-color: #fff;
}

Correct video thumbnail overlapping the date in the block


/* Firefox userChrome.css */

/* Always show tab icon. */
.tab-icon-image:not([src], [pinned], [crashed], [busy]) {
  display: -moz-inline-box !important;
  list-style-image: url("chrome://branding/content/icon32.png") !important;
}

/* Minimize One-Off Searches in address bar. */
#urlbar .search-one-offs:not([hidden]) {
  display: flex !important;
  padding-block: 6px !important;
}
[uidensity="touch"] #urlbar .search-one-offs:not([hidden]) {
  padding-block: 11px !important;
}
#urlbar .search-panel-header {
  display: none !important;
}
#urlbar .searchbar-engine-one-off-item {
  margin-inline-start: 0 !important;
}

/* Hide application menu items. */
#appMenu-fxa-status2,
#appMenu-fxa-separator {
  display: none !important;
}
#appMenu-passwords-button {
  display: none !important;
}

/* Firefox userChrome.css */

/* Always show tab icon. */
.tab-icon-image:not([src], [pinned], [crashed], [busy]) {
  display: -moz-inline-box !important;
  content: url("chrome://branding/content/icon32.png") !important;
  list-style-image: url("chrome://branding/content/icon32.png") !important;
}

/* Minimize One-Off Searches in address bar. */
#urlbar .search-one-offs:not([hidden]) {
  display: flex !important;
  padding-block: 6px !important;
}
[uidensity="touch"] #urlbar .search-one-offs:not([hidden]) {
  padding-block: 11px !important;
}
#urlbar .search-panel-header {
  display: none !important;
}
#urlbar .searchbar-engine-one-off-item {
  margin-inline-start: 0 !important;
}

/* Hide application menu items. */
#appMenu-fxa-status2,
#appMenu-fxa-separator {
  display: none !important;
}
#appMenu-passwords-button {
  display: none !important;
}

Fix default tab icon in Firefox 98+

firefox: Fix default tab icon in Firefox 98+


li {
  list-style: none;
}

ul {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

#refresh {
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  background: rgba(0,0,0,.8);

  opacity: 0;
  transition: opacity 0.4s ease-in;
}

#refresh.show {
  opacity: 1;
  transition: opacity 0.4s ease-out;
}

#refresh h1 {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #FFF;
  text-align: center;
}

li {
  list-style: none;
}

ul {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

#refresh {
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: rgba(0,0,0,.8);

  opacity: 0;
  transition: opacity 0.4s ease-in;
}

#refresh.show {
  opacity: 1;
  z-index: 1;
  transition: opacity 0.4s ease-out;
}

#refresh h1 {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #FFF;
  text-align: center;
}

.shot .meta-info {
  display: none;
}

.shot .meta-info.show {
  display: block;
}

Fix refresh window blocking userinput while hidden


body {
  background-color: #336;
  position: relative;
  text-align: center;
}
canvas#board {
  background-color: #000;
  border: 4px solid #FF4;
  border-radius: 12px;
  margin: 3em;
}

#actors {
  position: absolute;
  z-index: 2;
}
#board {
  z-index: 0;
}
#pellets {
  position: absolute;
  z-index: 1;
}

#debug {
  background-color: #000;
  color: #FFF;
  display: none;
  font-family: monospace;
  height: 180px;
  left: 0px;
  padding: 1em;
  position: absolute;
  text-align: left;
  top: 0px;
  width: 180px;
}

body {
  background-color: #336;
  position: relative;
  text-align: center;
}
canvas {
  background-color: rgba(0, 0, 0, 0);
  border: 4px solid #FF4;
  border-radius: 12px;
  left: 40vw;
  margin: 3em;
  position: absolute;
}

#actors {
  z-index: 2;
}
#board {
  background-color: #000;
  z-index: 0;
}
#pellets {
  z-index: 1;
}

#debug {
  background-color: #000;
  color: #FFF;
  /*display: none;*/
  font-family: monospace;
  height: 180px;
  left: 0px;
  padding: 1em;
  position: absolute;
  text-align: left;
  top: 0px;
  width: 180px;
}

Update canvas styling to layer canvases without js


.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

/*.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}
*/
.node {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

Comment out CSS which conflicts with Circle Packing CSS