#font-settings > section > .font-input-div {
  -webkit-margin-end: 5em;
}

.font-input-div > div > select {
  margin-bottom: 10px;
}

.font-input-div > div > .font-input {
  width: 12em;
}

#font-settings > section > .font-sample-div {
  position: absolute;
}

.font-settings-huge {
  float: right;
}

#font-settings > section > .font-input-div {
  -webkit-margin-end: 4em;
}

.font-input-div > div > select {
  margin-bottom: 10px;
}

.font-input-div > div > .font-input {
  width: 12em;
}

#font-settings > section > .font-sample-div {
  height: 90px;
  overflow: hidden;
  position: absolute;
}

.font-settings-huge {
  float: right;
}

DOMUI: Fix an issue where the sample font text would display outside its
containing div. Also fix a margin issue.

BUG=70650
TEST=none

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

git-svn-id: http://src.chromium.org/svn/trunk/src@72369 4ff67af0-8c30-449e-8e8b-ad334ec8d88c

Former-commit-id: 9aaa93f1dcbf9cbf11aabcddd44f543345222e76


/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
html, body {
    height: 100%;
}
#header, #sidebar {
    background-color: #282828;
}
#node-list {
    background-color: #181818;
}
.cluster-view {
}
a {
    text-decoration: none !important;
}
.log-view {
}
.btn-circle {
    width: 14px;
    height: 14px;
    text-align: center;
    padding: 0px 0;
    font-size: 9px;
    line-height: 1.428571429;
    border-radius: 15px;
}

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
html, body {
    height: 100%;
}
#header {
    -webkit-app-region: drag;
    background-color: #282828;
}
#sidebar {
    background-color: #282828;
}
#node-list {
    background-color: #181818;
}
.cluster-view {
}
a {
    text-decoration: none !important;
}
.log-view {
}
.btn-circle {
    width: 14px;
    height: 14px;
    text-align: center;
    padding: 0px 0;
    font-size: 9px;
    line-height: 1.428571429;
    border-radius: 15px;
    margin-right: 2px;
}

Make header draggable and add spacing between circle buttons


.admin-list {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-gap: 10px;
}

.admin-list select {
    height: auto;
}

.admin-logs {
    display: grid;
    grid-template-columns: auto 1fr;
}

.admin-logs code {
    box-sizing: border-box;
    border-right: none;
    padding: 5px 10px;
    height: 100%;
    width: 100%;
}

@media (max-width: 600px) {
    .admin-logs {
        grid-template-columns: auto;
        margin-bottom: 15px;
    }
    .admin-logs:last-child {
        margin-bottom: 0;
    }
    .admin-logs code {
        padding: 0;
        border: none;
    }
}

.admin-list {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-gap: 10px;
}

.admin-list select {
    height: auto;
}

.admin-logs {
    display: grid;
    grid-template-columns: auto 1fr;
}

.admin-logs code {
    box-sizing: border-box;
    border-right: none;
    padding: 5px 10px;
    height: 100%;
    width: 100%;
}

.admin-logs code:nth-child(1) {
    border-left: none;
    padding-left: 0;
}

@media (max-width: 600px) {
    .admin-logs {
        grid-template-columns: auto;
        margin-bottom: 15px;
    }
    .admin-logs:last-child {
        margin-bottom: 0;
    }
    .admin-logs code {
        padding: 0;
        border: none;
    }
}

Remove left border on log list

Remove left border on log list


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

x-tabbar-tab[selected] {
  background: rgba(14, 115, 161, 1);
}

Add [selected] rule for x-tabbar-tab so they look visually different


body {
    margin: 0;
}

.icon-menu-link {
    /* Default styles has Icon menu offseting title */
    min-width: 0 !important;
}

section[role="region"] > header:first-child h1 {
    margin-right: 1.5em;
}

section[data-type="list"] {
    position: relative;
    top: 0;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: calc(100% - 5rem);
    overflow-y: scroll;
}

section[role="region"] > header:first-child h1 {
    text-align: left;
}
[data-type="list"] ul {
    padding-left: 0;
}

section[role="region"] > header.fixed:first-child {
    position: relative;
}

input {
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    box-sizing: border-box;
}

Add padding to search box

Add padding to search box

Test Plan:
- Fill with text make sure it doesn't scroll the main UI
- Make sure there's padding on left and right


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

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

button {
  border: 1px solid #d7d7db;
  background-color: #f9f9fa;
  color: #0c0c0d;
  padding: .5em;
  margin: .5em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

button:hover{
  background-color: #d7d7db;
}

.app {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: auto;
  grid-gap: 1em;
  width: 100vw;
  height: 100vh;
}

.app > aside {
  grid-column: 1;
  background-color: #f9f9fa;
  padding: 0
}

.app > article {
  grid-column: 2;
}

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

body {
  margin: 0;
}

.app {
  display: grid;
  grid-template-columns: 1fr 5fr;
  grid-template-rows: auto;
  grid-gap: 1em;
  width: 100vw;
  height: 100vh;
}

.app > aside {
  grid-column: 1;
  background-color: #f9f9fa;
  padding: 0
}

.app > article {
  grid-column: 2;
}

Revert "override font and button styles"

This reverts commit 684347d4e2f88ce2368798697b12fd104a340bec.


ul {
	margin-left: 0;
	margin-bottom: 0;
}

li {
	list-style: none;
	padding: 4px;
}

li li {
	padding-top: 0px;
	padding-bottom: 0px;
}

li.selected {
	background-color: #cee;
}

.modal-body {
	height: 400px;
}

thead {
	background: #fafafa;
	border-bottom: 1px solid #ddd;
}

table {
	font-size: 12px;
}

.table th {
	max-width: 150px;
}

.table td {
	padding: 1px;
	max-width: 150px;
}

input.ng-invalid {
	background-color : #fcc;
}

#subtags-nav {
    margin-top: -22px;
}

.underline {
    text-decoration: underline;
}

.break-word {
    word-wrap: break-word;
}

Add a break-word utility css class.

Add a break-word utility css class.

refs openhealthcare/elcid#84


.title {
	display		:	none;
}

.actions {
	font-family	:	sans;
	font-size	:	smaller;
}

.actions a	{
	color		:	grey;
	text-decoration	:	none;
}

Make the branchable action bar less visible.


ul.tags li {
  display: inline-block;
  margin: 0 5px 10px 5px;
  padding: 5px;
  background-color: #fff;
  border: 1px solid #ff8600;
  color: #777;
  cursor: pointer;
}
ul.tags li.selected {
  background-color: #ff8600;
  color: #fff;
}
ul.tags li:hover {
  background-color: #FF9966;
}

Add hover color for labels

Add hover color for labels


* {
  line-height: 150%;
  box-sizing: border-box;
}

body {
  padding: 0.5rem 3%;
  color: #333;
}

table {
  border-collapse: collapse;
  margin: 1rem 0;
}
th, td {
  border: solid 1px #ccc;
  padding: 0.1rem 0.5rem;
}
th {
  background: #f4f4f4;
}

hr {
  border: solid #ddd;
  border-width: 0.1rem 0 0 0;
}

a {
  text-decoration: none;
  color: #06a;
}
a:visited {
  color: #268;
}
a:hover {
  color: #c00;
}

button {
  margin: 0.3rem;
}

#guard_layer {
  background: rgba(120,120,120, 0.2);
  position: fixed;
  left: 0; top: 0; width: 100%; height: 100%;
}

* {
  line-height: 150%;
  box-sizing: border-box;
  font-family: monospace;
}

body {
  padding: 0.5rem 3%;
  color: #333;
}

table {
  border-collapse: collapse;
  margin: 1rem 0;
}
th, td {
  border: solid 1px #ccc;
  padding: 0.1rem 0.5rem;
}
th {
  background: #f4f4f4;
}

hr {
  border: solid #ddd;
  border-width: 0.1rem 0 0 0;
}

a {
  text-decoration: none;
  color: #06a;
}
a:visited {
  color: #268;
}
a:hover {
  color: #c00;
}

button {
  margin: 0.3rem;
}

#guard_layer {
  background: rgba(120,120,120, 0.2);
  position: fixed;
  left: 0; top: 0; width: 100%; height: 100%;
}

Set default font family to monospace

cosme: Set default font family to monospace


#body-login #email, #body-login #username, #body-login #password {
	width: 223px;
	padding-left: 36px;
}
#email-icon, #username-icon, #password-icon {
	position: absolute;
	left: 16px;
	top: 22px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: .3;
}
#username-icon {
	top: 17px;
}

input[type="submit"] {
	width: calc(100% - 10px) !important;
}

.msg {
	color: white;
	margin: 5px;
}
.msg a {
	color: white;
	text-decoration: underline;
}

.groupofone {
	position: relative;
}

#body-login #email, #body-login #username, #body-login #password {
	width: calc(100% - 56px);
	padding-left: 36px;
}
#email-icon, #username-icon, #password-icon {
	position: absolute;
	left: 16px;
	top: 22px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: .3;
}
#username-icon {
	top: 17px;
}

input[type="submit"] {
	width: calc(100% - 10px) !important;
}

.msg {
	color: white;
	margin: 5px;
}
.msg a {
	color: white;
	text-decoration: underline;
}

.groupofone {
	position: relative;
}

Fix width email submit form

Fix width email submit form


.dropdown {
    display: inline-block;
}

.dropdown-toggle {
    min-width: 12em;
}

.dropdown a:hover {
    cursor: pointer;
}

.tooltip-inner {
    text-align: left;
}

.name {
	display: inline-block;
	background-color: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 0.25em;
	padding: .1em 0.25em;
	margin: 0.2em;
}

.dropdown {
    display: inline-block;
    margin: 0.2em;
}

.dropdown-toggle {
    min-width: 12em;
}

.dropdown a:hover {
    cursor: pointer;
}

.tooltip-inner {
    text-align: left;
}

.name {
	display: inline-block;
	background-color: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 0.25em;
	padding: .1em 0.25em;
	margin: 0.2em;
}

Add margin to improve layout on mobile.

Add margin to improve layout on mobile.


#board {
  height: 400px;
  width: 800px;
  background-color: #3399ff;
}

.cell {
  height: 90px;
  width: 190px;
  background-color: #ffcc33;
  display: inline-block;
  margin: 3px;
}

Add height, width, background color, and margin to class cell divs


/* Original */
.DNN_Documents TD
{
  padding: 4px;
}

.SizeCell, .ClicksCell
{
	text-align:right;
}

.dnnEditDocs{width:100%;margin:2em auto;}
	.dnnEditDocs .dnnFormItem input[type=checkbox], .dnnTabsModule .dnnFormItem input[type=radio]{width:auto;}
	.dnnEditDocs .dnnRight{display:block;width: 68%;}
	.dnnEditDocs .urlControl br{display:block;}
	.dnnEditDocs .urlControl > label{display:block;float: none;text-align:left;}

.DNN_Documents ._nonpublished { background-color:#ffc }

.DNN_Documents table td
{
  padding: 4px;
  white-space:nowrap
}

.SizeCell, .ClicksCell
{
	text-align:right;
}

.TitleCell, .DescriptionCell
{
	width:100%;
	white-space:wrap
}

.dnnEditDocs{width:100%;margin:2em auto;}
	.dnnEditDocs .dnnFormItem input[type=checkbox], .dnnTabsModule .dnnFormItem input[type=radio]{width:auto;}
	.dnnEditDocs .dnnRight{display:block;width: 68%;}
	.dnnEditDocs .urlControl br{display:block;}
	.dnnEditDocs .urlControl > label{display:block;float: none;text-align:left;}

.DNN_Documents ._nonpublished { background-color:#ffc }

Make title and descr columns of 100% width to stretch table, all other columns whitespace set to no-wrap


/* Display map in full screen for X-RAIN */
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://www.river.go.jp/x/krd0107010.php") {
  /* Display map in full screen */
  #main { width: 100% !important; }
  #map-contents { width: auto !important; }

  #single-mp-radar, #mp-radar {
    width: auto !important;
    height: 950px !important;
  }

  #legendPanel1 {
    top: initial !important;
    left: initial !important;
    bottom: 255px !important;
    right: 80px !important;
  }
  #mapDate {
    top: initial !important;
    bottom: 4px !important;
    right: 4px !important;
    font: bold 24px/1.2 sans-serif !important;
  }

  #map-size-btn { display: none !important; }

  /* Adjust top menu position */
  header { display: flex !important; }
  header div { width: auto !important; }

  #logo { margin-right: auto !important; }

  #logo-img { vertical-align: middle !important; }
  .logo_cap { display: inline-block !important; }

  .menu { margin: 4px 0.4em 0 0 !important; }

  header > div:empty, .menu br { display: none !important; }
}

/* Display map in full screen for X-RAIN */
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://www.river.go.jp/x/krd0107010.php") {
  /* Display map in full screen */
  #main { width: 100% !important; }
  #map-contents { width: auto !important; }

  #single-mp-radar, #mp-radar {
    width: auto !important;
    height: 950px !important;
  }

  #legendPanel1 {
    top: initial !important;
    left: initial !important;
    bottom: 270px !important;
    right: 80px !important;
  }
  #mapDate {
    top: initial !important;
    bottom: 4px !important;
    right: 4px !important;
    font: bold 24px/1.2 sans-serif !important;
  }

  #map-size-btn { display: none !important; }

  /* Adjust top menu position */
  header { display: flex !important; }
  header div { width: auto !important; }

  #logo { margin-right: auto !important; }

  #logo-img { vertical-align: middle !important; }
  .logo_cap { display: inline-block !important; }

  .menu { margin: 4px 0.4em 0 0 !important; }

  header > div:empty, .menu br { display: none !important; }
}

Fix the overlapping with legend and timestamp


body {
  font-family: 'Ubuntu Condensed', sans-serif;
  font-weight: bold;
  background: #e3ede7;
}

.wrapper {
  margin: auto;
  max-width: 520px;
}

.buttons {
  text-align: center;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.button {
  width: 4.5em;
  height: 2.2em;
  margin: 0.5em;
  border: #74a588 solid 3px;
  border-radius: 0.5em;
  background: #5c7a6f;
  color: #f2f2f2;
  font-family: 'Ubuntu Condensed', sans-serif;
  font-weight: bold;
  font-size: 1em;
}

.button.disabled {
  background: #b3b3b3;
  border-color: #ccc;
}

.options {
  text-align: center;
  margin-bottom: 0.5em;
}

.options .button {
  width: 2.2em;
  border-radius: 50%;
  padding-bottom: 0.2em;
}

.selected {
  background: #f3e019;
  border-color: #fff94c;
  color: white;
}

body {
  font-family: 'Ubuntu Condensed', sans-serif;
  font-weight: bold;
  background: #e3ede7;
}

.wrapper {
  margin: auto;
  max-width: 520px;
}

.buttons {
  text-align: center;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.button {
  width: 4.5em;
  height: 2.2em;
  margin: 0.5em;
  border: #74a588 solid 3px;
  border-radius: 0.5em;
  background: #5c7a6f;
  color: #f2f2f2;
  font-family: 'Ubuntu Condensed', sans-serif;
  font-weight: bold;
  font-size: 1em;
  box-shadow: 0 0 2px 2px rgba(199, 219, 207, 0.7);
}

.button.disabled {
  background: #b3b3b3;
  border-color: #ccc;
}

.options {
  text-align: center;
  margin-bottom: 0.5em;
}

.options .button {
  width: 2.2em;
  border-radius: 50%;
  padding-bottom: 0.2em;
}

.selected {
  background: #f3e019;
  border-color: #f8ec75;
  color: white;
}

Add alternate color and box shadow to the buttons


input.form-control {
  outline: 0;
  width: 95%;
  margin: 5px;
}
input.form-control:focus{
  box-shadow: none;
}

#directory-current-page {
  color: orange;
}

.pane {
  background-color: #333;
}
.pane img {
  width: auto;
  height: auto;
  max-width: 800px;
  max-height: 800px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.pane video {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

/* https://github.com/connors/photon/pull/129 */
.sidebar {
  overflow: scroll;
}

img.visible {
  display:inline
}

img.hidden {
  display:none
}

input.form-control {
  outline: 0;
  width: 95%;
  margin: 5px;
}
input.form-control:focus{
  box-shadow: none;
}

#directory-current-page {
  color: orange;
}

.pane {
  background-color: #333;
}
.pane img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.pane video {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

/* https://github.com/connors/photon/pull/129 */
.sidebar {
  overflow: scroll;
}

img.visible {
  display:inline
}

img.hidden {
  display:none
}

Update img's size to relative

Update img's size to relative


#legend_panel_content {
  min-height: 400px;
}

.layer_legend_header {
    display: table;
    text-align: left;
}

.layer_legend_container {
    border: 0;
}

.legend_image {
    text-align: left;
}

.legend_image>img {
    min-width: 20px;
    min-height: 20px;
}

.layer_legend_source_label {
    position: absolute;
    width: 10em;
    right: 15px;
    text-align: right;
}

#legend_panel_content {
  height: 400px;
  overflow-y: auto;
}

.layer_legend_header {
    display: table;
    text-align: left;
}

.layer_legend_container {
    border: 0;
}

.legend_image {
    text-align: left;
}

.legend_image>img {
    min-width: 20px;
    min-height: 20px;
}

.layer_legend_source_label {
    position: absolute;
    width: 10em;
    right: 15px;
    text-align: right;
}

Use scrollbar in legend dialog

Use scrollbar in legend dialog


.panes {
  display: flex;
  flex-grow: 1;
  box-sizing: border-box;
  position: relative;
  flex-direction: row;
  align-items: stretch;
}

.pane {
  overflow: hidden;
  flex-grow: 1;
  position: relative;
  overflow: scroll;
  border-right: 1px solid #ccc;
}

.paneItems {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: scroll;
}

.paneItem {
  line-height: 3em;
  border-bottom: 1px solid #ccc;
}

.paneItemLink {
  display: block;
  padding: 0 1em;
  text-decoration: none;
  color: inherit;
}

.paneItemLink:hover {

}

.activePaneItemLink {
  composes: paneItemLink;
  font-weight: 700;
  background-color: #ccc;
}

.panes {

}

.panes {
  display: flex;
  flex-grow: 1;
  box-sizing: border-box;
  position: relative;
  flex-direction: row;
  align-items: stretch;
}

.pane {
  overflow: hidden;
  flex-grow: 1;
  position: relative;
  overflow-y: auto;
  border-right: 1px solid #ccc;
}

.paneItems {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.paneItem {
  line-height: 3em;
  border-bottom: 1px solid #ccc;
}

.paneItemLink {
  display: block;
  padding: 0 1em;
  text-decoration: none;
  color: inherit;
}

.paneItemLink:hover {

}

.activePaneItemLink {
  composes: paneItemLink;
  font-weight: 700;
  background-color: #ccc;
}

.panes {

}

Fix scroll styling on non-Mac devices

Fix scroll styling on non-Mac devices


.Works {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2.618rem;
}

.Works {
  display: grid;
  grid-template-columns: repeat(auto-fill, 315px);
  grid-gap: 2.618rem;
  justify-content: center;
}

Fix the responsive behavior of the works grid


.panel-heading,
.panel-footer {
  background-color: black;
}
.panel-heading h1,
.panel-footer h1 {
  color: #FFF0F5;
}

.carousel {
  width: 100%;
  margin: 0 auto;
}

.carousel-caption {
  background-color: rgba(119, 129, 134, 0.8);
  border-radius: 5px;
}

.shadow-heavy {
  text-shadow: 1px 1px 2px black,
               0 0 1em black,
               0 0 0.8em black,
               0 0 0.5em black,
               0 0 0.2em black;
}

.modal-footer .btn-group-vertical .btn + .btn {
  margin-left: 0px;
}

.modal-footer .btn-group-vertical + .btn-group-vertical {
  margin-top: 5px;
}

.slide-title + .slide-buttons {
  margin-top: 20px;
}

/******************/
/* Carousel Frame */
/******************/

.panel-heading,
.panel-footer {
  background-color: black;
}
.panel-heading h1,
.panel-footer h1 {
  color: #FFF0F5;
}

.carousel {
  width: 100%;
  margin: 0 auto;
}

.carousel-caption {
  background-color: rgba(119, 129, 134, 0.8);
  border-radius: 5px;
}

.shadow-heavy {
  text-shadow: 1px 1px 2px black,
               0 0 1em black,
               0 0 0.8em black,
               0 0 0.5em black,
               0 0 0.2em black;
}

/**********/
/* Modals */
/**********/

.modal-footer .btn-group-vertical .btn + .btn {
  margin-left: 0px;
}

.modal-footer .btn-group-vertical + .btn-group-vertical {
  margin-top: 5px;
}

/**********/
/* Slides */
/**********/

.slide-title + .slide-buttons {
  margin-top: 20px;
}

Add section headers for CSS

Add section headers for CSS


html
{
	font-family: 'Slabo 27px', serif;
	background-color: #E7FEFF;
}

.socialmedia
{
	float: left;
}

.links
{
	float: right;
}

#aboutme
{
	display: inline-block;
}

.picture-right
{
	float: right;
	margin: 10px;
}

.picture-left
{
	/*float: left;*/
	margin: 10%;
}

.picture-left.thumbnail
{
	width: 200px;
	height: 200px;
}

.picture-right.thumbnail
{
	width: 200px;
	height: 200px;
}

.thumbnail
{
	width: 20%;
	height: 20%;
}

.horizon
{
	width: 100%;
	height: 200px;
}

.website-image
{
	display: inline-block; /*Eliminate width, height, and margin-left for mobile devices*/
	width: 20%;
	height: 20%;
	margin-left: 10%;
}

@media screen and (max-device-width: 900px) {
	html{
		font-size: 4em;
	}
	.website-image
	{
		display: inline-table;
		width: 100%;
	}
	.picture-left
	{
		margin: 0%;
	}

	.horizon
	{
		display: none;
	}
	.website-image img
	{
		display: none;
	}

	.socialmedia img
	{
		height: 5%;
	}
}

Create a CSS "viewport" that is mobile-friendly


.well--params {
    position: relative;
    display: inline-block;
    padding: 36px 16px 12px 16px;
    float: right;
}

.well--params * {
    margin: 2px auto;
    font-size: 14px;
}

.well--params .caption {
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 13px;
    font-weight: 700;
    color: #959595;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#slider * {
    display: inline-block;
}

.slider-selection {
    background: #95a5a6;
}

.slider-handle {
    display: block;
    background: #18bc9c;
}

Add stylesheet for parameter box and slider widget


/* Custom style sheet */

.main {
  width: 320px;
  border: solid #ccc 1px;
  border-radius: 10px;
  box-shadow: 2px 4px 2px rgba(163,163,163, 0.7);
}

img {
  display: block;
  margin: auto;
  border-radius: 10px;
}

.main-content {
  width: 300px;
  border: solid #ccc 1px;
  border-radius: 10px;
  margin: 10px;
}

.animal-trivia {
  font-style: italic;
}

h3 {
  padding: 0 20px;
}

p {
  padding: 0 10px;
}

ul {
  list-style: none;
  padding: 0 10px;
}

li {
  font-style: italic;
}

span {
  font-style: normal;
  font-weight: bold;
}

/* Custom style sheet */

body {
  font-family: Verdana, sans-serif;
}

.main {
  width: 320px;
  border: solid #ccc 1px;
  border-radius: 10px;
  box-shadow: 2px 4px 2px rgba(163,163,163, 0.7);
}

img {
  display: block;
  margin: auto;
  border-radius: 10px;
}

.main-content {
  width: 300px;
  border: solid #ccc 1px;
  border-radius: 10px;
  margin: 10px;
}

.animal-trivia {
  font-style: italic;
}

h3 {
  padding: 0 20px;
}

p {
  padding: 0 10px;
}

ul {
  list-style: none;
  padding: 0 10px;
}

li {
  font-style: italic;
}

span {
  font-style: normal;
  font-weight: bold;
}

Add Verdana, sans-serif as default font families


/* FxButton
 * id: {c6448328-31f7-4b12-a2e0-5c39d0290307}
 * URL: https://addons.mozilla.org/firefox/addon/fxbutton/ */

#TabsToolbar #appmenu-toolbar-button.fxbutton:not(:first-child) > .toolbarbutton-icon,
toolbar:not(#TabsToolbar) #appmenu-toolbar-button.fxbutton > .toolbarbutton-icon {
  list-style-image: url(chrome://browser/skin/symbolic-icons/emblem-system.svg) !important;
}

#navigator-toolbox[iconsize=large] > #nav-bar > #appmenu-toolbar-button.fxbutton {
  margin: 0px 3px;
  min-height: 28px;
  min-width: 26px;
  padding: 0px 3px;
}
#navigator-toolbox[iconsize=small] > #nav-bar > #appmenu-toolbar-button.fxbutton {
  margin: 0px 2px;
  min-height: 26px;
  padding: 0px 3px;
}
#navigator-toolbox[iconsize=large] > #nav-bar[reliefbuttons="true"] > #appmenu-toolbar-button.fxbutton {
  min-width: 32px;
}

Add fix for FxButton support

Add fix for FxButton support


html {
    height: 100%
}

body {
    background: #fafafa url("./livedoc-logo-round-gray.svg") no-repeat center;
}

h1 {
    margin-top: 1rem;
}

Add margin top for h1 title

Add margin top for h1 title


h1 {
	text-align: left;
}

.blog-header h1, .blog-header h2 {
	text-align: center;
}

body {
	font-family: 'Open Sans',sans-serif;
}

pre.language-mermaid {
	background: none !important;
	border: none !important;
}

pre.language-mermaid g.label {
	color: #000;
}

#body #breadcrumbs span {
	padding: 0 1rem;
}

h1 {
	text-align: left;
}

.blog-header h1, .blog-header h2 {
	text-align: center;
}

html, body, button, input, select, textarea, .pure-g, .pure-g [class*="pure-u"] {
	font-family: 'Open Sans',sans-serif;
}

pre.language-mermaid {
	background: none !important;
	border: none !important;
}

pre.language-mermaid g.label {
	color: #000;
}

#body #breadcrumbs span {
	padding: 0 1rem;
}

@media (max-width: 800px) { body { font-size: 100%; } }
@media (min-width: 801px) and (max-width: 1200px) { body { font-size: 125%; } }
@media (min-width: 1201px) { body { font-size: 150%; } }

Set font-family back to Open Sans (font-family wasn't applied anymore due to changes in the source css). Add media queries to resize the font-size based on the width of the window.


.pure-menu.pure-menu-fixed.main-menu {
    border-bottom: none;
}

.pure-button.signup-button {
    margin: 2px;
}

.splash-container {
    background: #521F8F;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
}

.splash {
    width: 50%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 100px;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    color: white;
}

.splash h1 {
    font-size: 250%;
}

strong.highlight {
    color: #2B0F4D;
}

.pure-menu.pure-menu-fixed.main-menu {
    background: #E6E6E6;
    border-bottom: none;
}

.pure-button.signup-button {
    margin: 2px;
}

.splash-container {
    background: #521F8F;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
}

.splash {
    width: 50%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 100px;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    color: white;
}

.splash h1 {
    font-size: 250%;
}

strong.highlight {
    color: #2B0F4D;
}

Change the look of top banner

Change the look of top banner


.timeline {
  position: relative;

  margin-bottom: 10px;
}

.timeline-entry {
  padding-bottom: 10px;

  position: relative;
  page-break-inside: avoid;
}

.timeline-date {
  position: absolute;
  transform: translateX(calc(-100% - 8px));

  padding: 8px;
  border-radius: 8px;

  flex-shrink: 0;

  background-color: #ff7827;

  color: rgba(255, 255, 255, 0.8);

  text-align: center;
  line-height: 2rem;

  font-weight: bold;

  font-size: 1rem;
}

.timeline-title {
  display: inline-block;

  margin-top: 1.25rem; /* timeline-height = 4.5rem / 2 - 1em */
  margin-bottom: 1.25rem;

  text-align: left;
}

.timeline-header {
  display: flex;
  align-items: center;
}

.timeline {
  position: relative;

  margin-bottom: 10px;
}

.timeline-entry {
  position: relative;
  page-break-inside: avoid;
}

.timeline-date {
  position: absolute;
  transform: translateX(calc(-100% - 8px));

  padding: 8px;
  border-radius: 8px;

  flex-shrink: 0;

  background-color: #ff7827;

  color: rgba(255, 255, 255, 0.9);

  text-align: center;
  line-height: 2rem;

  font-weight: bold;

  font-size: 1rem;
}

.timeline-title {
  display: inline-block;

  margin-top: 1.25rem; /* timeline-height = 4.5rem / 2 - 1em */
  margin-bottom: 1.25rem;

  text-align: left;
}

.timeline-header {
  display: flex;
  align-items: center;
}

Remove bottom padding in entry

Remove bottom padding in entry


/* close commented backslash hack */
.page-content {
  padding: 10px 0;
}

.page-content .mdl-card {
  width: auto;
  max-width: 90%;
  margin: 0 auto;
}

.mdl-list {
  margin-top: 0;
  padding-top: 0;
}

.mdl-list__item--three-line .mdl-list__item-text-body {
  height: auto;
  padding: 5px 0;
}

.mdl-list__item--with-image .mdl-list__item-text-body {
  margin-left: 56px;
}

.mdl-list__item--three-line .mdl-list__item-primary-content {
  height: auto;
}

.mdl-list__item--three-line {
  height: auto;
  min-height: 80px;
  border-bottom: 1px solid #f2f2f2;
}

.mdl-list__item--three-line:last-child {
  border-bottom: 0;
}

@media screen and (max-width: 1024px) {
  .mdl-layout__tab-bar {
      width: calc(100% - 120px);
      padding: 0 0 0 60px;
  }
}

/* close commented backslash hack */
.page-content {
  padding: 10px 0;
}

.page-content .mdl-card {
  width: auto;
  max-width: 90%;
  margin: 0 auto;
}

.mdl-list {
  margin-top: 0;
  padding-top: 0;
}

.mdl-list__item--three-line .mdl-list__item-text-body {
  height: auto;
  padding: 5px 0;
}

.mdl-list__item--with-image .mdl-list__item-text-body {
  margin-left: 56px;
}

.mdl-list__item--three-line .mdl-list__item-primary-content {
  height: auto;
}

.mdl-list__item--three-line {
  height: auto;
  min-height: 80px;
  padding: 10px;
  border-bottom: 1px solid #f2f2f2;
}

.mdl-list__item--three-line:last-child {
  border-bottom: 0;
}

.mdl-card__supporting-text {
  padding: 10px;
}

.page-content .mdl-card {
  margin-bottom: 20px;
}

.mdl-card__title {
  background: #2196f3;
  color: #fff;
  padding: 40px 20px 10px;

}

@media screen and (max-width: 1024px) {
  .mdl-layout__tab-bar {
      width: calc(100% - 120px);
      padding: 0 0 0 60px;
  }
}

Change styles from cards and list to better look


/* Rules for the page layout */
body {
  background-color: #224eb7;
  font-family: arial;
  font-size: 15px;
}

#browser-compatibility {
  display: none;
  position: absolute;
  width: 275px;
  margin-top: -58px;
  margin-left: -137px;
  top: 40%;
  left: 50%;
  background: white;
  text-align: center;
}

.about {
  position: absolute;
  bottom: 0;
  color: white;
}

.about a {
  color: white;
}

#embed {
  position: absolute;
  bottom: 0;
  right: 0;
  color: white;
  margin-right: 15px;
  text-align: left;
}

#embed label {
  display: inline-block;
}

#embed a {
  color: white;
  float: left;
}

#embed input {
  border: 1px solid black;
  width: 300px;
  padding: 5px;
  border-radius: 5px;
  font-size: 13px;
  display: none;
  margin-left: 15px;
  margin-right: 15px;
}

#embed #embed-learn-more {
  display: none;
}
#embed.selected #embed-learn-more {
  display: inline;
}

#embed.selected input {
  display: inline;
}

Clean up unused embed css

Clean up unused embed css


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

#container {
	min-height: calc(100% - 60px);
	position: relative;
	padding-top: 60px;
}

#main-content {
	padding-bottom: 237px;
}

footer {
	background-color: #8BC53F;
	height: 200px;
	margin-top: 35px;
	border-top: 2px solid #000000;
	bottom:0;
	position: absolute;
	width:100%;
}

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

#container {
	min-height: 100%;
	min-height: calc(100% - 60px);
	padding-top: calc(60px);
	position: relative;
}

#main-content {
	padding-top: 60px;
	padding-top: calc(0px);
	padding-bottom: 237px;
}

footer {
	background-color: #8BC53F;
	height: 200px;
	margin-top: 35px;
	border-top: 2px solid #000000;
	bottom: 0;
	position: absolute;
	width:100%;
}

Fix css to be compatible with older browsers that are not cool enough for CSS3


.main-container{
  display: flex;
  flex-wrap: wrap;
}

.search-container{
  width: 100%;
  margin-bottom: 5px;
}

.search-container input{
  height: 20px;
  width:100%;
}

.location-list li{
  word-wrap: break-word;
  margin: 15px 0;
  cursor: pointer;
}

.location-list-container{
  width: 100%;
  height:600px;
  overflow-y: auto;
}
.map-container{
  width:100%;
}

.map{
  width:100%;
  height:600px;
}

.filtered{
  display: none;
}

/* Rendering List and Map side by side when on big screen*/
@media only screen and (min-width: 1051px) {
  .location-list-container{
    width: 15%;
  }
  .location-list li{
    margin: 10px 0;
  }
  .map-container{
    width: 85%;
  }
}

.main-container{
  display: flex;
  flex-wrap: wrap;
}

.search-container{
  width: 100%;
  margin-bottom: 5px;
}

.search-container input{
  height: 20px;
  width:100%;
}

.location-list li{
  word-wrap: break-word;
  margin: 15px 0;
  cursor: pointer;
}

.location-list-container{
  display: none;
}
.map-container{
  width:100%;
}

.map{
  width:100%;
  height:600px;
}

.filtered{
  display: none;
}

/* Rendering List and Map side by side when on big screen*/
@media only screen and (min-width: 1051px) {
  .location-list-container{
    display: block;
    width: 15%;
    height:600px;
    overflow-y: auto;
  }
  .location-list li{
    margin: 10px 0;
  }
  .map-container{
    width: 85%;
  }
}

Hide list when looking at the small screen


/* MPositionIndicatorStyle : MWidgetStyle */
MPositionIndicatorStyle {
    indicator-image:    "meegotouch-positionindicator-indicator" 2px 2px 2px 2px;
    background-image:   "meegotouch-positionindicator-background" 2px 2px 2px 2px;
    minimum-size:       0.6mm 0.6mm;
    preferred-size:     -1 -1;
    maximum-size:       -1 -1;
    margin-top:         0.4mm;
    margin-bottom:      0.4mm;
    margin-left:        0.4mm;
    margin-right:       0.4mm;

    min-indicator-size: 2mm;
    hide-timeout: 1000;
}

/* MPositionIndicatorStyle : MWidgetStyle */
MPositionIndicatorStyle {
    indicator-image:    "meegotouch-positionindicator-indicator" 2px 2px 2px 2px;
    background-image:   "meegotouch-positionindicator-background" 2px 2px 2px 2px;
    indicator-image-horizontal:  "meegotouch-positionindicator-indicator-horizontal" 2px 2px 2px 2px;
    background-image-horizontal: "meegotouch-positionindicator-background-horizontal" 2px 2px 2px 2px;
    minimum-size:       0.6mm 0.6mm;
    preferred-size:     -1 -1;
    maximum-size:       -1 -1;
    margin-top:         0.4mm;
    margin-bottom:      0.4mm;
    margin-left:        0.4mm;
    margin-right:       0.4mm;

    min-indicator-size: 2mm;
    hide-timeout: 1000;
}

Changes: Add appropiate images for horizontal orientation to MPositionIndicator's css

RevBy: Daniel d'Andrada


/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/core/theming/prebuilt/indigo-pink.css';
body {
    width: 100%;
    margin: 0px;
}

label[for=md-input-0]:not([class~=md-empty]) {
    visibility: hidden;
}

.auto-complete-item {
    width: 500px;
}

.tag-item {
    background: #3c3cab;
    color: #a4f1ff;
    margin: 3px;
    border: 1px;
    border-radius: 5px;
    padding: 3px;
    line-height: 1.5em;
}

h4 {
    padding: 4px !important;
}

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/core/theming/prebuilt/indigo-pink.css';
body {
    width: 100%;
    margin: 0px;
}

label[for=md-input-0]:not([class~=md-empty]) {
    visibility: hidden;
}

.result-item {
    padding: 6px;
}

.result-item:hover {
    background: #fbfbfb;
    border-radius: 10px;
    box-shadow: 0px 0px 5px #a4a4a4;
}

.auto-complete-item {
    width: 500px;
}

.tag-item {
    background: #3c3cab;
    color: #fff;
    margin: 3px;
    border: 1px;
    border-radius: 5px;
    padding: 3px;
    line-height: 1.5em;
    display: inline-block;
    font-weight: 600;
}

h4 {
    padding: 4px !important;
}

Improve style of list items

Improve style of list items


@import 'tailwindcss/base';

/* Global */
html {
  @apply leading-relaxed text-lg antialiased text-gray-900 bg-white;
}

/* Headers */
h1 {
  @apply text-3xl my-6 font-bold;
}

h2 {
  @apply text-2xl my-6 font-bold;
}

h3,
h4 {
  @apply text-xl my-3 font-semibold;
}

h5,
h6 {
  @apply text-lg my-2;
}

a {
  @apply text-red-700 underline font-semibold;
  text-decoration-thickness: 2px;
}

p {
  @apply mb-4;
}

/* Lists */
ul {
  @apply list-disc;
}

ol {
  @apply list-decimal;
}

ul,
ol {
  @apply mb-4 ml-8;
}

li {
  @apply mb-4;
}

/* Code */
pre {
  @apply mb-4;
}

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

@import 'tailwindcss/base';

/* Global */
html {
  @apply leading-relaxed text-lg antialiased text-gray-900 bg-white;
}

/* Headers */
h1 {
  @apply text-3xl my-6 font-bold;
}

h2 {
  @apply text-2xl my-6 font-bold;
}

h3,
h4 {
  @apply text-xl my-3 font-semibold;
}

h5,
h6 {
  @apply text-lg my-2;
}

a {
  @apply text-red-700 underline font-semibold;
  text-decoration-thickness: 2px;
}

p {
  @apply mb-4;
}

/* Lists */
ul {
  @apply list-disc;
}

ol {
  @apply list-decimal;
}

ul,
ol {
  @apply mb-4 ml-8;
}

li {
  @apply mb-4;
}

/* Code */
pre {
  @apply mb-4;
}

.custom-card em {
  @apply bg-blue-200 p-1 not-italic rounded;
}

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

Add custom styling for gerbode highlights


/* Styles for the top bar */

/* The box that holds the button and input */
#formbox {
  padding: 0;
  display: block;
  overflow: hidden;

  /* Position */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1;

  /* Appearance */
  box-shadow: 0 4px 4px -2px #ccc;
}

/* The buttons */
#formbox button {
  /* Color */
  background-color: rgba(255, 255, 255, 0.6);

  /* Border */
  outline: none;

  /* Other */
  padding: 5px 7px;
  margin: 0;
  font-size: 18px;
  float: right;
  height: 33px;
  min-width: 33px;
}
i.icon.ion-refresh {
  display: block;
  transition: all 0.8s ease-in-out;
}
i.icon:hover.ion-refresh {
  transform: rotate(360deg);
}

/* To create lines between elements, everything has a right border besides the last element */
#formbox > * {
  border: none;
  border-right: 1px solid #ccc;
}

#formbox > *:first-child { /* first-child is last because 'float:right;' changes order */
  border-right: none;
  padding: 5px 10px;
}

/* Styles for the top bar */

/* The box that holds the button and input */
#formbox {
  padding: 0;
  display: block;
  overflow: hidden;

  /* Position */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1;

  /* Appearance */
  box-shadow: 0 4px 4px -2px #ccc;
}

/* The buttons */
#formbox button {
  /* Color */
  background-color: rgba(255, 255, 255, 0.6);

  /* Border */
  outline: none;

  /* Other */
  padding: 5px 7px;
  margin: 0;
  font-size: 18px;
  float: right;
  height: 33px;
  min-width: 33px;
}
i.icon.ion-refresh {
  display: block;
  transition: all 0.8s ease-in-out;
}
i.icon:hover.ion-refresh {
  transform: rotate(360deg);
}
i.icon.ion-refresh:before {
  position: relative;
  left: 2px;
}

/* To create lines between elements, everything has a right border besides the last element */
#formbox > * {
  border: none;
  border-right: 1px solid #ccc;
}

#formbox > *:first-child { /* first-child is last because 'float:right;' changes order */
  border-right: none;
  padding: 5px 10px;
}

Fix rotation center of spinning icon

Fix rotation center of spinning icon


body {
}

img,
.box,
.box-inner,
.box h1.title {
  behavior: url("/scripts/pngfix.htc");
}

/* IE doesn't support borders on tbodys or cols */
table.sidebyside tbody.collapsed td,
table.sidebyside tbody.collapsed th {
  border-bottom: 1px #303030 solid;
  border-top: 1px #303030 solid;
}

/* Line number column and side-by-side divider borders. */
table.sidebyside tr td {
  border-left: 1px #C0C0C0 solid;
}

table.sidebyside tbody.insert td:first-child {
  border-top: 1px #303030 solid;
}

/* The padding around the selector arrow causes rows to grow on IE. */
table.sidebyside thead th.controls,
table.sidebyside th.controls {
  padding: 0;
}

.banner input {
  vertical-align: middle;
}

.box-container {
  width: 99%;
}

.box.important {
  padding: 10px;
}

.box.important .box-inner {
  width: 90%;
}

.review-request .controls {
  border-top: 1px #999999 solid;
  padding-top: 3px;
  background-color: #e8e5cd;
}

.review-request #details td {
  padding: 4px;
}

body {
}

img,
.box,
.box-inner,
.box h1.title,
table.sidebyside .commentflag {
  behavior: url("/scripts/pngfix.htc");
}

/* IE doesn't support borders on tbodys or cols */
table.sidebyside tbody.collapsed td,
table.sidebyside tbody.collapsed th {
  border-bottom: 1px #303030 solid;
  border-top: 1px #303030 solid;
}

/* Line number column and side-by-side divider borders. */
table.sidebyside tr td {
  border-left: 1px #C0C0C0 solid;
}

table.sidebyside tbody.insert td:first-child {
  border-top: 1px #303030 solid;
}

/* The padding around the selector arrow causes rows to grow on IE. */
table.sidebyside thead th.controls,
table.sidebyside th.controls {
  padding: 0;
}

.banner input {
  vertical-align: middle;
}

.box-container {
  width: 99%;
}

.box.important {
  padding: 10px;
}

.box.important .box-inner {
  width: 90%;
}

.review-request .controls {
  border-top: 1px #999999 solid;
  padding-top: 3px;
  background-color: #e8e5cd;
}

.review-request #details td {
  padding: 4px;
}

Make the background of the comment flags transparent on IE.


/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .suggest-preview-additional-widget {
	white-space: nowrap;
}

.monaco-editor .suggest-preview-additional-widget .content-spacer {
	color: transparent;
	white-space: pre;
}

.monaco-editor .suggest-preview-additional-widget .button {
	display: inline-block;
	cursor: pointer;
	text-decoration: underline;
	text-underline-position: under;
}

.monaco-editor .ghost-text-hidden {
	opacity: 0;
}

/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.monaco-editor .suggest-preview-additional-widget {
	white-space: nowrap;
}

.monaco-editor .suggest-preview-additional-widget .content-spacer {
	color: transparent;
	white-space: pre;
}

.monaco-editor .suggest-preview-additional-widget .button {
	display: inline-block;
	cursor: pointer;
	text-decoration: underline;
	text-underline-position: under;
}

.monaco-editor .ghost-text-hidden {
	opacity: 0;
	font-size: 0;
}

Set font-size:0 to improve rendering of hidden text, caused by multi-line inline ghost text.


#leftside {
  border-right: 2px solid #dedede;
  display: inline;
  float: left;
  padding-right: 10px;
  width: 740px;
}

ul {
  font-family: 'Roboto', sans-serif;
}

#rightside {
  display: inline;
  float: left;
  padding: 9px;
  width: 230px;
}

iframe.facebook {
  background-color: transparent;
  border-width: 0;
  margin: 10px auto;
  overflow: hidden;
  width: 230px;
}

.event-container {
  margin-top: 16px;
}

.event-container h4 {
  margin: 0px;
}

.progress-container {
  background-color: #ffb938;
  height: 5px;
  margin: 5px 0px;
  padding: 0px;
  width: 100%;
}

hr.progress-meter {
  background-color: #35586e;
  height: 5px;
  margin: 0px;
}

#leftside {
  border-right: 2px solid #dedede;
  display: inline;
  float: left;
  padding-right: 10px;
  width: 740px;
}

ul {
  font-family: 'Roboto', sans-serif;
}

nav ul {
  font-family: 'Roboto Condensed', sans-serif;
}

#rightside {
  display: inline;
  float: left;
  padding: 9px;
  width: 230px;
}

iframe.facebook {
  background-color: transparent;
  border-width: 0;
  margin: 10px auto;
  overflow: hidden;
  width: 230px;
}

.event-container {
  margin-top: 16px;
}

.event-container h4 {
  margin: 0px;
}

.progress-container {
  background-color: #ffb938;
  height: 5px;
  margin: 5px 0px;
  padding: 0px;
  width: 100%;
}

hr.progress-meter {
  background-color: #35586e;
  height: 5px;
  margin: 0px;
}

Fix the menu using the wrong font

Fix the menu using the wrong font


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

treechildren::-moz-tree-image(siteCol){
	list-style-image:url(chrome://global/skin/global.png);
	-moz-image-region:rect(144px 16px 160px 0);
	width:16px;
	height:16px;
	margin-inline-end:3px}

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

treechildren::-moz-tree-image(siteCol){
	list-style-image:url(chrome://global/skin/global.png);
	-moz-image-region:rect(144px 16px 160px 0);
	width:16px;
	height:16px;
	-moz-margin-end:3px}

Use prefixed style for now

Use prefixed style for now


body {
  margin: 0px;
  font-family: Helvetica;
}

html, body, #map, #sidebar { height: 100%; }

h1, h2, h3, h4, h5, h6 {
  margin: 0.5em 0px;
}

ul {
  margin: 0px;
}

label {
  display: inline-block;
  width: 3em;
}

input[type=text] {
  font-size: 100%;
  width: 220px;
}

#map {
  float: right;
  width: calc(100% - 300px);
}

#sidebar {
  float: left;
  width: 300px;
  padding: 10px;
  overflow-y: scroll;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

li.selected {
  background: #ffc;
}

.hidden {
  display: none;
}

.pico-content {
  background: white;
  border-radius: 5px;
  padding: 20px;
}

body {
  margin: 0px;
  font-family: Helvetica;
}

html, body, #map, #sidebar { height: 100%; }

h1, h2, h3, h4, h5, h6 {
  margin: 0.5em 0px;
}

ul {
  margin: 0px;
}

label {
  display: inline-block;
  width: 3em;
}

input[type=text] {
  font-size: 100%;
  width: 220px;
}

#map {
  float: right;
  width: calc(100% - 300px);
}

#sidebar {
  float: left;
  width: 300px;
  padding: 10px;
  overflow-y: scroll;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

li.selected {
  background: #ffc;
}

.hidden {
  display: none;
}

/* MODAL STYLE */
.pico-content {
  background: white;
  border-radius: 5px;
  padding: 20px;
}

Document which style is the modal's

Document which style is the modal's


body
{
    background: #eeeeee;
    text-align: center;
}
#body
{
    background: #ffffff;
    text-align: left;
    padding: 15px;
    border: solid 1px #cccccc;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
.smallLink
{
    font-size: 0.8em;
}
.contentItem
{
    margin-left: 10px;
}

.navbar .brand {
  display: block;
  float: left;
  padding: 10px 20px 10px;
  margin-left: 270px;
  font-family: 'Lobster', cursive;
  font-size: 20px;
  font-weight: 200;
  color: #999999;
/*  text-shadow: 0 1px 0 #ffffff; */
}

.navbar .nav {
  position: relative;
  left: 0;
/*  display: block; */
  display: inline-block;
  float: left;
  margin: 0 10px 0 0;
}

Adjust brand font and position

Adjust brand font and position


body {
    font-weight: 400;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}

pre, code {
    border: none;
    border-radius: 0;
    background-color: #f9f9f9;
    font-size: 0.8em;
}

pre {
    font-size: 1em;
}

code {
    color: inherit;
}

#header {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

#header a:hover {
    text-decoration: none;
}

#footer {
    margin: 20px 0;
    font-size: 0.85em;
    color: #999;
    text-align: center;
}

#content > .page-header:first-child {
    margin-top: 0;
}

#content > .page-header:first-child h2 {
    margin-top: 0;
}

#navigation {
    font-size: 0.9em;
}

#navigation li a {
    padding-left: 10px;
    padding-right: 10px;
}

#navigation .nav-header {
    padding-left: 0;
    padding-right: 0;
}

body {
    font-weight: 400;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}

pre, code {
    border: none;
    border-radius: 0;
    background-color: #f9f9f9;
    font-size: 0.85em;
}

pre {
    font-size: 1em;
}

code {
    color: inherit;
}

#header {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

#header a:hover {
    text-decoration: none;
}

#footer {
    margin: 20px 0;
    font-size: 0.85em;
    color: #999;
    text-align: center;
}

#content > .page-header:first-child {
    margin-top: 0;
}

#content > .page-header:first-child h2 {
    margin-top: 0;
}

#navigation {
    font-size: 0.9em;
}

#navigation li a {
    padding-left: 10px;
    padding-right: 10px;
}

#navigation .nav-header {
    padding-left: 0;
    padding-right: 0;
}

Increase code and pre size a touch

Increase code and pre size a touch


body {
  padding: 0 16px;
}

label.timespan {
  margin-left: 20px;
}

.results {
  margin-top: 1em;
}

.result {
  margin: 0.5em 0;
}

.title {
  font-size: 1.2em;
}

.updated_at, .contet {
  font-size: 0.8em;
}

body {
  padding: 0 16px;
}

label.timespan {
  margin-left: 20px;
}

.results {
  margin-top: 1em;
}

.result {
  margin: 1em 0;
}

.title {
  font-size: 1.4em;
}

Adjust result title size and margin

Adjust result title size and margin


pre.line-numbers {
	position: relative;
	padding-left: 3.8em;
	counter-reset: linenumber;
}

pre.line-numbers > code {
	position: relative;
    white-space: inherit;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -3.8em;
	width: 3em; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	border-right: 1px solid #999;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

	.line-numbers-rows > span {
		pointer-events: none;
		display: block;
		counter-increment: linenumber;
	}

		.line-numbers-rows > span:before {
			content: counter(linenumber);
			color: #999;
			display: block;
			padding-right: 0.8em;
			text-align: right;
		}

pre[class*="language-"].line-numbers {
	position: relative;
	padding-left: 3.8em;
	counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
	position: relative;
	white-space: inherit;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -3.8em;
	width: 3em; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	border-right: 1px solid #999;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

	.line-numbers-rows > span {
		pointer-events: none;
		display: block;
		counter-increment: linenumber;
	}

		.line-numbers-rows > span:before {
			content: counter(linenumber);
			color: #999;
			display: block;
			padding-right: 0.8em;
			text-align: right;
		}

Make line-numbers styles more specific

Make line-numbers styles more specific

The padding added to `pre.line-numbers` in the line-number's CSS is
overwritten by the theme's CSS if the theme is loaded second. This
ensures the CSS can come in any order without specificity issues.


/*
 * Style for components/Privacy/index.js
 */

.hr {
    width: 95%;
    margin: 40px auto 48px;
    border-top: 1px solid #92BBC2;
}

.title {
    font-size: 24px;
    color: #22727F;
    letter-spacing: -0.72px;
    padding-left: 36px;
}

.box {
    background-color: #FFF;
    border-radius: 4px;
    margin-top: 8px;
    margin-bottom: 24px;
    border: 1px solid #BFBFBF;
    .upper {
        padding: 36px;
        font-size: 18px;
        color: #222;
    }
    .separate {
        width: auto;
        margin: 0 16px;
        border-top: 1px solid #DDD;
    }
    .lower {
        padding: 36px;
        color: #222;
    }
    .lower_txt {
        font-size: 18px;
    }
}

/*
 * Style for components/Privacy/index.js
 */

.hr {
    width: 95%;
    margin: 40px auto 48px;
    border-top: 1px solid #92BBC2;
}

.title {
    font-size: 24px;
    color: #22727F;
    letter-spacing: -0.72px;
    padding-left: 36px;
}

.box {
    background-color: #FFF;
    border-radius: 4px;
    margin-top: 8px;
    margin-bottom: 24px;
    border: 1px solid #BFBFBF;
    .upper {
        padding: 36px;
        font-size: 18px;
        color: #222;
    }
    .separate {
        width: auto;
        margin: 0 16px;
        border-top: 1px solid #DDD;
    }
    .lower {
        padding: 36px;
        color: #222;
    }
    .lower_txt {
        font-size: 18px;
        margin-bottom: 10px;
    }
}

Set privacy title margin bottom

Set privacy title margin bottom


h1{
	background: #B3B3B3;
	font-size: 150%;
}

header{
	background: #666666;
	text-align: center;
}

h1{
	color: #FFFFFF;
}

nav{
	font-variant: small-caps;
	font-size: 150%;
	font-family: Arial, "Time New Roman", serif;
}

h2{
	color: #666666;
	background: #00B7E8;
}

details{
	font-style: italic;
}

summary{
	font-style: normal;
}

footer{
	background: #666666;
}

Add lesson's excercise css file

Add lesson's excercise css file


div.admonition code {
  display: inline-block;
  overflow-x: visible;
  line-height: 18px;
  color: #404040;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.7);
}

div.admonition p {
  margin-bottom: 5px;
}

p, ol, ul {
  text-align: justify;
}

p code {
  word-wrap: normal;
}

h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

Fix styling of code tags in headings (h1-6 tags)


.App {
  text-align: center;
}

.scrollable {
  height: calc(100vh - 120px);
  overflow-y: scroll;
}

.periods {
  margin-top: 7px;
}

.form {
  background-color: #fbfbfb;
  padding-bottom: 10px;
  display: flex;
}

.submit {
  flex: 1;
  align-self: center;
}

.search {
  flex: 1;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-intro {
  font-size: large;
}

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

.App {
  text-align: center;
}

.fixed {
  width: 100%;
  z-index: 1;
  position: fixed;
}

.footer {
  right: 0;
  bottom: 0;
  background-color: #fff;
  position: fixed;
}

.app-tabs {
  background-color: white;
}

.periods {
  margin-top: 7px;
}

.form {
  background-color: #fbfbfb;
  padding-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
}

.submit {
  flex: 1;
  align-self: center;
}

.search {
  flex: 1;
}

Fix app styles, footer, header, scroll area


body.light {
  @apply bg-gray-200;
  @apply text-black;
}

.light a {
  @apply text-gray-900;
  @apply bg-white;
  @apply shadow;
}

.light a:hover,
.light a:focus,
.light a:active {
  @apply bg-blue-400;
  @apply text-white;
}

.light h1,
.light h2 {
  @apply text-gray-800;
}

.light header {
  @apply bg-blue-400;
  @apply shadow-lg;
}

header #name {
  @apply text-white;
}

header #title {
  @apply text-white;
}

.light hr {
  @apply hidden;
}

body.light {
  @apply bg-gray-200;
  @apply text-black;
}

.light a {
  @apply text-gray-900;
  @apply bg-white;
  @apply shadow;
}

.light a:hover,
.light a:focus,
.light a:active {
  @apply bg-blue-400;
  @apply text-white;
}

.light main h1,
.light main h2 {
  @apply text-gray-800;
}

.light header {
  @apply bg-blue-400;
  @apply shadow-lg;
  @apply text-white;
}

.light header #name {
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.light header #title {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.light header #logo {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06));
}

.light hr {
  @apply hidden;
}

Rewrite text-shadow on header headings

Rewrite text-shadow on header headings


/* Display map in full screen for X-RAIN */
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://www.river.go.jp/x/krd0107010.php") {
  /* Display map in full screen */
  #main { width: 100% !important; }
  #map-contents { width: auto !important; }

  #single-mp-radar, #mp-radar {
    width: auto !important;
    height: 920px !important;
  }

  #legendPanel1 {
    top: initial !important;
    left: initial !important;
    bottom: 255px !important;
    right: 80px !important;
  }
  #mapDate {
    top: initial !important;
    bottom: 4px !important;
    right: 4px !important;
    font: bold 24px/1.2 sans-serif !important;
  }

  #map-size-btn { display: none !important; }

  /* Adjust top menu position */
  header { display: flex !important; }
  header div { width: auto !important; }

  #logo { margin-right: auto !important; }

  #logo-img { vertical-align: middle !important; }
  .logo_cap { display: inline-block !important; }

  .menu { margin: 4px 0.4em 0 0 !important; }

  header > div:empty, .menu br { display: none !important; }
}

/* Display map in full screen for X-RAIN */
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://www.river.go.jp/x/krd0107010.php") {
  /* Display map in full screen */
  #main { width: 100% !important; }
  #map-contents { width: auto !important; }

  #single-mp-radar, #mp-radar {
    width: auto !important;
    height: 950px !important;
  }

  #legendPanel1 {
    top: initial !important;
    left: initial !important;
    bottom: 255px !important;
    right: 80px !important;
  }
  #mapDate {
    top: initial !important;
    bottom: 4px !important;
    right: 4px !important;
    font: bold 24px/1.2 sans-serif !important;
  }

  #map-size-btn { display: none !important; }

  /* Adjust top menu position */
  header { display: flex !important; }
  header div { width: auto !important; }

  #logo { margin-right: auto !important; }

  #logo-img { vertical-align: middle !important; }
  .logo_cap { display: inline-block !important; }

  .menu { margin: 4px 0.4em 0 0 !important; }

  header > div:empty, .menu br { display: none !important; }
}

Make map canvas more large

Make map canvas more large


:root {
  --semantic-focused-input-border-color: #85B7D9;

  --semantic-light-grey: #DCDDDE;
  --semantic-teal: #00B5AD;
  --magenta: #FD1884;
}

:global .photo-backdrop {
  background-image: url(/images/good_hearted_boyman_takes_part_in_remote_retro.jpg);
  background-size: cover;
  box-shadow: inset 0 0 0 100rem rgba(255, 255, 255, 0.25);
}

:global .welcome-wrapper {
  --corner-offset: 5rem;
  position: relative;
  top: var(--corner-offset);
  left: var(--corner-offset);
}

:global .ui.modal {
  top: 30%;
}

:global .popup-appear {
  transform: translateY(100%);
}

:global .popup-appear.popup-appear-active {
  transform: translateY(0%);
  transition: transform 400ms ease-in;
  transition-delay: 300ms;
}

h1 {
  font-size: 4rem;
  font-weight: 200;
  line-height: 4rem;
  color: var(--semantic-teal);
}

sup {
  top: -2rem;
  font-size: 0.9rem;
  color: var(--magenta);
}

:root {
  --semantic-focused-input-border-color: #85B7D9;

  --semantic-light-grey: #DCDDDE;
  --semantic-teal: #00B5AD;
  --magenta: #FD1884;
}

:global .photo-backdrop {
  background-image: url(/images/good_hearted_boyman_takes_part_in_remote_retro.jpg);
  background-size: cover;
  box-shadow: inset 0 0 0 100rem rgba(255, 255, 255, 0.25);
}

:global .welcome-wrapper {
  --corner-offset: 5rem;
  position: relative;
  top: var(--corner-offset);
  left: var(--corner-offset);
}

:global .ui.modal {
  top: 30%;
}

:global .popup-appear {
  transform: translateY(100%);
}

:global .popup-appear.popup-appear-active {
  transform: translateY(0%);
  transition: transform 400ms ease;
  transition-delay: 300ms;
}

h1 {
  font-size: 4rem;
  font-weight: 200;
  line-height: 4rem;
  color: var(--semantic-teal);
}

sup {
  top: -2rem;
  font-size: 0.9rem;
  color: var(--magenta);
}

Use ease transition for form popup

Use ease transition for form popup


:host {
  @apply inline-block list-none h-full text-xs text-center pl-1 pr-4 py-2 leading-none flex-1 border;
  background: var(--color-neutral-300);
  color: var(--color-neutral-700);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--color-neutral-500);

  &:not(:last-of-type) {
    border-right-width: 1px;
    border-right-style: solid;
    border-color: var(--color-neutral-500);
  }

  &.isActive {
    background: var(--color-stock);
    border-bottom-color: var(--color-stock);
    box-shadow: inset 0px 3px var(--color-brand);
  }

  & > * {
    @apply align-middle;
  }

  &:hover,
  &:focus {
    stencila-icon {
      @apply opacity-100;
    }
  }
}

li {
  @apply flex list-none align-middle flex-row flex-nowrap items-center;
}

stencila-icon {
  @apply opacity-0 rounded-sm mr-1;

  &:hover,
  &:active {
    color: var(--color-neutral-300);
    background: var(--color-neutral-700);
  }
}

a,
a:link,
a:visited {
  @apply block no-underline whitespace-nowrap leading-none text-current flex-grow cursor-default pr-1;
}

:host {
  @apply inline-block list-none h-full text-xs text-center pl-1 pr-4 py-2 leading-none flex-1 border;
  background: var(--color-neutral-300);
  color: var(--color-neutral-700);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--color-neutral-500);

  &:not(:last-of-type) {
    border-right-width: 1px;
    border-right-style: solid;
    border-color: var(--color-neutral-500);
  }

  &.isActive {
    background: var(--color-stock);
    border-bottom-color: var(--color-stock);
    box-shadow: inset 0px 3px var(--color-brand);
  }

  & > * {
    @apply align-middle;
  }

  &:hover,
  &:focus {
    &:not(.isActive) {
      background: var(--color-neutral-400);
    }

    stencila-icon {
      @apply opacity-100;
    }
  }
}

li {
  @apply flex list-none align-middle flex-row flex-nowrap items-center;
}

stencila-icon {
  @apply opacity-0 rounded-sm mr-1;

  &:hover,
  &:active {
    color: var(--color-neutral-300);
    background: var(--color-neutral-700);
  }
}

a,
a:link,
a:visited {
  @apply block no-underline whitespace-nowrap leading-none text-current flex-grow cursor-default pr-1;
}

fix(Tabs): Add visual feedback when hovering over tabs


/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 50px;
  padding-bottom: 20px;
}

.playlist-grid-cell {
  margin: 10px;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

.playlist-grid-cell img {
  padding: 5px;
  max-height: 300px;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.layer span {
  text-align: center;
  font-size: 20px;
  font-style: italic;
  vertical-align: middle;
  position:absolute;
  top:50%;
}

.selected {
    background-color: rgba(152, 251, 152, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.selected span {
  text-align: center;
  font-size: 20px;
  font-style: italic;
  vertical-align: middle;
  position:absolute;
  top:50%;
}

Add selected class for selected album grid cells.


body {
    font-family: "Roboto";
}

.main {
    margin-left: auto;
    margin-right: auto;
    width: 30em;
    margin-top: 5em;
}

.header {
    font-size: 1.4em;
    margin-bottom: 1em;
}

.float-left {
    float: left;
}

.calendar {
    clear: left;
}

button {
    border-style: none;
    font-size: 1.6em;
    border-radius: 4px;
    margin-right: 6px;
    outline: none;
}

button:hover {
    background-color: #B7CA56;
}

td {
    height: 4em;
    border-radius: 4px;
    padding-top: 0.3em;
    padding-right: 1em;
    padding-bottom: 1em;
    background-color: #DAE7E4;
}

td.weekend {
    background-color: #B7CA56;
}

td.other-month {
    color: gray;
}

.spinner {
    font-size: 1.6em;
}

body {
    font-family: "Roboto";
}

.main {
    margin-left: auto;
    margin-right: auto;
    width: 30em;
    margin-top: 5em;
}

.header {
    font-size: 1.4em;
    margin-bottom: 1em;
    padding-left: 2px;
}

.navigation {
    padding-left: 2px;
}

.float-left {
    float: left;
}

.calendar {
    clear: left;
}

button {
    border-style: none;
    font-size: 1.6em;
    border-radius: 4px;
    margin-right: 6px;
    outline: none;
}

button:hover {
    background-color: #B7CA56;
}

td {
    height: 4em;
    border-radius: 4px;
    padding-top: 0.3em;
    padding-right: 1em;
    padding-bottom: 1em;
    background-color: #DAE7E4;
}

td.weekend {
    background-color: #B7CA56;
}

td.other-month {
    color: gray;
}

.spinner {
    font-size: 1.6em;
}

Align header and navigation with table cells.


@import '../../vendor/react-calendar.css';

:global(.geosuggest__suggests--hidden) {
  max-height: 0;
  overflow: hidden;
  border-width: 0;
}

.location {
  color: black;
  width: 100%;
}

.datepicker {
  display: flex;
  justify-content: center;
}

Add Conference Form specific styles.

Add Conference Form specific styles.


body {
    font-weight: 400;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}

pre, code {
    border: none;
    border-radius: 0;
    background-color: #f9f9f9;
    font-size: 0.85em;
}

pre {
    font-size: 1em;
}

code {
    color: inherit;
}

#header {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

#header a:hover {
    text-decoration: none;
}

#footer {
    margin: 20px 0;
    font-size: 0.85em;
    color: #999;
    text-align: center;
}

#content > .page-header:first-child {
    margin-top: 0;
}

#content > .page-header:first-child h2 {
    margin-top: 0;
}

#navigation {
    font-size: 0.9em;
}

#navigation li a {
    padding-left: 10px;
    padding-right: 10px;
}

#navigation .nav-header {
    padding-left: 0;
    padding-right: 0;
}

body {
    font-weight: 400;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}

pre, code {
    border: none;
    border-radius: 0;
    background-color: #f9f9f9;
    font-size: 0.85em;
}

pre {
    font-size: 1em;
}

code {
    color: inherit;
}

/* see:
 * http://stackoverflow.com/questions/18329010/what-happened-to-nav-header-class
 */
.nav > li.nav-header {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

#header {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

#header a:hover {
    text-decoration: none;
}

#footer {
    margin: 20px 0;
    font-size: 0.85em;
    color: #999;
    text-align: center;
}

#content > .page-header:first-child {
    margin-top: 0;
}

#content > .page-header:first-child h2 {
    margin-top: 0;
}

#navigation {
    font-size: 0.9em;
}

#navigation li a {
    padding-left: 10px;
    padding-right: 10px;
}

#navigation .nav-header {
    padding-left: 0;
    padding-right: 0;
}

Add a nav header class (missing in bootstrap 3).


/**
 * Primary styles
 *
 * Author: IPython Development Team
 */

body {
    background-color: white;
    /* This makes sure that the body covers the entire window and needs to
       be in a different element than the display: box in wrapper below */
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    overflow: hidden;
}

div#header {
    /* Initially hidden to prevent FLOUC */
    display: none;
    position: relative;
    height: 45px;
    padding: 5px;
    margin: 0px;
    width: 100%;
}

span#ipython_notebook {
    position: absolute;
    padding: 2px;
}

span#ipython_notebook h1 {
    font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    font-size: 197%;
    display: inline;
    color: black;
}

div#main_app {
    /* Initially hidden to prevent FLOUC */
    display: none;
    width: 100%;
    position: relative;
}

.ui-button .ui-button-text {
    padding: 0.2em 0.8em;
    font-size: 77%;
}

/**
 * Primary styles
 *
 * Author: IPython Development Team
 */

body {
    background-color: white;
    /* This makes sure that the body covers the entire window and needs to
       be in a different element than the display: box in wrapper below */
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    overflow: hidden;
}

div#header {
    /* Initially hidden to prevent FLOUC */
    display: none;
    position: relative;
    height: 40px;
    padding: 5px;
    margin: 0px;
    width: 100%;
}

span#ipython_notebook {
    position: absolute;
    padding: 2px;
}

span#ipython_notebook h1 {
    font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    font-size: 150%;
    display: inline;
    color: black;
}

div#main_app {
    /* Initially hidden to prevent FLOUC */
    display: none;
    width: 100%;
    position: relative;
}

.ui-button .ui-button-text {
    padding: 0.2em 0.8em;
    font-size: 77%;
}

Adjust title area sizes to improve alignment.


/deep/ body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  margin: 0;
}
section {
    align-items: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
}
.red {
    background-color: #d32f2f;
}
.blue {
    background-color: #1976D2;
}
.green {
    background-color: #388E3C;
}
.btn {

}

.btn {
    border: none;
    border-radius: 1px;
    background-color: #fff;
    font-weight: bold;
    padding: .5rem;
    text-transform: uppercase;
    transition: background-color .25s;
}
.btn:hover,
.btn:focus {
    background-color: #BDBDBD;
}
.btn:active {
    background-color: #9E9E9E;
}

/deep/ body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  margin: 0;
}
section {
    align-items: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
}
.red {
    background-color: #d32f2f;
}
.blue {
    background-color: #1976D2;
}
.green {
    background-color: #388E3C;
}
.btn {
    border: none;
    border-radius: 1px;
    background-color: #fff;
    font-weight: bold;
    padding: .5rem;
    text-transform: uppercase;
    transition: background-color .25s;
}
.btn:hover,
.btn:focus {
    background-color: #BDBDBD;
}
.btn:active {
    background-color: #9E9E9E;
}

Add open modal buttons 🆗

Add open modal buttons 🆗


@media (--viewport-sm) {
  .t-sm-shadow   { box-shadow: var(--shadow) var(--shadow-color); }
  .t-sm-shadowXs { box-shadow: var(--shadow-xs) var(--shadow-color); }
  .t-sm-shadowSm { box-shadow: var(--shadow-sm) var(--shadow-color) }
  .t-sm-shadowMd { box-shadow: var(--shadow-md) var(--shadow-color) }
  .t-sm-shadowLg { box-shadow: var(--shadow-lg) var(--shadow-color) }
  .t-sm-shadowXl { box-shadow: var(--shadow-xl) var(--shadow-color) }
  .t-sm-shadow0  { box-shadow: none; }
}

@media (--viewport-sm) {
  .t-sm-shadow   { box-shadow: var(--shadow) var(--shadow-color) !important; }
  .t-sm-shadowXs { box-shadow: var(--shadow-xs) var(--shadow-color) !important; }
  .t-sm-shadowSm { box-shadow: var(--shadow-sm) var(--shadow-color) !important; }
  .t-sm-shadowMd { box-shadow: var(--shadow-md) var(--shadow-color) !important; }
  .t-sm-shadowLg { box-shadow: var(--shadow-lg) var(--shadow-color) !important; }
  .t-sm-shadowXl { box-shadow: var(--shadow-xl) var(--shadow-color) !important; }
  .t-sm-shadow0  { box-shadow: none !important; }
}

Add `!important` to tools packages

Add `!important` to tools packages


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

#home-button {
  display: none;
}

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

.search-go-container {
    display: none;
}

Hide the 'go' button in the search entry


/**
 * Custom styles.
 * Keep these separate from the HTML5 Boilerplate main.css
 */
html, body {
  width: 100%;
}

.sidebar {
  width: 30%;
  height: 100%;
  float: left;
 }

.main {
  width: 60%;
  height: 100%;
  float: left;
  padding: 0 5%;
 }

 h1 {
   text-align: center;
 }

/**
 * Custom styles.
 * Keep these separate from the HTML5 Boilerplate main.css
 */
html, body {
  width: 100%;
  background-color: #ffffff;
  color: #000000;
}

.sidebar {
  width: 30%;
  height: 100%;
  float: left;
 }

.main {
  width: 60%;
  height: 100%;
  float: left;
  padding: 0 5%;
 }

.header {
  background-color: #444444;
  color: #dddddd;
  padding: 1em;
}

 h1 {
   text-align: center;
 }

 .header h1 {
   padding-top: 0;
 }

Add some colours to the page layout.

Add some colours to the page layout.


.photon-button {
  /* reset default styles */
  background: none;
  border: none;
  margin: 0;
  padding: 0;

  /* photon styles */
  background-color: var(--grey-90-a10);
  padding: 0 8px;
  border-radius: 2px;
}

.photon-button:hover {
  background-color: var(--grey-90-a20);
}

.photon-button:hover:active {
  background-color: var(--grey-90-a30);
}

/* This is a Firefox-specific style because Firefox adds a focusring at a bad
 * position. We're adding our own below. */
.photon-button::-moz-focus-inner {
  border: none;
}

/* Using -moz-focusring to target Firefox only, as a result of the style above */
.photon-button:-moz-focusring {
  outline: 1px dotted black;

  /* This should be eventually the default behavior.
   * See https://bugzilla.mozilla.org/show_bug.cgi?id=315209 */
  -moz-outline-radius: 2px;
}

.photon-button-ghost {
  background-color: transparent;
  height: 32px;
  width: 32px;
}

.photon-button-ghost:hover {
  background-color: var(--grey-90-a10);
}

.photon-button-ghost:hover:active {
  background-color: var(--grey-90-a20);
}

Add some Photon styles for buttons

Add some Photon styles for buttons


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

.css-length {
  display: inline-block;
  position: relative;
  outline: none;
}

.value {
  cursor: ew-resize;
}

.unit-dropdown {
  display: none;
}

.unit-dropdown select {
  all: unset;
  cursor: pointer;
  opacity: 0%;
  width: 0.8em;
}

.icon {
  position: absolute;
  display: inline-block;
  -webkit-mask-image: var(--image-file-chevrons);
  -webkit-mask-position: -12px 4px;
  -webkit-mask-size: 19px 6px;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--color-text-primary);
  content: "";
  height: 1em;
  width: 1em;
}

:host(:not(:last-child)) {
  margin-right: 0.1em;
}

:host(:not(:last-child)) .unit-dropdown {
  position: absolute;
}

.css-length:hover .unit-dropdown {
  display: inline-block;
}

:host(:last-child) .unit-dropdown select {
  width: 0.6em;
}

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

.css-length {
  display: inline-block;
  position: relative;
  outline: none;
}

.value {
  cursor: ew-resize;
}

.unit-dropdown {
  display: none;
}

.unit-dropdown select {
  all: unset;
  cursor: pointer;
  opacity: 0%;
  width: 0.8em;
  background-color: var(--color-background);
}

.icon {
  position: absolute;
  display: inline-block;
  -webkit-mask-image: var(--image-file-chevrons);
  -webkit-mask-position: -12px 4px;
  -webkit-mask-size: 19px 6px;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--color-text-primary);
  content: "";
  height: 1em;
  width: 1em;
}

:host(:not(:last-child)) {
  margin-right: 0.1em;
}

:host(:not(:last-child)) .unit-dropdown {
  position: absolute;
}

.css-length:hover .unit-dropdown {
  display: inline-block;
}

:host(:last-child) .unit-dropdown select {
  width: 0.6em;
}

Add background for <length> comp dropdown

This CL adds background color to apply correct contrast in dark mode.

Fixed: 1264017
Change-Id: I1d919590718423b25a8e9cfa263558073d3908cd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3417153
Auto-Submit: Changhao Han <68542faf32f0a558a873c0f094ca9bedb2744bff@chromium.org>
Reviewed-by: Alex Rudenko <d8d88e7d7e77f69e23d1d1432231196fb8e02a62@chromium.org>
Commit-Queue: Alex Rudenko <d8d88e7d7e77f69e23d1d1432231196fb8e02a62@chromium.org>


ul {
	margin-left: 0;
	margin-bottom: 0;
}

li {
	list-style: none;
	padding: 4px;
}

li.selected {
	background-color: #cee;
}

 .modal-body {
	height: 400px;
}

Set height of modal to 400px

Set height of modal to 400px

This isn't that pretty but it fixes #3.


/**
 * The following style rules affect Extension Infobars on the Mac.
 */

body {
  background: -webkit-gradient(linear, left top, left bottom,
              from(#EBEBEB), to(#CFCFCF));
  font-family: 'Lucida Grande', Helvetica, sans-serif;
  font-size: 11px;
  height: 36px; /* Infobars are limited to 36-72px */
  margin: 0px;
  overflow: hidden;
}

/**
 * The following style rules affect Extension Infobars on the Mac.
 */

body {
  background: -webkit-gradient(linear, left top, left bottom,
              from(#EBEBEB), to(#CFCFCF));
  font-family: 'Lucida Grande', Helvetica, sans-serif;
  font-size: 12px;
  height: 36px; /* Infobars are limited to 36-72px */
  margin: 0 38px;
  overflow: hidden;
}

[Mac] Tweak some CSS for extension infobars to have the correct text size and margin.

BUG=51124
TEST=none

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

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


/* Main css file */

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

img,
embed,
object,
video {
    max-width: 100%;
    align-content: center;
}

nav, a, button {
    min-width: 48px;
    min-height: 48px;
}

#logo-name {
    border-bottom: 3px solid;
}

.row {
    padding: 20px;
}

a {
    text-decoration: none !important;
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .container {
        max-width: 768px;
    }
    .col-sm-10 {
        text-align: right;
    }
}

/* Main css file */

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

img,
embed,
object,
video {
    max-width: 100%;
    align-content: center;
}

nav, a, button {
    min-width: 48px;
    min-height: 48px;
}

#logo-name {
    border-bottom: 3px solid #bcbbbb;
}

#portfolio {
    color: #bcbbbb;
}

.row {
    padding: 20px;
}

a {
    text-decoration: none !important;
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .container {
        max-width: 768px;
    }
    .col-sm-10 {
        text-align: right;
    }
    #portfolio h3 {
        text-align: left;
    }
}

Update some border and text color, and fix a minor alignment issue


.leaflet-control-locate  {
	height: 30px;
}

.leaflet-control-locate > div {
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
}
.leaflet-control-locate > div {
    padding: 5px;
    background: rgba(0, 0, 0, 0.25);
}
.leaflet-control-locate a {
    background-color: rgba(255, 255, 255, 0.75);
}
.leaflet-control-locate a{
	background-image: url(images/locate.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
}
.leaflet-control-locate a {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    width: 19px;
    height: 19px;
}
.leaflet-control-locate a:hover {
    background-color: #fff;
}

.leaflet-control-locate.active a {
    background-image: url(images/locate_active.png);
}

.leaflet-touch .leaflet-control-locate a {
    width: 27px;
    height: 27px;
}

Fix control button size rendering on mobile

Fixes the control button size as rendered on mobile webkit based browsers.

The locate button is now the same size as the zoom in / out buttons.
Before the locate button was much smaller, and much harder to push with fat fingers


@import url(./Animation/Animation.css);
@import url(./BaseLayerPicker/BaseLayerPicker.css);
@import url(./checkForChromeFrame.css);
@import url(./FullscreenButton/FullscreenButton.css);
@import url(./SceneModePicker/SceneModePicker.css);
@import url(./SvgPath/SvgPath.css);
@import url(./Timeline/Timeline.css);
@import url(./Viewer/Viewer.css);

/* Shared CSS classes are imported last, to ensure that the above CSS must override in an order-independent fashion. */
@import url(../CesiumWidget/CesiumWidget.css);

@import url(./Animation/Animation.css);
@import url(./BaseLayerPicker/BaseLayerPicker.css);
@import url(./checkForChromeFrame.css);
@import url(./FullscreenButton/FullscreenButton.css);
@import url(./SceneModePicker/SceneModePicker.css);
@import url(./SvgPath/SvgPath.css);
@import url(./Timeline/Timeline.css);
@import url(./Viewer/Viewer.css);

/* Shared CSS classes are imported last, to ensure that the above CSS must override in an order-independent fashion. */
@import url(./CesiumWidget/CesiumWidget.css);

Fix incorrect URL to CesiumWidget.css.

Fix incorrect URL to CesiumWidget.css.


.thumbnail > img {
    width: 100%;
}

.thumbnail > .jail {
    position: absolute;
    top: 0;
    left: 0;
}

#msgbox {
    text-align: center;
}

#msgbox > marquee {
    font-size: 6vw;
}

.well > span {
    font-size: 6vw;
}

#controller {
    margin-left: 30px;
}

.score {
    font-size: 3vw;
}

.large > * {
    font-size: 2vw;
}

.relative {
    position: relative;
}

.thumbnail > img {
    width: 100%;
}

.thumbnail > .jail {
    position: absolute;
    top: 0;
    left: 0;
}

#msgbox {
    text-align: center;
}

#msgbox > marquee {
    font-size: 6vw;
}

.well > span {
    font-size: 6vw;
}

#controller {
    margin-left: 30px;
}

.score {
    font-size: 3vw;
}

.large > * {
    font-size: 2vw;
}

.large > .input-group-addon {
  padding-top: 3px;
  padding-bottom: 3px;
}

.relative {
    position: relative;
}

Fix height mismatch in input elements

Fix height mismatch in input elements

In full(or large width) screen, font size of input-group-addon is
too higher than input element(form-control.input-lg) because font
size is 2vw in inner of the .large class elements.


#edit-civicrm-cron-frequency-items-wrapper input,
#edit-civicrm-cron-frequency-ticks-wrapper input {
  width: 3em;
  margin: 0 5px 0 0;
}

#edit-civicrm-cron-frequency-ticks-wrapper {
  float: left;
  clear: both;
}

#edit-civicrm-cron-frequency-items-wrapper {
  float: left;
  margin: 0 0 5px 0;
}

#edit-civicrm-cron-frequency-unit-wrapper {
  float: left;
}

Add css for civi queues.

Add css for civi queues.


body {
  padding-top: 50px;
}
.starter-template {
  padding: 40px 15px;
  text-align: justify;
}
img { border: none; }
.alignleft { float:left; margin:0 15px 5px 0; }
.alignright { float:right; margin:0 0 5px 15px; }
img.border { border:3px solid #888; padding:4px; }

.footer-links {
  margin: 10px 0;
  padding-left: 0;
}
.footer-links li {
  display: inline;
  padding: 0 2px;
}
.footer-links li:first-child {
  padding-left: 0;
}

.code {
  margin: 0
}

/* From @mnot at: https://github.com/twbs/bootstrap/issues/1767 */
*[id]:before {
  display: block;
  content: " ";
  margin-top: -75px;
  height: 75px;
  visibility: hidden;
}
.starter-template {
  padding: 40px 15px;
  text-align: justify;
}
img { border: none; }
.alignleft { float:left; margin:0 15px 5px 0; }
.alignright { float:right; margin:0 0 5px 15px; }
img.border { border:3px solid #888; padding:4px; }

.footer-links {
  margin: 10px 0;
  padding-left: 0;
}
.footer-links li {
  display: inline;
  padding: 0 2px;
}
.footer-links li:first-child {
  padding-left: 0;
}

.code {
  margin: 0
}

Fix padding for in-page anchors.

Fix padding for in-page anchors.


/* Enroll Plan Page Print Styles */

.container {
    width: 8in;
}

body {
    font-size: 10px;
}

a, a:after { content: normal !important; }

.top-margin {
    display: none;
}

.row {
    margin-top: 10px;
}

.field-row {
    margin-top: 200px;
}

Add Enrollment Plan print stylesheet

Add Enrollment Plan print stylesheet


body {
    margin: 0px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    background-color: #ecece0;
}

div#body {
    max-width: 680px;
    min-width: 480px;
    margin: 20px 40px;
    padding: 20px;
    background-color: #f6f6f0;
    color: #222;
}

p {
    line-height: 1.5em;
}

h1 {
    line-height: 1.1em;
}

ul {
    line-height: 1.5em;
}

a, a:visited {
    color: #ff0000;
}

pre {
    width: 98%;
    white-space: pre-wrap;       /* CSS 3 */
    padding: 5px;
}

code {
    font-size: 14px;
    padding: 2px;
}

blockquote {
    padding: 5px;
}

pre, code, blockquote {
    background-color: #6a6a6a;
    color: #ffefdf;
}

code > span.co {
    color: #ee9990;
}

code > span.st {
    color: #30ee20;
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

body {
    margin: 0px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    background-color: #ecece0;
}

div#body {
    max-width: 680px;
    min-width: 480px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    color: #222;
}

p {
    line-height: 1.5em;
}

h1 {
    line-height: 1.1em;
}

ul {
    line-height: 1.5em;
}

a, a:visited {
    color: #ff0000;
}

pre {
    width: 98%;
    white-space: pre-wrap;       /* CSS 3 */
    padding: 5px;
}

code {
    font-size: 14px;
    padding: 2px;
}

blockquote {
    padding: 5px;
}

pre, code, blockquote {
    background-color: #6a6a6a;
    color: #ffefdf;
}

code > span.co {
    color: #ee9990;
}

code > span.st {
    color: #30ee20;
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Make content div background color slightly lighter and center it.


section figure {
  width:15.625rem;
  height:15.625rem;
  max-width:250px;
  overflow:hidden;
  margin-right:3.125rem;
  margin-bottom: 4.375rem;
}

Create styleSheet for EletronDay pages

Create styleSheet for EletronDay pages


/*
 * Wegas
 * http://wegas.albasim.ch
 *
 * Copyright (c) 2013 School of Business and Engineering Vaud, Comem
 * Licensed under the MIT License
 */
.wegas-template-box-value {
    font-size: 8px
}
.wegas-template-box-unit {
    width:5px;
    height:10px;
    background:steelblue;
    border:1px solid gray;
    float:left;
    margin:0 2px 2px 0;
}
.wegas-template-valuebox-unit {
    background:steelblue;
    border:1px solid gray;
    float:left;
}
.wegas-template-valuebox-selected {
    background:white;
}

.wegas-gauge-content .label{
    margin-top:1px;
}
.wegas-gauge-content .percent{
    margin-top:1em;
}

/*
 * Wegas
 * http://wegas.albasim.ch
 *
 * Copyright (c) 2013 School of Business and Engineering Vaud, Comem
 * Licensed under the MIT License
 */
.wegas-template-box-value {
    font-size: 7pt;}
.wegas-template-box-unit {
    width:5px;
    height:10px;
    background:steelblue;
    border:1px solid gray;
    float:left;
    margin:0 2px 2px 0;
}
.wegas-template-valuebox-unit {
    background:steelblue;
    border:1px solid gray;
    float:left;
}
.wegas-template-valuebox-selected {
    background:white;
}

.wegas-gauge-content .label{
    margin-top:1px;
}
.wegas-gauge-content .percent{
    margin-top:1em;
}

Set template box font size in pt rather than px


/*  firefox puts scrollbars within padded area and shifts horizontally 1 pixel */

.haystack_backdrop_wrap div
{
	margin: 7px;
	width: 576px;
	height: 150px;
}

.haystack_backdrop_wrap pre
{
	padding: 0px 1px;
}

/*  firefox puts scrollbars within padded area and shifts horizontally 1 pixel */

.haystack_backdrop_wrap div
{
	margin: 7px;
	width: 582px;
	height: 200px;
}

.haystack_backdrop_wrap pre
{
	padding: 0px 1px;
}

Fix textarea size in Firefox

Fix textarea size in Firefox


body {
  font-family: Arial;
}
h1 {
  color: blue;
}
.headline {
  font-size: 24px;
}

td {
  padding: 5px;
}

Add fixture for remote testing.

Add fixture for remote testing.


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

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

  svg {
    transform: translateY(-2px);
  }

  * + svg,
  svg + * {
    margin-left: var(--spacer-smallest);
  }

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

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

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

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

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

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

  svg {
    transform: translate3d(0, -2px, 0);
  }

  * + svg,
  svg + * {
    margin-left: var(--spacer-smallest);
  }

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

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

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

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

Use translate3d instead of translateY

Use translate3d instead of translateY


/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed.
 */

/*
 * De-emphasize inactive panes, in order to make it easy to quickly see which
 * pane is active.
 *
 * Credit: http://discuss.atom.io/t/how-to-know-which-pane-is-focused/10577/2
 */
.pane:not(.active) {
  opacity: 0.7;
}

.tree-view {

}

.editor {

}

.editor .cursor {

}

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed.
 */

/*
 * De-emphasize inactive panes, in order to make it easy to quickly see which
 * pane is active.
 *
 * Credit: http://discuss.atom.io/t/how-to-know-which-pane-is-focused/10577/2
 */
.pane:not(.active) {
  opacity: 0.75;
}

.tree-view {

}

.editor {

}

.editor .cursor {

}

Increase opaticy for active Atom panes

Increase opaticy for active Atom panes


#font-settings > section > .font-input-div {
  -webkit-margin-end: 5em;
}

.font-input-div > div > select {
  margin-bottom: 10px;
}

.font-input-div > div > .font-input {
  width: 12em;
}

#font-settings > section > .font-sample-div {
  position: absolute;
}

.font-settings-huge {
  float: right;
}

#font-settings > section > .font-input-div {
  -webkit-margin-end: 4em;
}

.font-input-div > div > select {
  margin-bottom: 10px;
}

.font-input-div > div > .font-input {
  width: 12em;
}

#font-settings > section > .font-sample-div {
  height: 90px;
  overflow: hidden;
  position: absolute;
}

.font-settings-huge {
  float: right;
}

DOMUI: Fix an issue where the sample font text would display outside its
containing div. Also fix a margin issue.

BUG=70650
TEST=none

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

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


.kwf-about h1, .kwf-about p {
    padding: 10px;
}
.kwf-about h1 { margin-bottom: 5px; }

.kwf-about .footer {
    position: absolute;
    z-index: 0px;
    width: 314px; _width: 334px;
    bottom: 1px; left: 1px;
    _bottom: 0px; _left: 0px;
    border-top: 2px solid #a9bfd4;
    padding: 10px;
    font-size: 11px;
    background: url(/assets/kwf/images/welcome/footerBg.jpg) bottom left repeat-x;
}
.kwf-about .footer img#enteWelcome {
    position: absolute;
    z-index: 10;
    bottom: 0px; right: 0px;
}

.kwf-about {position:relative; width: 350px; }
.kwf-about .x2-panel-body {background-color: #e2ebf5;}

.kwf-about h1, .kwf-about p {
    padding: 10px;
}
.kwf-about h1 { margin-bottom: 5px; }

.kwf-about .footer {
    position: absolute;
    z-index: 0px;
    width: 314px;
    bottom: 1px; left: 1px;
    border-top: 2px solid #a9bfd4;
    padding: 10px;
    font-size: 11px;
    background: url(/assets/kwf/images/welcome/footerBg.jpg) bottom left repeat-x;
}
.kwf-about .footer img#enteWelcome {
    position: absolute;
    z-index: 10;
    bottom: 0px; right: 0px;
}

.kwf-about {position:relative; width: 350px; }
.kwf-about .x2-panel-body {background-color: #e2ebf5;}

Remove IE6 (!) specific styling (I suppose)


/*PAGE LAYOUT*/

html, body {
    height:100%;
    text-align:center;
}

body {
    background:url("../main/bg-imgs/gallery.jpg"); /*looks for images from the viewpoint of the css file*/
    background-size:cover;
}

.wrap {
    min-height: 100%;
    height: auto;
}

.jumbotron {
    background:black;
    font-family:Verdana;
    font-weight:bold;
    color:white;
    margin-bottom:0px;
    padding: 10px 0px;
}

/*--------------------------------------------

/*columns*/

.columns {
    margin:7% auto;
    width:80%;
}

.home-container {
    font-family:"Courier New", Courier, monospace;
    font-weight:bold;
    font-size:1.2em;
}

.login, .register {
    background-color:#81DAF5;
    height:240px;
    padding-left:1%;
    border-radius: 6px 6px 6px 6px;
}

.login {
    padding-top: 5%;
}

.register{
    padding-top: 2%;
}

#footer {
    border-color:#848484;
    background-color:black;
    color:#D8D8D8;
}

/*PAGE LAYOUT*/

html, body {
    height:100%;
    text-align:center;
}

body {
    background:url("../main/bg-imgs/gallery.jpg"); /*looks for images from the viewpoint of the css file*/
    background-size:cover;
}

.wrap {
    min-height: 100%;
    height: auto;
}

.jumbotron {
    background:black;
    font-family:Verdana;
    font-weight:bold;
    color:white;
    margin-bottom:0px;
    padding: 10px 0px;
}

/*--------------------------------------------

/*columns*/

.columns {
    margin:7% auto;
    width:80%;
}

.home-container {
    font-family:"Courier New", Courier, monospace;
    font-weight:bold;
    font-size:1.2em;
}

.login, .register {
    background-color:#81DAF5;
    height:240px;
    padding-left:1%;
    border-radius: 6px 6px 6px 6px;
}

.login {
    padding-top: 5%;
}

.register{
    padding-top: 2%;
}

/*--------------------------------------------

/*footer*/

#footer {
    border-color:#848484;
    background-color:black;
    color:#D8D8D8;
}

Add comments for footer styling

Add comments for footer styling


.boxel-card-container {
  position: relative;
  background-color: var(--boxel-light);
  border-radius: var(--boxel-border-radius);
  overflow: hidden;
  transition:
    max-width var(--boxel-transition),
    border-radius var(--boxel-transition),
    box-shadow var(--boxel-transition);
}

.boxel-card-container--boundaries {
  box-shadow: 0 0 0 1px var(--boxel-light-500);
}

.boxel-card-container--selected {
  box-shadow: 0 0 0 2px var(--boxel-highlight);
}

.boxel-card-container {
  position: relative;
  background-color: var(--boxel-light);
  border-radius: var(--boxel-border-radius);
  transition:
    max-width var(--boxel-transition),
    border-radius var(--boxel-transition),
    box-shadow var(--boxel-transition);
}

.boxel-card-container > *:first-child {
  border-top-left-radius: var(--boxel-border-radius);
  border-top-right-radius: var(--boxel-border-radius);
}

.boxel-card-container > *:last-child {
  border-bottom-left-radius: var(--boxel-border-radius);
  border-bottom-right-radius: var(--boxel-border-radius);
}

.boxel-card-container--boundaries {
  box-shadow: 0 0 0 1px var(--boxel-light-500);
}

.boxel-card-container--selected {
  box-shadow: 0 0 0 2px var(--boxel-highlight);
}

Allow elements to be seen outside of container's bounds (e.g a dropdown menu)


.insertftb {
    overflow: hidden;
}
.insertftb, ul.ftb, ul.ftb li ul, li.ftb {
    width: 275px;
    height: 100px;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
li.ftb {
    padding-right: 25px;
    float: left;
    padding-bottom: 25px;
}

Revert "- support for bootstrap"

Revert "- support for bootstrap"

This reverts commit 3e4135484e8d139b771c1d36e98ef14620d08812.


svg.railroad-diagram {
  background-color: hsl(30,20%,95%);
}
svg.railroad-diagram path {
  stroke-width: 3;
  stroke: black;
  fill: rgba(0,0,0,0);
}
svg.railroad-diagram text {
  font: bold 14px monospace;
  text-anchor: middle;
}
svg.railroad-diagram text.label {
  text-anchor: start;
}
svg.railroad-diagram text.comment {
  font: italic 12px monospace;
}
svg.railroad-diagram rect {
  stroke-width: 3;
  stroke: black;
  fill: hsl(120,100%,90%);
}

body {
  background-color: hsl(30,20%,95%);
}

input[type=text].form-control, textarea.form-control {
  background-color:  hsl(30,20%,98%);;
}

.load-examples {
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 25px;
}

.load-examples a {
  margin-left: 10px;
}

textarea.form-control.grammar-edit {
  height: 400px;
  margin-bottom: 20px;
}

.alert {
  word-wrap: break-word;
}

svg.railroad-diagram {
  background-color: hsl(30,20%,95%);
}
svg.railroad-diagram path {
  stroke-width: 3;
  stroke: black;
  fill: rgba(0,0,0,0);
}
svg.railroad-diagram text {
  font: bold 14px monospace;
  text-anchor: middle;
}
svg.railroad-diagram text.label {
  text-anchor: start;
}
svg.railroad-diagram text.comment {
  font: italic 12px monospace;
}
svg.railroad-diagram rect {
  stroke-width: 3;
  stroke: black;
  fill: hsl(120,100%,90%);
}

body {
  background-color: hsl(30,20%,95%);
}

input[type=text].form-control, textarea.form-control {
  background-color:  hsl(30,20%,98%);;
}

.load-examples {
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 25px;
}

.load-examples a {
  margin-left: 10px;
}

textarea.form-control.grammar-edit {
  height: 400px;
  margin-bottom: 20px;
  font-family: monospace;
}

.alert {
  word-wrap: break-word;
}

Use monospace font for the edit field

Use monospace font for the edit field