@import '../essentials.css';
@import 'blog-previews.css';
@import 'name-top.css';
@import 'nav.css';

.intro {
  background: var(--intro-background);
  height: 100vh;
  max-height: 10in;
  width: 100vw;
  padding: 0;
  margin: 0;
  text-align: center; /* This centers the <img class="portrait"> */
}
.intro .portrait {
  display: none;
}

@media (--three-piece-viewport) {
  .intro .portrait {
    display: block;
    height: 34%;
    margin: 0 auto;
    border-radius: 5vmin;
  }
}

@media (--two-sided-viewport) {
  body {
    display: flex;
    overflow-y: scroll;
    align-items: center;
    justify-content: center;
  }
  .intro {
    width: 50vw;
    max-width: 8.5in;
  }
  .blog {
    width: 50vw;
    max-width: 8.5in;
    min-height: 0;
    height: 100vh;
    max-height: 10in;
  }
}

@media (--extra-wide-viewport) {
  body {
    background: #6A90BD;
  }
}
@media (--extra-long-viewport) {
  body {
    background: #6A90BD;
  }
}

Set a specific background for extra large views

THIS COLOR IS SO UGLY AAASLKDJAL:SKDJAS:LKFJ IDK WHAT TO DO


body {
  background:#f5f1e8 url("/img/bg-gradient-sand.png") repeat-x;
  background:url("../images/bg-gradient-sand.png") repeat-x,url("/img/bg-sand.png") repeat,#f5f1e8;
  font-family: 'Fira Sans', 'Open Sans', sans-serif !important;
}

.title {
  font-family: 'Zilla Slab', Courier, serif;
}

#mozilla-india-wordmark {
  font-family: 'Zilla Slab Highlight', Courier, serif;
  font-size: 1.16rem;
  font-variant: bold;
  font-weight: 700;
  letter-spacing: 1px;
  background: black;
  color: white;
}

.iconed-list .icon img {
  max-height:16px;
}

.iconed-list .icon img#blog-image {
  max-height: 24px;
}

.footer {
  margin-top: 20px;
}

body {
  background: #f5f1e8 url('/img/bg-gradient-sand.png') repeat-x;
  background: url('../images/bg-gradient-sand.png') repeat-x, #f5f1e8;
  font-family: 'Fira Sans', 'Open Sans', sans-serif !important;
}

.title {
  font-family: 'Zilla Slab', Courier, serif;
}

#mozilla-india-wordmark {
  font-family: 'Zilla Slab Highlight', Courier, serif;
  font-size: 1.16rem;
  font-variant: bold;
  font-weight: 700;
  letter-spacing: 1px;
  background: black;
  color: white;
}

.iconed-list .icon img {
  max-height: 16px;
}

.iconed-list .icon img#blog-image {
  max-height: 24px;
}

.footer {
  margin-top: 20px;
}

Remove `bg-sand.png` from background stack

The code was introduce in
https://github.com/MozillaIndia/mozillaindia.github.io/commit/df89e62646
21567d3f379a1d29e153bb5123fd46 but the file was not committed with it,
which led to error 404. The code is not required and should be removed.


.team-title {
    margin: 0 0 0 38px;
    padding: 0 0 11px;
    position: relative;
}

.board-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
}

.board-list-item {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 1pc 8px 0;
    position: relative;
    width: 25%;
}

.board-tile {
    background-color: rgb(0, 121, 191);
    background-size: cover;
    background-position: center center;
    border-radius: 3px;
    color: #fff;
    display: block;
    line-height: 20px;
    margin-bottom: 8px;
    padding: 8px 9pt;
    position: relative;
    text-decoration: none;
    min-height: 60px;
}

.list-wrapper {
    width: 270px;
    margin: 0 5px;
    height: 100%;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
}

.team-title {
    margin: 0 0 0 38px;
    padding: 0 0 11px;
    position: relative;
}

.board-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
}

.board-list-item {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 1pc 8px 0;
    position: relative;
    width: 25%;
}

.board-tile {
    background-color: rgb(0, 121, 191);
    background-size: cover;
    background-position: center center;
    border-radius: 3px;
    color: #fff;
    display: block;
    line-height: 20px;
    margin-bottom: 8px;
    padding: 8px 9pt;
    position: relative;
    text-decoration: none;
    min-height: 60px;
}
.board-tile:hover {
    cursor: pointer;
    opacity: 0.8;
}

.list-wrapper {
    width: 270px;
    margin: 0 5px;
    height: 100%;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
}

Add css on the tile of board to make them look clickable


#filter-select-div {
  padding: 0px;
}

#calendar-filter {
  width: 100px;
  height: 2.4em;
}

.fc-view, .fc-view>table {
  height: 70vh;
}

Add height styling for calendar so it fits in the page


/* See license.txt for terms of usage */

/******************************************************************************/
/* Markup View */

.theme-firebug .kind-jQuery .cm-variable {
  color: #4B0082;
}

.fireQueryData,
.kind-jQuery .data {
  font-size: 11px;
  margin-left: 2px;
  cursor: pointer;
}

/******************************************************************************/
/* Toolbox Tooltip */

.theme-tooltip-panel .panel-arrowcontent {
  padding: 0;
}

/******************************************************************************/
/* Light & Dark Themes */

.theme-light .fireQueryData,
.theme-light .kind-jQuery .data,
.theme-dark .fireQueryData,
.theme-dark .kind-jQuery .data {
  color: var(--theme-highlight-pink);
}

.theme-firebug .fireQueryData,
.theme-firebug .kind-jQuery .data {
  color: #4B0082;
}

/* See license.txt for terms of usage */

/******************************************************************************/
/* Markup View */

.theme-firebug .kind-jQuery .cm-variable {
  color: #4B0082;
}

.fireQueryData,
.kind-jQuery .data {
  font-size: 11px;
  margin-left: 2px;
  cursor: pointer;
}

/******************************************************************************/
/* Toolbox Tooltip */

/* Use !important to overload rules with theme prefixes */
.theme-tooltip-panel .panel-arrowcontent {
  padding: 0 !important;
}

/******************************************************************************/
/* Light & Dark Themes */

.theme-light .fireQueryData,
.theme-light .kind-jQuery .data,
.theme-dark .fireQueryData,
.theme-dark .kind-jQuery .data {
  color: var(--theme-highlight-pink);
}

.theme-firebug .fireQueryData,
.theme-firebug .kind-jQuery .data {
  color: #4B0082;
}

Fix CSS for Toolbox tooltip

Fix CSS for Toolbox tooltip


@import "./declarations.css";
@import "./fonts.css";

html {
  font-family: var(--font-standard);
}

@import "./declarations.css";
@import "./fonts.css";

html,
input,
button {
  font-family: var(--font-standard);
}

Add input and button to default font selector


/*
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_RoomTooltip {
    display: none;
    position: fixed;
    border: 1px solid #a4a4a4;
    border-radius: 8px;
    background-color: #fff;
    z-index: 1000;
    left: 64px;
    padding: 6px;
}

.mx_RoomTooltip_chevron {
    position: absolute;
    left: -9px;
    top: 8px;
}

/*
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_RoomTooltip_chevron {
    position: absolute;
    left: -9px;
    top: 7px;
}

.mx_RoomTooltip {
    display: none;
    position: fixed;
    border: 1px solid #a4a4a4;
    border-radius: 8px;
    background-color: #fff;
    z-index: 2000;
    left: 64px;
    padding: 6px;
}

Tweak to z-index as the tooltip was occasionally getting occluded.


/* Highlight interlanguage links for Wikipedia */
@namespace url("http://www.w3.org/1999/xhtml");

@-moz-document domain("wikipedia.org") {
  #p-lang :is(.interwiki-en, .interwiki-ja) a {
    color: #fff !important;
    font: 1.2rem/1 sans-serif !important;
    text-align: center !important;
    text-decoration: none !important;
    padding: 0.5rem !important;
    background: #fa0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 11rem !important;
    display: block !important;
    width: 32rem !important;
    border-radius: 0 0 0.5rem 0.5rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 255 !important;
  }
  #p-lang :is(.interwiki-en, .interwiki-ja) a::after {
    content: " \bb\a0 " attr(title);
  }
  #p-lang :is(.interwiki-en, .interwiki-ja) a:hover {
    background: #f70 !important;
  }

  :target {
    font-weight: bold !important;
    position: relative !important;
  }
  :target::before, :target::after {
    content: 'x';
    display: block;
    top: -2.4rem;
    position: absolute;
    visibility: hidden;
  }
}

/* Highlight interlanguage links for Wikipedia */
@namespace url("http://www.w3.org/1999/xhtml");

@-moz-document domain("wikipedia.org") {
  #p-lang :is(.interwiki-en, .interwiki-ja) a {
    color: #fff !important;
    font: 1.2rem/1 sans-serif !important;
    text-align: center !important;
    text-decoration: none !important;
    padding: 0.5rem !important;
    background: #fa0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 11rem !important;
    display: block !important;
    width: 32rem !important;
    border-radius: 0 0 0.5rem 0.5rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 255 !important;
  }
  #p-lang :is(.interwiki-en, .interwiki-ja) a::after {
    content: " \bb\a0 " attr(title);
  }
  #p-lang :is(.interwiki-en, .interwiki-ja) a:hover {
    background: #f70 !important;
  }

  :target {
    font-weight: bold !important;
    background-color: moccasin !important;
  }
}

Drop the tweak to avoid inter-language link overlaps in-page anchors

It is not work well and useless...


.page-header h1 {
  padding-top: 55px;
  margin-top: -55px;
}

#sidebar li {
  border-left: 4px #fff solid;
}

#sidebar li.active {
  border-left: 4px #eee solid;
}

#sidebar li a {
  padding: 5px 15px;
}

@media (min-width: 979px) {
  #sidebar.affix-top {
    position: static;
  	width: 228px;
  }

  #sidebar.affix {
    position: fixed;
    top: 70px;
    width: 228px;
  }
}

.page-header h1 {
  padding-top: 55px;
  margin-top: -55px;
}

#sidebar li {
  border-left: 4px #fff solid;
}

#sidebar li.active {
  border-left: 4px #eee solid;
}

#sidebar li a {
  padding: 5px 15px;
}

#sidebar.affix-top {
  position: static;
  width: 228px;
}

#sidebar.affix {
  position: fixed;
  top: 70px;
  width: 228px;
}

Remove media queries - sidebar hidden on sm-xs


/* Très petits écrans (smartphones, moins de 768px) */
/* Pas besoin de media-query, c'est le style par défaut */
address {
  background-color: blue;
  width: 100%;
  height: 100%;
}

/* Petits écrans (tablettes, 768px et plus) */
@media (min-width: 768px) {

 }

/* Ecrans moyens (desktops, 992px et plus) */
@media (min-width: 992px) {

 }

/* Très petits écrans (smartphones, moins de 768px) */
/* Pas besoin de media-query, c'est le style par défaut */
address {
  background-color: blue;
  width: 100%;
  height: 100%;
}

map iframe {
  width: 100%;
}

/* Petits écrans (tablettes, 768px et plus) */
@media (min-width: 768px) {

 }

/* Ecrans moyens (desktops, 992px et plus) */
@media (min-width: 992px) {

 }

Add position to map in mobile

Add position to map in mobile


/* these media queries assist in feature detection of 3D transforms */

.has-csstransforms3d {
	position: absolute;
	visibility: hidden;
}
@media (transform-3d) { .csstransforms3d { left: 9px;	} }
@media (-ms-transform-3d) { .csstransforms3d { left: 10px; } }
@media (-o-transform-3d) { .csstransforms3d { left: 11px; } }
@media (-moz-transform-3d) { .csstransforms3d { left: 12px; } }
@media (-webkit-transform-3d) { .csstransforms3d { left: 13px; } }

/* indicator of a successful load via xstyle */
#dgrid-css-has-transforms3d-loaded {
	display: none;
}

/* these media queries assist in feature detection of 3D transforms */

.has-csstransforms3d {
	position: absolute;
	visibility: hidden;
}
@media (transform-3d) { .has-csstransforms3d { left: 9px;	} }
@media (-ms-transform-3d) { .has-csstransforms3d { left: 10px; } }
@media (-o-transform-3d) { .has-csstransforms3d { left: 11px; } }
@media (-moz-transform-3d) { .has-csstransforms3d { left: 12px; } }
@media (-webkit-transform-3d) { .has-csstransforms3d { left: 13px; } }

/* indicator of a successful load via xstyle */
#dgrid-css-has-transforms3d-loaded {
	display: none;
}

Update className for has-csstransform3d tests so it actually works.

The change for issue #313 introduced this bug.


treechildren::-moz-tree-image(modules_lexicon_preferences){
	list-style-image: url(/changeicons/small/document.png) ;
}

treechildren::-moz-tree-image(modules_lexicon_word){
	list-style-image: url(/changeicons/small/document.png) ;
}

treechildren::-moz-tree-image(modules_lexicon_preferences){
	list-style-image: url(/changeicons/small/lexicon.png) ;
}

treechildren::-moz-tree-image(modules_lexicon_word){
	list-style-image: url(/changeicons/small/document.png) ;
}

[FIX] Fix icon for document preference of lexicon module in module preference tree


/**
 * pathfinding-visualiser <http://github.com/Tyriar/pathfinding-visualiser>
 * Copyright 2014 Daniel Imms <http://www.growingwiththeweb.com>
 * Released under the MIT license <http://github.com/Tyriar/pathfinding-visualiser/blob/master/LICENSE>
 */
:host {
  display: block;
  background-color: white;
  color:#000;
}

#canvas {
  width:100%;
}

#container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #FFF;
  /* This prevents the toggle button from going out of screen */
  overflow: hidden;
}

#summary {
  position: absolute;
  bottom: 1em;
  left: 0.5em;
}

/**
 * pathfinding-visualiser <http://github.com/Tyriar/pathfinding-visualiser>
 * Copyright 2014 Daniel Imms <http://www.growingwiththeweb.com>
 * Released under the MIT license <http://github.com/Tyriar/pathfinding-visualiser/blob/master/LICENSE>
 */
:host {
  display: block;
  background-color: white;
  color:#000;
}

#canvas {
  width:100%;
}

#container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #FFF;
  /* This prevents the toggle button from going out of screen */
  overflow: hidden;
}

#summary {
  position: absolute;
  bottom: 1em;
  left: 1em;
}

Make summary bottom/left padding consistent


.bar rect {
  fill: steelblue;
  shape-rendering: crispEdges;
  stroke:white;
}

.bar text {
  fill: black;
}

line {
  stroke: red;
  stroke-width:1px;
}

path{
    fill:none;
    stroke:black;
}

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

.histgraph {
    width: 560px;
    height: 200px;
}

.timegraph {
    width: 900px;
    height: 300px;
}

.bar rect {
  fill: steelblue;
  shape-rendering: crispEdges;
  stroke:white;
}

.bar text {
  fill: black;
}

path{
    fill:none;
    stroke:black;
}

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

.histgraph {
    width: 560px;
    height: 200px;
}

.timegraph {
    width: 900px;
    height: 300px;
}

Fix combined style that overwrote all lines color


body {
    padding-top: 50px;
}

#visualizer-canvas {
    width: 100%;
    height: 100%;
}

#controlpanel {
    margin-top: 10px;
    margin-bottom: 10px;
}

Add some margin to the control panel

Add some margin to the control panel


html { padding:10px; }

body {
  border:0;
  background:#fcfcfc;
  font-family:monospace;
  font-size:14px;
  padding:10px;
  line-height:1.35em;
  margin:0;
  padding:0;
}

html { padding: 0px; }

body {
  border: 2px solid #dce4ec;
  background:#ECF0F1;
  color: #222;
  font-family:monospace;
  font-size:14px;
  padding:10px;
  line-height:1.35em;
  margin:0;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

Update editor theme to work better with new page background color


.hide-element {
    display: none;
}

.inline-div{
	display: inline-block;
}

.padding15{
	padding: 15px;
}

.bold{
	font-weight: bold;
}

.colored-blue{
	color: #4183C4;
}

.translation-item{
	padding-left: 5px;
}

.translation-div{
	display: inline-block;
}

.sw-tree .ui.list>.item:first-child {
	padding-top: 0.21428571em;
}

.sw-tree .ui.list>.item:last-child {
	padding-bottom: 0.21428571em;
}

Modify padding in decktree to properly align drop hint


/* Small devices (portrait and landscape phones, less than 768px)
   No media query since this is the default */

emu-example {
  margin-left: 0;
  margin-right: 0;
}

pre {
  max-width: 100%;
}

emu-grammar {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

emu-production {
  margin-left: 0;
  margin-right: 0;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  emu-grammar {
    margin-left: 5ex;
  }
}

/* Ecmarkup's breakpoint for showing the menu */
@media (max-width: 1000px) {
  /* Move all content down to accomodate the menu button */
  #spec-container {
    margin-top: 54px;
  }
}

/* Small devices (portrait and landscape phones, less than 768px)
   No media query since this is the default */

emu-example {
  margin-left: 0;
  margin-right: 0;
}

pre {
  max-width: 100%;
}

emu-grammar {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

emu-production {
  margin-left: 0;
  margin-right: 0;
}

emu-gmod emu-t {
  margin-left: 1ex;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  emu-grammar {
    margin-left: 5ex;
  }
}

/* Ecmarkup's breakpoint for showing the menu */
@media (max-width: 1000px) {
  /* Move all content down to accomodate the menu button */
  #spec-container {
    margin-top: 54px;
  }
}

Add left margin to terminals in modifiers


.root {
    display: flex;
    flex-direction: column;
}

.field {
    display: flex;
    flex-direction: column;
    margin: 10px 0;
}

.field > label {
    color: #222;
    font-weight: bold;
    margin-bottom: 10px;
}

.field input[type="text"] {
    min-height: 45px;
    padding-left: 10px;
    padding-right: 10px;
}

.field textarea {
    min-height: 70px;
}

.field input[type="text"],
.field textarea {
    font-family: 'Roboto', 'sans-serif';
    border: 2px solid #d7d7d7;
    background-color: #fff;
    color: #222;
    font-size: 13px;
    overflow: visible;
}

.field input[type="text"]:focus,
.field textarea:focus {
    box-shadow: 0 0 5px #0173bd;
    outline: 0;
}

.root button {
    font-family: 'Roboto', 'sans-serif';
    background-color: #cb8700;
    color: #fff;
    border: none;
    height: 45px;
    font-size: 16px;
    margin-bottom: 10px;
}

.root {
    display: flex;
    flex-direction: column;
}

.field {
    display: flex;
    flex-direction: column;
    margin: 10px 0;
}

.field > label {
    color: #222;
    font-weight: bold;
    margin-bottom: 10px;
}

.field input[type="text"] {
    min-height: 45px;
    padding-left: 10px;
    padding-right: 10px;
}

.field textarea {
    min-height: 100px;
    resize: vertical;
}

.field input[type="text"],
.field textarea {
    font-family: 'Roboto', 'sans-serif';
    border: 2px solid #d7d7d7;
    background-color: #fff;
    color: #222;
    font-size: 13px;
    overflow: visible;
}

.field input[type="text"]:focus,
.field textarea:focus {
    box-shadow: 0 0 5px #0173bd;
    outline: 0;
}

.root button {
    font-family: 'Roboto', 'sans-serif';
    background-color: #cb8700;
    color: #fff;
    border: none;
    height: 45px;
    font-size: 16px;
    margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
    .field textarea {
        height: 140px;
    }
}

Add media query for textarea and disabled horizontal resizing


.control-panel {
  font-family: 'Hack', monospace;
  font-size: 11px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.control-panel input {
  font-family: 'Hack';
  font-size: 11px;
}

.control-panel a {
  color: inherit;
  text-decoration: none;
}

.control-panel {
  font-family: 'Hack', monospace;
  font-size: 11px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  text-align: left;
  box-sizing: border-box;
}

.control-panel input {
  font-family: 'Hack';
  font-size: 11px;
}

.control-panel a {
  color: inherit;
  text-decoration: none;
}

Add text-align left and box-sizing to control panel container


.query-in-progress {
  background-image: url('img/ui-anim_basic_16x16.gif');
  background-position: right center;
  background-repeat: no-repeat;
  background-origin:content-box;
 }

#input {
  width: 50%;
  float: left;
}

.invalid-query {
  background-color: #f2dede;
}

.valid-query {
  background-color: #dff0d8;
}

#help {
  float: left;
  left: 5px;
}

.popover {
  max-width: 500px;
}

Increase the width of the help popover

Increase the width of the help popover


html, body {
    overflow: scroll;
    margin: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

html {
    overflow: hidden;
}

.background {
    position: absolute;
    z-index: -100;
    width: 100%;
    height: 100%;
}

.foreground {
    position: relative;
}

html, body {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

html {
    overflow: hidden;
}

.background {
    position: absolute;
    z-index: -100;
    width: 100%;
    height: 100%;
}

.foreground {
    position: relative;
}

Fix smooth scrolling for touch devices

Fix smooth scrolling for touch devices


.filters {
  display: flex;
  flex-direction: row;

  .filters-left {
    display: flex;
    flex: 4;
    justify-content: flex-start;

    .sort {
      margin-right: 10px;

      .form-control {
        width: auto;
        height: 46px;
      }
    }

    .add-filter {
      margin-right: 10px;
      align-self: flex-start;
      height: 46px;
    }

    .dropdown-menu {
      top: 50px;
    }

    .filters-active {
      display: flex;
      flex-wrap: wrap;
    }

    .filter {
      display: flex;
      background-color: #F0F0F0;
      padding: 5px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius: 5px;
      margin-right: 10px;
      margin-bottom: 10px;

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

      .Select {
        min-width: 125px;
        margin-left: 5px;
        margin-right: 5px;
      }

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

        &:hover {
          cursor: pointer;
        }
      }
    }
  }

  .search {
    flex: 1;
    align-self: flex-start;
    min-width: 75px;

    input {
      height: 46px;
    }
  }
}

.filters {
  display: flex;
  flex-direction: row;

  .filters-left {
    display: flex;
    flex: 4;
    justify-content: flex-start;

    .sort {
      margin-right: 10px;
      margin-bottom: 10px;

      .form-control {
        width: auto;
        height: 46px;
      }
    }

    .add-filter {
      margin-right: 10px;
      align-self: flex-start;
      height: 46px;
    }

    .dropdown-menu {
      top: 50px;
    }

    .filters-active {
      display: flex;
      flex-wrap: wrap;
    }

    .filter {
      display: flex;
      background-color: #F0F0F0;
      padding: 5px;
      padding-left: 10px;
      padding-right: 10px;
      border-radius: 5px;
      margin-right: 10px;
      margin-bottom: 10px;

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

      .Select {
        min-width: 125px;
        margin-left: 5px;
        margin-right: 5px;
      }

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

        &:hover {
          cursor: pointer;
        }
      }
    }
  }

  .search {
    flex: 1;
    align-self: flex-start;
    min-width: 75px;

    input {
      height: 46px;
    }
  }
}

Add margin to sort to prevent jumping when adding filter


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

div#root {
  background-color: var(--window-background-color);
  height: 100vh;
  overflow: hidden;
  display: inline-flex;
}

body {
  border: none;
  border-left: 5px solid #21b1ca;
}

.notification > * {
  margin-top: auto;
  margin-bottom: auto;
}

.notification .icon {
  margin: auto 20px;
  height: 28px;
  width: 45px;
  animation: eyeGif 1.5s steps(45, end) 1s forwards;
  background: url('./animation-assets/eye_outline_animation_long.svg') 0 0
    no-repeat;
}

p {
  padding-right: var(--padding-large);
}

@keyframes eyeGif {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2250px 0;
  }
}

.notification {
  display: flex;
}

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

div#root {
  background-color: var(--window-background-color);
  height: 100vh;
  overflow: hidden;
  display: inline-flex;
}

body {
  border: none;
  border-left: 5px solid #21b1ca;
}

.notification > * {
  margin-top: auto;
  margin-bottom: auto;
}

.notification .icon {
  margin: auto 20px;
  height: 28px;
  width: 57px;
  animation: eyeGif 1.5s steps(45, end) 1s forwards;
  background: url('./animation-assets/eye_outline_animation_long.svg') 0 0
    no-repeat;
}

p {
  padding-right: var(--padding-large);
}

@keyframes eyeGif {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2250px 0;
  }
}

.notification {
  display: flex;
}

Fix the icon width issue

Fix the icon width issue


.search .algolia-docsearch-suggestion--highlight,
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
  color: #2980b9;
  background: #f1c40f;
}

.algolia-autocomplete {
  width: 100%;
}

#search-results a,
a.algolia-docsearch-suggestion {
  border-bottom: 0;
}

#search-results h2 {
  display: none;
}

/* override algolia search input colors (set on element via JS) for dark mode alignment and radius for left icon */

#search-form .algolia-autocomplete > .form-control {
  background: #fff none repeat scroll 0% 0% padding-box !important;
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

body.theme-dark #search-form .algolia-autocomplete > .form-control {
  background: #2e1f5e none repeat scroll 0% 0% padding-box !important;
}

.search .algolia-docsearch-suggestion--highlight,
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
  color: #2980b9;
  background: #f1c40f;
}

.algolia-autocomplete {
  width: 100%;
}

#search-results a,
a.algolia-docsearch-suggestion {
  border-bottom: 0;
}

#search-results h2 {
  display: none;
}

/* override algolia search input colors (set on element via JS) for dark mode alignment and radius for left icon */

#search-form .algolia-autocomplete > .form-control {
  background: #fff none repeat scroll 0% 0% padding-box !important;
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

body.theme-dark #search-form .algolia-autocomplete > .form-control {
  background: #1b1238 none repeat scroll 0% 0% padding-box !important;
}

Use correct dark color for docs search box override


/*** 065_linkbutton.frag.css ***/
/*** LinkButton component. ***/
.ui-lbtn {
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 18px;
	font-size: <%= font_size %>;
}
.ui-lnkb {
}

a.ui-lnkb {
	cursor: pointer;
}

a:hover.ui-lnkb {
	text-decoration: underline !important;
}

a.ui-lnkb-dis {
	text-decoration: none !important;
	font-style: italic;
	cursor: default;
	color: gray;
}

a:hover.ui-lnkb-dis {
	text-decoration: none !important;
}

/*** 065_linkbutton.frag.css ***/
/*** LinkButton component. ***/
.ui-lbtn {
	display: inline-block;
	background-repeat: no-repeat;
	background-position: left;
	padding-left: 18px;
	font-size: <%= font_size %>;
	height: 16px;
}
.ui-lnkb {
}

a.ui-lnkb {
	cursor: pointer;
}

a:hover.ui-lnkb {
	text-decoration: underline !important;
}

a.ui-lnkb-dis {
	text-decoration: none !important;
	font-style: italic;
	cursor: default;
	color: gray;
}

a:hover.ui-lnkb-dis {
	text-decoration: none !important;
}

Fix linkbutton height: it's icons were truncated at top and bottom.


body {
  font-family: sans-serif;
  font-weight: 100;
  font-size: 1.2em;
}

li {
  list-style-type: none;
}

.cbp_tmtimeline > li .cbp_tmlabel {
  background-color: #46a4da;
  border: 5px;
  width: 60%;
  margin: 5px 75px;
  float: right;
  border-radius: 5px
}

.cbp_tmtimeline > li:nth-child(1) .cbp_tmlabel {
  background-color: #6cbfee;
}

.cbp_tmlabel > li .cbp_tmtimeline  {
  background-color: #3594cb;
  border: 5px;
  width: 60%;
  margin: 5px 75px;
  float: right;
  border-radius: 5px
}

h2 {
  border-bottom: 1px solid lightgrey;
  margin: 10px;
  padding: 2px 5px;
  color: white;
}

time {
  float:left;
}

p {
  color: white;
  padding: 5px 10px;
  margin: 20px;
  font-size: 100%;
}

body {
  font-family: sans-serif;
  font-weight: 100;
  font-size: 1.2em;
}

li {
  list-style-type: none;
}

li .cbp_tmtime:first-child span{
  border: 1px solid black;
}

.cbp_tmtimeline > li .cbp_tmlabel {
  background-color: #46a4da;
  border: 5px;
  width: 60%;
  margin: 5px 75px;
  float: right;
  border-radius: 5px
}

.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
  background-color: #6cbfee;
}

.cbp_tmlabel > li .cbp_tmtimeline  {
  background-color: #3594cb;
  border: 5px;
  width: 60%;
  margin: 5px 75px;
  float: right;
  border-radius: 5px
}

h2 {
  border-bottom: 1px solid lightgrey;
  margin: 10px;
  padding: 2px 5px;
  color: white;
}

time {
  float:left;
}

p {
  color: white;
  padding: 5px 10px;
  margin: 20px;
  font-size: 100%;
}

Put tracer bullets on time and date

Put tracer bullets on time and date


body {
    background-color: #eee;
}

.jumbotron {
    background-color: #fff;
}

h1 {
    font-weight: bold;
    margin-top: 0;
}

a {
    text-decoration: none !important;
}

td {
    vertical-align: middle !important;
}

table th {
    background-color: #F6F6F6;
}

.btn {
    padding: 5px 8px 5px 8px;
}

.bg-danger {
    background-color: #FFDDDD;
}

.bg-success {
    background-color: #DFF0D8;
}

.bg-warning {
    background-color: #FFF1B8;
}

.bg-info {
    background-color: #D8CAE6;
}

.standings .status {
    font-weight: bold;
}

body {
    background-color: #eee;
    padding-bottom: 35px;
}

.jumbotron {
    background-color: #fff;
}

h1 {
    font-weight: bold;
    margin-top: 0;
}

a {
    text-decoration: none !important;
}

td {
    vertical-align: middle !important;
}

table th {
    background-color: #F6F6F6;
}

.btn {
    padding: 5px 8px 5px 8px;
}

.bg-danger {
    background-color: #FFDDDD;
}

.bg-success {
    background-color: #DFF0D8;
}

.bg-warning {
    background-color: #FFF1B8;
}

.bg-info {
    background-color: #D8CAE6;
}

.standings .status {
    font-weight: bold;
}

Fix content sticking to the bottom of the screen


body {
  width: 940px;
  margin-right: auto;
  margin-left: auto;
  font-family: Helvetica, Arial, sans-serif;
  background-color: #f5f0cd;
}

h2 {
  padding: 5px;
  color: #fff;
  background-color: #b3a742;
}

#td-nutrientes {
  width: 40%;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid #000;
}

#td-nutrientes th {
  background-color: #F8EA6B;
}

#td-nutrientes tr:nth-child(even) {
  background-color: #F8EAB3;
}

#td-nutrientes tr:nth-child(odd) {
  background-color: #fff;
}

nav ul li {
  display: inline;
  margin-right: 50px;
}

#topo {
  text-align: center;
}

body {
  width: 940px;
  margin-right: auto;
  margin-left: auto;
  font-family: Helvetica, Arial, sans-serif;
  background-color: #f5f0cd;
}

h2 {
  padding: 5px;
  color: #fff;
  background-color: #b3a742;
  background-image: linear-gradient(#9c8f67, #c7be9b);
  border: 1px solid #000;
  border-radius: 15px;
}

figure {
  width: 450px;
  padding: 15px;
  font-family: cursive;
  text-align: center;
  background-color: #fff;
  border: 1px solid #000;
  box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.7);
  transform: rotate(0deg);
}

figure:hover {
  transform: rotate(-5deg);
}

#td-nutrientes {
  width: 40%;
  margin-right: auto;
  margin-left: auto;
  border: 1px solid #000;
}

#td-nutrientes th {
  background-color: #F8EA6B;
}

#td-nutrientes tr:nth-child(even) {
  background-color: #F8EAB3;
}

#td-nutrientes tr:nth-child(odd) {
  background-color: #fff;
}

nav ul li {
  display: inline;
  margin-right: 50px;
}

#topo {
  text-align: center;
}

Update file, Alura, Dando os primeiros passos na web com HTML e CSS, Aula 5


.container {
  position: absolute;
  bottom: 0;
  left: 0;
}

.smallVideo video {
  height: 150px;
}

.container {
  position: absolute;
  bottom: 0;
  left: 0;
}

.container video {
  height: 300px;
}

.smallVideo video {
  height: 150px;
}

Modify video height to prevent it being too big


/*
	Arcana by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* Basic */

	body, input, select, textarea {
		font-size: 13pt;
		line-height: 1.5em;
	}

/* Lists */

	ol.default {
		list-style: decimal;
		padding-left: 1.25em;
	}

		ol.default li {
			padding-left: 0.25em;
		}

	ul.icons li a, ul.icons li span {
		font-size: 1.5em;
	}

/* Header */

	#header {
		padding: 2em 0 0 0;
	}

		#header h1 {
			padding: 0 0 1.75em 0;
		}

/* Banner */

	#banner {
		height: 12em;
	}

/* Wrapper */

	.wrapper {
		padding: 3em 0 1em 0;
	}

/* CTA */

	#cta {
		padding: 2em 0;
	}

/* Footer */

	#footer {
		padding: 3em 0 3em 0;
	}

		#footer .container {
			margin-bottom: 1em;
		}

/*
	Arcana by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* Basic */

	body, input, select, textarea {
		font-size: 13pt;
		line-height: 1.5em;
	}

/* Lists */

	ol.default {
		list-style: decimal;
		padding-left: 1.25em;
	}

		ol.default li {
			padding-left: 0.25em;
		}

	ul.icons li a, ul.icons li span {
		font-size: 1.5em;
	}

/* Header */

	#header {
		padding: 0 0 0 0;
	}

		#header h1 {
			padding: 0 0 1.75em 0;
		}

/* Banner */

	#banner {
		height: 12em;
	}

/* Wrapper */

	.wrapper {
		padding: 3em 0 1em 0;
	}

/* CTA */

	#cta {
		padding: 2em 0;
	}

/* Footer */

	#footer {
		padding: 3em 0 3em 0;
	}

		#footer .container {
			margin-bottom: 1em;
		}

Remove top padding from header div

Remove top padding from header div


* {
	/* Apply to EVERYTHING */
	color: #0cff00;
}

html, body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}

body {
	/* background: linear-gradient(141deg, #6d6d6d 0%, #383838 51%, #757575 75%); */
	background: linear-gradient(141deg, #4c4c4c 25%, #000000 50%, #4c4c4c 75%);
}

#content {
	margin:1em auto;
	max-width:40em;
	padding:0 .62em;
	font:1.2em/1.62 Hack, monospace;
}

h1, h2, h3 {
	line-height:1.2;
	border-bottom: 1px solid #00ff61;
}

h1 {
	border-bottom: 2px solid #00ff61;
	/* This overrides the 1px bottom border from previous section */
}

@media print {
	body {
		max-width:none
	}
}

* {
	/* Apply to EVERYTHING */
	color: #0cff00;
}

html, body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}

body {
	/* background: linear-gradient(141deg, #6d6d6d 0%, #383838 51%, #757575 75%); */
	background: linear-gradient(0deg, #00000 25%, #4c4c4c 50%, #00000 75%);
}

#content {
	margin:1em auto;
	max-width:40em;
	padding:0 .62em;
	font:1.2em/1.62 Hack, monospace;
}

h1, h2, h3 {
	line-height:1.2;
	border-bottom: 1px solid #00ff61;
}

h1 {
	border-bottom: 2px solid #00ff61;
	/* This overrides the 1px bottom border from previous section */
}

@media print {
	body {
		max-width:none
	}
}

Change to be more Screen-like

Change to be more Screen-like


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


body {
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial,
    'Lucida Grande', sans-serif;
  font-weight: 300;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #108db8;
  font-weight: bold;
}

nav {
  background: #108db8;
  max-width: 780px;
  margin:0 auto;
  text-align: center;
}

nav a {
  color: white;
  padding: 1rem;
  display: inline-block;
}

.content {
  padding: 1rem;
  max-width: 760px;
  margin: 0 auto;
}

body {
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial,
    'Lucida Grande', sans-serif;
  font-weight: 300;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #108db8;
  font-weight: bold;
}

nav {
  background: #108db8;
  max-width: 780px;
  margin:0 auto;
  text-align: center;
}

nav a {
  color: white;
  padding: 1rem;
  display: inline-block;
}

.content {
  padding: 1rem;
  max-width: 760px;
  padding-top: 70px;
  margin: 0 auto;
}

Add padding from the nav bar

Add padding from the nav bar


/* ___ Header styles ___ */

header {
  background: #22201e;
  color: #fff;
  padding: 1.5em 0;
}

header .brand {
  border-bottom: 1px solid #393735;
}

header .logo {
  position: relative;
  margin-bottom: -1px;
}

header p {
  font-size: 1.2em;
  margin-left: 3em;
  margin-bottom: 0;
}

/* ___ Body styles ___ */

/* Styles for sticky footer */
.page-wrap {
  min-height: 97%;
  margin-bottom: -3em;
}
.page-wrap:after{
  content: "";
  display: block;
}

.main {
  margin-top: 2em;
}
.main textarea {
  resize: vertical;
}

.main .btn-run {
  min-width: 5em;
}

/* Input area */
.input-json {
  min-height: 21.5em;
}

/* Output area */
.panel {
  background: hsl(0, 0%, 97%);
  border: 1px solid #DDD;
  width: 100%;
  min-height: 25em;
}

/* ___ Footer styles ___ */

footer {
  text-align: center;
  height: 3em;
}

footer hr {
  max-width: 15%;
}

/* ___ Base styles ___ */
body {
  height: 100%;
}

/* ___ Header styles ___ */

header {
  background: #22201e;
  color: #fff;
  padding: 1.5em 0;
}

header .brand {
  border-bottom: 1px solid #393735;
}

header .logo {
  position: relative;
  margin-bottom: -1px;
}

header p {
  font-size: 1.2em;
  margin-left: 3em;
  margin-bottom: 0;
}

/* ___ Body styles ___ */

/* Styles for sticky footer */
.page-wrap {
  min-height: 92%;
}
.page-wrap:after{
  content: "";
  display: block;
}

.main {
  margin-top: 2em;
}
.main textarea {
  resize: vertical;
}

.main .btn-run {
  min-width: 5em;
}

/* Input area */
.input-json {
  min-height: 21.5em;
}

/* Output area */
.panel {
  background: hsl(0, 0%, 97%);
  border: 1px solid #DDD;
  width: 100%;
  min-height: 25em;
}

/* ___ Footer styles ___ */

footer {
  text-align: center;
  height: 3em;
}

footer hr {
  max-width: 15%;
}

Add a fix for sticky footer on Firefox and Safari


* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    padding: 5px;
}

main {
    display: flex;
}

header {
    height: 2em;
    font-size: larger;
}

nav {
    flex: 0 0 300px;
}

section {
    flex: 1 1 100%;
}

section > ul {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: flex-start;
}

section > ul li {
    list-style: none;
    text-align: center;
    flex: 0 0 120px;
    height: 110px;
    background-color: #ccc;
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li > ul {
    display: none;
    padding-left: 2em;
}

nav li.open > ul {
    display: block;
}

nav li.current {
    font-weight: bold;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    padding: 5px;
}

main {
    display: flex;
}

header {
    height: 2em;
    font-size: larger;
}

nav {
    flex: 0 0 300px;
}

section {
    flex: 1 1 100%;
}

section > ul {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    align-content: flex-start;
}

section > ul li {
    list-style: none;
    text-align: center;
    flex: 0 0 120px;
    height: 110px;
    background-color: #ccc;
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li > ul {
    display: none;
    padding-left: 2em;
}

nav li.open > ul {
    display: block;
}

nav li.current {
    font-weight: bold;
}

Remove justify-content for cleaner flow

Remove justify-content for cleaner flow


body {
  padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}

dl.inline dt, dl.inline dd {
  float: left;
}

dl.inline dd + dt, dl.inline dd + dd {
  clear: left
}

dl.inline dd + dd {
  float: none
}

dl.inline dt {
  font-weight: bold
}

th.descending:after {
  padding-left: 5px;
  content: "▼";
}

th.ascending:after {
  padding-left: 5px;
  content: "▲";
}

th.unselected:after {
  padding-left: 5px;
  content: "　";
}

body {
  /* Add space for fixed position navbar. */
  padding-top: 60px;
}

@media (max-width: 979px) {
  body {
    /* Mobile devices 979px and narrower use a statically positioned navbar */
    /* and therefore need no padding for the <body>. */
    /* */
    /* @see http://twitter.github.io/bootstrap/scaffolding.html#responsive */
    padding-top: 0;
  }
}

dl.inline dt, dl.inline dd {
  float: left;
}

dl.inline dd + dt, dl.inline dd + dd {
  clear: left
}

dl.inline dd + dd {
  float: none
}

dl.inline dt {
  font-weight: bold
}

th.descending:after {
  padding-left: 5px;
  content: "▼";
}

th.ascending:after {
  padding-left: 5px;
  content: "▲";
}

th.unselected:after {
  padding-left: 5px;
  content: "　";
}

Remove 60px <body> padding for mobile devices.

Mobile devices 979px and narrower use a statically positioned navbar
and therefore need no padding for the <body>.

See http://twitter.github.io/bootstrap/scaffolding.html#responsive

From: Ross Allen <4ed793e095872e523cb2d9ff6e599dba3478be1c@gmail.com>
Review: https://reviews.apache.org/r/12279


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

.link {
  composes: reset-font-smoothing;
  cursor: pointer;

  &:not(.inherit) {
    color: var(--color-aqua-dark);
    font-family: var(--font-family-regular);
    text-decoration: none;

    &:hover,
    &:active {
      text-decoration: underline;
    }
  }

  &.inherit {
    color: inherit;
    text-decoration: underline;

    &:hover,
    &:active {
      color: inherit;
      text-decoration: none;
    }
  }
}

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

.link {
  composes: reset-font-smoothing;
  cursor: pointer;
  background: transparent;
  border: 0;
  font-size: 100%;
  padding: 0;

  &:not(.inherit) {
    color: var(--color-aqua-dark);
    font-family: var(--font-family-regular);
    text-decoration: none;

    &:hover,
    &:active {
      text-decoration: underline;
    }
  }

  &.inherit {
    color: inherit;
    text-decoration: underline;

    &:hover,
    &:active {
      color: inherit;
      text-decoration: none;
    }
  }
}

Undo button styling for when Link component is a button tag


.jumbotronBackground {
  background-color: pink;
}

#banner h1 {
  text-align: center;
}

.col-md-2 {
  background-color: green;
  min-width: 240px;
  min-height: 500px;
}

.col-md-9 {
  padding-left: 80px;
}

.jumbotronBackground {
  background-color: #FF6666;
}

#banner h1 {
  text-align: center;
}

body {
  background-color: #FF9A66;
}

.col-md-2 {
  background-color: #993367;
  min-width: 240px;
  min-height: 500px;
}

.col-md-9 {
  padding-left: 80px;
}

Add new color scheme to page, change background colors in banner, body, and sidebar


.metadata {
  background-color: #ccc;
  overflow-y: scroll;
  padding: 20px;
}

.metadata ul {
}

.metadata--itemTitle {
  font-weight: 700;
}

.metadata {
  background-color: #ccc;
  overflow-y: scroll;
  padding: 20px;
}

.metadata--header {
  font-size: 20px;
}

.metadata ul {
}

.metadata--itemTitle {
  font-weight: 700;
}

Reduce header size for easier reading

Reduce header size for easier reading


#container {
    min-width: 20em;
    max-width: 20em;
    min-height: 25em;
    max-height: 25em;
    overflow-x: hidden;
    overflow-y: hidden;
}

#scrollbar-container {
    overflow: hidden;
    min-height: 15em;
    max-height: 15em;
}

.tab-favicon {
    margin: 0.15em;
    width: 1.5em;
    height: 1.5em;
}

#container {
    min-width: 20em;
    max-width: 20em;
    min-height: 25em;
    max-height: 25em;
    overflow-x: hidden;
    overflow-y: hidden;
}

#scrollbar-container {
    overflow: hidden;
    min-height: 15em;
    max-height: 15em;
}

md-list-item {
    min-width: 20em;
    max-width: 20em;
}

.tab-favicon {
    margin: 0.15em;
    width: 1.5em;
    height: 1.5em;
}

Update list view items to not shrink when lack of icons


@mixin ends css;
@mixin ends elm;
@mixin ends go;
@mixin ends hs;
@mixin ends html;
@mixin ends js;
@mixin ends json;
@mixin ends jsx;
@mixin ends less;
@mixin ends ls;
@mixin ends md;
@mixin ends php;
@mixin ends py;
@mixin ends rb;
@mixin ends rs;
@mixin ends sass;
@mixin ends sh;
@mixin ends styl;
@mixin ends swift;
@mixin ends ts;
@mixin ends handlebars;

@mixin path test;

@mixin starts git;
@mixin starts eslintrc;
@mixin starts license;

@mixin is editorconfig;
@mixin is packagejson;
@mixin is travisyml;

@mixin ends css;
@mixin ends elm;
@mixin ends go;
@mixin ends hs;
@mixin ends html;
@mixin ends js;
@mixin ends json;
@mixin ends jsx;
@mixin ends less;
@mixin ends ls;
@mixin ends md;
@mixin ends php;
@mixin ends py;
@mixin ends rb;
@mixin ends rs;
@mixin ends sass;
@mixin ends sh;
@mixin ends styl;
@mixin ends swift;
@mixin ends ts;
@mixin ends handlebars;

@mixin starts git;
@mixin starts eslintrc;
@mixin starts license;

@mixin is editorconfig;
@mixin is packagejson;
@mixin is travisyml;

Remove path mixin for now

Remove path mixin for now


*, h1, h2, h3, h4, h5, h6, .button {
    font-family: Dosis, sans-serif;
}
body {
    background-color: #ffccff;
}

.container {
    padding: 10px;
}

.title {
    text-align: center;
    margin-bottom: 10px;
}
.subheading {
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 30px;
}
.entries {
    margin-left: 20px;
    margin-right: 20px;
}

.entry-vote-button-space {
    padding: 0;
}
.entry-vote-count {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 28px;
    text-align: center;
}

*, h1, h2, h3, h4, h5, h6, .button {
    font-family: Dosis, sans-serif;
}
body {
    background-color: #ffccff;
}

.container {
    padding: 10px;
}

.title {
    text-align: center;
    margin-bottom: 10px;
}
.subheading {
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 30px;
}
.entries {
    margin-left: 20px;
    margin-right: 20px;
}

.entry {
    padding-left: 10px;
    padding-right: 10px;
}
.entry-vote-button-space {
    padding: 0;
}
.entry-vote-count {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 28px;
    text-align: center;
}

Add padding between photo entries

Add padding between photo entries


div.tree-multiselect > div.selected, div.tree-multiselect > div.selections {
  display: inline-block;
  vertical-align: top;
}

div.tree-multiselect > div.selected {
  width: 30%;
}

div.tree-multiselect > div.selections {
  width: 70%;
}

div.tree-multiselect div.section > div.item, div.tree-multiselect div.section > div.section {
  padding-left: 20px;
}

div.tree-multiselect div.title {
  background: #767676;
  color: white;
}

div.tree-multiselect {
  border: 2px solid #D8D8D8;
  border-radius: 5px;
}

div.tree-multiselect > div.selected, div.tree-multiselect > div.selections {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 1%;
}

div.tree-multiselect > div.selected {
  width: 30%;
}

div.tree-multiselect > div.selected > div.item {
  padding: 2px 5px;
  border-radius: 2px;
  background: #EAEAEA;
}

div.tree-multiselect > div.selections {
  width: 70%;
  border-left: solid 2px #D8D8D8;
}

div.tree-multiselect div.section > div.item, div.tree-multiselect div.section > div.section {
  padding-left: 20px;
}

div.tree-multiselect div.title, div.tree-multiselect div.item {
  margin-bottom: 2px;
}

div.tree-multiselect div.title {
  background: #767676;
  color: white;
  padding: 2px;
}

Update the styling to look a little better


.islandora-book-pages-display-switch {
  float: right;
}
.islandora-book-pages {
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}
.islandora-book-pages-grid dl {
  width: 20%;
  min-width: 100px;
  min-height: 180px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
  margin: 1.5em 1.84%;
  zoom: 1;
}
.islandora-book-pages-grid dd {
  margin: 0;
  padding: 0;
}
.islandora-book-page-object dd {
  padding-top: 2px;
  padding-bottom: 2px;
}
.islandora-book-page-list-item {
  padding-bottom: 1.5em;
  border-bottom: 1px solid #ddd;
}
.islandora-book-page-list-item dl dt {
  clear: left;
  float: left;
  padding: 3px 0 0;
  text-align: center;
  width: 100px;
}
.islandora-book-page-list-item dl dd {
  margin: 0 0 0 130px;
}
.islandora-book-page-caption {
  overflow: hidden;
  text-overflow: ellipsis;
}

Truncate long page titles, in the grid display


@import '../variables.css';

.navRoot{
    display: flex;
    justify-content: space-between;
    align-content: stretch;
    width: 100%;
    border-bottom: 2px solid #ccc;
}

@media (--large){
  .linkLabel{
    display: none;
  }
}

@import '../variables.css';

.navRoot{
    display: flex;
    justify-content: space-between;
    align-content: stretch;
    width: 100%;
    border-bottom: 2px solid #ccc;
}

@media (--large){
  .linkLabel{
    /*display: none;*/
  }
}

Comment out the removal of link labels on non-large screens.


.bubble {
  background-color: #fff;
  border: 1px solid #e7e7e7;
  box-shadow: 0 1px 3px 0 #eee;
  border-radius: 3px;
  margin-top: 6px;
  margin-bottom: 6px;
}

#editor {
  height: 500px;
}

#contents {
  background-color: #fff;
  margin-top: 6px;
  border: 1px solid #e7e7e7;
  box-shadow: 0 1px 3px 0 #eee;
  border-radius: 3px;
  margin-bottom: 12px;
  display: block;
  white-space: pre;
  overflow: scroll;
}

.contents-spacer {
  height: 6px;
  width: 35px;
  border-right: 1px solid #eee;
}

.bubble {
  background-color: #fff;
  border: 1px solid #e7e7e7;
  box-shadow: 0 1px 3px 0 #eee;
  border-radius: 3px;
  margin-top: 6px;
  margin-bottom: 6px;
}

#editor {
  height: 500px;
}

#contents {
  background-color: #fff;
  margin-top: 6px;
  border: 1px solid #e7e7e7;
  box-shadow: 0 1px 3px 0 #eee;
  border-radius: 3px;
  margin-bottom: 12px;
  display: block;
  white-space: pre;
}

.contents-spacer {
  height: 6px;
  width: 35px;
  border-right: 1px solid #eee;
}

Remove overflow:scroll for now. It looks ugly on windows.


body {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif;
    font-size: 16px;
    line-height: 1.42857143;
}

Initialize static folder and basic font reduce css


div.step_header {
  margin-bottom: 12px;
}

div.step_body {
  padding-left: 12px;
}

span.step_number {
    font-size: 14pt;
    font-weight: bold;
    text-shadow: #aaa 2px 2px 3px;
}

span.step_caption {
  font-size: 12pt;
}

span.fvc_selected {
  margin-left: 6px;
}

span.fvc_selected {
  margin-left: 6px;
}

.fvc_background {
  border-radius: 3px;
  /*background: #eee;*/
  padding: 3px;
}

.fvc_background table {
  /*height: 100%;*/
  width: 100%;
}

.fvc_background table .rowhighlight {
  background-color: #09f;
}

.fvc_expander {
  width: 100%;
  max-height: 300px;
  overflow: auto;
}

.fvc_header {
}

div.step_header {
  margin-bottom: 12px;
}

div.step_body {
  padding-left: 12px;
}

span.step_number {
    font-size: 14pt;
    font-weight: bold;
    text-shadow: #aaa 2px 2px 3px;
}

span.step_caption {
  font-size: 12pt;
}

span.fvc_selected {
  margin-left: 6px;
}

span.fvc_selected {
  margin-left: 6px;
}

.fvc_background {
  border-radius: 3px;
  /*background: #eee;*/
  padding: 3px;
}

.fvc_background table {
  /*height: 100%;*/
  width: 100%;
}

.fvc_background table .rowhighlight {
  background-color: #09f;
}

.fvc_expander {
  width: 100%;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

.fvc_header {
}

Disable horizontal scroll in Volume chooser


.demo-layout-transparent {
}

.demo-layout-transparent .mdl-layout__header .mdl-layout__header-row,
.demo-layout-transparent .mdl-layout__drawer-button {
	/* This background is dark, so we set text to white. Use 87% black instead if
		 your background is light. */
	color: #2196F3;
}

/*MDL assigns padding-left of ~70px to the header for the drawers hamburger button.
Since we don't use the hamburger button, left padding is reduced to 16 px*/
.mdl-layout__header-row {
	padding-left: 16px;
}

.mdl-textfield__input, .mdl-textfield__label {
	font-size: 150%;
	line-height: 50px;
	text-align: center;
}

.mdl-navigation a.mdl-navigation__link,
.mdl-textfield label,
.mdl-textfield input {
	color: #2196F3;
}

form#search_form {
	position: absolute;
	top: 40%;
	width: 100%;
	text-align: center;
}

header .mdl-layout-title a {
	text-decoration: none;
	color: inherit;
}

.mdl-textfield__input {
	display: inline;
}

.demo-layout-transparent {
}

.demo-layout-transparent .mdl-layout__header .mdl-layout__header-row,
.demo-layout-transparent .mdl-layout__drawer-button {
	/* This background is dark, so we set text to white. Use 87% black instead if
		 your background is light. */
	color: #2196F3;
}

/*MDL assigns padding-left of ~70px to the header for the drawers hamburger button.
Since we don't use the hamburger button, left padding is reduced to 16 px*/
.mdl-layout__header-row {
	padding-left: 16px;
	height: 110px;
}

.mdl-textfield__input, .mdl-textfield__label {
	font-size: 150%;
	line-height: 50px;
	text-align: center;
}

.mdl-navigation a.mdl-navigation__link,
.mdl-textfield label,
.mdl-textfield input {
	color: #2196F3;
}

form#search_form {
	position: absolute;
	top: 40%;
	width: 100%;
	text-align: center;
}

header .mdl-layout-title a {
	text-decoration: none;
	color: inherit;
}

.mdl-textfield__input {
	display: inline;
}

Increase height of menu header

Increase height of menu header


.SocialAuthDisconnect {
    padding: 8px 8px 7px;
    color: white;
    line-height: 18px;
    border: 1px solid #678;
    background: -webkit-linear-gradient(#89a, #567);
    box-shadow: 0 1px #345, 0 2px rgba(255,255,255,.34), 0 0 0 1px #567;
    position: relative;
}

.SocialAuthDisconnect label {
    margin: 0 21px 0 3px;
    color: white;
    vertical-align: baseline;
}

.SocialAuthDisconnect a {
    padding: 0 8px;
    color: #345;
    border: 1px solid #678;
    border-radius: 5px;
    background-color: rgba(255,255,255,.08);
    box-shadow: 0 1px rgba(0,0,0,.21), 0 1px rgba(255,255,255,.21) inset;
    float: right;
    -webkit-transition: 250ms;
}

.SocialAuthDisconnect a:hover {
    text-decoration: none;
    background-color: rgba(255,255,255,.21);
}

.SocialAuthDisconnect {
    padding: 8px 8px 7px;
    color: white;
    line-height: 18px;
    border: 1px solid #678;
    background: -webkit-linear-gradient(#89a, #567);
    box-shadow: 0 1px #345, 0 2px rgba(255,255,255,.34), 0 0 0 1px #567;
    position: relative;
}

.SocialAuthDisconnect label {
    margin: 0 21px 0 3px;
    color: white !important;
    vertical-align: baseline !important;
}

.SocialAuthDisconnect a {
    padding: 0 8px;
    color: #345 !important;
    border: 1px solid #678;
    border-radius: 5px;
    background-color: rgba(255,255,255,.08);
    box-shadow: 0 1px rgba(0,0,0,.21), 0 1px rgba(255,255,255,.21) inset;
    float: right;
    -webkit-transition: 250ms;
}

.SocialAuthDisconnect a:hover {
    text-decoration: none;
    background-color: rgba(255,255,255,.21);
}

Fix display issues with Safari

Fix display issues with Safari


@import 'app/styles/variables.css';

.sidebar {
  display: flex;
  flex-direction: column;

  /* border-left: 1px solid #ddd; */
}

.pageList {
  text-align: left;
}

.pageList a {
  font-size: 18px;
}

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: bold;
  font-size: var(--font-size-large);
}

.back > i {
  padding-right: 10px;
  color: var(--lego-link-color);
}

@import 'app/styles/variables.css';

.sidebar {
  display: flex;
  flex-direction: column;

  /* border-left: 1px solid #ddd; */
}

.pageList {
  text-align: left;
  line-height: 18px;

  & li {
    margin-bottom: 10px;
  }
}

.pageList a {
  font-size: 18px;
}

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: bold;
  font-size: var(--font-size-large);
}

.back > i {
  padding-right: 10px;
  color: var(--lego-link-color);
}

Make sure pages with titles >1 line looks like one element in navigation


.inline-block {
	display: inline-block;
}

.btn-confirm {
	width: 80px;
}

body {
	min-width: 650px;
}

Set min-width of body to 650px to resolve beer list grid rendering issue


/* foo bar! */
.navbar-default {
    background-color: #545f66;
}
.navbar-default .navbar-brand {
    color: #ffffff;
}
.navbar-default .navbar-nav>li>a {
    color: #ffffff;
}
.navbar-form .form-control {
    color: #ffffff;
}
.navbar-form .form-control:focus {
    box-shadow: inset 0 -2px 0 #ffffff;
}
.alert-info {
    background-color: #b6dcfe;
}
.alert {
    color: #6b6b6b;
}
.alert a:not(.close) {
    color: #545f66;
}

/* foo bar! */
.navbar-default {
    background-color: #545f66;
}
.navbar-default .navbar-brand {
    color: #ffffff;
}
.navbar-default .navbar-nav>li>a {
    color: #ffffff;
}
.navbar-form .form-control {
    color: #ffffff;
}
.navbar-form .form-control:focus {
    box-shadow: inset 0 -2px 0 #ffffff;
}
.alert-info {
    background-color: #afd4f4;
}
.alert {
    color: #6b6b6b;
}
.alert a:not(.close) {
    color: #545f66;
}

Tweak docs infobox background color.

Tweak docs infobox background color.


.sidebar-header {
  background-color: #f5f5f5;
  border-bottom: 1px solid #e5e5e5;
  box-sizing: border-box;
  padding: 11px;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.sidebar-header > .search-input {
  -webkit-appearance: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
  color: inherit;
  font: inherit;
  font-size: 12px;
  height: 26px;
  outline: 0;
  padding: 1px 4px;
  width: 100%;
}

.sidebar-header > .search-input:focus {
  border-color: #51a7e8;
  box-shadow: 0 0 1px #51a7e8;
}

.sidebar-header > .search-input::-webkit-search-decoration {
  display: none;
}

.sidebar-header {
  background-color: #f5f5f5;
  border-bottom: 1px solid #e5e5e5;
  box-sizing: border-box;
  padding: 11px;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.sidebar-header > .search-input {
  -webkit-appearance: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075);
  box-sizing: border-box;
  color: inherit;
  font: inherit;
  font-size: 12px;
  height: 26px;
  outline: 0;
  padding: 1px 4px;
  width: 100%;
}

.sidebar-header > .search-input:focus {
  border-color: #51a7e8;
  box-shadow: 0 0 1px #51a7e8;
}

.sidebar-header > .search-input::-webkit-search-decoration {
  display: none;
}

Add 'box-sizing' of search-input for IE

Add 'box-sizing' of search-input for IE


.submitted-menu {
	background-color: var(--dark-background);
	background-position: center center;
	background-size: cover;
	display: flex;
	width: 100%;
}

.submitted-menu-bar {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	width: 100%;
}

.submitted-menu-items {
	display: flex;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	width: auto;
	list-style-type: none;
}

.submitted-menu-item-active {
	background: var(--normal-dark-background);
}

.submitted-menu a {
	color: var(--white-text);
	font-size: 16px;
	text-decoration: none;
	padding: 0 17px;
	line-height: 44px;
	display: block;
}

.submitted-menu-role-select {
	line-height: 44px;
}
.submitted-menu-role-select select {
	border: none;
	background-color: var(--dark-background);
	box-shadow: none;
	color: var(--white-text);
	margin: 0;
}

@media only screen and (max-width: var(--mobile-width)) {
	.submitted-menu {
		min-width: var(--min-mobile-width);
	}
}

.submitted-menu {
	background-color: var(--dark-background);
	background-position: center center;
	background-size: cover;
	display: flex;
	width: 100%;
}

.submitted-menu-bar {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	width: 100%;
}

.submitted-menu-items {
	display: flex;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	width: auto;
	list-style-type: none;
}

.submitted-menu-item-active {
	background: var(--normal-dark-background);
}

.submitted-menu a {
	color: var(--white-text);
	font-size: 16px;
	text-decoration: none;
	padding: 0 17px;
	line-height: 44px;
	display: block;
}

.submitted-menu-role-select {
	line-height: 44px;
}
.submitted-menu-role-select > p {
	display: inline-block;
}
.submitted-menu-role-select select {
	border: none;
	background-color: var(--dark-background);
	box-shadow: none;
	color: var(--white-text);
	margin: 0;
}

@media only screen and (max-width: var(--mobile-width)) {
	.submitted-menu {
		min-width: var(--min-mobile-width);
	}
}

Fix styles for submitted menu role select

So submit button and select are in one line


@media (max-width: 570px) {
    .oneThird {
        width: 100%;
        border-left: none;
    }

    .quarter {
        width: 100%;
        border-left: none;
    }

    .headerTitle {
        text-align: right;
    }

    .headerSubTitle {
        text-align: right;
    }

    .headerLinks {
        position: static;
    }
}

Add custom CSS with some tweaks for mobile use


.floatTOC {
	transition: 1s all ease;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	border: none;
	background: #f6f6f6;
	font-size: 0.8em;
	width: 10em;
	height: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.floatTOC ul ul {
	margin: 0 0 0 1em;
}

.floatTOC:hover {
	width: auto;
	overflow: auto;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.floatTOC > * {
	transition: 1s all ease;
	opacity: 0.5;
}

.floatTOC:hover > * {
	opacity: 1;
}

.floatTOC .tocnumber {
	display: none;
}

.floatTOC {
	transition: 1s all ease;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	border: none;
	background: #f6f6f6;
	font-size: 0.8em;
	width: 10em;
	height: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.floatTOC ul ul {
	margin: 0 0 0 0.75em;
}

.floatTOC:hover {
	width: auto;
	overflow: auto;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.floatTOC > * {
	transition: 1s all ease;
	opacity: 0.5;
}

.floatTOC:hover > * {
	opacity: 1;
}

.floatTOC .tocnumber {
	display: none;
}

Reduce indentation of nested list

Reduce indentation of nested list

Closes #6


/** sprite: mysprite; sprite-image: url('../../img/mysprite.png'); sprite-layout: vertical */

.header {
	background-image: url("../../img/logo.png"); /** sprite-ref: mysprite; jawr:base64-skip */
	background-repeat: no-repeat;
	height : 74px;
}

div {

	padding-top : 8px;
}

.calendar {
	background-repeat: no-repeat;
	padding-left : 20px;
	background-image: url("../../img/calendarIcons/calendar.png"); /** sprite-ref: mysprite; sprite-margin-bottom: 10px; jawr:base64-skip */
}

.clock {
	background-repeat: no-repeat;
	padding-left : 20px;
	background-image: url("jar:net/jawr/img/clock.png"); /** sprite-ref: mysprite; jawr:base64-skip*/

}

.calendar_edit {
	background-repeat: no-repeat;
	padding-left : 20px;
	background-image: url("img:/calendarIcons/calendar_edit.png"); /** sprite-ref: mysprite; jawr:base64-skip */
}

.tools {
	background-repeat: no-repeat;
	padding-left : 20px;
	background-image: url("../../img/cog.png"); /** sprite-ref: mysprite; sprite-margin-top: 10px; jawr:base64-skip */
}

Fix integration test for JAWR-246

Fix integration test for JAWR-246


html, body {
  color: #333;
  margin-top: 100px;
}

#myModal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0, 0.7);
}

.myModal-content {
  margin: 20% auto;
  border: 1px solid #f2f2f2;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  -webkit-box-shadow: 5px 5px 10px 3px #303030;
  -moz-box-shadow: 5px 5px 10px 3px #303030;
  box-shadow: 5px 5px 10px 3px #303030;
}

.myModal-header {
  border-bottom: 1px solid #c3c3c3;
  padding-bottom: 10px;
}

button {
  margin: 5px !important;
}

html, body {
  color: #333;
  margin-top: 100px;
}
.recipe-modal-content {
  border: 1px solid #f2f2f2;
  background-color: #fff;
  padding: 20px;
}

.myModal-header {
  border-bottom: 1px solid #c3c3c3;
  padding-bottom: 10px;
}

button {
  margin: 5px !important;
}

Modify CSS for modal spacing.

Modify CSS for modal spacing.


@value --blue from 'canvas-colors/styles/colors';

.canvas-title-actions {
  align-items: center;
  display: flex;
}

.template-badge {
  background: #E7E8FF;
  border: none;
  border-radius: 3px;
  color: --blue;
  cursor: pointer;
  font-size: 0.875rem;
  margin-right: 1rem;
  outline: 0;
  padding: 0.125rem 0.5rem;
}

.trigger {
  align-items: center;
  background: --blue;
  border-radius: 50%;
  display: flex;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.trigger svg {
  fill: white;
}

.menu {
  font-size: 0.875rem;
}

.menu-item {
  display: block;
  border-radius: 3px;
  line-height: 1.5;
  margin-bottom: 0.125rem;
  padding: 0.125rem 0.5rem;
}

a.menu-item {
  color: inherit;
}

.menu-item:hover,
a.menu-item:hover {
  background: --blue;
  color: white;
  cursor: pointer;
}

.menu-item:last-child {
  margin-bottom: 0;
}

@value --blue from 'canvas-colors/styles/colors';

.canvas-title-actions {
  align-items: center;
  display: flex;
}

.template-badge {
  background: #E7E8FF;
  border: none;
  border-radius: 3px;
  color: --blue;
  cursor: pointer;
  font-size: 0.875rem;
  margin-right: 1rem;
  outline: 0;
  padding: 0.125rem 0.5rem;
}

.trigger {
  align-items: center;
  background: --blue;
  border-radius: 50%;
  display: flex;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.trigger svg {
  fill: white;
}

.menu {
  font-size: 0.875rem;
}

.menu-item {
  display: block;
  border-radius: 3px;
  margin-bottom: 0.125rem;
  padding: 0.25rem 0.5rem;
}

a.menu-item {
  color: inherit;
}

.menu-item:hover,
a.menu-item:hover {
  background: --blue;
  color: white;
  cursor: pointer;
}

.menu-item:last-child {
  margin-bottom: 0;
}

Replace dubious line-height rule with padding


.jupyter-widgets.leaflet-container {
    min-height: 400px;
    overflow: hidden;
    flex: 1;
}

.jp-LinkedOutputView .jupyter-widgets.leaflet-container {
    min-height: 360px;  /* Min-height required for mirred output in jlab < 0.31.6 */
    height: 100%;
}

.leaflet-control-velocity.leaflet-control {
    background: rgba(255, 255, 255, 0.7);
    margin: 0;
    padding: 0 5px;
    color: #333;
    font-size: 11px;
}

/* Leaflet crispness override */
.crisp-image {
    /* Preserve crisp pixels with scaled up images */
    image-rendering: optimizeSpeed;             /* Legal fallback */
    image-rendering: -moz-crisp-edges;          /* Firefox        */
    image-rendering: -o-crisp-edges;            /* Opera          */
    image-rendering: -webkit-optimize-contrast; /* Safari         */
    image-rendering: optimize-contrast;         /* CSS3 Proposed  */
    image-rendering: crisp-edges;               /* CSS4 Proposed  */
    image-rendering: pixelated;                 /* CSS4 Proposed  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+           */
}

.jupyter-widgets.leaflet-container {
    height: 400px;
    overflow: hidden;
    flex: 1 1 auto;
}

.jp-LinkedOutputView .jupyter-widgets.leaflet-container {
    min-height: 360px;  /* Min-height required for mirred output in jlab < 0.31.6 */
    height: 100%;
}

.leaflet-control-velocity.leaflet-control {
    background: rgba(255, 255, 255, 0.7);
    margin: 0;
    padding: 0 5px;
    color: #333;
    font-size: 11px;
}

/* Leaflet crispness override */
.crisp-image {
    /* Preserve crisp pixels with scaled up images */
    image-rendering: optimizeSpeed;             /* Legal fallback */
    image-rendering: -moz-crisp-edges;          /* Firefox        */
    image-rendering: -o-crisp-edges;            /* Opera          */
    image-rendering: -webkit-optimize-contrast; /* Safari         */
    image-rendering: optimize-contrast;         /* CSS3 Proposed  */
    image-rendering: crisp-edges;               /* CSS4 Proposed  */
    image-rendering: pixelated;                 /* CSS4 Proposed  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+           */
}

Fix Map in VBox without changing min-height


body {
  background-color: #d5e5ed;
  background-image: url(./woodgrain.png);
}
#target {
  position: absolute;
  background-color: orange;
  height: 75px;
  width: 75px;
}
#controls {
  position: absolute;
  right: 0px;
  bottom: 0px;
}
#score {
  border: 1px solid black;
}
#about {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: black;
  color: white;
  z-index: 1002;
  overflow: auto;
}
#click {
  display: none;
  position: absolute;
  z-index: 1010;
  border: 1px solid red;
  border-radius: 5px;
  background-color: yellow;
  width: 10px;
  height: 10px;
}

body {
  background-color: #d5e5ed;
  background-image: url(./woodgrain.png);
}
#about {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: black;
  color: white;
  z-index: 1002;
  overflow: auto;
}
#click {
  display: none;
  position: absolute;
  z-index: 1010;
  border: 1px solid red;
  border-radius: 5px;
  background-color: yellow;
  width: 10px;
  height: 10px;
}
#controls {
  position: absolute;
  right: 0px;
  bottom: 0px;
}
#score {
  border: 1px solid black;
}
#target {
  position: absolute;
  background-color: orange;
  height: 75px;
  width: 75px;
}

Reorganize CSS to make items easier to find


@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hide the list while printing so it never covers anything up. */
@media print {
  #wishlist-total {
    display: none;
  }
}

/* Used when the total is loading to prevent a jarring "pop" when it appears. */
.animation-fade-in {
  animation: fade-in 150ms;
}

#wishlist-total {
  position: fixed;
  bottom: 36px;
  left: 36px;

  float: left;

  /* Make sure it's above most things, but _below_ the backdrops. */
  z-index: 1000;

  padding: 18px 27px;

  font-size: 14px;
  background-color: white;
  border: 1px solid #dddddd;
}

#wishlist-total .total-text {
  font-style: italic;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hide the list while printing so it never covers anything up. */
@media print {
  #wishlist-total {
    display: none;
  }
}

/* Used when the total is loading to prevent a jarring "pop" when it appears. */
.animation-fade-in {
  animation: fade-in 150ms;
}

#wishlist-total {
  position: fixed;
  bottom: 36px;
  left: 36px;

  float: left;

  /* Make sure it's above most things, but _below_ the backdrops. */
  z-index: 1000;

  padding: 18px 27px;

  font-size: 14px;
  background-color: white;
  border: 1px solid #dddddd;
}

/* Reduce padding when somewhat narrow. */
@media (max-width: 1024px) {
  #wishlist-total {
    bottom: 10px;
    left: 10px;
  }
}

/* Take up the entire bottom of the screen when very narrow. */
@media (max-width: 400px) {
  #wishlist-total {
    right: 0;
    bottom: 0;
    left: 0;

    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }
}

#wishlist-total .total-text {
  font-style: italic;
}

Add media queries for smaller devices

Add media queries for smaller devices

These help take up less space on smaller screens, and will be helpful
both on desktop and mobile.


.corner    { width: 200px;
             height: 80px;
             text-align: center;
             }
.navbar    { background-color: rgb(110,139,61);
             padding-top: 2em;
             }
.banner    { background-color: rgb(110,139,61);
             color: rgb(255,236,176);
             padding-left: 2em;
             }
.banner h2 { font-size: 200%; }
.content   { padding: 2em; }

.content thead { background-color: rgb(110,139,61);
                 color: rgb(255,236,176);
                 }

.content td,
.content th    { padding: .2em;
                 margin: 0em;
                 border-width: 0px;
                 vertical-align: baseline;
                 border-bottom: 2px solid rgb(110,139,61);
                 }

.content li    { margin: 0em;
                 padding-bottom: 0.75em;
                 }

Remove the need to use <p> to add space between list items.


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

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;
}
#text {
  z-index: 7;
}

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

Add styling for new text canvas

Add styling for new text canvas


.App {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.App > .header-container {
  flex: 0;
}

.App > .content {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.App > .content > .content-pane-container {
  flex: 6;
}

.App > .content > .sidebar-container {
  flex: 2;
}

.App {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.App > .header-container {
  flex: 0;
}

.App > .content {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.App > .content > .content-pane-container {
  flex: 6;
  overflow: hidden;
}

.App > .content > .sidebar-container {
  flex: 2;
  overflow: hidden;
}

Fix layout problems with overflowing path names


/* ==========================================================================
   States utilities
   ========================================================================== */

/**
 * Global states.
 * JavaScript may add/remove/toggle these classes.
 * All other states are component-scoped and use the `is-` prefix.
 */

/**
 * Completely remove from the flow and screen readers.
 */

.u-isHidden {
    display: none !important;
    visibility: hidden !important;
}

/**
 * Completely remove from the flow but leave available to screen readers.
 */

.u-isHiddenVisually {
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
}

/**
 * Control visibility without affecting flow.
 */

.u-isVisible {
    visibility: visible;
}

.u-isInvisible {
    visibility: hidden;
}

/**
 * Indicate that interaction will result in an (in)action.
 */

.u-isActionable {
    cursor: pointer;
}

.u-isDraggable {
    cursor: move;
}

.u-isDisabled {
    cursor: default;
}

/* ==========================================================================
   States utilities
   ========================================================================== */

/**
 * Global states.
 * JavaScript may add/remove/toggle these classes.
 * All other states are component-scoped and use the `is-` prefix.
 */

/**
 * Completely remove from the flow and screen readers.
 */

.u-isHidden {
    display: none !important;
    visibility: hidden !important;
}

/**
 * Completely remove from the flow but leave available to screen readers.
 */

.u-isHiddenVisually {
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
}

/**
 * Control visibility without affecting flow.
 */

.u-isVisible {
    visibility: visible !important;
}

.u-isInvisible {
    visibility: hidden !important;
}

/**
 * Indicate that interaction will result in an (in)action.
 */

.u-isActionable {
    cursor: pointer;
}

.u-isDraggable {
    cursor: move;
}

.u-isDisabled {
    cursor: default;
}

Add `!important` to visibility classes

Add `!important` to visibility classes

These need to be able to override the default visibility of any element,
so that they can be programmatically added/removed using JavaScript.


#feedback {
    border-top: 1px solid #DDD;
    margin-top: 2em;
    padding-top: 2em;
    margin-bottom: 4em;
}

#feedback ul {
    margin-left: 0;
    padding-left: 0;
    list-style-type: circle;
}

#error p {
    font-weight: bold;
}

#error small {
    display: block;
    margin-top: 1em;
}

#error small, #error small pre {
    font-size: 80%;
}

#simulationId {
    font-family: monospace;
}

#feedback {
    margin-top: 2em;
    padding-top: 2em;
    margin-bottom: 4em;
}

#feedback ul {
    margin-left: 0;
    padding-left: 0;
    list-style-type: circle;
}

#error p {
    font-weight: bold;
}

#error small {
    display: block;
    margin-top: 1em;
}

#error small, #error small pre {
    font-size: 80%;
}

#simulationId {
    font-family: monospace;
}

Remove top border to feedback frame

Remove top border to feedback frame


.goods-payment-challenge-frame {
  width: 250px;
  height: 400px;
  border: 0;
  box-shadow: none;
}

.goods-payment-challenge-frame {
  width: 420px;
  height: 420px;
  border: 0;
  box-shadow: none;
  display: block;
}

Tweak 3DS payment challenge iframe style


/* Custom radio-checkbox */
.radio, .checkbox {
	padding: 0 5px 0 0;
	background: url(../images/radio-checkbox.png) no-repeat;
	display: block;
	clear: left;
	float: left;
	position:relative;
	top:3px
}
/* radio */
.radio {background-position:0 0;height:13px;width:13px}
.radio-checked{background-position:0 -13px}
/* checkbox */
.checkbox    {background-position:-18px 0;height:15px;width:14px}
.checkbox-checked {background-position:-18px -15px}
.none {display:none}

/* REQUIRED CSS */
/* Custom radio-checkbox */
.radio, .checkbox {
	background: url(../images/radio-checkbox.png) no-repeat;
	padding: 0 5px 0 0;
	top:3px;
	/* don't need to modify this line */float:left;clear:left;position:relative;
}

/* radio */
.radio {background-position:0 0;height:13px;width:13px}
.radio-checked{background-position:0 -13px}

/* checkbox */
.checkbox {background-position:-18px 0;height:15px;width:14px}
.checkbox-checked {background-position:-18px -15px}

/* hide class ( addClass() is faster than hide() ) */
.hideInput {display:none}

Reorganize and comment code. Also remove of display:block (float already makes the element display as block)


/* reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* page */
.page-wrapper {
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
}

/* box */
.box-content {
    padding:20px;
    background-color: #FFF;
}

textarea {
    background-color:#FAFAFA;
    border:#EFEFEF solid 1px;
    color:#333;
    height:150px;
    width:100%;
}

/* reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* general */
body {
    background-color: #EFEFEF;
}

/* page */
.page-wrapper {
    margin: 0 auto;
    width: 960px;
    max-width: 100%;
}

/* box */
.box-content {
    padding:20px;
    background-color: #EFEFEF;
}

textarea {
    background-color:#FAFAFA;
    border:#EFEFEF solid 1px;
    color:#333;
    height:150px;
    width:100%;
}

/* richtext custom style */
.richText {
    margin-top: 40px;
    -webkit-box-shadow: 0 0 20px 0 #999;
    -moz-box-shadow: 0 0 20px 0 #999;
    box-shadow: 0 0 20px 0 #999;
}

Update custom style for the example

Update custom style for the example


ember-snip {
  display: block;
  overflow: auto;
}

ember-snipee {
  pointer-events: none;
  overflow: hidden;
  position: absolute;
  will-change: top, left, width, height;
  box-shadow: inset  1px  1px 0 0 rgba(28, 77, 70, 0.9),
              inset -1px -1px 0 0 rgba(28, 77, 70, 0.9);
  background-color: rgba(28, 77, 70, 0.666);
  z-index: 10;
}

ember-snip {
  display: block;
}

ember-snipee {
  pointer-events: none;
  overflow: hidden;
  position: absolute;
  will-change: top, left, width, height;
  box-shadow: inset  1px  1px 0 0 rgba(28, 77, 70, 0.9),
              inset -1px -1px 0 0 rgba(28, 77, 70, 0.9);
  background-color: rgba(28, 77, 70, 0.666);
  z-index: 10;
}

Remove overflow style property from ember-snip


.business-process-revision-box {
	margin: 22px -20px;
	padding: 21px 20px;
	background: var(--light-background);
	border-top: 1px solid var(--light-text);
	border-bottom: 1px solid var(--light-text);
}

.business-process-revision-box-header {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #e3e3e3;
	padding: 0 0 10px;
	margin-bottom: 22px;
}

.business-process-revision-box-controls {
	vertical-align: middle;
	line-height: 22px;
}

.business-process-revision-box-controls a {
	vertical-align: text-bottom;
}

.business-process-revision-box .form-elements > li {
	display: inline-block;
	padding: 0 8px;
	vertical-align: middle;
}

.business-process-revision-selected-document {
	display: block;
}

.business-process-revision-box .business-process-costs-list {
	display: block;
	width: 100%;
}

.business-process-revision-box {
	margin: 22px -20px;
	padding: 21px 20px;
	background: var(--light-background);
	border-top: 1px solid var(--light-text);
	border-bottom: 1px solid var(--light-text);
}

.business-process-revision-box-header {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #e3e3e3;
	padding: 0 0 10px;
	margin-bottom: 22px;
}

.business-process-revision-box-controls {
	vertical-align: middle;
	line-height: 22px;
}

.business-process-revision-box-controls a {
	vertical-align: text-bottom;
}

.business-process-revision-box .form-elements > li {
	display: inline-block;
	padding: 0 8px;
	vertical-align: top;
}

.business-process-revision-box .form-elements > li > input[type="submit"],
.business-process-revision-box .form-elements > li > button[type="submit"] {
	margin-top: 6px;
}

.business-process-revision-box .form-elements > li .dbjs-input-component .input {
	width: auto;
	max-width: 260px;
}

.business-process-revision-selected-document {
	display: block;
}

.business-process-revision-box .business-process-costs-list {
	display: block;
	width: 100%;
}

Update document revision form style

Update document revision form style


/**
 * Copyright 2015 Google Inc. All Rights Reserved.
 *
 * 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.
 */

body {
    background: #fafafa;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #333;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

paper-material {
    display: inline-block;
    background: white;
    box-sizing: border-box;
    margin: 16px;
    padding: 16px;
    border-radius: 2px;
}

#papertoggle {
    /* Temporary workaround until paper-icon-button works with the drawer panel */
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='38'><path d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/></svg>") no-repeat center;
    width: 38px;
    height: 38px;
    border: none;
    margin: 20px 0px 10px 10px;
}

Remove paper styles from .css

Remove paper styles from .css


:root {
  /* SLURP palette constants */
  --SLURP-BLUE: #264653;
  --SLURP-CYAN: #2A9D8F;
  --SLURP-YELLOW: #E9C46A;
  --SLURP-ORANGE: #F4A261;
  --SLURP-RED: #E76F51;
  --SLURP-OFFWHITE: #FFFDFA;
  --SLURP-GRAY: #545352;
}

#logo64 {
  height: 64px;
  width: 64px;
}

#logo256 {
  height: 256px;
  width: 256px;
}

:root {
  /* SLURP palette constants */
  --SLURP-BLUE: #264653;
  --SLURP-CYAN: #2A9D8F;
  --SLURP-YELLOW: #E9C46A;
  --SLURP-ORANGE: #F4A261;
  --SLURP-RED: #E76F51;
  --SLURP-OFFWHITE: #FFFDFA;
  --SLURP-GRAY: #545352;
}

html, body, #root, #root>div, #root>div>* {
  height: 100%
}

#logo64 {
  height: 64px;
  width: 64px;
}

#logo256 {
  height: 256px;
  width: 256px;
}

Make App span at least the entire window


/* Empty. Add your own CSS if you like */

body {
  height: 100%;
}

/* ion-content makes an inner wrapper */
ion-content, ion-content > * {
  height: 100%
}

tocker {
  display: block;
  position: relative;
  height: 50%;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid #eee;
  transition: background-color 2s;
}

tocker.dead {
  background-color: #f00;
}

tocker:first-child {
  transform: rotate(180deg);
}

tocker .tocker-text {
  position: relative;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  font-size: 5em;
  color: #aaa;
  transition: color 0.5s;
}

tocker.active .tocker-text {
  color: #444;
}

tocker .tocker-progress {
  display: block;
  position: absolute;
  bottom: 0px;
  height: 5px;
  width: 100%;
  background-color: #ccc;
  transition: background-color 0.5s;
  transition: width .3s;
}

tocker.active .tocker-progress {
  background-color: #f00;
}

/* Empty. Add your own CSS if you like */

body {
  height: 100%;
}

/* ion-content makes an inner wrapper */
ion-content, ion-content > * {
  height: 100%
}

tocker {
  display: block;
  position: relative;
  height: 50%;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid #eee;
  transition: background-color 2s;
}

tocker.dead {
  background-color: #af111c;
}

tocker:first-child {
  transform: rotate(180deg);
}

tocker .tocker-text {
  position: relative;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  font-size: 5em;
  color: #aaa;
  transition: color 0.5s;
}

tocker.active .tocker-text {
  color: #444;
}

tocker .tocker-progress {
  display: block;
  position: absolute;
  bottom: 0px;
  height: 8px;
  width: 100%;
  background-color: #ccc;
  transition: background-color 0.5s;
  transition: width .3s;
}

tocker.active .tocker-progress {
  background-color: #af111c;
}

Make progress bar more prominent

Make progress bar more prominent


body {
	background-image: url(/images/backgrounds/error_bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

p {
	text-align: center;
	color: white;
}

p > a {
	color: white;
}

.big-red {
	margin: 0;
	color: #a50000;
	font-size: 72px;
	text-align: center;
}

#box {
	width: 600px;
	background: rgba(0, 0, 0, 0.7);
	padding: 16px;
	box-sizing: border-box;
	border-radius: 20px;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width: 960px) {
	#box {
		max-width: 600px;
	}
}

@media only screen and (max-width: 720px) {
	#box {
		max-width: 500px;
	}
}

@media only screen and (max-width: 490px) {
	#box {
		max-width: 400px;
	}
}

@media only screen and (max-width: 360px) {
	#box {
		max-width: 320px;
	}
}

body {
	background-image: url(/images/backgrounds/error_bg.jpg);
}

p {
	text-align: center;
	color: white;
}

p > a {
	color: white;
}

.big-red {
	margin: 0;
	color: #a50000;
	font-size: 72px;
	text-align: center;
}

#box {
	width: 600px;
	background: rgba(0, 0, 0, 0.7);
	padding: 16px;
	box-sizing: border-box;
	border-radius: 20px;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width: 960px) {
	#box {
		max-width: 600px;
	}
}

@media only screen and (max-width: 720px) {
	#box {
		max-width: 500px;
	}
}

@media only screen and (max-width: 490px) {
	#box {
		max-width: 400px;
	}
}

@media only screen and (max-width: 360px) {
	#box {
		max-width: 320px;
	}
}

Remove unnecessary properties (set in template)


.Tag-Item {
  background-color: lightblue;
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
}

span.Tag-Item + span.Tag-Item {
  margin-left: 10px;
}

.Tag-Item {
  background-color: lightblue;
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  display: inline-block;
  margin: 2px;
}

span.Tag-Item + span.Tag-Item {
  margin-left: 10px;
}

Add spacing to About page tag display

Add spacing to About page tag display


#second_from_top {
display: block;
position: relative;
left: 100px;
top: 780px;
}

#third_from_top {
display: block;
position: relative;
left: 100px;
top: 790px;
}

#fourth_from_top {
display: block;
position: relative;
left: 100px;
top: 800px;
}

#second_from_top {
display: block;
position: relative;
left: 100px;
top: 800px;
}

#third_from_top {
display: block;
position: relative;
left: 100px;
top: 810px;
}

#fourth_from_top {
display: block;
position: relative;
left: 100px;
top: 820px;
}

Fix second from top in technical

Fix second from top in technical


.custom-progress{margin-bottom:0px;}
.file-content
{
	width:100%;
	height:50%;
}
a
{
    color:rgb(0, 96, 214); /* The same shade of blue as the Alluxio logo. */
}

Make anchor be in the same color theme with logo


html,
body,
.container-main {
    height: 100%;
    width: 100%;
    margin: 0;
}

.container-main {
    overflow-y: auto;
}

.container-main.container-fixed-top {
     padding-top: 70px;
}

.container-main.container-fixed-bottom {
    padding-bottom: 70px;
}

.navbar-toggle.btn-sidebar-toggle-left {
    float: left;
    margin-left: 15px;
}

.navbar-toggle.btn-sidebar-toggle-left,
.navbar-toggle.btn-sidebar-toggle-right {
    margin-top: 5px;
    margin-bottom: 5px;
}

@media (min-width: 768px) {
    .navbar-header {
        width: 100%;
    }

    .navbar-toggle.btn-sidebar-toggle-left,
    .navbar-toggle.btn-sidebar-toggle-right {
        display: inline-block;
    }

    .navbar-toggle.btn-sidebar-toggle-left.sidebar-locked-toggle,
    .navbar-toggle.btn-sidebar-toggle-right.sidebar-locked-toggle {
        display: none;
    }
}

html,
body,
.container-main {
    height: 100%;
    width: 100%;
    margin: 0;
}

.container-main {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.container-main.container-fixed-top {
     padding-top: 70px;
}

.container-main.container-fixed-bottom {
    padding-bottom: 70px;
}

.navbar-toggle.btn-sidebar-toggle-left {
    float: left;
    margin-left: 15px;
}

.navbar-toggle.btn-sidebar-toggle-left,
.navbar-toggle.btn-sidebar-toggle-right {
    margin-top: 5px;
    margin-bottom: 5px;
}

@media (min-width: 768px) {
    .navbar-header {
        width: 100%;
    }

    .navbar-toggle.btn-sidebar-toggle-left,
    .navbar-toggle.btn-sidebar-toggle-right {
        display: inline-block;
    }

    .navbar-toggle.btn-sidebar-toggle-left.sidebar-locked-toggle,
    .navbar-toggle.btn-sidebar-toggle-right.sidebar-locked-toggle {
        display: none;
    }
}

Fix smooth scrolling on ios

Fix smooth scrolling on ios


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

/* Make the code font size bigger so its easier to read */

code {
  font-size: 90%;
}

/* Work around until the TOC becomes collapsable */

a.toctree-l4 {
  display: none;
}

a.toctree-l5 {
  display: none;
}

a.toctree-l6 {
  display: none;
}

.wy-side-nav-search {
  background-color: #333333;
}

Make mkdocs color consistent with website


.printCardWrapper {
  display: flex;
  justify-content: center;
  break-inside: avoid-page;
}

.printCard {
  width: 100%;
  margin-bottom: 20px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.75em;
  overflow-wrap: break-word;
}

.printCard td:nth-child(1) { width: 10%; }
.printCard td:nth-child(2) { width: 55%; }
.printCard td:nth-child(3) { width: 20%; }
.printCard td:nth-child(4) { width: 15%; }

.printCard td, .printCard tr {
  border: 1px solid #000;
}

.printCard tr {
  height: 100px;
}

.printCard td {
  padding: 10px;
  vertical-align: top;
}

.printCard .topRow { height: 20px; }

.printCard .topRow td {
  padding: 0;
  border: 0;
  text-align: center;
}

.id {
  text-align: center;
  vertical-align: middle;
  font-size: 1.75em;
}

.title {
  font-size: 1.75em;
}

.description {
  font-size: 0.75rem;
  vertical-align: top;
}

.printCardWrapper {
  display: flex;
  justify-content: center;
  break-inside: avoid-page;
}

.printCard {
  width: 100%;
  margin-bottom: 20px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.75em;
  overflow-wrap: break-word;
}

.printCard td:nth-child(1) { width: 10%; }
.printCard td:nth-child(2) { width: 55%; }
.printCard td:nth-child(3) { width: 20%; }
.printCard td:nth-child(4) { width: 15%; }

.printCard td, .printCard tr {
  border: 1px solid #000;
}

.printCard tr {
  height: 100px;
}

.printCard td {
  padding: 10px;
  vertical-align: top;
}

.printCard .topRow { height: 20px; }

.printCard .topRow td {
  padding: 0;
  border: 0;
  text-align: center;
}

.printCard .id {
  text-align: center;
  vertical-align: middle;
  font-size: 1.75em;
}

.title {
  font-size: 1.75em;
}

.description {
  font-size: 0.75rem;
  vertical-align: top;
}

Fix position of id cell

Fix position of id cell


h1 a {
    text-decoration: none;
    color: #333
}

.content {
    padding-top: 2em;
}

.pure-button {
    line-height: 2em;
    margin-bottom: 1em;
}

.button-success,
.button-error,
.button-warning,
.button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-success {
    background: rgb(28, 184, 65); /* this is a green */
}

.button-error {
    background: rgb(202, 60, 60); /* this is a maroon */
}

.button-warning {
    background: rgb(223, 117, 20); /* this is an orange */
}

.button-secondary {
    background: rgb(66, 184, 221); /* this is a light blue */
}

/* 48 em * 16 = 768 - 1 */
@media (max-width: 767px) {
    .header {
        padding-top: 1em;
    }

    h2.content-subhead {
        margin: 1em 0;
    }
}

h1 a {
    text-decoration: none;
    color: #333
}

.content .pure-g {
    padding-top: 2em;
}

.pure-button {
    line-height: 2em;
    margin-bottom: 1em;
}

.button-success,
.button-error,
.button-warning,
.button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-success {
    background: rgb(28, 184, 65); /* this is a green */
}

.button-error {
    background: rgb(202, 60, 60); /* this is a maroon */
}

.button-warning {
    background: rgb(223, 117, 20); /* this is an orange */
}

.button-secondary {
    background: rgb(66, 184, 221); /* this is a light blue */
}

/* 48 em * 16 = 768 - 1 */
@media (max-width: 767px) {
    .header {
        padding-top: 1em;
    }

    h2.content-subhead {
        margin: 1em 0;
    }
}

Fix to much space between header and content in main page