/*
 * This file is part of the WA Harvester.
 *
 * Licensed to the WebArchiv (WA) by Adam Brokes
 *
 * The IA 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.
 *
 * 2010
 */
#application-status ul li, #plugin-status ul li {
    display: block;
    margin-left: 1.3em;
    color: #666666;
}

#application-status ul li, #plugin-status ul li {
    display: block;
    margin-left: 1.3em;
    color: #666666;
}

table th.sortable a {
    color: white;
    text-decoration: none;
}

table th.sortable a:hover {
    text-decoration: underline;
}

ADD - css classes for th in tables

ADD - css classes for th in tables


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

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

.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 layout issue when two maps are side by side


body {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  margin: 0;
}

footer {
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.clear-fix {
  clear: both;
}

.time {
}

.broken {
  border-radius: 10px;
  background: red;
  color: white;
}

.in-progress {
  border-radius: 10px;
  background: orange;
  color: white;
}

.box {
  margin: 20px;
  padding: 20px;
  font-size: 144px;
  font-weight: bolder;
  text-align: center;
}

body {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  margin: 0;
}

footer {
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.clear-fix {
  clear: both;
}

.time {
}

.broken {
  border-radius: 10px;
  background: red;
  color: white;
}

.in-progress {
  border-radius: 10px;
  background: orange;
  color: white;
}

.box {
  margin: 20px;
  padding: 20px;
  font-size: 100px;
  font-weight: bolder;
  text-align: center;
}

[+AD] Decrease font size so project names fit.


/* Bookmark icon */
.iconBookmark {
	margin-left: 4px;
	z-index: 1060; /* in front of KmPlot dialog */
}

/* Copy bookmark input */
.bookmarkInput {
	bottom: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed; /* Take input out of flow of app controls */
}

/* Import input */
.importInput[type='file'] {
	display: none;
}

.placeholder {
	visibility: hidden;
}

/* position above the app */
.wrapper {
	margin: 5;
	position: absolute;
	right: 0;
	top: 0;
}

.help {
	justify-content: flex-end;
}

/* Bookmark icon */
.iconBookmark {
	margin-left: 4px;
	/* Using !important, because I can't out why the css ordering is wrong */
	z-index: 1060 !important; /* in front of KmPlot dialog */
}

/* Copy bookmark input */
.bookmarkInput {
	bottom: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed; /* Take input out of flow of app controls */
}

/* Import input */
.importInput[type='file'] {
	display: none;
}

.placeholder {
	visibility: hidden;
}

/* position above the app */
.wrapper {
	margin: 5;
	position: absolute;
	right: 0;
	top: 0;
}

.help {
	justify-content: flex-end;
}

Raise Bookmark menu over KM.

Raise Bookmark menu over KM.


input.parsley-success,
select.parsley-success,
textarea.parsley-success {
    color: #468847;
    background-color: #DFF0D8;
    border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
    color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #EED3D7;
}

.parsley-errors-list {
    margin: 2px 0 3px 0;
    padding: 0;
    list-style-type: none;
    font-size: 0.9em;
    line-height: 0.9em;
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;

    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -ms-transition: all .3s ease-in-;
    -moz-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
    opacity: 1;
}

Add specific theme for error rendering

Add specific theme for error rendering


:root {
  --primary-font: 'Open Sans', sans-serif;
  --rust: #a42;
  --rust-dark: #80331a;
  --border-color: #bbb;
  --border: 1px solid var(--border-color);
  --header-main-border: #dedede;
  --header-transition: 0.2s ease-in-out;
  --header-tint: #428bca;
  --header-border-radius: 4px;
  --header-accent-border: #bdbdbd;
}

/* Modify normalized styles */
button,
input,
optgroup,
select,
textarea {
  font-family: var(--primary-font);
}

html {
  box-sizing: border-box;
}

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

body {
  padding: 0 1em;
  background-color: #e1e1db;
  font-family: var(--primary-font);
}

/* stylelint-disable-next-line selector-class-pattern */
:global(.language-rust_errors) {
  & :global(.warning) {
    color: #f79a06;
  }

  & :global(.error) {
    color: #bf1b1b;
  }
}

:root {
  --primary-font: 'Open Sans', sans-serif;
  --rust: #a42;
  --rust-dark: #80331a;
  --border-color: #bbb;
  --border: 1px solid var(--border-color);
  --header-main-border: #dedede;
  --header-transition: 0.2s ease-in-out;
  --header-tint: #428bca;
  --header-border-radius: 4px;
  --header-accent-border: #bdbdbd;
}

/* Modify normalized styles */
button,
input,
optgroup,
select,
textarea {
  color: text;
  font-family: var(--primary-font);
}

html {
  box-sizing: border-box;
}

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

body {
  padding: 0 1em;
  background-color: #e1e1db;
  font-family: var(--primary-font);
}

/* stylelint-disable-next-line selector-class-pattern */
:global(.language-rust_errors) {
  & :global(.warning) {
    color: #f79a06;
  }

  & :global(.error) {
    color: #bf1b1b;
  }
}

Adjust form styles for iOS 15

Adjust form styles for iOS 15

Otherwise, the color defaults to `apple-system-blue` which is too
close to our other blues.


#map {
    margin: 10px;
    height: 250px;
    width: 480px;
}

#map-help {
    display: none;
    padding: 10px;
    width: 440px;
    height: auto;
    border-style: solid;
    border-width: 1px;
    border-color: red;
    margin: 20px;
    color: white;
    background-color: red;
}

Add custom CSS for location admin page

Add custom CSS for location admin page

This has stylings for the the google map on the page and
the help text that appears when errors happen when
geocoding


html{
  font-family: Signika;
  background: #FFFFF7;
  color: #383C40;
}

body{
  margin:0;
  top:0;
  height:100%;

}

.main-container {
  width: 80%;
  margin: auto;
}
.header{
  text-align: center;
  height: 150px;
  width: 100%;
  background: #4D5257;
  margin-bottom: 20px;
}
p#title {
  padding-top: 20px;
  margin:0;
  font-size: 4em;
  color: #FFFFF7;
  font-family: Lobster;
}

p#subtitle{
  position: relative;
  margin-top: -7px;
  font-size: 1.4em;
  color: #FFFFF7;
}

.hidden {
  display: none;
}

footer a{
  color: #8EDB7C;
}

footer{
  text-align: center;
  bottom: 0;
  width: 100%;
  position: relative;;
}

.main-container{
  margin:auto;
  width: 70%;
}

html{
  font-family: Signika;
  background: #FFFFF7;
  color: #383C40;
}

body{
  margin:0;
  top:0;
  height:100%;

}

.main-container {
  width: 80%;
  margin: auto;
}
.header{
  text-align: center;
  height: 150px;
  width: 100%;
  background: #4D5257;
  margin-bottom: 20px;
}
p#title {
  padding-top: 20px;
  margin:0;
  font-size: 4em;
  color: #FFFFF7;
  font-family: Lobster;
}

p#subtitle{
  position: relative;
  margin-top: 5px;
  font-size: 1.2em;
  color: #FFFFF7;
}

.hidden {
  display: none;
}

footer a{
  color: #8EDB7C;
}

footer{
  text-align: center;
  bottom: 0;
  width: 100%;
  position: relative;;
}

.main-container{
  margin:auto;
  width: 70%;
}

Update subtitle to be smaller

Update subtitle to be smaller


html {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #06262C;
  color: white;
  font-family: 'Ubuntu', sans-serif;
}

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

header {
  height: 50px;
  position: relative;
}

h1 {
  margin: 0;
}

.highlight {
  color: #FAA137;
}

.github-logo {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 40px;
  height: 40px;
}

.spinning {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 1500ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

.pull-request {
  margin: 30px;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #06262C;
  color: white;
  font-family: 'Ubuntu', sans-serif;
}

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

header {
  height: 40px;
  position: relative;
}

h1 {
  margin: 0;
}

.highlight {
  color: #FAA137;
}

.github-logo {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 40px;
  height: 40px;
}

.spinning {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 1500ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

.pull-request {
  margin: 1.9em;
  font-size: 2.1em;
}

.repository {
  display: inline-block;
  margin-right: 0.5em;
}

.meta {
  font-size: 0.8em;
}

Adjust font sizes and margins

Adjust font sizes and margins


/* app css stylesheet */

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

/* Parents of the .noteArea need to have a height
 * of 100% if we want to use CSS for setting the
 * height of .noteArea as a percentage.
 */
html, body, .view, .container {
	height: 100%;
}

.view {
	padding-left: 25%;
}

.menu {
	float: left;
	padding-right: 1ex;
}

.hidden {
	visibility: hidden;
}

.noteArea {
	height: 75%;
	width: 50%;
	margin-left: -26px;
}

#home-icon {
	font-size: 1px;
	margin-left: -150%;
}
#home-icon a {
	color: #aaa;
	text-decoration: none;
}
#home-icon:hover a {
	color: #333;
}

/* app css stylesheet */

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

/* Parents of the .noteArea need to have a height
 * of 100% if we want to use CSS for setting the
 * height of .noteArea as a percentage.
 */
html, body, .view, .container {
	height: 100%;
}

.view {
	padding-left: 25%;
}

.menu {
	float: left;
	padding-right: 1ex;
}

.hidden {
	visibility: hidden;
}

.noteArea {
	height: 75%;
	width: 50%;
	margin-left: -26px;

	padding: 4.5em;
	padding-top: 1em;

	border-top: none;
	border-bottom: none;
	border-color: #ccc;

	outline: none;
}

#home-icon {
	font-size: 1px;
	margin-left: -150%;
}
#home-icon a {
	color: #aaa;
	text-decoration: none;
}
#home-icon:hover a {
	color: #333;
}

Make the note area less harsh

UX: Make the note area less harsh

Soften the edges of the note area, so that
it flows more natrually with the rest of
the page.

Change-Id: Ic6078e2da74602d4e64c847a82a64b78d3f647bc


.edit-page-invitation {
    margin: 1.5rem 0;
    padding: 0.7rem;
    font-size: 0.8rem;
    color: #887766;
    text-align: center;
    border-radius: 3px;
    background-color: #fcf5e0;
}

iframe {
    border: 0;
}

/* anchor.js override */
@media (max-width: 640px) {
  .anchorjs-link {
    display: none;
  }
}

.edit-page-invitation {
    margin: 1.5rem 0;
    padding: 0.7rem;
    font-size: 0.8rem;
    color: #887766;
    text-align: center;
    border-radius: 3px;
    background-color: #fcf5e0;
}

iframe {
    border: 0;
}

ul > li > p {
    margin: 0;
}

/* anchor.js override */
@media (max-width: 640px) {
  .anchorjs-link {
    display: none;
  }
}

Remove margin from `p` inside `ul`.

Remove margin from `p` inside `ul`.


.technology-justify {
	text-align: justify;
}
.left-image {
	display: flex;
	justify-content: center;
}

.left-image p {
	text-align: justify;
}

.right-image {
	display: flex;
	justify-content: center;
}

.right-image p {
	text-align: justify;
}

.logo-image {
	flex-shrink: 0;
}

.top-image {
	width: 100%;
}

.top-image p {
	text-align: justify;
}

.left-image img {
	max-width: 200px;
}

.right-image img {
	max-width: 200px;
}

.top-image-small {
	display: flex;
	justify-content: center;
}

.top-image-small img {
	max-width: 200px;
}
.tech-paragraph {
	padding: 0 25px;
}

:not(pre) > code {
	user-select: all;
	-webkit-user-select: all;
	-moz-user-select: all;
	-ms-user-select: all;
}

Set inline code blocks to select all

Set inline code blocks to select all

Another quality of life change.
When selecting any portion of an inline code block (i.e. `foo` and not
```foo```), everything in the inline code block will be highlighted.


/*
 * MODALS
 */

.modal-backdrop {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  opacity: 0;
  transition: 0.5s display;
}

.modal {
  display: inline-block;
  position: relative;
  background: white;
  width: auto;
  height: 1;
  top: 50vh;
  transform: translateY(-50%);
  text-align: initial;
}

modal-active {
    opacity: 1s;
}

/*
 * MODALS
 */

.modal-backdrop {
    position: absolute;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    opacity: 0;
    transition: 0.5s display;
}

.modal {
    display: inline-block;
    position: relative;
    background: white;
    width: auto;
    height: 1;
    top: 50vh;
    transform: translateY(-50%);
    text-align: initial;
}

.modal-active {
    opacity: 1;
}

Fix typos and clean css

Fix typos and clean css


/**
 * General styling for the documentation (Site component)
 *
 */

@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600');

html {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Work Sans', 'Helvetica', sans-serif;
}

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

.site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.site__container {
    width: 960px;
    margin: 0 auto;
    padding: 1.5em;
}

.site__content {
    flex: 1 1 auto;
}

.site__footer {
    flex: 0 0 auto;
}

.site__footer .site__container {
    padding: 1em 1.5em;
    border-top: 1px solid #dedede;
}

/**
 * General styling for the documentation (Site component)
 *
 */

@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600');

html {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Work Sans', 'Helvetica', sans-serif;
}

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

.site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.site__container {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5em;
}

.site__content {
    flex: 1 1 auto;
}

.site__footer {
    flex: 0 0 auto;
}

.site__footer .site__container {
    padding: 1em 1.5em;
    border-top: 1px solid #dedede;
}

Fix in docs site container styling

Fix in docs site container styling


/*Resets*/
html {
    width: 100%;
    height: 100%;

    padding: 0;
    margin: 0;
    border: 0;

    font-family: sans-serif;
}

#background-image {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    opacity: 0.6;

    z-index: -100;
}

#oninstall, #onupdate {
  position: absolute;
  width: 50%;
  height: 20%;
  top: 25%;
  right: 25%;
}
#oninstall {

.header h1 {
  font-size: 3.4em;
  font-weight: normal;
  text-align: center;
}

.links {
  text-align: center;
}

.links a {
    border: none;
    cursor: pointer;
    color:black;
    text-decoration: none;

    background-color: rgba(0, 147, 135, 0.5);
    font-size: 1.2em;
    opacity: 0.7;
    transition: opacity 500ms;

    padding: 10px;

}

.links a:hover {
    opacity: 1.0;
    transition: opacity 500ms;
}

.links a:focus {
    outline: none;
}

/*Resets*/
html {
    width: 100%;
    height: 100%;

    padding: 0;
    margin: 0;
    border: 0;

    font-family: sans-serif;
}

#background-image {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    opacity: 0.6;

    z-index: -100;
}

#oninstall, #onupdate {
  position: absolute;
  width: 50%;
  height: 20%;
  top: 25%;
  right: 25%;
}

.header h1 {
  font-size: 3.4em;
  font-weight: normal;
  text-align: center;
}

.links {
  text-align: center;
}

.links a {
    border: none;
    cursor: pointer;
    color:black;
    text-decoration: none;

    background-color: rgba(0, 147, 135, 0.5);
    font-size: 1.2em;
    opacity: 0.7;
    transition: opacity 500ms;

    padding: 10px;

}

.links a:hover {
    opacity: 1.0;
    transition: opacity 500ms;
}

.links a:focus {
    outline: none;
}

Remove useless oninstall block in CSS

Remove useless oninstall block in CSS


/*
 * Copyright 2019, TeamDev. All rights reserved.
 *
 * Redistribution and use in source and/or binary forms, with or without
 * modification, must retain the above copyright notice and the following
 * disclaimer.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
button {
  float: right;
}

::ng-deep app-task-item {
  display:flex;
  flex-grow:1;
}

.task-description {
  display:inline-block;
  width:100%;
}

/*
 * Copyright 2019, TeamDev. All rights reserved.
 *
 * Redistribution and use in source and/or binary forms, with or without
 * modification, must retain the above copyright notice and the following
 * disclaimer.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
button {
  float: right;
}

::ng-deep app-task-item {
  display: flex;
  flex-grow: 1;
}

.task-description {
  text-align: center;
  display: inline-block;
  width: 100%;
}

Align task description to the center of the list item.


/*!
	* Example CSS Stylesheet for
	* jsonForms v0.1.1
	* (c) 2014 jMash
	*   jonmash.ca
	*   github.com/jonmash
	* Released under the MIT license
*/

.error-box {
	padding:25px;
	margin-top:25px;
}

.html-box {
	overflow-x:scroll;
	word-wrap:normal;
	margin-top:15px;
}

.jsonform-container {
	margin: 5px;
}

.str { color:#181; font-style:italic }
.kwd { color:#369 }
.com { color:#666 }
.typ { color:#c40 }
.lit { color:#900 }
.pun { color:#000; font-weight:bold  }
.pln { color:#333 }
.tag { color:#369; font-weight:bold  }
.atn { color:#939; font-weight:bold  }
.atv { color:#181 }
.dec { color:#606 }

Add header to CSS file

Add header to CSS file


.heading {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  background: #f5f5f5;
}

.content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 1rem;
  margin: 0 auto;
  max-width: 64rem;
}

.content a {
  text-decoration: none;
}

.content button {
  cursor: pointer;
  margin: 0;
}

.header {
  color: #63699d;
  font-size: 2rem;
  margin: 0;
}

.content a:hover .header {
  color: #8186b3;
}

.components {
  text-align: right;
  color: #555;
}

.components > button:last-child, .components > a:last-child {
  margin-right: -0.5rem;
}

.logout {
  background: #323a7f;
  color: #f7f7f7;
  padding: 1rem;
  text-decoration: none;
}

.logout:hover {
  background: #515ccc;
}

.heading {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  background: #f5f5f5;
}

.content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 1rem;
  margin: 0 auto;
  max-width: 64rem;
}

.content a {
  text-decoration: none;
}

.content a, .content button {
  display: inline-block;
}

.content button {
  cursor: pointer;
  margin: 0;
}

.header {
  color: #63699d;
  font-size: 2rem;
  margin: 0;
}

.content a:hover .header {
  color: #8186b3;
}

.components {
  text-align: right;
  color: #555;
}

.components > button:last-child, .components > a:last-child {
  margin-right: -0.5rem;
}

.logout {
  background: #323a7f;
  color: #f7f7f7;
  padding: 1rem;
  text-decoration: none;
}

.logout:hover {
  background: #515ccc;
}

Fix heading menu for Firefox

Fix heading menu for Firefox


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

#home-button {
  display: none;
}

#search-container {
    max-width: 200px;
}

Set max-width:200px on the search bar

Set max-width:200px on the search bar


.iconKey {
    background-image: url(./img/dialog-password.png) !important;
}
.iconHelp {
    background-image: url(./img/help-browser.png) !important;
}

.x-form-field-wrap .project-php, .x-form-field-wrap .project-pear {
    top: 5px;
    left: 5px;
}

.project-php {
    background-image: url(./img/project_php.png) !important;
    height: 12px;
    width: 21px;
}

.project-pear {
    background: url(./img/project_pear.png) no-repeat top left;
    height: 11px;
    width: 11px;
}

#app-title {
    margin: 5px 0px 5px 110px;
    font-weight: bold;
    font-size: 20px;
}

#app-description {
    margin-left: 110px;
    font: bold 13px tahoma, arial, helvetica;
    color: #444;
}

#app-logo {
    float: left;
}

.iconKey {
    background-image: url(./img/dialog-password.png) !important;
}
.iconHelp {
    background-image: url(./img/help-browser.png) !important;
}

.iconGoogle {
    background-image: url(./img/google.png) !important;
}
.iconFacebook {
    background-image: url(./img/icon_facebook.png) !important;
}
.iconTwitter {
    background-image: url(./img/icon_twitter.png) !important;
}

.x-form-field-wrap .project-php, .x-form-field-wrap .project-pear {
    top: 5px;
    left: 5px;
}

.project-php {
    background-image: url(./img/project_php.png) !important;
    height: 12px;
    width: 21px;
}

.project-pear {
    background: url(./img/project_pear.png) no-repeat top left;
    height: 11px;
    width: 11px;
}

#app-title {
    margin: 5px 0px 5px 110px;
    font-weight: bold;
    font-size: 20px;
}

#app-description {
    margin-left: 110px;
    font: bold 13px tahoma, arial, helvetica;
    color: #444;
}

#app-logo {
    float: left;
}

Add icon for external log-in

Add icon for external log-in


/*
* css from datatable-scroll-skin.css
*/
.aui-table-scroll-columns .aui-table-header {
    padding: 0;
}

.aui-table-x-scroller,
.aui-table-y-scroller-container {
    border: 1px solid #ddd;
}

.aui-table-scrollable-x .aui-table-y-scroller-container,
.aui-table-x-scroller .aui-table-table,
.aui-table-y-scroller .aui-table-table {
    border: 0 none;
}

/*
* custom
*/
.aui-table-header {
    background: #fff;
    border-bottom: 1px;
    border-bottom-color: #ddd;
    border-bottom-style: solid;
}

.aui-table-sort-indicator {
    _background: url(sort-arrow-sprite-ie.png) no-repeat 0 0;
    background: url(sort-arrow-sprite.png) no-repeat 0 0;
}

.aui-table-sorted {
    background: #f9f9f9;
}

Add datatable sort background indicator

Add datatable sort background indicator


Revert "CSS Fix for Slider"

Revert "CSS Fix for Slider"

This reverts commit 11f22a3e6a291bcd77f31102ab3ffc5d4a09ef85.


/**
 * digimarks styling
 */

/** Navigation **/

nav .button-collapse
{
    /* Fix for misalignment of hamburger icon */
    margin: 0;
}

nav .button-collapse i
{
    /* Make the hamburger icon great again */
    font-size: 2.7rem;
}

/** Cards and tags **/

.card .card-content,
.card .card-reveal
{
    padding: 12px;
}

.card.tiny
{
    height: 140px;
    overflow: hidden;
}

.card.tiny .card-title
{
    font-size: 18px;
}

.card .card-reveal .digimark-card-header,
.card .digimark-card-header.activator,
.chip.clickable
{
    cursor: pointer;
    /*display: block;*/
}

.card .digimark-card-content
{
    padding-top: 10px;
}

.card-image i
{
    padding: 5px 0 0 15px;
}

.card.horizontal .card-image img.favicon
{
    height: 60px;
    width: 60px;
}

/**
 * digimarks styling
 */

/** Navigation **/

nav .sidenav-trigger
{
    /* Fix for misalignment of hamburger icon */
    margin: 0;
}

nav .sidenav-trigger i
{
    /* Make the hamburger icon great again */
    font-size: 2.7rem;
}

/** Cards and tags **/

.card .card-content,
.card .card-reveal
{
    padding: 12px;
}

.card.tiny
{
    height: 140px;
    overflow: hidden;
}

.card.tiny .card-title
{
    font-size: 18px;
}

.card .card-reveal .digimark-card-header,
.card .digimark-card-header.activator,
.chip.clickable
{
    cursor: pointer;
    /*display: block;*/
}

.card .digimark-card-content
{
    padding-top: 10px;
}

.card-image i
{
    padding: 5px 0 0 15px;
}

.card.horizontal .card-image img.favicon
{
    height: 60px;
    width: 60px;
}

Make the Hamburger great again

Make the Hamburger great again


div {
  visibility: hidden;
  position: fixed;
  min-width: 250px;
  margin-left: -125px;
  text-align: center;
  padding: 16px;
  background-color: #ff9600;
  color: #fff;
  z-index: 201;
  top: 30px;
  left: 50%;
}

.info {
  background-color: #0089bd;
}

.success {
  background-color: #61A85D;
}

.error {
  background-color: #ee4d3e;
}

.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

div {
  visibility: hidden;
  position: fixed;
  min-width: 250px;
  margin-left: -125px;
  text-align: center;
  padding: 16px;
  background-color: #ff9600;
  color: #fff;
  z-index: 9999;
  top: 30px;
  left: 50%;
}

.info {
  background-color: #0089bd;
}

.success {
  background-color: #61A85D;
}

.error {
  background-color: #ee4d3e;
}

.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

Update toastr z-index to be higher than header


#fe-file_upload_form label {
    color: #000000;
    width: 100%;
    float: none;
}

#fe-file_upload_form .upload_section span {
    vertical-align: middle;
}

#fe-file_upload_form .filename {
    color: #59a80f;
}

#fe-file_upload_form .file_upload_button {
    position: relative;
    overflow: hidden;
}

#fe-file_upload_form input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    cursor: pointer;
}

#fe-file_upload_form .progress {
    margin-top: 10px;
}

#fe-file_upload_form .bar {
    width: 0;
    height: 20px;
    background: #59a80f;
}

#fe-file_upload_form label {
    color: #000000;
    width: 100%;
    float: none;
}

#fe-file_upload_form .upload_section span {
    vertical-align: middle;
}

#fe-file_upload_form .filename {
    color: #59a80f;
}

#fe-file_upload_form .file_upload_button {
    position: relative;
    overflow: hidden;
}

#fe-file_upload_form input {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    cursor: pointer;
    height: 100%;
}

#fe-file_upload_form .progress {
    margin-top: 10px;
}

#fe-file_upload_form .bar {
    width: 0;
    height: 20px;
    background: #59a80f;
}

Add height to file input button so that the whole button is clickable


.root {
  padding: 0.25em;
  overflow: auto;
  height: 100%;
  box-sizing: border-box;
}

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

.root {
  padding: var(--extra-small-padding);
  overflow: auto;
  box-sizing: border-box;
  max-height: calc(100vh - 198px);
}

Set max-height of Timeline component

[desk-tool] Set max-height of Timeline component


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

.main {
	width:50%;
	margin: 5% auto;
	padding: 50px;
	background: #CDFDCA;
	border-radius: 10px;
	min-height : 60%;
}

ul {
	padding: 0;
	margin: 0;
}

ul li {
	list-style: none;
	height: 30px;
	line-height: 30px;
}

ul li a,span {
	display: inline-block;
	width: 100px;
	text-decoration: none;
}

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

.main {
	width:50%;
	margin: 5% auto;
	padding: 50px;
	background: #CDFDCA;
	border-radius: 10px;
	min-height : 60%;
}

ul {
	padding: 0;
	margin: 0;
}

ul li {
	list-style: none;
	height: 30px;
	line-height: 30px;
}

ul li a,span {
	display: inline-block;
	width: 100px;
	padding-right: 30px;
	overflow: hidden;
	text-decoration: none;
}

Adjust layout of file list

Adjust layout of file list


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

.wrapper {
  position: relative;
  top: 0.05rem;
  float: right;
  margin-left: 3px;

  :global(.icon) {
    cursor: pointer;
    font-size: 1.25rem;
    margin: 0 0.15rem 0 0;

    &:global(.edit), &:global(:last-child) {
      margin-right: 0;
    }
  }

  &:global(.disabled .icon) {
    color: var(--semantic-light-grey);
    pointer-events: none;
  }
}

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

.wrapper {
  position: relative;
  top: 0.05rem;
  float: right;
  margin-left: 3px;

  :global(.icon) {
    cursor: pointer;
    font-size: 1.4rem;
    margin-right: 0.4rem;

    &:global(:last-child) {
      margin-right: 0;
    }

    @media (min-width: 768px) {
      font-size: 1.25rem;
      margin-right: 0.25rem;

      &:global(.edit) {
        margin-right: 0;
      }
    }
  }

  &:global(.disabled .icon) {
    color: var(--semantic-light-grey);
    pointer-events: none;
  }
}

Update icons margins such that they're larger on mobile


iframe,
.roumingLista,
.roumingList .sidebar,
.roumingList>br,
td.masoBody,
.adsys,
.adsbygoogle,
td[height="104"]
{
	display:none ! important;
}

a img {
	transition: max-width .5s ease, max-height .5s ease;
}

.scaledRouming {
	position: relative;
	display: inline-block;
}

.scaledRouming .floatPanel {
	position:absolute;
	top: 10px;
	left: 10px;
	opacity: 0;
	transition: opacity .4s linear;
	z-index: 100;
}

.scaledRouming:hover .floatPanel {
	opacity:1;
}

.roumingButton a,
.masoButton a,
.roumingForumTitle a,
.masoForumTitle a
{
	display: inline-block;
	transition: transform .2s cubic-bezier(0.1, -0.6, 0.2, 0);
}

.roumingButton a.activated,
.masoButton a.activated
{
	transform: scale(1.5);
}

.roumingForumTitle a.activated,
.masoForumTitle a.activated
{
	transform: scale(3);
}

.roumingLista,
.roumingList .sidebar,
.roumingList>br,
td.masoBody,
.adsys,
.adsbygoogle,
td[height="104"]
{
	display:none ! important;
}

iframe {
	display: none;
}
iframe.youtube-player {
	display: block;
}

a img {
	transition: max-width .5s ease, max-height .5s ease;
}

.scaledRouming {
	position: relative;
	display: inline-block;
}

.scaledRouming .floatPanel {
	position:absolute;
	top: 10px;
	left: 10px;
	opacity: 0;
	transition: opacity .4s linear;
	z-index: 100;
}

.scaledRouming:hover .floatPanel {
	opacity:1;
}

.roumingButton a,
.masoButton a,
.roumingForumTitle a,
.masoForumTitle a
{
	display: inline-block;
	transition: transform .2s cubic-bezier(0.1, -0.6, 0.2, 0);
}

.roumingButton a.activated,
.masoButton a.activated
{
	transform: scale(1.5);
}

.roumingForumTitle a.activated,
.masoForumTitle a.activated
{
	transform: scale(3);
}

Fix video in HTML 5

Fix video in HTML 5


.alert-debug {
  background-color: #fff;
  border-color: #d6e9c6;
  color: #000; }

.alert-error {
  background-color: #f2dede;
  border-color: #eed3d7;
  color: #b94a48; }

@media (max-width: 47.9em) {
  .navbar-nav .nav-item {
    display: inline-block;
    float: none;
    width: 100%; }
  .navbar-nav .nav-item + .nav-item {
    margin-left: 0; }
  .nav.navbar-nav.pull-right {
    float: none !important; } }

[hidden][style="display: block;"] {
  display: block !important; }

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

footer {
  border-top: 1px solid black;
  margin-top: 2em;
  font-size: small;
}

.cv-sidebar {
  float: right;
  width: 40%;
  margin: 1em 1em;
}

code {
  white-space: pre;
}

Make sure code blocks are rendered as pre-formatted


/* Main styles */

body {
	padding-top: 70px;
}

.optional {
	background-color: #f4f6f8;
	padding: 0.5em;
}

.text-muted.small {
	font-style: italic;
}

.label a {
	color: #fff;
}
h1 .label, h2 .label, h3 .label {
	font-size: 50%;
}
h1 .label-default, h2 .label-default, h3 .label-default {
	background-color: #bbb;
}
h3 {
	margin-top: 2em;
}

.panel-body .table {
	margin-bottom: 0;
}

.form-toolbar .btn {
	padding: 0;
}

tr.table-section {
	text-transform: uppercase;
}

input, select, textarea {
	color: #333 !important;  /* Bootstrap 3's #555 is excessively low-contrast */
}

/* Left menu */
.nav-sidebar {
	margin: 0 -21px 20px -20px;
}
.nav-sidebar .active, .nav-sidebar .active:hover {
	color: #fff;
	background-color: #428bca;
}
.nav-sidebar .nav-second-level .active, .nav-sidebar .nav-second-level .active:hover {
	color: #fff;
	background-color: #62abea;
}
.nav-sidebar .nav-second-level {
	padding-left: 30px;
}
.nav-sidebar .nav-second-level li {
	display: inline-block;
}
.sidebar {
	background-color: #f5f5f5;
	border-right: 1px solid #eee;
	left: 0;
	display: block;
}
@media (min-width: 768px) {
	.sidebar {
		position: fixed;
		bottom: 0;
		z-index: 1000;
		top: 51px;
		padding: 20px;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.nav-sidebar .nav-second-level li {
		display: block;
	}
}

Move non-component CSS back to application


/*-----------------------------------------------------------------------------
| Copyright (c) 2014-2016, Jupyter Development Team.
|
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/
.jp-Notebook-panel {
  display: flex;
  flex-direction: column;
}

.p-Widget.jp-NBToolbar {
  flex: 0 0 auto;
}

.p-Widget.jp-Notebook-container {
  flex: 1 1 auto;
}

.jp-InputArea {
  display: flex;
  flex-direction: row;
}

.jp-InputArea-prompt {
  flex-grow: 0;
  flex-shrink: 0;
}

.jp-InputArea-editor {
  flex-grow: 1;
  flex-shrink: 1;
}

.jp-Console-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.p-Widget.jp-Console {
  overflow: auto;
}

/*-----------------------------------------------------------------------------
| Copyright (c) 2014-2016, Jupyter Development Team.
|
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/
.jp-Notebook-panel {
  display: flex;
  flex-direction: column;
}

.p-Widget.jp-NBToolbar {
  flex: 0 0 auto;
}

.p-Widget.jp-Notebook-container {
  flex: 1 1 auto;
}

.jp-InputArea {
  display: flex;
  flex-direction: row;
}

.jp-InputArea-prompt {
  flex-grow: 0;
  flex-shrink: 0;
}

.jp-InputArea-editor {
  flex-grow: 1;
  flex-shrink: 1;
}

.jp-MarkdownCell-renderer.p-Widget {
  user-select: text;
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}

.jp-OutputArea-result.p-Widget {
  user-select: text;
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}

.jp-Console-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.p-Widget.jp-Console {
  overflow: auto;
}

Make outputs and markdown user selectable


/* app css stylesheet */

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

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

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

.menu > li {
  display: inline;
}

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

.menu > li:nth-child(1):before {
  content: "";
  padding: 0;
}
ul, li {list-style:none; padding:0; margin:0;}
li {width:auto;}
li h2 {position:absolute; width:100%; text-align:center;display:none;color:red;}
li:hover h2 {display:block;}

.masonry-brick {
  margin: 1em;
  display: none;
}

.masonry-brick.loaded {
  display: block;
}

/* app css stylesheet */

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

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

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

.menu > li {
  display: inline;
}

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

.menu > li:nth-child(1):before {
  content: "";
  padding: 0;
}
ul, li {list-style:none; padding:0; margin:0;}
li {width:auto;}
li h2 {position:absolute; width:100%; text-align:center;display:none;color:#999;}
li:hover h2 {display:block;}

.masonry-brick {
  margin: 1em;
  display: none;
}

.masonry-brick.loaded {
  display: block;
}

Change title color off black

Change title color off black


.btn-lg{
	width: 110px;
	margin-left: 20px;
}

#accounts{
	margin-top: 25px;
}

.account{
	height: 100px;
	margin-right: 35px;
}

.account .name{
	margin-top: 10px;
	font-size: 20px;
}

.account .credit{
	font-size: 30px;
}

.detail{
	margin-top: 25px;
}

.detail .name{
	margin-top: 25px;
	font-size: 40px;
}

.detail .credit{
	margin-top: -15px;
	font-size: 60px;
}

.userinfo{
	height: 239px;
}

.pager li>a{
	font-size: 30px;
}

.newuser{
	margin-top: -5px;
	font-size: 70px;
	text-align: center;
}

#newUserForm{
	margin-top: 20px;
}

#newUserForm input{
	margin-top: 20px;
	font-size: 30px;
	height: 60px;
}

.debt{
	background-color: #785D6C;
}

.btn-lg{
	width: 110px;
	margin-left: 20px;
}

#accounts{
	margin-top: 25px;
}

.account{
	height: 100px;
	margin-right: 35px;
}

.account .name{
	margin-top: 10px;
	font-size: 20px;
}

.account .credit{
	font-size: 30px;
}

.detail{
	margin-top: 25px;
}

.detail .name{
	margin-top: 25px;
	font-size: 40px;
}

.detail .credit{
	margin-top: -15px;
	font-size: 60px;
}

.userinfo{
	height: 239px;
}

.pager li>a{
	font-size: 30px;
	cursor:pointer;
}

.newuser{
	margin-top: -5px;
	font-size: 70px;
	text-align: center;
}

#newUserForm{
	margin-top: 20px;
}

#newUserForm input{
	margin-top: 20px;
	font-size: 30px;
	height: 60px;
}

.debt{
	background-color: #785D6C;
}

Change cursor on navigation pager

Change cursor on navigation pager


/* Styling for modal pop-ups. */
.pico-content {
	/* Add a scrollbar if the modal's content overflows. */
	overflow-y: auto;
}

.pico-content .pico-close {
	/* Don't show a background for the close button. */
	background: transparent !important;
	border-radius: 0 !important;
	/* Also align its right edge with the content's. */
	right: 20px !important;
}

/* Cover the whole page on small displays. */
@media (max-width 767px) {
	.pico-content {
		width: 100% !important;
		height: 100% !important;
		transform: none !important;
		top: 0 !important;
		left: 0 !important;
		margin: 0 !important;
	}
}

/* On large displays, fix the modal's width and limit its height so it
   doesn't flow beyond the page itself. */
@media (min-width 768px) {
	.pico-content {
		width: 600px;
		max-height: 85%;
		max-height: calc(100% - 100px); /* 2*top */
	}
}

/* Styling for modal pop-ups. */
.pico-content {
	/* Add a scrollbar if the modal's content overflows. */
	overflow-y: auto;
}

.pico-content .pico-close {
	/* Don't show a background for the close button. */
	background: transparent !important;
	border-radius: 0 !important;
	/* Also align its right edge with the content's. */
	right: 20px !important;
}

/* Cover the whole page on small displays. */
@media (max-width: 767px) {
	.pico-content {
		width: 100% !important;
		height: 100% !important;
		transform: none !important;
		top: 0 !important;
		left: 0 !important;
		margin: 0 !important;
	}
}

/* On large displays, fix the modal's width and limit its height so it
   doesn't flow beyond the page itself. */
@media (min-width: 768px) {
	.pico-content {
		width: 600px;
		max-height: 85%;
		max-height: calc(100% - 100px); /* 2*top */
	}
}

Fix syntax of @media declarations ported from Stylus


body {
  width: 540px;
}

.navbar-default {
  background-color: #3d3d3d;
}

.input-group-addon:first-child {
  background-color: #fff;
}

.navbar-header {
  padding-right: 8px;
  vertical-align: middle;
  line-height: 45px;
}

.nav-link-btn {
  color: #eee;
  -webkit-app-region: no-drag;
  font-size: 22px;
  margin-left: 18px;
}

.mar-horizontal-sm {
  margin-left: 2px;
  margin-right: 2px;
}

.addon {
  width: 84px;
}

#password_story {
  width: 59px
}

Update width of password story

Update width of password story


/*

  SYSTEM FONTS

*/

.system-sans-serif {
  font-family: -apple-system,
               'avenir next', avenir,
               roboto, noto,
               'helvetica neue', helvetica,
               ubuntu,
               'franklin gothic medium', 'century gothic',
               sans-serif;
}

/*
  Reference:

  https://webkit.org/blog/3709/using-the-system-font-in-web-content/
  https://en.wikipedia.org/wiki/Avenir_(typeface)
  https://www.google.com/design/spec/style/typography.html#typography-typeface

*/

/*

  SYSTEM FONTS

*/

.system-sans-serif {
  font-family: -apple-system, BlinkMacSystemFont, /* MacOS and iOS */
               'avenir next', avenir, /* MacOS and iOS */
               'Segoe UI' /* Windows */
               'lucida grande', /* Older MacOS */
               'helvetica neue', helvetica, /* Older MacOS */
               'Fira Sans', /* Firefox OS */
               roboto, noto, /* Google stuff */
               'Droid Sans', /* Old Google stuff */
               cantarell, oxygen, ubuntu, /* Linux stuff */
               'franklin gothic medium', 'century gothic', /* Windows stuff */
               sans-serif; /* Everything else */
}

/*
  References:

  https://webkit.org/blog/3709/using-the-system-font-in-web-content/
  https://en.wikipedia.org/wiki/Avenir_(typeface)
  https://www.google.com/design/spec/style/typography.html#typography-typeface

*/

Update with more updated stack.

Update with more updated stack.


/* Space out content a bit */
body {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-right: 15px;
  padding-left: 15px;
}

/* Custom page header */
.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
}

/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}

/* Customize container */
@media (min-width: 768px) {
  .container {
    max-width: 730px;
  }
}
.container-narrow > hr {
  margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
  padding: 14px 24px;
  font-size: 21px;
}

/* Supporting marketing content */
.marketing {
  margin: 40px 0;
}
.marketing p + h4 {
  margin-top: 28px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-right: 0;
    padding-left: 0;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 30px;
  }
  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
}

Include css for the narrow jumbotron layout.

The original layout can be seen here http://getbootstrap.com/examples/jumbotron-narrow/


.socialaccount.persona {
	background: url('../img/persona-logo-wordmark.png') no-repeat center center;
	background-size: 80% auto;
	padding-left: 40px;
	color: transparent;
}

.socialaccount.persona:hover {
	color: transparent;
}

a.appbar-correct {
	color: white;
}

.errorlist {
	list-style: outside none none;
}

.hide-label label {
	display: none;
}

.full-height {
	padding-top: 1%;
	padding-bottom: 1%;
}

.action-item:hover {
	cursor: pointer;
	text-decoration: line-through;
}

#checked .action-item {
	color: #9e9e9e;
}

Change the colour of checked items

Change the colour of checked items


:root {
  --widget-background-color: rgba(15, 15, 15, 0.6);
  --widget-background-color-selected: rgba(60, 60, 60, 0.5);
  --widget-border: 1px solid rgba(60, 60, 60, 0.3);
  --widget-border-bright: 1px solid rgba(80, 80, 80, 0.6);
  --widget-border-dim: 1px solid rgba(80, 80, 80, 0.2);
  --widget-border-dim: 1px solid rgba(80, 80, 80, 0.1);
  --terminal-cursor-color: rgba(255, 255, 255, 0.5);
  --terminal-cursor-background-color: rgba(10, 10, 10, 0.3);
}

:root {
  --widget-background-color: rgba(15, 15, 15, 0.6);
  --widget-background-color-selected: rgba(60, 60, 60, 0.5);
  --widget-border: 1px solid rgba(60, 60, 60, 0.3);
  --widget-border-bright: 1px solid rgba(80, 80, 80, 0.6);
  --widget-border-dim: 1px solid rgba(80, 80, 80, 0.2);
  --widget-border-dim: 1px solid rgba(80, 80, 80, 0.1);
  --terminal-cursor-color: rgba(255, 255, 255, 0.5);
  --terminal-cursor-background-color: rgba(15, 15, 15, 0.6);
}

Fix terminal cursor background color.

Fix terminal cursor background color.


:root {
  --upperColor: #333333;
  --lowerColor: #F8F8F8;
}

.hide {
  display: none;
}

.loading {
  cursor: progress;
}

body {
  margin: 0 0;
  padding: 0 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 450;
}

#real-body {
  width: 100%;
  height: 100%;
}

#header {
  color: white;
  font-size: 5vh;
  grid-area: header;
  font-weight: bold;
}

#footer {
  grid-area: footer;
  background-color: rgb(223, 223, 223);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2vh;
}

#footer > p {
  margin: 0.2vh 0;
}

#content {
  width: 100%;
  height: 100%;
  grid-area: content;
}

:root {
  --upperColor-hs: 0, 0%;
  --upperColor-l: 20%;
  --upperColor: hsl(var(--upperColor-hs), var(--upperColor-l));
  --lowerColor-hs: 0, 0%;
  --lowerColor-l: 97%;
  --lowerColor: hsl(var(--lowerColor-hs), var(--lowerColor-l));
}

.hide {
  display: none;
}

.loading {
  cursor: progress;
}

body {
  margin: 0 0;
  padding: 0 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 450;
}

#real-body {
  width: 100%;
  height: 100%;
}

#header {
  color: white;
  font-size: 5vh;
  grid-area: header;
  font-weight: bold;
}

#footer {
  grid-area: footer;
  background-color: rgb(223, 223, 223);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2vh;
}

#footer > p {
  margin: 0.2vh 0;
}

#content {
  width: 100%;
  height: 100%;
  grid-area: content;
}

Use dynamic hsl colors instead of hex

Use dynamic hsl colors instead of hex


main {
  width: 420px;
  margin: auto;
  font-family: 'Khula', sans-serif;
}
main a {
  color: #B43013;
  text-decoration: none;
}
main a:hover {
  color: blue;
  text-decoration: underline;
}
h1 {
  background-color: #B43013;
  color: white;
  padding: 1em;
  line-height: 1em;
}
h2 {
  padding: 0px 1em;
}
h4 {
  background-color: #888;
  color: white;
  padding: 0.3em 1em 0em 1em;
}
p {
  line-height: 1.5em;
}
p.footer {
  font-weight:bold;
  font-size: 1em;
  color: #B43013
}
h4 i {
  margin-right: 0.3em;
}
h4 a {
  color: white;
}
h4 a:hover {
  color: #B43013;
}

main {
  width: 420px;
  margin: auto;
  font-family: 'Khula', sans-serif;
}
main a {
  color: #B43013;
  text-decoration: none;
}
main a:hover {
  color: blue;
  text-decoration: underline;
}
h1 {
  background-color: #B43013;
  color: white;
  padding: 1em;
  line-height: 1em;
}
h2 {
  padding: 0px 1em;
}
h4 {
  background-color: #888;
  color: white;
  padding: 0.6em 1em 0.3em 1em;
}
p {
  line-height: 1.5em;
}
p.footer {
  font-weight:bold;
  font-size: 1em;
  color: #B43013
}
h4 i {
  margin-right: 0.6em;
}
h4 a {
  color: white;
}
h4 a:hover {
  color: #B43013;
}

Add padding to social icons

Add padding to social icons


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

.main.container {
  height: calc(100vh - 72px);
}

.main.row {
  height: 100%;
}

.sidebar {
  height: 100%;
  background-color: #f5f5f5;
}

.map-container {
  height: 100%;
}

#map {
  height: 100%;
}

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

.main.container {
  height: calc(100vh - 72px);
}

.main.row {
  height: 100%;
}

.sidebar {
  height: 100%;
  background-color: #f5f5f5;
  overflow-y: scroll;
}

.map-container {
  height: 100%;
}

#map {
  height: 100%;
}

Make the sidebar scrollable if the location list is too long


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

#legend {
  background-color: rgb(243, 244, 242);
  padding: 10px;
  padding-right: 25px;
  font-family: 'Roboto', sans-serif;
  text-align: left;
  width: 20%;
}

#legend, p {
  font-size: medium;
}

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

#legend {
  background-color: rgb(243, 244, 242);
  padding: 10px;
  padding-right: 25px;
  font-family: 'Roboto', sans-serif;
  text-align: left;
  width: 20%;
  z-index: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  display: inline-block;
}

}

#legend, p {
  font-size: medium;
}

Make legend size relative to content

Make legend size relative to content


* {
  font-family: sans-serif;
}

#drop-zone {
  text-align: center;
}

#drop-zone .help-label {
  visibility: hidden;
  display: inline-block;
  margin: 0 auto;
  color: #999;
  margin: 1em;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
}

#drop-zone.drop-target {
  border: 3px dashed silver;
  background: #ddd;
}

#drop-zone.drop-target .help-label {
  visibility: visible;
}

#drop-zone.dropping {
  background: white;
  border: 3px dashed red;
}

#drop-zone.dropping .help-label {
  visibility: hidden;
}

.file.invisible, .folder.invisible {
  display: none;
}

.folder-children {
  padding-left: 1em;
}

.file > summary, .folder > summary {
  font-family: monospace;
}

.folder > summary {
  font-weight: bold;
}

* {
  font-family: sans-serif;
}

#drop-zone {
  text-align: center;
}

#drop-zone .help-label {
  visibility: hidden;
  display: inline-block;
  margin: 0 auto;
  color: #999;
  margin: 1em;
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
}

#drop-zone.drop-target {
  border: 3px dashed silver;
  background: #ddd;
}

#drop-zone.drop-target .help-label {
  visibility: visible;
}

#drop-zone.dropping {
  background: white;
  border: 3px dashed red;
}

#drop-zone.dropping .help-label {
  visibility: hidden;
}

.file.invisible, .folder.invisible {
  background: #eee;
  /* display: none; */
}

.folder-children {
  padding-left: 1em;
}

.file > summary, .folder > summary {
  font-family: monospace;
}

.folder > summary {
  font-weight: bold;
}

Use background color instead of hiding items


html {
    position: relative;
    min-height: 100%;
}

body {
    padding-top: 70px; /* for navbar */
    margin-bottom: 90px; /* for footer */
}

.large-icon {
    font-size: 500%;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
}

.container .text-muted {
    margin: 20px 0;
}

.collapse-toggle {
    cursor: pointer;
    padding-top: 10px;
}

.clickable {
    cursor: pointer;
}

.spacer {
    height: 20px;
}

.piechart {
    width: 200px;
    height: 200px;
}

.sum:before {
    content: "Σ";
    opacity: 0.1;
}

.sum:after {
    content: "Σ";
    visibility: hidden;
}

.average:before {
    content: "Ø";
    opacity: 0.1;
}

.average:after {
    content: "Ø";
    visibility: hidden;
}

.label-unknown {
    background-color: #6f5499;
}

/* vim: set expandtab ts=4 sw=4: */

html {
    position: relative;
    min-height: 100%;
}

body {
    padding-top: 70px; /* for navbar */
    margin-bottom: 90px; /* for footer */
}

.large-icon {
    font-size: 500%;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
}

.container .text-muted {
    margin: 20px 0;
}

.collapse-toggle {
    cursor: pointer;
    padding-top: 10px;
}

.clickable {
    cursor: pointer;
}

.spacer {
    height: 20px;
}

.piechart {
    width: 200px;
    height: 200px;
}

.sum:before {
    content: "Σ";
    opacity: 0.1;
}

.sum:after {
    content: "Σ";
    visibility: hidden;
}

.average:before {
    content: "Ø";
    opacity: 0.1;
}

.average:after {
    content: "Ø";
    visibility: hidden;
}

.label-unknown {
    background-color: #6f5499;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* vim: set expandtab ts=4 sw=4: */

Hide ugly arrows in number input field in Firefox


.audio-buttons {
  width: 150px;
}

button.recording, button.playing {
  border: solid 1px black;
}

button.recording, button.record {
  margin-right: 10px;
}

.audio-buttons {
  width: 150px;
}

button.recording, button.playing {
  border: solid 2px #2CAB6F;
}

button.recording, button.record {
  margin-right: 10px;
}

Change recording state's border to green


form.cmxform label,
form.cmxform fieldset.inline-set legend,
fieldset.inline-set legend{
	line-height: 1.5;
}

input.button{
	line-height: 1.4;
}

form.cmxform ol li.list label{
	line-height: 1.6;
}

input[type="radio"],
input[type="checkbox"] {
	vertical-align: bottom;
}

label.nocmx input[type="radio"],
label.nocmx input[type="checkbox"] {
	vertical-align: baseline;
}

li.checkbox label{
	line-height: 1.8;
}

/*
	http://html5boilerplate.com/
*/

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }

form.cmxform label,
form.cmxform fieldset.inline-set legend,
fieldset.inline-set legend{
	line-height: 1.5;
}

input.button{
	line-height: 1.4;
}

form.cmxform ol li.list label{
	line-height: 1.6;
}

input[type="radio"],
input[type="checkbox"] {
	vertical-align: bottom;
}
label input[type="radio"],
label input[type="checkbox"] {
	vertical-align: baseline;
}

li.checkbox label{
	line-height: 1.8;
}

/*
	http://html5boilerplate.com/
*/

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }

[FIX] Fix radio/checkbox vertical alignment on webkit browsers.


body {
    margin: 0;
}

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

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

.moveJoystick {
    background-color: lightblue;
}

.rotationJoystick {
    background-color: lightcoral;
}

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

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

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

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

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

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

body {
    margin: 0;
}

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

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

.moveJoystick {
    background-color: lightblue;
}

.rotationJoystick {
    background-color: lightcoral;
}

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

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

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

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

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

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

Remove duplicate tags from css

Remove duplicate tags from css


@import '../variables.css';

.black {
  color: var(--black);
}

.blue {
  color: var(--curious-blue);
}

.bold {
  font-weight: var(--font-weight-bold);
}

.extraSmall {
   font-size: var(--font-size-extra-small);
}

.gray {
  color: var(--outer-space-light);
}

.large {
  font-size: var(--font-size-large);
}

.red {
  color: var(--torch-red);
}

.small {
  font-size: var(--font-size-small);
}

.text {
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  color: var(--shuttle-gray);
}

.thin {
  font-weight: var(--font-weight-thin);
}

.white {
  color: var(--white);
}

@import '../variables.css';

.text {
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  color: var(--shuttle-gray);
}

.black {
  color: var(--black);
}

.blue {
  color: var(--curious-blue);
}

.bold {
  font-weight: var(--font-weight-bold);
}

.extraSmall {
   font-size: var(--font-size-extra-small);
}

.gray {
  color: var(--outer-space-light);
}

.large {
  font-size: var(--font-size-large);
}

.mini {
  font-size: var(--font-size-mini);
}

.red {
  color: var(--torch-red);
}

.small {
  font-size: var(--font-size-small);
}

.thin {
  font-weight: var(--font-weight-thin);
}

.white {
  color: var(--white);
}

Move text class to the top, add mini class


/* Google web search tweak */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("https://www.google.com/search"), url-prefix("https://www.google.co.jp/search") {
  .mw #center_col { width: 46em !important; }
  .mw .s { max-width: 45em !important; line-height: 1.5 !important;  }

  .mw #rhs { margin-left: 62em !important; }
  .mw #nyc { margin-left: 55em !important; }

  /* ChillingEffects */
  .mw .mfr   { font: x-small/1.4 sans-serif !important; opacity: 0.6 !important; }
  .mw .mfr i { font-style: normal !important; }

  /* Missing words and/or Recently visited page*/
  .mw ._Tib   { font: bold large/2 sans-serif !important; }
  .mw ._Tib s { text-decoration: none !important; }

  /* Google promotion */
  .mw #wmxmsg { opacity: 0.3 !important; }
}

/* Google web search tweak */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("https://www.google.com/search"),
               url-prefix("https://www.google.co.jp/search"),
               url-prefix("https://www.google.com/#q="),
               url-prefix("https://www.google.co.jp/#q=") {
  .mw #center_col { width: 46em !important; }
  .mw .s { max-width: 45em !important; line-height: 1.5 !important;  }

  .mw #rhs { margin-left: 62em !important; }
  .mw #nyc { margin-left: 55em !important; }

  /* ChillingEffects */
  .mw .mfr   { font: x-small/1.4 sans-serif !important; opacity: 0.6 !important; }
  .mw .mfr i { font-style: normal !important; }

  /* Missing words and/or Recently visited page*/
  .mw ._Tib   { font: bold large/2 sans-serif !important; }
  .mw ._Tib s { text-decoration: none !important; }

  /* Google promotion */
  .mw #wmxmsg { opacity: 0.3 !important; }
}

Add URI prefixes to Google search page

Add URI prefixes to Google search page


/* Google web search tweak */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("https://www.google.com/search"),
               url-prefix("https://www.google.co.jp/search"),
               url-prefix("https://www.google.com/#q="),
               url-prefix("https://www.google.co.jp/#q=") {
  .mw #center_col { width: 46em !important; }
  .mw .s { max-width: 45em !important; line-height: 1.5 !important;  }

  .mw #rhs { margin-left: 62em !important; }
  .mw #nyc { margin-left: 55em !important; }

  /* ADs */
  .mw :-moz-any(#tads, #bottomads) { background: #ffd !important; }

  /* ChillingEffects */
  .mw .mfr   { font: x-small/1.4 sans-serif !important; opacity: 0.6 !important; }
  .mw .mfr i { font-style: normal !important; }

  /* Missing words and/or Recently visited page*/
  .mw ._Tib   { font: bold large/2 sans-serif !important; }
  .mw ._Tib s { text-decoration: none !important; }

  /* Google promotion */
  .mw #wmxmsg { opacity: 0.3 !important; }
}

/* Google web search tweak */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("https://www.google.com/search"),
               url-prefix("https://www.google.co.jp/search"),
               url-prefix("https://www.google.com/#q="),
               url-prefix("https://www.google.co.jp/#q=") {
  /* Result */
  .mw .s { line-height: 1.5 !important; }

  /* ADs */
  .mw :-moz-any(#tads, #bottomads) { background: #ffd !important; }

  /* ChillingEffects */
  .mw .mfr   { font: x-small/1.4 sans-serif !important; opacity: 0.6 !important; }
  .mw .mfr i { font-style: normal !important; }

  /* Missing words and/or Recently visited page*/
  .mw ._Tib   { font: bold large/2 sans-serif !important; }
  .mw ._Tib s { text-decoration: none !important; }

  /* Google promotion */
  .mw #wmxmsg { opacity: 0.3 !important; }
}

Support newer Google search results

Support newer Google search results

There is no need to broaden the width of left column anymore.


@import 'normalize.css';
@import 'nprogress/nprogress.css';

html {
  font: 15px/1.6 思源黑體, "Source Han Sans", "Noto Sans CJK TC", 蘋方-繁, "PingFang TC", 微軟正黑體, "Microsoft JhengHei", sans-serif;
}

a[target="_blank"]:after {
  /* material-ui ic_open_in_new_black_12px.svg */
  content: url("data:image/svg+xml,%3Csvg fill='%23666666' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M0 0h24v24H0z' fill='none'/%3E %3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E %3C/svg%3E");
  margin: 0 4px;
}

Add “open new window“ icon at the end of target-blank links


.root {
  display: flex;
  flex-flow: row wrap;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 40px;
}

@media (max-width: 800px) {
  .root {
    width: 90%;
  }
}

@media (max-width: 360px) {
  .root {
    padding: 10px;
  }
}

.col {
  flex: 1;
}

.button {
  width: 100%;
}

.fileUpload {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.logoThumb {
  height: 75px;
  vertical-align: middle;
  margin-right: 20px;
}

.errorText {
  color: #C00;
}

.root {
  display: flex;
  flex-flow: row wrap;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 40px;
}

@media (max-width: 800px) {
  .root {
    width: 90%;
  }
}

@media (max-width: 360px) {
  .root {
    padding: 10px;
  }
}

.col {
  flex: 1 1 auto;
}

.button {
  width: 100%;
}

.fileUpload {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.logoThumb {
  height: 75px;
  vertical-align: middle;
  margin-right: 20px;
}

.errorText {
  color: #C00;
}

Fix for Safari flexbox bug

Fix for Safari flexbox bug


.idea-page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px;
}

.idea-container {
  margin-bottom: 20px;
}

.idea-page-container img {
  width: 100%;
  margin-bottom: 10px;
}

.idea-page-container button,
.idea-page-container i {
  cursor: pointer;
}

.idea-image button {
  position: absolute;
  right: 20px;
  transform: translateY(10px);
  margin-right: 10px;
}

.details-container {
  display: flex;
  flex-direction: column;
}

.icons-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.voting-container {
  display: flex;
  justify-content: space-between;
  flex: 0 0 100px;
}

.edit-button-container {
  width: 50%;
}

.edit-button {
}

.idea-page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 20px;
  overflow: auto;
  height: 100%;
}

.idea-container {
  margin-bottom: 20px;
}

.idea-page-container img {
  width: 100%;
  margin-bottom: 10px;
}

.idea-page-container button,
.idea-page-container i {
  cursor: pointer;
}

.idea-image {
  position: relative;
}

.idea-image button {
  position: absolute;
  right: 5px;
  transform: translateY(10px);
  margin-right: 5px;
}

.details-container {
  display: flex;
  flex-direction: column;
}

.icons-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.voting-container {
  display: flex;
  justify-content: space-between;
  flex: 0 0 100px;
}

.edit-button-container {
  width: 50%;
}

.edit-button {
}

Fix Schedule button and scrolling

Fix Schedule button and scrolling


#dock {
  background: #000
}

.clock {
  position: absolute;
  right: 20px; top: 0;
  z-index: 100;
  text-align: right;
}

.clock .time {
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.8);
}

.clock .date {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.6);
}

.dimness {
  position: absolute;
  z-index: 99;
  top: 0, left: 0;
  width: 100%; height: 100%;
  background-color: #000;
  opacity: 0.8;
  pointer-events: none;
}

.enyo-toolbar {
  position: absolute;
  z-index: 100;
  bottom: 0;
  width: 100%;
  -webkit-transition: bottom .25s ease-out;
}

.hide-toolbar {
  bottom: -60px;
}

#dock {
  background: #000
}

.clock {
  position: absolute;
  left: 20px; bottom: 20px;
  z-index: 100;
  text-align: left;
}

.clock .time {
  font-size: 4rem;
  line-height: 3.7rem;
  color: rgba(255, 255, 255, 0.8);
}

.clock .date {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.6);
}

.dimness {
  position: absolute;
  z-index: 99;
  top: 0, left: 0;
  width: 100%; height: 100%;
  background-color: #000;
  opacity: 0.8;
  pointer-events: none;
}

.enyo-toolbar {
  position: absolute;
  z-index: 100;
  bottom: 0;
  width: 100%;
  -webkit-transition: bottom .25s ease-out;
}

.hide-toolbar {
  bottom: -60px;
}

Move exhibition time/date to bottom-left.


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

ul {
  margin: 0;
  list-style-type: none;
}

.header {
  border-bottom: 1px var(--primary) solid;
  display: flex;
  max-width: 100%;
  min-width: 100%;
  padding: 1rem 0;
}

.header .title {
  font-weight: bold;
}

.navigation {
  margin-left: auto;
}

.navigation > li {
  font-style: italic;
  padding: 0 2rem;
  text-decoration: underline;
}

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

ul {
  margin: 0;
  list-style-type: none;
}

.header {
  border-bottom: 1px var(--primary) solid;
  display: flex;
  max-width: 100%;
  min-width: 100%;
  padding: 1rem 0;
}

.header .title {
  font-weight: bold;
}

.navigation {
  margin-left: auto;
}

.navigation > li {
  font-style: italic;
  padding: 0 2rem;
  text-decoration: underline;
}

Add space between attribute and value

Add space between attribute and value

Co-authored-by: Meike Baumgärtner <8de7567776a140a4f56c015810767dfe1b4f4d76@users.noreply.github.com>


html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-family: "Fira Sans", sans-serif;
  background: ##f2f3f5;
}

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

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-family: "Fira Sans", sans-serif;
  background: #eee;
}

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

Revert "[fix] background color on Perceived Performance examples"

This reverts commit c3921f402f074e2d28b8644f28e52f9a732b735a.


.narrow_signup_form,
.signup_bubble,
.signup_column,
.logged_out .follow_button,
.logged_out .ActionBar,
.logged_out .AskToAnswerSectionToggle,
.logged_out .answer_voters,
.logged_out .Footer,
.inline_answer_logged_out {
	display: none !important;
}

.narrow_signup_form,
.signup_bubble,
.signup_column,
.logged_out .follow_button,
.logged_out .ActionBar,
.logged_out .AskToAnswerSectionToggle,
.logged_out .answer_voters,
.logged_out .Footer,
.inline_answer_logged_out,
.LoggedOutAskQuestionButton,
.BelowQuestionAddPrompt,
.LoggedOutFooter,
.LoggedOutSiteHeader .header_logo {
	display: none !important;
}

.LoggedOutSiteHeader .ask_bar {
	padding-left: 0 !important;
}

Remove some more unimportant elements

Remove some more unimportant elements


body {
	background-color: rgb(51,51,51);
	color: rgb(210,210,210);
}

#vessel {
	width: 200px;
	height: 200px;
	display: block;
	background-color: rgba(128,128,128, 0.5);
}

#compass {
	background-color: rgba(128,128,128, 0.5);
}

body {
	background-color: rgb(51,51,51);
	color: rgb(210,210,210);
}

#vessel {
	width: 200px;
	height: 200px;
	display: block;
	background-color: rgba(255, 255, 255, 0.25);
}

#compass {
	background-color: rgba(255, 255, 255, 0.25);
}

Change background colors to be transparent white


/*
 *= require bootstrap
 *= require font-awesome
 *= require stylish_portfolio
 *= require_self
*/

/*
 *= require bootstrap
 *= require font_awesome
 *= require stylish_portfolio
 *= require_self
*/

Change a hyphen to an underscore

Change a hyphen to an underscore


/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700|Open+Sans+Condensed:700);

#myCalculator { margin: 0; padding: 0; font-size: 16px; font-family: 'Open Sans', sans-serif; font-weight: 300; line-height: 24px; max-width: 800px; }

/* CSS rules go here */

/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700|Open+Sans+Condensed:700);

#myCalculator {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  line-height: 24px;
  max-width: 800px;
}

#myCalculator main {
  background-color: #444;
}

#myCalculator main section {
  width: 25%;
  float: left;
  padding-top: 110px;
  color: #fff;
  background-repeat: no-repeat;
  background-position: center 5px;
  background-size: 63px 100px;
}

#myCalculator main::after {
  content:'';
  display: block;
  clear: both;
}

Add CSS properties for lightbulbs

Add CSS properties for lightbulbs


body {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 15px;
}

h1, p {
  color: #333;
}

#sample_container_id {
  width: 100%;
  height: 400px;
  position: relative;
  border: 1px solid #ccc;
  background-color: #fff;
}

#sample_text_id {
  font-size: 24pt;
  text-align: center;
  margin-top: 140px;
}

textarea {

  margin-bottom: 30px;
  margin-top: 30px
}

Update for the interactive layout

Update for the interactive layout


body {
  padding-top: 15px
}

.glyphicon-remove:hover {
  cursor: pointer
}

.nav-side {
  margin-top: 20px;
}

.view-content {
  margin-top: 20px;
}

.action-buttons {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.angular-ui-tree-placeholder {
  background: #f0f9ff;
  border: 2px dashed #bed2db;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 2px 0;
}

.angular-ui-tree-empty {
  /*border: 1px dashed #bbb;*/
  border: 0;
  min-height: 30px;
  background-color: #ffffff;
}

body {
  padding-top: 15px
}

.glyphicon-remove:hover {
  cursor: pointer
}

.nav-side {
  margin-top: 20px;
}

.view-content {
  margin-top: 20px;
}

.action-buttons {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

/* drag item in list-group, the list item upon placeholder hasn't border-bottom */
.list-group-item.angular-ui-tree-node + .angular-ui-tree-placeholder {
  border-top: 1px solid #ddd;
}

.angular-ui-tree-placeholder {
  border: 0;
}

.angular-ui-tree-empty {
  /*border: 1px dashed #bbb;*/
  border: 0;
  min-height: 30px;
  background-color: #ffffff;
}

Fix issue: drag item in list-group, the list item upon placeholder hasn't border-bottom. Change placeholder to no border.


.error-enter {
  opacity: 0.01;
  margin-top: -40px;
}

.error-enter.error-enter-active {
  opacity: 1;
  margin-top: 0px;
  transition: all 500ms ease;
}

.error-leave {
  opacity: 1;
  margin-top: 0px;
}

.error-leave.error-leave-active {
  opacity: 0.01;
  margin-top: -40px;
  transition: all 700ms ease;
}

.error-enter {
  opacity: 0.01;
  margin-top: -30px;
}

.error-enter.error-enter-active {
  opacity: 1;
  margin-top: 0px;
  transition: all 500ms ease;
}

.error-leave {
  opacity: 1;
  margin-top: 0px;
}

.error-leave.error-leave-active {
  opacity: 0.01;
  margin-top: -30px;
  transition: all 700ms ease;
}

Tweak animation for trip page error UI

Tweak animation for trip page error UI


.text p {
  margin: 1em 0 0 0;
}

.text a {
  color: #fff;
  word-wrap: break-word;
}

.text ol,
.text ul {
  padding-left: 20px;
}

.text p {
  margin: 1em 0 0 0;
}

.text a {
  color: currentColor;
  word-wrap: break-word;
}

.text ol,
.text ul {
  padding-left: 20px;
}

Make link color match inverted text color

Use black links in black text.

REDMINE-17758


/* SELECTOR (FILTER INTERFACE) */

.selector .selector-available input {
    width: 200px;
}

.selector .selector-available h2 {
    background: url("../admin/img/admin/default-bg.gif") repeat-x scroll left top #7CA0C7;
    color: white;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    padding: 2px 5px 3px;
    text-align: left;
}

.selector .selector-chosen h2 {
    background: url("../admin/img/admin/default-bg.gif") repeat-x scroll left top #7CA0C7;
    color: white;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    padding: 2px 5px 3px;
    text-align: left;
}

.selector .selector-filter input {
    font-size:14px;
}

.selector .selector-filter label {
    background-color: white;
    float: left;
    min-width: 20px;
}

.selector .selector-chosen .selector-filter {
    padding: 8px 5px;
}

Update css for default editor groups design


/* General UI Styling */

.container {
	margin-top: 20px;
}

.history-panel {
	margin-top: 20px;
}

.properties-panel {
	margin-left: 20px;
}

.properties-table {
	margin-top: 20px;
}

.properties-column {
	max-width: 170px;
	word-wrap: break-word;
}

#chart {
	border: 1px solid grey;
	min-height: 700px;

}

.error-alert {
	display:none;
}

/* Topology Panel Canvas Styling */

circle.contour {
	fill-opacity:0.02;
}

circle.node {
	fill:steelblue;
}

circle.node:hover {
	fill:#9999ff;
}

circle.node.selected {
	fill:#aa88ff;
	stroke:red;
	stroke-width:8px;
}

circle.node.selected:hover {
	fill:#aa88ff;
	stroke:red;
	stroke-width:12px;
}

/* General UI Styling */

.container {
	margin-top: 20px;
}

.history-panel {
	margin-top: 20px;
}

.properties-panel {
	margin-left: 20px;
}

.properties-table {
	margin-top: 20px;
}

.properties-column {
	max-width: 170px;
	word-wrap: break-word;
}

#chart {
	border: 1px solid grey;
	min-height: 700px;

}

.error-alert {
	display:none;
}

/* Topology Panel Canvas Styling */

circle.contour {
	fill-opacity:0.02;
}

circle.node {
	fill:steelblue;
	stroke:black;
	stroke-width:0.5px;
}

circle.node:hover {
	fill:#9999ff;
}

circle.node.selected {
	fill:#aa88ff;
	stroke:red;
	stroke-width:8px;
}

circle.node.selected:hover {
	fill:#aa88ff;
	stroke:red;
	stroke-width:12px;
}

Add fine black border to node circles

Add fine black border to node circles


#top {
display:block;
position: absolute;
top: 210px;
}
#second_from_top {
display: block;
position: relative;
top: 310px;
left: 100px;

}

Move top block to blog stylesheet

Move top block to blog stylesheet


#zmt-account-stats-form input[type="text"] {
  width: 75%;
}
#zmt-account-stats-form .form-item-from-date,
#zmt-account-stats-form .form-item-to-date {
  width: 50%;
  float: left;
}

fieldset#edit-container input[type="text"] {
  width: 75%;
}
fieldset#edit-container .form-item-from-date,
fieldset#edit-container .form-item-to-date {
  width: 50%;
  float: left;
}

Update stats filter form style

Update stats filter form style


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

body {
  font-size: 1rem;
  background: #fff;
}

h1 {
  margin: 0 0 1rem 0;
}

p {
  font-size: inherit;
}

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

body {
  font-size: 1rem;
  background: black;
  color: white;
}

h1 {
  margin: 0 0 1rem 0;
}

p {
  font-size: inherit;
}

Use a white on black style

Use a white on black style


@import "../../styles/themes";

.emulator-output {
  position: relative;
  align-self: center;
}

.emulator-canvas {
  border-style: solid;
  border-width: 0.1rem;
}

.emulator-cartridge,
.emulator-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.emulator-cartridge {
  width: 8rem;
  height: auto;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;

  @nest .drag-over & {
    opacity: 1;
  }
}

@each $theme in $themes {
  .$theme .emulator-canvas {
    border-color: var(--$(theme)-canvas-border-color);
  }
}

@import "../../styles/themes";

.emulator-output {
  position: relative;
  align-self: center;
}

.emulator-canvas {
  border-style: solid;
  border-width: 0.1rem;

  @nest .emulator-output:fullscreen & {
    border-style: none;
    border-width: 0;
  }
}

.emulator-cartridge,
.emulator-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.emulator-cartridge {
  width: 8rem;
  height: auto;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;

  @nest .drag-over & {
    opacity: 1;
  }
}

@each $theme in $themes {
  .$theme .emulator-canvas {
    border-color: var(--$(theme)-canvas-border-color);
  }
}

Hide canvas border when in fullscreen

Hide canvas border when in fullscreen


.ss-wrapper {
  overflow : hidden;
  height   : 100%;
  position : relative;
  z-index  : 1;
  float: left;
}

.ss-content {
  height          : 100%;
  width           : 100%;
  padding         : 0 32px 0 0;
  position        : relative;
  right           : -18px;
  overflow        : auto;
  -moz-box-sizing : border-box;
  box-sizing      : border-box;
}

.ss-scroll {
  position            : relative;
  background          : rgba(0, 0, 0, .1);
  width               : 9px;
  border-radius       : 4px;
  top                 : 0;
  z-index             : 2;
  cursor              : pointer;
  opacity: 0;
  transition: opacity 0.25s linear;
}

.ss-hidden {
  display: none;
}

.ss-container:hover .ss-scroll {
  opacity: 1;
}

.ss-grabbed {
  user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}

.ss-wrapper {
  overflow : hidden;
  width    : 100%;
  height   : 100%;
  position : relative;
  z-index  : 1;
  float: left;
}

.ss-content {
  height          : 100%;
  width           : 100%;
  padding         : 0 32px 0 0;
  position        : relative;
  right           : -18px;
  overflow        : auto;
  -moz-box-sizing : border-box;
  box-sizing      : border-box;
}

.ss-scroll {
  position            : relative;
  background          : rgba(0, 0, 0, .1);
  width               : 9px;
  border-radius       : 4px;
  top                 : 0;
  z-index             : 2;
  cursor              : pointer;
  opacity: 0;
  transition: opacity 0.25s linear;
}

.ss-hidden {
  display: none;
}

.ss-container:hover .ss-scroll {
  opacity: 1;
}

.ss-grabbed {
  user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}

Fix bug with left and right padding

Fix bug with left and right padding


.CodeMirror {
  /* https://codemirror.net/demo/resize.html */
  height: auto;
  min-height: 150px;
}

.CodeMirror-scroll {
  min-height: 150px;
}

.CodeMirror-gutters {
  background: var(--silver);
}

.CodeMirror-linenumber {
  background: var(--silver);
}

.CodeMirror {
  /* https://codemirror.net/demo/resize.html */
  height: auto;
  min-height: 150px;
  font-family: var(--font-family-mono);
  font-size: 13px;
}

.CodeMirror-scroll {
  min-height: 150px;
}

.CodeMirror-gutters {
  background: var(--silver);
}

.CodeMirror-linenumber {
  background: var(--silver);
}

Switch to using standard code font in the YAML editor


.npmhub-deps {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important; /* gitlab */
  font-size: 13px;
}
.npmhub-deps > li {
  padding: 10px;
  border-bottom: 1px solid #DDD;
}
.npmhub-deps > li:last-child {
  border-bottom: none;
}
li.npmhub-empty {
  opacity: 0.6;
}
.npmhub-deps em {
  color: darkgray;
}
.npmhub-header {
  float: right;
  margin-right: 5px;
}
.npmhub-header .btn {
  position: relative;
  z-index: 1; /* Necessary for GitLab */
  /* float: right; */
  margin: 5px 0;
}
.npmhub-deps:empty:before {
  display: block;
  content: "loading";
  padding: 10px;
  animation: npmhub-pulse 1s infinite;
}
@keyframes npmhub-pulse {
  50% {
    opacity : 0.5;
  }
}

.npmhub-deps {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important; /* gitlab */
}
.npmhub-deps > li {
  padding: 10px;
  border-bottom: 1px solid #DDD;
}
.npmhub-deps > li:last-child {
  border-bottom: none;
}
li.npmhub-empty {
  opacity: 0.6;
}
.npmhub-deps em {
  color: darkgray;
}
.npmhub-header {
  float: right;
  margin-right: 5px;
}
.npmhub-header .btn {
  position: relative;
  z-index: 1; /* Necessary for GitLab */
  /* float: right; */
  margin: 5px 0;
}
.npmhub-deps:empty:before {
  display: block;
  content: "loading";
  padding: 10px;
  animation: npmhub-pulse 1s infinite;
}
@keyframes npmhub-pulse {
  50% {
    opacity : 0.5;
  }
}

Reset text size in Firefox

Reset text size in Firefox

It was never used in Chrome


.autofill-list-item {
  -webkit-box-flex: 1;
  -webkit-padding-start: 8px;
}

.autofill-list-item + img {
  -webkit-padding-end: 20px;
  vertical-align: middle;
}

#autofill-options > div:last-child {
  margin-top: 15px;
}

#autofill-options > div.settings-list > div:last-child {
  border-top: 1px solid #D9D9D9;
  padding: 5px 10px;
}

#autofill-add-address,
#autofill-add-creditcard {
  margin: 2px 0;
}

.autofill-list-item {
  -webkit-box-flex: 1;
  -webkit-padding-start: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.autofill-list-item + img {
  -webkit-padding-end: 20px;
  vertical-align: middle;
}

#autofill-options > div:last-child {
  margin-top: 15px;
}

#autofill-options > div.settings-list > div:last-child {
  border-top: 1px solid #D9D9D9;
  padding: 5px 10px;
}

#autofill-add-address,
#autofill-add-creditcard {
  margin: 2px 0;
}

Options: Add 'overflow: hidden' to autofill items so we don't occlude the close
button.

BUG=71508
TEST=none

Review URL: http://codereview.chromium.org/6626004

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


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

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;

}

#BlocksGame {
	width: 100%;
	height: 100%;
	/* Turn off tap highlight in Mobile Safari */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	position: relative;
}

#BlocksGameContainer {
	display: block;
	width: 100%;
	position: relative;
}

#BlocksInteractionContainer {
	display: block;
	width: 100%;
	/*height: 100%;*/
	position: absolute;
}

.BlocksCanvas {
	position: absolute;
	width: 100%;
	height: 100%;
	/* Turn off text highlight */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.BlocksField {
	position: absolute;
	background-color: #fff;
	border: 0px;
	padding-left: 5px;
}

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

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;

}

#BlocksGame {
	width: 100%;
	height: 100%;
	/* Turn off tap highlight in Mobile Safari */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	position: relative;
}

#BlocksGameContainer {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}

#BlocksInteractionContainer {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
}

.BlocksCanvas {
	position: absolute;
	width: 100%;
	height: 100%;
	/* Turn off text highlight */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.BlocksField {
	position: absolute;
	background-color: #fff;
	border: 0px;
	padding-left: 5px;
}

Set Game Containers Heights to 100% by Defautl


body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

/* ====== CHAT ====== */
{ margin: 0; padding: 0; box-sizing: border-box; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }

/* currently: solarized dark theme */

body {
	background: #002B36;
	color: #8CA1A1;
	font: .8em 'Fira Mono', Consolas, monospace;
}

a {
	color: #00B7FF;
}

/* ====== CHAT ====== */
form {
	position: fixed;
	bottom: 0;
	width: 100%;
}

form input {
	background: #073642;
	color: #8CA1A1;
	border: 0;
	padding: 10px;
	width: 100%;
}

/* form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } */

#messages {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#messages li { padding: 5px 10px; }

/* #messages li:nth-child(odd) { background: #eee; } */

Update CSS to use Solarized Dark colors

Update CSS to use Solarized Dark colors


body {
  font-family: sans-serif;
  font-size: 16px;
  margin: 50px;
}

body {
  font-family: sans-serif;
  font-size: 16px;
  margin: 50px;
  max-width: 800px;
}

Set max-width of the text in the examples

git-svn-id: 69ded9146d58d49997b4c1cfecf13054cc149d03@156 1e0a6537-2640-0410-bfb7-f154510ff394


.image-editor-map { width: 100%; height: 100%; }
.image-editor-tooltip-inner {
  padding: 0.25em 0.5em; color: #839496; font-size: 12px;
  background-color: #073642; border-radius: 5px;
  border: 1px solid #002b36;
}

.image-editor-map { width: 100%; height: 100%; }
.image-editor-tooltip-inner {
  padding: 0.25em 0.5em; color: #839496; font-size: 12px;
  background-color: #073642; border-radius: 5px;
  border: 1px solid #002b36;
  white-space: nowrap;
}

Fix tooltip resizing when dragged off screen


body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
                "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

h1 {
  font-size: 400%;
  padding: 150px 150px 50px 150px;
}

p, h1 {
  text-align: center;
}

p {
  padding-top: 20px;
}

.socialbuttons {
  text-align: center;
}

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
                "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

h1 {
  font-size: 400%;
  padding: 150px 150px 50px 150px;
}

p, h1 {
  text-align: center;
}

p {
  padding-top: 20px;
  letter-spacing: .5px;
}

.socialbuttons {
  text-align: center;
}

Add letter spacing to improve legibility


body.topBarEnabled {
  padding-top: 80px;
}

div#bannerLeft, div#bannerRight {
	display: none;
}

body.topBarEnabled {
  padding-top: 80px;
}

div#topbar ul.nav li:nth-child(n+5), ul.breadcrumb,
div.sidebar-nav ul.nav li:nth-last-child(-n+20),
div#bannerLeft, div#bannerRight {
	display: none;
}

Stop suggesting that we're an official Apache project

This is complicated by the fact that we rely on the maven-plugins parent
project (and it would cause substantially more problems to avoid that):
The maven-site-plugin finds it funny to inherit automatically the parent
projects' site descriptors without providing for a way to, say, remove
breadcrumbs or menus.

As a really ugly workaround – a last resort because there are strong
indicators that the maven-site-plugin's developers do not acknowledge
that limitation as a shortcoming, let alone that they plan to improve
the situation – we add CSS to hide the respective breadcrumbs and menu
items inherited from the maven-plugins project.

Signed-off-by: Johannes Schindelin <53fb8db7833fca1e1746dd8592f61048d350f64c@gmx.de>


.date-time
{
  font-size: 16px;
  text-align: center;
  padding: 3px 16px 4px;
}
.grid-container
{
  margin: 5px;
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
}
.grid-item
{
  float: left;
  width: 90px;
}
.grid-item.selected, .player-button.selected
{
  background: #CCCCCC;
}
.player-button
{
  display: block;
  margin: 2px;
  min-width: 125px;
  padding: 10px 5px;
  cursor: pointer;
}
.player-button[disabled]
{
  cursor: default !important;
  pointer-events: none;
}

/*Make game opaque on remove*/
.opaque ion-item.item
{
  background-color: rgba(255, 255, 255, 0.3);
}
.opaque, .grid-item[disabled]
{
  opacity: 0.3;
}

.date-time
{
  font-size: 16px;
  text-align: center;
  padding: 3px 16px 4px;
}
.grid-container
{
  margin: 5px;
  justify-content: center;
  flex-wrap: wrap;
  display: flex;
}
.grid-item
{
  float: left;
  min-width: 90px;
}
.grid-item.selected, .player-button.selected
{
  background: #CCCCCC;
}
.player-button
{
  display: block;
  margin: 2px;
  min-width: 125px;
  padding: 10px 5px;
  cursor: pointer;
}
.player-button[disabled]
{
  cursor: default !important;
  pointer-events: none;
}

/*Make game opaque on remove*/
.opaque ion-item.item
{
  background-color: rgba(255, 255, 255, 0.3);
}
.opaque, .grid-item[disabled]
{
  opacity: 0.3;
}

Make add game name widths a minimum so longer names can still be shown


/* Basic styling */
/* Draw the lines */
.jOrgChart .line {
  height                : 20px;
  width                 : 4px;
}

.jOrgChart .down {
  background-color 		: black;
  margin 				: 0px auto;
}

.jOrgChart .top {
  border-top          : 3px solid black;
}

.jOrgChart .left {
  border-right          : 2px solid black;
}

.jOrgChart .right {
  border-left           : 2px solid black;
}

/* node cell */
.jOrgChart td {
  text-align            : center;
  vertical-align        : top;
  padding               : 0;
}

/* The node */
.jOrgChart .node {
  background-color 		: #35363B;
  display               : inline-block;
  width                 : 96px;
  height                : 60px;
  z-index 				: 10;
  margin               : 0 2px;
}

/* jQuery drag 'n drop */

.drag-active {
  border-style			: dotted !important;
}

.drop-hover {
  border-style			: solid !important;
  border-color 			: #E05E00 !important;
}

/* Basic styling */
/* Draw the lines */
.jOrgChart .line {
  height: 20px;
  width: 50%;
}

.jOrgChart .down {
  background-color: black;
  width: 2px;
  margin: 0px auto;
}

.jOrgChart .top {
  border-top: 2px solid black;
}

.jOrgChart .left {
  border-right: 1px solid black;
}

.jOrgChart .right {
  border-left: 1px solid black;
}

/* node cell */
.jOrgChart td {
  text-align: center;
  vertical-align: top;
  padding: 0;
  margin: 0;
  float: none;
  border: none;
}

.jOrgChart tr, .jOrgChart table {
  border: none;
}

.jOrgChart table {
  border-collapse: separate;
  border-spacing: 0;
}

/* The node */
.jOrgChart .node {
  background-color: #fff;
  border: 1px solid black;
  display: inline-block;
  width: 96px;
  height: 60px;
  z-index: 10;
  margin: 0 2px;
}

/* jQuery drag 'n drop */

.drag-active {
  border-style: dotted !important;
}

.drop-hover {
  border-style: solid !important;
  border-color: #f00 !important;
}

Modify CSS to prevent conflicts with existing stylesheets


body {
  background-image: url("blog-background-image.jpg");
}

.background {
  margin-top: 30px;
  margin-right: 85px;
  margin-left: 75px;
  position: fixed;
  height: 100%;
  background-color: white;
  border: 2px solid #d3d3d3;
  border-radius: 20px;
  border-bottom: -50px;
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 10px;
}

.background:before {
   content: " ";
   border-radius: 20px;
   position: fixed;
   z-index: -1;
   top: 22px;
   left: 67px;
   right: 70px;
   height: 100%;
   border: 1px solid white;
   background-color: white;
}

#navigation_bar {
  height: 50px;
  margin-right: -29px;
  margin-left: -50px;
  border-top: 2px dashed #d3d3d3;
  border-bottom: 2px dashed #d3d3d3;
  display: block;
  background-color: #5d4a7d;
}

#navigation_bar a {
  color: white;
  font-size: 20px;
  text-decoration: none;
  font-family: Tahoma;
  margin-top: 20px;
  margin-left: 65px;
  padding: 1px;
}

body {
  background-image: url("blog-background-image.jpg");
}

.background {
  margin-top: 30px;
  margin-right: 85px;
  margin-left: 75px;
  position: fixed;
  height: 100%;
  background-color: white;
  border: 2px solid #d3d3d3;
  border-radius: 20px;
  border-bottom: -50px;
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 10px;
}

.background:before {
   content: " ";
   border-radius: 20px;
   position: fixed;
   z-index: -1;
   top: 22px;
   left: 67px;
   right: 70px;
   height: 100%;
   border: 1px solid white;
   background-color: white;
}

#navigation_bar {
  height: 50px;
  margin-right: -29px;
  margin-left: -50px;
  border-top: 2px dashed #d3d3d3;
  border-bottom: 2px dashed #d3d3d3;
  display: block;
  background-color: #5d4a7d;
}

#navigation_bar a {
  color: white;
  font-size: 20px;
  text-decoration: none;
  font-family: Tahoma;
  margin-top: 20px;
  margin-left: 65px;
  position: relative;
}

Change margin on nav bar

Change margin on nav bar


code {
  background-color: black;
  color: #AAAAAA;
  padding-left: 3px;
  padding-right: 3px;
}

img {
  border: 2px solid black;
  -moz-box-shadow: 3px 3px 4px #111111;
  -webkit-box-shadow: 3px 3px 4px #111111;
  box-shadow: 3px 3px 4px #111111;
}

kbd {
  display: inline-block;
  padding: 0 0.5em;
  font-weight: bold;
  font-family: sans-serif;
  color: black;
  background-color: white;
  border: 1px solid black;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 4px;
  white-space: nowrap;
}

code {
  background-color: black;
  color: #AAAAAA;
}

img {
  border: 2px solid black;
  -moz-box-shadow: 3px 3px 4px #111111;
  -webkit-box-shadow: 3px 3px 4px #111111;
  box-shadow: 3px 3px 4px #111111;
}

kbd {
  display: inline-block;
  padding: 0 0.5em;
  font-weight: bold;
  font-family: sans-serif;
  color: black;
  background-color: white;
  border: 1px solid black;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 4px;
  white-space: nowrap;
}

Remove the padding on the code element as it didn't work right with multi-line code blocks.