/*
Copyright 2014 The Perkeep Authors

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

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

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

@import (less) "prefix-free.css";

.cam-blobitem-video {
	display: block;
}

.cam-blobitem-video a {
	text-decoration: none;
}

.cam-blobitem-video .fa-video-camera {
	color: #ccc;
	display: block;
	text-align: center;
}

.cam-blobitem-video .fa-play,
.cam-blobitem-video .fa-pause {
	cursor: default;
	position: absolute;
	left: 35%;
	top: 40%;
	color: rgba(125, 125, 125, 0.85);
	line-height: 100%;
}

.cam-blobitem-video .fa-pause {
	left: 32%;
}

.cam-blobitem-video-loaded .fa-play {
	left: 40%;
}
.cam-blobitem-video-loaded .fa-pause {
	left: 37%;
}

/*
Copyright 2014 The Perkeep Authors

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

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

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

@import (less) "prefix-free.css";

.cam-blobitem-video {
	display: block;
}

.cam-blobitem-video a {
	text-decoration: none;
}

.cam-blobitem-video .fa-video-camera {
	color: #ccc;
	display: block;
	text-align: center;
}

.cam-blobitem-video .fa-play,
.cam-blobitem-video .fa-pause {
	cursor: default;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: rgba(125, 125, 125, 0.85);
	line-height: 100%;
	cursor: pointer;
}

Fix blob item video play button styling

server/perkeepd/ui: Fix blob item video play button styling

Closes #776

Change-Id: I85c17f5478b476c06de611f759f618e608120976


html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -30px;
  padding: 0 0 30px;
}

#footer {
  height: 30px;
  background-color: #f5f5f5;
}

#wrap > .container {
  padding: 64px 16px 0;
}

.form-repo {
  max-width: 400px;
  margin: 1em auto;
}

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -30px;
  padding: 0 0 30px;
}

#footer {
  height: 30px;
  background-color: #f5f5f5;
}

#wrap > .container {
  padding: 64px 16px 0;
}

.top-libraries {
  margin: 6em auto;
}

.form-repo {
  max-width: 400px;
  margin: 1em auto;
}

Fix margin for top libraries block

Fix margin for top libraries block


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

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

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 text-align:left instead of justify for a Readability view.

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


/**
 * React Starter Kit (https://www.reactstarterkit.com/)
 *
 * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.txt file in the root directory of this source tree.
 */

@import '../variables.css';

.root {
  background: white;
  color: var(--black);
  position: relative;
  /*bottom: 0;
  left:0;
  right:0;*/
  z-index: var(--z-index-footer);
}

.container {
  margin: 0 auto;
  padding: 20px 15px;
  max-width: var(--max-content-width);
  text-align: center;
}

.text {
  color: rgba(0, 0, 0, 0.5);
}

.textMuted {
  composes: text;
  color: rgba(0, 0, 0, 0.3);
}

.spacer {
  color: rgba(0, 0, 0, 0.3);
}

.text,
.link {
  padding: 2px 5px;
  font-size: 1em;
}

.link,
.link:active,
.link:visited {
  color: rgba(0, 0, 0, 0.6);
  text-decoration: none;
}

.link:hover {
  color: rgba(0, 0, 0, 1);
}

/**
 * React Starter Kit (https://www.reactstarterkit.com/)
 *
 * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.txt file in the root directory of this source tree.
 */

@import '../variables.css';

.root {
  background: white;
  color: var(--black);
  position: relative;
  /*bottom: 0;
  left:0;
  right:0;*/
  z-index: var(--z-index-footer);
}

.container {
  margin: 0 auto;
  padding: 20px 15px;
  max-width: var(--max-content-width);
  text-align: center;
}

.text {
  color: rgba(0, 0, 0, 0.5);
}

.textMuted {
  composes: text;
  color: rgba(0, 0, 0, 0.3);
}

.spacer {
  color: rgba(0, 0, 0, 0.3);
}

.text,
.link {
  padding: 2px 5px;
  font-size: 1em;
}

.link,
.link:active,
.link:visited {
  color: rgba(0, 0, 0, 0.6) !important;
  text-decoration: none;
}

.link:hover {
  color: rgba(0, 0, 0, 1) !important;
}

Fix link color in footer

Fix link color in footer


@font-face {
    font-family: 'l-lt';
    src: url('fonts/l-lt.eot');
    src: url('fonts/l-lt.eot?#iefix') format('embedded-opentype'),
         url('fonts/l-lt.woff') format('woff'),
         url('fonts/l-lt.ttf') format('truetype'),
         url('fonts/l-lt.svg#l-lt') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    padding-top: 50px;
    color: #8B8B8B;
}

span.asteriskField {
    color: red;
    font-size: 15px;
}

.white {
    color: #fff;
}

.menu {
        text-transform:none;
}

@font-face {
    font-family: 'l-lt';
    src: url('fonts/l-lt.eot');
    src: url('fonts/l-lt.eot?#iefix') format('embedded-opentype'),
         url('fonts/l-lt.woff') format('woff'),
         url('fonts/l-lt.ttf') format('truetype'),
         url('fonts/l-lt.svg#l-lt') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    color: #8B8B8B;
}

span.asteriskField {
    color: red;
    font-size: 15px;
}

.white {
    color: #fff;
}

.menu {
        text-transform:none;
}

Reduce the blank zone at the top of each page


.menuWrapper{
  top: 0;
  width: 100%;
}

.whiteText{
  color:white;
}

.headMenu{
  display: block;
  text-align: center;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  font-size: 15px;
  font-weight: 600;
}

.scrollMenu {
  overflow: auto;
  white-space: nowrap;
  text-align: center;
  font-size: medium;
}

.catItem {
  display: inline-block;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  font-weight: 500;
}

.active {
  box-shadow: inset 0 -5px 0 0 white;
}

::-webkit-scrollbar {
  display: none;
}

.menuWrapper{
  top: 0;
  width: 100%;
}

.whiteText{
  color:white;
}

.headMenu{
  display: block;
  text-align: center;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  font-size: 15px;
  font-weight: 600;
}

.scrollMenu {
  overflow: auto;
  white-space: nowrap;
  text-align: center;
  font-size: medium;
}

.catItem {
  display: inline-block;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  font-weight: 400;
}

.active {
  box-shadow: inset 0 -5px 0 0 white;
}

::-webkit-scrollbar {
  display: none;
}

Remove bold text from categories menu.

Remove bold text from categories menu.


.logo {
    margin-top: -4px;
    font: 25px Courier New, Courier, monospace;
}

h2 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

p.examples__summary {
    margin: 0;
    font-size: 16px;
}

.jumbotron {
    padding-bottom: 30px;
}

.examples__summary-list {
    margin: 0;
}

.examples__thumbnail img {
    height: 250px;
}

.examples__hamburger-qr {
    width: 75px !important;
    height: 75px !important;
}

.hamburger__qr-container:link, .hamburger__qr-container:visited {
    color: #333;
}

.hamburger__qr {
    width: 75px;
    height: 75px;
}

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

li.active a {
    cursor: default;
}

Set cursor default on selected nav item

Set cursor default on selected nav item


/* Default entities style */
html, body {
  height: 100%;
  background: #433478;
  -webkit-tap-highlight-color: rgba(0,0,0, 0);
  -ms-user-select: none;
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
  -webkit-perspective: 1000;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

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

body {
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden;

  -webkit-transition: background-color 1.2s ease-in-out;
  -moz-transition: background-color 1.2s ease-in-out;
  transition: background-color 1.2s ease-in-out;
}

/* Our main app */
#ClocketteApp {
  padding: 20px;
}

.hr {
  height: 1px;
  background: none;
  border-bottom: solid 1px rgba(255,255,255, .3);
}

/* Default entities style */
html, body {
  height: 100%;
  background: #433478;
  -webkit-tap-highlight-color: rgba(0,0,0, 0);
  -ms-user-select: none;
  padding: 0;
  margin: 0;
}

html {
  font-size: 62.5%;
  -webkit-perspective: 1000;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

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

body {
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased !important;
  overflow-x: hidden;

  -webkit-transition: background-color 1.2s ease-in-out;
  -moz-transition: background-color 1.2s ease-in-out;
  transition: background-color 1.2s ease-in-out;
}

input[type="text"] {
  background: none;
  border: none;
  outline: none;
  border-bottom: solid 1px rgba(255,255,255, .3);
}

/* Our main app */
#ClocketteApp {
  padding: 20px;
}

.hr {
  height: 1px;
  background: none;
  border-bottom: solid 1px rgba(255,255,255, .3);
}

Redefine input type text style

Redefine input type text style


@import url("../../../styles/base.css");

.header {
	padding: 0 var(--padding);
	h2 {
		font-size: 1.5em;
	}
}

.details {
	padding: 0 var(--padding);

	::-webkit-scrollbar {
		width: 0px;
		background: transparent;
	}

	.photoStrip {
		flex: 1;
		display: flex;
		overflow: auto;

		img {
			margin: 0 1px;
		}
	}
}

.wrapper {
	overflow-y: scroll;
	display: flex;
	margin: 0;
	padding: 15px;
}

@import url("../../../styles/base.css");

.header {
	padding: 0 var(--padding);
	h2 {
		font-size: 1.5em;
	}
}

.details {
	padding: 0 var(--padding);

	::-webkit-scrollbar {
		width: 0px;
		background: transparent;
	}

	.photoStrip {
		flex: 1;
		display: flex;
		overflow: auto;

		img {
			margin: 0 1px;
		}
	}
}

.wrapper {
	overflow-y: scroll;
	display: flex;
	margin: 0;
	padding: 15px;

	height: 100vh;
	-webkit-box-orient: horizontal;
	-o-box-orient: horizontal;

	flex-direction: column;
	flex: 1;
}

Set wrapper height and flex

Set wrapper height and flex


a {
  color: #ccc;
  text-decoration: none;
}
body, td {
  color: #ddd;
  font-family: Helvetica, Arial, sans-serif;
}
body {
  background: #1d1d1d;
  margin: 0;
  padding: 0;
}
form {
  margin: 0;
}
table {
  border-collapse: collapse;
  height: 100%;
}
td {
  padding: 0 30px;
}
#left_col {
  background-color: #000;
  background-image: url(../../images/home_background.png);
  border-right: 1px solid #303030;
}
#left_col img {
  display: block;
}

a {
  color: #ccc;
  text-decoration: none;
}
body, td {
  color: #ddd;
  font-family: Helvetica, Arial, sans-serif;
}
body {
  background: #1d1d1d;
  margin: 0;
  padding: 0;
}
form {
  margin: 0;
}
table {
  border-collapse: collapse;
  height: 100%;
}
td {
  padding: 0 30px;
}
#left_col {
  background-color: #000;
  border-right: 1px solid #303030;
}
#left_col img {
  display: block;
}

Remove reference to missing background

Remove reference to missing background

Change-Id: Id7472ad7255d40195002ddaeacf61d2f59d1f476
Reviewed-on: https://gerrit.causes.com/5122
Reviewed-by: Adam Derewecki <0e18f44c1fec03ec4083422cb58ba6a09ac4fb2a@causes.com>
Tested-by: Adam Derewecki <0e18f44c1fec03ec4083422cb58ba6a09ac4fb2a@causes.com>


/*
.peopleContainer table {
  border-collapse: collapse;
}

.person-row {
  cursor: pointer;
}

.person-row.selected {
  background-color: #ccc;
}
 */

.peopleContainer tbody tr td, .peopleContainer thead tr th {
  border: none;
}

/*
.person-row {
  cursor: pointer;
}

.person-row.selected {
  background-color: #ccc;
}
 */

Remove borders from table elements

Remove borders from table elements


.input-group-addon {
	width: 7em;
}

form {
	margin: 0 auto;
	width: 19em;
}

.center {
	text-align: center;
	margin: 0 auto;
}

.submit, .submit:hover {
	margin: 0.75em 0;
	width: 19em;
	background-color: peachpuff;
}

Add CSS for account forms again

Add CSS for account forms again


/* Ensure is left. */
.my-container {
  color: red;
}

/* Ensure is prefixed as is not first selector. */
.my-container,  p .my-container {
  color: red;
}

/* Ensure is left. */
.my-container {
  color: red;
}

/* Ensure is prefixed as is not first selector. */
.my-container p .my-container {
  color: red;
}

Fix typo introduced during refactoring.

Fix typo introduced during refactoring.


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

a {
  color: #00B7FF;
}

div.log-row {

}

div.message, div.timestamp {
	font-size: 95%;
	padding-top: 0.5em;
}

.label {
	margin-right: 0.25em;
}

.label a {
	color: #fff;
	text-decoration: none;
}

div.labels .label {
	float: left;
	margin-bottom: 0.25em;
}

div.vertical-space {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

#page-wrapper-fluid {
		padding: 0 15px;
    min-height: 568px;
    background-color: #fff;
}

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

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

a {
  color: #00B7FF;
}

div.log-row {

}

div.message, div.timestamp {
	font-size: 95%;
	padding-top: 0.5em;
}

.label {
	margin-right: 0.25em;
}

.label a {
	color: #fff;
	text-decoration: none;
}

div.labels .label {
	float: left;
	margin-bottom: 0.25em;
}

div.vertical-space {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

#page-wrapper-fluid {
		padding: 0 15px;
    min-height: 568px;
    background-color: #fff;
}

.modal-message, .message {
	word-wrap: break-word;
}

ADD WORD-WRAP TO ALL MESSAGES

ADD WORD-WRAP TO ALL MESSAGES

Messages were not only breaking in the modal, also in the table,
that's why it's neccesary to add them to both


html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

img.img-responsive {
  box-shadow: 0 0 1px 1px #eee;
}

Make the preview images stand out a bit more clearly


.modal {
  text-align: center;
  background-color: white;
  width: 300px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

.modalOverlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(84, 82, 19, 0.25);

}

.fileName {
  display: block;
  padding: 10px;
  font-weight: 400;
}

.modal {
  text-align: center;
  background-color: white;
  width: 300px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

.modalOverlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(84, 82, 19, 0.25);

}

.fileName {
  display: block;
  padding: 10px;
  font-weight: 400;
}

Fix positioning of modal overlay

Fix positioning of modal overlay


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require bootstrap_and_overrides
 *= require main
*/

Fix stylesheets to not include active_admin in frontend.


body {
  margin-top: 30px;
  padding: 0;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}

#title {
  font-family: "Courier New", Courier, monospace;
  font-size: 32px;
}

#title sup {
  font-size: 14px;
}

input {
  width: 400px;
}

button {
  margin-top: 10px;
  font-size: 16px;
}

#loading, #error {
  display: none;
}

#participants {
  margin-bottom: 15px;
}

#participants a {
  color: #666;
  text-decoration: none;
}

#participants a:hover {
  color: #333;
}

.username a {
  color: #888;
  text-decoration: none;
}

.username a:hover {
  color: #555;
}

a.text-url {
  color: #369;
  text-decoration: none;
}

a.text-url:hover {
  color: #246;
}

/* Round border for dp */
.jstree-icon:empty {
  border-radius: 5px;
}

/* Bottom margin of tweet nodes */
.jstree-anchor {
  margin-bottom: 2px;
}

body {
  margin-top: 30px;
  margin-bottom: 60px;
  padding: 0;
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}

#title {
  font-family: "Courier New", Courier, monospace;
  font-size: 32px;
}

#title sup {
  font-size: 14px;
}

input {
  width: 400px;
}

button {
  margin-top: 10px;
  font-size: 16px;
}

#loading, #error {
  display: none;
}

#participants {
  margin-bottom: 15px;
}

#participants a {
  color: #666;
  text-decoration: none;
}

#participants a:hover {
  color: #333;
}

.username a {
  color: #888;
  text-decoration: none;
}

.username a:hover {
  color: #555;
}

a.text-url {
  color: #369;
  text-decoration: none;
}

a.text-url:hover {
  color: #246;
}

/* Round border for dp */
.jstree-icon:empty {
  border-radius: 5px;
}

/* Bottom margin of tweet nodes */
.jstree-anchor {
  margin-bottom: 2px;
}

Add bottom margin to page

Add bottom margin to page

To make tweets at bottom more readable


/* @@author A0135788M */

.vBox {
	-fx-background-color: #83bdb8;
}

.header {
	-fx-font: 24px sans-serif;
    -fx-text-fill: #006064;
}

.mainWindowAnchor {
	-fx-background-color: black;
	-fx-border-color: black transparent transparent transparent;
	-fx-border-width: 2px;
}

.commandBox {
    -fx-font-size: 12pt;
    -fx-font-family: "Consolas";
    -fx-font-weight: bold;
    -fx-text-fill: aqua;
    -fx-background-color: black;
    -fx-focus-color:transparent;
}

.todolist, .deadlineList, .eventList {
    -fx-background-color: #83bdb8;
}

.todolist .list-cell:even, .todolist .list-cell:odd,
.deadlineList .list-cell:even, .deadlineList .list-cell:odd,
.eventList .list-cell:even, .eventList .list-cell:odd {
    -fx-background-color: #83bdb8;
}

.list-view .list-cell:empty {
	-fx-background-color: #83bdb8;
}

/* @@author A0135788M */

.vBox {
	-fx-background-color: #83bdb8;
}

.header {
	-fx-font: 24px sans-serif;
    -fx-text-fill: #006064;
}

.mainWindowAnchor {
	-fx-background-color: black;
	-fx-border-color: black transparent transparent transparent;
	-fx-border-width: 2px;
}

.commandBox {
    -fx-font-size: 12pt;
    -fx-font-family: "Consolas";
    -fx-font-weight: bold;
    -fx-text-fill: white;
    -fx-background-color: black;
    -fx-focus-color:transparent;
}

.todolist, .deadlineList, .eventList {
    -fx-background-color: #83bdb8;
}

.todolist .list-cell:even, .todolist .list-cell:odd,
.deadlineList .list-cell:even, .deadlineList .list-cell:odd,
.eventList .list-cell:even, .eventList .list-cell:odd {
    -fx-background-color: #83bdb8;
}

.list-view .list-cell:empty {
	-fx-background-color: #83bdb8;
}

Change command box text color

Change command box text color


/* CSS declarations go here */
body {
    background-color: black;
    font-family: helvetica;
    color: white;
}

table thead th {
  padding: 10px;
}

.label {
  font-family: 'Helvetica Neue';
  color: black;
  padding: 3px;
  border-radius: 6px;
  box-shadow: 1px 1px 3px 0px white;
}

#login-buttons {
  right: 110px;
  position: absolute;
}

#addSkill {
  margin-bottom: -5px;
  height: 18px;
  cursor: pointer;
}

/* CSS declarations go here */
body {
    background-color: black;
    font-family: helvetica;
    color: white;
}

table thead th {
  padding: 10px;
}

.label {
  font-family: 'Helvetica Neue';
  color: black;
  padding: 3px;
  border-radius: 6px;
  box-shadow: 1px 1px 3px 0px white;
}

#login-buttons {
  right: 200px;
  position: absolute;
}

#addSkill {
  margin-bottom: -5px;
  height: 18px;
  cursor: pointer;
}

Move login further left to show create new button


/*
 * These are the CSS for the BeginToReason Admin Pages
 * Created by: Yu-Shan Sun
 * Last Modified: 10/13/2017
 */

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

body {
	/* Leaving space for footer */
    margin-bottom: 60px;
}

#page-header {
	height: 60px;
}

#page-header .navbar {
	background-color: #522D80;
}

#page-sidebar {
	background-color: #522D80;
}

#page-footer {
	/* Sticky footer */
    position: absolute;
    bottom: 0;
    height: 60px;
    background-color: #3A4958;
    opacity: 0.75;
}

/*
 * These are the CSS for the BeginToReason Admin Pages
 * Created by: Yu-Shan Sun
 * Last Modified: 10/13/2017
 */

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

body {
	/* Leaving space for footer */
    margin-bottom: 60px;
}

#page-header {
	height: 60px;
	background-color: #522D80;
}

#page-sidebar {
	background-color: #522D80;
}

#page-footer {
	/* Sticky footer */
    position: absolute;
    bottom: 0;
    height: 60px;
    background-color: #3A4958;
    opacity: 0.75;
}

Set background color to all of header

Set background color to all of header


@media (min-width: 992px) {
  .nav-users {
    position: fixed;
  }
}
.remove-account-container {
  display: inline-block;
  position: relative;
}
.btn-remove-account {
  top: 10px;
  right: 10px;
  position: absolute;
}

/* For user modals. */
.modal-open {
  overflow-y: scroll;
}

.or-group
{
  position: relative;
  border-top: 1px solid #dfdfdf;
  padding-top: 20px;
}
.or-line
{
  color: #666666;
  background-color: #ffffff;
  position: absolute;
  text-align: center;
  top: -12px;
  width: 100px;
  left: 68px;
}

@media (min-width: 992px) {
  .nav-users {
    position: fixed;
  }
}
.remove-account-container {
  display: inline-block;
  position: relative;
}
.btn-remove-account {
  top: 10px;
  right: 10px;
  position: absolute;
}

/* For user modals. */
.modal-open {
  overflow-y: scroll;
}

.or-group
{
  position: relative;
  border-top: 1px solid #dfdfdf;
  padding-top: 20px;
}
.or-line
{
  color: #666666;
  background-color: #ffffff;
  position: absolute;
  text-align: center;
  top: -12px;
  width: 110px;
  left: 62px;
}

Update modal css for 'or-line'.

Update modal css for 'or-line'.


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

#second_from_top {
display: block;
position: relative;

}

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

#second_from_top {
display: block;
position: relative;

}

Change top block to relative in technical stylesheet


.contentWrapper {
  font-size: 16px;
}

.orgWrapper {
  margin: 20px;
}

.orgTitle {
  font-size: 16px;
  margin-bottom: 4px;
}

.orgRoles {
  color: #a3a8ab;
}

.contentWrapper {
  font-size: 16px;
}

.orgWrapper {
  margin: 20px;
}

.orgTitle {
  font-size: 16px;
  margin-bottom: 4px;
}

.orgRoles {
  color: #808080;
}

Update font color for org roles

Update font color for org roles


.label {
    background-color: #fff;
    border: 1px solid #d5d3cb;
    padding: 20px 30px;
    width: 100%;
    display: block;
    text-align: left;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 200ms ease-in;
    overflow: hidden;

    &:after {
        width: 32px;
        height: 32px;
        content: '';
        border: 2px solid #d5d3cb;
        border-radius: 50%;
        z-index: 2;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }
}

.label.checked {
    background-color: var(--main-bg-dark);

    &:after {
        background-color: #cfc487;
        border-color: #cfc487;
        background-image: url('/assets/check-mark.svg');
        background-repeat: no-repeat;
        background-position: 3px 4px;
    }
}

.input {
    width: 32px;
    height: 32px;
    order: 1;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
}

.label {
    background-color: #fff;
    border: 1px solid #d5d3cb;
    padding: 20px 30px;
    width: 100%;
    display: block;
    text-align: left;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 200ms ease-in;
    overflow: hidden;

    &:after {
        width: 32px;
        height: 32px;
        content: '';
        border: 2px solid #d5d3cb;
        border-radius: 50%;
        z-index: 2;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }
}

.label.checked {
    background-color: var(--main-bg-dark);

    &:after {
        background-color: #cfc487;
        border-color: #cfc487;
        background-image: url('/assets/check-mark.svg');
        background-repeat: no-repeat;
        background-position: 3px 4px;
    }
}

.input {
    composes: sr-only from '../styles/shared/a11y.module.css';
}

OwnedCrateRow: Use shared `sr-only` CSS class to hide native `<input>` element


div.selectable, div.pocket-piece {
    display: inline-block;
    width: 45px;
    height: 45px;
    margin: 5px;
}

div.pocket-piece.unavailable {
    opacity: 0.3;
}

div.pocket-piece {
    touch-action: none;
}

div.selected {
    background-color: aquamarine;
}

.hidden {
    display: none;
}

.center-cells > td {
    text-align: center;
}

.pocket-table {
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #ccc;
}

.draggable {
    cursor: pointer;
}

span[data-counter-for] {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.selectable, div.pocket-piece {
    display: inline-block;
    width: 45px;
    height: 45px;
    margin: 5px;
}

div.pocket-piece.unavailable {
    opacity: 0.3;
}

div.pocket-piece {
    touch-action: none;
}

div.selected {
    background-color: aquamarine;
}

.hidden {
    display: none;
}

.center-cells > td {
    text-align: center;
}

.pocket-table {
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #ccc;
}

.draggable {
    cursor: pointer;
}

span[data-counter-for], .pocket-table, .pocket-zh {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Fix over-selection when dragging zh pieces


/* For small screens */
@media screen and (max-width: 390px) {
	html {
		font-size: 80%;
	}
}

/* For very small screens */
@media screen and (max-width: 350px) {
	html {
		font-size: 70%;
	}
}

/* For mini screens */
@media screen and (max-width: 300px) {
	html {
		font-size: 60%;
	}
}

/*--------------------------------------------------------------
# Featured
--------------------------------------------------------------*/
.featured_container {
	top: 2rem;
	width: initial;
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
}

.featured_container_hidden {
	left: 2rem;
	top: 100vh;
}

.featured_container_minimized {
	top: calc(100vh - 15%);
	left: 2rem;
}

.featured_minimize {
	right: 3.5rem;
	display: initial;
}

/*--------------------------------------------------------------
# Location Switcher
--------------------------------------------------------------*/
.location_switcher_list_item {
	height: 10rem;
}

/*
	Disable heavy animation
*/
.location_switcher_list_item {
	transition: none;
}

PERFORMANCE: Disable heavy animations on small screens


* {
    margin: 0;
    padding: 0;
}

.site-footer{
    position:relative;
    margin-top:40px;
    padding:40px 0;
    font-size:12px;
    line-height:1.5;
    color:#777;
    border-top:2px solid #eee
}

.site-footer .octicon-mark-github {
    position: absolute;
    left: 50%;
    color: #ccc;
}

.site-footer .octicon-mark-github:hover {
    color:#bbb;
}

Add hover on bottom icon

Add hover on bottom icon


.kwcClass .kwcBem__container {
    height: 0;
    position: relative;
    overflow: hidden;
}

.kwcClass img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.kwcClass {
    display: block;
    margin: 0px;
}
.kwcClass .kwcBem__outerContainer {
    display: block;
}
.kwcClass .kwcBem__container {
    height: 0;
    position: relative;
    overflow: hidden;
    display: block;
}

.kwcClass img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border: none;
}

Copy Kwc_Abstract_Image styling to ParentImage

margin 0 was missing when figure tag is used (which has for some odd reason a default margin)


.platon-comments {
    max-width: 40rem;
}

.platon-comment > * {
    margin-left: 58px;
}

.platon-comment > .platon-avatar {
    float: left;
    margin: 0 0.5rem 0.5rem 0;
    width: 48px;
}

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

.platon-actions + .platon-comment, .platon-actions + .platon-form {
    margin-top: 1rem;
}

.platon-author {
    font-weight: bold;
}

.platon-text p {
    margin: 0.5rem 0;
}

.platon-meta, .platon-actions {
    font-size: 0.8rem;
}

.platon-meta {
    margin-bottom: 0.5rem;
}

.platon-actions {
    margin-top: 0.5rem;
}

.platon-form {
    clear: left;
}

.platon-form input, .platon-form textarea {
    margin-bottom: 0.5rem;
}

.platon-form-text {
    width: 100%;
    min-height: 7.5rem;
    line-height: 1.5;
}

.platon-comments {
    max-width: 40rem;
}

.platon-comment > * {
    margin-left: 58px;
}

.platon-comment > .platon-avatar {
    float: left;
    margin: 0 0.5rem 0.5rem 0;
    width: 48px;
}

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

.platon-comment + .platon-comment, .platon-actions + .platon-comment, .platon-actions + .platon-form {
    margin-top: 1rem;
}

.platon-author {
    font-weight: bold;
}

.platon-text p {
    margin: 0.5rem 0;
}

.platon-meta, .platon-actions {
    font-size: 0.8rem;
}

.platon-meta {
    margin-bottom: 0.5rem;
}

.platon-actions {
    margin-top: 0.5rem;
}

.platon-form {
    clear: left;
}

.platon-form input, .platon-form textarea {
    margin-bottom: 0.5rem;
}

.platon-form-text {
    width: 100%;
    min-height: 7.5rem;
    line-height: 1.5;
}

Divide comments directly following each other


 /**
  * Icons
  */
.icon > svg {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

.icon > svg path {
  fill: $grey-color;
}

.page-title {
  text-shadow: 0 0 15px rgba(0,0,0,0.5);
}

Include text-shadow for homepage title

Include text-shadow for homepage title


/* [XUL] Change the location bar color for secure sites */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#urlbar[pageproxystate="valid"] #identity-box.verifiedIdentity {
  background-color: #efe !important;
}

#urlbar[pageproxystate="valid"] #identity-box.verifiedDomain,
#urlbar[pageproxystate="valid"] #identity-box.mixedActiveBlocked {
  background-color: #ffb !important;
}

#urlbar[pageproxystate="valid"] #identity-box.mixedDisplayContent,
#urlbar[pageproxystate="valid"] #identity-box.mixedDisplayContentLoadedActiveBlocked {
  background-color: #fcc !important;
}

/* [XUL] Change the location bar color for secure sites */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#urlbar[pageproxystate="valid"] #identity-box.verifiedIdentity {
  background-color: #efe !important;
}

#urlbar[pageproxystate="valid"] #identity-box.verifiedDomain,
#urlbar[pageproxystate="valid"] #identity-box.mixedActiveBlocked {
  background-color: #ffb !important;
}

#urlbar[pageproxystate="valid"] #identity-box.mixedDisplayContent,
#urlbar[pageproxystate="valid"] #identity-box.mixedDisplayContentLoadedActiveBlocked {
  background-color: #fdd !important;
}

Revise a color for mixed content page

Revise a color for mixed content page


.input {
    position: relative;
}

.dim > :not(:hover) {
    opacity: .5;
}

.search {
    padding-right: .25rem;
}

.prefix {
    padding-right: .25rem;
}

.suffix {
    padding-left: .25rem;
}

.input input {
    width: 0;
}

.input input,
.input textarea {
    font-size: .9rem;
    display: flex;
    flex-grow: 1;
    width: 100%; /* required by Firefox */
    border: none;
    color: #fff;
    background-color: transparent;
    transition: background-color 800ms ease-out;
}

.input input:read-only,
.input textarea:read-only {
    opacity: .6;
    pointer-events: none;
}

.input input[type=number] {
    justify-self: right;
    text-align: right;
    width: 4rem;
}

.input input:-webkit-autofill,
.input input:-webkit-autofill:hover,
.input input:-webkit-autofill:focus,
.input input:-webkit-autofill:active {
    transition: background-color 9999999999s ease-in-out 0s;
    -webkit-text-fill-color: #fff;
}

.input input::placeholder,
.input textarea::placeholder {
    color: hsl(0, 0%, 45%);
}

.input {
    position: relative;
}

.dim > :not(:hover) {
    opacity: .5;
}

.search {
    padding-right: .25rem;
}

.prefix {
    padding-right: .25rem;
}

.suffix {
    padding-left: .25rem;
}

.input input {
    width: 0;
}

.input input,
.input textarea {
    font-size: .9rem;
    display: flex;
    flex-grow: 1;
    border: none;
    color: #fff;
    background-color: transparent;
    transition: background-color 800ms ease-out;
}

.input input:read-only,
.input textarea:read-only {
    opacity: .6;
    pointer-events: none;
}

.input input[type=number] {
    justify-self: right;
    text-align: right;
    width: 4rem;
}

.input input:-webkit-autofill,
.input input:-webkit-autofill:hover,
.input input:-webkit-autofill:focus,
.input input:-webkit-autofill:active {
    transition: background-color 9999999999s ease-in-out 0s;
    -webkit-text-fill-color: #fff;
}

.input input::placeholder,
.input textarea::placeholder {
    color: hsl(0, 0%, 45%);
}

Set default input width to zero.

Set default input width to zero.


.zci--googleplus .tile--basic-image .tile__media {
    height: 17em;
}

.zci--googleplus .tile--basic-image .tile__media__img {
    margin-top: 0;
}

Google+: Adjust the image height. Make it taller.


.preview a.label.blocked {
  background-color: hsl(349, 69%, 46%);
  border-radius: 20px;
  color: white;
  margin: 0 2px;
  padding: 1px 6px 1px 6px;
  white-space: nowrap;
}

.labels_maker .selected.labels li a.label.blocked,
.labels_maker .selected.labels li a.label.blocked + a.remove {
  background-color: hsl(349, 69%, 46%);
}

.labels_maker .selected.labels li a.label.blocked:hover,
.labels_maker .selected.labels li a.label.blocked + a.remove:hover {
  background-color: hsl(349, 69%, 32%);
}

Add red and :hover styles to details view

Previous logic changes were responsible for adding .blocked
to those labels. Now let's style them!


@import "./_icon-social.css";

.list-social {
    padding: 0;
    margin: 0;
    list-style-type: none;

    &__item {
        padding: 0;
        display: inline-block;
        font-size: 0;
    }

    &__link {
        margin-left: 5px;

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

Add list social CSS component

Add list social CSS component


/* assume viewport is 414 x 736 */

body {
    line-height: 30px;
    font-family: sans-serif;
    font-size: large;
}
table {
    line-height: 30px;
    font-size: large;
}
.player {
}
.field-row {
    width: 100%;
    text-align: center;
}
.inline-button {
    font-size: medium;
}
.futsal-floor {
    background-image: url(futsal_floor.png)
}

/* again, assume viewport is 414 x 736 */
.lightbox {
    position: fixed;
    width: 260px;
    height: 100px;
    left: 57px;
    top: 100px;
    z-index: 1000;
    background-color: tan;
    padding: 20px;
    display: none;
}

.dnd-source {
    cursor: move;
}
.dnd-drag {
    cursor: move;
    background: green;
}

.dnd-target {
}

.modal-dialog-userInput {
    font-size: medium;
    width: 100%;
}

Make the prompt text for players and positions a little larger, and fill the whole width with that text-box.


/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders */
.visuallyhidden { position:absolute; left:-9999em; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Give a strong clear visual idea as to what is currently in focus */
/*:focus,*/
a:focus {
  background-color: #ffcc00;
  outline: 3px solid #ffcc00;
}

input:focus,
textarea:focus,
select:focus,
#global-header input:focus {
  outline: 3px solid #ffcc00;
}

#global-header a:focus {
  background-color: transparent;
}

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide for both screenreaders and browsers */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders */
.visuallyhidden { position:absolute; left:-9999em; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Give a strong clear visual idea as to what is currently in focus */
/*:focus,*/
a:focus {
  background-color: #fabb96;
  outline: 3px solid #fabb96;
}

input:focus,
textarea:focus,
select:focus,
#global-header input:focus {
  outline: 3px solid #fabb96;
}

#global-header a:focus {
  background-color: transparent;
  outline: none;
}

Change focus colour to mid orange, and remove focus for brand logo


@import "monokai.css";

.spacer {
  height: 80px;
}

.post-preview {
  font-size: 2.3437em;
  padding: 0;
  margin-bottom: 10px;
}

.tags {
  margin-bottom: 10px;
}

.article-footer {
  padding: 0px;
}

.posts {
  max-width: 85%;
  margin: 0 auto;
}

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

  .posts {
    max-width: 96%;
  }
}

.tags {
  font-size: 1.7577em;
}

@import "monokai.css";

.spacer {
  height: 80px;
}

.post-preview {
  font-size: 2.3437em;
  padding: 0;
  margin-bottom: 10px;
}

.tags {
  margin-bottom: 10px;
}

.article-footer {
  padding: 0px;
}

.center-content {
  max-width: 85%;
  margin: 0 auto;
}

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

  .center-content {
    max-width: 96%;
  }
}

.tags {
  font-size: 1.7577em;
}

Change the posts class to center-content.

This change results in a more semantic naming scheme.


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

h1, h2, h3, h4, h5, h6 {
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
}

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

code {
  font-size: 0.8rem;
}

pre {
  font-size: 0.75rem;
  background-color: white;
  border-left: .25rem solid #ddd;
}

a:hover,
a:focus {
  text-decoration: none;
}

.masthead-title {
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
}

.masthead-title img {
  display: inline;
  float: left;
  border-radius: 50%;
  margin-bottom: 0;
  margin-right: 1rem;
}

footer {
  margin-bottom: 2rem;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
}

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

code {
  font-size: 0.8rem;
}

pre {
  font-size: 0.75rem;
  background-color: white;
  border-left: .25rem solid #ddd;
}

blockquote {
  border-left-color: #ddd;
}

a:hover,
a:focus {
  text-decoration: none;
}

.masthead-title {
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
}

.masthead-title img {
  display: inline;
  float: left;
  border-radius: 50%;
  margin-bottom: 0;
  margin-right: 1rem;
}

footer {
  margin-bottom: 2rem;
}

Make left border of blockquotes a bit brighter


body {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1 0 auto;
    margin: 8px;
}

#buttons {
    height: 35px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin: 10px;
}

table {
    width: 100%;
}

th {
    text-align: left;
    vertical-align: baseline;
    width: 7em;
    padding-top: 5px;
}

input {
    width: 100%;
    display: block;
}

input:disabled,
textarea:disabled,
select:disabled {
    color: black;
}

select:disabled {
    background-color: transparent;
    border-style: solid;
}

textarea {
    height: calc(100vh - 230px);
    width: 100%;
}

#name-label,
#name,
#value-label,
#value {
    display: inline-block;
}

body {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1 0 auto;
    margin: 8px;
}

#buttons {
    height: 35px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin: 10px;
}

table {
    width: 100%;
}

th {
    text-align: left;
    vertical-align: baseline;
    width: 6.5em;
    padding-top: 5px;
}

input {
    width: 100%;
    display: block;
}

input:disabled,
textarea:disabled,
select:disabled {
    color: black;
}

select:disabled {
    background-color: transparent;
    border-style: solid;
}

textarea {
    height: calc(100vh - 230px);
    width: 100%;
    min-height: 18px;
}

#name-label,
#name,
#value-label,
#value {
    display: inline-block;
}

Set min-height for resizable textarea

Set min-height for resizable textarea


.debugger {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: "Helvetica Neue";
  color: #333;
  background-color: #FAFAFA;
}

.toolbar {
  flex: 0 0 40px;
  display: flex;
}

.content {
  flex: 1;
  display: flex;
}

.loading {
  text-align: center;
}

.loading h3 {
  color: #333;
}

.disabled {
  padding: 50px;
  text-align: center;
}

@media (max-width: 1270px) {
    .hiddenOnSmall {
        display: none!important;
    }
}

.debugger {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: "Helvetica Neue", Arial;
  color: #333;
  background-color: #FAFAFA;
}

.toolbar {
  flex: 0 0 40px;
  display: flex;
}

.content {
  flex: 1;
  display: flex;
}

.loading {
  text-align: center;
}

.loading h3 {
  color: #333;
}

.disabled {
  padding: 50px;
  text-align: center;
}

@media (max-width: 1270px) {
    .hiddenOnSmall {
        display: none!important;
    }
}

Add Arial as the font fallback

Add Arial as the font fallback


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

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

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

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

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

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

}

Fix second from top in technical

Fix second from top in technical


/* main.css */

.container {
  background: #eee;
  overflow: auto;
}

.container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

/* TODO 3 - style the page */

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

/* TODO 5.2 - use flexbox */

/* TODO 5.4 - use media query with Flexbox*/

/* main.css */

/*
.container {
  background: #eee;
  overflow: auto;
}

.container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

/* TODO 3 - style the page

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}
*/

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

/* TODO 5.4 - use media query with Flexbox*/

Replace column CSS with flexbox styling

Replace column CSS with flexbox styling


body {
    background-color: #34495e;
}

html {
    padding: 0 10px;
}

p, h1, h2, h3, h4 {
    color: #ecf0f1;
}

.ghetto-alert-container {
    position: fixed;
    width: calc(100% - 50px);
    top: 0;
    height: 100px;
}

.ghetto-alert {
    position: relative;
    width: fit-content;
    margin: 0 auto;
    z-index: 100;
}

.ghetto-alert span {
    vertical-align: middle;
    line-height: 1.5;
    margin-left: 10px;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 20px;
}

.carousel-control {
    opacity: 1;
}

.btn-primary,
.btn-primary:hover {
    color: #000;
}

Fix carousel and primary-button a11y issues

Increase contrast on both


.MainFooter-footer {
  background-color: #222629;
  bottom: 0;
  color: white;
  font-weight: bold;
  padding: 10px;
  position: fixed;
  text-align: center;
  width: 100%;
}

.SectionBody {
  padding-bottom: 100px;
}

.MainFooter-footer-link a {
  color: white;
  text-transform: uppercase;
}

.MainFooter-footer-link::after {
  padding-right: 30px;
}
.MainFooter-footer-link:last-of-type::after {
  content: "";
}

.MainFooter-footer {
  background-color: #222629;
  bottom: 0;
  color: white;
  font-weight: bold;
  padding: 10px;
  position: fixed;
  text-align: center;
  width: 100%;
}

.SectionBody {
  padding-bottom: 100px;
}

.MainFooter-footer-link a {
  color: white;
  text-transform: uppercase;
  padding-right: 30px;
}

Put footer link padding in the correct place


.kg-gallery-card,
.kg-image-card {
    --gap: 1.2rem;
}

.kg-image-card:not(.kg-card-hascaption) + .kg-image-card,
.kg-image-card:not(.kg-card-hascaption) + .kg-gallery-card,
.kg-gallery-card:not(.kg-card-hascaption) + .kg-image-card,
.kg-gallery-card:not(.kg-card-hascaption) + .kg-gallery-card {
    margin-top: var(--gap);
}

.kg-gallery-container {
    position: relative;
}

.kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
}

.kg-gallery-row:not(:first-of-type) {
    margin: var(--gap) 0 0;
}

.kg-gallery-image:not(:first-of-type) {
    margin: 0 0 0 var(--gap);
}

@media (max-width: 600px) {
    .kg-gallery-card {
        --gap: 0.6rem;
    }
}

.kg-gallery-card,
.kg-image-card {
    --gap: 1.2rem;
}

.kg-image-card:not(.kg-card-hascaption) + .kg-image-card,
.kg-image-card:not(.kg-card-hascaption) + .kg-gallery-card,
.kg-gallery-card:not(.kg-card-hascaption) + .kg-image-card,
.kg-gallery-card:not(.kg-card-hascaption) + .kg-gallery-card {
    margin-top: var(--gap);
}

.kg-gallery-container {
    position: relative;
}

.kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
}

.kg-gallery-row:not(:first-of-type) {
    margin: var(--gap) 0 0;
}

.kg-gallery-image:not(:first-of-type) {
    margin: 0 0 0 var(--gap);
}

@media (max-width: 600px) {
    .kg-gallery-card,
    .kg-image-card {
        --gap: 0.6rem;
    }
}

Add gap to image card on smaller screen sizes


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

h1, h2, h3, h4, h5, h6 {
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
}

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

code {
  font-size: 0.8rem;
}

blockquote {
  border-left-color: #ddd;
}

.post-date {
  display: block;
  color: #c9c9c9;
  font-size: 85%;
}

a {
  color: #0fa5d8;
}

a:hover,
a:focus {
  text-decoration: none;
}

.masthead {
  margin: 1rem 0;
}

.page,
.post {
  margin-bottom: 2rem;
}

footer {
  margin-bottom: 2rem;
  color: #c9c9c9;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
}

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

code {
  font-size: 0.8rem;
}

blockquote {
  border-left-color: #ddd;
}

.post-date {
  display: block;
  color: #c9c9c9;
  font-size: 85%;
}

a {
  color: #0fa5d8;
}

a:hover,
a:focus {
  text-decoration: none;
}

.masthead {
  margin: 1rem 0;
}

.masthead-title a {
  color: #0fa5d8;
}

.page,
.post {
  margin-bottom: 2rem;
}

footer {
  margin-bottom: 2rem;
  color: #c9c9c9;
}

Make link in .masthead-title blue

Make link in .masthead-title blue


blockquote {
  background: #f9f9f9;
  font-size: 0.9em;
  border-left: 5px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.0em 0px;
  quotes: "\201C""\201D""\2018""\2019";
}

blockquote {
  background: #f9f9f9;
  font-size: 0.8em;
  border-left: 5px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.0em 0px;
  quotes: "\201C""\201D""\2018""\2019";
}

.md-typeset h1 {
font-size: 1.7em;
font-weight: 400;
color: rgba(0,0,0,.87);
}

.md-typeset h2 {
font-size: 1.3em;
font-weight: 400;
color: rgba(0,0,0,.87);
}

.md-typeset h3 {
font-size: 1.1em;
font-weight: 400;
color: rgba(0,0,0,.87);
}
.md-typeset p {
  font-size: 0.9em;
  line-height: 1.4;
  text-align: justify;
}

.md-typeset li {
  font-size: 0.9em;
  line-height: 1.4;
}

.md-typeset hr {
    font-size: .8rem;
    line-height: 1.1;
    margin: 1.1em 0;
    margin-top: 1.1em;
    margin-right: 0px;
    margin-bottom: 1.1em;
    margin-left: 0px;
    height: 3px;
    border-top: 2px solid #8c8b8b;
    border-bottom: 0px;
}

Tweak the docs a bit

Tweak the docs a bit


.book .book-summary .book-search {
  padding: 6px;
  background: transparent;
  position: absolute;
  top: -50px;
  left: 0px;
  right: 0px;
  transition: top 0.5s ease;
}
.book .book-summary .book-search input,
.book .book-summary .book-search input:focus,
.book .book-summary .book-search input:hover {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  outline: none;
  line-height: 22px;
  padding: 7px 4px;
  color: inherit;
}
.book.with-search .book-summary .book-search {
  top: 0px;
}
.book.with-search .book-summary ul.summary {
  top: 50px;
}

Build and publish in bookdown

Build and publish in bookdown


.wrapper {
}

.content {
  position: relative;
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  max-height: var(--zero-if-two-column, 0);
}

.gradient {
  max-height: none;
}

.long .shadow {
  bottom: -100vh;
}

.root .withShadow {
  text-shadow: 0px 1px min(5px, var(--zero-if-two-column)) black;
}

.gradient .withShadow {
  text-shadow: 0px 1px 5px black;
}

.shadowDark {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px,rgba(0, 0, 0, 0.5) 100px,rgba(0, 0, 0, 0.5) 100%);
}

.shadowLight {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0px,rgba(255, 255, 255, 0.5) 100px,rgba(255, 255, 255, 0.5) 100%);
}

@media print {
  .root {
    padding-top: 0 !important;
  }

  .shadow {
    display: none;
  }
}

.wrapper {
}

.content {
  position: relative;
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  max-height: var(--zero-if-two-column, 0);
}

.gradient .shadow {
  max-height: none;
}

.long .shadow {
  bottom: -100vh;
}

.root .withShadow {
  text-shadow: 0px 1px min(5px, var(--zero-if-two-column)) black;
}

.gradient .withShadow {
  text-shadow: 0px 1px 5px black;
}

.shadowDark {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px,rgba(0, 0, 0, 0.5) 100px,rgba(0, 0, 0, 0.5) 100%);
}

.shadowLight {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0px,rgba(255, 255, 255, 0.5) 100px,rgba(255, 255, 255, 0.5) 100%);
}

@media print {
  .root {
    padding-top: 0 !important;
  }

  .shadow {
    display: none;
  }
}

Fix vertical gradient shadow in gradient box

Selector did not match the element with the shadow, causing the
gradient not to be visible.

REDMINE-20000


.App {
  text-align: center;
}

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

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

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

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

.App {
  text-align: center;
}

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

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

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

.App nav {
  background: #282828;
  padding:8px;
  color:white;
}

.App nav a {
  color: #9D9B91;
  text-decoration: none;
  display: inline-block;
  background: #303030;
  padding:8px;
  margin: 5px;
}

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

Add some css love :/

Add some css love :/


/*

   BORDER WIDTHS

   Base:
     bw = border-width

   Modifiers:
     0 = 0 width border
     1 = 1st step in border-width scale
     2 = 2nd step in border-width scale
     3 = 3rd step in border-width scale
     4 = 4th step in border-width scale
     5 = 5th step in border-width scale

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/

.bw0 { border-width: 0; }
.bw1 { border-width: .125rem; }
.bw2 { border-width: .25rem; }
.bw3 { border-width: .5rem; }
.bw4 { border-width: .75rem; }
.bw5 { border-width: 1rem; }

@media (--breakpoint-not-small) {
  .bw0-ns { border-width: 0; }
  .bw1-ns { border-width: .125rem; }
  .bw2-ns { border-width: .25rem; }
  .bw3-ns { border-width: .5rem; }
  .bw4-ns { border-width: .75rem; }
  .bw5-ns { border-width: 1rem; }
}

@media (--breakpoint-medium) {
  .bw0-m { border-width: 0; }
  .bw1-m { border-width: .125rem; }
  .bw2-m { border-width: .25rem; }
  .bw3-m { border-width: .5rem; }
  .bw4-m { border-width: .75rem; }
  .bw5-m { border-width: 1rem; }
}

@media (--breakpoint-large) {
  .bw0-l { border-width: 0; }
  .bw1-l { border-width: .125rem; }
  .bw2-l { border-width: .25rem; }
  .bw3-l { border-width: .5rem; }
  .bw4-l { border-width: .75rem; }
  .bw5-l { border-width: 1rem; }
}

Add ability to target breakpoints for border-width.


.blogtext{
  margin-top: 80px;
}
nav{
	top:0px;
  margin-top: 0px;
}

#top{
	margin-top: 0px;
}

.blogtext{
  margin-top: 80px;
  padding: 15px;
}
nav{
  top:0px;
  margin-top: 0px;
}

#top{
  margin-top: 0px;
}

Add a bit of padding

Add a bit of padding


.interface {
  position: relative;
  background-color: grey;
}

.chooser {
  /* flex container */
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100vh;
}

.answer {
  /*border: 3px solid red;*/

  /* flex container */
  display: flex;
  align-items: center;
  justify-content: center;

  /* flex item */
  flex: 2;

  height: 100%;

  color: white;
  font-size: 25px;
  font-weight: bold;
  line-height: 90%;
  text-align: center;
}

.exhibit {
  /*border: 3px solid goldenrod;*/

  /* flex container */
  display: flex;
  justify-content: center;
  height: 100%;

  /* flex item */
  flex: 8;
}

.exhibit img {
  width: 100%;
  object-fit: contain;
}

.indicator {
  /*border: 3px solid lightgreen;*/

  position: absolute;
  left: 0;
  top: 0;

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

  height: 100%;
  width: 100%;

  flex: 1 auto;

  font-size: 100px;
  font-weight: bold;
  color: gold;
}

.interface {
  position: relative;
  background-color: grey;
}

.chooser {
  /* flex container */
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100vh;
}

.answer {
  /*border: 3px solid red;*/

  /* flex container */
  display: flex;
  align-items: center;
  justify-content: center;

  /* flex item */
  flex: 2;

  height: 100%;

  color: white;
  font-size: 25px;
  font-weight: bold;
  line-height: 90%;
  text-align: center;
}

.exhibit {
  /*border: 3px solid goldenrod;*/

  /* flex container */
  display: flex;
  justify-content: center;
  height: 100%;

  /* flex item */
  flex: 8;
}

.exhibit img {
  width: 100%;
  object-fit: contain;
}

.indicator {
  /*border: 3px solid lightgreen;*/

  position: absolute;
  left: 0;
  top: 0;

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

  height: 100%;
  width: 100%;

  flex: 1 auto;

  font-size: 100px;
  font-weight: bold;
  text-shadow: 0 0 10px black;
  color: white;
}

Make indicator text white with black shadow

Make it easier to read over any background image.


.trComplete{
    text-decoration: line-through;
}
.testgrid td{
    min-width: 50px;
}
.editablegrid-action{
    min-width:75px;
}
.label-search{
    cursor:pointer;
}
.btnComplete:hover{
    background-color: #0b0;
}
.btnDelete:hover{
    background-color: #d00;
}

#gridList table{
    border-collapse: collapse;
    border: 1px solid black;
  }
#gridList  table td, #gridList  table th{
    border: 1px solid black;
  }

  #gridList tr:hover td {
      background:#ddd}

Add styles for table and hover

Add styles for table and hover


/* Show URI of article for Inoreader */
@namespace url("http://www.w3.org/1999/xhtml");

@-moz-document domain("www.inoreader.com") {
  /* Column view */
  #three_way_contents .article_title_link::after {
    content: attr(href);

    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 85%;
    padding: 0.2em 0 0.1em;

    color: #bbb;
    font: 12px/1 Arial, sans-serif;
  }
  #three_way_contents .article_title_link:hover::after {
    color: inherit !important;
  }
}

/* Show URI of article for Inoreader */
@namespace url("http://www.w3.org/1999/xhtml");

@-moz-document domain("www.inoreader.com") {
  /* Column view */
  #three_way_contents .article_title_link::after {
    content: attr(href);

    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
    padding: 0.4em 0 0 0.2em;

    color: #bbb;
    font: 14px/1 Arial, sans-serif;
  }
}

Support for new Inoreader style

Support for new Inoreader style


.name{
	font: 400 64px/1.3 'Lobster Two', Helvetica, sans-serif;
  	color: #2b2b2b;
  	text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);
  	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  	margin-bottom: 20px;
}

.projects li{
	list-style-type: none;
}

.wrapper-large{
	padding: 3.2rem 2rem;
}

h3{
	text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);
	font-weight: 900;
}

.contact{
	padding-bottom: 20px;
	padding-right: 10px;
	padding-left: 10px;
	box-shadow: 0 -4px 3px rgba(0,0,0,0.16), 0 -1px 9px rgba(93, 93, 93, 0.65);
}

.name{
	font: 400 64px/1.3 'Lobster Two', Helvetica, sans-serif;
  	color: #2b2b2b;
  	text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);
  	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  	margin-bottom: 20px;
}

.projects li{
	list-style-type: none;
}

.wrapper-large{
	padding: 3.2rem 2rem;
}

h3{
	text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);
	font-weight: 900;
}

.contact{
	padding-bottom: 20px;
	padding-right: 10px;
	padding-left: 10px;
}

Remove box-shadow from Contact Us

Remove box-shadow from Contact Us

Thought it looked weird. Now only box-shadow on name.


.widget-slider .rc-slider-handle,
.widget-slider .rc-slider-dot-active {
    border-color: #e9e9e9;
    border: 2px solid #e9e9e9;

}

.widget-slider.has-error .rc-slider-track,
.widget-slider.has-error .rc-slider-rail {
    background-color: #a94442;
}

.rc-slider.rc-slider-with-marks {
    padding-bottom: 25px;
}

.rc-slider.rc-slider-disabled {
    background-color: transparent;
}

.widget-slider-default .rc-slider-track {
    background-color: #DDDDDD;
 }

 .widget-slider-inverse .rc-slider-track {
    background-color: #3D3F41;
 }

 .widget-slider-primary .rc-slider-track{
    background-color: #59C2E6;
 }

.widget-slider-info .rc-slider-track {
    background-color: #8AD4ED;
}

.widget-slider-success .rc-slider-track {
    background-color: #8CC152;
}

.widget-slider-warning .rc-slider-track {
    background-color: #f4a911;
}

.widget-slider-danger .rc-slider-track {
    background-color: #D9534F;
}

.widget-slider .rc-slider-handle,
.widget-slider .rc-slider-dot-active {
    border-color: #e9e9e9;
    border: 2px solid #e9e9e9;

}

.widget-slider.has-error .rc-slider-track,
.widget-slider.has-error .rc-slider-rail {
    background-color: #a94442;
}

.rc-slider-mark-text {
    width: auto !important;
    margin-left: -4px !important;
}

.rc-slider.rc-slider-with-marks {
    padding-bottom: 25px;
}

.rc-slider.rc-slider-disabled {
    background-color: transparent;
}

.widget-slider-default .rc-slider-track {
    background-color: #DDDDDD;
 }

 .widget-slider-inverse .rc-slider-track {
    background-color: #3D3F41;
 }

 .widget-slider-primary .rc-slider-track{
    background-color: #59C2E6;
 }

.widget-slider-info .rc-slider-track {
    background-color: #8AD4ED;
}

.widget-slider-success .rc-slider-track {
    background-color: #8CC152;
}

.widget-slider-warning .rc-slider-track {
    background-color: #f4a911;
}

.widget-slider-danger .rc-slider-track {
    background-color: #D9534F;
}

Fix the horizontal scrollbar on mobile

Fix the horizontal scrollbar on mobile


html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    color: #000;
    background: #FFF;
}
body {
    font: 12px/18px "Open Sans", serif;
    text-align: center;
    background: url(background-light.jpg);
    background-size: cover;
}
p {
    margin: 0;
}
p span {
    font-weight: bold !important;
}
a {
    color: #0892b6;
}
a:hover {
    color: #044859;
}
h1 {
    font-size: 50px;
    font-weight: 900;
    line-height: 50px;
    text-transform: uppercase;
    margin: 1em 0 1em 0;
    padding: 1em 0 0 0;
    border-bottom: 3px double black;
}
h2 {
    margin: 1em 0 0.5em 0;
    font-weight: 600;
    font-size: 25px;
}
footer {
    font-weight bold;
    padding: 1em 0;
    margin: 1em 0 1em 0;
    line-height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    color: #000;
    background: #FFF;
}
body {
    font: 12px/18px "Open Sans", sans-serif;
    text-align: center;
    background: url(background-light.jpg);
    background-size: cover;
}
p {
    margin: 0;
}
p span {
    font-weight: bold !important;
}
a {
    color: #0892b6;
}
a:hover {
    color: #044859;
}
h1 {
    font-size: 50px;
    font-weight: 900;
    line-height: 50px;
    text-transform: uppercase;
    margin: 1em 0 1em 0;
    padding: 1em 0 0 0;
    border-bottom: 3px double black;
}
h2 {
    margin: 1em 0 0.5em 0;
    font-weight: 600;
    font-size: 25px;
}
footer {
    font-weight bold;
    padding: 1em 0;
    margin: 1em 0 1em 0;
    line-height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

Use sans-serif instead of serif as default font.


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

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

Add overflow hidden to a menu item by default to fix menu items with floats @rev rdewsbury@


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

.results {
  margin-top: 1em;
}

.result {
  margin: 0.5em 0;
}

.title {
  font-size: 1.2em;
}

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

Adjust font size of results

Adjust font size of results


.navigation
{
  background-image: url(/images/navigation-fab48ca0780cf63b2493ea6e58411505.png);
  display: table-cell;
  width: 24px;
  height: 24px;
}

.navigation-back
{
  background-position: 0 0;
}

.navigation-down
{
  background-position: -24px 0;
}

.navigation-first
{
  background-position: -48px 0;
}

.navigation-forward
{
  background-position: 0 -24px;
}

.navigation-last
{
  background-position: -24px -24px;
}

.navigation-target
{
  background-position: -48px -24px;
}

.navigation-up
{
  background-position: 0 -48px;
}

.navigation
{
  background-image: url(/images/navigation-fab48ca0780cf63b2493ea6e58411505.png);
  display: inline-block;
  width: 24px;
  height: 24px;
}

.navigation-back
{
  background-position: 0 0;
}

.navigation-down
{
  background-position: -24px 0;
}

.navigation-first
{
  background-position: -48px 0;
}

.navigation-forward
{
  background-position: 0 -24px;
}

.navigation-last
{
  background-position: -24px -24px;
}

.navigation-target
{
  background-position: -48px -24px;
}

.navigation-up
{
  background-position: 0 -48px;
}

Use inline-block for sprite images.

Use inline-block for sprite images.


.command-logger {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #1e1e1e;
  color: #eee;
  overflow: auto;
  z-index: 99;
  padding: 20px;
}

.command-logger .category-header {
  text-align: center;
  padding-bottom: 10px;
}

.command-logger .tree-map {
  margin: auto;
  position: relative;
  width: 960px;
  height: 700px;
  background-color: #efefef;
  border: 1px solid #999;
}

body.command-logger-node-text {
  background-color: transparent;
}

.command-logger-node-text div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.command-logger-node-text span {
  font-size: 10px;
  color: #fff;
  text-shadow: #000 1px 1px 4px;
}

.command-logger {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #1e1e1e;
  color: #eee;
  overflow: auto;
  z-index: 99;
  padding: 20px;
}

.command-logger .category-header {
  text-align: center;
  padding-bottom: 10px;
}

.command-logger .tree-map {
  margin: auto;
  position: relative;
  width: 960px;
  height: 700px;
  background-color: #efefef;
  border: 1px solid #999;
}

body.command-logger-node-text {
  background-color: transparent;
}

.command-logger-node-text div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}

.command-logger-node-text span {
  font-size: 10px;
  color: #fff;
  text-shadow: #000 1px 1px 4px;
}

Use cursor pointer inside nodes

Use cursor pointer inside nodes


/* ===================== Adwaita Theme Gradients ====================== */

:root:not([data-theme="dark"]) .adwaita-toolbar {
	background-image: linear-gradient(#ededed, #dad6d2);
	border-bottom: 1px solid #bfb8b1;
	color: var(--primary-color);
}

:root([data-theme="dark"]) .adwaita-toolbar {
	background-image: linear-gradient(#2b2b2b, #262626);
	border-bottom: 1px solid #070707;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .adwaita-toolbar {
		background-image: linear-gradient(#2b2b2b, #262626);
		border-bottom: 1px solid #070707;
	}
}

/* ===================== Adwaita Theme Gradients ====================== */

:root:not([data-theme="dark"]) .adwaita-toolbar {
	background-image: linear-gradient(#ededed, #dad6d2);
	border-bottom: 1px solid #bfb8b1;
	color: var(--primary-color);
}

:root[data-theme="dark"] .adwaita-toolbar {
	background-image: linear-gradient(#2b2b2b, #262626);
	border-bottom: 1px solid #070707;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .adwaita-toolbar {
		background-image: linear-gradient(#2b2b2b, #262626);
		border-bottom: 1px solid #070707;
	}
}

Fix invalid query for `[data-theme="dark"] .adwaita-toolbar`

Fixes issue when system preferences is set to light mode but attribute or cookie sets it to dark mode.


.masonry-layout {
    background-color: #EFEFEF;
}

.masonry-layout .masonry-item {
    border-width: 1px;
    margin: 10px 10px 10px 10px;
    width: 280px;
    border-color: #888;
    border-style: solid;
    border-radius: 3px;
    box-shadow: rgba(0,0,0,0.5) 0px 0px 3px;
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.masonry-layout .masonry-item > .v-widget {
    padding: 1rem;
}

.masonry-layout .masonry-item.masonry-double-wide {
    width: 580px;
}

.masonry-layout .masonry-item.masonry-triple-wide {
    width: 880px;
}

.masonry-layout .masonry-item.masonry-quadruple-wide {
    width: 1180px;
}

.masonry-layout .masonry-item > .v-ddwrapper {
    padding: 1rem;
    border-radius: 0px;
}

.masonry-layout .masonry-item > .v-ddwrapper.v-ddwrapper-over {
    outline: none;
    border: none;
    background: #DDD;
}

.v-overlay-container > .masonry-dnd-wrapper {
    border-width: 1px;
    margin: 10px 10px 10px 10px;
    max-width: 280px;
    border-color: #888;
    border-style: solid;
    padding: 1rem;
    border-radius: 3px;
    box-shadow: rgba(0,0,0,0.5) 0px 0px 3px;
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.v-overlay-container > .masonry-dnd-wrapper > * {

}

Correct casing with folder name

Correct casing with folder name


* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Lucida Grande;
  font-size: 12px;
}

#root-view {
  height: 100%;
  height: 100%;
  overflow-y: auto;
  position: relative;
  background-image: url(static/images/linen.png);
}

.column {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}

.row {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.column > *, .row > * {
  position: absolute;
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Lucida Grande;
  font-size: 12px;
}

#root-view {
  height: 100%;
  height: 100%;
  overflow-y: auto;
  position: relative;
  background-image: url(static/images/linen.png);
}

.column {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}

.row {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.column > *, .row > * {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0px 0px 2px 2px rgba(0, 0, 0, .1);
}

.row > * + * {
  border-left: 5px solid #515151;
}

.column > * + * {
  border-top: 5px solid #515151;
}

Add a border and subtle inset shadow when panes are split.


.root {
  background: var(--color-white);
  border-color: var(--color-greyLighter);
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
  color: var(--color-grey);
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-avenir);
  font-size: var(--fontsize-small-i);
  font-weight: 700;
  line-height: 1;
  padding: var(--size-sm-ii);
  text-decoration: none;
  text-transform: uppercase;
}

.root svg {
  vertical-align: top;
}

.root:hover {
  background: var(--color-greyLightest);
  color: var(--color-greyDark);
}

.root {
  background: var(--color-white);
  border-color: var(--color-greyLighter);
  border-radius: 2px;
  border-style: solid;
  border-width: 1px;
  color: var(--color-grey);
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-avenir);
  font-size: var(--fontsize-small-i);
  font-weight: 700;
  line-height: 1;
  padding: var(--size-sm-ii);
  text-decoration: none;
  text-transform: uppercase;
}

.root svg {
  vertical-align: top;
}

.root:focus {
  background: var(--color-white);
  border-color: var(--color-greyLighter);
  color: var(--color-grey);
}

.root:hover {
  background: var(--color-greyLightest);
  color: var(--color-greyDark);
}

Fix foundation style leaking on map controls


#filesId {
  width: 100%;
  height: 100%;
  opacity: 0;
}

#dropZone {
  width: 600px;
  height: 600px;
  background-color: red;
  color: white;
}

[feat] Add styling to input box and div to enable drag and drop


.navbar, .navbar.navbar-default
{
  background-color: #990000;
}

.navbar-inverse
{
  background-color: black;
}

#logo
{
  width: 280px;

  position: absolute;
  bottom: 1em;
  right: 0;
}

table.calendar
{
  border-spacing: .5em;
  margin-left: auto;
  margin-right: auto;
}

table.calendar td {
  vertical-align: middle;
}

table.calendar td.time {
  text-align: right;
}

table.calendar td.track1 {
  background-color: rgba(0, 51, 102, .1);
}

table.calendar td.track2 {
  background-color: rgba(0, 102, 51, .1);
}

table.calendar td:not(:empty) {
  padding: .75em;
  width: 9em;
}

table.calendar td:not(:empty):not(.time):not(.track1):not(.track2) {
  background: rgba(102, 102, 102, .05);
}

table.calendar th {
  padding-top: .75em;
  padding-left: .5em;
  position: relative;
}

table.calendar th .date {
  font-size: 80%;
  position: absolute;
  top: 1em;
  right: 1em;
}

.navbar, .navbar.navbar-default
{
  background-color: #990000;
}

.navbar-inverse
{
  background-color: black;
}

ul.nav.navbar-nav li.dropdown ul li a:hover
{
  color: #990000;
}

#logo
{
  width: 280px;

  position: absolute;
  bottom: 1em;
  right: 0;
}

table.calendar
{
  border-spacing: .5em;
  margin-left: auto;
  margin-right: auto;
}

table.calendar td {
  vertical-align: middle;
}

table.calendar td.time {
  text-align: right;
}

table.calendar td.track1 {
  background-color: rgba(0, 51, 102, .1);
}

table.calendar td.track2 {
  background-color: rgba(0, 102, 51, .1);
}

table.calendar td:not(:empty) {
  padding: .75em;
  width: 9em;
}

table.calendar td:not(:empty):not(.time):not(.track1):not(.track2) {
  background: rgba(102, 102, 102, .05);
}

table.calendar th {
  padding-top: .75em;
  padding-left: .5em;
  position: relative;
}

table.calendar th .date {
  font-size: 80%;
  position: absolute;
  top: 1em;
  right: 1em;
}

Add styling to nav dropdowns.

Add styling to nav dropdowns.


@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

* { margin: 0; padding: 0; }

html {
 font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 font-size: 14px;
 font-weight: 400;
}

header {
 min-height: 100px;
 background-color: rgb(0,106,20);
}

article { width: 66%; margin: 0 2.6em; }

h1, h2, h3 {
 text-transform: uppercase;
 color: rgb(0,106,20);
}

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

* { margin: 0; padding: 0; }

html {
 font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 font-size: 14px;
 font-weight: 400;
}

body { color: rgb(68,68,68) }

header {
 min-height: 100px;
 background-color: rgb(0,106,20);
}

article { width: 66%; margin: 0 2.6em; }

h1, h2, h3 {
 text-transform: uppercase;
 color: rgb(0,106,20);
}

Reduce contrast of main reading font

Reduce contrast of main reading font


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

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

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

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

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

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

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

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

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

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

Change margin on nav bar

Change margin on nav bar


text.month-name,
text.calendar-heatmap-legend-text,
text.day-initial {
  font-size: 10px;
  fill: #aaaaaa;
  font-family: Helvetica, arial, 'Open Sans', sans-serif
}
.day-cell {
  border: 1px solid gray;
}
rect.day-cell:hover {
  stroke: #555555;
  stroke-width: 1px;
}
.day-cell-tooltip {
  position: absolute;
  z-index: 9999;
  padding: 5px 9px;
  color: #bbbbbb;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 3px;
  text-align: center;
}
.day-cell-tooltip > span {
  font-family: Helvetica, arial, 'Open Sans', sans-serif
}
.calendar-heatmap {
  box-sizing: initial;
}

text.month-name,
text.calendar-heatmap-legend-text,
text.day-initial {
  font-size: 10px;
  font-family: Helvetica, arial, 'Open Sans', sans-serif
}
.day-cell {
  border: 1px solid gray;
  fill: inherit;
}
rect.day-cell:hover {
  stroke: #555555;
  stroke-width: 1px;
}
.day-cell-tooltip {
  position: absolute;
  z-index: 9999;
  padding: 5px 9px;
  color: #bbbbbb;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 3px;
  text-align: center;
}
.day-cell-tooltip > span {
  font-family: Helvetica, arial, 'Open Sans', sans-serif
}
.calendar-heatmap {
  box-sizing: initial;
}

Use inherit font-color for heatmap

Use inherit font-color for heatmap


.root {
  padding: 1rem;
}

.items {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 1rem;
}

.item {
  background: #475871;
  margin-bottom: 1px;
  width: 15rem;

  &:first-child {
    border-radius: 5px 5px 0 0;
  }

  &:last-child {
    border-radius: 0 0 5px 5px;
  }
}

.itemLink {
  color: #faf8f5;
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  padding: 1.25rem 2rem;
  text-align: center;
  text-decoration: none;

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

@media (width > 720px) {
  .items {
    flex-direction: row;
  }

  .item {
    margin-right: 1px;
    width: auto;

    &:first-child {
      border-radius: 5px 0 0 5px;
    }

    &:last-child {
      border-radius: 0 5px 5px 0;
    }
  }
}

.root {
  padding: 1rem;
}

.items {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 1rem;
}

.item {
  background: #475871;
  margin-bottom: 1px;
  font-family: sans-serif;
  width: 15rem;

  &:first-child {
    border-radius: 5px 5px 0 0;
  }

  &:last-child {
    border-radius: 0 0 5px 5px;
  }
}
:global(.fira-sans-loaded) .item {
  font-family: "Fira Sans", sans-serif;
}

.itemLink {
  color: #faf8f5;
  display: block;
  font-size: 16px;
  line-height: 20px;
  padding: 1.25rem 2rem;
  text-align: center;
  text-decoration: none;

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

@media (width > 720px) {
  .items {
    flex-direction: row;
  }

  .item {
    margin-right: 1px;
    width: auto;

    &:first-child {
      border-radius: 5px 0 0 5px;
    }

    &:last-child {
      border-radius: 0 5px 5px 0;
    }
  }
}

Use Fira Sans for WayFinder

Use Fira Sans for WayFinder


.CodeMirror-hover-tooltip {
	background-color: infobackground;
	border: 1px solid black;
	border-radius: 4px 4px 4px 4px;
	color: infotext;
	font-family: monospace;
	font-size: 10pt;
	overflow: hidden;
	padding: 2px 5px;
	position: fixed;
	z-index: 100;
	max-width: 600px;
	opacity: 0;
	transition: opacity .4s;
	-moz-transition: opacity .4s;
	-webkit-transition: opacity .4s;
	-o-transition: opacity .4s;
	-ms-transition: opacity .4s;
}

/*.CodeMirror-hover {
	outline: 1px solid grey;
}*/

.CodeMirror-hover-tooltip {
	background-color: infobackground;
	border: 1px solid black;
	border-radius: 4px 4px 4px 4px;
	color: infotext;
	font-family: monospace;
	font-size: 10pt;
	overflow: hidden;
	padding: 2px 5px;
	position: fixed;
	z-index: 100;
	max-width: 600px;
	opacity: 0;
	white-space: pre-wrap;
	transition: opacity .4s;
	-moz-transition: opacity .4s;
	-webkit-transition: opacity .4s;
	-o-transition: opacity .4s;
	-ms-transition: opacity .4s;
}

/*.CodeMirror-hover {
	outline: 1px solid grey;
}*/

Break hover tooltip content line at newline chars

Done to support newline characters in the Tern plugin "!doc"
definition.


html, body {
  width: 100%;
  -webkit-text-size-adjust: none;
}

#content {
  padding: 0px;
}

.section {
  width: 90%;
  margin: 0px;
  border: 1px solid black;
  background: #e1ebfb;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}

html, body {
  width: auto;
  height: auto;
  -webkit-text-size-adjust: none;
}

#content {
  padding: 0px;
}

.section {
  width: 90%;
  margin: 0px;
  border: 1px solid black;
  background: #e1ebfb;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}

Set the height and width to auto for mobile site


.brand
{
  font-size: 75%;
  font-family: monospace;
}

.brand_left
{
  float: left;
}

.brand_right
{
  text-align: right;
}

.package
{
  font-family: monospace;
  font-weight: bold;
}

.attribute,
.class,
.command,
.constant,
.element,
.file,
.function,
.keyword,
.type,
.variable
{
  font-family: monospace;
}

.example, .license, .terminal
{
  font-family:    monospace;
  border:         1px solid #ccc;
  padding-top:    1.0em;
  padding-left:   1.0em;
  padding-bottom: 1.0em;
  margin-top:     1.2em;
  overflow:       auto;
}

.dependencies table td
{
  padding-right: 3.0em;
  font-family:   monospace;
  font-size:     9pt;
}

.examples table td
{
  padding-right: 2.0em;
  vertical-align: top;
}

.files table td
{
  padding-right: 2.0em;
  vertical-align: top;
}

.brand
{
  font-size: 75%;
  font-family: monospace;
}

.brand_left
{
  float: left;
}

.brand_right
{
  text-align: right;
}

.package
{
  font-family: monospace;
  font-weight: bold;
}

.attribute,
.class,
.command,
.constant,
.element,
.file,
.function,
.keyword,
.type,
.variable
{
  font-family: monospace;
}

.example, .license, .terminal
{
  font-family:    monospace;
  border:         1px solid #ccc;
  padding-top:    1.0em;
  padding-left:   1.0em;
  padding-bottom: 1.0em;
  margin-top:     1.2em;
  overflow:       auto;
}

.dependencies table td
{
  padding-right: 3.0em;
  font-family:   monospace;
  font-size:     9pt;
}

.st200_table td
{
  padding-right: 2.0em;
  vertical-align: top;
}

Add 2em padding for all tables

Add 2em padding for all tables


@import '../../../../styles/base.css';

.PostSummary {
  opacity: 0;
  margin-bottom: 1.8em;
    a h1 {
      font-family: "$display-regular";
      font-size: 2.9em;
      line-height: 1em;
      letter-spacing: -2px;
      margin-bottom: 0.5em;
      color: $cl-postSumaryTilte;
    }
    .postText{
      letter-spacing: -1px;
      font-size: 0.9em;
      color: $cl-postText;
      font-family: "$text-font";
    }
}

.PostSummaryAnim {
  -webkit-animation: fade-in-up 230ms;
  animation: fade-in-up 230ms both;
  -webkit-animation-delay: 10ms;
  animation-delay: 10ms;
}

.linkImage{
    width: 100%;
    height: 130px;
    display: block;
    overflow: hidden;
    background-color: $bg-linkImage;
    img{
      margin-top: -25%;
    }
}

@import '../../../../styles/base.css';

.PostSummary {
  opacity: 0;
  margin-bottom: 1.8em;
    a h1 {
      font-family: "$display-regular";
      font-size: 2.9em;
      line-height: 1em;
      letter-spacing: -2px;
      margin-bottom: 0.3em;
      color: $cl-postSumaryTilte;
    }
    .postText{
      letter-spacing: -1px;
      font-size: 0.9em;
      color: $cl-postText;
      font-family: "$text-font";
    }
}

.PostSummaryAnim {
  -webkit-animation: fade-in-up 230ms;
  animation: fade-in-up 230ms both;
  -webkit-animation-delay: 10ms;
  animation-delay: 10ms;
}

.linkImage{
    width: 100%;
    height: 130px;
    display: block;
    overflow: hidden;
    background-color: $bg-linkImage;
    img{
      margin-top: -25%;
    }
}

Change position of blog title

Change position of blog title


.full-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  font-size: 25px;
  font-weight: 100;
  padding: 30px;
  margin: auto;
  text-align: center;

  a {
    text-decoration: none;

    &:hover {
      text-decoration: none;
    }
  }

  button {
    cursor: pointer;
    font-size: 1em;
    color: var(--link-color);
    text-decoration: none;
    font-weight: normal;

    &:hover {
      color: var(--link-color-hover);
    }
  }
}

.sub-message {
  font-size: 70%;
}

.full-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  font-size: 25px;
  padding: 30px;
  margin: auto;
  text-align: center;

  a {
    text-decoration: none;

    &:hover {
      text-decoration: none;
    }
  }

  button {
    cursor: pointer;
    font-size: 1em;
    color: var(--link-color);
    text-decoration: none;
    font-weight: normal;

    &:hover {
      color: var(--link-color-hover);
    }
  }
}

.sub-message {
  font-size: 70%;
}

Increase font-weight for full-view messages


body {
  background-color: #0277bd;
}
font {
  color: #0277bd;
}
a {
  color: yellow;
  font-family: "Times New Roman", Times, serif;
    font-size: 180%;
}
/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
    background-color: #0277bd;
    font-family: "Times New Roman", Times, serif;
    font-size: 180%;
    color: yellow;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
    background-color: blue;
}
/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 0 18px;
    background-color: #0277bd;
    display: none;
}

/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel.show {
    display: block !important;
}

body {
  background-color: #0277bd;
}
font {
  color: #0277bd;
}

img{
    display: inline;
}

a {
   color: yellow;
   font-family: "Times New Roman", Times, serif;
   font-size: 180%;
   display: inline;
}
/* Style the buttons that are used to open and close the accordion panel */
button.accordion {
    background-color: #0277bd;
    font-family: "Times New Roman", Times, serif;
    font-size: 180%;
    color: yellow;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
    background-color: blue;
}
/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 0 18px;
    background-color: #0277bd;
    display: none;
}

/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel.show {
    display: block !important;
}

Remove lines and change image sizes

Remove lines and change image sizes


.banner-sub {
    display: block;
    background: #535353;
}

.banner-sub__inner {
    min-width: 320px;
    max-width: 960px;
    margin: 0 auto;
    padding: 0.25em 1.5em;
    text-align: right;
}

.banner-sub__link {
    font-size: 0.8em;
    color: whitesmoke;
    text-transform: uppercase;
    text-decoration: none;
}

.banner-sub__link:not(:last-child) {
    margin-right: 1.5em;
}

.banner-sub__link:first-of-type {
    margin-left: 0;
}

@media (max-width: 720px) {
    .banner-sub {
        display: none;
    }
}

Hide sublinks on smaller screen sizes

Hide sublinks on smaller screen sizes


div {
  padding: 0;
  border: 0;
  margin: 0;
}
#container-for-title-and-board {
  background-color: black;
}
#title-west {
  background-color: cyan;
  display: none;
}
#title-north {
  background-color: blue;
}
#board-area {
  background-color: grey;
}
#info-south {
  background-color: red;
}
#info-east {
  background-color: pink;
  display:none;
}

div, body {
  padding: 0;
  border: 0;
  margin: 0;
}
#container-for-title-and-board {
  background-color: black;
}
#title-west {
  background-color: cyan;
  display: none;
}
#title-north {
  background-color: blue;
}
#board-area {
  background-color: grey;
}
#info-south {
  background-color: red;
}
#info-east {
  background-color: pink;
  display:none;
}

Remove empty space around body

Remove empty space around body


body, #disp{text-align:center;list-style-position:inside;background-color:#ffffff;font-size:2em;}
#about, #txt{font-size:.75em !important;}
a{color:#2f4f4f;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;color:#ff0000;}
a:active{text-decoration:none;color:#ff69b4;}

body, #disp{text-align:center;list-style-position:inside;background-color:#ffffff;font-size:2em;}
#disp{margin-bottom:50px;}
#about, #txt{font-size:1em !important;}
a{color:#2f4f4f;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;color:#ff0000;}
a:active{text-decoration:none;color:#ff69b4;}

Reduce disp margin, make about text 1em

Reduce disp margin, make about text 1em


.indent1 {
    text-indent: 1rem;
}

.indent2 {
    text-indent: 2rem;
}

.indent3 {
    text-indent: 3rem;
}

.indent4 {
    text-indent: 4rem;
}

.scrollable {
    overflow: scroll;
    height: 30rem;
}

label.light {
    font-weight: normal;
}

.search-help {
    padding-top: 100px;
    padding-bottom: 100px;
    font-size: 1.5rem;
}

.ea-number {
    width: 2rem;
    text-align: right;
}

.ea-description {
    text-align: left;
    padding-left: 1rem;
}

.triangle-right:before {
    content: "\25B6";
}

.triangle-down:before {
    content: "\25BC";
}

.triangle-right, .triangle-down {
    cursor: pointer; cursor: hand;
}

.nav, .pagination, .carousel, .panel-title a {
    cursor: pointer; cursor: hand;
}

Add cursor style via angular-ui.github.io/bootstrap/


body {
  padding-top: 65px;
  background-image: url(http://www.lafeens.com/wp-content/uploads/2012/12/donuts_background-e1355174695278.jpg);
  background-size: cover;
  padding: 20px;
}

#header {
  margin-bottom: 50px;
}

#footer {
  width: 100%;
  display: table;
  text-align: center;
  background-color: orange;
}

#copyright {
  padding: 15px;
}

.message {
  background-color: #FFEB99;
  border-right: 2px solid #eeeeee;
  border-bottom: 2px solid #eeeeee;
  margin-bottom: 15px;
  padding: 10px;
}

body {
  padding-top: 65px;
  background-size: cover;
  padding: 20px;
}

#header {
  margin-bottom: 50px;
}

#footer {
  width: 100%;
  display: table;
  text-align: center;
  background-color: orange;
}

#copyright {
  padding: 15px;
}

.message {
  background-color: #FFEB99;
  border-right: 2px solid #eeeeee;
  border-bottom: 2px solid #eeeeee;
  margin-bottom: 15px;
  padding: 10px;
}

Remove broken background image link.

Remove broken background image link.


Button {
    font-size: 42;
    horizontal-align: center;
}

ActivityIndicator {
    width: 30;
    color: #2E6DAD;
}

Label {
    padding: 15;
}

ActionBar {
    color: white;
    background-color: #2E6DAD;
}

.title {
    font-size: 30;
    horizontal-align: center;
    margin: 20;
}

.message {
    font-size: 20;
    color: #284848;
    horizontal-align: center;
    margin: 0 20;
    text-align: center;
}

.card {
    border-color: #2E6DAD;
    border-width: 1;
    border-radius: 5;
    width: 95%;
    margin-bottom: 10;
}

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

.list-header {
    background-color: #2E6DAD;
    color: white;
}

Button {
    font-size: 42;
    horizontal-align: center;
}

ActivityIndicator {
    margin: 10 0;
    width: 30;
    color: #2E6DAD;
}

Label {
    padding: 15;
}

ActionBar {
    color: white;
    background-color: #2E6DAD;
}

.title {
    font-size: 30;
    horizontal-align: center;
    margin: 20;
}

.message {
    font-size: 20;
    color: #284848;
    horizontal-align: center;
    margin: 0 20;
    text-align: center;
}

.card {
    border-color: #2E6DAD;
    border-width: 1;
    border-radius: 5;
    width: 95%;
    margin-bottom: 10;
}

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

.list-header {
    background-color: #2E6DAD;
    color: white;
}

Add breathing room at above and below all activity indicators


#content {
	margin-top:10px;
}
.bridge {
  margin-bottom: 10px;
  background-color: #DDD;
}
.bridge.edited .card {
    background-color: #ffd6cc;
}
.source {
  padding-left: 10px;
}
.targets {
     margin-top: 10px;
}
.target-prop {
}
#footer-bar {
	background-color: #DBDBDB;
}

Add css file for web-dashboard.

Add css file for web-dashboard.


.debug { border: 1px solid red;}

.b-1 { border: 1px solid; }

.bcolor{ background-color: #2CA6CB;}

.white-with-blue-shadow {
   margin-left: 0.75em;
   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
   color: white;
   font: 1.5em serif;
}

.white-with-blue-shadow-small {
   margin-left: 0.75em;
   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
   color: white;
   font: serif;
}

.c-w{color:white;}

.f-r{float:right;}

.debug { border: 1px solid red;}

.b-1 { border: 1px solid; }

.bcolor{ background-color: #2CA6CB;}

.white-with-blue-shadow {
   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
   color: white;
   font: 1.5em serif;
}

.white-with-blue-shadow-small {
   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
   color: white;
   font: serif;
}

.c-w{color:white;}

.f-r{float:right;}

Remove left margin, index now fixed

Remove left margin, index now fixed


.CodeMirror pre
{
	padding: 0 2px;
}

.CodeMirror-scroll
{
	background-color: transparent;
}

/*
* z-index override to make sure the cursor is visible when different addons,
* such as matchbracket block the cursor's visiblity when settings a background
* color as I do in the Visual Studio theme.
*/
.CodeMirror-cursor
{
	z-index: 3;
}

.CodeMirror-activeline-background {
  	background: transparent !important;
}

Fix to compensate for bracket activeline background change