:host {
  flex-basis: 25%;
  padding-right: 5px;
  margin-left: 5px;
}
@media only screen
and (max-device-width: 767px) {
  :host {
    display: none;
  }
}
nav {
  background-color: white;
  min-height: 400px;
  padding-top: 20px;
}
a {
  display: block;
  width: 100%;
  padding: 5px 30px;
  font-size: 1.2em;
  white-space: nowrap;
}
a:hover, a:focus, a.active {
  background-color: #ddd;
}

:host {
  flex-basis: 25%;
  padding-right: 5px;
  margin-left: 5px;
  min-width: 0;
}
@media only screen
and (max-device-width: 767px) {
  :host {
    display: none;
  }
}
nav {
  background-color: white;
  min-height: 400px;
  padding-top: 20px;
}
a {
  display: block;
  width: 100%;
  padding: 5px 30px;
  font-size: 1.2em;
  white-space: nowrap;
}
a:hover, a:focus, a.active {
  background-color: #ddd;
}

Make sure column doesn't expand with nowrap text


@import 'highlight.js/styles/github.css';
@import 'style.css';
@import 'top-bar.css';

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

main {
  flex-grow: 1;
}

.header {
  text-align: center;
  padding-bottom: 1em;
}

.header .avatar {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 50%;
  padding: 4px;
}

.header .title {
  margin: 0;
  /* border-bottom: 1px solid rgba(0,0,0,.1); */
  /* margin-bottom: .25em; */
  /* padding-bottom: .25em; */
}

.header .subtitle {
  color: #888;
  font-size: .8em;
}

.top-bar {
  margin-bottom: 0;
  margin-top: 0;
}

nav.top-bar {
  position: sticky;
  top: -1px;
}

@media screen and (max-width: 85em) {
  nav.top-bar {
    position: inherit;
    top: inherit;
    bottom: inherit;
  }
}

@media screen and (max-width: 42em) {

  span.external {
    display: none;
  }
}

@import 'highlight.js/styles/github.css';
@import 'style.css';
@import 'top-bar.css';

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

main {
  flex-grow: 1;
}

.header {
  text-align: center;
  padding-bottom: 1em;
}

.header .avatar {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 50%;
  padding: 4px;
}

.header .title {
  margin: 0;
  /* border-bottom: 1px solid rgba(0,0,0,.1); */
  /* margin-bottom: .25em; */
  /* padding-bottom: .25em; */
}

.header .subtitle {
  color: #888;
  font-size: .8em;
}

.top-bar {
  margin-bottom: 0;
  margin-top: 0;
}

nav.top-bar {
  position: sticky;
  top: -1px;
}

footer.top-bar {
  position: sticky;
  bottom: 1px;
}

@media screen and (max-width: 85em) {
  nav.top-bar, footer.top-bar {
    position: inherit;
    top: inherit;
    bottom: inherit;
  }
}

@media screen and (max-width: 42em) {

  span.external {
    display: none;
  }
}

Revert "fix footer in printing"

Revert "fix footer in printing"

This reverts commit 1afd380064683d75b7e4d336de7bd8d7ae00ba0b.


body {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

a:visited {
    color: initial;
}

body {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

a:link, a:visited {
    color: initial;
}

Remove color on unclicked links

Remove color on unclicked links

Signed-off-by: Andy Shu <d9a5ae79e0620530e640970c782273ccd89702f2@gmail.com>


/*
Theme Name: <%= name %>
Theme URI: <%= repository %>
Author: __gulp_init_author_name__ @ __gulp_init_author_company__
Author URI: __gulp_init_author_url__
Description: <%= description %>
Version: <%= version %>
License: <%= license %>
*/

/*
Theme Name: <%= pwa_name %>
Theme URI: <%= repository %>
Author: __gulp_init_author_name__ @ __gulp_init_author_company__
Author URI: __gulp_init_author_url__
Description: <%= description %>
Version: <%= version %>
License: <%= license %>
*/

Change theme name to PWA name

Change theme name to PWA name


body {
  background-color: #312164;
  color: #f6f4fc;
  font-family: Rokkitt, serif;
  text-align: center;
}

/* Normalizations */

input::-moz-focus-inner /*Remove button padding in FF*/
{
    border: 0;
    padding: 0;
}

input /*Remove red shadow on invalid inputs*/
{
    box-shadow: none;
}

body {
  background-color: #312164;
  color: #f6f4fc;
  font-family: Rokkitt, serif;
  text-align: center;
}

/* Normalizations */

input::-moz-focus-inner,
button::-moz-focus-inner /*Remove button padding in FF*/
{
    border: 0;
    padding: 0;
}

input /*Remove red shadow on invalid inputs*/
{
    box-shadow: none;
}

Remove BUTTON padding in FF

Remove BUTTON padding in FF


@charset "UTF-8";
/* orc-misc.css -- CSS style sheet orc-misc
 * $Id$
 */

/* For "Opens in new window" icon */
.newWindowIcon {
    margin: none;
    border: none;
    padding: none;
}

/* For Orc in-line demos */
.orc-demo {
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
}
.content ul li {
        margin-top: 1em;
}
.highlight {
        font-weight: bold;
        font-style: italic;
}

/* For our research paper list */
.paper {
        font-weight: bold;
        text-decoration: underline;
}
.venue {
        font-style: italic;
}
.content ul li.new {
        list-style: url(images/new.gif);
}
.doi, .bibtex {
        border: 1px outset;
        height: 10px;
        font-size: 10px;
        padding: 0 2px 0 2px;
        text-decoration: none;
        color: #FFF;
        font-family: sans-serif;
        border-color: #036;
        background: #06C;
}

@charset "UTF-8";
/* orc-misc.css -- CSS style sheet orc-misc
 * $Id$
 */

/* For "Opens in new window" icon */
.newWindowIcon {
    margin: 0;
    border: none;
    padding: 0;
}

/* For Orc in-line demos */
.orc-demo {
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
}
.content ul li {
        margin-top: 1em;
}
.highlight {
        font-weight: bold;
        font-style: italic;
}

/* For our research paper list */
.paper {
        font-weight: bold;
        text-decoration: underline;
}
.venue {
        font-style: italic;
}
.content ul li.new {
        list-style: url(images/new.gif);
}
.doi, .bibtex {
        border: 1px outset;
        height: 10px;
        font-size: 10px;
        padding: 0 2px 0 2px;
        text-decoration: none;
        color: #FFF;
        font-family: sans-serif;
        border-color: #036;
        background: #06C;
}

Fix CSS syntax error in Orc Web site

Fix CSS syntax error in Orc Web site


img[alt=Jamkit_Screenshot_1] { width:130px; }
img[alt=Jamkit_Screenshot_2] { width:130px; }
img[alt=Jamkit_Screenshot_3] { width:130px; }
img[alt=Jamkit_Screenshot_4] { width:130px; }
img[alt=Jamkit_Screenshot_5] { width:130px; }
img[alt=Jamkit_Screenshot_6] { width:130px; }
img[alt=HelloWorld_Screenshot] { width:250px; border-style:solid; border-width:1px; border-color:#ddd;}
img[alt=YouTubeChannel_Screenshot] { width:250px; border-style:solid; border-width:1px; border-color:#ddd; }

.video-wrap {
	max-width: 640px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

img[alt=Jamkit_Screenshot_1] { width:130px; }
img[alt=Jamkit_Screenshot_2] { width:130px; }
img[alt=Jamkit_Screenshot_3] { width:130px; }
img[alt=Jamkit_Screenshot_4] { width:130px; }
img[alt=Jamkit_Screenshot_5] { width:130px; }
img[alt=Jamkit_Screenshot_6] { width:130px; }
img[alt=HelloWorld_Screenshot] { width:250px; border-style:solid; border-width:1px; border-color:#ddd;}
img[alt=YouTubeChannel_Screenshot] { width:250px; border-style:solid; border-width:1px; border-color:#ddd; }

.video-wrap {
	max-width: 480px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Add the youtube movie for transfer app via KakaoTalk.


body {
    background-color: #2a2a2a;
    text-align: center;
    overflow-y: hidden;
}

#footer {
    height: 40px;
    position: relative;
    margin: 30px auto;
    visibility: hidden;
}

a {
    border-radius: 6px;
    background-color: #666;
    color: white;
    font-family: Lucida Console, monospace;
    font-weight: bold;
    font-size: 16px;
    padding: 10px;
}

#restart {
    margin-right: 10px;
}

#score {
    float: right;
    text-align: right;
}

#playground {
    width: 400px;
    height: 400px;
}

#nextballs-container {
    display: flex;
    float: left;
    position: absolute;
    align-items: center;
    top: 0;
    left: 0;
    height: 40px;
}

#scoreboard-container, #restart-container {
    display: flex;
    float: right;
    flex-direction: column;
    justify-content: center;
    height: 40px;
}

body {
    background-color: #2a2a2a;
    text-align: center;
    overflow-y: hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#footer {
    height: 40px;
    position: relative;
    margin: 30px auto;
    visibility: hidden;
}

a {
    border-radius: 6px;
    background-color: #666;
    color: white;
    font-family: Lucida Console, monospace;
    font-weight: bold;
    font-size: 16px;
    padding: 10px;
}

#restart {
    margin-right: 10px;
}

#score {
    float: right;
    text-align: right;
}

#playground {
    width: 400px;
    height: 400px;
}

#nextballs-container {
    display: flex;
    float: left;
    position: absolute;
    align-items: center;
    top: 0;
    left: 0;
    height: 40px;
}

#scoreboard-container, #restart-container {
    display: flex;
    float: right;
    flex-direction: column;
    justify-content: center;
    height: 40px;
}

Remove canvas "blinking" effect (webkit-specific).


.form-horizontal.compact .control-group {
    margin-bottom: 2px;
}

.form-horizontal.compact hr {
    margin: 8px 0;
}

.form-horizontal button.form-btn {
    width: 8em;
    height: 2em;
}

.form-horizontal .schema-head {
     margin-top: 15px;
     margin-bottom: 5px;
     border: 1px solid #ddd;
     padding: 4px 180px;
}

.form-horizontal .sub-doc {
    padding: 5px 0;
    margin-bottom: 3px;
}

.form-horizontal .sub-doc-btns {
    margin-left: 15px;
}

.form-horizontal .schema-foot {
    padding: 5px 180px;
    margin: 5px 0;
}

.form-horizontal input[type="checkbox"].ng-invalid-required:after {
    content:"*";
    font-weight: bold;
    color: red;
    padding-left: 5px
}

.form-horizontal input.ng-invalid-required {
    background-color: rgba(255, 0, 0, 0.10);
}

Add styling for invalid required fields

Add styling for invalid required fields


body {
    background-color: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#map-view {
    position: absolute;
    top: 72px;
    left: 32px;
    right: 32px;
    bottom: 32px;
    background-color: black;
}

#map-view canvas {
    width: 100%;
    height: 100%;
}

#map-view:-webkit-full-screen {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#debug-panel {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 256px;
    background-color: rgba(0, 0, 0, 0.25);
    color: white;
    font-family: sans-serif;
    padding: 8px;
}

#debug-panel .debug-label {
    display: inline-block;
    width: 144px;
    padding-right: 8px;
    text-align: right;
    color: #cccccc;
}

Make background dark & use sans-serif font


@import '../layout.css';
@import '../variables.css';

.card {
  padding: 20px;
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--outer-space);
  background-color: var(--white);
  border: var(--border-width) solid var(--mystic);
  border-radius: var(--border-radius);
  transition: box-shadow var(--transition-animation-time) var(--transition-animation-type);
}

.card:hover{
  box-shadow: var(--box-shadow-level-1);
}

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

.card a:hover {
  color: var(--denim);
}

.card a:active {
  color: var(--tory-blue);
}

.card ul {
  margin-top: 20px;
}

.card ul:nth-child(1) {
  margin-top: 0;
}

.card ul li h4 {
  margin-bottom: 0;
}

.card ul li.last {
  margin-bottom: 0;
}

.double-padding {
  padding: 40px;
}

.empty {
  border-color: var(--geyser);
  border-style: dashed;
}

.empty:hover {
  border-color: transparent;
}

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

.no-border {
  border: 0;
}

.no-padding {
  padding: 0;
}

@import '../layout.css';
@import '../variables.css';

.card {
  padding: 1.5em;
  font-size: 0.875em;
  line-height: var(--line-height);
  color: var(--outer-space);
  background-color: var(--white);
  border: var(--border-width) solid var(--mystic);
  border-radius: var(--border-radius);
  transition: box-shadow var(--transition-animation-time) var(--transition-animation-type);
}

.card:hover{
  box-shadow: var(--box-shadow-level-1);
}

.card a:link,
.card a:visited {
  color: var(--curious-blue);
}

.card a:hover {
  color: var(--denim);
}

.card a:active {
  color: var(--tory-blue);
}

.double-padding {
  padding: 3em;
}

.empty {
  border-color: var(--geyser);
  border-style: dashed;
}

.empty:hover {
  border-color: transparent;
}

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

.no-border {
  border: 0;
}

.no-padding {
  padding: 0;
}

Update px to em in Card component

Update px to em in Card component


html {
  height: 100%;
}

body {
  min-height: 100%;
}

.PwaStatsLogo-indicator {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.PwaStatsLogo:hover .PwaStatsLogo-indicator,
.PwaStatsLogo:focus .PwaStatsLogo-indicator {
  opacity: 1;
}

@supports (display: grid) {
  .Masonry {
    display: grid;
    grid-gap: 1.25rem;
    justify-items: center;
  }

  @media (min-width: 22.5em) {
    .Masonry {
      grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    }
  }
}

.Masonry > * {
  margin-left: auto;
  margin-right: auto;
  max-width: 40rem;
}

.Masonry > * + * {
  margin-top: 1.25rem;
}

@supports (display: grid) {
  .Masonry > * + * {
    margin-top: 0;
  }
}

html {
  height: 100%;
}

body {
  min-height: 100%;
}

.PwaStatsLogo-indicator {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.PwaStatsLogo:hover .PwaStatsLogo-indicator,
.PwaStatsLogo:focus .PwaStatsLogo-indicator {
  opacity: 1;
}

@supports (display: grid) {
  .Masonry {
    display: grid;
    grid-gap: 1.25rem;
    justify-items: center;
  }

  @media (min-width: 22.5em) {
    .Masonry {
      grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
    }
  }
}

.Masonry > * {
  margin-left: auto;
  margin-right: auto;
  max-width: 40rem;
  width: 100%;
}

.Masonry > * + * {
  margin-top: 1.25rem;
}

@supports (display: grid) {
  .Masonry > * + * {
    margin-top: 0;
  }
}

Set default width of Masonry children

Set default width of Masonry children

Makes sure cards show up at 100% width when they're on their own row.

See: #78


/*-- HTML5 Boilerplate. -----------------------------------------------------*/

@import "normalize.css";

/*-- Application stylesheets. -----------------------------------------------*/

body {
  font: 14px "Helvetica Neue", Arial, sans-serif;
}

header {
  padding: 10px 0;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ddd;
}

header img {
  display: inline-block;
}

header .brand {
  display: inline-block;
  vertical-align: top;
  font-size: 24px;
  font-weight: 200;
  margin: 3px 0 0 10px;
}

.container {
  margin: auto auto;
  width: 500px;
}

main {
  padding-top: 30px;
}

a {
  color: #00B7FF;
}

.linkTextbox {
  width: 100%;
}

svg {
  cursor: pointer
}

Use hand pointer for keys

Use hand pointer for keys


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

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

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

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

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

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

.link {
  cursor: pointer;

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

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

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

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

Make sure links have a pointer cursor on hover


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

#second_from_top {
display: block;
position: relative;

}

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

#second_from_top {
display: block;
position: relative;

}

Change top block technical stylesheet

Change top block technical stylesheet


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

a {
  color: #00B7FF;
}

.languages {
  margin-top: 50px;
  list-style: none;
  padding-left: 0;
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
}

.color {
  display: inline-block;
  height: 25px;
  width: 25px;
  margin-right: 25px;
}
.color, .language {
  vertical-align: middle;
}

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

a {
  color: #00B7FF;
}

.languages {
  margin-top: 50px;
  list-style: none;
  padding-left: 0;
}

.color {
  display: inline-block;
  height: 25px;
  width: 25px;
  margin-right: 25px;
}
.color, .language {
  vertical-align: middle;
}

/* MEDIA QUERIES */

/* Small devices (tablets) */
@media (min-width: 768px) {
  .languages {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

/* Medium devices (desktops) */
@media (min-width: 992px) {
  .languages {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

/* Large devices (large desktops) */
@media (min-width: 1200px) {
  .languages {
    -moz-column-count: 5;
    -webkit-column-count: 5;
    column-count: 5;
  }
}

Use media queries to change the column count based on screen size


.mail-conv-sender {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

.mail-conv-sender img{
	width: 32px;
	height: 32px;
}

.mail-conv-sender-name {
	font-weight: bold;
}

.mail-conv-body {
	margin-bottom: 10px;
}

.mail-conv-body img {
	max-width: 100%;
}

#prvmail-rotator {
	margin: 15px;
}

.mail-conv-outside-wrapper {
	margin-bottom: 20px;
}

.mail-conv-sender {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

.mail-conv-sender img{
	width: 32px;
	height: 32px;
}

.mail-conv-sender-name {
	font-weight: bold;
}

.mail-conv-body {
	margin-bottom: 10px;
}

.mail-conv-body img {
	max-width: 100%;
}

#prvmail-rotator {
	margin: 15px;
}

#prvmail-text {
  height: 20.0em;
}

.mail-conv-outside-wrapper {
	margin-bottom: 20px;
}

Enlarge the default mail composition text area.


form fieldset {
	display: flex !important;
	flex-direction: column;
}

form fieldset > p {
	position: relative;
}

#password {
	margin: 5px 0;
	padding-right: 45px;
	height: 45px;
	box-sizing: border-box;
	flex: 1 1 auto;
	width: 100% !important;
	min-width: 0; /* FF hack for to override default value */
}

input[type='submit'],
input[type='submit'].icon-confirm {
	position: absolute;
	top: 0px;
	right: -5px;
	width: 45px !important;
	height: 45px;
	background-color: transparent !important;
}

.warning > .warning {
	/* Do not use a top margin for warning messages in the warning container. */
	margin-top: 0;
}

Remove extra margin from warning messages in authenticate page

In the public share authentication page the form elements appear inside
a container that uses the "warning" CSS class. When the given password
is wrong a warning message is shown inside that container; this message
uses the "warning" CSS class too, so the top margin set for ".warning"
elements need to be removed in that case.

Signed-off-by: Daniel Calviño Sánchez <bd7629e975cc0e00ea7cda4ab6a120f2ee42ac1b@gmail.com>


body {
  background-color: #64ceaa;
  color: white;
  font-family: sans-serif;
}

kbd {
  border: 1px solid white;
  margin: 2px;
  padding: 2px;
}

.header, .app, #bpm {
  text-align: center;
}

.header {
  margin-top: 4em;
}

.output {
  margin: 2em;
}

input#bpm {
  font-size: 1em;
  font-weight: bold;
  padding: 1em;
  width: 5.25em;
}

button#toggle {
  background-color: white;
  font-size: 1em;
  font-weight: bold;
  padding: 1em;
}

#flash {
  fill: white;
  stroke-width: 10;
}

#flash.active {
  stroke: white;
}

body {
  background-color: #64ceaa;
  color: white;
  font-family: sans-serif;
}

kbd {
  border: 1px solid white;
  margin: 2px;
  padding: 2px;
}

.header, .app, #bpm {
  text-align: center;
}

.header {
  margin-top: 4em;
}

.output {
  margin: 2em;
}

input#bpm {
  font-size: 1em;
  font-weight: bold;
  margin: .3em;
  padding: 1.5em;
  width: 5.25em;
}

button#toggle {
  background-color: white;
  font-size: 1em;
  font-weight: bold;
  margin: .3em;
  padding: 1.5em;
}

#flash {
  fill: white;
  stroke-width: 10;
}

#flash.active {
  stroke: white;
}

Increase input / button size

Increase input / button size


#canvas_container,
#buttons_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#canvas_container *,
#buttons_container * {
	pointer-events: auto;
}
#canvas_container {
    background: url("img/bg.jpg");
}
.image_button {
	position: absolute;
	transform: translateX(-50%);
}

body * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Fix selection bug in Chrome by making text unselectable


html, body {
    text-align:center;
    background-color: white;
    font-family: Arial, sans-serif;
    font-size:12pt;
}
footer {
    color: #999999
}
a:hover, a:focus {
    color: #005580;
    text-decoration: underline;
}
a:hover, a:active {
    outline: 0;
}
a {
    color: #0088cc;
    text-decoration: none;
}

#answer {
    margin-top: 200px;
    font-weight: bold;
    font-size: 10em;
    text-decoration: none;
    color: black;
}
#next {
    font-size: 1.5em;
}

Apply font-family to all elements

Apply font-family to all elements


body {
  display: block;
  margin: auto;
  width: 99%;
  text-align: center;
}

.column-1 {
  border: 3px solid red;
  display: inline-block;
  vertical-align: top;
  width: 40%;
  padding: 10px;
}

.column-2 {
  border: 3px solid blue;
  display: inline-block;
  vertical-align: top;
  width: 40%;
  padding: 10px;
}

header {
  background-color: pink;
}

h1 {
  color: red;
}

h2 {
  font-style: italic;
}

footer {
  margin-top: 20px;
}

header, footer {
  background-color: green;
}

.column-1 h2 {
  color: pink;
  }

 a:hover {
   color: green;
 }

Update CSS file to style HTML page for GPS 2-1


	.skin0{
		position:absolute;
		width:150px;
		border:1px solid black;
		background-color:menu;
		/*background-color:#def;*/
		font-family:Verdana;
		line-height:20px;
		cursor:default;
		font-size:14px;
		z-index:100;
		visibility:hidden;
	}

	.menuitems{
		padding-left:10px;
		padding-right:10px;
	}

Add for grid component(contains css style for this comp)

SVN-Revision: 3793


.kem-ties .kem-item {
  float: left;
}

.kem-rank {
  margin: 0;
  padding: 0;
  overflow: auto;
	width: 100%;
}

.kem-drag-onto {
  position: absolute;
  left: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  z-index: 600;
  width: 100%;
  background-color: transparent;
}

.kem-drag-onto.kem-dragging-over .kem-arrow {
  background-image: url(images/arrow.png);
  background-repeat: no-repeat;
}

.kem-drag-onto-bottom.kem-dragging-over .kem-arrow {
  background-image: url(images/arrow-bottom.png);
}

.kem-drag-onto-top.kem-dragging-over .kem-arrow {
  background-image: url(images/arrow-top.png);
}

.kem-drag-onto-between.kem-dragging-over .kem-arrow {
  background-image: url(images/arrow-between.png);
}

.kem-arrow {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 500;
}

.kem-container {
  padding-left: 30px;
}

Fix tab in CSS file.

Fix tab in CSS file.


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

.monaco-workbench .integrated-terminal {
	align-items: flex-end;
	display: flex;
}

.monaco-workbench .integrated-terminal {
	background-color: #1e1e1e!important;
	color: #CCC;
	-webkit-user-select: initial;
}

.monaco-workbench .integrated-terminal .terminal {
	background-color: #1e1e1e!important;
}

.monaco-workbench .integrated-terminal .terminal span {
	display: inline-block; /* make terminal characters cover height of line */
}

.monaco-workbench .integrated-terminal .terminal-cursor {
	background-color: #CCC;
}

.monaco-workbench .integrated-terminal .reverse-video {
	color: #1e1e1e;
}

/* High Contrast Theming */

.hc-dark .monaco-workbench .integrated-terminal .terminal {
	background-color: black!important;
}

.hc-dark .monaco-workbench .integrated-terminal .terminal-cursor {
	background-color: white;
}

.hc-dark .monaco-workbench .integrated-terminal .reverse-video {
	color: black;
}

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

.monaco-workbench .integrated-terminal {
	align-items: flex-end;
	display: flex;
}

.monaco-workbench .integrated-terminal {
	background-color: #1e1e1e!important;
	color: #CCC;
	-webkit-user-select: initial;
	overflow: hidden; /* prevents the terminal output being incorrectly placed over the title */
}

.monaco-workbench .integrated-terminal .terminal {
	background-color: #1e1e1e!important;
}

.monaco-workbench .integrated-terminal .terminal span {
	display: inline-block; /* make terminal characters cover height of line */
}

.monaco-workbench .integrated-terminal .terminal-cursor {
	background-color: #CCC;
}

.monaco-workbench .integrated-terminal .reverse-video {
	color: #1e1e1e;
}

/* High Contrast Theming */

.hc-dark .monaco-workbench .integrated-terminal .terminal {
	background-color: black!important;
}

.hc-dark .monaco-workbench .integrated-terminal .terminal-cursor {
	background-color: white;
}

.hc-dark .monaco-workbench .integrated-terminal .reverse-video {
	color: black;
}

Fix bug where terminal output could obscure panel title


/* Styling for the progressbar itself */
.progressbar {
    margin: 0;
    padding: 0;
    z-index: 99998;
    background-color: green;
    color: green;
    box-shadow: 0 0 10px 0; /* Inherits the font color */
    height: 2px;

    /* Add CSS3 styles for transition smoothing */
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

/* Styling for the progressbar-container */
.progressbar-container {
    position: fixed;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}

/* Styling for the ngProgress itself */
#ngProgress {
    margin: 0;
    padding: 0;
    z-index: 99998;
    background-color: green;
    color: green;
    box-shadow: 0 0 10px 0; /* Inherits the font color */
    height: 2px;
    opacity: 0;

    /* Add CSS3 styles for transition smoothing */
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

/* Styling for the ngProgress-container */
#ngProgress-container {
    position: fixed;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}

Change class to id and opacity:0 on init


#recent-actions-module,
#content-main .changelink,
#content-main .submit-row {
  display: none
}

td.field-value {
  white-space: nowrap
}

#content-main .changelink,
#content-main .submit-row,
#content-main p,
#historicalreimbursement_form p,
#recent-actions-module {
  display: none
}

td.field-value {
  white-space: nowrap
}

Remove some nodes from the UI

Remove some nodes from the UI


@charset "utf-8";

html, body {
    height: 100%;
    width: 100%;
}

body {
    padding-top: 80px;
}

.navbar-brand {
    background: url('//lapis.blue/img/lapis.png') no-repeat 0 10px;
    background-size: 40px;
    padding-left: 42px;
}

.row img {
    max-width: 100%;
    max-height: 100%;
}

.pixelated {
    width: 100%;
    height: 100%;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

footer {
    text-align: right;
    margin: 25px 0;
}

@charset "utf-8";

html, body {
    height: 100%;
    width: 100%;
}

body {
    padding-top: 80px;
}

.navbar-brand {
    background: url('//lapis.blue/img/lapis.png') no-repeat 0 10px;
    background-size: 40px;
    padding-left: 42px;
}

.row img {
    max-width: 100%;
    max-height: 100%;
}

.pixelated {
    width: 100%;
    height: 100%;
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

footer {
    text-align: right;
    margin: 25px 0;
}

Add more fallbacks for image scaling

Add more fallbacks for image scaling


body {
    padding-top: 50px;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.code {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 1em;
}

.panel-heading {
    font-weight: bold;
}

textarea {
   resize: none;
}

div.fb-like > span {
    vertical-align: initial !important;
}

body {
    padding-top: 50px;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.code {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 1em;
}

.panel-heading {
    font-weight: bold;
}

textarea {
   resize: none;
}

div.fb-like > span,
div.fb-share-button > span {
    vertical-align: initial !important;
}

Fix Facebook share button alignment

Fix Facebook share button alignment

Fix Facebook share button alignment broken by #10.


#loader, #login, #main {
    height: 100%;
}

.content {
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#loading_gif {
    height: 16px;
    width: 16px;
}

#img_logo_img {
    height: 125px;
    width: 125px;
}

.centered-content {
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#loader, #login, #main {
    height: 100%;
}

#main {
    padding: 8px;
}

#loading-gif {
    height: 16px;
    width: 16px;
}

#img-logo-img {
    height: 125px;
    width: 125px;
}

#user-photo {
    height: 64px;
    width: 64px;

    margin-bottom: 0;
}

Add styles for the user photo and replace all the _ in id attributes with -


html, body {
  overflow: auto;
}

@media (min-width: 1600px) {
  .container {
    width: 1500px
  }
}

pre {
  background-color: transparent;
  font-size: 12px;
}

.tree-browser {
  overflow: auto;
}
.file-viewer {
  padding-left: 50px;
  overflow: auto;
}
.jstree-custom-folder{
  background-image: url('../imgs/folder.png') !important;
  background-position: 0 !important;
}
.jstree-custom-file {
  background-image: url('../imgs/file.png') !important;
  background-position: 0 !important;
}

html, body {
  overflow: auto;
}

@media (min-width: 1600px) {
  .container {
    width: 1500px
  }
}

@media (min-width: 1900px) {
  .container {
    width: 1700px
  }
}

pre {
  background-color: transparent;
  font-size: 12px;
}

.tree-browser {
  overflow: auto;
}
.file-viewer {
  padding-left: 50px;
  overflow: auto;
}
.jstree-custom-folder{
  background-image: url('../imgs/folder.png') !important;
  background-position: 0 !important;
}
.jstree-custom-file {
  background-image: url('../imgs/file.png') !important;
  background-position: 0 !important;
}

Add a media rule for large screens

Add a media rule for large screens


header {
  text-align: center;
  background-color: black;
  color: lightgray;
}

ul {
  list-style-type: square;
}

img {
  width: 100%;
}

.outline {
  border: 2px black solid;
}

.description {
  font-size: 1.5em;
  width: 70%;
  margin: 0 auto;
}

header, footer {
  text-align: center;
  background-color: black;
  color: lightgray;
}

ul {
  list-style-type: square;
}

img {
  width: 100%;
}

.outline {
  border: 2px black solid;
}

.description {
  font-size: 1.5em;
  width: 70%;
  margin: 0 auto;
}

Make footer look like header

Make footer look like header


.social-link-item {
  display: inline-block;
}

.social-link-anchor {
  margin: .5rem;
  padding: .5rem;
  display: inline-block;
}

.social-icon {
  height: 4em;
  transition: all .2s ease;
}

.social-icon.dark {
  opacity: 1;
  position: absolute;
}
.social-link-anchor:hover .social-icon.dark {
  opacity: 0;
  transform: scale(1.1);
}

.social-icon.colorful {
  opacity: 0;
}
.social-link-anchor:hover .social-icon.colorful {
  opacity: 1;
  transform: scale(1.1);
}

.social-link-item {
  display: inline-block;
}

.social-link-anchor {
  margin: .5rem;
  padding: .5rem;
  display: inline-block;
  transition: all 0.2s ease;
}
.social-link-anchor:hover {
  -webkit-filter: drop-shadow(0 3px 3px rgba(0,0,0,0.16));
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.16));
}

.social-icon {
  height: 4em;
  transition: all 0.2s ease;
}
.social-link-anchor:hover .social-icon {
  -webkit-filter: drop-shadow(0 3px 3px rgba(0,0,0,0.23));
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.23));
}

.social-icon.dark {
  opacity: 1;
  position: absolute;
}
.social-link-anchor:hover .social-icon.dark {
  opacity: 0;
  transform: scale(1.1);
}

.social-icon.colorful {
  opacity: 0;
}
.social-link-anchor:hover .social-icon.colorful {
  opacity: 1;
  transform: scale(1.1);
}

Add drop shadow to icons on hover

:art: Add drop shadow to icons on hover

Based on https://codepen.io/sdthornton/pen/wBZdXq #2


span.code {
    font-family: monospace;
}

table.parameters {
}

table.parameters td:first-child {
    font-family: monospace;
}

h1, h2 {
    font-family: sans-serif;
}

div#help {
    margin: auto;
    max-width: 1200px;
}

span.code {
    font-family: monospace;
}

table.parameters {
    margin: 1em 0;
}

table.parameters th {
}

table.parameters td {
}

table.parameters tr:first-child {
    font-family: sans-serif;
    font-size: 1.17em;
}

table.parameters td:first-child {
    font-family: monospace;
}

Apply some simple styling to the API help page.


/* mainNavStyles.css */

.l-main-nav .main-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

.main-nav li {
  padding: 0.5em;
  font-size: 1.5em;
  color: #369;
}

.main-nav li a {
  text-decoration: none;
}

.main-nav li a:hover {
  text-decoration: underline;
}

Add styles for mainNav component

Add styles for mainNav component


.download-view {
  height: 100%;
}

.download-view .selection-lists {
  height: calc(100% - 30px);
  overflow-y: auto;
  margin-left: -5px;
}

.download-view .selection-lists.with-terms {
  height: calc(100% - 60px);
}

.download-view .selection-norecords {
    color: white;
    padding: 5px;
}

.download-control {
  position: absolute;
  width: calc(100% - 10px);
  margin-bottom: 5px;
  bottom: 0px;
}

.download-control .checkbox {
  width: 100%;
}

.download-view {
  height: 100%;
}

.download-view .selection-lists {
  height: calc(100% - 23px);
  overflow-y: auto;
  margin-left: -5px;
}

.download-view .selection-lists.with-terms {
  height: calc(100% - 60px);
}

.download-view .selection-norecords {
    color: white;
    padding: 5px;
}

.download-control {
  position: absolute;
  width: calc(100% - 10px);
  margin-bottom: 5px;
  bottom: 0px;
}

.download-control .checkbox {
  width: 100%;
}

Adjust height for correct space of scrollbar.


body > .container {
  width: 1035px;
}

.menu.tabs {
  padding-top: 0px;
}

.menu .sort span.name {
  width: 520px;
}

.part .menu ul {
  margin-bottom: -1px;
}

.part .menu section {
  border-top: 1px solid #5E6475;
  padding-top: 27px;
}

.part.select .menu ul li .name {
  width: 519px; /* Instead of 520px; because of padding */
}

.tabs > section.resources {
  display: block; /* Make resources visible before JS done */
}

Make parts visible before JS done

Make parts visible before JS done


body {
    padding-top: 60px;
}

#cloud h3 {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    margin-top: 40px;
}
#cloud a {
    color: #404040;
}

#feedback textarea {
    width: 40em;
}

/* Status states */
#status td,
#status_legend td {
    text-align: center;
}
#status .scheduled,
#status_legend .scheduled {
    background: #fcc;
}
#status .fetched,
#status_legend .fetched {
    background: #fff7cc;
}
#status .fetched.scheduled,
#status_legend .fetched.scheduled {
    background: #efc;
}
#status_legend {
    width: auto;
}

body {
    padding-top: 60px;
}

.nav a.disabled,
.nav a.disabled:hover {
    color: #666;
}

#cloud h3 {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    margin-top: 40px;
}
#cloud a {
    color: #404040;
}

#feedback textarea {
    width: 40em;
}

#status td,
#status_legend td {
    text-align: center;
}
#status .scheduled,
#status_legend .scheduled {
    background: #fcc;
}
#status .fetched,
#status_legend .fetched {
    background: #fff7cc;
}
#status .fetched.scheduled,
#status_legend .fetched.scheduled {
    background: #efc;
}
#status_legend {
    width: auto;
}

Change style of .disabled nav elements

Change style of .disabled nav elements


.navbar {
  background-color: black;
}

.fill-height {
    min-height: 100%;
    height:auto !important; /* cross-browser */
    height: 100%; /* cross-browser */
}
#number-records-nd {
    font-size: 55px;
}
.dc-chart g.row text {
    fill: black;
}
#map{
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 700px;
}

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

.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.info h4, h6 {
    margin: 0 0 5px;
    color: #777;
}

.chart-wrapper .chart-stage {
    padding: 10px 10px;
}

Update border size in chart-wrapper

Update border size in chart-wrapper


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

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

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

#fifth_from_top {
display: block;
position: relative;
top: 1710px;
left: 100px;
}

#sixth_from_top {
display: block;
position: relative;
top: 1720px;
left: 100px;
}

#seventh_from_top {
display: block;
position: relative;
top: 1730px;
left: 100px;
}

#eighth_from_top {
display: block;
position: relative;
top: 1740px;
left: 100px;
}

#ninth_from_top {
display: block;
position: relative;
top: 1750px;
left: 100px;
}

main {
	display: block;
	height: 100%;
	padding-bottom: 1750px;
}

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

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

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

#fifth_from_top {
display: block;
position: relative;
top: 1710px;
left: 100px;
}

#sixth_from_top {
display: block;
position: relative;
top: 1720px;
left: 100px;
}

#seventh_from_top {
display: block;
position: relative;
top: 1730px;
left: 100px;
}

#eighth_from_top {
display: block;
position: relative;
top: 1740px;
left: 100px;
}

#ninth_from_top {
display: block;
position: relative;
top: 1750px;
left: 100px;
}

main {
	display: block;
	height: 100%;
	padding-bottom: 1750px;
}

Fix 3rd on blog stylesheet

Fix 3rd on blog stylesheet


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

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

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

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

Change second third block blog index css


/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

.connection-select-menu .menu-dropdown {
    border: none;
}

.connection-select-menu .menu-contents {
    font-weight: normal;
    font-size: 0.8em;
}

.connection-select-menu .filter input {
    border-bottom: 1px solid rgba(0,0,0,0.125);
    border-left: none;
}

.connection-select-menu .filter {
    margin-bottom: 0.5em;
    padding: 0;
}

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

.connection-select-menu {
    min-width: 0;
}

.connection-select-menu .menu-dropdown {
    border: none;
}

.connection-select-menu .menu-dropdown .menu-title {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}

.connection-select-menu .menu-dropdown .menu-contents {
    font-weight: normal;
    font-size: 0.8em;
    right: auto;
    left: 0;
}

.connection-select-menu .menu-dropdown .menu-contents .filter input {
    border-bottom: 1px solid rgba(0,0,0,0.125);
    border-left: none;
}

.connection-select-menu .menu-dropdown .menu-contents .filter {
    margin-bottom: 0.5em;
    padding: 0;
}

GUACAMOLE-723: Apply ellipsis to portion of connection name that overflows connection selection menu title.


/*

An Old Hope – Star Wars Syntax
Redesigned Gustavo Costa
Original theme - Ocean Dark Theme – by https://github.com/gavsiu
Based on Jesse Leite's Atom syntax theme 'An Old Hope' – https://github.com/JesseLeite/an-old-hope-syntax-atom

*/

/* Death Star Comment */
.hljs-comment,
.hljs-quote
{
  color: #B6B18B;
}

/* Darth Vader */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion
{
  color: #EB3C54;
}

/* Threepio */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link
{
  color: #E7CE56;
}

/* Luke Skywalker */
.hljs-attribute
{
  color: #EE7C2B;
}

/* Obi Wan Kenobi */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition
{
  color: #4FB4D7;
}

/* Yoda */
.hljs-title,
.hljs-section
{
  color: #78BB65;
}

/* Mace Windu */
.hljs-keyword,
.hljs-selector-tag
{
  color: #B45EA4;
}

/* Millenium Falcon */
.hljs
{
  display: block;
  overflow-x: auto;
  background: #1C1D21;
  color: #c0c5ce;
  padding: 0.5em;
}

.hljs-emphasis
{
  font-style: italic;
}

.hljs-strong
{
  font-weight: bold;
}

Create An Old Hope syntax theme for Highlight.js

This syntax theme was based on Jesse Leite's Atom highlighting syntax theme. This is a Star Wars theme.

Colours of Darth Vader, Death Star, Luke, Mace Windu, Millennium Falcon, Obi Wan Kenobi, Threepio and Yoda.


/* -- Colour - Styles ------------------------------------------------------ */
tt.descclassname {
    display: none;
}

tt.descname {
    color: #333333;
    font-size: 20px;
}

/* Preventing wrapping on long *data* objects. */
dt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

dd {
    margin-left: 1.5em;
}

th.field-name {
    background-color: #FFF;
    border: 1px solid #DDD;
}

.label {
    color: #4183c4;
}

.rubric {
    color: #333333;
}

pre {
    background-color: #FFF;
}

#hidden-toctree {
    display: none;
}

ul {
    padding-left: 20px;
}

Reduce left padding of API toctree.

Reduce left padding of API toctree.


/*
  UTILITIES

  README:
    TODO: Write me!

*/

/* Border radius */

.rad {
  border-radius: var(--radius);
}

/* Scroll prevention */

.scroll-lock {
  height: 100%;
  overflow-y: hidden;
}

/* Clearfix */

.clr {
  @mixin clearfix;
}

/* Box model */

.content-box { box-sizing: content-box; }
.border-box { box-sizing: border-box; }

/* Cursors */

.pointer { cursor: pointer; }
.help { cursor: help; } /* useful with the v-tooltip Vue custom directive */

/* SVG icons */

.icon {
  width: 1rem;
  height: 1rem;
}

.icon-s {
  width: 1.2rem;
  height: 1.2rem;
}

.icon-l {
  width: 1.5rem;
  height: 1.5rem;
}

/*
  UTILITIES

  README:
    TODO: Write me!

*/

/* Borders */

.bt0 { border-top: 0; }
.br0 { border-right: 0; }
.bb0 { border-bottom: 0; }
.bl0 { border-left: 0; }

.rad { border-radius: var(--radius); }
.rad0 { border-radius: 0; }

/* stylelint-disable declaration-no-important */
.bt0-i { border-top: 0 !important; }
.br0-i { border-right: 0 !important; }
.bb0-i { border-bottom: 0 !important; }
.bl0-i { border-left: 0 !important; }

.rad0-i { border-radius: 0 !important; }
/* stylelint-enable declaration-no-important */

/* Scroll prevention */

.scroll-lock {
  height: 100%;
  overflow-y: hidden;
}

/* Clearfix */

.clr {
  @mixin clearfix;
}

/* Box model */

.content-box { box-sizing: content-box; }
.border-box { box-sizing: border-box; }

/* Cursors */

.pointer { cursor: pointer; }
.help { cursor: help; } /* useful with the v-tooltip Vue custom directive */

/* SVG icons */

.icon {
  width: 1rem;
  height: 1rem;
}

.icon-s {
  width: 1.2rem;
  height: 1.2rem;
}

.icon-l {
  width: 1.5rem;
  height: 1.5rem;
}

Add more CSS border utilities

Add more CSS border utilities


/*
Copyright 2016 OpenMarket Ltd

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

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

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_TopUnreadMessagesBar {
    max-width: 960px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.mx_TopUnreadMessagesBar_scrollUp {
    display: inline;
    cursor: pointer;
}

.mx_TopUnreadMessagesBar_scrollUp img {
    padding-left: 10px;
    padding-right: 31px;
    vertical-align: middle;
}

.mx_TopUnreadMessagesBar_scrollUp span {
    opacity: 0.5;
}

.mx_TopUnreadMessagesBar_close {
    float: right;
    padding-right: 14px;
    padding-top: 3px;
    cursor: pointer;
}

/*
Copyright 2016 OpenMarket Ltd

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

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

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_TopUnreadMessagesBar {
    margin: auto;  /* centre horizontally */
    max-width: 960px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.mx_TopUnreadMessagesBar_scrollUp {
    display: inline;
    cursor: pointer;
}

.mx_TopUnreadMessagesBar_scrollUp img {
    padding-left: 10px;
    padding-right: 31px;
    vertical-align: middle;
}

.mx_TopUnreadMessagesBar_scrollUp span {
    opacity: 0.5;
}

.mx_TopUnreadMessagesBar_close {
    float: right;
    padding-right: 14px;
    padding-top: 3px;
    cursor: pointer;
}

Fix horizontal alignment of top unread-messages bar


.valo .x-explorerview .v-tree-node-focused:after {
    opacity: 1;
    border: none;
    background-color: #e8e8e8;
    border-radius: 0;
}

.x-explorerview .v-tree-node img.v-icon {
    height: 21px;
    vertical-align: text-bottom;
}

Fix ugly focus on explorer Tree.

Fix ugly focus on explorer Tree.


@import "monokai.css";

.spacer {
  border: 1px solid red;
  height: 50px;
}

@import "monokai.css";

.spacer {
  height: 80px;
}

@media (max-width: 768px) {
  .spacer {
    height: 50px;
  }
}

Add a media query to the spacer class so that its size matches the
navbar size on different devices.

When the size is 768px or below, the size of the spacer class is reduced
from 80px to 50px.


/* for all pages should include this */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,600italic,300italic,300|Source+Serif+Pro|Source+Code+Pro:400,300,500&subset=latin,latin-ext);
body {
    font-smoothing: subpixel-antialiased !important;
    -webkit-font-smoothing: subpixel-antialiased !important;
    -moz-osx-font-smoothing: auto !important;
    text-shadow: 1px 1px 1.1px rgba(0, 0, 0, 0.004);
    /*text-rendering: optimizeLegibility;*/
    -webkit-overflow-scrolling: touch;
    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
    letter-spacing: 0.025em;
}
:focus, .focus {
    outline: none !important;
}
::-moz-focus-inner {
    border: 0 !important;
}

/* manual fix for bootstrap issue 14040, there is an unnecessary padding-right on modal open */
body.modal-open {
    overflow-y: auto;
    padding-right: 0 !important;
}

/* for all pages should include this */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,600italic,300italic,300|Source+Serif+Pro|Source+Code+Pro:400,300,500&subset=latin,latin-ext);
body {
    font-smoothing: subpixel-antialiased !important;
    -webkit-font-smoothing: subpixel-antialiased !important;
    -moz-osx-font-smoothing: auto !important;
    text-shadow: 1px 1px 1.2px rgba(0, 0, 0, 0.004);
    /*text-rendering: optimizeLegibility;*/
    -webkit-overflow-scrolling: touch;
    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
    letter-spacing: 0.025em;
}
:focus, .focus {
    outline: none !important;
}
::-moz-focus-inner {
    border: 0 !important;
}

/* manual fix for bootstrap issue 14040, there is an unnecessary padding-right on modal open */
body.modal-open {
    overflow-y: auto;
    padding-right: 0 !important;
}

Fix text might get cutoff again for IE and Edge series


.error {
    -fx-background-color: red;
}

.tag-selector {
    -fx-border-width: 1;
    -fx-border-color: white;
    -fx-border-radius: 3;
    -fx-background-radius: 3;
}

.tooltip-text {
    -fx-text-fill: white;
}

.error {
    -fx-background-color: red;
}

.list-cell:empty {
    /* Empty cells will not have alternating colours */
    -fx-background: white;
}

.tag-selector {
    -fx-border-width: 1;
    -fx-border-color: white;
    -fx-border-radius: 3;
    -fx-background-radius: 3;
}

.tooltip-text {
    -fx-text-fill: white;
}

Remove alternating coloring for blank PersonCard cells

Blank PersonCard are still created in the panel even though they have
no content. Normal formatting such as alternate row colors still apply
to these blank personcards. This can be easily observed by
increasing the window size and performing a search that only returns
one or two person cards.

Let's remove the alternating row colors for blank person card cells.


/* Hacking the logo */
.md-header__button.md-logo img, .md-header__button.md-logo svg, .md-nav__title .md-nav__button.md-logo img, .md-nav__title .md-nav__button.md-logo svg {
    width: auto;
    height: 2rem;
}

/* Hacking the navbar */
#demo {
    background-color: green;
    border-radius: 0.5rem;
}

.md-tabs__list {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    text-align: center;
}

.md-tabs__list > .md-tabs__item > * > * {
    padding: 0.3rem;
}

/* Hacking the tooltips */
a.annot {
    position: static;
}

a.annot:hover span.annottext {
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    overflow-wrap: break-word;
}

/* Sytling the splashpage */

.example-row {
    display: flex;
    align-items:center; /* also forces aspect ratio preservation */
}

.example-row > img {
    margin: 1rem;
    max-width: 65%; /* Don't let images hog *too* much space */
}

/* Hacking the logo */
.md-header__button.md-logo img, .md-header__button.md-logo svg, .md-nav__title .md-nav__button.md-logo img, .md-nav__title .md-nav__button.md-logo svg {
    width: auto;
    height: 2rem;
}

/* Hacking the navbar */
#demo {
    background-color: green;
    border-radius: 0.5rem;
}

.md-tabs__list {
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    text-align: center;
}

.md-tabs__list > .md-tabs__item > * > * {
    padding: 0.3rem;
}

/* Hacking the tooltips */
a.annot {
    position: static;
}

a.annot:hover span.annottext {
    position: absolute;
    width: 100%;
    left: 0;
    top: 100%;
    white-space: pre-wrap;
}

/* Sytling the splashpage */

.example-row {
    display: flex;
    align-items:center; /* also forces aspect ratio preservation */
}

.example-row > img {
    margin: 1rem;
    max-width: 65%; /* Don't let images hog *too* much space */
}

Fix tooltip wrapping on firefox

Fix tooltip wrapping on firefox

[skip ci]


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

.svg {
  z-index: calc(var(--zindex-portal) - 1);
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}

.connector {
  stroke: #2276fc;
  stroke-width: 2;
  pointer-events: all;
}

.dangerConnector {
  composes: connector;
  stroke: var(--state-danger-color);
}

.hasFocus {
  opacity: 1;
}

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

.svg {
  z-index: calc(var(--zindex-portal) - 1);
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}

.connector {
  stroke: #2276fc;
  stroke-width: 2;
  pointer-events: all;
  cursor: pointer;
}

.dangerConnector {
  composes: connector;
  stroke: var(--state-danger-color);
}

.hasFocus {
  opacity: 1;
}

Use pointer cursor for connector

[base] Use pointer cursor for connector


body {
  background: #eee;
  color: #444;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.5em;
  margin: 0 auto;
  padding: 20px;
  max-width: 600px;
}

.title {
  color: #000;
  font-weight: lighter;
  letter-spacing: 4px;
  text-align: center;
}

input, .result {
  color: #000;
  font-weight: bold;
}

input {
  background: transparent;
  border: none;
  border-bottom: 2px solid #0074d9;
  text-align: center;
  width: 75px;
}

.flow-icon {
  color: #000;
  font-size: 1.5em;
  text-align: center;
}

.card {
  background: white;
  border-radius: 3px;
  box-shadow: 0 1px 2px #aaa;
  margin: 1rem;
  padding: 1.5rem;
}

body {
  background: #eee;
  color: #444;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1.5em;
  margin: 0 auto;
  padding: 20px;
  max-width: 600px;
  text-align: center;
}

.title {
  color: #000;
  font-weight: lighter;
  letter-spacing: 4px;
}

input, .result {
  color: #000;
  font-weight: bold;
  text-align: center;
}

input {
  background: transparent;
  border: none;
  border-bottom: 2px solid #0074d9;
  width: 75px;
}

.flow-icon {
  color: #000;
  font-size: 1.5em;
}

.card {
  background: white;
  border-radius: 3px;
  box-shadow: 0 1px 2px #aaa;
  margin: 1rem;
  padding: 1.5rem;
  text-align: left;
}

Move the center align to the body

Move the center align to the body


html {
  background-size: cover;
  font-family: 'Montserrat', sans-serif;
  background-color: black;
}
h1{
  color: white;
  font-size: 500%;
  margin-left:27%;
  margin-top: 125px;
}

#title {
  color: white;
  font-size: 500%;
  margin-top: 25px;
  margin-right: 60%;
  margin-left: auto;
}

#portfolio {
  color: white;
  font-size: 125%;
  margin-top: 0px;
  margin-left: 1%;
}

#description {
  color: white;
  font-size: 225%;
  margin-right: 75%;
  margin-left: 25%;
}

.links {
  color: white;
  margin-right: 75%;
  margin-left: 25%;
  font-size: 150%
}

a:link {
  color: white;
  text-decoration: none;
}

a:visited {
  color: white;
}

a:hover {
  color: white;
  text-decoration: underline;
}

html {
  background-size: cover;
  font-family: 'Montserrat', sans-serif;
  background-color: black;
}
h1{
  color: white;
  font-size: 500%;
  margin-left: 27.85%;
  margin-top: 125px;
}

#title {
  color: white;
  font-size: 500%;
  margin-top: 25px;
  margin-right: 60%;
  margin-left: auto;
}

#description {
  color: white;
  font-size: 225%;
  margin-right: 75%;
  margin-left: 25%;
}

.links {
  color: white;
  margin-right: 75%;
  margin-left: 25%;
  font-size: 150%
}

a:link {
  color: white;
  text-decoration: none;
}

a:visited {
  color: white;
}

a:hover {
  color: white;
  text-decoration: underline;
}

Update spacing to universal views

Update spacing to universal views


.root {
  background-position: center center;
  background-size: cover;
  color: var(--color-white);
  position: relative;
  display: block;
}

.inner {
  vertical-align: middle;
  width: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-default);
  transition: all 200ms;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
}

.link:hover .overlay,
.link:focus .overlay {
  opacity: 0.6;
}

.center .inner {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: auto;
}

.root {
  background-position: center center;
  background-size: cover;
  color: var(--color-white);
  position: relative;
  display: block;
}

.inner {
  vertical-align: middle;
  width: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-default);
  transition: opacity 200ms;
  will-change: opacity;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
}

.link:hover .overlay,
.link:focus .overlay {
  opacity: 0.6;
}

.center .inner {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: auto;
}

Fix card animation glitch on Chrome and Opera

The opacity transition of the picture card is making the embedded svg glitchy.
Adding will-change: opacity should make it more stable.


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

.root {
  position: relative;
}

.menu {
  padding: var(--extra-small-padding) 0;
}

.menuItem {
  display: block;
  width: 100%;

  @nest & > span > span {
    justify-content: flex-start;
  }
}

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

.root {
  position: relative;
}

.menu {
  padding: var(--extra-small-padding) 0;
  max-height: calc(50vh - 6em);
  overflow: auto;
}

.menuItem {
  display: block;
  width: 100%;

  @nest & > span > span {
    justify-content: flex-start;
  }
}

Fix overflow in PT insert menu

[form-builder] Fix overflow in PT insert menu


/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/* Left-justify the MathJax preview in cell outputs. */
.jp-OutputArea-output.jp-RenderedLatex .MathJax_Preview .MJXp-display {
  padding: var(--jp-code-padding);
  text-align: left !important;
}

/* Left-justify the MathJax display equation in cell outputs. */
.jp-OutputArea-output.jp-RenderedLatex .MathJax_Display {
  padding: var(--jp-code-padding);
  text-align: left !important;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

/* Left-justify the MathJax preview in cell outputs. */
.jp-OutputArea-output.jp-RenderedLatex .MathJax_Preview .MJXp-display {
  padding: var(--jp-code-padding);
  text-align: left !important;
}

/* Left-justify the MathJax display equation in cell outputs. */
.jp-OutputArea-output.jp-RenderedLatex .MathJax_Display {
  text-align: left !important;
}

Remove extra padding from Mathjax display math.


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

body, html{
  height: 100%;
  width: 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

#nav{
  display: flex;
  align-self: flex-start;
  margin-left: auto;
  justify-content: space-around;
  width: 30%;
}

.form{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 50%;
}

.page-header{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 25%;
  background-color: gray;
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

body, html{
  height: 100%;
  width: 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

#nav{
  display: flex;
  align-self: flex-start;
  margin-left: auto;
  justify-content: space-around;
  width: 30%;
}

.form{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 50%;
}

.page-header{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 25%;
  background-color: gray;
}

Update CSS for .page-header{} justify-content from row to column


* {
  margin: 0;
  padding: 0;
  color: red;
}

body {
  color: #878787;
  margin: 0;
}

header {
  background-color: orange;
}

h1 {
  font-size: 90px;
  color: white;
}

h2 {
  font-size: 53px;
}

h3 {
  font-size: 20px;
  color: #48525c;
}

Add first true CSS rules

Add first true CSS rules


amp-story-grid-layer[template="fill"] .wp-block-image { margin: 0; }

.has-background {
	padding: 10px !important;
}

amp-story-grid-layer > * {
	width: auto !important;
}

Improve CSS for elements with background color


#mailboxlist-title {
	display:none;
}
#mailboxlist ul {
	border-top: 1px #555 solid !important;
}

#mailboxlist li.selected {
	background: #333;
}
#mailboxlist li a, #mailboxlist li div {
	margin-left: -10px;
}
#mailboxlist li a {

}

#taskbar {
	background: transparent;
}

#taskbar a {
	color: #eeeeee;
}

#mailboxlist-content {
	top: 0;
}

#searchfilter {
	color: #CCC;
}

body.login {
    background: url(images/fredsted-background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#messagetoolbar {
left: 180px;
}

.splitter {
background: url(images/handle.png) center no-repeat;
}

.splitter-v {
background: url(images/handlev.png) center no-repeat;
}

#mailboxlist-title {
	display:none;
}
#mailboxlist ul {
	border-top: 1px #555 solid !important;
}

#mailboxlist li.selected {
	background: #333;
}
#mailboxlist li a, #mailboxlist li div {
	margin-left: -10px;
}
#mailboxlist li a {

}

#taskbar {
	background: transparent;
}

#taskbar a {
	color: #eeeeee;
}

#mailboxlist-content {
	top: 0;
}

#searchfilter {
	color: #CCC;
}

body.login {
    background: url(images/fredsted-background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#compose-attachments {
position: absolute;
top: 0;
left: auto;
right: 0;
bottom: 0;
border: 1px solid #999;
background-color: #F9F9F9;
}

#compose-div {
	top:110px;
}

#messagetoolbar {
left: 180px;
}

#mailpreviewframe {
	background: transparent!important;
	border: none;
}

.splitter {
background: url(images/handle.png) center no-repeat;
}

.splitter-v {
background: url(images/handlev.png) center no-repeat;
}

Fix email message window not showing

Fix email message window not showing


html{
  background: url("../img/rock_paper_scissors_by_smashmethod.jpg") no-repeat fixed center center / cover;
  margin: 0;
  padding: 0;
}

h1 {
  font-family: 'Satisfy', cursive;
}

p {
  display: none;
  /*color: white;
  font-family: 'Satisfy', cursive;*/
}

@media (min-width: 768px) {

p{
  display: block;
  color: white;
  font-family: 'Satisfy', cursive;
}

@media (min-width: 992px) {
  }

html{
  background: url("../img/rock_paper_scissors_by_smashmethod.jpg") no-repeat fixed center center / cover;
  margin: 0;
  padding: 0;
}

h1 {
  font-family: 'Satisfy', cursive;
  font-size: 140%;
  text-align: center;
  color: yellow;
}

p {
  display: none;
  /*color: white;
  font-family: 'Satisfy', cursive;*/
}

@media (min-width: 768px) {

p{
  display: block;
  color: white;
  font-family: 'Satisfy', cursive;
  font-size: 160%;
}

@media (min-width: 992px) {
  }

Add color to H1 and P

Add color to H1 and P


.top-selection{
    padding-bottom:20px;
}

div.block{
    padding:20px;
}

div#form_agent label,
div#form_nb label{
    display:inline-block;
    margin-right: 20px;
}

path.domain{
    stroke:black;
    fill:none;
}

line.tick{
    stroke:black;
}

.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
      stroke-width: 0;
}

rect{
    stroke:black;
    fill:none;
}

.top-selection{
    padding-bottom:20px;
}

.table th.text-right,
.table td.text-right{
    text-align:right;
}

div.block{
    padding:20px;
}

div#form_agent label,
div#form_nb label{
    display:inline-block;
    margin-right: 20px;
}

path.domain{
    stroke:black;
    fill:none;
}

line.tick{
    stroke:black;
}

.grid .tick {
    stroke: lightgrey;
    opacity: 0.7;
}
.grid path {
      stroke-width: 0;
}

rect{
    stroke:black;
    fill:none;
}

Align load time column to the right

Align load time column to the right


/*
Theme Name: Simple Cozy
Theme URI: http://fredollinger.com
Description: Simple Relaxed Look
Version: .001
Author: Fred Ollinger
Author URI: http://fredollinger.com
*/

*{ margin:0; padding:0; }
body { background: #800000; font-family: Helvetica, Arial, sans-serif; font-size: 100%; color: #f5deb3; }
a:link, a:visited {	color: #fff; text-decoration: underline; }
a:hover, a:active { color: #c9c200; text-decoration: underline; }
ul { list-style: circle; }
img { border: none; }
label { margin-left: 0px; }
blockquote { margin: 0px 5px 10px 5px; padding: 10px 10px 1px 10px; font-style: italic; border: 1px solid #ddd; background-color: #f3f3f3; }
span.left { float: left; }
span.right { float: right; }
.clearer { clear: both; }
.aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; }
.alignright { float: right; }
#who { position:absolute; top:30%; height:10em; text-indent:50px;}

Move theme to where it's found.

Move theme to where it's found.


.pull-right {
    float: right!important
}

.views {
    max-width: 600px;
    margin: 0 auto;
}

.icon {
    color: #444;
    font-size: 22px;
    width: 30px;
    text-align: center;
}

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

.login-spacer {
    height: 20%;
}

.navbar {
    background-color: #fff;
}

.pull-right {
    float: right!important
}

.views {
    max-width: 800px;
    margin: 0 auto;
}

.icon {
    color: #444;
    font-size: 22px;
    width: 30px;
    text-align: center;
}

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

.login-spacer {
    height: 20%;
}

.navbar {
    background-color: #fff;
}

Fix landscape mode for iPhone 6

Fix landscape mode for iPhone 6


div#body, div#body * {
    font-family: 'Source Sans Pro', sans-serif;
    /*font-weight: 400;*/
}

.navbar {
    min-height: 0px;
    height: 30px;
}

.nav > li > a {
    font-size: 15px !important;
    padding: 5px 15px !important;
}

.dropdown-menu > li > a {
    font-size: 12px !important;
}

.border-rounded {
    border-radius: 4px;
    border: 1px solid #AAAAAA;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 5px;
}

button.border-rounded {
    background-color: white;
}

div#body, div#body * {
    font-family: 'Source Sans Pro', sans-serif;
    /*font-weight: 400;*/
}

.navbar {
    min-height: 0px;
    height: 40px;
}

.nav > li > a {
    font-size: 20px !important;
    padding: 10px 20px !important;
}

.dropdown-menu > li > a {
    font-size: 15px !important;
}

.border-rounded {
    border-radius: 4px;
    border: 1px solid #AAAAAA;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 5px;
}

button.border-rounded {
    background-color: white;
}

Fix the navbar size for real

Fix the navbar size for real


#ember-testing-container {
  position: fixed;
  background: white;
  bottom: 0;
  right: 0;
  width: 640px;
  height: 384px;
  overflow: auto;
  z-index: 9999;
  border: 1px solid #ccc;
  transform: translateZ(0);
}
#ember-testing {
  zoom: 50%;
}

#ember-testing-container {
  position: fixed;
  background: white;
  bottom: 0;
  right: 0;
  width: 640px;
  height: 384px;
  overflow: auto;
  z-index: 9999;
  border: 1px solid #ccc;

  /* Prevent leaking position fixed elements outside the testing container */
  transform: translateZ(0);
}
#ember-testing {
  zoom: 50%;
}

Add code comment explaining why the CSS transform is there


@import url("normalize.css");
@import url("root.css");
@import url("base.css");
@import url("header.css");
@import url("nav.css");
@import url("main-section.css");
@import url("footer.css");

/* Import Component CSS */
@import url("buttons.css");
@import url("cards.css");
@import url("forms.css");
@import url("accordion.css");
@import url("tabs.css");
@import url("table.css");
@import url("lists.css");
@import url("speech.css");

@import url("normalize.css");
@import url("root.css");
@import url("base.css");
@import url("header.css");
@import url("nav.css");
@import url("main-section.css");
@import url("footer.css");
@import url("code.css");

/* Import Component CSS */
@import url("buttons.css");
@import url("cards.css");
@import url("forms.css");
@import url("accordion.css");
@import url("tabs.css");
@import url("table.css");
@import url("lists.css");
@import url("speech.css");

UPDATE - add import to code.css

UPDATE - add import to code.css


.palette-box {
    width: 100%;
    height: 60px;
    padding: 5%;
}
.container-full .jumbotron {
    background-color: rgba(0, 0, 0, 0);
    color: #FFF;
}
.container-full {
    background: #204762;
}

#side-menu .affix {
    width: 200px;
    top: 10px;
}

Add container and affix support

Add container and affix support


:root {
  --thickness: 1em;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

#loader {
  border: var(--thickness) solid #f3f3f3;
  border-radius: 50%;
  border-top: var(--thickness) solid rgb(53, 168, 83);
  border-right: var(--thickness) solid rgb(251, 188, 1);
  border-bottom: var(--thickness) solid rgb(234, 67, 53);
  border-left: var(--thickness) solid rgb(66, 133, 244);
  width: 3em;
  height: 3em;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

:root {
  --thickness: 1vmax;
  --diameter: 3vmax;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

#loader {
  border-radius: 50%;
  border: var(--thickness) solid #f3f3f3;
  border-top: var(--thickness) solid rgb(53, 168, 83);
  border-right: var(--thickness) solid rgb(251, 188, 1);
  border-bottom: var(--thickness) solid rgb(234, 67, 53);
  border-left: var(--thickness) solid rgb(66, 133, 244);
  width: var(--diameter);
  height: var(--diameter);
  animation: spin 4s linear infinite;
}

#loading-text {
  font-size: 1.3vmax;
  letter-spacing: 0.025em;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Fix loading size for big screens and portrait mode


.btn {
  display: block;
  width: 100%;
}

#label {
  color: #90A4AE;
  font-weight: lighter;
  font-size: 1.5em;
}

#satu {
  color: #000;
  background-color: #FEF5CB;
  border-color: #FEF5CB;
}

#dua {
  color: #000;
  background-color: #FAF27A;
  border-color: #FAF27A;
}

#tiga {
  color: #000;
  background-color: #FEF086;
  border-color: #FEF086;
}

#empat {
  color: #000;
  background-color: #FFEB03;
  border-color: #FFEB03;
}

#lima {
  color: #000;
  background-color: #FFBF4C;
  border-color: #FFBF4C;
}

#enam {
  color: #fff;
  background-color: #F78C2B;
  border-color: #F78C2B;
}

#tujuh {
  color: #fff;
  background-color: #D17D35;
  border-color: #D17D35;
}

#delapan {
  color: #fff;
  background-color: #A15C22;
  border-color: #A15C22;
}

.btn {
  display: block;
  width: 100%;
}

.jumbotron {
  background-color: #fff;
}

#label {
  color: #90A4AE;
  font-weight: lighter;
  font-size: 1.5em;
}

#satu {
  color: #000;
  background-color: #FEF5CB;
  border-color: #FEF5CB;
}

#dua {
  color: #000;
  background-color: #FAF27A;
  border-color: #FAF27A;
}

#tiga {
  color: #000;
  background-color: #FEF086;
  border-color: #FEF086;
}

#empat {
  color: #000;
  background-color: #FFEB03;
  border-color: #FFEB03;
}

#lima {
  color: #000;
  background-color: #FFBF4C;
  border-color: #FFBF4C;
}

#enam {
  color: #fff;
  background-color: #F78C2B;
  border-color: #F78C2B;
}

#tujuh {
  color: #fff;
  background-color: #D17D35;
  border-color: #D17D35;
}

#delapan {
  color: #fff;
  background-color: #A15C22;
  border-color: #A15C22;
}

Set jumbotron background color to white

Set jumbotron background color to white


html {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  @apply --font-smoothing-antialiased;
}

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

:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

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

figure {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dd,
dt,
ul li,
ol li,
blockquote,
cite,
.field,
fieldset,
label,
input,
textarea,
.select,
.control,
progress {

  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

html {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  @apply --font-smoothing-antialiased;
}

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

:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

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

figure {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dd,
dt,
ul li,
ol li,
figcaption,
blockquote,
cite,
.field,
fieldset,
label,
input,
textarea,
.select,
.control,
progress {

  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

Remove margin on `figcaption` element for `:first-child` and `:last-child`


/* cut down version of colorpicker/css/layout.css for Tiki 7 */

.colorSelector {
	position: relative;
	width: 36px;
	height: 36px;
	background: url(../../jquery/colorpicker/images/select.png);
}
.colorSelector div {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 30px;
	height: 30px;
	background: url(../../jquery/colorpicker/images/select.png) center;
}

.colorpicker {
	z-index: 1010;	/* to appear over jqui dialogs */
}

/* cut down version of colorpicker/css/layout.css for Tiki 7 */

.colorSelector {
	position: relative;
	width: 36px;
	height: 36px;
	background: url(../../jquery/colorpicker/images/select.png);
}
.colorSelector div {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 30px;
	height: 30px;
	background: url(../../jquery/colorpicker/images/select.png) center;
}

.colorpicker {
	z-index: 1500;	/* to appear over jqui dialogs */
}

[FIX] themegen: Make sure colorpicker appears in front of dialog

git-svn-id: a7fabbc6a7c54ea5c67cbd16bd322330fd10cc35@32407 b456876b-0849-0410-b77d-98878d47e9d5


/* Limit width of commit title to 72 characters */
.rgh-monospace-textareas #merge_title_field,
.rgh-monospace-textareas #commit-summary-input {
	width: calc(72ch + 18px);
}

.rgh-monospace-textareas #merge_title_field,
.rgh-monospace-textareas #commit-summary-input,
.rgh-monospace-textareas textarea {
	font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;
}

.rgh-monospace-textareas textarea {
	font-size: 13px;
}

/* Limit width of commit title to 72 characters */
.rgh-monospace-textareas #merge_title_field,
.rgh-monospace-textareas #commit-summary-input {
	width: calc(72ch + 18px);
	max-width: 100%;
}

.rgh-monospace-textareas #merge_title_field,
.rgh-monospace-textareas #commit-summary-input,
.rgh-monospace-textareas textarea {
	font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;
}

.rgh-monospace-textareas textarea {
	font-size: 13px;
}

Fix bleeding field on the "Ddit file" commit form

https://user-images.githubusercontent.com/1402241/77678157-0ac75c80-6f91-11ea-88be-c7278be3222e.png


img {
    box-shadow: 0px -7px 3px -3px rgb(176, 173, 171);
    border-radius: 5px;
}

img {
    box-shadow: 1px -5px 3px -3px rgb(176, 173, 171);
    border-radius: 5px;
}

Fix Shadow Box Video Baneer

[GS] Fix Shadow Box Video Baneer


/*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%;
}

/*h1 {
  color: pink;
}*/

.filter-box {
  width: 100%;
  padding-top: 2vh;
  height: 100vh;
  background-color: #263238;
  color: rgba(255, 255, 255, 0.87);
  overflow: scroll;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

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

Add box shadow to filter

Add box shadow to filter


.header-button { float: right }
.order-buttons { margin-right: 10px }
.mat-icon-button { width: 30px }
.reorder-icon { vertical-align: middle; padding-right: 10px }
.app-mat-list .mat-list-item { height: auto; min-height: 40px; }
.mat-list-item app-objective { padding-bottom: 15px; }

Improve spacing of multi-line objectives


/* customr css and js files included at the top level of your presentation will
 * will be included in your presentation */

.title-slide h1 {
  color: blue;
}

/* custom css and js files included at the top level of your presentation will
 * will be included in your presentation */

.title-slide h1 {
  color: blue;
}

Fix a typo in a comment. s/customr/custom/


/* GENERAL */
html {
	font-size: 62.5%;
}

/* SVG LOGO */
svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 20rem;
}

.up {
  opacity: 1;
  animation: fade 2s infinite;
}

@keyframes fade {
  0%,100% { opacity: 0 }
  50% { opacity: 1 }
}

Create the main CSS file

Create the main CSS file


* {
    box-sizing: border-box;
}

blockquote {
    border-left: 1px solid #c3c9c9;
}

blockquote, blockquote p {
    font-size: 1rem;
}

cite:before {
    content: '\2014 \00A0';
}

dt {
    font-weight: bold;
}

dd {
    margin-left: 0;
}

* {
    box-sizing: border-box;
}

blockquote {
    border-left: var(--border-width) solid var(--border-color);
}

blockquote, blockquote p {
    font-size: 1rem;
}

cite:before {
    content: '\2014 \00A0';
}

dt {
    font-weight: bold;
}

dd {
    margin-left: 0;
}

Use vars in blockquote border

Use vars in blockquote border


* {
	box-sizing: border-box;
}

html {
	color: #333;
	font-family: Verdana, sans-serif;
	line-height: 1.4;
}

body {
	max-width: 70ch;
	margin: 0 auto;
	padding: 0.5em;
}

a,
a:visited {
	color: inherit;
}

dd {
	margin-left: 4ch;
}

@media print {
	html {
		font-size: 12px;
		color: #333;
	}

	body {
		max-width: none;
		margin: 0;
	}

	h1 {
		margin-top: 0;
	}
}

@media (max-width: 600px) {
	dd {
		margin-left: 2ch;
	}
}

@media (prefers-color-scheme: dark) {
	html {
		color: #ddd;
		background-color: #333;
	}
}

* {
	box-sizing: border-box;
}

html {
	color: #333;
	font-family: Verdana, sans-serif;
	line-height: 1.4;
}

body {
	max-width: 70ch;
	margin: 0 auto;
	padding: 0.5em;
}

a,
a:visited {
	color: inherit;
}

dd {
	margin-left: 4ch;
}

@media print {
	html {
		font-size: 12px;
		color: #333;
	}

	body {
		max-width: none;
		margin: 0;
	}

	h1 {
		margin-top: 0;
	}

	a {
		text-decoration: none;
	}
}

@media (max-width: 600px) {
	dd {
		margin-left: 2ch;
	}
}

@media (prefers-color-scheme: dark) {
	html {
		color: #ddd;
		background-color: #333;
	}
}

Hide underline on <a> when printing

Hide underline on <a> when printing


#footer .dev {
    float: right;
}
.enable-profiling {
    font-family: "Times New Roman";
    font-size: 20pt;
    line-height: 17pt;
}
.measure {
    background-color: #c44;
    color: white;
    padding: 7px;
    border-radius: 5px;
    animation: debug-pulse 1s infinite;
}
.profiling-form {
    display: none;
}
@keyframes debug-pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

Move pi button to the right

Move pi button to the right


.select-list {
  position: absolute;
  width: 80%;
  top: 0;
  left: 50%;
  margin-left: -40%;
  background-color: #444;
  box-sizing: border-box;
  color: #eee;
  -webkit-box-shadow: 0 0 5px 5px #222;
  padding: 5px;
  z-index: 99;
}

.select-list .editor {
  margin-bottom: 5px;
}

.select-list ol {
  position: relative;
  overflow-y: auto;
}

.select-list li:hover {
  background-color: #555;
}

.select-list ol .selected {
  background: green;
}

.select-list .error {
  padding-top: 5px;
  font-weight: bold;
}

.select-list {
  position: absolute;
  width: 80%;
  top: 0;
  left: 50%;
  margin-left: -40%;
  background-color: #444;
  box-sizing: border-box;
  color: #eee;
  -webkit-box-shadow: 0 0 5px 5px #222;
  padding: 5px;
  z-index: 99;
  cursor: pointer;
}

.select-list .editor {
  margin-bottom: 5px;
}

.select-list ol {
  position: relative;
  overflow-y: auto;
}

.select-list li:hover {
  background-color: #555;
}

.select-list ol .selected {
  background: green;
}

.select-list .error {
  padding-top: 5px;
  font-weight: bold;
}

Use pointer cursor for package manager

Use pointer cursor for package manager


html, body {
  font: 13px Helvetica Neue, Lucida Grande, sans-serif;
  height: 100%;
  margin: 0;
  background: rgb(236, 236, 236);
}

/* MARK: - Editor */

.editor {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  height: 100%;
}

.layers-panel {
  width: 200px;
}
.canvas {
  -webkit-flex: 1;
  background: rgb(242, 242, 242);
}
.inspector-panel {
  width: 200px;
}

html, body {
  font: 13px Helvetica Neue, Lucida Grande, sans-serif;
  height: 100%;
  margin: 0;
  background: rgb(236, 236, 236);
}

/* MARK: - Editor */

.editor {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  height: 100%;
}

.layers-panel {
  width: 215px;
}
.canvas {
  -webkit-flex: 1;
  background: rgb(242, 242, 242);
}
.inspector-panel {
  width: 215px;
}

Make the panels a bit wider

Make the panels a bit wider


/* Create room for header */
body.page {
  padding-top: 70px;
}

.page-header, .page-header h1 {
  margin-top: 0px;
}

footer {
  margin-top: 20px;
}

/* Remove gradient on carousel (ugly when small) */
.carousel-control.left, .carousel-control.right {
  background: none !important;
  filter: progid: none !important;
  outline: 0;
 }
.carousel .carousel-control {
  visibility: hidden;
}
.carousel:hover .carousel-control {
  visibility: visible;
}

/* Higher contrast link color. */
a {
  color: #2C679B;
}

Change link color for better contrast

Change link color for better contrast


html {
	display: flex;
}

.cell {
	box-shadow: 1px 1px 3px;
	border-radius: 5px;
}

div.progress {
	display: flex;
	flex-direction: row;
	align-items: center;
}

div.badge {
	width: 100px;
	height: 70px;
	margin: 10px;

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

div.badge > img {
	height: 90%;
}

span {
	color: white;
	font-weight: bold;
	text-shadow: black 0px 0px 5px;
}

input {
	max-width: 50px;
}

.cell {
	box-shadow: 1px 1px 3px;
	border-radius: 5px;
}

div.progress {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
}

div.badge {
	width: 100px;
	height: 70px;
	margin: 10px;

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

div.badge > img {
	height: 90%;
}

span {
	color: white;
	font-weight: bold;
	text-shadow: black 0px 0px 5px;
}

input {
	max-width: 50px;
}

Modify css for suitable iframing

Modify css for suitable iframing


.ui-slider .ui-slider-handle{
	background: #5bc0de;
	border: none;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

Add some css for a multilevel dropdown menu


body{
    font-family: monospace;
    font-size: 16px;
}

h1{
    text-align: center;
}

.test-holder{
    background-color:#E7E7E7;
    display: flex;
    flex-direction: row;
    min-height:150px;
    margin:10px 5px;
    padding:5px;
    max-width: 100%;
    flex-wrap: wrap;
}
.test-holder > *{
    background-color:#C7C7C7;
    margin:10px;
    padding:10px;
    word-wrap: break-word;
    flex:1;
    overflow:scroll;
}
.test-function, .test-expected, .test-output{
    flex:1;
}
.test-result{
    width:100px
}

.label{
    font-size: 80%;
    font-weight: 700;
    margin-bottom:7px;
}

@media (max-width: 900px) {
    .test-holder > *{
        min-width:250px;
        max-width:100%;
    }
}

Make returns in CSS consistent

Make returns in CSS consistent


div.col-md-9 h1:first-of-type {
    text-align: center;
    font-size: 60px;
    font-weight: 300;
    margin-top: 0;
}

div.col-md-9 p:first-of-type {
    text-align: center;
}

.badges {
    text-align: right;
}

.badges a {
    display: inline-block;
}

.badges a img {
    padding: 0;
    margin: 0;
}

body.homepage div.col-md-9 h1:first-of-type {
    text-align: center;
    font-size: 60px;
    font-weight: 300;
    margin-top: 0;
}

body.homepage div.col-md-9 p:first-of-type {
    text-align: center;
}

body.homepage .badges {
    text-align: right;
}

body.homepage .badges a {
    display: inline-block;
}

body.homepage .badges a img {
    padding: 0;
    margin: 0;
}

Apply styles only in homepage

Apply styles only in homepage


/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/
/*
When drag events occur, `p-mod-override-cursor` is added to the body.
Because iframes steal all cursor events, the following two rules are necessary
to suppress pointer events while resize drags are occuring. There may be a
better solution to this problem.
*/
body.p-mod-override-cursor .jp-IFrame {
  position: relative;
}

body.p-mod-override-cursor .jp-IFrame:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-IFrame {
  width: 100%;
  height: 100%;
}

/*
When drag events occur, `p-mod-override-cursor` is added to the body.
Because iframes steal all cursor events, the following two rules are necessary
to suppress pointer events while resize drags are occuring. There may be a
better solution to this problem.
*/
body.p-mod-override-cursor .jp-IFrame {
  position: relative;
}

body.p-mod-override-cursor .jp-IFrame:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
}

Make IFrames take up the whole space available.


:--root {
  /* Colors */
  --color-text-secondary: #888;

  /* Typography */
  --text-size-rem-small: 0.6875;
  --letter-spacing: 0.5px;

  /* Spacing */
  --baseline-measure-rem: 1.5rem;
}

/* PostCSS Custom Media Queries */

@custom-media --large-viewport (min-width: 45.625em);

build(Elife): Change to use PostCSS Custom Media Queries


Fix scrolling in inspector content.

Fix scrolling in inspector content.


body {
  padding: 0;
  border: 0;
  margin: 0;
}
#div-container-for-title-and-board {
  background-color: black;
}
#div-title-west {
  background-color: cyan;
  display: none;
}
#div-title-north {
  background-color: blue;
}
#div-board-area {
  background-color: grey;
  display: inline;
}
#div-info-south {
  background-color: red;
}
#div-info-east {
  background-color: pink;
  display:none;
}
#button-logo-west{
  width: 10%;
}
#button-new-game-west{
  width: 10%;
}
#button-full-screen-west{
  width: 10%;
}
#button-logo-north{
  height: 10%;
}
#button-new-game-north{
  height: 10%;
}
#button-full-screen-north{
  height: 10%;
}

body {
  padding: 0;
  border: 0;
  margin: 0;
}
#div-container-for-title-and-board {
  background-color: black;
}
#div-title-west {
  background-color: cyan;
  display: none;
}
#div-title-north {
  background-color: blue;
}
#div-board-area {
  background-color: grey;
  display: inline;
}
#div-info-south {
  background-color: red;
}
#div-info-east {
  background-color: pink;
  float: right;
  display:none;
}
#button-logo-west{
  width: 10%;
}
#button-new-game-west{
  width: 10%;
}
#button-full-screen-west{
  width: 10%;
}
#button-logo-north{
  height: 10%;
}
#button-new-game-north{
  height: 10%;
}
#button-full-screen-north{
  height: 10%;
}

Make east info float right

Make east info float right


@import url(//fonts.googleapis.com/earlyaccess/cwtexming.css);
@import url(//fonts.googleapis.com/css?family=Open+Sans);

.navigation {
  font-size: 1.5em;
}
.navigation a {
  text-decoration: none;
  color: #999;
}
.navigation a:hover {
  text-decoration: underline;
}
.navigation a.active {
  color: #000;
  font-weight: bold;
}
.rd.wrapper {
  padding: 15px;
}
ul li,
ol li {
  font-size: 1.25em;
  line-height: 1.6em;
  font-family: 'Open Sans', 'cwTeXMing', serif;
}

Add style of ul and ol

Add style of ul and ol


/* Display Order */

.screen-bg {
	z-index : 0;
}

.screen-scene {
	z-index: 1;
}

.screen-character {
	z-index: 2;
}

.dialog-dialogmode {
	z-index: 3;
}

.dialog-novelmode {
	z-index: 4;
}

.dialog-menu {
	z-index: 5;
}

.screen-start {
	z-index: 6;
}

/* Display Order */

.screen-bg {
	z-index : 0;
}

.screen-scene {
	z-index: 1;
}

.screen-character {
	z-index: 2;
}

.dialog-dialogmode {
	z-index: 3;
}

.dialog-novelmode {
	z-index: 4;
}

.dialog-menu,
.dialog-input {
	z-index: 5;
}

.screen-start {
	z-index: 6;
}

Add input dialog container css

Add input dialog container css


header .header_links {
    display: none !important;
}

#page {
    min-height: 0 !important;
}

#page_contents {
    padding-bottom: 0 !important;
}

#page_contents > .align_center:last-child {
    display: none !important;
}

#menu #add_team {
    display: none !important;
}

#menu #logout {
    display: none !important;
}

#menu_items > .divider:nth-last-child(2) {
    display: none !important;
}

/* Clean up unnecessary elements from 'Sign In' pages. */

header .header_links {
    display: none !important;
}

#page {
    min-height: 0 !important;
}

#page_contents {
    padding-bottom: 0 !important;
}

#page_contents > .align_center:last-child {
    display: none !important;
}

/* Remove Switch Team & Logout menu items. */

#menu #add_team {
    display: none !important;
}

#menu #logout {
    display: none !important;
}

#menu_items > .divider:nth-last-child(2) {
    display: none !important;
}

Add comments to CSS overrides for clarity


* {
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
}

#side-panel {
	border-style: solid;
	width: 350px;
	float: left;
	overflow-y: scroll;
    background-image: url("concrete_seamless.png");
}

#side-panel img {
	width: 100px;
	margin: 10px;
}

i {
    font-family: inherit;
}

h1, h2 {
	font-family: 'MedievalSharp', cursive;
}

.vertex circle {
    cx: 0;
	cy: 0;
	r: 4;
}

.vertex * {
	cursor: pointer;
}

.vertex.tac text {
	text-anchor: end;
}

.vertex.asoiaf text {
	text-anchor: start;
}

.vertex.selected text {
	font-weight: bold;
}

line.edge {
	stroke: black;
	opacity: .25;
	stroke-width: 2px;
	pointer-events: none;
}

line.edge.active {
	opacity: 1;
	pointer-events: auto;
}

line.edge.active.selected {
	stroke-width: 4px;
}

* {
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
}

#side-panel {
	border-style: solid;
	width: 350px;
	float: left;
	overflow-y: scroll;
    background-image: url("concrete_seamless.png");
}

#side-panel img {
	width: 100px;
	padding-left: 10px;
	padding-right: 10px;
}

i {
    font-family: inherit;
}

h1, h2 {
	font-family: 'MedievalSharp', cursive;
}

.vertex circle {
    cx: 0;
	cy: 0;
	r: 4;
}

.vertex * {
	cursor: pointer;
}

.vertex.tac text {
	text-anchor: end;
}

.vertex.asoiaf text {
	text-anchor: start;
}

.vertex.selected text {
	font-weight: bold;
}

line.edge {
	stroke: black;
	opacity: .25;
	stroke-width: 2px;
	pointer-events: none;
}

line.edge.active {
	opacity: 1;
	pointer-events: auto;
}

line.edge.active.selected {
	stroke-width: 4px;
}

Adjust margins in side panel

Adjust margins in side panel


#main > h2 + div, #main > h2 + h3, #main > h3 + div {
	display: block;
}

.loading-content {
	display: none;
}

#main > h2 + div, #main > h3 + div {
	display: block;
}

#main > h2 + h3 {
	display: flex;
}

Fix rustdoc display with js disabled

Fix rustdoc display with js disabled


.root {
  padding: 0 10px 10px;
  flex: 1;
  min-width: 20em;
  whitespace: no-wrap;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
}

.content {
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  border-radius: 3px;
  padding: 20px;
  overflow-y: auto;
  background: #fff;
  height: 480px;
  flex: 1;
}

@-moz-document url-prefix() {
  .content {
    height: 490px;
    flex: none;
  }
}

.heading {
  margin: 0;
  padding: 0 20px;
}

.icon {
  margin-right: 15px;
}

.item {
  border-bottom: 1px solid #eee;
  padding: 5px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.root {
  padding: 0 10px 10px;
  flex: 1;
  min-width: 20em;
  whitespace: no-wrap;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
}

.content {
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  border-radius: 3px;
  padding: 20px;
  overflow-y: auto;
  height: 480px;
  flex: 1;
  background-color: rgba(255, 255, 255, 0.4);
}

@-moz-document url-prefix() {
  .content {
    height: 490px;
    flex: none;
  }
}

.heading {
  margin: 0;
  padding: 0 20px;
}

.icon {
  margin-right: 15px;
}

.item {
  border-bottom: 1px solid #eee;
  padding: 5px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

Edit alpha of the frontpage feed

Edit alpha of the frontpage feed