/*
Theme Name:         MakeICT
Theme URI:          http://makeict.org
Description:        WordPress theme for the MakeICT organization website.
Version:            1.0.0
Author:             MakeICT
Author URI:         http://makeict.org/

License:            MIT License
License URI:        http://opensource.org/licenses/MIT
*/

/* For navbar! */
body { padding-top: 50px; }

.navbar { background: white; }

.navbar-brand {
  text-indent: -9999px;
  background: url(assets/images/logo.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 5px;
  width: 260px;
  margin-left: 0 !important;
  height: 65px;
}

.footer {
  padding-bottom: 40px;
}
.footer iframe {
  width: 100%;
  height: 300px
}

/*.feature {*/
/*  background: url(*/
/*}*/

/*
Theme Name:         MakeICT
Theme URI:          http://makeict.org
Description:        WordPress theme for the MakeICT organization website.
Version:            1.0.0
Author:             MakeICT
Author URI:         http://makeict.org/

License:            MIT License
License URI:        http://opensource.org/licenses/MIT
*/

/* For navbar! */
body { padding-top: 50px; }

.navbar { background: white; }

.navbar-brand {
  text-indent: -9999px;
  background: url(assets/images/logo.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 5px;
  width: 260px;
  margin-left: 0 !important;
  height: 65px;
}

.footer {
  padding-bottom: 40px;
}
.footer iframe {
  width: 100%;
  height: 300px
}

.icon-bar { background: #000; }

/*.feature {*/
/*  background: url(*/
/*}*/

Make menu toggle for mobile visible

Make menu toggle for mobile visible


.Attribution {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1000;
    padding: 4px 2px;
}

.Attribution a,
.Attribution span {
    color: white;
    text-decoration: none;
    margin: 0 2px;
}

.Attribution {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1000;
    padding: 4px 2px;
}

.Attribution a,
.Attribution span {
    color: white;
    text-decoration: none;
    margin: 0 2px 4px;
}

.Attribution a:hover {
    color: rgb(53, 175, 109);
}

Tweak margins, add hover styles

Tweak margins, add hover styles


.sc-context-menu {
  position: absolute;
  background: var(--t-background-color);
  border-radius: var(--t-border-radius);
  font-size: var(--t-small-font-size);
  z-index: 1000;
  box-shadow: var(--t-default-box-shadow);
}

.sc-context-menu.sm-hidden {
  /* we don't use display none because we want to determine the content's width */
  visibility: hidden;
  left: 0px;
  top: 0px;
}

.sc-context-menu {
  position: absolute;
  background: var(--t-background-color);
  border-radius: var(--t-border-radius);
  font-size: var(--t-small-font-size);
  z-index: 1000;
  box-shadow: var(--t-default-box-shadow);
  padding: 4px;
}

.sc-context-menu.sm-hidden {
  /* we don't use display none because we want to determine the content's width */
  visibility: hidden;
  left: 0px;
  top: 0px;
}

Add a padding to context menu.

Add a padding to context menu.


body {
	padding-top: 50px;
	padding-bottom: 20px;
}

img.avatar-small {
	width: 24px;
	height: 24px;
}

img.avatar-medium {
	width: 48px;
	height: 48px;
}

.mentor-label {
	display: inline-block;
	margin-right: 3px;
}

body {
	padding-top: 50px;
	padding-bottom: 20px;
}

img.avatar-small {
	width: 24px;
	height: 24px;
}

img.avatar-medium {
	width: 48px;
	height: 48px;
}

.mentor-label {
	display: inline-block;
	margin-right: 1px;
}

Change margin-right to 1px so the tags are a bit closer to each other, but still have some space.


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

.jupyter-widgets-disconnected::before {
  content: '\f127'; /* chain-broken */
  display: inline-block;
  font: normal normal 900 14px/1px 'Font Awesome 5 Free';
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #d9534f;
  padding: 3px;
  align-self: flex-start;
}

.jupyter-widgets-error-widget {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  border: solid 1px red;
  margin: 0 auto;
}

.jupyter-widgets-error-widget.icon-error {
  min-width: var(--jp-widgets-inline-width-short);
}
.jupyter-widgets-error-widget.text-error {
  min-width: calc(2 * var(--jp-widgets-inline-width));
  min-height: calc(3 * var(--jp-widgets-inline-height));
}

.jupyter-widgets-error-widget p {
  text-align: center;
}

.jupyter-widgets-error-widget.text-error pre::first-line {
  font-weight: bold;
}

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

.jupyter-widgets-disconnected::before {
  content: '\f127'; /* chain-broken */
  display: inline-block;
  font: normal normal 900 14px/1 'Font Awesome 5 Free', 'FontAwesome';
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #d9534f;
  padding: 3px;
  align-self: flex-start;
}

.jupyter-widgets-error-widget {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  border: solid 1px red;
  margin: 0 auto;
}

.jupyter-widgets-error-widget.icon-error {
  min-width: var(--jp-widgets-inline-width-short);
}
.jupyter-widgets-error-widget.text-error {
  min-width: calc(2 * var(--jp-widgets-inline-width));
  min-height: calc(3 * var(--jp-widgets-inline-height));
}

.jupyter-widgets-error-widget p {
  text-align: center;
}

.jupyter-widgets-error-widget.text-error pre::first-line {
  font-weight: bold;
}

Make broken link icon work for both fontawesome 4 and fontawesome 5.

As it currently is, the icon works for JupyterLab 3, but not Notebook 6. This fixes the icon to work both in Notebook 6 (FontAwesome 4) and JupyterLab 3 (FontAwesome 5).


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

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

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

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

Add fourth from top to general stylesheet


* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
}

.columns {
	width: 100%;
	display: flex;
	flex: 1;
}

.column {
	width: 100%;
	flex: 1;
	outline: 1px solid black;
	text-align: center;
}

.column [sync] {
	text-align: left;
	border-bottom-width: 2px;
	border-bottom-color: red;
	border-bottom-style: dotted;
	height: 0;
	text-indent: 0.5em;
}

.column [sync=""] {
	display:none;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
}

.columns {
	width: 100%;
	display: flex;
	flex: 1;
}

.column {
	width: 100%;
	flex: 1;
	border-left: 1px solid black;
	text-align: center;
}

.column [sync] {
	text-align: left;
	border-bottom-width: 2px;
	border-bottom-color: red;
	border-bottom-style: dashed;
	text-indent: 0.5em;
}

.column [sync=""] {
	display:none;
}

Change border to dashed, move text for dividers above the line.


@import "../../lib/styles/properties.css";

.Dialog {
  position: relative;
}

.Modal > .Dialog {
  padding: 10px;
  margin: 0 auto;
}

.DialogClose {
  position: absolute;
  top: -10px;
  right: -10px;
  color: #fff;
}

.no-touch .DialogClose:hover {
  color: #aaa;
}

.TextDialog {
  max-width: 400px;
  font-size: 18px;
}

/* Short bios... */
.TextDialog p {
  font-size: 18px;
}

.TextDialog a {
  line-height: 1;
  border-bottom: 1px solid;
}

@media (--break-2) {
  .Modal > .Dialog {
    padding: 20px;
  }
}

@media (--break-4) {
  .Modal > .Dialog {
    padding: 40px;
  }
}

@import "../../lib/styles/properties.css";

.Dialog {
  position: relative;
}

.Modal > .Dialog {
  padding: 10px;
  margin: 0 auto;
}

.DialogClose {
  position: absolute;
  top: -10px;
  right: -10px;
  color: #fff;
}

.no-touch .DialogClose:hover {
  color: #aaa;
}

.TextDialog {
  max-width: 480px;
  font-size: 18px;
}

/* Short bios... */
.TextDialog p {
  font-size: 18px;
}

.TextDialog a {
  line-height: 1;
  border-bottom: 1px solid;
}

@media (--break-2) {
  .Modal > .Dialog {
    padding: 20px;
  }
}

@media (--break-4) {
  .Modal > .Dialog {
    padding: 40px;
  }
}

Increase the width of the bio modal text

[#131219459](https://www.pivotaltracker.com/story/show/131219459)


@media only screen and (min-width: 1000px) {
  .sh-status-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--plane-status-bar);
    display: flex;
    align-items: center;
    padding: calc(var(--spacing) / 2) var(--spacing);
    border-top: 2px solid var(--c-alt-light);
    background-color: var(--c-background);
    font-size: 0.9em;
  }

  .sh-status-bar > * {
    flex: 1;
  }

  .sh-status-bar a {
    color: currentColor;
  }

  .sh-modal-buttons {
    text-align: right;
  }

  .sh-modal-buttons > *:not(:last-child) {
    margin-right: calc(var(--spacing) * 2);
  }
}

Hide status bar on smaller screens

Hide status bar on smaller screens


#HomePageBox {
  text-align: center;
  color: #5a5a5a;
  font-size: 1em;
  margin: 0 auto;
}

#NodeIntro, #WhistleblowerSubmitBox, #WhistleblowerReceiptBox {
  font-size: 1.2em;
}

#NodeIntro {
  margin-bottom: 3em;
}

#WhistleblowerSubmitBox {
  margin-bottom: 2em;
}

#NodeIntroPresentation {
  font-size: 1.6em;
  white-space: pre-wrap;
}

#NodeIntroDescription {
  font-size: 1.4em;
  white-space: pre-wrap;
}

#WhistleblowerSubmitBoxHeader {
  font-size: 1.4em;
}

#WhistleblowerSubmitBoxButton .btn {
  font-size: 1.2em;
}

#DonationPanel {
  margin-top: 3em;
}

#HomePageBox {
  text-align: center;
  color: #5a5a5a;
  font-size: 1em;
  margin: 0 auto;
}

#NodeIntro, #WhistleblowerSubmitBox, #WhistleblowerReceiptBox {
  font-size: 1.2em;
}

#NodeIntro {
  margin-bottom: 3em;
}

#WhistleblowerSubmitBox {
  margin-bottom: 2em;
}

#NodeIntroPresentation,
#NodeIntroDescription,
#WhistleblowerLoginPrompt {
  white-space: pre-wrap;
}

#NodeIntroPresentation {
  font-size: 1.6em;
}

#NodeIntroDescription {
  font-size: 1.4em;
}

#WhistleblowerSubmitBoxHeader {
  font-size: 1.4em;
}

#WhistleblowerSubmitBoxButton .btn {
  font-size: 1.2em;
}

#DonationPanel {
  margin-top: 3em;
}

Allow newlines inside the WhistleblowerLoginPrompt


.htCommentCell {
    position: relative;
}

.htCommentCell:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-left: 6px solid transparent;
    border-top: 6px solid black;
}

.htComments {
    display: none;
    z-index: 1059;
    position: absolute;
}

.htCommentTextArea {
    box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 3px, rgba(0, 0, 0, 0.239216) 0 1px 2px;
    border: none;
    border-left: 3px solid #ccc;
    background-color: #fff;
    width: 215px;
    height: 90px;
    font-size: 12px;
    padding: 5px;
    outline: 0px !important;
    -webkit-appearance: none;
}

.htCommentTextArea:focus {
    box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 3px, rgba(0, 0, 0, 0.239216) 0 1px 2px, inset 0 0 0 1px #5292f7;
    border-left: 3px solid #5292f7;
}

.htCommentCell {
    position: relative;
}

.htCommentCell:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-left: 6px solid transparent;
    border-top: 6px solid black;
}

.htComments {
    display: none;
    z-index: 1059;
    position: absolute;
}

.htCommentTextArea {
    box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 3px, rgba(0, 0, 0, 0.239216) 0 1px 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    border-left: 3px solid #ccc;
    background-color: #fff;
    width: 215px;
    height: 90px;
    font-size: 12px;
    padding: 5px;
    outline: 0px !important;
    -webkit-appearance: none;
}

.htCommentTextArea:focus {
    box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 3px, rgba(0, 0, 0, 0.239216) 0 1px 2px, inset 0 0 0 1px #5292f7;
    border-left: 3px solid #5292f7;
}

Add box-sizing:border-box to the Comments editor.


.message_list {
	overflow-y: scroll;
	max-height: 50%;
}

.chat-input {
	width: 90%;
}

/* I have no idea if this is the best way to handle the issues with float:left in navbars, or if 30px is a good value */
.tabset {
	min-height: 30px;
}

ul.tab-list {
	list-style: none;
}

ul.tab-list li {
	display: block;
	float: left;
	padding: 5px;
	margin: 0px 10px;
}

.message_list {
	overflow-y: scroll;
	max-height: 50%;
	white-space: pre-wrap;
	line-height: 0.9em;
}

.chat-input {
	width: 90%;
}

/* I have no idea if this is the best way to handle the issues with float:left in navbars, or if 30px is a good value */
.tabset {
	min-height: 30px;
}

ul.tab-list {
	list-style: none;
}

ul.tab-list li {
	display: block;
	float: left;
	padding: 5px;
	margin: 0px 10px;
}

Use `pre-wrap` rendering to make ASCII art work


/* Custom, with some colors borrowed from Superhero
 * (http://bootswatch.com/superhero/) */
.sidebar {
  /* background blue */
  background-color: #2b3e50;
}
.content a,
.related-posts li a:hover {
  /* button red */
  color: #d2322d;
}

/* Custom, with some colors borrowed from Superhero
 * (http://bootswatch.com/superhero/) */
.sidebar {
  /* background blue */
  background-color: #2b3e50;
}
.content a,
.related-posts li a:hover {
  /* button orange */
  color: #df691a;
}

Revert "Switch the link color from orange to red"

This reverts commit fe75bc8eeca027ce0ddd60773e9357a0f498250d.

Conflicts:
	public/css/hyde.css


body {
	font-family: sans-serif;
}

.box {
	float: left;
	width: 49%;
	margin: 0 2px 0 0;
	padding: 2px;
	min-height: 500px;
	border: 1px solid #999;
	font-family: monospace;
	box-sizing: border-box;
}

.showCss .box {
	width: 32%;
}

.css {
	display: none;
}

.showCss .css {
	display: block;
}

.saved {
	padding-top: 1em;
	clear: both;
}

.saved code {
	font-size: 90%;
	border: 1px solid #999;
}

.outlined * {
	border: 1px solid #ddd;
	background: #ddd;
	background: rgba( 0, 0, 0, 0.04 );
}

label,
input[type='button'] {
	display: inline-block;
	cursor: pointer;
	margin-right: 1em;
}

body {
	font-family: sans-serif;
}

.box {
	float: left;
	width: 49%;
	margin: 0 2px 0 0;
	padding: 2px;
	min-height: 500px;
	border: 1px solid #999;
	box-sizing: border-box;
}

.html,
.css {
	font-family: monospace;
}

.showCss .box {
	width: 32%;
}

.css {
	display: none;
}

.showCss .css {
	display: block;
}

.saved {
	padding-top: 1em;
	clear: both;
}

.saved code {
	font-size: 90%;
	border: 1px solid #999;
}

.outlined * {
	border: 1px solid #ddd;
	background: #ddd;
	background: rgba( 0, 0, 0, 0.04 );
}

label,
input[type='button'] {
	display: inline-block;
	cursor: pointer;
	margin-right: 1em;
}

Apply monospace to css input

Apply monospace to css input


html {
  font-family: "freight-sans-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (min-width: 38em) {
  html {
    font-size: 19px;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

code,
pre {
  font-family: "source-code-pro", Menlo, Monaco, "Courier New", monospace;
}

code {
  font-size: 0.8rem;
}

Make inline code a little smaller

Make inline code a little smaller


@import "variables.css";

:root {
  --color-bg: var(--color-neutral-2);
  --color-shadow: rgba(0, 0, 0, 0.3);
}

.container {
  padding: 0.15rem 0.5rem;
  margin: 0.5rem;
  background: var(--color-bg);
  font-size: 1rem;
  line-height: 2rem;
  color: white;
  border-radius: var(--border-radius);
  border: 2px solid white;
  box-shadow: 0 2px 4px var(--color-shadow);
  z-index: 9;
}

@import "variables.css";

:root {
  --color-bg: var(--color-neutral-2);
  --color-shadow: rgba(0, 0, 0, 0.3);
}

.container {
  padding: 0.25rem 1rem;
  margin: 0.5rem;
  background: var(--color-bg);
  font-size: 1rem;
  line-height: 2rem;
  color: white;
  border-radius: var(--border-radius);
  border: 2px solid white;
  box-shadow: 0 2px 4px var(--color-shadow);
  z-index: 9;
}

Add extra padding to Tooltip container

Add extra padding to Tooltip container


body {
    font-family: PTSans-Caption;
    font-size:44px;
    padding:20px;
    text-align:justify;
}

h1 {
    font-family : Geordia;
    font-size:64px;
    margin-bottom:10px;
    text-align:center;
}

h2 {
    font-family:Helvetica;
    font-size:12px;
    color:#999;
    padding-bottom:5px;
    border-bottom:3px solid #ccc;
}

img {
    max-width:100%;
    height:auto;
    float:middle
    /*padding:10px;
    border:1px solid #ccc;*/
}

p.read {
    text-align:justify;
}

p.read img {
    border:0px;
    width:125px;
    height:30px;
}

p.main {
    text-align:justify;
}

div.field-image {
   width: 85%;
   margin-left: auto;
   margin-right: auto;
}

body {
    font-family: PTSans-Caption;
    font-size:44px;
    padding:20px;
    text-align:justify;
}

h1 {
    font-family : PTSans-Bold;
    font-size:64px;
    margin-bottom:10px;
    text-align:center;
}

h2 {
    font-family:Helvetica;
    font-size:12px;
    color:#999;
    padding-bottom:5px;
    border-bottom:3px solid #ccc;
}

img {
    max-width:100%;
    height:auto;
    float:middle
    /*padding:10px;
    border:1px solid #ccc;*/
}

p.read {
    text-align:justify;
}

p.read img {
    border:0px;
    width:125px;
    height:30px;
}

p.main {
    text-align:justify;
}

div.field-image {
   width: 85%;
   margin-left: auto;
   margin-right: auto;
}

Use PT Sans bold for an article's title.

git-svn-id: de098944496d99a526405b0ca0c6b0618b5163f8@421 59dca7bf-9055-4625-9011-bab61c547c97


/* stylelint-disable no-descending-specificity */
li#ca-wikilove {
	line-height: 1.4em; /* account for scripts with tall ascenders */
}

#ca-wikilove.icon a {
	display: block;
	width: 28px;
	padding: 15px 5px 0;
	overflow: hidden;
	outline: 0;
}

/* icon style */
/* Only use icon if the menu item is not collapsed into the "More" dropdown
 * (in which case it is inside #p-cactions not #p-views). */
#p-views #ca-wikilove.icon a:before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	margin-bottom: 15px;
	background-image: url( images/heart-icons-red.svg );
	background-position: -24px 0;
}

#ca-wikilove.icon a:hover:before,
#ca-wikilove.icon a:focus:before {
	background-position: 0 0;
}

/* stylelint-disable no-descending-specificity */
li#ca-wikilove {
	line-height: 1.4em; /* account for scripts with tall ascenders */
}

#p-views #ca-wikilove.icon a {
	display: block;
	width: 28px;
	padding: 15px 5px 0;
	overflow: hidden;
	outline: 0;
}

/* icon style */
/* Only use icon if the menu item is not collapsed into the "More" dropdown
 * (in which case it is inside #p-cactions not #p-views). */
#p-views #ca-wikilove.icon a:before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	margin-bottom: 15px;
	background-image: url( images/heart-icons-red.svg );
	background-position: -24px 0;
}

#ca-wikilove.icon a:hover:before,
#ca-wikilove.icon a:focus:before {
	background-position: 0 0;
}

Fix Wikilove for smaller screens

Fix Wikilove for smaller screens

Bug: T268534
Change-Id: Id580e2cfd8cd7106a13732cc9f7bdaea175d24c4


.ProseMirror {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
}

.ProseMirror ul, .ProseMirror ol {
  padding-left: 30px;
  cursor: default;
}

.ProseMirror blockquote {
  padding-left: 1em;
  border-left: 3px solid #eee;
  margin-left: 0; margin-right: 0;
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
  pointer-events: none; /* Don't do weird stuff with marker clicks */
}
.ProseMirror li > * {
  pointer-events: auto;
}

.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px; top: -2px; bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

.ProseMirror {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
}

.ProseMirror ul, .ProseMirror ol {
  cursor: default;
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
  pointer-events: none; /* Don't do weird stuff with marker clicks */
}
.ProseMirror li > * {
  pointer-events: auto;
}

.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px; top: -2px; bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

Move some styling out of the default style sheet

BREAKING: The default styling for lists and blockquotes was removed
from `prosemirror.css`. (They were moved to the
[`example-setup`](https://github.com/ProseMirror/prosemirror-example-setup)
module.)


  /*	PORTFOLIO 	*/

.tag-item-portfolio {
	margin-bottom: 40px;
}

.pagination-portfolio {
	margin-top: 70px;
	margin-left: 250px;
	margin-bottom: 70px;
}

.teaser-item-portfolio {
	margin-bottom: 38px;
}

.blog-side-bar-right {
	position: absolute;
	right: 0;
	top: 0;
}

/*	CONTACTS 	*/

.page-contacts-paragraph {
	border-radius: 5px;
	background: #ececec;
	padding: 25px 20px;
	margin-bottom: 60px;
}

.contacts-h {
	text-transform: uppercase;
	font-size: 20px;
	margin-bottom: 60px;
}

.address-content {
	position: absolute;
	left: 900px;
	font-size: 20px;
}

.form-h {
	display: block;
	text-transform: uppercase;
	font-size: 20px;
	margin-bottom: 60px;
}

  /*	PORTFOLIO 	*/

.tag-item-portfolio {
	margin-bottom: 40px;
}

.pagination-portfolio {
	margin-top: 70px;
	margin-left: 250px;
	margin-bottom: 70px;
}

.teaser-item-portfolio {
	margin-bottom: 38px;
}

.blog-side-bar-right {
	position: absolute;
	right: 0;
	top: 0;
}

/*	CONTACTS 	*/

.page-contacts-paragraph {
	border-radius: 5px;
	background: #ececec;
	padding: 11px 20px 5px;
	margin-bottom: 60px;
}

.contacts-h {
	text-transform: uppercase;
	font-size: 20px;
	margin-bottom: 60px;
}

.address-content {
	position: absolute;
	left: 900px;
	font-size: 20px;
}

.form-h {
	display: block;
	text-transform: uppercase;
	font-size: 20px;
	margin-bottom: 60px;
}

Update paragraph at page "contacts"

Update paragraph at page "contacts"


.search {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.inputWrapper {
  position: relative;
  z-index: 2;
  width: 600px;
  height: 45px;
}

.autocomplete {
  position: absolute;
  z-index: 1;
  width: 600px;
  height: 45px;
  font-size: 1.5em;
  padding: 0 10px;
  line-height: 45px;
  box-sizing: border-box;
  color: #bbbbbb;
  white-space: pre;
}

.search {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.inputWrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 45px;
}

.autocomplete {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 45px;
  font-size: 1.5em;
  padding: 0 10px;
  line-height: 45px;
  box-sizing: border-box;
  color: #bbbbbb;
  white-space: pre;
}

Fix width of main input and autocomplete


/* Just add a few things to the default theme. */
@import "haiku.css";

div.content ul > li {
  background: none;
  list-style-type: initial;
  padding-left: 0;
  margin-left: 2em;
}

div.highlight {
  background-color: inherit; /* highlighting was overflowing boxes */
}

tt, pre {
  font-family: "menlo", "Lucida Console", monospace, sans-serif;
}

Use a sans-serif font for code

Docs: Use a sans-serif font for code

This tends to improve readability and harmonizes better with the size of
regular text.

Swift SVN r25304


[data-md-color-scheme="spaceship"] {
  --md-primary-fg-color: #221c3e;
  --md-primary-fg-color--light: #a7a4b2;
  --md-primary-fg-color--dark: #1b1632;

  --md-accent-fg-color: #c34435;
  --md-accent-fg-color--light: #db8f86;
  --md-accent-fg-color--dark: #752920;
}

[data-md-color-scheme="slate"] {
  --md-hue: 260;

  --md-accent-fg-color: #221c3e;
  --md-accent-fg-color--light: #a7a4b2;
  --md-accent-fg-color--dark: #1b1632;

  --md-primary-fg-color: #c34435;
  --md-primary-fg-color--light: #db8f86;
  --md-primary-fg-color--dark: #752920;
}

[data-md-color-scheme="spaceship"] {
  --md-primary-fg-color: #221c3e;
  --md-primary-fg-color--light: #a7a4b2;
  --md-primary-fg-color--dark: #1b1632;

  --md-accent-fg-color: #c34435;
  --md-accent-fg-color--light: #db8f86;
  --md-accent-fg-color--dark: #752920;
}

[data-md-color-scheme="slate"] {
  --md-hue: 260;

  --md-primary-fg-color: #221c3e;
  --md-primary-fg-color--light: #a7a4b2;
  --md-primary-fg-color--dark: #1b1632;

  --md-accent-fg-color: #c34435;
  --md-accent-fg-color--light: #db8f86;
  --md-accent-fg-color--dark: #752920;

  --md-typeset-a-color: var(--md-accent-fg-color);
}

Change colors for slate mode

Change colors for slate mode


/**
 * Social Media List on the Sidebar
 */
.social-media-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  font-size: small;
}
.icon > svg {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: middle;
}
.icon > svg path {
  fill: #828282;
}

/*
 * Social media buttons on post page
 */
.share-buttons {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  font-size: small;
}

/**
 * About me portrait
 */
img .portraint {
  margin-top: 1rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
  padding: none;
}

/**
 * Social Media List on the Sidebar
 */
.social-media-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  font-size: small;
}
.icon > svg {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: middle;
}
.icon > svg path {
  fill: #828282;
}

/*
 * Social media buttons on post page
 */
.share-buttons {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  font-size: small;
}

/**
 * About me portrait
 */
img.portraint {
  margin-top: 1rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
  padding: none;
}

Fix bug in css; not porperly aligning due to CSS selector


body {
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  background: url('../assets/black-linen.png');
}

body, button, input {
  font-family: 'Google Sans', sans-serif;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v30/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

icon {
  font-family: "Material Icons";
  font-size: 24px;
  font-style: normal;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  /* partial FOUC prevention */
  width: 24px;
  height: 24px;
  overflow: hidden;;
}

body {
  font-family: sans-serif;
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v30/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

icon {
  font-family: "Material Icons";
  font-size: 24px;
  font-style: normal;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  /* partial FOUC prevention */
  width: 24px;
  height: 24px;
  overflow: hidden;;
}

Revert "use Google Sans in button, body, input"

This reverts commit 6d9a4813f9cdd45c65267a2997ef7bf3fd6f8766.


.item {
    > a, button {
        font-size: 90%;
        width: 100%;
        display: inline-block;
        text-align: start;
        padding: 8px 10px;
        text-decoration: none;
        color: var(--main-color) !important;

        &:hover {
            background: #5e5e5e;
            color: white !important;
        }
    }
}

.item {
    > a, button {
        font-size: 90%;
        width: 100%;
        display: inline-flex;
        text-align: start;
        padding: 8px 10px;
        text-decoration: none;
        color: var(--main-color) !important;

        &:hover {
            background: #5e5e5e;
            color: white !important;
        }
    }
}

Dropdown::MenuItem: Adjust `display` attribute to vertically center contents


html {
  /* Catch any browsers that still overscroll (eg Safari) */
  background-color: #000;
}

body {
  overscroll-behavior: none;
}

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

.main {
  height: 100%;
}

.game {
  user-select: none;
  color: #fff;
  display: flex;
  flex-flow: column;
  height: 100%;
}

.relative {
  position: relative;
}

Disable overscrolling (in some browsers)


body {
  height: 100vh;
  width: 100vw;
  background-image: url("../img/space.jpg");
  background-size: cover;
  color: #fff;
  font-family: sans-serif;
}

h1 {
  font-family: 'Audiowide', cursive;
  text-align: center;
  font-size: 4em;
}

#board {
  height: 60%;
  width: 40%;
  margin: 0 auto;
  border: 1px solid #707070;
  background-color: transparent;
  /*padding: 5px;*/
}

.cell {
  min-height: 25%;
  min-width: 20%;
  background-color: rgba(255,255,255,0.25);
  display: inline-block;
  margin: 0.25%;
}

p {
  text-align: center;
  font-size: 4em;
  padding-top: 10px;
  margin: 0 auto;
}

body {
  height: 100vh;
  width: 100vw;
  background-image: url("../img/space.jpg");
  background-size: cover;
  color: #fff;
  font-family: sans-serif;
}

h1 {
  font-family: 'Audiowide', cursive;
  text-align: center;
  font-size: 4em;
}

#board {
  height: 60%;
  width: 40%;
  margin: 0 auto;
  border: 1px solid #707070;
  background-color: transparent;
  /*padding: 5px;*/
}

.cell {
  min-height: 25%;
  min-width: 20%;
  background-color: rgba(255,255,255,0.25);
  display: inline-block;
  margin: 0.25%;
.right {
  border-left: 10px solid #fff;
}

p {
  text-align: center;
  font-size: 4em;
  padding-top: 10px;
  margin: 0 auto;
}

Add left border to cells with class right


.picturefill img,
.typography img {
	max-width: 100%;
	height: auto;
}

/* Hide the controls for a carousel if it only has one item.
 */
.carousel.items-1 .carousel-control,
.carousel.items-1 .carousel-indicators {
	display: none;
}

form .optionset ul li,
form .checkboxset ul li {
	list-style: none;
}
form .optionset input[type="radio"],
form .checkboxset input[type="checkbox"] {
    float: left;
    margin-left: -20px;
}
form input[type="radio"],
form input[type="checkbox"] {
	display: inline-block;
	width: auto;
	height: auto;
}

.picturefill img,
.typography img {
	max-width: 100%;
	height: auto;
}

.typography iframe,
.constrained iframe {
	max-width: 100%;
	height: auto;
}
.typography iframe[src^="http://www.youtube.com/embed/"],
.constrained iframe[src^="http://www.youtube.com/embed/"] {
	min-height: 315px;
}
.typography iframe[src^="http://player.vimeo.com/video/"],
.constrained iframe[src^="http://player.vimeo.com/video/"] {
	min-height: 280px;
}

/* Hide the controls for a carousel if it only has one item.
 */
.carousel.items-1 .carousel-control,
.carousel.items-1 .carousel-indicators {
	display: none;
}

form .optionset ul li,
form .checkboxset ul li {
	list-style: none;
}
form .optionset input[type="radio"],
form .checkboxset input[type="checkbox"] {
    float: left;
    margin-left: -20px;
}
form input[type="radio"],
form input[type="checkbox"] {
	display: inline-block;
	width: auto;
	height: auto;
}

Set up some default rules for iframes.

Set up some default rules for iframes.


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

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

Update spacing to universal views

Update spacing to universal views


.ProseMirror {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
}

.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px; top: -2px; bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

.ProseMirror {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
}

.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px; top: -2px; bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

Set white-space: break-spaces when supported

FIX: Set the editable element to use a `white-space: break-spaces` style
so that whitespace at the end of a line properly moves the cursor to the
next line.

See https://discuss.prosemirror.net/t/putting-many-white-spaces-at-end-of-a-line-with-marks-bug/2300


@import "normalize.css/normalize.css";

.root {
  font: 1.125em/1.5 var(--font-brandon);
  background: var(--color-white-dark);
  color: var(--color-text);
  padding: 1em;
}

.root * {
  box-sizing: border-box;
}

@import "normalize.css/normalize.css";

:global body {
  background: var(--color-white-dark);
}

.root {
  font: 1.125em/1.5 var(--font-brandon);
  color: var(--color-text);
  padding: 1em;
}

.root * {
  box-sizing: border-box;
}

Add global style to make body white-dark


html {
  height: 100%;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

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

body {
  background: linear-gradient(#0d263c,#030714) no-repeat fixed;
  color: #ffffff;
  height: 100%;
  margin: 20px;
}

h1 {
  color: #66d9f7;
}

img {
  vertical-align: top;
}

html {
  height: 100%;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

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

body {
  background: linear-gradient(#0d263c,#030714) no-repeat fixed;
  color: #ffffff;
  height: 100%;
  margin: 20px;
}

h1 {
  color: #66d9f7;
}

img {
  vertical-align: top;
}

Replace *:before, *:after -> *::before, *::after


/**
 * General
 */

body {
  background-color: #fdfcfa;
  color: #444;
}

h1, h2, h3, h4, h5, h6 {
  color: #222;
}

hr {
  width: 3em;
  margin-top: 2em;
  margin-bottom: 2em;
  border-bottom-style: hidden;
  color: #444;
}

small {
  color: #999;
}

/**
 * Links
 */

a:link,
a:active,
a:focus,
a:visited {
  color: #2996D2;
  text-decoration: none;
  border-bottom: 0.075em dotted #2996D2;
  transition: background-color 200ms ease;
}

a:hover {
  background-color: rgba(41, 150, 210, 0.05);
}

/**
 * Article info.
 */

.article-info__topics li:after {
  content: ', ';
}

.article-info__topics li:last-of-type:before {
  content: ' and ';
}

.article-info__topics li:last-of-type:after {
  content: '';
}

.article-info__topics li:first-of-type:before {
  content: '';
}

/**
 * General
 */

body {
  background-color: #fdfcfa;
  color: #444;
}

h1, h2, h3, h4, h5, h6 {
  color: #222;
}

hr {
  width: 3em;
  margin-top: 2em;
  margin-bottom: 2em;
  border-bottom-style: hidden;
  color: #444;
}

small {
  color: #999;
}

/**
 * Links
 */

a:link,
a:active,
a:focus,
a:visited {
  color: #2996D2;
  text-decoration: none;
  border-bottom: 0.075em dotted #2996D2;
  transition: background-color 200ms ease;
}

a:hover {
  background-color: rgba(41, 150, 210, 0.05);
}

/**
 * Images.
 */

figure img {
  filter: drop-shadow(0.15em 0.15em 0.1em #eee);
}

/**
 * Article info.
 */

.article-info__topics li:after {
  content: ', ';
}

.article-info__topics li:last-of-type:before {
  content: ' and ';
}

.article-info__topics li:last-of-type:after {
  content: '';
}

.article-info__topics li:first-of-type:before {
  content: '';
}

Add slight drop shadow around images.

Add slight drop shadow around images.

For all images inside `figure` tags, add a little drop-shadow. Very
progressive enhancement, so used the new filter vs box-shadow. This is
added so that images with a white background will pop against the
slightly warmer background.


.cms-menu-list li a .toggle-children {
	position: absolute;
	right: 0;
	top: 10px;
}

.cms-menu-list li.children > a {
	padding-right: 30px;
}

.cms-menu-list li.children ul li a {
	padding-left: 15px;
}

.cms-menu-list li.children li a {
	font-size: 11px;
	padding: 0 10px 0 40px;
	height: 32px;
	line-height: 32px;
}

.cms-menu-list li a .no-icon.text {
	margin-left: 8px;
}

.cms-menu-list.collapsed li.children ul li a span.text {
	margin-left: 30px;
}

FIX prevent text from overlapping icon when menu is collapsed


.ticket_info_container {
  background: transparent;
}

.app-visit-cancel {
  position: absolute;
  width: 100%;
}

.expand-view-btn, .expand-view-ticket {
  float: none !important;
  width: 100% !important;
}

.expand-view-btn {
  margin: 0 auto 0 auto !important;
}

.visitcall-heading-one {
  padding-bottom: 1em;
  font-family: Roboto-Bold;
}

.visitcall-heading-three {
  font-size: 25px;
  font-family: Roboto-Bold;
  word-wrap: break-word;
}

.ticket_branch{
  position: relative;
  top: 6px;

  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* number of lines to show */
  margin: 0em auto !important;
}

.ticket-container-center {
  float: none !important;
}

.button-container {
  margin: 1em 0;
}

.inner-padding {
  padding-top: 10px;
}

.placement-layout{
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 auto;
}

.ticket_info_container {
  background: transparent;
}

.app-visit-cancel {
  position: absolute;
  width: 100%;
}

.expand-view-btn, .expand-view-ticket {
  float: none !important;
  width: 100% !important;
}

.expand-view-btn {
  margin: 0 auto 0 auto !important;
}

.visitcall-heading-one {
  padding-bottom: 1em;
  font-family: Roboto-Bold;
}

.visitcall-heading-three {
  font-size: 25px;
  font-family: Roboto-Bold;
  word-wrap: break-word;
}

.ticket_branch{
  position: relative;
  top: 6px;

  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* number of lines to show */
  margin: 0em auto !important;
}

.ticket-container-center {
  float: none !important;
}

.button-container {
  margin: 1em 0;
}

.inner-padding {
  padding-top: 10px;
}

.placement-layout{
  width: 90%;
  text-overflow: ellipsis;
  margin: 0 auto;
}

Fix on branch name vertically cut issue in ticket info screen


@external dialogTop, dialogContent;

.labelCell {
   padding-right: 6px;
}

.buttonCell button {
   position: relative;
   left: 3px;
   top: 2px;
   margin-left: 0;
}

.progressCell img {
   position: relative;
   top: 1px;
}

.consoleProgressDialog .dialogTop {
   display: none;
}

.consoleProgressDialog .dialogContent {
   margin-top: 4px;
}

.consoleProgressDialog {
   top: 0 !important;
}

.shellDisplay {
   border: solid #CCC 1px;
   margin: 0;
   height: 250px;
}

@external dialogTop, dialogContent;

.labelCell {
   padding-right: 6px;
}

.buttonCell button {
   position: relative;
   left: 3px;
   top: 2px;
   margin-left: 0;
}

.progressCell img {
   position: relative;
   top: 1px;
}

.consoleProgressDialog .dialogTop {
   display: none;
}

.consoleProgressDialog .dialogContent {
   margin-top: 4px;
}

.consoleProgressDialog {
   top: 0 !important;
}

.shellDisplay {
   background-color: white;
   border: solid #CCC 1px !important;
   margin: 0;
   height: 250px;
}

Fix console progress dialog styles

Fix console progress dialog styles


/* Kindle Cloud Reader tweak */
@namespace url("http://www.w3.org/1999/xhtml");

@-moz-document domain("read.amazon.co.jp") {
  /* Paging arrow */
  .pageArrow {
    background: floralwhite !important;
  }

  #kindleReader_center {
    left: 3% !important;
    right: 3% !important;
  }
  #kindleReader_pageTurnAreaLeft {
    width: 3% !important;
  }
  #kindleReader_pageTurnAreaRight {
    width: 3% !important;
    left: 97% !important;
  }

  /* Overray element opacity */
  .immersive_slide_area {
    opacity: 0.4 !important;
  }
  .immersive_slide_area:hover {
    opacity: 0.8 !important;
  }

  /* Footer height adjustment */
  #kindleReader_footer {
    height: 40px !important;
  }
  #kindleReader_footer_readerControls_left,
  #kindleReader_footer_readerControls_middle,
  #kindleReader_footer_readerControls_right {
    min-height: 40px !important;
    height: 100% !important;
  }

  #kindleReader_footer_readerControls_left,
  #kindleReader_footer_readerControls_right {
    padding-top: 8px !important;
  }

  #kindleReader_progressbar_div {
    top: 8px !important;
  }
  #kindleReader_footer_message {
    margin-top: 12px !important;
    font: 12px/1 sans-serif !important;
    letter-spacing: 0.2em !important;
    word-spacing: 1em !important;
  }
}

/* Kindle Cloud Reader tweak */
@namespace url("http://www.w3.org/1999/xhtml");

@-moz-document domain("read.amazon.co.jp") {
  /* Paging arrow */
  .pageArrow {
    background: floralwhite !important;
  }

  /* Overray element opacity */
  .immersive_slide_area {
    opacity: 0.4 !important;
  }
  .immersive_slide_area:hover {
    opacity: 0.8 !important;
  }
}

Drop the code out of use

Drop the code out of use

The parts userstyles are applied should be minimal to keep the original design as much as possible for the respect to author :)


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

button.password-button {
  background: #8aaaed;
  color: #fff;
  display: inline;
  font-size: 90%;
  font-weight: bold;
  height: 18px;
  padding: 0 2px;
  position: absolute;
  top: 5px;
  width: 50px;
}

html[dir='ltr'] button.password-button {
  right: 50px;
}

html[dir='rtl'] button.password-button {
  left: 50px;
}

.inactive-password {
  background: transparent;
  border: none;
}

#saved-passwords-list .url {
  box-sizing: border-box;
  width: 40%;
}

#saved-passwords-list .name {
  -webkit-box-flex: 1;
  width: 20%;
}

#saved-passwords-list .password {
  -webkit-box-flex: 1;
  position: relative;
}

#saved-passwords-list .url,
#saved-passwords-list .name,
#password-exceptions-list .url {
  overflow: hidden;
  text-overflow: ellipsis;
}

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

button.password-button {
  background: #8aaaed;
  color: #fff;
  display: inline;
  font-size: 90%;
  font-weight: bold;
  height: 18px;
  padding: 0 2px;
  position: absolute;
  top: 5px;
  width: 50px;
}

html[dir='ltr'] button.password-button {
  right: 50px;
}

html[dir='rtl'] button.password-button {
  left: 50px;
}

input[type="password"].inactive-password {
  background: transparent;
  border: none;
}

#saved-passwords-list .url {
  box-sizing: border-box;
  width: 40%;
}

#saved-passwords-list .name {
  -webkit-box-flex: 1;
  width: 20%;
}

#saved-passwords-list .password {
  -webkit-box-flex: 1;
  position: relative;
}

#saved-passwords-list .url,
#saved-passwords-list .name,
#password-exceptions-list .url {
  overflow: hidden;
  text-overflow: ellipsis;
}

DOMUI: Fix password list items from showing password input field.

BUG=none
TEST=none

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

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


#top {
display:block;
position: absolute;
top: 190px;
}
#second_from_top {
display: block;
position: relative;
top: 280px;

}

#top {
display:block;
position: absolute;
top: 190px;
}
#second_from_top {
display: block;
position: relative;
top: 280px;
left: 100px;

}

Change position blocks week stylesheet

Change position blocks week stylesheet


.timeline.bar-chart .graph rect {
  fill: gray;
}

.timeline.bar-chart .graph rect.selected {
  fill: lightgray;
}

.timeline.bar-chart .graph .tooltip {
  pointer-events: none;
}

.timeline.bar-chart .graph .tooltip rect {
  fill: gray;
  stroke: white;
  stroke-width: 1px;
}

.timeline.bar-chart .graph .tooltip text {
  fill: white;
  font-family: Courier;
  font-size: 14px;
  text-anchor: middle;
}

.timeline.bar-chart .graph .tooltip.show {
  display: inline;
}

.timeline.bar-chart .graph .tooltip.hide {
  display: none;
}

.timeline.bar-chart .graph rect {
  fill: gray;
}

.timeline.bar-chart .graph rect.selected {
  opacity: 0.4;
}

.timeline.bar-chart .graph .tooltip {
  pointer-events: none;
}

.timeline.bar-chart .graph .tooltip rect {
  fill: gray;
  stroke: white;
  stroke-width: 1px;
}

.timeline.bar-chart .graph .tooltip text {
  fill: white;
  font-family: Courier;
  font-size: 14px;
  text-anchor: middle;
}

.timeline.bar-chart .graph .tooltip.show {
  display: inline;
}

.timeline.bar-chart .graph .tooltip.hide {
  display: none;
}

Modify bar color of bar chart

Modify bar color of bar chart


/**
 * BootstrapValidator (http://bootstrapvalidator.com)
 *
 * The best jQuery plugin to validate form fields. Designed to use with Bootstrap 3
 *
 * @version     v0.4.5
 * @author      https://twitter.com/nghuuphuoc
 * @copyright   (c) 2013 - 2014 Nguyen Huu Phuoc
 * @license     MIT
 */

.bv-form .help-block{margin-bottom:0}.nav-tabs li.bv-tab-success>a{color:#3c763d}.nav-tabs li.bv-tab-error>a{color:#a94442}

Add missing bootstrapValidator.css file (good stuff).


/* app css stylesheet */

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

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

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

.menu > li {
  display: inline;
}

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

.menu > li:nth-child(1):before {
  content: "";
  padding: 0;
}

.angular-google-map-container {
  height: 400px;
}

p {
  padding: 10px;
  text-align: center;
}

/* app css stylesheet */

body {
  padding: 20px;
}

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

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

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

.menu > li {
  display: inline;
}

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

.menu > li:nth-child(1):before {
  content: "";
  padding: 0;
}

.angular-google-map-container {
  height: 400px;
}

p {
  padding: 10px;
  text-align: center;
}

Add some padding to the body to make the page look better


body { padding-top: 50px; }
th { width: 80%;}
td.building {background-color:#ddf4fb;border-color:#c6edf9;}
td.success {background-color:#d1eed1;border-color:#bfe7bf;}
td.unstable {background-color:#fddfde;border-color:#fbc7c6;}
td.aborted {background-color: #eee;border-color: #d0d0d0;}
.spinner{height: 15px; float: right; margin-top: 0.2em;}
.author{color: #777; font-size: 20px;}

body { padding-top: 50px; }
th { width: 80%;}
td.building {background-color:#ddf4fb;border-color:#c6edf9;}
td.success {background-color:#d1eed1;border-color:#bfe7bf;}
td.unstable {background-color:#fddfde;border-color:#fbc7c6;}
td.failure {background-color:#fddfde;border-color:#fbc7c6;}
td.aborted {background-color: #eee;border-color: #d0d0d0;}
.spinner{height: 15px; float: right; margin-top: 0.2em;}
.author{color: #777; font-size: 20px;}

Fix style of failed builds

Fix style of failed builds


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

body {
	font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
}

header {
	position: absolute;
	width: 500px;
	height: 250px;
	top: 50%;
	left: 50%;
	margin-top: -125px;
	margin-left: -250px;
	text-align: center;
}

header h1 {
	font-size: 50px;
	font-weight: 100;
	margin: 0;
	padding: 0;
}

.menu {
	height: 35px;
	width: 100%;
	background-color: darkmagenta;
}

.container {
	height: 100%;
	display: flex;
	display: -webkit-flex;
}

#sidebar {
    width: 150px;
    background-color:rgb(38, 50, 56);
}

#feeds {
	width: 250px;
	overflow: hidden;
	background-color: yellow;
}

#feeds:hover {
	overflow-y: scroll;
}

#feed-active{
	color: coral;
}

.feed {

}

#preview {
	flex: 1;
	background-color: green;
}

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

body {
	font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
}

header {
	position: absolute;
	width: 500px;
	height: 250px;
	top: 50%;
	left: 50%;
	margin-top: -125px;
	margin-left: -250px;
	text-align: center;
}

header h1 {
	font-size: 50px;
	font-weight: 100;
	margin: 0;
	padding: 0;
}

.menu {
	height: 35px;
	width: 100%;
	background-color: darkmagenta;
}

.container {
	height: 100%;
	display: flex;
	display: -webkit-flex;
}

#sidebar {
    width: 150px;
    background-color:rgb(38, 50, 56);
	color: white;
}

#feeds {
	width: 250px;
	overflow: hidden;
	background-color: yellow;
}

#feeds:hover {
	overflow-y: scroll;
}

#feed-active{
	color: coral;
}

.feed {

}

#preview {
	flex: 1;
	background-color: green;
}

Fix so that sidebar is readable

Fix so that sidebar is readable


* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

header {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#FFFFFF;
    font-family:Helvetica, Arial, sans-serif;
	text-align:center;
	font-size:2.00em;
    height:100%;
    margin:0px;
    padding:0px;
    width:100%;
	color: #FFFFFF;
}
body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#FFFFFF;
    font-family:Helvetica, Arial, sans-serif;
	text-align:center;
	font-size:3.50em;
    height:100%;
    margin:0px;
    padding:40px;
    width:100%;
	color: #002A5C;
	a:link {color:#002A5C;}
	a:visited {color:#008BB0;}
	a:hover {color:#FFE498;}
	a:active {color:#002A5C;}
}

p {
	text-align:left;
	font-size:0.80em;
}

#email {
	text-align:center;
	font-size:0.75em;
}

#warning {
	font-size: 0.70em;
	color:008BB0;
}

Create stylesheet for download page

Create stylesheet for download page


/* Readium CSS
   Scroll module for vertical-writing

   A set of styles to scroll ePublications in “writing-mode: vertical-*”
   This module overrides pagination

   Repo: https://github.com/readium/readium-css */

/* [style*="--USER__view"] can be used to increase specificity but performance hit */
:root[style*="readium-scroll-on"] {
  /* Reset html size so that the user can scroll */
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  max-height: 100vh !important;

  /* Reset columns, auto + auto = columns can’t be created */
  /* There is a weird gap in Safari/Webkit, as if overflow paged-x… */
  -webkit-columns: auto auto !important;
  -moz-columns: auto auto !important;
  columns: auto auto !important;

  padding: 0 !important;
}

/* Make sure line-length is limited in all configs */
:root[style*="readium-scroll-on"] body {
  --RS__maxLineLength: 40rem !important;
}

/* Scroll mode horizontal */

/* Do we add a top/bottom margin for body in vertical scroll or not? */

/* Readium CSS
   Scroll module for vertical-writing

   A set of styles to scroll ePublications in “writing-mode: vertical-*”
   This module overrides pagination

   Repo: https://github.com/readium/readium-css */

/* [style*="--USER__view"] can be used to increase specificity but performance hit */
:root[style*="readium-scroll-on"] {
  /* Reset html size so that the user can scroll */
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  max-height: 100vh !important;

  /* Reset columns, auto + auto = columns can’t be created */
  /* There is a weird gap in Safari/Webkit, as if overflow paged-x… */
  -webkit-columns: auto auto !important;
  -moz-columns: auto auto !important;
  columns: auto auto !important;

  padding: 0 !important;
}

/* Make sure line-length is limited in all configs */
:root[style*="readium-scroll-on"] body {
  --RS__maxLineLength: 40.01rem !important; /* Fixes fragmentation update issues in Webkit i.e. value must be slightly different than the one for pagination */
}

/* Scroll mode horizontal */

/* Do we add a top/bottom margin for body in vertical scroll or not? */

Fix columns → scroll fragmentation update issue in Webkit/Safari


@media (max-width: 600px) {
    .bpmto_ms table {
        table-layout: fixed;
        width: 100%;
    }

    .bpmto_ms table td {
        word-wrap: break-word;
    }

    .bpmto_ms .record td.record__cell__key {
        width: 100px;
        border-top: solid 1px #DDD;
        border-bottom: solid 1px #DDD;
    }
}

.bpmto_ms .maintable td {
    width:12.5%;
    white-space: nowrap;
}

.zci--answer .bpmto_ms .zci__more-at {
    padding-top: 0;
}

.bpmto_ms .record > td {
    padding: 0.4em;
    padding-left: 0;
    border-top: solid 1px #DDD;
    border-bottom: 0;
}

.zci.zci--answer {
    padding-bottom: 0.5em;
}

.bpmto_ms .record .numbers {
    text-align: right;
}

.bpmto_ms .record .record__cell__key {
    text-transform: capitalize;
    width: 150px;
}

@media (max-width: 300px) {
    .bpmto_ms table td {
        word-wrap: break-word;
    }
}

@media (min-width: 400px) {
    .bpmto_ms table {
        table-layout: fixed;
        width: 100%;
    }

    .bpmto_ms table td {
        word-wrap: break-word;
    }
}

.bpmto_ms .maintable td {
    width:12.5%;
    white-space: nowrap;
}

.zci--answer .bpmto_ms .zci__more-at {
    padding-top: 0;
}

.bpmto_ms .record > td {
    padding: 0.4em;
    padding-left: 0;
    border-top: solid 1px #DDD;
    border-bottom: 0;
}

.zci.zci--answer {
    padding-bottom: 0.5em;
}

.bpmto_ms .record .numbers {
    text-align: right;
}

.bpmto_ms .record .record__cell__key {
    text-transform: capitalize;
    width: 150px;
}

Improve Table CSS for mobile displays

Improve Table CSS for mobile displays


#LatitudeLongitudeZoom .fieldholder-small {
	margin: 0px;
}

#LatitudeLongitudeZoom .fieldholder-small-label {
	margin: 0px;
}

#LatLonZoomLevel .fieldholder-small {
	margin: 0px;
}

#LatLonZoomLevel .fieldholder-small-label {
	margin: 0px;
}

UPGRADE/BUGFIX: Fix width of Latitude/Longitude fields in order to deal with the number of decimal points


body {
    height: 100%;
    padding-top: 45px;
}

.quote .metadata {
    margin-top: -10px;
    margin-left: 0px;
}

.quote .metadata li {
    float: left;
    display: block;
    margin-right: 15px;
}
.quote .metadata li.nomargin {
    margin: 0;
}

.quote .metadata li.date_submitted {
    float: right;
}

.quote .content {
    font-size: 13px;
    margin-top: 20px;
}

body {
    height: 100%;
    padding-top: 45px;
}

.quote .metadata {
    margin-top: -10px;
    margin-left: 0px;
}

.quote .metadata li {
    float: left;
    display: block;
    margin-right: 15px;
}
.quote .metadata li.nomargin {
    margin: 0;
}

.quote .metadata li.date_submitted {
    float: right;
}

.quote .content {
    font-size: 13px;
    margin-top: 20px;
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Add css to *supposedly* wrap text in a <pre> tag


body {
	background: blue;
	color: white;

}

h1 {
	font-style: Helvetica;
	color: red;
}

.boarding {
	padding: 25px 25px 25px 25px;
	border: solid;

}

#margin {
	margin-left: 25px;
}

#center {
	margin: auto;
}

a:visited {
	color: green;
}
a:link {
	color: red;
}

div {
	background-image: tahoeimage.jpg;
}

body {
	background: blue;
	color: white;
	width: 100%;

}
header {
	text-align:center;
}

h1 {
	font-style: Helvetica;
	color: red;
	width: 100%;
}

.boarding {
	padding: 25px 25px 25px 25px;
	border: solid;

}

#margin {
	margin-left: 25px;
}

#center {
	margin: auto;
}

a:visited {
	color: green;
}
a:link {
	color: red;
}

div {
	background-image: tahoeimage.jpg;
	 background-size: 100px 80px;
}

Add margin and text color

Add margin and text color


.basicTabs-container .tabs-list,
.dynamicTabs-container .tabs-list {
  text-align: left;
  width: 100%;
}
.basicTabs-container .tabs-list .tab-item,
.dynamicTabs-container .tabs-list .tab-item {
  font-weight: 600;
  font-size: 13px;
  display: inline-block;
  padding: 13px 15px;
  margin: 0;
  list-style: none;
  cursor: pointer;
}
.basicTabs-container .tabs-list .tab-item.active,
.dynamicTabs-container .tabs-list .tab-item.active {
  border-radius: top 5px;
  border: 1px solid #ddd;
  border-bottom: none;
  margin-bottom: -1px !important;
  padding: 12px 14px 14px 14px !important;
  background-color: #fff;
  color: #333;
}
.basicTabs-container .tabs-content-container,
.dynamicTabs-container .tabs-content-container {
  padding: 15px;
  border-top: 1px solid #ddd;
}
.basicTabs-container .tabs-content,
.dynamicTabs-container .tabs-content {
  display: none;
}
.basicTabs-container .tabs-content.active,
.dynamicTabs-container .tabs-content.active {
  display: block;
}

.basicTabs-container .tabs-list,
.dynamicTabs-container .tabs-list {
  text-align: left;
  width: 100%;
}
.basicTabs-container .tabs-list .tab-item,
.dynamicTabs-container .tabs-list .tab-item {
  font-weight: 600;
  font-size: 13px;
  display: inline-block;
  padding: 13px 15px;
  margin: 0;
  list-style: none;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.basicTabs-container .tabs-list .tab-item.active,
.dynamicTabs-container .tabs-list .tab-item.active {
  border-radius: top 5px;
  border: 1px solid #ddd;
  border-bottom: none;
  margin-bottom: -1px !important;
  padding: 12px 14px 14px 14px !important;
  background-color: #fff;
  color: #333;
}
.basicTabs-container .tabs-content-container,
.dynamicTabs-container .tabs-content-container {
  padding: 15px;
  border-top: 1px solid #ddd;
}
.basicTabs-container .tabs-content,
.dynamicTabs-container .tabs-content {
  display: none;
}
.basicTabs-container .tabs-content.active,
.dynamicTabs-container .tabs-content.active {
  display: block;
}

Disable text highlighting in tabs

Disable text highlighting in tabs


@import 'base';
@import 'input';

.darkTheme {}
.unpinned {}

.form {
  padding: 2.4rem 1.2rem;
  padding-top: 10px;
  border-radius: 5px;
}
  .formInput {
    @extend input;
    border: 0;
    height: 50px;
    display: block;
    padding: 1.2rem 1rem;
    line-height: 2.4rem;
    width: 100%;
    resize: none;
    color: $fgPrimary;
    border: 1px solid $borderColorLight;
    border-radius: 5px;

    :global(.dark) & {
      color: $fgPrimaryDark;
      background-color: $bgPrimaryDark;
      border: 1px solid $borderColorDark;
    }

    :global(.unpinned) & {
      background-color: $bgPrimary;
      box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
      border: 1px solid white;

      :global(.dark) & {
        background-color: $bgPrimaryDark;
      }
    }
  }

@import 'base';
@import 'input';

.darkTheme {}
.unpinned {}

.form {
  padding: 2.4rem 1.2rem;
  padding-top: 10px;
  border-radius: 5px;
}
  .formInput {
    @extend input;
    border: 0;
    height: 50px;
    display: block;
    padding: 1.2rem 1rem;
    line-height: 2.4rem;
    width: 100%;
    resize: none;
    color: $fgPrimary;
    border: 1px solid $borderColorLight;
    border-radius: 5px;

    :global(.dark) & {
      color: $fgPrimaryDark;
      background-color: $bgPrimaryDark;
      border: 1px solid $borderColorDark;
    }

    :global(.unpinned) & {
      background-color: $bgPrimary;
      box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
      border: 1px solid $bgPrimary;

      :global(.dark) & {
        background-color: $bgPrimaryDark;
        border-color: $bgPrimaryDark;
      }
    }
  }

Fix chat compose area movement during pinning/unpinning.


.sliderBlank .irs-bar-edge, .sliderBlank .irs-bar {
background: none;
border: none;
}

div#shiny-disconnected-overlay:before {
	content: "Your session has timed out. Please reload to start a new session";
	text-align: center;
	font-size: 50pt;
	background-color: white;
	padding: 5%;
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

Add time out information to css styling

Add time out information to css styling

see forum oa https://support.openanalytics.eu/t/improving-time-out-screen/224/2


.td-todo-label {
	font-size: 1.5em;
	max-width: 200px;
}

.td-todo-element {
	border-bottom: #D7D7D7 1px solid;
}

.td-categories-sidebar {
	width: 50px;
}

.td-todo-label {
	font-size: 1.5em;
	max-width: 200px;
}

.td-todo-element {
	border-bottom: #D7D7D7 1px solid;
}

.td-categories-sidebar {
	width: 100px;
}

Increase the width of the sidebar

Increase the width of the sidebar


/* setting full-screen responsive background image to page */
html {
    background-image: url('./images/drum-background.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* setting font of the whole body text */
body {
    font-family: Calibri, sans-serif;
}

/* defining style for a key container */
.key-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

/* defining style for a single key */
.key {
    border: 3px solid black;
    border-radius: 5px;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.4);
    text-align: center;
    padding: 6px 12px;
    margin: 15px;
    box-shadow: 0 0 1px rosybrown;
    transition: all 0.6s ease-in-out;
}

/* defining style for a single alphabetical letter inside the key */
kbd {
    font-size: 32px;
    display: block;
    color: rosybrown;
}

/* defining style for the sound word inside the key */
.sound {
    color: white;
    font-size: 16px;
}

/* setting full-screen responsive background image to page */
html {
    background-image: url('./images/drum-background.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* setting font of the whole body text */
body {
    font-family: Calibri, sans-serif;
}

/* defining style for a key container */
.key-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

/* defining style for a single key */
.key {
    border: 3px solid black;
    border-radius: 5px;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.4);
    text-align: center;
    padding: 6px 12px;
    margin: 15px;
    transition: all 0.6s ease-in-out;
}

/* defining style for a single alphabetical letter inside the key */
kbd {
    font-size: 32px;
    display: block;
    color: rosybrown;
}

/* defining style for the sound word inside the key */
.sound {
    color: white;
    font-size: 16px;
}

Remove box shadow from key

Remove box shadow from key


#top {
	text-align: center;
}

#GPs {
	text-align: center;
}

.gamepad {
	text-align: left;
	background: #BFBFBF;
	padding: 20px;
	margin-bottom: 20px;

	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

.gamepad h2 {
	margin: 0;
}

.btnDiagram {
    display: inline-block;
    width: 200px;
    height: 121px;
    background: red;
}

.info {
    display: inline-block;
    background: blue;
}

#top {
	text-align: center;
}

#GPs {
	text-align: center;
}

.gamepad {
	text-align: left;
	background: #BFBFBF;
	padding: 20px;
	margin-bottom: 20px;

	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

.gamepad h2 {
	margin: 0;
}

.btnDiagram {
    display: inline-block;
    width: 200px;
    height: 121px;
    background: red;
}

.info {
    display: inline-block;
    background: blue;
    height: 121px;
}

Set a static height for the info div

Set a static height for the info div


.click-heading {
   cursor: pointer;
}

.info-tag {
   padding-right: 10px;
   font-weight: bold;
}

.pull {
   max-width: 358px;
}

div.refresh {
   cursor: pointer;
   float: right;
   padding: 5px;
}

div.refresh:hover {
   color: blue;
}

.sig-count {
   margin: 0;
}

.avatar {
   width: 22px;
   margin: 2px 3px 0 0;
}

button.navbar-btn {
   margin:8px;
}

Add margins to navbar buttons

Add margins to navbar buttons

When deploy_blocked Pulls and Ready Pulls exist as buttons in the navbar, they
don't have any spacing between them. This adds a small amount of spacing
between them so that they looked less smashed.

I'm open to creating another CSS class for the navbar buttons, but
`navbar-btn` seemed pretty specific to me.


/*

  SYSTEM FONTS

*/

html,
body {
  font-family: -apple-system,
               avenir, 'avenir next',
               roboto, noto,
               'helvetica neue', helvetica,
               ubuntu,
               arial,
               sans-serif;
}

/*

  https://webkit.org/blog/3709/using-the-system-font-in-web-content/

*/

/*

  SYSTEM FONTS

*/

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

/*
  Reference:

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

*/

Remove html, body selectors in favor of class


p {
    margin: 0em 0em 5em;
}

table, td, tr {
    border: 1px solid black;
    border-collapse: collapse;
}

td.subject {
    width: 20em;
    text-align: center;
    font-size: 0.8em;
}

Add CSS for the schedule popup

Add CSS for the schedule popup


*{margin:0;}
h1{padding-bottom:10px;}
h4{float:right;margin-top:10px;}
p{margin:20px 0;}

img{width:200px;
  height:100px;
  position: relative;
  left:400px;
}

.container{
  width:960px;
  margin:0 auto;
  border-left:4px solid #000000;
  border-right:4px solid #000000;
  padding:0 20px;
  background-color: #FFFFFF;
}
main{
  background-color: #999999;
  margin:0 auto;
  height: 100%;
}
.logo{background-color: orange}
footer{background-color: orange;height:50px;}

body, html{min-height:100%;background-color: #999999;}
*{margin:0;}
h1{padding-bottom:10px;}
h4{float:right;margin-top:10px;}
p{margin:20px 0;}

img{width:200px;
  height:100px;
  position: relative;
  left:400px;
}

.container{
  width:960px;
  margin:0 auto;
  border-left:4px solid #000000;
  border-right:4px solid #000000;
  padding:0 20px;
  background-color: #FFFFFF;
  position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}
main{

  margin:0 auto;
  min-height: 100%;
}
.logo{
  background-color: orange;
  position: absolute;
  right: 0; top: 0; left: 0;
}
footer{
  width: 100%;
  background-color: orange;
  height:50px;
  position: absolute;
  right: 0; bottom: 0; left: 0;
}

Make website fill entire broswer window

Make website fill entire broswer window


.reveal .text-bg {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 1em;
  padding-bottom: 3em;
}

.reveal .photo-credit {
  position: absolute;
  font-size: small;
  bottom: 1em;
  color: #aaa;
}

.reveal .text-bg {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 1em;
  padding-bottom: 2em;
}

.reveal .photo-credit {
  position: absolute;
  font-size: x-small;
  bottom: 1em;
  color: #888;
}

.reveal .photo-credit a {
  color: #ccc;
}

Adjust text and link color in photo credit.


body {
	background-color: #222222;
}
.bg-primary {
	background-color: #375a7f !important;
}
.card {
	background-color: #303030 !important;
	border: 1px solid transparent;
	color: #fff;
}
.panel-body {
	background-color: #303030 !important;
}

Update panels in AdminCP night theme

Update panels in AdminCP night theme

Update panels to make them darker in the AdminCP night theme


.ScheduleSlot {
  border: 1px solid #fff;
  box-sizing: border-box;
  display: block;
  float: left;
  height: 76px;
  opacity: 1;
  position: relative;

  &--tone-light {
    color: var(--show-tone-dark);
  }

  &--active {
    opacity: 1;
  }

  &__inner {
    background: #e2e2e2;
    box-sizing: border-box;
    color: var(--show-tone-dark);
    display: block;
    height: 100%;
    mix-blend-mode: darken;
    padding: 0.25rem 0.5rem;
    text-decoration: none;
    width: 100%;
  }

  &__show-name {
    font-weight: 700;
    font-size: 0.95rem;
  }

  &__time {
    font-size: 0.8em;
    margin-bottom: 0.2rem;
    font-weight: 400;
  }

  &__time-item {
    &--continuation {
      opacity: 0.6;
    }
  }

  &--on-air {
    border: 0;
    position: relative;
    z-index: var(--layer-on-air);
    transform: scale(1.1);
  }
}

.ScheduleSlot--on-air .ScheduleSlot__inner {
  font-size: 0.9em;
}

.ScheduleSlot--tone-light .ScheduleSlot__inner {
  color: var(--show-tone-light);
}

.ScheduleSlot {
  border: 1px solid #fff;
  box-sizing: border-box;
  display: block;
  float: left;
  height: 86px;
  opacity: 1;
  position: relative;

  &--tone-light {
    color: var(--show-tone-dark);
  }

  &--active {
    opacity: 1;
  }

  &__inner {
    background: #e2e2e2;
    box-sizing: border-box;
    color: var(--show-tone-dark);
    display: block;
    height: 100%;
    mix-blend-mode: darken;
    padding: 0.25rem 0.5rem;
    text-decoration: none;
    width: 100%;
  }

  &__show-name {
    font-weight: 700;
    font-size: 0.95rem;
  }

  &__time {
    font-size: 0.8em;
    margin-bottom: 0.2rem;
    font-weight: 400;
  }

  &__time-item {
    &--continuation {
      opacity: 0.6;
    }
  }

  &--on-air {
    border: 0;
    position: relative;
    z-index: var(--layer-on-air);
    transform: scale(1.1);
  }
}

.ScheduleSlot--on-air .ScheduleSlot__inner {
  font-size: 0.9em;
}

.ScheduleSlot--tone-light .ScheduleSlot__inner {
  color: var(--show-tone-light);
}

Fix slot height for three lines

Fix slot height for three lines

Closes #30


/* When an inline has fieldsets, we don't use a blue heading, otherwise the
 * inline fieldset's heading is confused with the inline's heading.
 */

.inline-related h2 {
  color: #666;

  background-color: #f8f8f8;
}

.inline-related h2 .collapse-toggle {
  color: #447e9b;
}

/* DJANGO ADMIN */

.help {
  max-width: 30em;
}

Reduce with of help text in admin

Reduce with of help text in admin


body {
  color: #000080;
  background-color: #ffffff;
  display: block;
}
header {
  font-weight: bold;
  text-align: center;
}
.line-break {
  display: block;
}
.home-page {
  padding-bottom: 15px;
}
a {
  color: #800080;
}
li {
  padding-bottom: 30px;
}
a:visited {
  color: #ff0000;
}
.float {
  float: left;
}
.clearfix {
  clear: both;
}
.small {
  font-size: 10px;
}
.address {
  font-size: 12px;
}
.big {
  font-size: 28px;
}
.width {
  width: 1200px;
  margin: 0 auto;
}
.border {
  border-bottom: 1px solid #a9a9a9;
  margin-bottom: 15px;
}
.border-height {
  border-bottom: 1px solid #a9a9a9;
  height: 430px;
  margin-bottom: 15px;
}
.geico {
  text-align: center;
  padding-bottom: 15px;
}
.bold {
  font-weight: bold;
}
.small-font {
  font-size: 12px;
}
footer span  {
  padding-top: 15px;
}

/*
What is important to know when linking an external file (like a stylesheet) to an HTML file?
It is important to add a <link> tag in the header of the HTML file when linking to an external stylesheet. You must also add the relative link to the stylesheet within the link.

What tricks did you use to help you with positioning? How hard was it to get the site as you wanted it?
We used a combination of margin and padding to adjust the positioning of the elements. Without looking at the actual source code, it is alway difficult to get a pixel perfect rendition. It basically comes down to trial and error until you get something that looks similar.

What CSS did you use to modify the element style (like size, color, etc.)
The CSS we used to modify the element styles like size, color, etc was:
.element {
  text-size: 10px; (changes the size of the text)
  color: #ff0000; (changes the color of the text to red)
  background-color: #ffffff; (changes the background color to white)
}

Did you modify the HTML to include classes or ids? If so, which did you choose and why? If you didn't, how would you know which one to add to your HTML?
We chose to include classes to the existing HTML, primarily because classes can be reused eliminating some repetition.

When you compared your site to the actual code base, which do you think had cleaner code that followed best practices and why?
Obviously the site we created is cleaner and follows best practice. Not only was our HTML mark-up more up-to-date, but we did not include in-line css.

*/

Add css stylesheet and update HTML for the my-berkshire-site pairing session


/* Override body padding in style.css */
body {
    padding-top: 0;
}

/* Override banner in style.css */
#banner h1 {
    font-stretch: normal;
    text-transform: none;
    font-family: "Open Sans",Calibri,Candara,Arial,sans-serif;
    font-size: 50px;
}

.footnote {
    font-size: 90%;
}

a.article-link:visited {
    color: #aaa;
}

/* Fix for Chromium wrapping the dates in archive list */
.archive-date {
    white-space: nowrap;
}

/* Add scroll bars to code snippets */
.highlight pre {
    word-wrap: normal;
    white-space: pre;
}

.article-figure {
    margin-bottom: 16px;
}

.article-figure img,
.article-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.article-figure figcaption {
    text-align: center;
}

/* Reset any browser padding on lists */
ul,
ol {
    padding-left: 40px;
    margin: 0;
}

/* So that we can then break out of a list e.g. to centre images on page */
.break-out-of-list {
    margin-left: -40px;
}

Add class for breaking out of list padding

e.g. for image centring.


.floatright {
    float: right;
    margin: 1ex 0 1ex 1em;
}
.clearfix:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}
figcaption h4 {
    font-style: italic;
}
.floatright figure {
    margin: 1ex 0;
}
.floatbox {
    float: right;
}
.floatbox pre {
    margin: 0 !important;
}

Add floatbox & fix code within

Add floatbox & fix code within


.grid {
  display: flex;
  flex-wrap: wrap;
  margin: -20px 0 0 -20px;
}
.grid .cell {
  flex: 1 0 33.3333%;
  padding: 20px 0 0 20px;
}
.grid .cell.wider {
  flex: 1 0 66.6666%;
}

.grid .cell a {
  color: currentColor;
  text-decoration: none;
}
.grid .cell a:hover .box {
  background-color: #f4f4f4;
}

.grid .cell .box {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cell-icon {
  font-size: 5rem; /* 80px / 16px */
  left: 0.25rem;
  opacity: 0.075;
  position: absolute;
  top: 2rem;
}
.grid .cell .box :first-child {
  margin-top: 0;
  padding-top: 0;
}
.grid .cell .box :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.bigstats {
  margin-bottom: 0;
}
.bigstats figcaption {
  font-weight: normal;
}

.hyphenate {
  -moz-hyphens: auto;
  hyphens: auto;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  margin: -20px 0 0 -20px;
}
.grid .cell {
  flex: 1 0 33.3333%;
  padding: 20px 0 0 20px;
}
.grid .cell.wider {
  flex: 1 0 66.6666%;
}

.grid .cell a {
  color: currentColor;
  text-decoration: none;
}
.grid .cell a:hover .box {
  background-color: #f4f4f4;
}

.grid .cell .box {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cell-icon {
  font-size: 5rem; /* 80px / 16px */
  opacity: 0.075;
  position: absolute;
  right: 0.25rem;
  top: 0;
}
.grid .cell .box :first-child {
  margin-top: 0;
  padding-top: 0;
}
.grid .cell .box :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.bigstats {
  margin-bottom: 0;
}
.bigstats figcaption {
  font-weight: normal;
}

.hyphenate {
  -moz-hyphens: auto;
  hyphens: auto;
}

Align dashboard icons to the top right

Align dashboard icons to the top right


table {
    border-collapse: collapse;
}

table, tr, th, td {
    border: 1px solid #9E9E9E;
    padding: 0 5px;
}

td {
    white-space: pre;
}

table {
    border-collapse: collapse;
}

table, tr, th, td {
    border: 1px solid #9E9E9E;
    padding: 0.25em 0.25em;
}

td {
    white-space: pre;
}

Add more padding to tables

Add more padding to tables


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

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

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

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

.ViewDocumens .dnnGrid { margin-bottom:0 }

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

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

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

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

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

.ViewDocuments .dnnGrid { margin-bottom:0 }

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

Fix typo in ViewDocuments CSS class name


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

.loading-logo {
  background: url('/static/img/cg-logo.svg') no-repeat center;
  background-size: 100% 100%;
  height: 175px;
  left: 50%;
  max-width: calc(100% - 32px);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 550px;
}

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

.loading-logo {
  background: url('/static/img/cg-logo.svg') no-repeat center;
  background-size: contain;
  height: 175px;
  left: 50%;
  max-width: calc(100% - 32px);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 550px;
}

Fix css for loading logo.

Fix css for loading logo.


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

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

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

Adjust sidebar margin on project overview page


* {
    font-family: Helvetica;
    font-size: x-large;
}

table {
    border-collapse:collapse;
}

table, td, th {
    border:1px solid black;
}

th {
    background:#93A5BB;
    color:white;
    font-weight:normal;
    padding: 1px 10px 1px 10px;
}

td {
    background:lightgray;
    padding: 1px 30px 1px 7px;
}

.sudah {
    background:green;
}

.unprecedented {
    background:#FFA500;
}

.enlarged-button {
    padding: 5px 10px 5px 10px;
}

* {
    font-family: Helvetica;
    font-size: x-large;
}

body {
    margin:0px;
    padding:0px;
}

div#aircraft_type_list p,
div#aircraft_type_list ul {
    display:inline;
}

div#aircraft_type_list ul {
    padding: 0px;
}

div#content {
    padding: 8px;
}

div#header {
    background:#86D3FF;
    border-bottom-color:#0B73F7;
    border-bottom-style:solid;
    border-bottom-width:2px;
    margin:0px;
    padding: 1px 20px 1px 20px;
}

div#messages li.success {
    color:green;
}

div#messages li.error {
    color:red;
}

form ul li {
    display:inline;
}

table {
    border-collapse:collapse;
}

table, td, th {
    border:1px solid black;
}

th {
    background:#93A5BB;
    color:white;
    font-weight:normal;
    padding: 1px 10px 1px 10px;
}

td {
    background:lightgray;
    padding: 1px 30px 1px 7px;
}

div#messages ul, form ul {
    list-style-type:none;
}

.errorlist {
    color:red;
}

.sudah {
    background:green;
}

.unprecedented {
    background:#FFA500;
}

.enlarged-button {
    padding: 5px 10px 5px 10px;
}

Add colors and improve form layout

Add colors and improve form layout

Mostly affects the add/remove page, but they all benefit from the header update


/* Metric Add view CSS
-----------------------------------------------------------------------------------------------------------*/

#metric-add  .ajax-loader {
    display: inline;
    float: right;
    margin-top: 1px;
}

@-moz-document url-prefix() {
    #metric-add  .ui-collapsible .ajax-loader {
        margin-top: -19px;
    }
}

#metric-add .ui-btn {
	margin: 0;
}

#metric-add .margin {
    width: 20px;
    height: 1em;
    float: left;
}

#metric-add {
}

#metric-add .nest {
    display: none;
}

#metric-add-popup {
    padding-bottom: 40px !important;
}

#metric-add .ajax-loader {
    width: 100%;
    margin-top: 1em;
    margin-bottom: -1.5em;
}

#metric-add #overlay {
    height: 100%;
    width: 100%;
    z-index: 10000000;
    background-color: black;
    display: inline-block;
    position: absolute;
    opacity: 0.35;
}

/* Metric Add view CSS
-----------------------------------------------------------------------------------------------------------*/

#metric-add  .ajax-loader {
    display: inline;
    float: right;
    margin-top: 1px;
}

@-moz-document url-prefix() {
    #metric-add  .ui-collapsible .ajax-loader {
        margin-top: -19px;
    }
}

#metric-add .ui-btn {
	margin: 0;
}

#metric-add .margin {
    width: 20px;
    height: 1em;
    float: left;
}

#metric-add .end-node {
    padding-left: 40px;
}

#metric-add .nest {
    display: none;
}

#metric-add-popup {
    padding-bottom: 40px !important;
}

#metric-add .ajax-loader {
    width: 100%;
    margin-top: 1em;
    margin-bottom: -1.5em;
}

#metric-add #overlay {
    height: 100%;
    width: 100%;
    z-index: 10000000;
    background-color: black;
    display: inline-block;
    position: absolute;
    opacity: 0.35;
}

Add left padding to end metric nodes

Add left padding to end metric nodes


body {
    font-family: 'Verdana', sans-serif;
    margin: 50px 25px;
}

a {
    color: #2a99b6;
}

a:hover {
    color: #33bbdf;
}

header, footer, div.page {
    width: 760px;
    margin: 0 auto;
    background: #daeef3;
    padding: 20px 30px;
}

header h1 {
    color: #169bbd;
    margin: 0;
    font-weight: normal;
    font-size: 42px;
}

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

header nav ul li {
    display: inline;
    margin: 0 8px 0 0;
    padding: 0;
}

div.page {
    background: #f1fbfe;
}

body {
    font-family: "Droid Sans", Futura, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

header, footer, div.page {
    margin: 0 auto;
}

header h1 {
    margin: 0;
}

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

header nav ul li {
    display: inline;
    padding: 0;
}

@media(min-width: 600px) {
  body {
    font-size: 18px;
  }
}

@media(min-width: 1000px) {
  body {
    font-size: 20px;
  }
}

Remove the awful default and set responsive font-sizes


code, kbd, pre, samp {
  font-family: monospace !important;
}

.ace_cursor {
  animation: none !important;
}

head[prefix~="medium-com:"] + body .metabar {
  position: relative !important;
}

@-moz-document domain(github.com) {
  .blob-code-inner,
  .blob-num,
  .commit-ref,
  .commit-tease-sha,
  .file-info,
  .sha,
  .sha-block {
    font-family: monospace !important;
  }

  .blob-code-inner,
  .blob-num,
  .file-info {
    font-size: 14px !important;
  }

  .comment-body code,
  .comment-body kbd,
  .comment-body pre,
  .comment-body samp {
    font-size: inherit !important;
  }
}

code, kbd, pre, samp {
  font-family: monospace !important;
}

.ace_cursor {
  animation: none !important;
}

.jsonPanelBox .panelContent .treeTable {
  font-family: monospace !important;
  font-size: 14px !important;
}
.jsonPanelBox .panelContent .treeTable .treeIcon {
  font-size: 14px !important;
}

head[prefix~="medium-com:"] + body .metabar {
  position: relative !important;
}

@-moz-document domain(github.com) {
  .blob-code-inner,
  .blob-num,
  .commit-ref,
  .commit-tease-sha,
  .file-info,
  .sha,
  .sha-block {
    font-family: monospace !important;
  }

  .blob-code-inner,
  .blob-num,
  .file-info {
    font-size: 14px !important;
  }

  .comment-body code,
  .comment-body kbd,
  .comment-body pre,
  .comment-body samp {
    font-size: inherit !important;
  }
}

firefox: Increase font size of built-in JSON renderer


.reveal .text-bg {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 1em;
  padding-bottom: 2em;
}

.reveal .photo-credit {
  position: absolute;
  font-size: x-small;
  bottom: 1em;
  color: #888;
}

.reveal .photo-credit a {
  color: #ccc;
}

dt {
  color: #00C5CD;
}

.reveal .slides section .fragment.highlight-current-teal {
  opacity: 1;
  visibility: visible;
}
.reveal .slides section .fragment.highlight-current-teal.current-fragment {
  color: #00C5CD;
}

.reveal blockquote {
  background: rgba(255, 255, 255, 0.25);
}

.about-me {
  position: absolute;
  top: -9em;
  right: -3em;
  text-align: right;
}

.about-me h1 {
  margin-bottom: 0;
}

.reveal .text-bg {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 1em;
  padding-bottom: 2em;
}

.reveal .photo-credit {
  position: absolute;
  font-size: x-small;
  bottom: 1em;
  color: #888;
}

.reveal .photo-credit a {
  color: #ccc;
}

dt {
  color: #00C5CD;
}

.reveal .slides section .fragment.highlight-current-teal {
  opacity: 1;
  visibility: visible;
}
.reveal .slides section .fragment.highlight-current-teal.current-fragment {
  color: #00C5CD;
}

.reveal blockquote {
  background: rgba(255, 255, 255, 0.25);
}

.about-me {
  position: absolute;
  top: -9em;
  right: -.5em;
  text-align: right;
}

.about-me h1 {
  margin-bottom: 0;
}

Adjust positioning for low resolution.

Adjust positioning for low resolution.


fieldset {
	padding: 0px;
}
fieldset legend {
	cursor: pointer; cursor: hand;
}
fieldset legend:hover {
	background: #eee;
}

#addattributesb {
	margin-right: .2em;
}
table.attributes {
	width: 100%;
	margin: 0px;
	border: 0px;
	border-collapse: collapse;
}

table.attributes td.attrname {
	text-align: right;
}
table.attributes tr.even td {
	background: #eee;
}

table.attributes tr td {
	border-bottom: 1px solid #bbb;
	border-left: 0px;
	border-right: 0px;

	padding-top: 5px;
	padding-left: 1em;
	padding-right: 1em;

	vertical-align: top;
}
table#table_with_attributes tr:last-child td {
	border-bottom: none;
}
td.attrvalue img {
	border: 1px solid #777;
	margin: 4px;
}

table#table_with_attributes td.attrname {
	color: #555;
	font-weight: light;
	font-size: 90%;
}
table#table_with_attributes ul {
	margin: 0px;
}

Make attribute names look a bit different form the values

git-svn-id: a243b28a2a52d65555a829a95c8c333076d39ae1@1268 44740490-163a-0410-bde0-09ae8108e29a


.not-implemented {
  color: rgba(0, 0, 255, 0.5) !important;
  background-color: #ddf !important;
  /*display: none;*/
}
.not-implemented * {
  color: rgba(0, 0, 255, 0.5) !important;
  background-color:  #ddf !important;
  /*display: none;*/
}

.not-implemented {
  color: rgba(0, 0, 255, 0.5) !important;
  background-color: #ddf !important;
  display: none;
}

.not-implemented  * {
    color: rgba(0, 0, 255, 0.5) !important;
    background-color:  #ddf !important;
    display: none !important;
}

Hide unimplemented stuff for presentation


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

h1, footer {
  background-color: #000;
  color: #fff;
  margin: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}

h1 {
  text-align: center;
}

h1, h2, span {
  text-transform: uppercase;
}

h2 {
  background-color: #000;
  color: #fff;
  text-align: center;
}

span {
  color: blue;
}

footer{
  padding-left: 20px;
}

#columns {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    padding-bottom: 30px;
}

.column-1 {
    width: 50%;
    height: 1000px;
    padding: 30px;
    margin-left: 50px;
}

.column-2 {
    width: 50%;
    height: 1000px;
    padding: 30px;
}

.query-statement {
  background-color: grey;
}

/*Base Rules*/
body {
  margin: 0;
  height: 100%;
  width: 100%;
}

h1, footer {
  background-color: #000;
  color: #fff;
  margin: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}

h1 {
  text-align: center;
}

h1, h2, span {
  text-transform: uppercase;
}

h2 {
  background-color: #000;
  color: #fff;
  text-align: center;
}

span {
  color: blue;
}

footer{
  padding-left: 20px;
}

/*Module Rules*/
#columns {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    padding-bottom: 30px;
}

.column-1 {
    width: 50%;
    height: 1000px;
    padding: 30px;
    margin-left: 50px;
}

.column-2 {
    width: 50%;
    height: 1000px;
    padding: 30px;
}

Add style rules to css sheet

Add style rules to css sheet


/* Make something awesome! */

.cardstack {
    border: 3px solid rgb(18, 46, 83);
}

span.clickWholeDiv {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    /* edit: added z-index */
    z-index: 1;

    /* edit: fixes overlap error in IE7/8,
       make sure you have an empty gif */
    background-image: url('empty.gif');
}

.cardstack:hover {
    border: 3px solid #d0d0d0;
}

.card-overview {
    border: 3px solid rgb(18, 46, 83);
}

.card-overview:hover {
    border: 3px solid #d0d0d0;
}

Add base css for cardbox app

Add base css for cardbox app


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

#map {
    width: 100%;
    height: 100%;
}

body {
    font: 16px/1.4 "Helvetica Neue", Arial, sans-serif;
}

.custom_window {
    background: #ffffff;
    color: #000000;
    width: 200px;
    height: 50px;
}

.close_btn {
    position: relative;
    top: 0px;
    left: 180px;
    cursor: pointer;
    color: #ff0000;
}

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

#map {
    width: 100%;
    height: 100%;
}

body {
    font: 16px/1.4 "Helvetica Neue", Arial, sans-serif;
}

.custom_window {
    background: #ffffff;
    color: #000000;
    width: 200px;
    height: 80px;
}

.close_btn {
    position: relative;
    top: 0px;
    left: 180px;
    cursor: pointer;
    color: #ff0000;
}

Update custom info window demo.

Update custom info window demo.


@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:700);

.header {
    font-family: 'Roboto Mono';
}

.header h1 {
    font-size: 54px;
    text-align: center;
    margin-bottom: 0;
}

.header ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0;
    max-width: 480px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
}

.header li {
    display: inline-block;
}

@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:700);

body {
    font-family: 'Roboto Mono';
}

.header h1 {
    font-size: 54px;
    text-align: center;
    margin-bottom: 0;
}

.header ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0;
    max-width: 480px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
}

.header li {
    display: inline-block;
}

Move font-family declaration to body

Move font-family declaration to body


body{
    font-family: arial;
    font-size:18px;
    color:#333;
    margin: 0;
    padding:0;
}

header{
    height:130px;
    padding-top:40px;
    background:#f4f4f4;
    text-align: center;
    border-bottom: #333 3px solid;

}

h1#heading{
    margin: 0;
    padding: 0;
}

#container{
    width:960px;
    margin:20px auto;
    padding: 20px;
    overflow:auto;

}

Add styling to the html file

Add styling to the html file


.panelists-section {
  background-color: #141414;
  lost-utility: clearfix;

  @media only screen and (min-width : 1400px) {
    background-image: url(resources/images/confetti-dark.svg);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 400px 220px;
  }

  &__container {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 20px;
  }

  &__heading {
    text-align: center;
    color: #e2d046;
    font-size: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 20px;
    margin-bottom: 20px;

    @media only screen and (min-width : 800px) {
      text-align: left;
      font-size: 1.7em;
      margin-top: 30px;
      margin-bottom: 30px;
    }
  }

  .person__details__text--twitter,
  .person__details__text--name {
      color: #f8f8f8;
  }

  &__caption {
    color: #f0f0f0;
    text-align: center;
  }

  &__link {
    color: #f0f0f0;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
  }
}

.panelists-section {
  background-color: #141414;
  lost-utility: clearfix;

  @media only screen and (min-width : 1000px) {
    background-image: url(resources/images/confetti-dark.svg);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 400px 220px;
  }

  &__container {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 20px;
  }

  &__heading {
    text-align: center;
    color: #e2d046;
    font-size: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 20px;
    margin-bottom: 20px;

    @media only screen and (min-width : 800px) {
      text-align: left;
      font-size: 1.7em;
      margin-top: 30px;
      margin-bottom: 30px;
    }
  }

  .person__details__text--twitter,
  .person__details__text--name {
      color: #f8f8f8;
  }

  &__caption {
    color: #f0f0f0;
    text-align: center;
  }

  &__link {
    color: #f0f0f0;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
  }
}

Reduce panelist section confetti background image breakpoint


@font-face {
  font-family: 'text-security';
  src: url('text-security-compat.eot');
  src: url('text-security-compat.eot?#iefix') format('embedded-opentype'),
      url('text-security-compat.woff2') format('woff2'),
      url('text-security-compat.ttf') format('truetype');
}

/*
  Browser detection hack to enable the optimized font in recent versions of Chromium and FF,
  which implement their own font rendering and do support cmap format 13.

  content-visibility is currently only supported in Chrome & Edge version 85+ & Chrome for Android
  -moz-is-html only lets Firefox through
  -webkit-hyphens explicitly excludes Safari in case they later add support for content-visibility
*/
@supports ((content-visibility: visible) or selector(:-moz-is-html)) and (not (-webkit-hyphens: none)) {
  @font-face {
    font-family: 'text-security';
    src: url('text-security.woff2') format('woff2'),
      url('text-security-compat.ttf') format('truetype');
  }
}

@font-face {
  font-family: 'text-security';
  src: url('text-security-compat.eot');
  src: url('text-security-compat.eot?#iefix') format('embedded-opentype'),
      url('text-security-compat.woff2') format('woff2'),
      url('text-security-compat.ttf') format('truetype');
}

/*
  Browser detection hack to enable the optimized font in recent versions of Chromium and FF,
  which implement their own font rendering and do support cmap format 13.

  content-visibility is currently only supported in Chrome & Edge version 85+ & Chrome for Android
  -moz-appearance only lets Firefox through
  -webkit-hyphens explicitly excludes Safari in case they later add support for content-visibility
*/
@supports ((content-visibility: visible) or (-moz-appearance:meter)) and (not (-webkit-hyphens: none)) {
  @font-face {
    font-family: 'text-security';
    src: url('text-security.woff2') format('woff2'),
      url('text-security-compat.ttf') format('truetype');
  }
}

Remove experimental "supports selector" check

@supports (selector (..)) is fairly new and experimental CSS feature and
at least some older versions of postcss don't seem to support it,
breaking builds.

Replace the selector check with standard supports check for
-moz-appearance, which should still let only Firefox through.

Fixes #16.