#trip-wrap {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    height: 160px;
    overflow: auto;
}

#trip { margin-top: 0; margin-bottom: 0 }
#map-wrap { position: fixed; top: 220px; left: 0; right: 0; bottom: 0 }
#map-canvas { height: 100% }

#controls-wrap {
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 42;
  text-align: center;
  pointer-events: none; /* don't block map controls in corner */
}
#controls {
  display: inline-block;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  pointer-events: auto;
}
#date {
  text-align: center;
}

#trip-wrap {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    height: 160px;
    overflow: auto;
    box-shadow: 0 20px 20px -20px grey;
    z-index: 1;
}

#trip { margin-top: 0; margin-bottom: 0 }
#map-wrap { position: fixed; top: 220px; left: 0; right: 0; bottom: 0 }
#map-canvas { height: 100% }

#controls-wrap {
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 42;
  text-align: center;
  pointer-events: none; /* don't block map controls in corner */
}
#controls {
  display: inline-block;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  pointer-events: auto;
}
#date {
  text-align: center;
}

Make leg sequence vs map edge pretty

Make leg sequence vs map edge pretty


body {
  background-color: #F9F5FC;
}

.container {
  background-color: #F1EEFA;
  border: 0.5em solid #AAF;
  box-shadow: 0.25em 0.25em 0.25em #444;
  margin: 0 auto;
  padding: 2em;
  text-align: center;
  width: 60em;
}

#element-description {
  border: 1px solid #DDA;
  height: 182px;
  padding: 12px;
  text-align: left;
  width: 516px;
}
#element-description h2 {
  margin: 0;
}
#element-description p {
  margin: 8px 0 0 0;
}
#tetris-grid {
  border: 1px solid #DAA;
}
#tetris-preview {
  border: 1px solid #AAD;
  display: block;
}
#tetris-table {
  border: 1px solid #ADA;
  display: block;
}

body {
  background-color: #F9F5FC;
}

.container {
  background-color: #F1EEFA;
  border: 0.5em solid #AAF;
  box-shadow: 0.25em 0.25em 0.25em #444;
  margin: 0 auto;
  padding: 2em;
  text-align: center;
  width: 60em;
}

#right-container {
  display: inline-block;
  vertical-align: top;
}
#element-description {
  border: 1px solid #DDA;
  height: 182px;
  padding: 12px;
  text-align: left;
  width: 516px;
}
#element-description h2 {
  margin: 0;
}
#element-description p {
  margin: 8px 0 0 0;
}
#tetris-grid {
  border: 1px solid #DAA;
}
#tetris-preview {
  border: 1px solid #AAD;
  display: block;
}
#tetris-table {
  border: 1px solid #ADA;
  display: block;
}

Add rule for right side container

Add rule for right side container


/*
  =require purecss/base
  =require purecss/buttons
  =require purecss/forms-nr
  =require purecss/forms
  =require purecss/grids-nr
  =require purecss/grids
  =require purecss/menus-nr
  =require purecss/menus
  =require purecss/tables
*/

/*
  =require purecss/base
  =require purecss/buttons
  =require purecss/forms
  =require purecss/grids
  =require purecss/menus
  =require purecss/tables
*/

Initialize only with responsive support

Initialize only with responsive support


body {
    background-color: grey;
    font-family: sans-serif;
    height: 90%;
}

h1 {
    color: white;
    background-color: green;
    padding: 10px;
}

#wrapper {
    background-color: lightgrey;
}

#left {
    width: 180px;
    float: left;
    margin: 0;
    padding: 10px;
}

#left > h2 {
    margin-top: 0;
}

#right {
    margin-left: 200px;
    padding: 10px;
    border-left: 1px solid green;
    clear: right;
}

.clearLeft {
    clear: left;
}

p.backgroundText {
    opacity: 0.4;
    color: orange;
    font-size: 10em;
    font-style: italic;
    position: absolute;
    left: 200;
    top: 100;
/*    z-index: -1;*/
    margin: 0;
}

p.foregroundText {
    margin: 0;
}

table {
    margin: auto;
    border-collapse: collapse;
}

th {
    color: white;
    background-color: green;
}

td,
th {
    border: 1px solid green;
    padding: 10px;
}

ul {
    list-style-type: square;
    height: 100%;
    margin: 0;
}

body {
    background-color: grey;
    font-family: sans-serif;
    height: 90%;
}

h1 {
    color: white;
    background-color: green;
    padding: 10px;
}

#wrapper {
    background-color: lightgrey;
}

#left {
    width: 180px;
    float: left;
    margin: 0;
    padding: 10px;
}

#left > h2 {
    margin-top: 0;
}

#right {
    margin-left: 200px;
    padding: 10px;
    border-left: 1px solid green;
    clear: right;
}

.clearLeft {
    clear: left;
}

p.backgroundText {
    opacity: 0.4;
    color: orange;
    font-size: 10em;
    font-style: italic;
    position: absolute;
    left: 200;
    top: 100;
    margin: 0;
}

p.foregroundText {
    margin: 0;
    position: relative;
    z-index: 1;
}

table {
    margin: auto;
    border-collapse: collapse;
}

th {
    color: white;
    background-color: green;
}

td,
th {
    border: 1px solid green;
    padding: 10px;
}

ul {
    list-style-type: square;
    height: 100%;
    margin: 0;
}

Apply hint for the CSS task

Apply hint for the CSS task


:global(.increment-enter) {
  display: none;

  &:first-of-type {
    display: block;
  }

  transform: translate3d(0, 2.5rem, 0);
}

:global(.increment-enter.increment-enter-active) {
  transform: translate3d(0, 0, 0);
  transition: transform 250ms ease;
}

:global(.increment-leave) {
  position: absolute;
  transform: translate3d(0, -0.8rem, 0);
}

:global(.increment-leave.increment-leave-active) {
  transition: transform 250ms ease;
  transform: translate3d(0, -2.5rem, 0);
}

:global(.ui.labeled.button){
  --fontSize: 0.85rem;

  .vote-button, .vote-count {
    font-size: var(--fontSize);
  }

  .vote-button {
    padding: 0.5rem 0.9rem;
  }

  .vote-count {
    padding: 0.5rem;
    cursor: default;
    position: relative;
    z-index: 2;
    overflow: hidden;
  }
}

:global(.increment-enter) {
  display: none;

  &:first-of-type {
    display: block;
  }

  transform: translate3d(0, 2.5rem, 0);
}

:global(.increment-enter.increment-enter-active) {
  transform: translate3d(0, 0, 0);
  transition: transform 250ms ease;
}

:global(.increment-leave) {
  position: absolute;
  transform: translate3d(0, -0.8rem, 0);
}

:global(.increment-leave.increment-leave-active) {
  transition: transform 250ms ease;
  transform: translate3d(0, -2.5rem, 0);
}

:global(.ui.labeled.button){
  --fontSize: 0.85rem;

  .vote-button, .vote-count {
    font-size: var(--fontSize);
  }

  .vote-button {
    padding: 0.5rem 0.9rem;
  }

  .vote-count {
    padding: 0.5rem;
    cursor: default;
    position: relative;
    overflow: hidden;
  }
}

Remove unnecessary z-index declaration, as it causes vote counter to cut through modal overlay


@import '@teamleader/ui-colors';

.loading-bar {
  width: 100%;
  height: 3px;

  background-color: var(--color-mint-lightest);

  overflow: hidden;

  &-indicator {
    fill: var(--color-mint);
    animation: slideOut 2s ease infinite;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(130%);
  }
}

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

.loading-bar {
  width: 100%;
  height: 3px;

  background-color: var(--color-mint-lightest);

  overflow: hidden;

  &-indicator {
    fill: var(--color-mint);
    animation: slideOut calc(var(--animation-duration) * 5) ease infinite;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(130%);
  }
}

Use the predefined animation duration

Use the predefined animation duration


.exampleOutput {
  display: flex;
  border: 1px solid rgb(224, 224, 224);
  padding: 3rem;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.codeBlock pre {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.example-grid-content {
  background: rgb(224, 224, 224);
  display: flex;
}

.exampleOutput .btn + .btn {
  margin-left: 1rem;
}

.exampleOutput {
  display: flex;
  border: 1px solid rgb(224, 224, 224);
  padding: 2rem;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.codeBlock pre {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.example-grid-content {
  background: rgb(224, 224, 224);
  display: flex;
}

.exampleOutput .btn + .btn {
  margin-left: 1rem;
}

Reduce padding of example output

Reduce padding of example output


/*
 Theme Name:   wyvern
 Theme URI:    http:/in.sane.ninja
 Description:  Vue 2 based WP theme
 Author:       sane
 Author URI:   http:/in.sane.ninja
 Template:     wyvern
 Version:      0.1.0
 License:      MIT
 License URI:  https://opensource.org/licenses/MIT
 Tags:         light, rest, api, javascript
 Text Domain:  wyvern
*/

/*
 Theme Name:   wyvern
 Theme URI:    http:/in.sane.ninja
 Description:  Vue 2 based WP theme
 Author:       sane
 Author URI:   http:/in.sane.ninja
 Version:      0.1.0
 License:      MIT
 License URI:  https://opensource.org/licenses/MIT
 Tags:         light, rest, api, javascript
 Text Domain:  wyvern
*/

Fix wordpress nag "Please fix the Template header."


/*
 Theme Name:   Harp Column Child
 Theme URI:    http://example.com/smartmag-child/
 Description:  SmartMag Child Theme for Harp Column
 Author:       Hugh Brock
 Author URI:   http://example.com
 Template:     smart-mag
 Version:      1.0.0
*/

@import url("../smart-mag/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

#buddypress #whats-new-options {
	overflow: hidden;
}

#buddypress form#whats-new-form textarea {
	overflow: hidden;
}

/* style the banner ad widget */

div.ad_container_1 {
  float: right;
  margin-top: 22px;
}

.pmpro_level-price-select {
  text-align: center;
  min-height: 150px;
  width: 200px;
  margin-top: 20px;
  float: left;
}

.bbp-logged-in .links li {
  margin-bottom: 1em;
}
.bbp-logged-in .links li a {
  font-weight: bold;
}

.current-level-text {
  font-weight: bold;
  margin: 0;
  padding: 0;
}

#bbpress-forums .post-content {
	font-size: 14px;
}

Make forum type a bit bigger

Make forum type a bit bigger


.footer {
	margin-top: 45px;
	padding: 35px 0 36px;
	border-top: 1px solid #e5e5e5;
}

.footer p {
	margin-bottom: 0;
	color: #555;
}

body {
	padding-top: 55px; /* Hidden behind navbar-fixed-top */
}

.navbar .brand { /* brand logo vertically centered */
	padding-top: 10px;
	padding-bottom: 11px;
}

.label { /* Fix label vertical alignment */
	vertical-align: baseline;
}

h2 .badge, h3 .badge { /* Fix badge in h2 vertical alignment */
	vertical-align: top;
}

/*
.navbar .nav li a, .navbar .navbar-text {
	color: #CCC;
}

.navbar .nav li.active {
	font-weight: bold;
}
*/

.pygmentize pre, .highlighttable pre {
	white-space: pre;
}

textarea#source, textarea#corrected_source {
    font-family: Menlo, Monaco, "Courier New", monospace;
}

Make textareas for source use monospace font


.sponsor-logo {
  width: 200px;
  float: left;
}

.sponsor-logo {
  margin-right: 10px;
  width: 200px;
  float: left;
}

Add margin and float right

Add margin and float right


@import url('https://fonts.googleapis.com/css?family=Roboto:400,300,500');

body {
    margin: 0;
    font-family: Roboto, sans-serif;
}

.heading {
    color: #261094;
    text-align: center;
}

@import url('//fonts.googleapis.com/css?family=Roboto:400,300,500');

body {
    margin: 0;
    font-family: Roboto, sans-serif;
}

.heading {
    color: #261094;
    text-align: center;
}

Use protocol-relative URL for Google Fonts


body {
  color: #000080;
}

a {
  color: #800080;
}

a:visited {
  color: #ff0000;
}

html {
  background-color: #ffffff;
}

.left-column {
  position: relative;
  display: block;
  left: 5%;
  width: 40%;

}

.right-column {
  position: relative;
  display: block;
  left: 55%;
  width: 40%;
}

.geico {
  position: relative;
  text-align: center;
  vertical-align: center;
}

.disclaimer{
  position: relative;
}

.bh:first-letter {
font-size: 140%;
}

.letterhead {
  position: relative;
  text-align: center;
  font-weight: bold;
}

.hline { width:100%; height:1px; background: #fff }

Update with CSS - need to fix list setup and hr tag


body{
	width:200px;
	height:150px;
	background-image:url('chrome-extension://cednndladeaobomjhaoiahnpjiiamkhj/intro-bg.png');
}

h1,
h2,
h3,
h4,
h5,
h6{
	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	color: #FFF;
}

#pair_login{
	margin-bottom: 25%
}

.btn-circle {
    width: 70px;
    height: 70px;
    margin-top: 15px;
    padding: 7px 16px;
    border: 3px solid #fff;
    border-radius: 35px;
    font-size: 40px;
    color: #fff;
    background: 0 0;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.btn-circle img{
	width:16%;
}

.btn-circle:hover,
.btn-circle:focus {
    outline: 0;
    color: #fff;
    background: rgba(255,255,255,.3);
}

body{
	width:200px;
	height:150px;
	background-image:url('chrome-extension://oodeamamgpaimpfceocholnhappfdbkk/intro-bg.png');
}

h1,
h2,
h3,
h4,
h5,
h6{
	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	color: #FFF;
}

#pair_login{
	margin-bottom: 25%
}

.btn-circle {
    width: 70px;
    height: 70px;
    margin-top: 15px;
    padding: 7px 16px;
    border: 3px solid #fff;
    border-radius: 35px;
    font-size: 40px;
    color: #fff;
    background: 0 0;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.btn-circle img{
	width:16%;
}

.btn-circle:hover,
.btn-circle:focus {
    outline: 0;
    color: #fff;
    background: rgba(255,255,255,.3);
}

Fix Image in Popup Using New Chrome ID

Fix Image in Popup Using New Chrome ID


/* Copyright (c) 2012 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. */

#password-manager > div.content-area {
  min-width: 500px;
}

#password-search-column {
  bottom: 10px;
  position: absolute;
  right: 0;
}

html[dir=rtl] #password-search-column {
  left: 0;
  right: auto;
}

#password-list-headers {
  position: relative;
  width: 100%;
}

#password-list-headers h3 {
  font-size: 105%;
  font-weight: bold;
  margin: 10px 0;
}

#passwords-title {
  display: inline-block;
}

/* Copyright (c) 2012 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.
 */

#password-manager {
  max-width: 1000px;
}

#password-manager > div.content-area {
  min-width: 500px;
}

#password-search-column {
  bottom: 10px;
  position: absolute;
  right: 0;
}

html[dir=rtl] #password-search-column {
  left: 0;
  right: auto;
}

#password-list-headers {
  position: relative;
  width: 100%;
}

#password-list-headers h3 {
  font-size: 105%;
  font-weight: bold;
  margin: 10px 0;
}

#passwords-title {
  display: inline-block;
}

Settings: Set a max-width on the password manager overlay.

BUG=none
TEST=none
R=csilv

Review URL: https://chromiumcodereview.appspot.com/9381036

git-svn-id: de016e52bd170d2d4f2344f9bf92d50478b649e0@121674 0039d316-1c4b-4281-b951-d872f2087c98


#pagelet_bookmark_nav, /* Left column: Bookmarks */
a[href*="lists"], /* Left column: Lists like 'Close Friends' */
div[id*="ticker"], /* Right column / Chat sidebar: news ticker */
div[id*="pagelet_trending_tags_and_topics"] /* Right column: Trending tags and topics */
{
  display: none !important;
}

/* News feed - Needs visibility:hidden to prevent endless refreshing */
div[id*="topnews"] {
	visibility: hidden !important;
}

Add stylesheet to block Facebook and other junk


body {
  padding-bottom: 300px;
}

.page-head {
  max-width: 780px;
  font-size: 16px;
}

h1 {
  margin-bottom: 16px;
}

h3 {
  margin-top: 50px;
}

.examples > p {
  margin-bottom: 20px;
}

body {
  padding-bottom: 300px;
}

.page-head {
  max-width: 780px;
  font-size: 16px;
}

h1 {
  margin-bottom: 16px;
}

h3 {
  margin-top: 50px;
}

p {
  margin-bottom: 0;
}

.examples > p {
  margin-bottom: 20px;
}

Remove demo animated paragraph margins.

Remove demo animated paragraph margins.


/* Figures */
figure {
  display: block;
  margin: 0;
  position: relative;

  &.easywyg-pull-left   {
    float: left;
    margin: 0 1em 0 0;
  }

  &.easywyg-pull-center {
    float: none;
    text-align: center;
    overflow: hidden;
    margin: 1em 0;

    img { display: inline-block; }
  }

  &.easywyg-pull-right {
    float: right;
    margin: 0 0 0 1em;
  }

  img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    border: 0;
  }

  figcaption { text-align: center; }
}

/* Figures */
figure {
  display: block;
  margin: 0;
  position: relative;

  &.easywyg-pull-left   {
    float: left;
    margin: 0 1em 0 0;
  }

  &.easywyg-pull-center {
    float: none;
    text-align: center;
    overflow: hidden;
    margin: 1em 0;

    img { display: inline-block; }
  }

  &.easywyg-pull-right {
    float: right;
    margin: 0 0 0 1em;
  }

  img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    border: 1px solid #f4f4f4;
  }

  figcaption { text-align: center; }
}

Add visual border to images

Add visual border to images


/* CSS almost completely taken from T-M at www.moronic-works.co.uk with same adaptions and additions*/
tr:nth-child(odd)
{
	background: #EEE;
}
tr:nth-child(even)
{
	background: #DDD;
}
td
{
	max-width: 900px;
}

.log
{
	border-collapse: collapse;
	font-family: monospace;
	font-size: 14px;
}
.user
{
	font-weight: bold;
}
.message .user
{
	text-align: right;
	border-right: 1px solid #000;
	padding-right: 0.5em;
}
.spacer
{
	text-align: right;
	border-right: 1px solid #000;
	padding-right: 0.5em;
	color: #666;
}
.text
{
	word-wrap: break-word;
	padding-left: 0.5em;
}
.action .text
{
	font-style: italic;
}
.other .text
{
	color: #666;
}

#eventToggle
{
	position: fixed;
	background-color: #ffffff;
	left:1100px;
}

Stop 'Hide Events' link from scrolling along


div[class^="highlight"] a {
    background-color: #E6E6E6;
}

div[class^="highlight"] a:hover {
    background-color: #ABECFC;
}

.wy-nav-content {
    max-width: 100%
}

Expand allowed width of docs

MNT: Expand allowed width of docs

There's no reason my widescreen monitor should be scrolling horizontally
when there's so much blank space.


body { background-color: AliceBlue; color: DarkBlue; }
h1 { text-align: center; font-variant: small-caps; }
h3 { color: black; }
td { padding-left: 10px; padding-right: 10px; }

tbody>tr:nth-child(even) { background-color: MintCream; }
tbody>tr:nth-child(odd) { background-color: Ivory; }

.info { float: right; clear: right;
        border: 2px solid; border-radius: 15px;
        width: 25%; background-color: white; padding: 10px; }
.info h3 { text-align: center; }
a>h3 { color: blue }

.error { color: red; background-color: white; border-color: black; border-width: 2px; border-style:solid; }

body { background-color: AliceBlue; color: DarkBlue; }
h1 { text-align: center; font-variant: small-caps; }
h3 { color: black; }
td { padding-left: 10px; padding-right: 10px; }
td:nth-of-type(n+2) { text-align: right; }

tbody>tr:nth-child(even) { background-color: MintCream; }
tbody>tr:nth-child(odd) { background-color: Ivory; }

.info { float: right; clear: right;
        border: 2px solid; border-radius: 15px;
        width: 25%; background-color: white; padding: 10px; }
.info h3 { text-align: center; }
a>h3 { color: blue }

.error { color: red; background-color: white; border-color: black; border-width: 2px; border-style:solid; }

Align numbers to the right

Align numbers to the right


@import '../../../css/colors.css';

.wrapper {
  /* Override hyper-specific Semantic UI styles*/
  padding-bottom: 0 !important;
  &::before { content: "" !important; }

  .picture {
    --sidePadding: 0.4rem;
    height: calc(var(--sidePadding) * 9);
    padding-left: var(--sidePadding);
    padding-right: var(--sidePadding);
    border-radius: 50%;
  }

  p {
    margin: 0;
  }

  .transfer-facilitatorship {
    position: absolute;
    right: 0;
    border: none;
    background-color: transparent;
    padding: 0;
    transform: translate(0.2rem, -0.4rem);

    i {
      background-color: white;
      margin-right: 0;

      &:before {
        top: 1px;
        position: relative;
      }
    }
  }

  .all-votes-in {
    color: var(--semantic-green);
    font-size: 0.7rem;
    font-weight: 600;

    opacity: 0;
    transition: opacity 0.3s ease-in;
    transition-delay: 700ms; /* allows vote increment animation to finish, allowing eye to shift */

    &:global(.opaque) {
      opacity: 1;
    }
  }
}

@import '../../../css/colors.css';

.wrapper {
  /* Override hyper-specific Semantic UI styles*/
  padding-bottom: 0 !important;
  &::before { content: "" !important; }

  .picture {
    --sidePadding: 0.4rem;
    height: calc(var(--sidePadding) * 9);
    padding-left: var(--sidePadding);
    padding-right: var(--sidePadding);
    border-radius: 50%;
  }

  p {
    margin: 0;
  }

  .transfer-facilitatorship {
    position: absolute;
    right: 0;
    border: none;
    background-color: transparent;
    padding: 0;
    transform: translate(0.2rem, -0.4rem);

    i {
      background-color: white;
      margin-right: 0;

      &:before {
        top: 1px;
        position: relative;
      }
    }
  }

  .all-votes-in {
    color: var(--semantic-green);
    font-size: 0.7rem;
    font-weight: 600;

    opacity: 0;
    transition: opacity 0.3s ease-in;

    &:global(.opaque) {
      opacity: 1;
    }
  }
}

Remove transition delay on ALL VOTES IN fade-in

  - delays make users wonder what's gone wrong
  - speed is a feature. be speedy.


circle {
  fill: rgba(31, 119, 180, .25);
  stroke: rgb(31, 119, 180);
  stroke-width: 1px;
}

.leaf circle {
  fill: #ff7f0e;
}

text {
  font-size: .7em;
  font-family: sans-serif;
}

circle {
  fill: rgb(31, 119, 180);
  fill-opacity: .25;
  stroke: rgb(31, 119, 180);
  stroke-width: 1px;
}

.leaf circle {
  fill: #ff7f0e;
  fill-opacity: 1;
}

text {
  font: 10px sans-serif;
}

Fix fill color for iOS.

Fix fill color for iOS.


.box {
    white-space: nowrap;
    position: relative;
}

.box-drawing {
    display: block;
    position: absolute;
    display: inline-block;
    font-family: monospace;
    font-size: 25px;
    font-weight: normal;
    top: -.07em;
}

.box-drawing i {
    display: inline-block;
    font-style: normal;
    width: 30px;
}

.box-drawing i.l::after {
    content: '\2502';
}

.box-drawing i.a::after {
    content: '\251c';
}

.box-text {
}

.box {
    white-space: nowrap;
    position: relative;
    margin: -8px;
}

.box-drawing {
    display: block;
    position: absolute;
    display: inline-block;
    font-family: monospace;
    font-size: 28px;
    line-height: 1.2;
    font-weight: normal;
}

.box-drawing i {
    display: inline-block;
    font-style: normal;
    width: 30px;
}

.box-drawing i.l::after {
    content: '\2502';
}

.box-drawing i.a::after {
    content: '\251c';
}

.box-text {
    padding: 8px;
}

Optimize box drawing a bit

Optimize box drawing a bit


body {
  margin: 0;
  padding: 0;
  font-family: 'Exo 2', sans-serif;
  background-color: #21022c;
  color: #fff;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Exo 2', sans-serif;
  background-color: #21022c;
  background: radial-gradient(circle, #21022c 60%, #000);
  color: #fff;
}

Modify background to use a nice gradient


@charset 'UTF-8';

body {
 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(238, 238, 238)), color-stop(1, rgb(248, 248, 248)));
}

.navbar-search {
 width: 500px;
}

.favicon {
 max-width: 16px;
 margin-right: 5px;
 float: left;
}

.title {
 /*width: 437px;*/
 width: 458px;
 text-overflow: ellipsis;
 overflow: hidden;
}

.url {
 width: 458px;
 text-overflow: ellipsis;
 overflow: hidden;
 display: block;
}

.active .text-info {
 color: inherit;
}

@charset 'UTF-8';

body {
 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(238, 238, 238)), color-stop(1, rgb(248, 248, 248)));
}

.navbar-search {
 width: 500px;
}

.favicon {
 max-width: 16px;
 margin-right: 5px;
 float: left;
}

.title {
 width: 458px;
 text-overflow: ellipsis;
 overflow: hidden;
}

.url {
 width: 458px;
 text-overflow: ellipsis;
 overflow: hidden;
 display: block;
}

.active .text-info {
 color: inherit;
}

.active .muted {
 color: inherit;
}

Make `url` of of `active` tab more readable.


/* Copyright (c) 2012 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. */

.timeline-analysis {
    -webkit-user-select: text;
    font-family: monospace;
    white-space: pre;
}

.timeline-slice {
    border-spacing: 4px 0;
}
.timeline-slice-header {
    text-align: left;
}
.timeline-slice-col-0 {
}
.timeline-slice-col-1 {
}

.timeline-slices {
    border-spacing: 4px 0;
}
.timeline-slices-header {
    text-align: left;
}
.timeline-slices-col-0 {
}
.timeline-slices-col-1 {
    text-align: right;
}
.timeline-slices-col-2 {
    text-align: right;
}

.timeline-counter {
    border-spacing: 4px 0;
}
.timeline-counter-header {
    text-align: left;
}
.timeline-counter-col-0 {
}
.timeline-counter-col-1 {
}

/* Copyright (c) 2012 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. */

.timeline-analysis {
    font-family: monospace;
    white-space: pre;
}
.timeline-analysis * {
   -webkit-user-select: text !important;
}

.timeline-slice {
    border-spacing: 4px 0;
}
.timeline-slice-header {
    text-align: left;
}
.timeline-slice-col-0 {
}
.timeline-slice-col-1 {
}

.timeline-slices {
    border-spacing: 4px 0;
}
.timeline-slices-header {
    text-align: left;
}
.timeline-slices-col-0 {
}
.timeline-slices-col-1 {
    text-align: right;
}
.timeline-slices-col-2 {
    text-align: right;
}

.timeline-counter {
    border-spacing: 4px 0;
}
.timeline-counter-header {
    text-align: left;
}
.timeline-counter-col-0 {
}
.timeline-counter-col-1 {
}

Make text in the analysis area selectable.

BUG=24
TEST=select slice, counter, etc; select text from anaylsis area

Review URL: https://codereview.appspot.com/6301091


.project-map .ol-control {
    position: absolute;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    border-radius: 4px;
}

.project-map .ol-hidden {
    display: none;
}

.project-map .ol-control button {
    display: block;
    background-color: #fff;
    border: 0;
    border-bottom: 1px solid #ccc;
    width: 26px;
    height: 26px;
    line-height: 26px;
    display: block;
    text-align: center;
    text-decoration: none;
    color: black;
    font: bold 18px 'Lucida Console', Monaco, monospace;
    text-indent: 1px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    padding: 0;
}

.project-map .ol-control button:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.project-map .ol-control button:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom: none;
    padding-bottom: 1px;
}

.project-map .ol-zoom {
    top: 11px;
    left: 425px;
}

Add missing CSS file for ProjectMap

Add missing CSS file for ProjectMap


h1, nav, footer { font-family: sans-serif; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.12rem; }
ul li { list-style-type: circle; }
pre, table, ol, dl { margin-left: 2rem; }
li { margin: 0; }
th, td { text-align: left; vertical-align: top; }

body { margin: 0; }
h1 {
	font-weight: normal;
	margin: 0;
	padding: 1rem 2rem;
}
header{
	color: white;
	background: no-repeat;
	background-color: #36648b;
	background-image: url("mujs-logo.png");
	background-position: top right;
}
nav {
	padding: 1rem 2rem;
	background-color: #ddd;
	no-text-transform: uppercase;
}
nav a { color: #303030; padding-right: 2rem; }
article {
	max-width: 50rem;
	margin: 2rem;
}
footer {
	background-color: #ddd;
	color: #303030;
	padding: 1rem 2rem;
}

h1, nav, footer { font-family: sans-serif; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.12rem; }
ul li { list-style-type: circle; }
pre, table, ol, dl { margin-left: 2rem; }
li { margin: 0; }
th, td { text-align: left; vertical-align: top; }

body { margin: 0; }
h1 {
	font-weight: normal;
	margin: 0;
	padding: 1rem 2rem;
}
header{
	color: white;
	background: no-repeat;
	background-color: #36648b;
	background-image: url("mujs-logo.png");
	background-position: top right;
	min-height: 72px;
}
nav {
	padding: 0.75rem 2rem;
	background-color: #ddd;
	no-text-transform: uppercase;
}
nav a { color: #303030; padding-right: 2rem; }
article {
	max-width: 50rem;
	margin: 2rem;
}
footer {
	background-color: #ddd;
	color: #303030;
	padding: 1rem 2rem;
}

Fix logo size in docs.

Fix logo size in docs.


.body {
  background-color: #E6E6E6;
}

.jumbotron {
  background-color: #3C029A;
  color: #FFFFFF;
  margin-bottom: 0;
  padding-bottom: 0px;
}

.navbar-default  {
  background-color: #3C029A;
  background-image: none;
  border: none;
  border-radius: 0px;
  box-shadow: none;
}

.navbar-collapse {
  border: none;
  box-shadow: none;
}

.navbar-default .navbar-nav > li > a {
  color: #FFFFFF;
}

.navbar-default .navbar-nav > li > a:hover {
  color: #AAAAAA ;
}

.panel-primary>.panel-heading {
  background-color: #3C029A;
  background-image: none;
}

.panel-default>.panel-heading {
  color: #3C029A;
  background-color: #FFFFFF;
  background-image: none;
}

.article-dropdown-icon {
  float: right;
}

.permalink {
  float: right;
}

.permalink > .glyphicon {
  padding-right: 5px;
}

.body {
  background-color: #E6E6E6;
}

.jumbotron {
  background-color: #3C029A;
  color: #FFFFFF;
  margin-bottom: 0;
  padding-bottom: 0px;
}

.navbar-default  {
  background-color: #3C029A;
  background-image: none;
  border: none;
  border-radius: 0px;
  box-shadow: none;
}

.navbar-collapse {
  border: none;
  box-shadow: none;
}

.navbar-default .navbar-nav > li > a {
  color: #FFFFFF;
}

.navbar-default .navbar-nav > li > a:hover {
  color: #AAAAAA ;
}

.panel-primary>.panel-heading {
  background-color: #3C029A;
  background-image: none;
}

.panel-default>.panel-heading {
  color: #3C029A;
  background-color: #FFFFFF;
  background-image: none;
}

.panel-title > a:focus, a:hover {
  text-decoration: none;
}

.article-dropdown-icon {
  float: right;
}

.permalink {
  float: right;
}

.permalink > .glyphicon {
  padding-right: 5px;
}

Disable underline on panel heading links.


/* Custom CSS for Documentation */
.userinput {
    font-weight:bold;
}
.replaceable {
    font-style: italic;
}

pre code.userinput {
    font-size: inherit !important;
    overflow-x: scroll;
}

section.normal p,
section.normal li {
    text-align: justify;
}

.book .book-body .page-wrapper .page-inner section.normal h1 {
    padding-bottom: .3em;
    font-size: 2.25em;
    line-height: 1.2;
    border-bottom: 4px solid #eee;
}

.book .book-body .page-wrapper .page-inner section.normal h2 {
    font-size: 1.75em;
    border-bottom: 3px solid #eee;
}

.book .book-body .page-wrapper .page-inner section.normal h3 {
    font-size: 1.5em;
    border-bottom: 2px solid #eee;
}

.book .book-body .page-wrapper .page-inner section.normal h4 {
    font-size: 1.1em;
}

.page-toc{z-index: 1; position:relative;}

Fix some css issues now that we are using the toc plugin


/* =Reveal.js
-------------------------------------------------------------- */
body.reveal {
    text-align: center;
}

.reveal h1, .branding h1 {
    font-size: 2em;
    padding-bottom: .5em;
    line-height: 1em;
}

.reveal h2 {
    line-height: 1.5em;
}

.reveal ul li {
    padding: 2px;
    line-height: 1.5em;
}

.reveal section img {
    background: transparent;
    border: none;
}

.reveal section img {
	box-shadow: 0 !important;
}

/* =Misc
-------------------------------------------------------------- */
.alignleft {
    display: inline !important;
    float: left !important;
    margin-right: 1.5em !important;
}

.alignright {
    display: inline !important;
    float: right !important;
    margin-left: 1.5em !important;
}

.aligncenter {
    clear: both !important;
    display: block !important;
    margin: 0 auto !important;
}

body.admin-bar .reveal {
    top: -28px;
}

body.mceContentBody.reveal {
    margin: 50px auto;
    width: 960px;
    zoom: 0.6;
}

/* =Reveal.js
-------------------------------------------------------------- */
body.reveal {
    text-align: center;
}

.reveal h1, .branding h1 {
    font-size: 2em;
    padding-bottom: .5em;
    line-height: 1em;
}

.reveal h2 {
    line-height: 1.5em;
}

.reveal ul li {
    padding: 2px;
    line-height: 1.5em;
}

.reveal section img {
    background: transparent;
    border: none;
}

.reveal section img {
	box-shadow: none;
}

/* =Misc
-------------------------------------------------------------- */
.alignleft {
    display: inline !important;
    float: left !important;
    margin-right: 1.5em !important;
}

.alignright {
    display: inline !important;
    float: right !important;
    margin-left: 1.5em !important;
}

.aligncenter {
    clear: both !important;
    display: block !important;
    margin: 0 auto !important;
}

body.admin-bar .reveal {
    top: -28px;
}

body.mceContentBody.reveal {
    margin: 50px auto;
    width: 960px;
    zoom: 0.6;
}

Remove box shadow from images

Remove box shadow from images


.thumbnail{
    margin-top: 20px;
}

.thumbnail img{
    width: 350px;
    height: 250px;
    overflow: hidden;
}

.page-header img{
    max-height: 80px;
    float: left;
}

.thumbnail{
    margin-top: 20px;
}

.thumbnail img{
    width: 350px;
    height: 250px;
    overflow: hidden;
}

.page-header {
    border-bottom: medium solid #7d97ad;
}

.page-header img{
    max-height: 80px;
    float: left;
}

Change .page-header border botton style

style: Change .page-header border botton style


body {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1 0 auto;
    margin: 8px;
}

body {
    width: max-content;
}

.content {
    margin: 8px;
    overflow-y: hidden;
    overflow-x: hidden;
}

Hide scrollbars, ensure content fits

Hide scrollbars, ensure content fits


#comments {
    float: right;
    position: relative;
    clear: right;
    max-width: calc(var(--watch-sidebar-width) - 2em);
    padding-left: 0px;
    height: 75vh;
    overflow-y: scroll;
}

#related {
    height: 15vh;
    overflow-y: scroll;
}

Add the style that goes with the javascript


/* Website specific styles */

main {
    display: block;
    margin-bottom: 15px;
    min-height: 100vh;
}

/* Remove border added by code-prettify */

pre {
    border: 0 !important;
}

nav .github-icon {
    height: 24px;
    margin-right: 5px;
    vertical-align: middle;
}

.ion-hero .hero-btn {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

Add box-shadow to webpage hero button

Add box-shadow to webpage hero button


body {
    font-family: sans-serif
}

#wrapper {
    width: 960px;
    margin: auto;
}

#breadcrumb {
    margin: 10px 0;
}

table {
    width: 100%;
}

th {
    text-align: left;
}

.dir-name {
    width:80%;
}

.dir-size {
    width:20%;
}

body {
    font-family: sans-serif
}

#wrapper {
    width: 90%;
    margin: auto;
}

#breadcrumb {
    margin: 10px 0;
}

table {
    width: auto;
}

th {
    text-align: left;
}

.dir-size {
    padding-left:15px;
}

Use relative width for wrapper. Don't stretch table

Switched wrapper from 960px to 90%
Removed width from table and columns to allow the
browser to properly auto align them

Signed-off-by: David Roda <5be8fbd9e98ea1090c5672a3ba8bf51d34482432@gmail.com>


@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; }

@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: var(--black);
  text-decoration: none;
}

a:hover { color: #333; }

Set link color to black

Set link color to black


*,
*:before,
*:after {
       -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    background: transparent;
    border: 0;
    font: inherit;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
    display: block;
}
blockquote, q {
    quotes: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Make all elements use sensible box model


.totp-form {
	margin: 16px auto 1px !important;
}
.totp-form > input, .totp-form > button {
	padding: 10px;
	margin: 0px 0px 5px 0px;
}
.totp-form > input[type="tel"] {
	width: 260px;
}
.totp-form > button[type="submit"] {
	width: 280px;
	border-radius: 3px;
	font-size: 20px;
}

.confirm-inline {
	position: absolute;
	right: 10px;
	top: 0;
	margin: 0 !important;
	padding-right: 25px !important;
	background-color: transparent !important;
	border: none !important;
	opacity: .5;
}

.totp-form {
	margin: 16px auto 1px !important;
}
.totp-form > input, .totp-form > button {
	padding: 10px;
	margin: 0px 0px 5px 0px;
}
.totp-form > input[type="tel"] {
	width: 260px;
	margin: 0px 0px 5px 0px;
}
.totp-form > button[type="submit"] {
	width: 280px;
	border-radius: 3px;
	font-size: 20px;
}

.confirm-inline {
	position: absolute;
	right: 10px;
	top: 0;
	margin: 0 !important;
	padding-right: 25px !important;
	background-color: transparent !important;
	border: none !important;
	opacity: .5;
}

Fix centering of the challenge input field

Signed-off-by: Christoph Wurst <7abde52c298496fa169fb750f91f213a282142af@winzerhof-wurst.at>


html {
  font-size: 62.5%;
}
html, body, .app {
  height: 100%;
}

.title {
  font-size: 3.0rem;
}
.app {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.body {
  height: 70%;
}
.source, .destination {
  display: inline-block;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
}
.source {
  float: left;
}
.destination {
  float: right;
}

.caption {
  font-size: 2.0rem;
  line-height: 3.0rem;
}
.action {
  vertical-align: middle;
}
.text {
  width: 90%;
  height: 100%;
  resize: none;
}

html {
  font-size: 62.5%;
}
html, body, .app {
  height: 100%;
}

.title {
  font-size: 3.0rem;
}
.app {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.body {
  height: 70%;
  margin-top: 10px;
}
.source, .destination {
  display: inline-block;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
}
.source {
  float: left;
}
.destination {
  float: right;
}

.caption {
  font-size: 2.0rem;
  line-height: 3.0rem;
}
.action {
  vertical-align: middle;
}
.text {
  width: 90%;
  height: 100%;
  resize: none;
}

Add margin between .title and .body

Add margin between .title and .body


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;
}

body {
  background-color: #336;
  position: relative;
  text-align: center;
}
canvas {
  background-color: rgba(0, 0, 0, 0);
  border: 4px solid #FF4;
  border-radius: 12px;
  margin: 3em 0;
  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;
}

Update canvas styling for new centering function


/**
 * Base
 *
 * These are top-level styles for things like the <body>. Properties like
 *  box-sizing, body background/font-family and more.
 */

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

/**
 * Base
 *
 * These are top-level styles for things like the <body>. Properties like
 *  box-sizing, body background/font-family and more.
 */

html {
  box-sizing: border-box;
}

*,
::after,
::before {
  box-sizing: inherit;
}

img {
  max-width: 100%;
}

Update box-sizing for more flexibility

Update box-sizing for more flexibility

This update allows you to use `content-box` and `padding-box` as desired without universal selector causing inheritance issues.
https://css-tricks.com/box-sizing/


.cs-field-overlay .overlay-label,
.cs-content-overlay .overlay-label {
  font-size: 10px;
  text-transform: uppercase;
  background-color: var(--deep-tools-highlight);
}

.cs-field-overlay .overlay-border,
.cs-content-overlay .overlay-border {
  border-color: var(--deep-tools-highlight);
  background-color: var(--faded-tools-highlight);
}

.cs-field-overlay.with-inline-editor .overlay-label,
.cs-field-overlay.passthrough .overlay-label {
  background-color: var(--tools-highlight);
}

.cs-field-overlay.with-inline-editor .overlay-border,
.cs-field-overlay.passthrough .overlay-border {
  border-color: var(--tools-highlight);
  background-color: transparent;
}

.cs-field-overlay.passthrough {
  pointer-events: none;
}

.cs-field-overlay.passthrough .overlay-scrim {
  pointer-events: auto;
}

.cs-field-overlay .overlay-label,
.cs-content-overlay .overlay-label {
  font-size: 10px;
  text-transform: uppercase;
  background-color: var(--deep-tools-highlight);
}

.cs-field-overlay .overlay-border,
.cs-content-overlay .overlay-border {
  border-color: var(--deep-tools-highlight);
  background-color: var(--faded-tools-highlight);
}

.cs-field-overlay.with-inline-editor .overlay-label,
.cs-field-overlay.passthrough .overlay-label {
  background-color: var(--tools-highlight);
}

.cs-field-overlay.with-inline-editor .overlay-border,
.cs-field-overlay.passthrough .overlay-border {
  border-color: var(--tools-highlight);
  background-color: transparent;
}

.cs-field-overlay.passthrough {
  pointer-events: none;
}

.cs-field-overlay.passthrough > * {
  pointer-events: auto;
}

Improve CSS selector for pointer-events

Improve CSS selector for pointer-events


/*
 * 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 vendor/assets/stylesheets of plugins, if any, 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 top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 *= require vt100
 */

/*
 * 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 vendor/assets/stylesheets of plugins, if any, 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 top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require vt100
 *= require_self
 *= require_tree .
 */

Load vt100 styles before everython to allow custom colors


.internal {
    display: inline-block;
    background-color: orange;
    color: white;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-right: 4px;
    border-radius: 4px;
}

ul.items {
    margin: 0;
}

ul.items span {
    font-weight: bold;
    margin-right: 4px;
}

.dependencies {
    display: inline-block;
    background-color: indianred;
    font-weight: bold;
    font-size: 6px;
    color: white;
    padding-top: 4px;
    text-align: center;
    border-radius: 8px;
    width: 16px;
    height: 12px;
    cursor: pointer;
}

tr:hover {
    background-color: silver;
}

tr.dragged {
    background-color: orange;
    opacity: .5;
}

tr.dragallowed {
    background-color: yellowgreen;
}

.internal {
    display: inline-block;
    background-color: orange;
    color: white;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-right: 4px;
    border-radius: 4px;
}

ul.items {
    margin: 0;
}

ul.items span {
    font-weight: bold;
    margin-right: 4px;
}

.dependencies {
    display: inline-block;
    background-color: indianred;
    font-weight: bold;
    font-size: 6px;
    color: white;
    padding-top: 4px;
    text-align: center;
    border-radius: 8px;
    width: 16px;
    height: 12px;
    cursor: pointer;
}

tr:hover {
    background-color: silver;
}

tr.dragged {
    background-color: aquamarine;
    opacity: .5;
}

tr.drag-ok {
    background-color: yellowgreen;
}

tr.no-drag {
    background-color: orange;
}

tr.drag-ok.over {
    background-color: darkgreen;
}

Use class names to allow / forbid drag&drop


.amp-wp-unknown-size img {
	/** Worst case scenario when we can't figure out dimensions for an image. **/
	/** Force the image into a box of fixed dimensions and use object-fit to scale. **/
	object-fit: contain;
}

.entry__content amp-fit-text blockquote,
amp-fit-text h1,
amp-fit-text h2,
amp-fit-text h3,
amp-fit-text h4,
amp-fit-text h5,
amp-fit-text h6 {
	font-size: inherit;
}

#amp-image-lightbox div div > :first-child {
	object-fit: contain;
}

.entry__content .wp-block-gallery[class*="columns-"] figure {
	width: 100%;
}

.amp-wp-unknown-size img {
	/** Worst case scenario when we can't figure out dimensions for an image. **/
	/** Force the image into a box of fixed dimensions and use object-fit to scale. **/
	object-fit: contain;
}

amp-fit-text blockquote,
amp-fit-text h1,
amp-fit-text h2,
amp-fit-text h3,
amp-fit-text h4,
amp-fit-text h5,
amp-fit-text h6 {
	font-size: inherit;
}

Remove apparently unneessary object-fit from amp-image-lightbox; remove non-standard entry__content


@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-gray-900 text-gray-100;
}

header {
  @apply text-3xl mb-4 text-teal-300;
}

h1 {
  @apply text-2xl mb-4;
}

h2 {
  @apply text-xl my-4;
}

h3 {
  @apply text-lg my-3;
}

a {
  @apply text-teal-100;
}

a:hover {
  @apply text-teal-200;
}

.markdown blockquote {
  @apply -ml-8 mb-8;
}

.markdown ul {
  @apply list-disc mb-8;
  text-indent: 1.5em;
}

.markdown ul ul {
  @apply mb-0;
  text-indent: 3em;
}

.markdown ol {
  @apply list-decimal mb-8;
  text-indent: 1.5em;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=Merriweather&family=Montserrat:wght@900&display=swap");

body {
  @apply bg-gray-900 text-gray-100 font-normal;
  font-family: "Merriweather", serif;
}

header,
h1,
h2,
h3,
h4,
h5,
h6 {
  @apply font-black;
  font-family: "Montserrat", sans-serif;
}

header {
  @apply text-3xl mb-4 text-teal-300;
}

h1 {
  @apply text-2xl mb-4;
}

h2 {
  @apply text-xl my-4;
}

h3 {
  @apply text-lg my-3;
}

a {
  @apply text-teal-100;
}

a:hover {
  @apply text-teal-200;
}

.markdown blockquote {
  @apply -ml-8 mb-8;
}

.markdown ul {
  @apply list-disc mb-8;
  text-indent: 1.5em;
}

.markdown ul ul {
  @apply mb-0;
  text-indent: 3em;
}

.markdown ol {
  @apply list-decimal mb-8;
  text-indent: 1.5em;
}

Add fonts for headings and body.

Add fonts for headings and body.


body {
  background-color: #daad86;
  color: #312c32;
}

.deal {
  padding: 10px;
}

.deal-container {
  background-color: #feffff;
  border: 1px solid #312c32;
}

.deal-title {
  text-align: center;
  font-size: 1.0em;
}

.deal-image {
  padding: 10px;
  text-align: center;
}

.deal-image img {
  -webkit-box-shadow: 0px 5px 5px 0px rgba(49,44,50,1);
  -moz-box-shadow: 0px 5px 5px 0px rgba(49,44,50,1);
box-shadow: 0px 5px 5px 0px rgba(49,44,50,1);}

.vendor-name {
  text-align: center;
  background-color: #98dafc;
  color: #feffff;
  font-size: 1.5em;
}

body {
  background-color: #e8eaf6;
  color: #3f51b5;
}

.deal {
  padding: 10px;
}

.deal-container {
  background-color: #eee;
  border: 1px solid #3f51b5;
  -webkit-box-shadow: 0px 5px 10px 0px rgba(26,35,126,1);
  -moz-box-shadow: 0px 5px 10px 0px rgba(26,35,126,1);
  box-shadow: 0px 5px 10px 0px rgba(26,35,126,1);
}

.deal-title {
  text-align: center;
  font-size: 1.0em;
}

.deal-image {
  padding: 10px;
  text-align: center;
}

.deal-image img {
  -webkit-box-shadow: 0px 5px 5px 0px rgba(26,35,126,1);
  -moz-box-shadow: 0px 5px 5px 0px rgba(26,35,126,1);
  box-shadow: 0px 5px 5px 0px rgba(26,35,126,1);
}

.vendor-name {
  text-align: center;
  background-color: #3f51b5;
  color: #e8eaf6;
  font-size: 1.5em;
  padding: 10px 0;
}

.vendor-name a {
  color: #ffc107;
}

Switch to Indigo Material Design colors

Switch to Indigo Material Design colors


/* This is the original CSS, as applied to the pavpanchekha-com benchmark */

html { background-color: #f1f1f1;}
body { font-size: 18px; line-height: 1.333; text-rendering: optimizeLegibility; font-family: 'PT Serif', serif;}
pre { font-family: 'Open Sans Light', 'Inconsolata', 'Deja Vu Sans Mono', monospace; font-weight: 300;}
h1 { font-family: 'Open Sans Semibold', 'Deja Vu Sans', 'Georgia', sans; font-weight: 600;
     font-size: 24px; line-height: 1; letter-spacing: -.03em;}
p { text-align: justify; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;}

html { /*9*/
    margin: 0;
    padding: 0;
    color: #2e3436;
}

body { /*9*/
    padding: 0 .5em 5em;
    width: 35em;
    margin: 0 auto;
}

pre { /*8*/
    padding: .5em;
    margin: 1.2em 0 1.7em;
}

p { /*4*/
    margin: 1em 0;
}

h1 { /*5*/
    color: #555753;
    margin-top: 1.5em;
}

/* Total: 45 */

/* This is the original CSS, as applied to the pavpanchekha-com benchmark */
html { background-color: #f1f1f1;}
body { font-size: 18px; line-height: 1.333; text-rendering: optimizeLegibility; font-family: 'PT Serif', serif;}
pre { font-family: 'Open Sans Light', 'Inconsolata', 'Deja Vu Sans Mono', monospace; font-weight: 300;}
h1 { font-family: 'Open Sans Semibold', 'Deja Vu Sans', 'Georgia', sans; font-weight: 600;
     font-size: 24px; line-height: 1; letter-spacing: -.03em;}
p { text-align: justify; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;}
/* Competes with generated code */

html {
    margin: 0;
    padding: 0;
    color: #2e3436;
}
body {
    padding: 0 .5em 5em;
    width: 35em;
    margin: 0 auto;
}
pre {
    padding: .5em;
    margin: 1.2em 0 1.7em;
}
p {
    margin: 1em 0;
}
h1 {
    color: #555753;
    margin-top: 1.5em;
}

Make the master CSS file comparable

Make the master CSS file comparable


#web-debug-toolbar {
	position:absolute;
	top:0px;
	right:0px;
	width:100%;
	margin:3px;
}

#web-debug-toolbar a {
	color:#000;
	text-decoration:none;
}

#web-debug-toolbar a:visited {
	color:#000;
}

#web-debug-toolbar a:hover {
	color:#fff;
	background-color:#000;
}
#web-debug-toolbar .panel, #web-debug-toolbar .hidden-panel, #web-debug-toolbar .toolbar-toggle-panel {
	float:right;
	display:block;
	padding:2px;
	border:1px solid gray;
	border-collapse:collapse;
	background-color:white;
}

#web-debug-toolbar .hidden-panel {
	position:absolute;
	top:25px;
	right:0px;
	border:1px solid gray;
	background-color:white;
	max-height:900px;
	max-width:99%;
	overflow:auto;
}

#web-debug-toolbar {
	position:absolute;
	top:0px;
	right:0px;
	width:100%;
	margin:3px;
}

#web-debug-toolbar a {
	color:#000;
	text-decoration:none;
}

#web-debug-toolbar a:visited {
	color:#000;
}

#web-debug-toolbar a:hover {
	color:#fff;
	background-color:#000;
}
#web-debug-toolbar .panel, #web-debug-toolbar .hidden-panel, #web-debug-toolbar .toolbar-toggle-panel {
	float:right;
	display:block;
	padding:2px;
	border:1px solid gray;
	border-collapse:collapse;
	background-color:white;
}

#web-debug-toolbar .hidden-panel {
	position:absolute;
	top:25px;
	right:0px;
	border:1px solid gray;
	background-color:white;
	max-height:900px;
	width:99%;
	overflow:auto;
}

Set width of hidden-panel to 99%

Set width of hidden-panel to 99%


body {
    margin: 0;
}

.mainContainer {
    width: 100%;
    height: 100vh;
}

.joystick {
    text-align: center;
    position: relative;
}

.moveJoystick {
    background-color: lightblue;
}

.rotationJoystick {
    background-color: lightcoral;
}

@media screen and (orientation:landscape) {
    .moveJoystick {
        float: left;
        width: 35%;
        height: 100%;
    }

    .videoSegment {
        width: 30%;
        position: relative;
        height: auto;
    }

    .rotationJoystick {
        float: right;
        width: 35%;
        height: 100%;
    }
}

@media screen and (orientation:portrait) {
    .moveJoystick {
        width: 100%;
        height: 35%;
    }

    .videoSegment {
        width: 100%;
        position: relative;
        display: block;
        height: auto;
    }

    .rotationJoystick {
        width: 100%;
        height: 35%;
    }
}

body {
    margin: 0;
}

.mainContainer {
    width: 100%;
    height: 100vh;
}

.joystick {
    text-align: center;
    position: relative;
}

.moveJoystick {
    background-color: lightblue;
}

.rotationJoystick {
    background-color: lightcoral;
}

@media screen and (orientation:landscape) {
    .moveJoystick {
        float: left;
        width: 30%;
        height: 100%;
    }

    .videoSegment {
        width: 40%;
        position: relative;
        height: auto;
    }

    .rotationJoystick {
        float: right;
        width: 30%;
        height: 100%;
    }
}

@media screen and (orientation:portrait) {
    .moveJoystick {
        width: 100%;
        height: 35%;
    }

    .videoSegment {
        width: auto;
        position: relative;
        display: block;
        height: 30%;
    }

    .rotationJoystick {
        width: 100%;
        height: 35%;
    }
}

Update layout of video controller

Update layout of video controller


@CHARSET "UTF-8";
/*!
 * reactive-web-app
 * Changes to the original bootswatch "superhero"
*/
.panel {
  margin-bottom: 21px;
  background-color: #FFF;
  border: 1px solid transparent;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-body {
  padding: 15px;
  color: #333;
}
.panel-heading > span {
  display: inline;
  font-size: inherit;
}
.panel-heading > .lead {
  font-size: 20px;
  font-weight: bold;
}
.panel-default > .panel-heading {
  color: #333333;
  background-color: #f5f5f5;
  border-color: transparent;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: transparent;
}
.panel-default > .panel-heading .badge {
  color: #f5f5f5;
  background-color: #333333;
}

Add custom style for our app

Add custom style for our app


.dir_title,
.file_title {
    border-bottom: 1px solid black;
    display: inline-block;
}

.admin_panel {
    display: inline-block;
}
.error {
    padding: 5px;
    color: red;
}
nav {
    padding: 5px;
}

.grey {
    color: #777;
}

.item_list {
    width: 100%;
    list-style: none;
    padding: 0;
}

.item_list li a {
    padding: .6em;
    background-color: #f6f6f6;
    border: 1px solid #ddd;
    border-bottom: none;
    display: block;
    transition: none;
}

.item_list li a:last-child {
    border-bottom: 1px solid #ddd;
}

.item_list li a:hover {
    border-color: #aaa;
}

.admin_list {
    width: 100%;
    list-style: none;
}

.admin_list li {
    padding: .6em;
    background-color: #f6f6f6;
    border: 1px solid #ddd;
    display: block;
    transition: none;
}

li {
    line-height: 1.45em;
}

Add line-height to <li> too

Add line-height to <li> too


/*
Copyright 2015, 2016 OpenMarket Ltd

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.
*/

.mx_ViewSource pre {
    text-align: left;
    font-size: 12px;
    padding: 0.5em 1em 0.5em 1em;
    word-wrap: break-word;
}

/*
Copyright 2015, 2016 OpenMarket Ltd

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.
*/

.mx_ViewSource pre {
    text-align: left;
    font-size: 12px;
    padding: 0.5em 1em 0.5em 1em;
    word-wrap: break-word;
    white-space: pre-wrap;
}

Fix wrap on view source

Fix wrap on view source


#boxes {
  display: table;
  width: 100%;
}

.box-1 {
  margin: 0 0 0 200px;
}

.box-1 .blocks {
  width: 100%;
  float: left;
}

.box-2 {
  position: relative;
  float: left;
  width: 190px;
}

.box-3 {
  position: relative;
  display: table-footer-group;
  width: 100%;
}

#profile-activity ul,
#profile-network ul,
#profile-wall ul {
  width: 460px;
}
#profile-activity ul.comment-replies,
#profile-network ul.comment-replies,
#profile-wall ul.comment-replies {
  width: auto;
}

#boxes {
  display: table;
  width: 100%;
}

.box-1 {
  margin: 0 0 0 240px;
}

.box-1 .blocks {
  width: 100%;
  float: left;
}

.box-2 {
  position: relative;
  float: left;
  width: 190px;
}

.box-3 {
  position: relative;
  display: table-footer-group;
  width: 100%;
}

#profile-activity ul,
#profile-network ul,
#profile-wall ul {
  width: 460px;
}
#profile-activity ul.comment-replies,
#profile-network ul.comment-replies,
#profile-wall ul.comment-replies {
  width: auto;
}

Fix right margin of Box 1 from leftbottom template


/*
 * 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
 */

body {
    background-image: url("old_moon.png");
}

/*
 * 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
 */

body {
    background-image: url("/images/old_moon.png");
}

Change url of background image

Change url of background image


html {
background-color: white;
color: black;
}

body {
font-family: Helvetica;
color: black;}

header {
background: white;
color: black;
}

nav ul {
display: inline-block
float: right;
padding: 60px;
margin: 0;

}

nav li {
  display: inline-block;
  color: black;
  float: right;
  padding: 20px;
  margin: 0;
}

.center {
    margin: auto;
    width: 30%;
    padding: 30px;
    float: center;
}

}

a h1 h3 p hr {
color: black;
}

a:link {
color:black;
}

a:active{
color:black;
}

a:visited {
color:black;
}

a:hover {
color:black;
}

html {
background-color: white;
color: black;
}

body {
font-family: Helvetica;
color: black;}

header {
background: white;
color: black;
}

nav ul {
display: inline-block
float: right;
padding: 60px;
margin: 0;

}

nav li {
  display: inline-block;
  color: black;
  float: right;
  padding: 20px;
  margin: 0;
}

.center {
    margin: auto;
    width: 30%;
    padding: 30px;
    float: center;
}

}

a h1 h3 p hr {
color: black;
}

hr {
  width:60%;
}

a:link {
color:black;
}

a:active{
color:black;
}

a:visited {
color:black;
}

a:hover {
color:black;
}

Increase thickness of hr bar

Increase thickness of hr bar


.bar rect {
  fill: #7986CB;
  shape-rendering: crispEdges;
}

.bar.selected rect {
  fill: #3F51B5;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot circle  {
  fill: #2b8cbe;
}

.line {
  fill: none;
  stroke: #a6bddb;
  stroke-width: 3;
  shape-rendering: crispEdges;
}

.tooltip {
  position: absolute;
  text-align: center;
  padding: 5px;
  font: 12px sans-serif;
  background: #2b8cbe;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

.oc-free-energy {
  width: 100%;
  height: 100%;
}

.bar rect {
  fill: #7986CB;
  shape-rendering: crispEdges;
}

.bar.selected rect {
  fill: #FF3300;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot circle  {
  fill: #2b8cbe;
}

.line {
  fill: none;
  stroke: #a6bddb;
  stroke-width: 3;
  shape-rendering: crispEdges;
}

.tooltip {
  position: absolute;
  text-align: center;
  padding: 5px;
  font: 12px sans-serif;
  background: #2b8cbe;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

.oc-free-energy {
  width: 100%;
  height: 100%;
}

Change selected bar color to red

Change selected bar color to red


.react-rotating-text-cursor {
    animation: blinking-cursor 0.8s cubic-bezier(0.68, 0.01, 0.01, 0.99) 0s infinite;
}

@-moz-keyframes blinking-cursor {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes blinking-cursor {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes blinking-cursor {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes blinking-cursor {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

Add css for the blinking cursor

Add css for the blinking cursor


.win-metro-loading-indicator {
    width: 100%;
    position: relative;
    height: 4px;
    overflow: hidden;
}

.win-metro-loading-indicator .tick {
    border: 2px solid #ff0;
    position: absolute;
    left: 0px;
    width: 0px;
    animation: win-metro-li-tick-iteration 3s infinite cubic-bezier(0.350, 1.000, 0.650, 0.000);
    -webkit-animation: win-metro-li-tick-iteration 3s infinite cubic-bezier(0.350, 1.000, 0.650, 0.000);
}

.win-metro-loading-indicator .tick:nth-child(2) {
  -webkit-animation-delay: 100ms;
}
.win-metro-loading-indicator .tick:nth-child(3) {
  -webkit-animation-delay: 200ms;
}
.win-metro-loading-indicator .tick:nth-child(4) {
  -webkit-animation-delay: 300ms;
}
.win-metro-loading-indicator .tick:nth-child(5) {
  -webkit-animation-delay: 400ms;
}

@-webkit-keyframes win-metro-li-tick-iteration {
  0% { left: 0px; }

  100% { left: 100%; }
}
@keyframes win-metro-li-tick-iteration {
  0% { left: 0px; }

  100% { left: 100%; }
}

Add missing CSS file for win-metro LI

Add missing CSS file for win-metro LI


canvas#canvas
{
   border: 1px dotted #f06;
   margin-left: 100px;
}

div#output
{
   width: 250px;
   height: 150px;
   float: left;
   overflow-x: hidden;
   overflow-y: auto;
   background-color: #000;
   color: #fff;
}

canvas#canvas
{
   border: none;
   margin-left: 100px;
}

div#output
{
   width: 250px;
   height: 150px;
   float: left;
   overflow-x: hidden;
   overflow-y: auto;
   background-color: #000;
   color: #fff;
}

Remove red border from canvas

Remove red border from canvas


.dark {
    color: #cccccc;
    background-color: black;
}
.popover-content, .popover-title, .hosts-list {
    color: black;
}
.dark .panel {
    background-color: #232323;
}
.list-group .list-group-item {
    background-color: #232323;
}

.dark {
    color: #cccccc;
    background-color: #232323;
}
.popover-content, .popover-title, .hosts-list {
    color: black;
}
.dark .panel {
    background-color: #232323;
}
.list-group .list-group-item {
.dark .list-group-item {
    background-color: #232323;
    color: #cccccc;
}

Update dark theme CSS style for lists

Update dark theme CSS style for lists


html, body {
  height: 100%;
}
body, .box {
  display: flex;
  flex: 1;
  align-items: stretch;
  flex-flow: column;
  padding: 6px;
}
.box-title {
  font-weight: bold;
  font-size: 2em;
  flex: none;
}
.box-children {
  flex: 1;
  display: flex;
  flex-flow: column;
}
.new-child {
  flex: none;
}

html, body {
  height: 100%;
}
body, .box {
  display: flex;
  align-items: stretch;
  flex-flow: column;
  padding: 6px;
}
.box-title {
  font-weight: bold;
  font-size: 2em;
  flex: none;
}
.box-children {
  flex: 1;
  display: flex;
  flex-flow: column;
}
.new-child {
  flex: none;
}

Make boxes not fill space

Make boxes not fill space


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

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

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

This reverts commit a3a867a85119cc1145d8063849f3abee51bf7add.


@charset "utf-8";

@import "../bases/color";

.paint {
  background-color: #eeeeee;
  border: 1px solid;
  color: var(--primaryTextColor);

  &__canvasContainer {
    background-color: #bbbbbb;
    width: 100%;
    height: calc(100vh - 80px);
    overflow: scroll;
    position: relative;
  }

  &__canvas {
    width: 720px;
    height: 480px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  &__footer {
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 8px;
    @apply --primaryColorTheme;
  }
}

@charset "utf-8";

@import "../bases/color";

.paint {
  background-color: #eeeeee;
  border: 1px solid;
  color: var(--primaryTextColor);

  &__canvasContainer {
    background-color: #bbbbbb;
    width: 100%;
    height: calc(100vh - 80px);
    overflow: scroll;
    position: relative;
  }

  &__canvas {
    width: 720px;
    height: 480px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto auto 0;
  }

  &__footer {
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 8px;
    @apply --primaryColorTheme;
  }
}

Fix a bug to show an image for a big canvases


/*
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 * https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66
 * https://www.codementor.io/karaluton/a-beginner-s-guide-to-css-grid-j27g9uqys?utm_swu=7100
*/

header { grid-area: header }
main   { grid-area: main   }
aside  { grid-area: aside  }
footer { grid-area: footer }

body {
  display: grid;
  grid-template-areas:
    "header" "main" "aside" "footer"
}

@media ( orientation : landscape ) {
  body {
    grid-template-areas:
      "header header" "main aside" "footer footer";

    grid-template-columns: 70% 30%;
    grid-template-rows: 15vh 70vh  15vh
  }
}

/*
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 * https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66
*/

header { grid-area: header }
main   { grid-area: main   }
aside  { grid-area: aside  }
footer { grid-area: footer }

body {
  display: grid;
  grid-template-areas:
    "header" "main" "aside" "footer"
}

@media ( orientation : landscape ) {
  body {
    grid-template-areas:
      "header header" "main aside" "footer footer";

    grid-template-columns: 70% 30%;
    grid-template-rows: 15vh 70vh  15vh
  }
}

REmove comment for css grid link

REmove comment for css grid link


/* [XUL] Change the location bar color for secure sites */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#urlbar[pageproxystate="valid"] #identity-box.verifiedIdentity {
  background-color: #efe !important;
}

#urlbar[pageproxystate="valid"] #identity-box.verifiedDomain,
#urlbar[pageproxystate="valid"] #identity-box.mixedActiveBlocked:not(.verifiedIdentity) {
  background-color: #ffb !important;
}

#urlbar[pageproxystate="valid"] #identity-box.verifiedDomain::after,
#urlbar[pageproxystate="valid"] #identity-box.mixedActiveBlocked:not(.verifiedIdentity)::after {
  content: attr(tooltiptext);
  display: flex !important;
  color: #888 !important;
  padding: 0 2px !important;
}

#urlbar[pageproxystate="valid"] #identity-box.mixedDisplayContent,
#urlbar[pageproxystate="valid"] #identity-box.mixedDisplayContentLoadedActiveBlocked {
  background-color: #fdd !important;
}

/* [XUL] Change the location bar color for secure sites */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#urlbar[pageproxystate="valid"] #identity-box.verifiedIdentity {
  background-color: #efe !important;
}

#urlbar[pageproxystate="valid"] #identity-box.verifiedDomain,
#urlbar[pageproxystate="valid"] #identity-box.mixedActiveBlocked:not(.verifiedIdentity) {
  background-color: #ffb !important;
}

#urlbar[pageproxystate="valid"] #identity-icon-labels { visibility: visible !important; }

#urlbar[pageproxystate="valid"] #identity-box.verifiedDomain #identity-icon-labels::after,
#urlbar[pageproxystate="valid"] #identity-box.mixedActiveBlocked:not(.verifiedIdentity) #identity-icon-labels::after {
  content: attr(tooltiptext);
  display: flex !important;
  color: #888 !important;
  padding: 0 2px !important;
}

#urlbar[pageproxystate="valid"] #identity-box.mixedDisplayContent,
#urlbar[pageproxystate="valid"] #identity-box.mixedDisplayContentLoadedActiveBlocked {
  background-color: #fdd !important;
}

Fix the style does not work with Firefox 51


.featherlight-holder {
  position:fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.8);
}
.featherlight-holder:empty {
  display: none;
}
.featherlight {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
.featherlight:nth-last-of-type(2) {
  opacity: 0.3;
}
.featherlight:last-of-type {
  opacity: 1;
  background: none;
}

Fix for layered featherboxes fading (now looks much better)


html, body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: rgba(204, 204, 204, 0.1);
  font-family: Open sans, sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  overflow-wrap: break-word;
}

.text {
  width: 60%;
}

.text > * {
  max-width: 100%;
}

Make things not terribly ugly

Make things not terribly ugly


/*
 *= require_tree .
 *= require_self
*/

body {
  color: #333;
  background-color: #f9f9f9;
  font-size: 18px;
}

div.container {
  margin: 0 auto;
  width: 60%;
}

/*
 *= require_tree .
 *= require_self
*/

@import url(https://fonts.googleapis.com/css?family=Inconsolata);

body {
  color: #333;
  background-color: #f9f9f9;
  font-size: 18px;
}

div.container {
  margin: 0 auto;
  width: 60%;
}

code {
  font-family: 'Inconsolata';
  font-size: inherit;
}

Change code font to inconsolatas

Change code font to inconsolatas


html {
    scroll-behavior: smooth;
}

div.highlight {
    background-color: #f5f5f5;
}

.sig-name, .sig-paren {
    font-weight: bold;
}

.md-typeset code {
    padding: 0 0.3em;
}

pre.literal-block {
    padding: .525rem .6rem;
}

.md-typeset .admonition, .md-typeset .admonition-title {
    font-size: 0.64rem
}

@media only screen and (min-width: 88.25em) {
    .md-grid {
        max-width: 61rem;
    }

    .md-sidebar--secondary {
        margin-left: 61rem;
    }
}

html {
    scroll-behavior: smooth;
}

div.highlight {
    background-color: #f5f5f5;
}

.sig-name, .sig-paren {
    font-weight: bold;
}

.md-typeset code {
    padding: 0 0.3em;
}

pre.literal-block {
    padding: .525rem .6rem;
}

.md-nav code {
    font-size: smaller;
}

.md-typeset .admonition, .md-typeset .admonition-title {
    font-size: 0.64rem
}

@media only screen and (min-width: 88.25em) {
    .md-grid {
        max-width: 61rem;
    }

    .md-sidebar--secondary {
        margin-left: 61rem;
    }
}

Adjust code font size for contents navigation


/**
 * Ideally use import as below, but currently encounters build issues,
 * and inability to install as NPM package due to missing package version number.
 * @import 'eLife-pattern-library/assets/sass/build.scss';
 * due to the above issues we import and inline the built CSS file from the web
 */
@import 'https://elifesciences.org/assets/patterns/css/all.02fbc2c8.css';

/**
 * Ensure fonts still resolve when not viewed on ELife website
 * This could potentially be extracted into a separate file, for more granular imports
 */
@import '../../fonts/notoSerif/notoSerif.css';
@import '../../fonts/notoSans/notoSans.css';

/* stylelint-disable xi/selector-pattern */
main {
  @extend .wrapper;
}
/* stylelint-enable */

:--Article {
  @extend .wrapper;
  @extend .content-container;
  @extend .grid__item;

  float: none;

  @extend .one-whole;
  @extend .large--eight-twelfths;
  @extend .x-large--seven-twelfths;
  @extend .grid-column;
}

:--Article :--authors {
  @extend .content-header__author_list;

  :--Person {
    @extend .content-header__author_list_item;
  }
}

/* Chain custom MicroData selectors for style adjustments as needed */
:--Article :--affiliations {
  display: inline;
  padding: 0;
}

/**
 * Ideally use import as below, but currently encounters build issues,
 * and inability to install as NPM package due to missing package version number.
 * @import 'eLife-pattern-library/assets/sass/build.scss';
 * due to the above issues we import and inline the built CSS file from the web
 */
@import 'https://elifesciences.org/assets/patterns/css/all.02fbc2c8.css';

/**
 * Ensure fonts still resolve when not viewed on ELife website
 * This could potentially be extracted into a separate file, for more granular imports
 */
@import '../../fonts/notoSerif/notoSerif.css';
@import '../../fonts/notoSans/notoSans.css';

@import '../../extensions/person/styles.css';

/* stylelint-disable xi/selector-pattern */
main {
  @extend .wrapper;
}
/* stylelint-enable */

:--Article {
  @extend .wrapper;
  @extend .content-container;
  @extend .grid__item;

  float: none;

  @extend .one-whole;
  @extend .large--eight-twelfths;
  @extend .x-large--seven-twelfths;
  @extend .grid-column;
}

:--Article :--authors {
  @extend .content-header__author_list;

  :--Person {
    @extend .content-header__author_list_item;
  }
}

/* Chain custom MicroData selectors for style adjustments as needed */
:--Article :--affiliations {
  display: inline;
  padding: 0;
}

Use Person extension to style authors

feat(Elife): Use Person extension to style authors


/*
  Licensed to the Apache Software Foundation (ASF) under one
  or more contributor license agreements.  See the NOTICE file
  distributed with this work for additional information
  regarding copyright ownership.  The ASF licenses this file
  to you under the Apache License, Version 2.0 (the
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing,
  software distributed under the License is distributed on an
  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  KIND, either express or implied.  See the License for the
  specific language governing permissions and limitations
  under the License.
*/
footer {
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 12pt;
	padding: 5px 10px;
	text-align:justify;
	border: thin solid #D0D0D0;
	background-color: #F8F8F8;
	color: #404040;
}

Tidy up footer with long trademark disclaimer

git-svn-id: 58702fe1ff5294ea29773cbe6445e6edf216c548@1364398 13f79535-47bb-0310-9956-ffa450edef68


.Floor {
    background: #44f;
}

.Wall {
    background: #006;
    box-shadow: inset 0 0 24px #003;
}

.FloorCorruption {
    background: #4a4;
}

.WallCorruption {
    background: #050;
    box-shadow: inset 0 0 24px #030;
}

.StairUp {
    background: #44f;
}

.StairUp:after {
    content: '<';
}

.StairDown {
    background: #44f;
}

.StairDown:after {
    content: '>';
}

.Floor {
    background: #44f;
}

.Wall {
    background: #006;
    box-shadow: inset 0 0 24px #003;
}

.FloorCorruption {
    background: #4a4;
    z-index: 1;
    box-shadow: 0 0 4px #0c0;
}

.WallCorruption {
    background: #050;
    box-shadow: inset 0 0 24px #030;
}

.StairUp {
    background: #44f;
}

.StairUp:after {
    content: '<';
}

.StairDown {
    background: #44f;
}

.StairDown:after {
    content: '>';
}

Add a glow to the floor.

Add a glow to the floor.


/**
 * This file should get overwritten if Method 1 is used. If Method 2 is chosen,
 * remove this comment and start adding your styles to this file.
 */

/* @override http://local.paraentender.com/sites/paraentender.com/themes/paraum/css/style.css?na95ok */

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic|Roboto+Slab);

body,
h1.page-header {
  font-family: 'Roboto Slab', serif;
}

div.profile,
div.content {
  font-family: 'Source Sans Pro', serif;
  font-size: 1.2em;
  line-height: 1.6em;
}

div.content p {
  margin: 0 0 1.2em 0;
}

#block-search-form {
  width: 250px;
  padding-top: 3px;
}

ol.breadcrumb {
  text-transform: lowercase;
}

body.page-user div.profile div.field.field-name-field-name {
  font-weight: 600;
}

body.page-user div.profile div.field.field-name-field-url {
  color: green;
}

body.page-user div.profile div.field.field-name-field-about {
  margin-top: 20px;
}

body.front h1.page-header {
  display: none;
}

/** Links **/

ol.breadcrumb a,
section#block-menu-menu-entenda a,
div.content a,
div.submitted a {
  color: #4c8295;
  text-decoration: underline;
}

ol.breadcrumb a:hover,
section#block-menu-menu-entenda a:hover,
div.content a:hover,
div.submitted a:hover {
  color: #5a9bb2;
  text-decoration: underline;
}

section#block-menu-menu-entenda h2.block-title {
  font-family: 'Roboto Slab', serif;
  font-size: 1.6em;
}

Implement basic styling of 'paraum' theme


.CodeMirror-hints {
  position: absolute;
  z-index: 10;
  border : double rgb(212, 208, 200) 3px;
  max-height: 200px;
  max-width: 400px;
  min-width: 400px;
  overflow: auto;
  background: white;
  font-family: Tahoma;
  font-size: 12px;
  padding: 0px;
}

.CodeMirror-hint {
  margin: 0px;
  padding: 0px;
  border: 0px solid transparent;
  list-style-type: none;
  cursor: pointer;
  white-space: nowrap;
}

.CodeMirror-hint-active {
  color: white!important;
  background-color: rgb(10,36,106) !important;
}

.CodeMirror-hints {
  position: absolute;
  z-index: 10;
  border : double rgb(212, 208, 200) 3px;
  max-height: 200px;
  max-width: 400px;
  min-width: 400px;
  overflow: auto;
  background: white;
  font-family: Tahoma;
  font-size: 12px;
  padding: 0px;
}

.CodeMirror-hint {
  margin: 0px;
  padding: 0px;
  border: 0px solid transparent;
  list-style-type: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  clear: left;
  float: left;
}

.CodeMirror-hint-active {
  color: white!important;
  background-color: rgb(10,36,106) !important;
}

Make hint templates with longer text readable

Longer template descriptions were not readable when selected, because the text,
when vertically scrolled, was white on white background. Change items to have
float left and use `inline-block` display to prevent that.


table.board {
    width: 20%;
    height: 420px;
    boarder-collapse: separate;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    vertical-align: middle;
    table-layout: fixed;
}

table, th, td {
   border: 1px solid black;
}

td {
    width: 55px;
    height: 55px;
}

/* table.board { */
/*     width: 20%; */
/*     height: 420px; */
/*     boarder-collapse: separate; */
/*     background-size: contain; */
/*     background-repeat: no-repeat; */
/*     text-align: center; */
/*     vertical-align: middle; */
/*     table-layout: fixed; */
/* } */

/* table, th, td { */
/*    border: 1px solid black; */
/* } */

/* td { */
/*     width: 55px; */
/*     height: 55px; */
/* } */

Comment out all css written by me.

Comment out all css written by me.

* Raise `Module parse failed: xxxx. You may need an appropriate loader
  to handle this file type.` error.
   * Does not undestand this error.


.modules-task-DashboardPlannedTasksInfos p{
	margin-bottom: 5px;
}
.modules-task-DashboardPlannedTasksInfos table{
	width: 100%;
}
.modules-task-DashboardPlannedTasksInfos th{
	font-weight: bold;
}
.modules-task-DashboardPlannedTasksInfos td{
	padding: 2px 5px;
}
.modules-task-DashboardPlannedTasksInfos tbody tr:nth-child(odd){
	background-color: whitesmoke;
}
.modules-task-DashboardPlannedTasksInfos tbody tr:hover{
	background-color: #ddd;
}
.modules-task-DashboardPlannedTasksInfos .contextual-action{
	display: inline-block;
	min-height: 16px;
	margin-left: 10px;
	cursor: pointer;
	visibility: hidden;
}
.modules-task-DashboardPlannedTasksInfos tr:hover .contextual-action{
	visibility: visible;
}
.modules-task-DashboardPlannedTasksInfos .error-tasks{
	margin-bottom: 15px;
}
.modules-task-DashboardPlannedTasksInfos .error-tasks tbody{
	color: red;
}

.modules-task-DashboardPlannedTasksInfos p{
	margin-bottom: 5px;
}
.modules-task-DashboardPlannedTasksInfos table{
	width: 100%;
}
.modules-task-DashboardPlannedTasksInfos th{
	font-weight: bold;
}
.modules-task-DashboardPlannedTasksInfos td{
	padding: 2px 5px;
}
.modules-task-DashboardPlannedTasksInfos tbody tr:nth-child(odd){
	background-color: whitesmoke;
}
.modules-task-DashboardPlannedTasksInfos tbody tr:hover{
	background-color: #ddd;
}
.modules-task-DashboardPlannedTasksInfos .error-tasks{
	margin-bottom: 15px;
}
.modules-task-DashboardPlannedTasksInfos .error-tasks tbody{
	color: red;
}

[UPDATE] Update style to be conform with the new Dashbord style


/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#simplels-button {
    list-style-image: url("chrome://simplels/skin/button.png");
}
toolbar[iconsize="small"] #simplels-button {
    list-style-image: url("chrome://simplels/skin/button-small.png");
}

/* Fix "absurd" default layout for the toolbar button (Firefox only) */
#main-window #simplels-button {
    -moz-box-orient: horizontal;
}

/* Slight ajust of the text padding in the toolbar button, such as Thunderbird
 * does (Firefox only) */
#main-window toolbar[mode="full"] #simplels-button .toolbarbutton-text {
    -moz-padding-start: 2px;
}

#simplels-button-tooltip {
    max-width: none;
}

#simplels-tooltip-title {
    margin-bottom: 0.7em;
}

#simplels-tooltip-selected-about {
    font-style: italic;
}

#simplels-button-tooltip[conflicting="false"] #simplels-tooltip-selected,
#simplels-tooltip-current,
.simplels-locale[current="true"] {
    font-weight: bold;
}

/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#simplels-button {
    list-style-image: url("chrome://simplels/skin/button.png");
}
toolbar[iconsize="small"] #simplels-button {
    list-style-image: url("chrome://simplels/skin/button-small.png");
}

/* Improve the absurd default layout of the toolbar button (Firefox only) */
#main-window #simplels-button {
    -moz-box-orient: horizontal;
}
#main-window toolbar[mode="full"] #simplels-button {
    -moz-binding: url(
        "chrome://global/content/bindings/toolbarbutton.xml#menu-vertical");
}

#simplels-button-tooltip {
    max-width: none;
}

#simplels-tooltip-title {
    margin-bottom: 0.7em;
}

#simplels-tooltip-selected-about {
    font-style: italic;
}

#simplels-button-tooltip[conflicting="false"] #simplels-tooltip-selected,
#simplels-tooltip-current,
.simplels-locale[current="true"] {
    font-weight: bold;
}

Improve the presentation of the toolbar button in icon+text mode


* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
#map {
  height: 100%;
  width: 100%;
}

.ng-scope {
  height: 100%;
}

nav {
  background-color: black;
}

.btn-floating.btn-large {
  width: 500px;
  height: 500px;
  display: block;
}

.botNav {
  position: absolute;
  bottom: 0;
  left: 0;
  top:92%;
  width: 100%;
  background-color: black;
  text-align: center;
}

.botLink {
  display: inline-block;
  color: white;
  font-size: 24pt;
}

.cancel {
  position: relative;
  float: left;
  left: 1%;
}

.time {
  position: absolute;
  float: right;
  right: 1%;
}

* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
#map {
  height: 100%;
  width: 100%;
}

.ng-scope {
  height: 100%;
}

nav {
  background-color: black;
}

.btn-floating.btn-large {
  width: 500px;
  height: 500px;
  display: block;
  vertical-align: middle;
  line-height: 550px;
  margin: 0 auto;
}

.btn-large i {
  font-size: 6em;
}

.botNav {
  position: absolute;
  bottom: 0;
  left: 0;
  top:92%;
  width: 100%;
  background-color: black;
  text-align: center;
}

.botLink {
  display: inline-block;
  color: white;
  font-size: 24pt;
}

.cancel {
  position: relative;
  float: left;
  left: 1%;
}

.time {
  position: absolute;
  float: right;
  right: 1%;
}

Increase icon size, center button

Increase icon size, center button


body {
	background-color: #eee;
    margin:15pt;
}

h1 {
    margin-top:1em;
}

h3 {
    margin-top:1.25em;
}

body, p, ol, ul, td {
	font-family: sans-serif;
}

div.content {
    padding:0pt 15pt 15pt 15pt;
	background-color: #fff;
    border: 1px solid #bbb;
}

img.logo {
    float:left;
    margin-top:0.3em;
    margin-right: 1em;
}

img.tool_palette {
	float:left;
	padding-right:1em;
	margin-top:-0.3em;
}

img.tool_header {
	float:left;
	padding-right:0.5em;
	margin-top:-2pt;
	margin-left:-2pt;
}

img.tool_inline {
	float:left;
	padding-right:0.5em;
}

img.color_inline {
	float:left;
	padding-right:0.5em;
    margin-top:0.25em;
}

img.undo_inline {
	float:left;
	padding-right:1.0em;
    margin-top:-0.2em;
}

div.example {
    text-align:center;
}

body {
	background-color: #eee;
    margin:10pt;
}

h1 {
    margin-top:1em;
}

h3 {
    margin-top:1.25em;
}

body, p, ol, ul, td {
	font-family: sans-serif;
}

div.content {
    padding:0pt 15pt 15pt 15pt;
	background-color: #fff;
    border: 1px solid #bbb;
}

img.logo {
    float:left;
    margin-top:0.3em;
    margin-right: 1em;
}

img.tool_palette {
	float:left;
	padding-right:1em;
	margin-top:-0.3em;
}

img.tool_header {
	float:left;
	padding-right:0.5em;
	margin-top:-2pt;
	margin-left:-2pt;
}

img.tool_inline {
	float:left;
	padding-right:0.5em;
}

img.color_inline {
	float:left;
	padding-right:0.5em;
    margin-top:0.25em;
}

img.undo_inline {
	float:left;
	padding-right:1.0em;
    margin-top:-0.2em;
}

div.example {
    text-align:center;
}

Reduce body margin in help.

Reduce body margin in help.


.pk-sidebar-tab {
  flex-shrink: 0;
  height: 44px;
  padding: 8px;
  padding-top: 11px;
  white-space: nowrap;
}

.pk-sidebar-tab:hover {
  cursor: pointer;
  padding: 8px;
  padding-top: 11px;
  white-space: nowrap;
}

.pk-sidebar-tab-icon {
  font-size: 20px;
  float: left;
  text-align: center;
  width: 24px;
}

.pk-sidebar-tab-label {
  padding-left: 32px;
  padding-top: 2px;
}

.pk-sidebar-tab.ng-hide:not(.ng-hide-animate) {
  /*
   * Ensure there's always enough room to fit the largest-used label
   * currently this is "Data Results" which is longer than "Dashboard".
   * This avoids unsightly relayout when showing/hiding labels.
   *
   * The default ng-hide behavior uses "display: none !important" which
   * doesn't reserve space for elements. Use "visibility: hidden" instead
   * which does reserve space, and set height and vertical padding to 0 so
   * that hidden tabs don't take up vertical space.
   */
  display: inline-block !important;
  height: 0;
  padding-bottom: 0;
  padding-top: 0;
  visibility: hidden;
}

Update styling to fix jank and eliminate empty tabs.


#projects li, #domains li, #daemons li {
    list-style: none;
}

#projects li.selected, #domains li.selected, #daemons li.selected {
    font-weight: bold;
}

Adjust selected style when modify project, domain or daemon


table.stackdoc {
	border-width: 0px;
}

table.stackdoc td {
	border-width: 0px;
	vertical-align: top;
	padding-bottom: 5px;
}

table.stackdoc span.sd_score {
	padding-left: 3px;
	padding-right: 3px;
	margin-right: 2px;
	border: 1px solid #a0a2a7;
	float: left;
}

table.stackdoc td.stackdoc-question-title {
	padding-top: 2px;
}

table.stackdoc span.sd_score.sd_accepted {
	border-color: green;
}

#stackdoc-title {
	color: #5D5D5D;
	margin-left: 13px;
}

#stackdoc-title.clickable {
	cursor: pointer;
}

#stackdoc-title.clickable:hover {
	cursor: pointer;
	text-decoration: underline;
}

table.stackdoc {
	border-width: 0px;
}

table.stackdoc td {
	border-width: 0px;
	vertical-align: top;
	padding-bottom: 5px;
}

table.stackdoc span.sd_score {
	padding-left: 3px;
	padding-right: 3px;
	margin-right: 2px;
	border: 1px solid #a0a2a7;
	float: left;
}

table.stackdoc td.stackdoc-question-title {
	padding-top: 2px;
	padding-left: 4px;
}

table.stackdoc span.sd_score.sd_accepted {
	border-color: green;
}

#stackdoc-title {
	color: #5D5D5D;
	margin-left: 13px;
}

#stackdoc-title.clickable {
	cursor: pointer;
}

#stackdoc-title.clickable:hover {
	cursor: pointer;
	text-decoration: underline;
}

Add a little extra padding to question display.


@value c-magenta, c-base03 from '../../colors.css';

.powerButton {
  composes: emphasized-text-bg-colors from '../../colors.css';
  display: inline-block;
  border: none;
  padding: 0.5rem;
  margin: 0;
  text-decoration: none;
  font-size: 1em;
  width: 3em;
  height: 3em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid c-magenta;
  border-radius: 100%;

  transition: background 250ms ease-in-out,
              transform 150ms ease;
}

.powerButton path {
  fill: c-magenta;
  transition: fill 250ms ease-in-out;
}

.powerButton:hover, .powerButton:focus {
  background: c-magenta;
}

.powerButton:hover path, .powerButton:focus path {
  fill: c-base03;
}

.powerButton:active {
  transform: scale(0.95);
}

@value c-magenta, c-base03 from '../../colors.css';

.powerButton {
  composes: emphasized-text-bg-colors from '../../colors.css';
  display: inline-block;
  border: none;
  padding: 0.5rem;
  margin: 0;
  text-decoration: none;
  font-size: 1em;
  width: 3em;
  height: 3em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid c-magenta;
  border-radius: 100%;

  transition: background 250ms ease-in-out,
              transform 150ms ease;
}

.powerButton path {
  fill: c-magenta;
  transition: fill 250ms ease-in-out;
}

.powerButton svg {
  height: 100%;
  width: 100%;
}

.powerButton:hover, .powerButton:focus {
  background: c-magenta;
}

.powerButton:hover path, .powerButton:focus path {
  fill: c-base03;
}

.powerButton:active {
  transform: scale(0.95);
}

Fix power button svg icon's size

Fix power button svg icon's size

On the Raspberry Pi it was rendering as 0px by 0px. We need to force the
svg to fill its container by using height: 100% and width: 100% in CSS.


*{

}

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

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

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

.sidebar{
	width: 200px;
	float: right;
	min-height: 400 px;
}

.footer{
	clear: both;
	height: 40px;
	text-align: center;
	padding: 10px;
}

*{
	margin: 0;
}

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

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

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

.sidebar{
	width: 200px;
	float: right;
	min-height: 400 px;
}

.footer{
	clear: both;
	height: 40px;
	text-align: center;
	padding: 10px;
}

Set margin to 0 for whole page

Set margin to 0 for whole page


#container {
	background-color: black;
	border: 1px solid black;
	width: 320px;
	height: 320px;
}

.text-frame {
	position: relative;
	width: 318px;
	top: 0em;
	height: 0em;
	transition: top .3s, height .3s, visibility .3s;

	display: flex;
	flex-direction: column;
	overflow: none;

	border-style: solid;
	border-width: 2px;
	background: white;
}

.text-frame.in {
	top: -2.7em;
	height: 2.7em;
	border-radius: 4px 4px 0 0;
	transition: top .3s, height .3s, visibility 0s;
}

.text-message {
	font-family: Lato;
	margin: 2px 14px 0 4px;
	visibility: hidden;
}

.text-frame.in>.text-message {
	visibility: visible;
	transition: visibility .3s step-end;
}

#text-indicator {
	position: relative;
	margin-left: auto;
	right: 4px;
	top: -1em;
	visibility: hidden;
}

.text-frame.in>#text-indicator {
	visibility: visible;
	transition: visibility .3s step-end;
}

#container {
	background-color: black;
	border: 1px solid black;
	width: 320px;
	height: 320px;
}

.text-frame {
	position: relative;
	width: 318px;
	top: 0em;
	height: 0em;
	transition: top .3s, height .3s, visibility .3s;

	display: flex;
	flex-direction: column;
	overflow: none;

	border-style: solid;
	border-width: 2px;
	background: white;
}

.text-frame.in {
	top: -2.7em;
	height: 2.7em;
	border-radius: 4px 4px 0 0;
	transition: top .3s, height .3s, visibility 0s;
}

.text-message {
	font-family: Lato;
	margin: 2px 14px 0 4px;
	visibility: hidden;
}

.text-frame.in>.text-message {
	visibility: visible;
	transition: visibility .3s step-end;
}

#text-indicator {
	position: relative;
	margin-left: auto;
	right: 4px;
	top: -1em;
	visibility: hidden;
}

#text-indicator.in {
	visibility: visible;
	transition: visibility .3s step-end;
	animation: blinking 1.5s linear infinite;
}

@keyframes blinking {
	50% { opacity: 0; }
}

Update more text indicator to be more helpful


@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

div.smart-padding {
    padding: 20px;
}

div.smart-padding-without-bottom {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.ng2-smart-row:hover {
    background-color: rgba(29, 202, 27, 0.2);
}

.CodeMirror-merge-r-chunk {
    background-color: rgba(255, 255, 5, 0.5);
}
.CodeMirror-merge-r-chunk-start {
    background-color: rgba(255, 255, 5, 0.5);
}
.CodeMirror-merge-r-chunk-end {
    background-color: rgba(255, 255, 5, 0.5);
}
.CodeMirror-linebackground {
    background-color: rgba(255, 255, 5, 0.5);
}

.CodeMirror-merge-r-connect {
    fill: rgba(255, 255, 5, 0.5);
    stroke: rgba(255, 255, 5, 0.5);
    stroke-width: 1px;
}

.CodeMirror-merge-r-inserted,
.CodeMirror-merge-l-inserted,
.CodeMirror-merge-r-deleted,
.CodeMirror-merge-l-deleted  {
    font-weight: bold;
}

Improve visibility of diff viewer

:arrow_upper_right: Improve visibility of diff viewer