a:link, a:visited, a:hover, a:active {
    color: rgb(186, 186, 186);  /* 50% gray */
}

body {
    background-color: rgb(123, 123, 123);  /* 20% gray */
    color: rgb(255, 255, 255);
    font-family: "SF UI Text", "Lucida Grande", Helvetica, Arial, sans-serif;
    line-height: 1.2;
}

#content { margin: 16px; }

input[type="number"] { width: 4em; }

input[type="radio"], input[type="text"] {
    margin-top: 4px;
    margin-bottom: 4px;
}

input[type="submit"] { padding: 3.5px 7px; }

table.result td { text-align: center; }

table.rjust td { text-align: right; }

td.demo {
    font-weight: 500;
    padding: 4px 24px;
}

textarea {
    font-family: SF Mono, Consolas, monospace;
    font-size: 80%;
    line-height: 1.4;
}

a:link, a:visited, a:hover, a:active {
    color: rgb(186, 186, 186);  /* 50% gray */
}

body {
    background-color: rgb(123, 123, 123);  /* 20% gray */
    color: rgb(255, 255, 255);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
    line-height: 1.2;
}

#content { margin: 16px; }

input[type="number"] { width: 4em; }

input[type="radio"], input[type="text"] {
    margin-top: 4px;
    margin-bottom: 4px;
}

input[type="submit"] { padding: 3.5px 7px; }

table.result td { text-align: center; }

table.rjust td { text-align: right; }

td.demo {
    font-weight: 500;
    padding: 4px 24px;
}

textarea {
    font-family: "SF Mono", Menlo, Consolas, monospace;
    font-size: 80%;
    line-height: 1.4;
}

Correct CSS fonts for systems without SF installed locally


*, body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", "Heiti SC", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
}
body {
  font-size: 13px;
}

#Akashic .show-grid {
	padding: 10px;
}

akashic-records nav ul {
  display: flex;
}
akashic-records nav ul li {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
akashic-records nav ul li a {
  text-align: center;
}

akashic-records .container {
	width: 100%; !important
}

#akashic-records-settings {
  margin-top: 10px;
  margin-bottom: 15px;
}

#myChart {
  width: 100% !important;
  min-height: 350px !important;
  height: 100% !important;
  padding-left: 7x;
  padding-right: 18px;
  padding-top: 10px;
  padding-bottom: 12px;
}

*, body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", "Heiti SC", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
}
body {
  font-size: 13px;
}

#Akashic .show-grid {
	padding: 10px;
}

akashic-records nav ul {
  display: flex;
}
akashic-records nav ul li {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
akashic-records nav ul li a {
  text-align: center;
}

akashic-records .container {
	width: 100%; !important
}

#akashic-records-settings {
  margin-top: 10px;
  margin-bottom: 15px;
}

#myChart {
  min-height: 350px !important;
  height: 100% !important;
  padding-left: 7x;
  padding-right: 18px;
  padding-top: 10px;
  padding-bottom: 12px;
}

Fix width for mouse over position

Fix width for mouse over position


body {
    margin: 0 auto;
    max-width: 50em;
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
    padding: 4em 1em;
    color: #555;
}

body {
  line-height: 1.5;
  padding: 4em 1em;
}
ul{
  padding: 1em;
}

h2 {
  margin-top: 1em;
  padding-top: 1em;
  color: #333;
}

body {
    margin: 0 auto;
    max-width: 50em;
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
    color: #555;
}

ul{
  line-height: 1.5;
}

h2 {
  color: #333;
}

Make the sections closer together.

Make the sections closer together.


html, body{
  height: 100%;
}

body {
  background-color: #eee;
}

.decisionCreation {
  padding-bottom: 0.5em;
}

.panel {
  padding: 10px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  background: white;
  border-radius: 2px;
}

.row {
  padding: 1em;
}

.form-control-label:after {
  content:"*";
  color:red;
}

.pickers {
  display: inline !important;
}

.decisions-composer textarea {
  resize: none;
}

.private-data {
  margin-top:1.8em;
}

.badge {
  font-size:0.9em;
}

.legislationConsider {
  display: inline-block;
}

.dvgColor {
  color: #237885;
}

.paddingRecipients {
  padding-top: 1em;
}

.noPadding {
  padding: 0em !important;
}

.expensesTable td, .expensesTable th {
   text-align: center;
}

.balanceAccountPadding {
  padding-top: 6em;
}

#is_balance_account_approval_for_org {
  display: block;
  margin: 0 auto;
}

html, body{
  height: 100%;
}

body {
  background-color: #eee;
}

.decisionCreation {
  padding-bottom: 0.5em;
}

.panel {
  padding: 10px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  background: white;
  border-radius: 2px;
}

.row {
  padding: 1em;
}

.form-control-label:after {
  content:"*";
  color:red;
}

.pickers {
  display: inline !important;
}

.decisions-composer textarea {
  resize: none;
}

.private-data {
  margin-top:1.8em;
}

.badge {
  font-size:0.9em;
}

.legislationConsider {
  display: inline-block;
}

.dvgColor {
  color: #237885;
}

.paddingRecipients {
  padding-top: 1em;
}

.noPadding {
  padding: 0em !important;
}

.expensesTable td, .expensesTable th {
   text-align: center;
}

.balanceAccountPadding {
  padding-top: 6em;
}

#is_balance_account_approval_for_org, #is_budget_approval_for_org {
  display: block;
  margin: 0 auto;
}

Add padding to checkbox of BudgetApproval


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

body, html, #root {
  min-height: 100%;
}

img {
  max-width: 100%;
}

.App {
  width: 100%;
  min-height: 100%;
}

.mdl-grid {
  max-width: 1200px;
}

.mdl-card {
  width: auto;
}

.mdl-cell {
  overflow: hidden;
}

.app-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -14px;
  margin-top: -14px;
}

@media screen and (max-width: 550px) {
  .mdl-cell {
    margin-left: auto;
    margin-right: auto;
  }
}

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

body, html, #root {
  min-height: 100%;
}

img {
  max-width: 100%;
}

.App {
  width: 100%;
  min-height: 100%;
}

.mdl-grid {
  max-width: 1300px;
}

.mdl-card {
  width: auto;
}

.mdl-cell {
  overflow: hidden;
}

.app-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -14px;
  margin-top: -14px;
}

@media screen and (max-width: 550px) {
  .mdl-cell {
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 479px) {
  .mdl-cell--3-col {
    width: calc(100% - 16px)
  }
}

Increase max width and cell width on Mobile


/*
 * Copyright (C) 2013 salesforce.com, inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

 .THIS {
 	padding: 20px;
 }
 .THIS.uiButton {
 	margin-left: 20px;
 }
 .THIS .uiInputText {
 	padding: 8px;
 	margin-left: 20px;
 	margin-top: 20px;
 	border-radius: 4px;
 }

/*
 * Copyright (C) 2013 salesforce.com, inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

 .THIS .uiInputText {
 	padding: 8px;
 	margin-left: 20px;
 	margin-top: 20px;
 	border-radius: 4px;
 }

Remove redundant css in example

Remove redundant css in example


#top {
display:block;
display: absolute;
background-color:;
top: 170px;
}

#second_from_top {
display: block;
position: absolute;

}

#top {
display:block;
display: absolute;
background-color:;
top: 170px;
}

#second_from_top {
display: block;
position: relative;

}

Change second block technical relative stylesheet


/**
 * 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: http://src.chromium.org/svn/trunk/src@56340 4ff67af0-8c30-449e-8e8b-ad334ec8d88c

Former-commit-id: 85a799e2f43703d62c6373fcc584e025eb2c7e81


.text-box {
    border: 1px solid #eee;
    background: #f0f0f0;
    display: inline-block;
    margin-right: 10px;
    padding: 5px 10px;
    white-space: nowrap;
}
.image {
    width: 91px;
    height: 69px;
    border: 1px solid #eee;
    background-image: url(test_image_reader.png);
    background-size:contain;
    margin-bottom: 10px;
}
.container {
    margin-bottom: 10px;
}
.text-sp {
    font-size: 18sp;
}
.box-px {
    width:80px;
    text-align: center;
}
.box-dp {
    width: 80dp;
    border-width: 5dp;
    text-align: center;
}
.text-px {
    font-size: 18px;
}
.text-pt {
    font-size: 12pt;
}
.p {
    display: block;
    font-size: 14px;
    margin: 10px 0;
}
button {
    margin-right: 10px;
}
root {
    padding: 20px;
}

.text-box {
    border: 1px solid #eee;
    background: #f0f0f0;
    display: inline-block;
    margin-right: 10px;
    padding: 5px 10px;
    white-space: nowrap;
}
.image {
    width: 91px;
    height: 69px;
    border: 1px solid #eee;
    background-image: url(test_image_reader.png);
    background-size: contain;
    margin: 5px 0;
}
.container {
    padding: 5px 0;
}
.text-sp {
    font-size: 18sp;
}
.box-px {
    width:80px;
    text-align: center;
}
.box-dp {
    width: 80dp;
    border-width: 5dp;
    text-align: center;
}
.text-px {
    font-size: 18px;
}
.text-pt {
    font-size: 12pt;
}
.p {
    display: block;
    font-size: 14px;
    margin: 10px 0;
}
button {
    margin-right: 10px;
}
root {
    padding: 20px;
}

Replace the margin with padding

Replace the margin with padding


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

.imageGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  grid-gap: 0.5em;

  @media (--screen-medium) {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-gap: 1em;
  }
}

.loadMore {
  margin: var(--medium-padding) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--small-padding);
}

.noAssets {
  composes: absoluteCenter from 'part:@sanity/base/theme/layout/positioning-style';
  font-size: var(--font-size-large);
}

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

.imageGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  grid-gap: 0.5em;

  @media (--screen-medium) {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-gap: 1em;
  }
}

.loadMore {
  margin: var(--medium-padding) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--small-padding);

  @nest &:empty {
    display: none;
  }
}

.noAssets {
  composes: absoluteCenter from 'part:@sanity/base/theme/layout/positioning-style';
  font-size: var(--font-size-large);
}

[form-builder] Hide button container when there's no button


* { margin:0; padding:0; }
body { background-color:#333; font-family:sans-serif; color:#fff; }
h1 { margin:25px; letter-spacing: .1em; }
h2 { margin:25px; }

.lesson { background-color:#666; margin:25px; padding:15px; }

/* Lesson 01 */
.l1 .bar { display:inline-block; background-color: #222; width:25px; margin:3px; vertical-align:bottom;}

/* Lesson 02 */
.l2 .bubble { fill:#222; }

/* Lesson 03 */

/* Lesson 04 */
.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

* { margin:0; padding:0; }
body { background-color:#333; font-family:sans-serif; color:#fff; width:960px; margin: 0 auto;}
h1 { margin:25px; letter-spacing: .1em; }
h2 { margin:25px; }

.lesson { background-color:#666; width:930px; padding:15px;}

/* Lesson 01 */
.l1 .bar { display:inline-block; background-color: #222; width:25px; margin:3px; vertical-align:bottom;}

/* Lesson 02 */
.l2 .bubble { fill:#222; }

/* Lesson 03 */

/* Lesson 04 */
.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

Change site to have static width

Change site to have static width


/* Our styles */
body {
		margin: 0 auto;
		max-width: 50em;
}

/* Our styles */
body {
		font-family: Optima, Helvetica Neue, sans-serif;
		margin: 0 auto;
		max-width: 50em;
}

Use a sans serif font! :)

Use a sans serif font! :)


#bioconda h1 {
  display: none;
}

.rst-content div[role="navigation"] {
  display: none;
}

img.logo {
  width: 100%;
}

Set logo width to 100%.

Set logo width to 100%.


.project-overview-sidebar .documents {
    max-height: calc(100vh - 189px);
}

.project-overview-sidebar .documents-card {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

.project-overview-sidebar .card:first-child {
    margin: 0 0 10px 0;
}

.project-overview-sidebar .documents {
    max-height: calc(100vh - 189px) !important;
}

.project-overview-sidebar .documents-card {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

.project-overview-sidebar .card:first-child {
    margin: 0 0 10px 0;
}

Fix max height of documents list in project overview


.form-designer input[type=text] {
    width: 20em;
}

.form-row.dynamic-fields .vTextField { width: 15em; }
.form-row.dynamic-fields .vIntegerField { width: 2.5em; }

.form-row.dynamic-fields input[name$=-title],
.form-row.dynamic-fields input[name$=-name] { width: 10em; }

.form-row.dynamic-fields select[name$=-type],
.form-row.dynamic-fields input[name$=-default_value] { width: 8em; }

.inline-group {
    overflow: auto;
}

.form-designer input[type=text] {
    width: 20em;
}

.form-row.dynamic-fields .vTextField { width: 15em; }
.form-row.dynamic-fields .vIntegerField { width: 3.5em; }

.form-row.dynamic-fields input[name$=-title],
.form-row.dynamic-fields input[name$=-name] { width: 10em; }

.form-row.dynamic-fields select[name$=-type],
.form-row.dynamic-fields input[name$=-default_value] { width: 8em; }

.inline-group {
    overflow: auto;
}

Make the integer field readable on narrow screens


.syntaxhighlighter table .container:before {
    display: none !important;
}

.h-scroll {
    height: 90vh; /* %-height of the viewport */
    overflow: auto;
}

.navbar {
    margin-bottom: 0;
}

Remove margin of the navbar

Remove margin of the navbar


/* Custom CSS styles for OneTime web site. */

body {
  /* https://en.wikipedia.org/wiki/Shades_of_white was helpful */
  background: #FDF5E6;
  margin-left: 10%;
  margin-right: 10%;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  line-height: 115%;
}

h1, h2 {
  text-align: center;
  font-weight: bold;
}

ul, ol {
  padding-left: 0;
}

p {
  margin-right: 3%;
}

.example-output {
  margin-left: 5%;
  margin-right: 5%;
  font-family: monospace;
  font-style: italic;
  white-space: pre;
}

.title {
  background: lightblue;
  padding-left: .5em;
  padding-right: .5em;
  border-radius: 1em;
}

.notice {
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
  color: darkgreen;
  font-weight: normal;
  font-size: 80%;
}

:target {
  border: 2px solid red;
  padding: 1em;
}

a, img {
  border: none;
}

/* Custom CSS styles for OneTime web site. */

body {
  /* https://en.wikipedia.org/wiki/Shades_of_white was helpful */
  background: #FDF5E6;
  margin-left: 10%;
  margin-right: 10%;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  line-height: 115%;
}

h1, h2 {
  text-align: center;
  font-weight: bold;
  line-height: 150%;
}

ul, ol {
  padding-left: 0;
}

p {
  margin-right: 3%;
}

.example-output {
  margin-left: 5%;
  margin-right: 5%;
  font-family: monospace;
  font-style: italic;
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  white-space: pre-wrap;       /* css-3 */
}

.title {
  background: lightblue;
  padding-left: .5em;
  padding-right: .5em;
  border-radius: 1em;
}

.notice {
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
  color: darkgreen;
  font-weight: normal;
  font-size: 80%;
}

:target {
  border: 2px solid red;
  padding: 1em;
}

a, img {
  border: none;
}

Make web site work better on small screens


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

#canvas-wrapper {
  width: 800px;
  height: 400px;
  position: relative;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
}

#maze {
  border: 1px solid black;
  background: black;
}

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

body {
  background: antiquewhite;
}

#canvas-wrapper {
  width: 800px;
  height: 400px;
  position: relative;
  top: 10%;
  margin: 0 auto;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
}

#maze {
  border: 2px solid black;
  background: black;
}

Put the canvas horizontally centered

Put the canvas horizontally centered

Change the background color, add some vertical offset to the canvas and
change the canvas border to 2px.


body {
    background-color: lightblue;
    font-family: sans-serif;
}

table {
    border: 1px solid black;
}

th {
    font-size: 150%;
    text-align: left;
    background-color: aquamarine;
    padding: 10px;
}

td {
    text-align: left;
    background-color: azure;
    padding: 4px;
}

a, a:visited {
    color: inherit;
    text-decoration: none;
    font-weight: bolder;
}

a:hover {
    color: olivedrab;
}

Tweak CSS for links on form.

Tweak CSS for links on form.


.btn {
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
    height: auto;
    margin: 0;
    vertical-align: middle;
}

.CssUi {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5;
}

.Direction {
    color: white;
    font-family: Helvetica, Arial, sans-serif;
    position: absolute;
    margin: 0.1rem;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
    background: url(./arrow-up.svg);
    background-size: contain;
    width: 1.3rem;
    height: 1.3rem;
    display: block;
}

.DirectionHidden {
    display: none;
}

.DirectionForward {
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

.DirectionBackward {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0) rotateX(180deg);
}

.DirectionLeft {
    left: 0;
    top: 50%;
    transform: translate(0, -50%) rotateX(-90deg);
}

.DirectionRight {
    right: 0;
    top: 50%;
    transform: translate(0, -50%) rotateX(90deg);
}

.DirectionTurnaround {
    left: 0;
    bottom: 0;
}

.btn {
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
    height: auto;
    margin: 0;
    vertical-align: middle;
}

.CssUi {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5;
}

.Direction {
    color: white;
    font-family: Helvetica, Arial, sans-serif;
    position: absolute;
    margin: 0.1rem;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
    background: url(./arrow-up.svg);
    background-size: contain;
    width: 1.3rem;
    height: 1.3rem;
    display: block;
}

.DirectionHidden {
    display: none;
}

.DirectionForward {
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

.DirectionBackward {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0) rotate(180deg);
}

.DirectionLeft {
    left: 0;
    top: 50%;
    transform: translate(0, -50%) rotate(-90deg);
}

.DirectionRight {
    right: 0;
    top: 50%;
    transform: translate(0, -50%) rotate(90deg);
}

.DirectionTurnaround {
    left: 0;
    bottom: 0;
}

Use rotate instead of rotateX

Use rotate instead of rotateX


:host {
    display: grid;
    padding: 0;
}

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

.card-content {
    position: relative;
}

.tooltip-text {
    display: inline-table;
}

.tooltip-text ::ng-deep ul {
    padding-left: 15px;
}

.pheader h2 {
    margin-top: 0;
}

.description {
    grid-column: span 1;
}

.grid-content {
    display: grid;
    grid-template-columns: auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-auto-flow: row;
}

@media only screen and (min-width: 400px) {
    .description {
        grid-column: span 2;
    }

    .grid-content {
        grid-template-columns: 1fr 1fr;
    }
}

.tt-container {
    display: grid;
    grid-template-columns: auto 1fr;
}

.tt-label {
    grid-column: 1;
    margin: 1px 2px auto 2px;
}

tt-tooltip {
    grid-column: 2;
}

:host {
    display: grid;
    padding: 0;
}

:host h2 ptooltip {
    font-family: Roboto, Noto, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

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

.card-content {
    position: relative;
}

.tooltip-text {
    display: inline-table;
}

.tooltip-text ::ng-deep ul {
    padding-left: 15px;
}

.pheader h2 {
    margin-top: 0;
}

.description {
    grid-column: span 1;
}

.grid-content {
    display: grid;
    grid-template-columns: auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-auto-flow: row;
}

@media only screen and (min-width: 400px) {
    .description {
        grid-column: span 2;
    }

    .grid-content {
        grid-template-columns: 1fr 1fr;
    }
}

.tt-container {
    display: grid;
    grid-template-columns: auto 1fr;
}

.tt-label {
    grid-column: 1;
    margin: 1px 2px auto 2px;
}

tt-tooltip {
    grid-column: 2;
}

Change details header label tooltip size

Signed-off-by: Christoph Kleine <31da8eadd3e08b4765681520875d9858d60dbfa2@gmail.com>


body {
  font-family:'Source Sans Pro', verdana, arial, helvetica, sans-serif;font-size:15px
}

h1 {
  color: #5C7A99;
}

Add CSS for HTML man pages.

Add CSS for HTML man pages.


body {
    padding-top:65px;
    background-color:#2c2c2c;
    }

.navbar {
  .navbar-inner {
    background-color: #2c2c2c;
    background-image: none;
  }
}

.sform {

    margin:auto;
    margin-left:20px;
    margin-top:40px;
    }

p {
    color:#c2c2c2;
    }

.navbar
{
    background-color: #5e00ff;
}

.form-control {
    color:#000;

    }

.t1 {
    margin:auto;
    width:48em;
    color:c2c2c2;
    text-align:center;
    }

.tablecell {
    float:left;
    width:500px;
    text-align:center;
    margin: 20px;
    }
.header {
    color:#5d90cd;
    text-align:center;
}

.iplayerinfo {
    width:400px;
    margin:40px;
    text-align:center;
    clear:left;
    }
.infotitle {
    text-align:left;
    float:left;
    margin-left:65px;
    }
.infothumb {
    float:right;
    margin-right:60px;
    margin-top:20px;
    }

.form-group {
    float:right;
    clear:right;
    margin-top:12px;
    margin-right:65px;
    }

Add styling to download button.

Add styling to download button.


h1{
  font-size: 2em;
}
h2{
  font-size: 1.2em;
  margin:0;
  margin-bottom: 20px;
}

.panel .panel-heading{
  background-color: #fff;
  border-bottom: 0;
}
.maps{

}

@media (min-width: 768px){
  input{
    margin-left: 10px;
    margin-right: 10px;
  }
  .localidade{
    display: inline;
  }
  address:first-child{
    color:red;
  }
}

Undo modifies on input type to improve mobile xp


/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

Add CSS Reset and page title

Add CSS Reset and page title


@import "../atoms/price.css";

.price-tag {
  text-align: center;
}

.promotional {
  background-color: $color-promotional;
  border-radius: .25rem;
  color: $color-text-promotional;
  overflow: hidden;
  padding: .3125rem;
  position: relative;

  .from-price {
    color: $color-text;
    font-size: .8rem;
    margin-bottom: .3rem;

    .price {
      text-decoration: line-through;
    }

    .price-decimal {
      vertical-align: baseline;
    }

    .price-currency,
    .price-integer,
    .price-decimal {
      font-size: inherit;
      font-weight: normal;
      text-decoration: line-through;
    }
  }
}

@import "../atoms/price.css";

.price-tag {
  text-align: center;
}

.promotional {
  background-color: $color-promotional;
  border-radius: .25rem;
  color: $color-text-promotional;
  overflow: hidden;
  padding-bottom: .5rem;
  padding-left: .3125rem;
  padding-right: .3125rem;
  padding-top: .5rem;
  position: relative;

  .from-price {
    color: $color-text;
    font-size: .8rem;
    margin-bottom: .3rem;

    .price {
      text-decoration: line-through;
    }

    .price-decimal {
      vertical-align: baseline;
    }

    .price-currency,
    .price-integer,
    .price-decimal {
      font-size: inherit;
      font-weight: normal;
      text-decoration: line-through;
    }
  }
}

Add padding to promotional price tag

fix(price-tag): Add padding to promotional price tag


.demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.sample {
}

.code {
  overflow-x: auto;
  overflow-y: hidden;
  overflow: scroll;
}

.demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.sample {
}

.code {
}

Remove scrolling from demo page

Remove scrolling from demo page


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

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

.gray {
	color: var(--gray, gray);
}

.background-gray {
	background-color: var(--gray, gray);
}

.lightgray {
	color: var(--lightgray, lightgray);
}

.background-lighgray {
	background-color: var(--lighgray, lightgray);
}

.darkgray {
	color: var(--darkgray, darkgray);
}

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

.background-red {
	background-color: var(--red, red);
}

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

.background-blue {
	background-color: var(--blue, blue);
}

.green {
	color: var(--green, green);
}

.bakground-green {
	background-color: var(--green, green);
}

.yellow {
	color: var(--yellow, yellow);
}

.background-yellow {
	background-color: var(--yellow, yellow);
}

.purple {
	color: var(--purple, purple);
}

.background-purple {
	background-color: var(--purple, purple);
}

.orange {
	color: var(--orange, orange);
}

.background-orange {
	background-color: var(--orange, orange);
}

Add class for basic colors with customizations

Includes some basic colors that can be customized using custom properties.


/*
	Name: Smashing HTML5
	Date: July 2009
	Description: Sample layout for HTML5 and CSS3 goodness.
	Version: 1.0
	Author: Enrique Ramírez
	Autor URI: http://enrique-ramirez.com
*/

/* Imports */
@import url("pygment.css");
@import url("typogrify.css");

header nav li {
  display: inline;
}

h1 { font-weight: 400;
     margin-top: 1.568rem;
     margin-bottom: 1.568rem;
     font-size: 2.5rem;
     line-height: 0.784; }

h2 { font-style: italic;
     font-weight: 400;
     margin-top: 1.866666666666667rem;
     margin-bottom: 0;
     font-size: 2.1rem;
     line-height: 0.933333333333333; }

h3 { font-style: italic;
     font-weight: 400;
     font-size: 1.8rem;
     margin-top: 2.1777777777777778rem;
     margin-bottom: 0;
     line-height: 1.08888888888889; }

article { position: relative;
          padding: 1rem 0rem 2.5rem 0rem; } // reduced top and bottom padding by 50%

Reduce the amount of space between articles and the size of the heading

These were taking up too much space in the blog format


/* Three columns: 100px each */
.grid-container {
    display: grid;
    grid-template-columns: 600px 0.5fr 0.5fr;
    grid-template-rows: 600px;
    grid-gap: 1rem;
}

/* Three columns: 100px each */
.grid-container {
    display: grid;
    grid-template-columns: 0.5fr 0.5fr;
    grid-template-rows: 600px;
    grid-gap: 1rem;
}

Change layout from px to 0.5fr 0.5fr

Change layout from px to 0.5fr 0.5fr


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

.wrapper {
  display: none;
  transition: transform 250ms ease-out;

  transform: translateX(100%);
  &:global(.active) {
    transform: translateX(0);
  }

  @media(min-width: 1200px) {
    display: flex;
    flex-direction: column;

    width: 300px;
    padding: 0 1.5rem 12.5rem;

    text-align: center;
    align-items: center;
    justify-content: center;

    border-left: 1px solid var(--semantic-divider-border-top-color);
  }

  img {
    max-width: 100px;
  }
}

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

.wrapper {
  display: none;
  transition: transform 250ms ease-out;

  transform: translateX(100%);
  &:global(.active) {
    transition-delay: 200ms;
    transform: translateX(0);
  }

  @media(min-width: 1200px) {
    display: flex;
    flex-direction: column;

    width: 300px;
    padding: 0 1.5rem 12.5rem;

    text-align: center;
    align-items: center;
    justify-content: center;

    border-left: 1px solid var(--semantic-divider-border-top-color);
  }

  img {
    max-width: 100px;
  }
}

Add delay to transform transition for CTA


.ocr_page_container {
}

/*.ocr_page_head {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    padding: 10px;
    background-color: #FBFBFB;
    border-bottom: 1px solid #DDD;
    font-size: 1.2em;
} */

.ocr_page {
    font-size: 1.1em;
    background-color: #FDFDFD;
    padding: 10px;
    overflow: auto;
}

.literal {
}

.waiting {
    background-image: url(/static/ajax-loader-large.gif);
    background-position: center;
    background-repeat: no-repeat;
}

.view_link {
    float: right;
    text-decoration: none;
    color: #999999;
    font-size: 0.9em;
    margin-left: 10px;
}

.view_link:hover {
    background-color: #FFDDDD;
}

.result_link {
    float: right;
    text-decoration: none;
    color: #999999;
    font-size: 0.9em;
    margin-left: 10px;
}

.result_link:hover {
    background-color: #FFDDDD;
}

.inner_container {
}

.ocr_page_container {
}

/*.ocr_page_head {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    padding: 10px;
    background-color: #FBFBFB;
    border-bottom: 1px solid #DDD;
    font-size: 1.2em;
} */

.ocr_page {
    font-size: 1.1em;
    background-color: #FDFDFD;
    padding: 10px;
    overflow: auto;
}

.literal {
}

.waiting {
    background-image: url(/static/ajax-loader-large.gif);
    background-position: center;
    background-repeat: no-repeat;
    min-height: 50px;
}

.view_link {
    float: right;
    text-decoration: none;
    color: #999999;
    font-size: 0.9em;
    margin-left: 10px;
}

.view_link:hover {
    background-color: #FFDDDD;
}

.result_link {
    float: right;
    text-decoration: none;
    color: #999999;
    font-size: 0.9em;
    margin-left: 10px;
}

.result_link:hover {
    background-color: #FFDDDD;
}

.inner_container {
}

Set a min height on loading pages

Set a min height on loading pages


/* SwatPagination */
.swat-pagination {
	padding: 1em;
	text-align: center;
}

.swat-pagination a,
.swat-pagination span {
	padding: 0.2em 0.5em;
	font-size: 85%;
	margin-right: 0.1em;
	border: 1px solid #FFF;
}

.swat-pagination span.swat-pagination-current {
	border: 1px solid #DDD;
	font-weight: bold;
}

.swat-pagination a {
	border: 1px solid #DDD;
	text-decoration: none;
}

.swat-pagination a:hover {
	background-color: #DDD;
	border-color: #BBB;
}

.swat-pagination a.swat-pagination-nextprev {
	font-weight: bold;
}

.swat-pagination span.swat-pagination-nextprev {
	color: #666;
}

.swat-pagination div.swat-pagination-position {
	font-size: 85%;
	font-weight: bold;
	text-align: center;
	margin: 0.2em;
}

/* SwatPagination */
.swat-pagination {
	padding: 1em;
	text-align: center;
}

.swat-pagination a,
.swat-pagination span {
	padding: 0.2em 0.5em;
	font-size: 85%;
	margin-right: 0.1em;
	border: 1px solid #FFF;
}

.swat-pagination span.swat-pagination-current {
	border: 3px solid #DDD;
	font-weight: bold;
}

.swat-pagination a {
	border: 1px solid #DDD;
	text-decoration: none;
}

.swat-pagination a:hover {
	background-color: #DDD;
	border-color: #BBB;
}

.swat-pagination a.swat-pagination-nextprev {
	font-weight: bold;
}

.swat-pagination span.swat-pagination-nextprev {
	color: #666;
}

.swat-pagination div.swat-pagination-position {
	font-size: 85%;
	font-weight: bold;
	text-align: center;
	margin: 0.2em;
	padding-bottom: 3px;
}

Make the current page more distinct (wider border)

svn commit r5255


#set ($maxColumns = "$!request.maxColumns")
#set ($maxColumnsNumber = $mathtool.toInteger($maxColumns))
#if (!$maxColumnsNumber || $maxColumnsNumber <= 0)
  #set ($maxColumnsNumber = 50)
#end
/* Don't fill 100% because IE doesn't fit things properly in. */
#set($columnsTotalWidth = 99)
/* 1.5% padding right to all the columns except last one. */
#set($columnPadding = 0.75)

/* Render generic css first */

/* FIXME: this style should not be here, it's style for the container overall, not for the columns layout. For the moment
   it's here to minimize the number of requested css, since there are no other container rules at the moment (like
   border, title, or other decoration). */
.container-justified {
  text-align: justify;
}

.container-columns .column {
  float: left;
}

/* Responsiveness, upon the same limit than Twitter Bootstrap (768px) */
@media (max-width: 768px) {
  .container-columns .column {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }
}

/* Make sure that the columns take space when they're empty: if height is auto, and they are floated, they will collapse
   as if they didn't exist, which breaks the layout */
.container-columns .column {
  min-height: 10px;
}

.container-columns .first-column {
  padding-left: 0;
}
.container-columns .last-column {
  padding-right: 0;
}

/* Generate column-specific css classes */
#foreach($columns in [1..$maxColumnsNumber])
  /* Compute the percent of the screen width of a column. Round so that the java upper rounding doesn't screw IE, and because 2 decimals should be enough for everyone. */
  #set($rawComputedColumnWidth = (($columnsTotalWidth - $columnPadding * 2 * ($columns - 1)) / $columns))
  #set($computedColumnWidth = $mathtool.roundTo(2, $rawComputedColumnWidth))
  .container-columns-$columns .column{
    width: $computedColumnWidth%;
    padding-right: $columnPadding%;
    padding-left: $columnPadding%;
  }
#end

PT-3624: Upgrade XWiki to 7.4.6
Bug: homepage gadgets are too small
Step 1: added the upstream version of the file


@import 'previews.css';
@import 'single-post.css';

.blog {
  background: var(--blog-background);
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
  color: var(--blog-text);
}

@import 'previews.css';
@import 'single-post.css';

.blog {
  background: var(--blog-background);
  min-height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
  color: var(--blog-text);
}

Allow the blog section to be larger than viewport


/* Override Strava CSS for enhanced usability. */

#basic-analysis text.static-label-box.label,
#basic-analysis text.laps-label,
#basic-analysis text.segments-label {
    fill: #555 !important;
}

#basic-analysis text.static-label-box.detail {
    fill: #222 !important;
    font-size: 11px;
}

#basic-analysis #effort-detail {
    color: #222 !important;
}

/* hide broken dialog titlebar button */
.ui-dialog-titlebar button.ui-dialog-titlebar-close {
    display: none;
}

Hide broken close button on moreinfo dialogs.


/************************/
/* Stacked filter boxes */
/************************/

form .field-publications select[multiple] {
  height: 200px !important; /* Need to override '!important' in 'djangocms-admin.css' */
  max-width: 100%;
}

.field-publications .stacked {
  width: 90%;
}

.field-publications .stacked .selector-available, .stacked .selector-chosen {
  width: 98%;
}

/********************/
/* Selector buttons */
/********************/

/* Arrangement */
.field-publications .selector ul.selector-chooser {
  margin: 10px 45% 20px;
  width: 100% !important; /* Need to override '!important' in 'djangocms-admin.css' */
}
.field-publications .selector ul.selector-chooser li {
  transform:rotate(90deg);
}

/* Coloring */
li .selector-add,
li .selector-remove {
  color: #999;
}
li .selector-add:hover,
li .selector-remove:hover {
  color: #999 !important;
}
li .selector-add.active,
li .selector-remove.active {
  color: #0bf !important;
}
li .selector-add.active:hover,
li .selector-remove.active:hover {
  color: #4dcfff !important;
}

Fix unintuitive coloring of vertical filter selector buttons in response to changes in djangocms-admin-style


@import "codemirror/lib/codemirror.css";
@import "codemirror/theme/seti.css";
@import "./menu.css";
body {
  font-size: 10px;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

.CodeMirror {
  width: 100%;
  height: 100%;
}
textarea#text {
  background-color: #151718;
  width: 100%;
  height: 100%;
  border: none;
}

@import "codemirror/lib/codemirror.css";
@import "codemirror/theme/seti.css";
@import "./menu.css";
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

.CodeMirror {
  width: 100%;
  height: 100%;
}
textarea#text {
  background-color: #151718;
  width: 100%;
  height: 100%;
  border: none;
}

Delete the 10px font size

Delete the 10px font size

This will probably need to be reinstated later once we start working on the text
rhythm of the page, but until then at least make things easy to read out of the
box.


body {
    font-family: Helvetica, sans-serif;
    font-size: 14px;
}
blockquote {
  background-color: #E3E3E3;
  background-color: rgba(128, 128, 128, 0.2);
  margin: 0.5em 1.5em; padding: 0.5em;
}
blockquote > p:first-child { margin-top: 0; }
blockquote > p:last-child { margin-bottom: 0; }

Fix blockquotes to show in TinyMCE editor


body {
	margin: 0;
	font-family: "Helvetica Neue", "Segoe WP", Helvetica, sans-serif;
	background: black;
	color: white;
}

#modifier {
	height: 90px;
	margin: 10px;
}

#stats {
	position: absolute;
	bottom: 0;
	left: 0;
}

body {
	margin: 0;
	font-family: "Helvetica Neue", "Segoe WP", Roboto, Helvetica, sans-serif;
	background: black;
	color: white;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

#modifier {
	height: 90px;
	margin: 10px;
}

#stats {
	position: absolute;
	bottom: 0;
	left: 0;
}

Disable user selects, use Roboto font on Android


.github-star-prompt {
  position: absolute;
  top: 1rem;
  left: 0%;
}

.dashboard-link {
  margin-bottom: 1rem;

  @media (min-width: 768px) {
    position: absolute;
    right: 0;
    top: 1rem;
  }

  :global(.ui.button) {
    margin-right: 0;
  }
}

.github-star-prompt-wrapper {
  display: none;

  @media (min-width: 768px) {
    display: block;
  }

  position: absolute;
  top: 1rem;
  left: 0%;
}

.dashboard-link {
  margin-bottom: 1rem;

  @media (min-width: 768px) {
    position: absolute;
    right: 0;
    top: 1rem;
  }

  :global(.ui.button) {
    margin-right: 0;
  }
}

Hide github star prompt on mobile

Hide github star prompt on mobile


.player{
margin-top:20px;
width:200px;
}
.album-art-container{
}
.album-art{
width:200px;
}

.meta{
text-align: left;
}
.track-name{
font-size:20px;
font-weight: bold;
margin: 0;
}
.artist-name{
font-size:20px;
margin: 0px;}

.album-name{
font-size:16px;
margin: 0px;}

.player{
margin-top:20px;
width:200px;
}
.album-art-container{
}
.album-art{
width:200px;
}

.meta{

}
.track-name{
font-size:20px;
font-weight: bold;
margin: 0;
}
.artist-name{
font-size:20px;
margin: 0px;}

.album-name{
font-size:16px;
margin: 0px;}

Change text alignment depending on module side

ex. left text alignment on top_left, right text alignment on top_right


input[type=range] {
   -webkit-appearance: none;
   width: 140px;
}

input[type=range] {
  outline: none;
  -webkit-appearance: none;
  width: 140px;
}

blink1: Hide the outline around sliders while dragging.

Modifies the CSS for range input elements to remove the outline when the
element is selected.


/** Media */

/**
<figure class="ratio-16-9">
  <img src="sample.jpg" alt="Sample image">
</figure>
*/

img {
  vertical-align: middle;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.ratio-16-9 {
  --media-height: 640px;
  --media-width: 1280px;
  /*background: #ddd url(placeholder.svg) no-repeat center center;*/
  padding-bottom: calc(calc(var(--media-height) / var(--media-width)) * 100%);
  position: relative;
}

.ratio-16-9 img,
.ratio-16-9 video,
.ratio-16-9 iframe,
.ratio-16-9 object,
.ratio-16-9 embed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/*
@styleguide

@title Media

Use the `img` element with the optional `img-responsive` class.

<figure>
  <img src="sample.jpg" alt="Sample image" class="img-responsive">
</figure>
*/

img {
  vertical-align: middle;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

Add styleguide comment for images

Add styleguide comment for images


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require bootstrap/dist/css/bootstrap
 *= require startbootstrap-sb-admin-2/dist/css/sb-admin-2
 *= require startbootstrap-sb-admin-2/dist/css/timeline
 *= require morrisjs/morris.css
 *= require font-awesome/css/font-awesome
 *= require metisMenu/dist/metisMenu
 */

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require bootstrap/dist/css/bootstrap.min.css
 *= require startbootstrap-sb-admin-2/dist/css/sb-admin-2.css
 *= require startbootstrap-sb-admin-2/dist/css/timeline.css
 *= require morrisjs/morris.css
 *= require font-awesome/css/font-awesome.css
 *= require metisMenu/dist/metisMenu.min.css
 */

Fix issue with CSS and rails asset precompile


/*h1 {
  color: pink;
}*/

.filter-box {
  width: 100%;
  padding-top: 2vh;
  height: 100vh;
  background-color: #263238;
  color: rgba(255, 255, 255, 0.87);
  /*padding: 16px;*/
}

.group-box {
  display: flex;
  flex-direction: column;
}

h3 {
  padding-left: 10px;
  font-size: 1.5vw;
  font-family: arial;
  padding-bottom: 8px;
  padding-top: 8px;
}

.filters {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mainGroup {
  font-weight: bold;
  padding-left: 10px;
}

.clearButton {
  padding-left: 0;
  text-align: center;
}

/*h1 {
  color: pink;
}*/

.filter-box {
  width: 100%;
  padding-top: 2vh;
  height: 100vh;
  background-color: #263238;
  color: rgba(255, 255, 255, 0.87);
  overflow: scroll;
}

.group-box {
  display: flex;
  flex-direction: column;
}

h3 {
  padding-left: 10px;
  font-size: 1.5vw;
  font-family: arial;
  padding-bottom: 8px;
  padding-top: 8px;
}

.filters {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mainGroup {
  font-weight: bold;
  padding-left: 10px;
}

.clearButton {
  padding-left: 0;
  text-align: center;
}

Configure filters to scroll on overflow

Configure filters to scroll on overflow


.selected {
  background-color: #a62e5c !important;
  color: white;
}
.heroes {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 15em;
}
.heroes li {
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #EEE;
  margin: .5em;
  padding: .3em 0;
  height: 1.6em;
  border-radius: 4px;
}
.heroes li.selected:hover {
  background-color: #792e5c !important;
  color: white;
}
.heroes li:hover {
  color: #a62e5c;
  background-color: #DDD;
  left: .1em;
}
.heroes .text {
  position: relative;
  top: -3px;
}
.heroes .badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
  background-color: #a62e5c;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  margin-right: .8em;
  border-radius: 4px 0 0 4px;
}

.selected {
  background-color: #a62e5c !important;
  color: white;
}
.heroes {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 15em;
}
.heroes li {
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #EEE;
  margin: .5em;
  padding: 0.3em 0.3em 0.3em 0;
  height: 1.6em;
  border-radius: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.heroes li.selected:hover {
  background-color: #792e5c !important;
  color: white;
}
.heroes li:hover {
  color: #a62e5c;
  background-color: #DDD;
  left: .1em;
}
.heroes .text {
  position: relative;
  top: -3px;
}
.heroes .badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
  background-color: #a62e5c;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  margin-right: .8em;
  border-radius: 4px 0 0 4px;
}

Fix overflow of a lengthy text item

Fix overflow of a lengthy text item


.game-card {
  color: #01b8f1;
  font-size: 0.9rem;
  width: 272px;
  margin: 0 5px 10px 5px;
}
.game-card .card-footer {
  padding: 0.5rem;
}
.time {
  margin-left: 5px;
}
.badge {
  font-size: 100%;
  font-weight: normal;
}
.badge-primary {
  background-color: #01b8f1;
  color: #ffffff;
}
.btn-outline-primary {
  color: #01b8f1;
  border-color: #01b8f1;
}
.btn-outline-primary:hover,
.btn-outline-primary.active {
  background-color: #01b8f1;
  border-color: #01b8f1;
  color: #ffffff;
}
.table-bordered {
  margin-bottom: 0;
  border-bottom: none;
}
.table-bordered td {
  border-bottom: none;
}
.score {
  color: #00364a;
  text-align: right;
  padding-left: 0.4rem;
}
.spread {
  margin-left: 5px;
}

.game-card {
  color: #01b8f1;
  font-size: 0.9rem;
  width: 272px;
  margin: 0 5px 10px 5px;
}
.game-card .btn {
  font-size: 0.9rem;
}
.game-card .card-footer {
  padding: 0.5rem;
}
.time {
  margin-left: 5px;
}
.badge {
  font-size: 100%;
  font-weight: normal;
}
.badge-primary {
  background-color: #01b8f1;
  color: #ffffff;
}
.btn-outline-primary {
  color: #01b8f1;
  border-color: #01b8f1;
}
.btn-outline-primary:hover,
.btn-outline-primary.active {
  background-color: #01b8f1;
  border-color: #01b8f1;
  color: #ffffff;
}
.table-bordered {
  margin-bottom: 0;
  border-bottom: none;
}
.table-bordered td {
  border-bottom: none;
}
.score {
  color: #00364a;
  text-align: right;
  padding-left: 0.4rem;
}
.spread {
  margin-left: 5px;
}

Fix font-size of game buttons

Fix font-size of game buttons


#appsorter li {
    overflow:hidden;
    margin-bottom:2px;
}
#appsorter img {
    width:14px;
    height:14px;
    background-color: #1d2d44;
    padding:4px;
    float:left;
}
#appsorter a {
    display:block;
    float:left;
    padding-bottom:2px;
    padding-left:5px;
}
.ui-sortable-placeholder {
  margin-top:-10px;
}

Remove additional space in sortable placeholder

fixes #6


a.plugin-anchor {
    color: inherit !important;
    display: none;
    margin-left: -30px;
    padding-left: 40px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

a.plugin-anchor span {
    margin-left: -25px;
    font-size: 15px;
}

h1, h2, h3, h4, h5, h6 {
    position: relative;
}

h1:hover a.plugin-anchor, h2:hover a.plugin-anchor, h3:hover a.plugin-anchor,
h4:hover a.plugin-anchor, h5:hover a.plugin-anchor, h6:hover a.plugin-anchor {
    display: inline-block;
}

.book .book-body .page-wrapper .page-inner section.normal {
    overflow: visible;
}

a.plugin-anchor {
    color: inherit !important;
    display: none;
    margin-left: -30px;
    padding-left: 40px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

a.plugin-anchor span {
    margin-left: -25px;
    font-size: 15px !important;
}

h1, h2, h3, h4, h5, h6 {
    position: relative;
}

h1:hover a.plugin-anchor, h2:hover a.plugin-anchor, h3:hover a.plugin-anchor,
h4:hover a.plugin-anchor, h5:hover a.plugin-anchor, h6:hover a.plugin-anchor {
    display: inline-block;
}

.book .book-body .page-wrapper .page-inner section.normal {
    overflow: visible;
}

Fix overridden icon font size

Fix overridden icon font size


html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 35px;
}
#logo {
	text-align: center;
}
@media (max-width: 500px) {
 	.top-padding {
		min-height: 10px;
 	}
	.navbar {
		text-align: center;
	}
	.navbar-nav {
		display: inline-block;
	}
}
@media (min-width: 500px) and (max-width: 992px) {
 	.top-padding {
		min-height: 10px;
 	}
	.navbar, #logo {
		display: inline-flex;
	}
}
@media (min-width: 992px) {
 	.top-padding {
		min-height: 128px;
 	}
 	.navbar-nav .nav-item+.nav-item {
		margin-left: 0rem;
	}
	.navbar-nav .nav-item {
		float: none;
	}
}
.footer {
 	position: absolute;
 	bottom: 1px;
 	width: 100%;
 	height: 35px;
 	line-height: 35px;
 	text-align: center;
}

html {
	position: relative;
	min-height: 100%;
}
body {
	margin-bottom: 35px;
}
#logo {
	text-align: center;
}
@media (max-width: 500px) {
 	.top-padding {
		min-height: 10px;
 	}
	.navbar {
		text-align: center;
	}
	.navbar-nav {
		display: inline-block;
	}
}
@media (min-width: 500px) and (max-width: 992px) {
 	.top-padding {
		min-height: 10px;
 	}
	.navbar, #logo {
		display: inline-flex;
	}
}
@media (min-width: 992px) {
 	.top-padding {
		min-height: 10vh;
 	}
 	.navbar-nav .nav-item+.nav-item {
		margin-left: 0rem;
	}
	.navbar-nav .nav-item {
		float: none;
	}
	section {
		max-height: 75vh;
		overflow-y: scroll;
	}
}
.footer {
 	position: absolute;
 	bottom: 1px;
 	width: 100%;
 	height: 35px;
 	line-height: 35px;
 	text-align: center;
}

Add some fancy css so that the site is more responsive


.proportion {
    position: relative;
}

.proportion .filler {
    width: 100%;
    padding-top: 60%;
}

.mag-eg-row {
    margin-bottom: 15px;
}
.mag-eg-el-wrap {
  margin-bottom: 15px;
  width: 100%;
}
.mag-eg-el {
    height: 100%;
    width: 100%;
    position: absolute;
    margin-bottom: 15px;
}
.mag-eg-doc {
    margin: 20px;
}

.outer-wrap {
    position: relative;
    float: left;
}
/*
[mag-zoom="outer"] {
    position: absolute;
    z-index: 10;
    left: 100%;
}
*/

.mag-eg-hud {
    position: absolute;
    z-index: 10;
    text-align: right;
    padding: 0.5em;
    color: white;
    background: black;
    background: rgba(0,0,0,0.5);
}

.mag-eg-hud-left {
    left: 0;
    bottom: 0;
    text-align: left;
}

.mag-eg-hud-right {
    right: 0;
    bottom: 0;
    text-align: right;
}

.proportion {
    position: relative;
}

.proportion .filler {
    width: 100%;
    padding-top: 60%;
}

.mag-eg-row {
    margin-bottom: 15px;
}
.mag-eg-el-wrap {
  margin-bottom: 15px;
  width: 100%;
}
.mag-eg-el {
    height: 100%;
    width: 100%;
    position: absolute;
    /*margin-bottom: 15px;*/
}
.mag-eg-doc {
    margin: 20px;
}

.outer-wrap {
    position: relative;
    float: left;
}
/*
[mag-zoom="outer"] {
    position: absolute;
    z-index: 10;
    left: 100%;
}
*/

.mag-eg-hud {
    position: absolute;
    z-index: 10;
    text-align: right;
    padding: 0.5em;
    color: white;
    background: black;
    background: rgba(0,0,0,0.5);
}

.mag-eg-hud-left {
    left: 0;
    bottom: 0;
    text-align: left;
}

.mag-eg-hud-right {
    right: 0;
    bottom: 0;
    text-align: right;
}

Remove margin from example elements (already on wrapper).


.PageTitle {
  font-family: "Acta Display";
  font-size: 112px;
  line-height: 112px;
  color: #045cfc;
}

.PageTitle {
  font-family: "Acta Display";
  font-size: 112px;
  font-weight: 400;
  line-height: 112px;
  color: #045cfc;
}

/**
 * Fix for Firefox font rendering issues.
 */
@-moz-document url-prefix() {
  .PageTitle {
    font-weight: lighter;
  }
}

Fix Acta rendering issues in page title on Firefox


@charset "UTF-8";
@import url('/static/lib/uijet/uijet.css');
@import url('filters.css');
@import url('nodes.css');

.ui-v-scroller {
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 1px;
    z-index: 1;
    width: 8px;
    opacity: 0.3;
}
.ui-v-scroller-grip {
    position: absolute;
    top: 0;
    right: -1px;
    z-index: 1;
    width: 6px;
    height: 20px;
    background-color: darkslategray;
    cursor: pointer;
}

@charset "UTF-8";
@import url('/static/lib/uijet/uijet.css');
@import url('filters.css');
@import url('nodes.css');

input {
    direction: rtl;
}

.ui-v-scroller {
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 1px;
    z-index: 1;
    width: 8px;
    opacity: 0.3;
}
.ui-v-scroller-grip {
    position: absolute;
    top: 0;
    right: -1px;
    z-index: 1;
    width: 6px;
    height: 20px;
    background-color: darkslategray;
    cursor: pointer;
}

Set input direction to RTL for now

Set input direction to RTL for now


.HeaderBar {
    height: 60px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.Logo {
    width: 130px;
    padding: 30px;
    padding-right: 0;
}

.NavigationContainer {
    width: 100%;
    padding-left: 20px;
}

.Navigation {
	height: 100%;
	display: flex;
    flex-direction: row;
    align-items: center;
}

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

.Navigation li {
	display: inline-block;
	margin: 20px;
}

.Navigation a {
    text-decoration: none;
    font-weight: bold;
    color: #808080;
    padding-bottom: 10px;
}

.Navigation a.active {
    border-bottom: 2px solid #216FD6;
}

.ButtonsContainer {
    width: 700px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding-right: 20px;
}

.HeaderBar {
    height: 60px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.Logo {
    width: 130px;
    padding: 30px;
    padding-right: 0;
}

.NavigationContainer {
    width: 100%;
    padding-left: 20px;
}

.Navigation {
	height: 100%;
	display: flex;
    flex-direction: row;
    align-items: center;
}

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

.Navigation li {
	display: inline-block;
    margin: 3px;
    padding: 12px 17px;
    border-radius: 4px;
}

.Navigation a {
    font-family: "Open Sans";
    text-decoration: none;
    font-weight:600;
    font-size: 14px;
    color: #5f6368;
    padding-bottom: 10px;
}

.Navigation a.active {
    border-bottom: 2px solid #216FD6;
}

.ButtonsContainer {
    width: 700px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding-right: 20px;
}

.Navigation li:hover {
    background: #f8f9fa;
}

Change style and add hover to inner nav items


/*
 * Tinyfade - responsive image slideshow backgrounds with plain javascript.
 *
 * Copyright (c) 2017 Moritz Marquardt
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
.tinyfade { position: relative; font-size: 0; }
.tinyfade img { position: relative; width: 100%; opacity: 0; }
.tinyfade img:not(:first-of-type) { position: absolute; top: 0; left: 0; right: 0; }
.tinyfade:not(.tinyfade-js) img:first-of-type { opacity: 1 }
img.tinyfade-current { z-index: 2; opacity: 1 }
img.tinyfade-last { z-index: 1; opacity: 1 }

/*
 * Tinyfade - responsive image slideshow backgrounds with plain javascript.
 *
 * Copyright (c) 2017 Moritz Marquardt
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
.tinyfade { position: relative }
.tinyfade>* { position: relative; width: 100%; opacity: 0; float: left; pointer-events: none }
.tinyfade>:not(:first-child) { position: absolute; top: 0; left: 0; right: 0 }
.tinyfade:not(.tinyfade-js)>:first-child { opacity: 1; pointer-events: auto }
.tinyfade-current { z-index: 2; opacity: 1; pointer-events: auto }
.tinyfade-last { z-index: 1; opacity: 1 }

Add support for non-image elements in CSS


body[data-octicons-update="enabled"] {
    --version: octicons2;
}

body {
    --version: octicons;
}

.octicon, .mega-octicon {
    font-family: var(--version) !important;
}

body[data-octicons-update="enabled"] .monaco-workbench .part.statusbar > .items-container > .statusbar-item span.octicon {
    font-size: 16px;
}

body[data-octicons-update="enabled"] .monaco-workbench .part.statusbar > .items-container > .statusbar-item > a {
    display: flex;
    align-items: center;
    justify-content: center;
}

body[data-octicons-update="enabled"] {
    --version: octicons2;
}

body {
    --version: octicons;
}

.octicon, .mega-octicon {
    font-family: var(--version) !important;
}

body[data-octicons-update="enabled"] .monaco-workbench .part.statusbar > .items-container > .statusbar-item > a {
    display: flex;
    align-items: center;
    justify-content: center;
}

Reduce font-size of new Ocitcons

Reduce font-size of new Ocitcons


/* indices do not help here, let's use types as defined in
 libcloud.compute.types.Provider (we will use numbers, match in the Python) */

#single-view-provider-icon, #single-view-image-icon {
    display: block;
    width: 48px;
    height: 48px;
    float: left;
}

.provider-icon-small,
.image-icon-small {
    float:left;
    width: 24px;
    height: 24px;
}

.provider-icon-small span,
.image-icon-small span {
    display: block;
    height: 50px;
    width: 50px;
    position: relative;
    left: -19px;
    transform: scale(0.4, 0.4);
    bottom: 15px;
}

.single-view-icon-wrapper.generic {
    display: none;
}

/* indices do not help here, let's use types as defined in
 libcloud.compute.types.Provider (we will use numbers, match in the Python) */

#single-view-provider-icon, #single-view-image-icon {
    display: block;
    width: 48px;
    height: 48px;
    float: left;
}

.provider-icon-small,
.image-icon-small {
    float:left;
    width: 24px;
    height: 24px;
}

.provider-icon-small span,
.image-icon-small span {
    display: block;
    height: 50px;
    width: 50px;
    position: relative;
    left: -19px;
    transform: scale(0.4, 0.4);
    -webkit-transform: scale(0.4,0.4);
    bottom: 15px;
}

.single-view-icon-wrapper.generic {
    display: none;
}

Add css rule for webkit

Add css rule for webkit


#delay-safari-extension, #delay-safari-extension * {
    visibility: hidden !important;
}

#delay-safari-extension, #delay-safari-extension * {
    opacity: 0 !important;
    visibility: hidden !important;
}

Set opacity to 0 to block Flash.

Set opacity to 0 to block Flash.

Some Flash elements, like ads or videos, show even though they're
invisible.


*.mps-tweet-avatar-frame
{
  border-image: url("avatar_frame.png") 4 4 4 4;
  padding: 2 2 2 2;
}

MpsTweetCard, MpsTweetCard:hover, MpsTweetCard:active
{
  border-image: url("status_card_background.png") 4 4 4 4;
  padding: 8;
}

MpsTweetCard.mps-tweet-card-first,
MpsTweetCard.mps-tweet-card-first:hover,
MpsTweetCard.mps-tweet-card-first:active
{
  border-image: none;
  padding: 8;
}

*.mps-tweet-content-label
{
  font-family: Droid Sans;
  color: #595959ff;
  font-size: 16pt;
}

*.mps-tweet-secondary-label
{
  font-family: Droid Sans;
  color: #7dbe0cff;
  font-size: 8pt;
}

*.mps-switcher-notebook
{
  padding: 16;
}

*.mps-switcher-new-service
{
  border-image: url("add_status_header.png") 4 4 4 4;
  padding: 6;
  color: white;
  font-size: 16pt;
  font-family: Droid Sans;
}

*.mps-switcher-button
{
  border-image: url("alt_status_header.png") 4 4 4 4;
  padding: 6;
  color: white;
  font-size: 16pt;
  font-family: Droid Sans;
}

*.mps-switcher-button:checked,
*.mps-switcher-button:active,
*.mps-switcher-button:hover
{
  border-image: url("current_status_header.png") 4 4 4 4;
  padding: 6;
  color: white;
  font-size: 16pt;
  font-family: Droid Sans;
}

*.mps-status-update-hbox
{
  border-image: url("status_entry_box.png") 4 4 4 4;
}

*.mps-status-entry
{
  font-size: 16pt;
  color: #595959ff;
  border-image:none;
}

*.mps-status-update-button,
*.mps-status-update-button:hover,
*.mps-status-update-button:active
{
  color: #7dbe0cff;
  font-size: 16pt;
  border-image:none;
  padding: 6;
}

Update stylesheet to include styling

theme: Update stylesheet to include styling


.source_deps {
    display: block;
    position: relative;
    border-radius: 10px;
    }
.source_deps:empty {
    display: none;
    }
.source_deps p {
    margin: 10px 0 5px;
    }
.source_deps p:first-child {
    margin-top: 0;
    }
.source_deps p:last-child {
    margin-bottom: 0;
    }
body p.source_deps,
.source_deps {
    margin: 20px 33.6% 20px 0;
    padding: 10px 25px;
    background: #f9f9f9;
    }
.source_deps_used-by-specs,
.source_deps_used-specs {
    margin-left: -5px !important;
    }
.source_deps_used-by-specs {
    display: none;
    }
.source_deps_h_expand {
    border-bottom: 1px dashed;
    color: rgb(51,51,51);
    }
.source_deps_h_expand:hover {
    text-decoration: none;
    color: rgb(100,100,100);
    }

.source_deps {
    display: block;
    position: relative;
    border-radius: 10px;
    }
.source_deps:empty {
    display: none;
    }
.source_deps p {
    margin: 10px 0 5px;
    }
.source_deps p:first-child {
    margin-top: 0;
    }
.source_deps p:last-child {
    margin-bottom: 0;
    }
body p.source_deps,
.source_deps {
    margin: 20px 33.6% 20px 0;
    padding: 10px 25px;
    background: #f9f9f9;
    }
.source_deps_used-by-specs,
.source_deps_used-specs {
    margin-left: -5px !important;
    }
.source_deps_used-by-specs > li,
.source_deps_used-specs > li {
    list-style-type: none !important;
    }
.source_deps_used-by-specs {
    display: none;
    }
.source_deps_h_expand {
    border-bottom: 1px dashed;
    color: rgb(51,51,51);
    }
.source_deps_h_expand:hover {
    text-decoration: none;
    color: rgb(100,100,100);
    }

Fix due to source styles reset.

Fix due to source styles reset.


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

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

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

  float: left;

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

  padding: 18px 27px;

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

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

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

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

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

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

  float: left;

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

  padding: 18px 27px;

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

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

Hide list total in print preview

Hide list total in print preview

Otherwise, it can cover up items in the printed page!


html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 13px;
}

body {
    overflow-y: scroll;
    padding-bottom: 0.5em;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.65em;
}

body {
    overflow-y: scroll;
    padding-bottom: 0.5em;
}

Use a relative line height so the issue list items aren't super tiny.


body, .box {
  padding: 6px;
}
.box {
  flex: none;
  margin-bottom: 6px;
  border-width: 1px;
}
.box-title {
  font-weight: bold;
  font-size: 2em;
}

body, .box {
  padding: 6px;
}
.box {
  margin-bottom: 6px;
  border-width: 1px;
}
.box-title {
  font-weight: bold;
  font-size: 2em;
}

Cut extra flex in wrong file

Cut extra flex in wrong file


/*https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries*/

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

Add sample default media queries

Add sample default media queries


/* Google Code Prettify */
pre.prettyprint  * {
    font-family: monospace,Consolas,Monaco,Menlo,"Courier New";
    font-size: 12px;
    background-color: transparent;
}

pre.prettyprint {
/*     注释下面这句使单词不自动换行  */
/*     white-space: pre-wrap;   */
    word-wrap: break-word;
    padding: 0px;
    background-color: transparent;
    border: none;
}

.prettyprint {
  color: #839496;
  background-color: #002b36;
}

.prettyprint .pln {
  color: inherit;
}

.prettyprint .str,
.prettyprint .lit,
.prettyprint .atv {
  color: #2aa198;
}

.prettyprint .kwd {
  color: #268bd2;
}

.prettyprint .com,
.prettyprint .dec {
  color: #55AA00;
  font-style: none;
}

.prettyprint .typ {
  color: #b58900;
}

.prettyprint .pun {
  color: inherit;
}

.prettyprint .opn {
  color: inherit;
}

.prettyprint .clo {
  color: inherit;
}

.prettyprint .tag {
  color: #268bd2;
  font-weight: bold;
}

.prettyprint .atn {
  color: inherit;
}

/* Google Code Prettify */
pre.prettyprint  * {
    font-family: monospace,Consolas,Monaco,Menlo,"Courier New";
    font-size: 12px;
    background-color: transparent;
}

pre.prettyprint {
/*     注释下面这句使单词不自动换行  */
    /*white-space: pre-wrap;*/
    /*word-wrap: break-word;*/
    padding: 0px;
    background-color: transparent;
    border: none;
}

.prettyprint {
  color: #839496;
  background-color: #002b36;
}

.prettyprint .pln {
  color: inherit;
}

.prettyprint .str,
.prettyprint .lit,
.prettyprint .atv {
  color: #2aa198;
}

.prettyprint .kwd {
  color: #268bd2;
}

.prettyprint .com,
.prettyprint .dec {
  color: #55AA00;
  font-style: none;
}

.prettyprint .typ {
  color: #b58900;
}

.prettyprint .pun {
  color: inherit;
}

.prettyprint .opn {
  color: inherit;
}

.prettyprint .clo {
  color: inherit;
}

.prettyprint .tag {
  color: #268bd2;
  font-weight: bold;
}

.prettyprint .atn {
  color: inherit;
}

Adjust code appearance for scrolling.

Adjust code appearance for scrolling.


.main ul.list {
  column-width: 300px;
}
.main td.name .inherited {
  background-color: #ccc!important;
}
.main td.name .inherited a {
  color: #c7254e;
}
.main .subsection-title {
  margin-top: inherit;
}
.main h2.subsection-title {
  font-size: 20px;
  margin-top: 30px;
  border-top: 3px double #e1e1e1;
  padding-top: 20px;
}
:target {
  background-color: #ff8;
}

Use a background color to indicate the target in jsdoc.

This makes it easier to identify a selected section when it ends up not
being at the top of the display.


/*!
 * Shopping List
 * http://github.com/eheikes/shopping-list
 * License: Apache-2.0
 */
html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 50px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
}

table td.qty {
  width: 60px;
}

table td.qty {
  width: 60px;
}

table td.unit {
  width: 120px;
}

table td.name {
  width: 250px;
}

@media print {
  .printable h1 {
    font-size: 24px;
  }

  .printable h2 {
    font-size: 18px;
  }

  .footer {
    display: none;
  }
}

/*!
 * Shopping List
 * http://github.com/eheikes/shopping-list
 * License: Apache-2.0
 */
html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 50px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
}

table td.qty {
  width: 60px;
}

table td.qty {
  width: 60px;
}

table td.unit {
  width: 120px;
}

table td.name {
  width: 250px;
}

@media print {
  body {
    font-size: 10px;
  }

  .printable h1 {
    font-size: 14px;
    margin-top: 0;
  }

  .printable h2 {
    font-size: 12px;
  }

  .footer {
    display: none;
  }
}

Reduce font size in printable view.

Reduce font size in printable view.


body {
	background-color: #bgbgbg;
	text-align: center;
}

button.services {
    background-color: #2bb673;
    border: none;
    color: white;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 35px;
    margin: 15px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    width: 50%;

}

button.services:hover {
	color: #fff;
	background: #8ad5e4;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

body {
	background-color: #bgbgbg;
	text-align: center;
}

p.Paragraph-Left-Aligned {
	text-align: left;
}

ul.input-list li.List-Left-Aligned {
	width: 51%;
}

ul.input-list:nth-child(n-1) {
	padding-bottom: 3em;
}

button.services {
    background-color: #2bb673;
    border: none;
    color: white;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 35px;
    margin: 15px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    width: 50%;

}

button.services:hover {
	color: #fff;
	background: #8ad5e4;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

/*------------------Displaying for Smartphones--------------------------------*/
@media only screen and (max-width: 40.063em) {

	ul.input-list li.List-Left-Aligned {
		width: 100%;
	}

	button.services {
		width: 100%;
	}

	ul.input-list:last-child {
		width: 100%;
	}
}

Add styles for list that are left aligned and added style for smartphone viewing


#playercontrols{
	display:inline;
	margin-left:1em;
	width:7em;
	height:1em;
	position:fixed;
	top:auto;
	left:auto;
	background:transparent;
	box-shadow:none;
	-webkit-box-shadow:none;
}
#playercontrols li{
	float:left;
}
#playercontrols a, #playercontrols li{
	margin:0px;
	padding:0;
	left:0;
	background:transparent !important;
	border:none !important;
	text-shadow:none;
}

#playercontrols{
	display:inline;
	margin-left:1em;
	width:4em;
	height:1em;
	position:fixed;
	top:auto;
	left:auto;
	background:transparent;
	box-shadow:none;
	-webkit-box-shadow:none;
}
#playercontrols li{
	float:left;
}
#playercontrols a, #playercontrols li{
	margin:0px;
	padding:0;
	left:0;
	background:transparent !important;
	border:none !important;
	text-shadow:none;
}

Fix music navigation entry controls going over the sidebar


/*body {
  background-color: #1c4a4a;
}*/

/** {
  border: 1px red solid;
}*/

.row.full {
  max-width: 100%;
}

.sidebar {
  position: fixed;
  background-color: gray;
  min-height: 100%;
  -webkit-box-shadow: 5px 0 1px 1px #555;
  box-shadow: 5px 0 1px 1px #555;
}

.content-body {
  background-color: #1c4a4a;
}

/*.off-canvas {
  min-height: 100%;
}*/

/*.term-container {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}*/

/*#philips-term {
  margin: 0;
  overflow: hidden;
  height: 97vh;
}*/

/*Mobile screens*/
@media only screen and (max-width: 40em) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
}

/*Non-mobile screens*/
@media only screen and (min-width: 40.063em) {
  .desktop {
    display: block;
  }
  .mobile {
    display: none;
  }
}

/** {
  border: 1px red solid;
}*/

.row.full {
  max-width: 100%;
}

.sidebar {
  position: fixed;
  background-color: gray;
  min-height: 100%;
  -webkit-box-shadow: 5px 0 1px 1px #555;
  box-shadow: 5px 0 1px 1px #555;
}

.content-body {
  position: relative;
  background-color: #1c4a4a;
  height: 100vh;
}

/*.off-canvas {
  min-height: 100%;
}*/

/*#philips-term {
  margin: 0;
  overflow: hidden;
  height: 97vh;
}*/

/*Mobile screens*/
@media only screen and (max-width: 40em) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
}

/*Non-mobile screens*/
@media only screen and (min-width: 40.063em) {
  .desktop {
    display: block;
  }
  .mobile {
    display: none;
  }
}

Change height of div to cover rest of window height


.annotation-controls {
  display: flex;
  align-items: center;
}

.annotation-forms {
  display: flex;
  flex-wrap: nowrap;
  flex-display: column;
  flex: 1 1 auto;
}

.mat-icon {
  font-size: 40px;
  width: 40px;
  height: 40px;
  user-select: none;
}

.mat-icon.clickable:hover {
  background: rgb(193, 236, 250);
  cursor: pointer;
}

.annotation {
  display: flex;
  flex: 1 1 auto;
  padding-top: 0.6em;
}

.speaker {
  align-self: flex-end;
  margin-left: 1em;
  margin-right: 1em;
}

.caption {
  flex: 1 1 100%;
  margin-right: 1em;
}

.selected {
  background: lightblue;
}

.caption textarea {
  height: 20px;
}

.annotation-controls {
  display: flex;
  align-items: center;
}

.annotation-forms {
  display: flex;
  flex-wrap: nowrap;
  flex-display: column;
  flex: 1 1 auto;
}

.mat-icon {
  font-size: 40px;
  width: 40px;
  height: 40px;
  user-select: none;
}

.mat-icon.clickable:hover {
  background: rgb(193, 236, 250);
  cursor: pointer;
}

.annotation {
  display: flex;
  flex: 1 1 auto;
  padding-top: 0.6em;
}

.speaker {
  align-self: flex-end;
  margin-left: 1em;
  margin-right: 1em;
}

.caption {
  flex: 1 1 100%;
  margin-right: 1em;
}

.selected {
  background: lightblue;
}

.caption textarea {
  height: 24px;
}

Fix strange chrome behaviour with text fields


.blurMode .blurable {
    filter: blur(3px);
    -webkit-filter: blur(3px);
}

.loadingContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    filter: none;
    -webkit-filter: none;
}

.loadingContainer .loadingLayer {
    /*background: rgba(115, 115, 115, 0.61);*/
    width: 100%;
    height: 100%;
    text-align: center;
}

.loadingContainer .loadingLayer i {
    opacity: 0;
}

.loadingContainer .loadingLayer.on i {
    opacity: 1;
}

.loadingContainer .loadingLayer i {
    -moz-transition: all 400ms ease-in;
    -webkit-transition: all 400ms ease-in;
    -o-transition: all 400ms ease-in;
    transition: all 400ms ease-in;
    font-size: 40px;
    color: #FFF;
    text-shadow: 0px 0px 5px #000;
}

.blurMode .blurable {
    filter: blur(3px);
    -webkit-filter: blur(3px);
}

.loadingContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    filter: none;
    -webkit-filter: none;
    z-index: 9999;
}

.loadingContainer .loadingLayer {
    /*background: rgba(115, 115, 115, 0.61);*/
    width: 100%;
    height: 100%;
    text-align: center;
}

.loadingContainer .loadingLayer i {
    opacity: 0;
}

.loadingContainer .loadingLayer.on i {
    opacity: 1;
}

.loadingContainer .loadingLayer i {
    -moz-transition: all 400ms ease-in;
    -webkit-transition: all 400ms ease-in;
    -o-transition: all 400ms ease-in;
    transition: all 400ms ease-in;
    font-size: 40px;
    color: #FFF;
    text-shadow: 0px 0px 5px #000;
}

Add z-index in loading div

[Widget][Common] Add z-index in loading div


/*header*/
.container .header {
    background-color: Gainesboro;
    border-color: grey;
    font-size: 1.5em;
}

#name {
  font-size: 1.7em;
}

.navbar-default .header .navbar-nav li a:hover {
  color: black;
  background-color: LightGray;
}

.container .header li a:visited {
  color: black;
}

.container .header li a:link {
  color: black;
}

/*footer*/
.container .footer {
    font-size: 1.7em;
    background-color: ivory;
    border-color: ivory;
}

.navbar-default .footer .navbar-nav li a:hover {
  color: black;
}

.container .footer li a:visited {
  color: #337ab7;
}

.container .footer li a:link {
  color: #337ab7;
}

/*center header and footer*/
.navbar-nav{
  float:none;
  margin: 0 auto;
  display: table;
  table-layout: fixed;
}

/*body*/

body {
  background-color: ivory;
}

.content {
  margin-top: 5em;
}

.content .contact {
  margin-top: 3.5em;
  font-size: 5.2em;
  text-align: center;
}

* {
  font-family: 'Ovo', serif;
}

/*header*/
.container .header {
    background-color: Gainesboro;
    border-color: grey;
    font-size: 1.5em;
}

#name {
  font-size: 1.7em;
}

.navbar-default .header .navbar-nav li a:hover {
  color: black;
  background-color: LightGray;
}

.container .header li a:visited {
  color: black;
}

.container .header li a:link {
  color: black;
}

/*footer*/
.container .footer {
    font-size: 1.7em;
    background-color: ivory;
    border-color: ivory;
}

.navbar-default .footer .navbar-nav li a:hover {
  color: black;
}

.container .footer li a:visited {
  color: #337ab7;
}

.container .footer li a:link {
  color: #337ab7;
}

/*center header and footer*/
.navbar-nav{
  float:none;
  margin: 0 auto;
  display: table;
  table-layout: fixed;
}

/*body*/

body {
  background-color: ivory;
}

.content {
  margin-top: 5em;
}

.content .contact {
  margin-top: 3.5em;
  font-size: 5.2em;
  text-align: center;
}

.content .contact a:hover {
  color: black;
}

* {
  font-family: 'Ovo', serif;
}

Index page links hover to black

Index page links hover to black


#server_list table {
	max-width: 100%;
	width: 100%;
	background-color: transparent;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: small;
}

#server_list td, #server_list th {
	border: 1px solid gray;
}

tr:hover {
	background-color: #f0f0f0;
}

.mts_hover_list {
	visibility: hidden;
	border: gray solid 1px;
	position: absolute;
	z-index: 100;
	background-color: white;
	padding: 0.5em;
}

td:hover .mts_hover_list {
	visibility: visible;
}

.mts_hover_list_text, .mts_tooltip {
	text-decoration: underline;
	text-decoration-style: dashed;
}

.clickable {
	text-decoration: underline;
	cursor: pointer;
}

#server_list table {
	max-width: 100%;
	width: 100%;
	background-color: transparent;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: small;
}

#server_list td, #server_list th {
	border: 1px solid gray;
}

tr:hover {
	background-color: #f0f0f0;
}

.mts_hover_list {
	display: none;
	border: gray solid 1px;
	position: absolute;
	z-index: 100;
	background-color: white;
	padding: 0.5em;
}

td:hover .mts_hover_list {
	display: block;
}

.mts_hover_list_text, .mts_tooltip {
	text-decoration: underline;
	text-decoration-style: dashed;
}

.clickable {
	text-decoration: underline;
	cursor: pointer;
}

Use 'display' instead of 'visibility' to prevent the page from having white space at the bottom


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

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

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

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

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

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

Move logo to the right

Move logo to the right


:host { display: block; }

h2 {
    font-size: 1em;
    margin-top: 0;
    padding-top: 0;
    -webkit-user-select: none;
    cursor: default;
}

header {
    padding-top: 0.5em;
    display: flex;
}

header h2 {
    flex: 1;
}

header .ui-actions {
    padding: 0 16px;
    flex-shrink: 0;
}

#files {
    overflow-x: auto;
}

#try-job-results cr-action {
    margin: 0 16px 0.5em 16px;
    display: inline-block;
}

:host { display: block; }

h2 {
    font-size: 1em;
    margin: 0 16px;
    padding: 0;
    -webkit-user-select: none;
    cursor: default;
}

header {
    padding-top: 0.5em;
    display: flex;
}

header h2 {
    flex: 1;
}

header .ui-actions {
    padding: 0 16px;
    flex-shrink: 0;
}

#files {
    overflow-x: auto;
}

#try-job-results cr-action {
    margin: 0 16px 0.5em 16px;
    display: inline-block;
}

Remove more extra vertical spacing.

Remove more extra vertical spacing.


.VideoPreview {
  display: block;
  border-radius: 2px;
  text-decoration: none;
}

.VideoPreview:hover {
  background-color: #fafafa;
  text-decoration: none;
}

.VideoPreview__Image {
  border-radius: 2px;
  width: 20em;
}

.VideoPreview__Title {
  color: #222;
  font-size: 1.25em;
  font-weight: 1000;
  margin: 0em 0.25em;
}

.VideoPreview__User {
  color: #444;
  margin: 0em 0.25em;
}

.VideoPreview__User:hover {
  color: #555;
  text-decoration: underline;
}

.VideoPreview {
  display: block;
  border-radius: 2px;
  text-decoration: none;
}

.VideoPreview:hover {
  background-color: #fafafa;
  cursor: pointer;
  text-decoration: none;
}

.VideoPreview__Image {
  border-radius: 2px;
  width: 20em;
}

.VideoPreview__Title {
  color: #222;
  font-size: 1.25em;
  font-weight: 1000;
  margin: 0em 0.25em;
}

.VideoPreview__User {
  color: #444;
  margin: 0em 0.25em;
}

.VideoPreview__User:hover {
  color: #555;
  text-decoration: underline;
}

Add the pointy finger back

Add the pointy finger back


img {
  border: solid 10px white;
  border-bottom-width: 50px;
  margin: 10px;
  box-shadow: #ccc 2px 2px 4px;
}

li {
  list-style: none;
}

img {
  border: solid 10px white;
  border-bottom-width: 50px;
  margin: 10px;
  box-shadow: #ccc 2px 2px 4px;
  transition: border-color 0.4s;
}

li {
  list-style: none;
}

Add CSS cross-fade effect to color change


body {
	background-color: #1A1A1A;
	color: #FFF;
}

a {
	color: #319DC5;
}

a:visited {
	color: #319DC5;
}

code {
    background-color: #4C4C4C;
}

pre, blockquote {
    background-color: #4C4C4C;
}

body, span {
	background-color: #1A1A1A !important;
	color: #FFF !important;
}

a, a span {
	color: #319DC5 !important;
}

a:visited, a:visited span {
	color: #319DC5 !important;
}

code {
    background-color: #4C4C4C;
}

pre, blockquote {
    background-color: #4C4C4C;
}

Tweak dark theme css for feeds where text is embedded within spans that have their own styling.


.workflow-tracker-item__container {
  display: grid;
  grid-template-columns: 1fr var(--boxel-sp-xxl);
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "heading icon"
    "milestone icon";
  background: transparent;
  color: var(--boxel-light-200);
  margin: 0 var(--boxel-sp);
  border-radius: var(--boxel-border-radius-sm);
  text-align: left;
  padding: var(--boxel-sp-sm) var(--boxel-sp-xs);
  border: 0;
}

.workflow-tracker-item__container:hover {
  background-color: var(--boxel-purple-300);
}

.workflow-tracker-item__heading {
  grid-area: heading;
  font-weight: 700;
}

.workflow-tracker-item__milestone {
  grid-area: milestone;
}

.workflow-tracker-item__icon {
  grid-area: icon;
  justify-self: flex-end;
  align-self: center;
  margin-right: 0;
}

.workflow-tracker-item__container {
  display: grid;
  grid-template-columns: 1fr var(--boxel-sp-xxl);
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "heading icon"
    "milestone icon";
  background: transparent;
  width: calc(100% - var(--boxel-sp-sm) * 2);
  color: var(--boxel-light-200);
  margin: 0 var(--boxel-sp);
  border-radius: var(--boxel-border-radius-sm);
  text-align: left;
  padding: var(--boxel-sp-sm) var(--boxel-sp-xs);
  border: 0;
}

.workflow-tracker-item__container:hover {
  background-color: var(--boxel-purple-300);
}

.workflow-tracker-item__heading {
  grid-area: heading;
  font-weight: 700;
}

.workflow-tracker-item__milestone {
  grid-area: milestone;
}

.workflow-tracker-item__icon {
  grid-area: icon;
  justify-self: flex-end;
  align-self: center;
  margin-right: 0;
}

Fix width of tracker items

Fix width of tracker items


.maintenance_notice {
  margin: 0px auto 1em auto;
  width: 40em;
  background: #FFA;
  border: #000;
  padding: 1ex 1em;
  font-weight: bold;
}

.maintenance_notice {
  margin: 0px auto 1em auto;
  width: 40em;
  background: #fee7e6;
  border: #000;
  padding: 1ex 1em;
  font-weight: bold;
}

Use standard wikimedia yellow for notice template.


@import "news.css";

#page-header {
    margin-top: 1.65em;
    margin-bottom: 2em;
}

#page-header h1 {
    letter-spacing: 0.15em;
    font-size: 4em;
}

#page-header .description {
    font-size: x-large;
    margin-top: -0.2em;
    letter-spacing: 0.05em;
    word-spacing: 0.1em;
    line-height: 1em;
}

#page-header .author-line {
    font-size: large;
    letter-spacing: 0.06em;
    word-spacing: 0.12em;
    line-height: 1em;
}

#unlicense {
    margin-top: 2em;
    margin-bottom: 2em;
}

@import "news.css";

#page-header {
    margin-top: 1.65em;
    margin-bottom: 2em;
}

#page-header h1 {
    letter-spacing: 0.15em;
    font-size: 4em;
}

#page-header .description {
    font-size: x-large;
    margin-top: -0.2em;
    letter-spacing: 0.05em;
    word-spacing: 0.1em;
    line-height: 1em;
}

#page-header .author-line {
    font-size: large;
    letter-spacing: 0.06em;
    word-spacing: 0.12em;
    line-height: 1em;
}

#unlicense {
    margin-top: 2em;
    margin-bottom: 2em;
    border-color: transparent;
}

Remove the thick green border around Unlicense promotion on the main page. It makes my eyes bleed and "unbalances" the page.


body {
    font-family:Arial, Helvetica, sans-serif;
}
.CodeMirror, #editor, #preview {
    width:50%;
    float:left;
    height:calc(100vh - 50px);
}
.CodeMirror, #preview {
    box-sizing: border-box;
    border:1px solid #424242;
}
header {
    height:50px;
    line-height: 50px;
}
.col {
    flex: 50%;
}
.row {
    display: flex;
    justify-content: space-between;
}
.status {
    min-width: 50px;
    text-align: center;
}
.save {
    margin-right:10px;
}
.status, .save {
    height:50px;
    padding:0 10px;
    display: inline-block;
    float:right;
}
button.save {
    border:0;
    background: #0074D9;
    color: hsla(208, 100%, 85%, 1.0);
}
button.save:hover {
    color:#000;
    background:#7FDBFF;
    transition: background 1s;
    cursor: pointer;
}
button.save:disabled {
    background: #ddd;
}
.pass {
    background:green;
    color:#fff;
}
.fail {
    background:red;
    color:#fff;
}

body {
    font-family:Arial, Helvetica, sans-serif;
}
.CodeMirror, #editor, #preview {
    width:50%;
    float:left;
    height:calc(100vh - 50px);
}
.CodeMirror, #preview {
    box-sizing: border-box;
}
#preview {
    border:none;
}
header {
    height:50px;
    line-height: 50px;
    box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122);
}
.col {
    flex: 50%;
}
.row {
    display: flex;
    justify-content: space-between;
}
.status {
    min-width: 50px;
    text-align: center;
}
.save {
    margin-right:10px;
}
.status, .save {
    height:50px;
    padding:0 10px;
    display: inline-block;
    float:right;
}
button.save {
    border:0;
    background: #0074D9;
    color: hsla(208, 100%, 85%, 1.0);
}
button.save:hover {
    color:#000;
    background:#7FDBFF;
    transition: background 1s;
    cursor: pointer;
}
button.save:disabled {
    background: #ddd;
}
.pass {
    background:green;
    color:#fff;
}
.fail {
    background:red;
    color:#fff;
}

Remove borders and add a box shadow

Remove borders and add a box shadow


table tbody tr:nth-child(odd)   { background-color:#eee; }
table tbody tr:nth-child(even)    { background-color:#fff; }

body {
  margin: 0 auto;
  padding: 0 1em 3em;
  max-width: 80em;
  color: #111;
  background: #fff;
  font: medium 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

table {
  border-collapse: collapse;
}

table th,
table td {
  padding: .75em 1.2em;
  border-bottom: 1px solid #ddd;
}

table th {
  text-align: left;
  border-bottom: 2px solid #ddd;
}

table tbody tr:nth-child(odd) {
  background-color: #fafafa;
}

Add more styling to examples list view

Add more styling to examples list view

Some basic typography and whitespace to make it a bit more readable


#navbar-parent {
    margin-bottom: 60px;
    background-color: #499B46;
}

#navbar-parent li {
    font-size: 1.25em;
}

.navbar-brand {
    font-size: 1.75em;
}

#navbar-parent li:hover {
    background-color: #4DB6AC;
}

body {
    font-family: "Source Sans Pro", "Roboto", Helvetica, Arial, sans-serif;
    font-weight: 400;
}

.table th {
    font-size: 1.25em;
}

#navbar-parent {
    margin-bottom: 60px;
    background-color: #499B46;
}

#navbar-parent li {
    font-size: 1.25em;
}

.navbar-brand {
    font-size: 1.75em;
}

#navbar-parent li:hover {
    background-color: teal;
}

body {
    font-family: "Source Sans Pro", "Roboto", Helvetica, Arial, sans-serif;
    font-weight: 400;
}

.table th {
    font-size: 1.25em;
}

Make the navbar hover more visually appealing


.text.container {
	font-size: 120%;
	line-height: 1.5;
}

.text.container h2, .text.container h3 {
	font-weight: bold;
}

.text.container small {
	display: block;
}

.text.container {
	font-size: 140%;
	line-height: 1.6;
	max-width: 40em;

	text-rendering: optimizeLegibility;
}

.text.container h1, .text.container h2, .text.container h3 {
	font-weight: bold;
	padding-top: 1.5em;
	border-top: 1px dotted #BBB;
}

.text.container h1 {
	border-top-color: #666;
	padding-bottom: none;
}

.text.container h1:first-child {
	border-top: none;
}

.text.container p {
	margin-top: 1.5em;
}

.text.container small {
	display: block;
}

.text.container ul, .text.container li {
	margin-left: 0;
	padding-left: 0;
}

Improve legibility of textual pages

Improve legibility of textual pages


/*
# Open Chord Charts -- Database of free chord charts
# By: Christophe Benz <christophe.benz@gmail.com>
#
# Copyright (C) 2012 Christophe Benz
# https://gitorious.org/open-chord-charts/
#
# This file is part of Open Chord Charts.
#
# Open Chord Charts is free software; you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License as
# published by the Free Software Foundation, either version 3 of the
# License, or (at your option) any later version.
#
# Open Chord Charts is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU Affero General Public License for more details.
#
# You should have received a copy of the GNU Affero General Public License
# along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@media (max-width: 767px) {
  .chords {
    margin-left: -10px;
  }

  .properties .key select {
    margin-bottom: 0;
  }
}

.chords table td.bar {
  font-family: 'lilyjazzchord', sans-serif;
  text-align: center;
}

.chords table td.part-name {
  text-align: right;
}

/*
# Open Chord Charts -- Database of free chord charts
# By: Christophe Benz <christophe.benz@gmail.com>
#
# Copyright (C) 2012 Christophe Benz
# https://gitorious.org/open-chord-charts/
#
# This file is part of Open Chord Charts.
#
# Open Chord Charts is free software; you can redistribute it and/or modify
# it under the terms of the GNU Affero General Public License as
# published by the Free Software Foundation, either version 3 of the
# License, or (at your option) any later version.
#
# Open Chord Charts is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU Affero General Public License for more details.
#
# You should have received a copy of the GNU Affero General Public License
# along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@media (max-width: 767px) {
  .chords {
    margin-left: -20px;
    margin-right: -20px;
  }

  .chords table td.bar {
    padding-left: 2px;
    padding-right: 2px;
  }

  .properties .key select {
    margin-bottom: 0;
  }
}

.chords table td.bar {
  font-family: 'lilyjazzchord', sans-serif;
  text-align: center;
}

.chords table td.part-name {
  text-align: right;
}

Tweak CSS for small screens.

Tweak CSS for small screens.


#pnl_root{display:none;}
#pnl_body{margin-bottom:0px;}
#pnl_footer{ padding: 20px; font-size:12px;}
.navbar{ margin-bottom: 0px; }
div.field{margin: 20px 0px; }
div.pnl-btns{margin: 20px 10px; text-align:right;}
div.pnl-lbtns{margin: 20px 10px;}
div.pnl-rbtns{margin: 20px 10px; text-align:right;}
.wf_dropdown_lbl{ margin: 0px 20px; }
.required{color: blue;}
.error{color: red; font-weight:900;}
label[for]{cursor:pointer;}

/* Mobile Device */
@media screen and (max-device-width: 799px){
	.jumbotron .row form, .jumbotron from{ padding: 5px 30px; }
	.pnl-padding{ padding: 10px; }
	.desktop-only{ display: none; }
}

/* Desktop Device */
@media screen and (min-device-width: 800px){
	.pnl-padding{ padding: 20px; }
}

#pnl_root{display:none;}
#pnl_body{margin-bottom:0px;}
#pnl_footer{ padding: 20px; font-size:12px;}
.navbar{ margin-bottom: 0px; }
div.field{margin: 20px 0px; }
div.field .desc{color:gray; font-size:10px;}
div.pnl-btns{margin: 20px 10px; text-align:right;}
div.pnl-lbtns{margin: 20px 10px;}
div.pnl-rbtns{margin: 20px 10px; text-align:right;}
.wf_dropdown_lbl{ margin: 0px 20px; }
.required{color: blue;}
.error{color: red; font-weight:900;}
label[for]{cursor:pointer;}

/* Mobile Device */
@media screen and (max-device-width: 799px){
	.jumbotron .row form, .jumbotron from{ padding: 5px 30px; }
	.pnl-padding{ padding: 10px; }
	.desktop-only{ display: none; }
}

/* Desktop Device */
@media screen and (min-device-width: 800px){
	.pnl-padding{ padding: 20px; }
}

Add the desc style to field

Add the desc style to field