/**
 * Tatoeba Project, free collaborative creation of multilingual corpuses project
 * Copyright (C) 2010  HO Ngoc Phuong Trang <tranglich@gmail.com>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http: //www.gnu.org/licenses/>.
 */

/*
 * Logs main
 */
#logs td {
    padding: 3px;
}

#logs .date {
    width: 100px;
}

#logs .username {
    width: 100px;
    padding: 0px 10px;
    text-align: center;
}

#logs .lang {
    width: 30px;
    padding: 0px 5px;
    text-align: center;
}

#logs img.flag {
    width: 20px;
}

#logs .text{
    max-width: 200px;
    overflow: hidden;
}

Set a "max-width" and "overflow: hidden" for logs text.

git-svn-id: 776ea4b3e47339c5b8782ec5e9346c740e073fb4@1268 e0e46c49-be69-4f5a-ad62-21024a331aea


/*
 * https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
*/

body { display: flex; flex-flow: column }
body > main  { min-height: 50vh }
body > aside { min-height: 30vh }
body > header, body > footer { min-height: 10vh }

@media (orientation: landscape) {
  body           { flex-flow: row wrap }
  body > main    { flex-basis: 70% }
  body > aside   { flex-basis: 30% }
  body > main,
  body > aside   { min-height: 80vh }
  body > header,
  body > footer  { flex-basis: 100% }
}

@media (min-width:786px) {
  body { margin: auto 5vw }
}

@media (min-width:1300px) {
  body { margin: auto 23vw }
}

/*
 * https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
*/

body { display: flex; flex-flow: column }
body > main  { min-height: 50vh }
body > aside { min-height: 30vh }
body > header, body > footer { min-height: 10vh }

@media (orientation: landscape) {
  body           { flex-flow: row wrap }
  body > main    { flex-basis: 70% }
  body > aside   { flex-basis: 30% }
  body > main,
  body > aside   { min-height: 80vh }
  body > header,
  body > footer  { flex-basis: 100% }
}

@media (min-width:786px) {
  body { margin: auto 5vw }
}

@media (min-width:1300px) {
  body { margin: auto 23vw }
}

Add link to basic concepts for flexbox

Add link to basic concepts for flexbox


@media (max-width: 768px) {

    .header {
        position: absolute;
    }

    /*sidebar*/

    #sidebar {
        height: auto;
        overflow: hidden;
        position: absolute;
        width: 100%;
        z-index: 1001;
    }

    /* body container */
    #main-content {
        margin: 0px!important;
        position: none !important;
    }

    #sidebar > ul > li {
        margin: 0 10px 5px 10px;
    }
    #sidebar > ul > li > a {
        height:35px;
        line-height:35px;
        padding: 0 10px;
        text-align: left;
    }

    #sidebar > ul > li > a, #sidebar > ul > li > ul.sub > li {
        width: 100%;
    }
    #sidebar > ul > li > ul.sub > li > a {
        background: transparent !important ;
    }

    /* sidebar */
    #sidebar {
        margin: 0px !important;
    }

    .btn {
        margin-bottom: 5px;
    }

}

@media (max-width: 480px) {

    .notification-row {
        display: none;
    }
}

@media (max-width:320px) {

    .notification-row {
        display: none;
    }
}

Remove unuseful breakpoint in theme

docs: Remove unuseful breakpoint in theme


/*
    Copyright © 2016 RunasSudo (Yingtong Li)

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

.stv-toplevel {
	background-color: #EEE;
	border: 1px solid #DDD;
	margin: 0;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.gvt-name {
	font-style: italic;
}

.gvt {
	border: 1px solid #555;
}

Add a border to GVTs

Add a border to GVTs


#search{
  padding: 7px;
  width: 100%;
  overflow: auto;
  user-select: none;
}

#search .search-bar{
  width: -webkit-fill-available;
  width: -moz-fill-available;
  width: fill-available;
  margin-bottom: 2px;
}

#search .result,
#search .toggle-button{
  cursor: pointer;
}

#search .switches{
  width: fit-content;
  margin-left: auto;
  font-size: 12px;
}

#search .toggle-button{
  display: inline-block;
  margin-left: 2px;
  border: 1px solid gray;
  padding: 1px;
  color: grey;
  text-align: center;
}

#search .toggle-button:hover{
  color: lightgray;
}

#search .toggle-button.selected{
  color: black;
  border-color: #3399ff;
}

#search .loading{
  text-align: center;
}

#search{
  padding: 7px;
  width: 100%;
  overflow: auto;
  user-select: none;
}

#search .search-bar{
  width: -webkit-fill-available;
  width: -moz-fill-available;
  width: fill-available;
  margin-bottom: 2px;
}

#search .result,
#search .toggle-button{
  cursor: pointer;
}

#search .switches{
  width: fit-content;
  font-size: 12px;
}

#search .toggle-button{
  display: inline-block;
  margin-left: 2px;
  border: 1px solid gray;
  padding: 1px;
  color: grey;
  text-align: center;
}

#search .toggle-button:hover{
  color: lightgray;
}

#search .toggle-button.selected{
  color: black;
  border-color: #3399ff;
}

#search .loading{
  text-align: center;
}

Remove margin-left on search switches

Remove margin-left on search switches


:host {
  width: 100%;
  height: 100%;
}

.content {
  margin: 15px;
}

#logo {
  position: absolute;
  width: 100%;
  top: 1px;
  left: 1px;
}

#logo img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#menu paper-fab {
  position: absolute;
  background: red;
  right: 5px;
  top: 5px;
}

.menu-toolbar {
  margin: none;
}

.shuttle-map {
  width: 100%;
  height: 100%;
}

.menu-dialog {
  width: 50%;
  min-height: 35%;
  max-height: 50%;
  font-size: 16px;
  overflow: scroll;
}

:host {
  width: 100%;
  height: 100%;
}

.content {
  margin: 15px;
}

#logo img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#menu paper-fab {
  position: absolute;
  background: red;
  right: 5px;
  top: 5px;
}

.menu-toolbar {
  margin: none;
}

.shuttle-map {
  width: 100%;
  height: 100%;
}

.menu-dialog {
  width: 50%;
  min-height: 35%;
  max-height: 50%;
  font-size: 16px;
  overflow: scroll;
}

Fix logo overlapping with map controls

Fix logo overlapping with map controls


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

.leaflet-control-layers {
	clear: none;
}

.compass.leaflet-control-custom {
	clear: none;
}

.button.leaflet-control-custom {
	margin-right: 8px;
	clear: none;
}

.leaflet-control-layers-expanded:hover {
	border-color: rgb(137, 132, 209);
}

.button:hover {
	border-color: rgb(137, 132, 209);
}

.center {
	text-align: center;
}

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

.compass.leaflet-control-custom {
	clear: none;
}

.button.leaflet-control-custom {
	margin-left: -2px;
	clear: none;
}

.leaflet-control-layers-expanded:hover {
	border-color: rgb(137, 132, 209);
}

.button:hover {
	border-color: rgb(137, 132, 209);
}

.center {
	text-align: center;
}

Move layer control underneath marker controls


/* Styles specific to EPUB books */

body {
  color: purple;
}

/* Styles specific to EPUB books */

.highlight pre {
  font-size: 82%;
}

code {
  font-size: 100%;
}

Fix up some EPUB/MOBI styles

Fix up some EPUB/MOBI styles

[#58384498 #58481646]


@import url('https://fonts.googleapis.com/css?family=PT+Sans');

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

.inner {
    max-width:40em!important;
}

ul>li:before {
    content: "–";
}

Use en-dash as marker character in unordered lists


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

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

Fix favicon sizes in password manager

Fix favicon sizes in password manager


.messageTextInput{
    padding: 10px;
    width: 60%;
    height: 10%;
    border: 1px solid black;
    margin-right: 3%;
}
.messageTextInput:focus {
    background-color: #ccffec;
}

.chatWindow {
    padding: 10px;
    width: 75%;
    height: 75%;
    float: left;
    border: 1px solid black;
}

.lobby {
    padding: 10px;
    width: 17%;
    height: 75%;
    float: right;
    border: 1px solid black;
}

.sendButton {
    padding: 10px;
    width: 10%;
    height: 10%;
    border:0px solid black;
    font-size: 1em;
}
.sendButton:hover {
    font-size: 0.92em;
    background-color: #07ffb2;
}
.sendButton:active {
    background-color: #11a474;
    position:relative;
}

.browserChatView{
    padding:10px;
    height: 95vh;
    border:1px solid black;
}
@media only screen and (max-width : 480px) and (max-height: 800px) {
    .chatWindow {
        width: 65%;
        height: 75%;
    }
    .sendButton {
        padding: 10px;
        width: 24%;
        height: 14%;
        font-size: 1em;
        float: right;
    }
    .messageTextInput{
        padding: 10px;
        width: 65%;
        height: 10%;
        border: 1px solid black;
        float: left;
    }
    .browserChatView{
        height: 100vh;
    }
}

Fix responsive on window resize

Fix responsive on window resize


section.ui-sortable-handle {
  padding: 3px;
  margin-bottom: 5px;
}
section.ui-sortable-handle h2 {
  margin-top: 0;
}
section.ui-sortable-handle.js-hover {
  cursor: move;
  border-radius: 5px;
  box-shadow: 0px 0px 1px 1px #999;
  background-color: #f8f8f8;
}
.curated-lists ul {
  padding-left: 0;
}
.curated-lists li {
  display: inline-block;
  padding-right: 5px;
  border-right: 1px solid #bbb;
  margin-right: 3px;
}
.curated-lists li:last-child {
  padding-right: 0;
  border-right: 0;
  margin-right: 0;
}

Tidy up list edit/delete controls.

Tidy up list edit/delete controls.


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

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

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

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

Change second third block blog index css


.user-documents-upload > li {
	margin-bottom: 22px;
}
.user-documents-upload small {
	color: var(--normal-text);
	display:block;
}
.user-documents-upload .file-uploader {
	margin-top: 0;
}

.user-documents-upload .info-main {
	margin-top: 11px;
	margin-bottom: 11px;
}

.section-primary.user-documents-upload-rejected {
	border-color: var(--error-background);
}

.user-documents-upload > li {
	margin-bottom: 22px;
}
.user-documents-upload small {
	color: var(--normal-text);
	display:block;
}

.user-documents-upload .info-main {
	margin-top: 11px;
	margin-bottom: 11px;
}

.section-primary.user-documents-upload-rejected {
	border-color: var(--error-background);
}

Remove not longer necessary rule

Remove not longer necessary rule


.status-message {
  margin-top: 1em !important;
  text-align: center !important;
}
.error-status-message {
  color: firebrick !important;
}
.result-status-message {
  color: darkgreen !important;
}

.compact-vertical {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.multiple-listviews .ui-content .ui-listview {
  /* Independently derived workaround for multiple-listviews spacing problem:
     https://github.com/jquery/jquery-mobile/issues/1204 */
  margin: -1px -15px -1px -15px !important;
}
/* I couldn't get .multiple-listviews right on the items, so I use this to
   compensate in the login form.  Argh. */
.compact-paragraph {
  margin: 10px; }

.empty-sign {
  color: gray !important;
}

.status-message {
  margin-bottom: -2em !important;
  text-align: center !important;
}
.error-status-message {
  color: firebrick !important;
}
.result-status-message {
  color: darkgreen !important;
}

.compact-vertical {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.multiple-listviews .ui-content .ui-listview {
  /* Independently derived workaround for multiple-listviews spacing problem:
     https://github.com/jquery/jquery-mobile/issues/1204 */
  margin: -1px -15px -1px -15px !important;
}
/* I couldn't get .multiple-listviews right on the items, so I use this to
   compensate in the login form.  Argh. */
.compact-paragraph {
  margin: 10px; }

.empty-sign {
  color: gray !important;
}

Make the status message hardly displace anything.


#body-login .error-broken-link{
 text-align:left;color:#fff;
}

#body-login .error-broken-link ul{
	margin:10px 0 10px 0;
}

#body-login .error-broken-link ul li{
	list-style: disc;list-style-position:inside;
}

#body-login .error-broken-link{
 text-align:left;color:#fff;
}

#body-login .error-broken-link ul{
	margin:10px 0 10px 0;
}

#body-login .error-broken-link ul li{
	list-style: disc;list-style-position:inside;cursor:default;
}

Use default cursor for list items

Use default cursor for list items


/* common styling for modals */
@import '..';

.modal {
  @apply --modal;

  padding: 4rem;
}

.overlay {
  @apply --absolute-fill;

  background-color: rgba(0, 0, 0, 0.8);
}

.clickable {
  @apply --clickable;
}

.modal_contents {
  z-index: 1;
  padding: 1rem;
  background-color: white;
}

.alert_modal_contents {
  @apply --font-body-2-dark;

  padding: 0.5rem 1rem;
}

.alert_modal_heading {
  @apply --font-header-dark;

  margin-bottom: 0.5rem;
}

.alert_modal_buttons {
  float: right;
  margin-top: 1rem;
}

/* common styling for modals */
@import '..';

.modal {
  @apply --modal;

  padding: 4rem;
}

.overlay {
  @apply --absolute-fill;

  background-color: rgba(0, 0, 0, 0.8);
}

.clickable {
  @apply --clickable;
}

.modal_contents {
  z-index: 1;
  width: 100%;
  padding: 1rem;
  background-color: white;
}

.alert_modal_contents {
  @apply --font-body-2-dark;

  padding: 0.5rem 1rem;
}

.alert_modal_heading {
  @apply --font-header-dark;

  margin-bottom: 0.5rem;
}

.alert_modal_buttons {
  float: right;
  margin-top: 1rem;
}

refactor(components): Set width of modal children to 100% by default


.header {
  margin-bottom: 30px;
  position: relative;
}

.header h1{
  font-size: 30px;
  margin-bottom: 10px;
}

.header a{
  text-decoration: none;
}

.header a:hover{
  text-decoration: underline;
}

.header h3{
  font-size: 20px;
  font-family: 'Georgia';
  color:#888;
}

.header::after{
  content: " ";
  width: 100px;
  position: absolute;
  bottom: -17px;
  left: 0;
  border-bottom: 5px solid #2C9140;
}

Add missing line at end of file

Add missing line at end of file


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

$font-url: 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto';
@import "semantic-ui";

Add semantic ui and google fonts to css manifest


.container {
  display: flex;
  height: 80px;
  background-image: linear-gradient(to right, var(--current-item-from-background-color), var(--current-item-to-background-color));
  background-repeat: no-repeat;
}

.waitContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 24px;
  width: 20%;
}

.waitUnit {
  font-size: 16px;
}

.primary {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
}

.ellipsis {
  text-overflow: ellipsis;
  overflow:hidden;
  white-space: nowrap;
}

.user {
  font-size: 18px;
}

.title {
  composes: ellipsis;
  font-size: 16px;
}

.artist {
  composes: ellipsis;
  font-size: 14px;
}

.btnContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: var(--container-padding);
}

/* Actions */
.button {
  fill: var(--btn-danger-color);
}

.playNext, .remove, .star, .info {
  composes: button;
}

.container {
  display: flex;
  height: 80px;
  background-image: linear-gradient(to right, var(--current-item-from-background-color), var(--current-item-to-background-color));
  background-repeat: no-repeat;
}

.waitContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 24px;
  width: 80px;
  overflow: hidden;
}

.waitUnit {
  font-size: 16px;
}

.primary {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
}

.ellipsis {
  text-overflow: ellipsis;
  overflow:hidden;
  white-space: nowrap;
}

.user {
  font-size: 18px;
}

.title {
  composes: ellipsis;
  font-size: 16px;
}

.artist {
  composes: ellipsis;
  font-size: 14px;
}

.btnContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: var(--container-padding);
}

/* Actions */
.button {
  fill: var(--btn-danger-color);
}

.playNext, .remove, .star, .info {
  composes: button;
}

Fix width of time column

Fix width of time column


/*
 * 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.min
 *= require bootstrap-responsive.min
 *= require_tree .
 */

 #terms {
	 height: 200px;
	 overflow-y: scroll;
 }

 #terms ul li {
   list-style-type: none;
 }

Remove bullet points from third-level list items in T&Cs


/*
 *= require bower_components/c3/c3
 *= require bower_components/patternfly-bootstrap-treeview/dist/bootstrap-treeview.min
 *= require ./main
 *= require ./automate_import_export
 *= require ./dialog_fields
 *= require angular
 *= require ./notifications
 *= require bower_components/angular-patternfly/dist/styles/angular-patternfly
 *= require ./schedule_editor
 *= require ./miq_tree
 *= require bower_components/codemirror/lib/codemirror
 *= require bower_components/codemirror/theme/eclipse
 *= require bower_components/kubernetes-topology-graph/dist/topology-graph
 *= require ./container_providers_dashboard
 *= require ./wizard
 *= require ./timeline
 *= require ./topology
 *= require ./container_topology
 *= require ./physical_infra_topology
 *= require ./metrics
 *= require ./service_dialogs
 *= require bower_components/xml_display/XMLDisplay
 *= require bower_components/patternfly-timeline/dist/timeline
 *= require bower_components/manageiq-ui-components/dist/css/ui-components
 *= require ui-select/dist/select
 *= require ./remote_console
 *= require graphiql/graphiql.css
 *= require piecharts
*/

/*
 *= require bower_components/c3/c3
 *= require bower_components/patternfly-bootstrap-treeview/dist/bootstrap-treeview.min
 *= require main
 *= require ./automate_import_export
 *= require ./dialog_fields
 *= require angular
 *= require ./notifications
 *= require bower_components/angular-patternfly/dist/styles/angular-patternfly
 *= require ./schedule_editor
 *= require ./miq_tree
 *= require bower_components/codemirror/lib/codemirror
 *= require bower_components/codemirror/theme/eclipse
 *= require bower_components/kubernetes-topology-graph/dist/topology-graph
 *= require ./container_providers_dashboard
 *= require ./wizard
 *= require ./timeline
 *= require ./topology
 *= require ./container_topology
 *= require ./physical_infra_topology
 *= require ./metrics
 *= require ./service_dialogs
 *= require bower_components/xml_display/XMLDisplay
 *= require bower_components/patternfly-timeline/dist/timeline
 *= require bower_components/manageiq-ui-components/dist/css/ui-components
 *= require ui-select/dist/select
 *= require ./remote_console
 *= require graphiql/graphiql.css
 *= require piecharts
*/

Include main.scss through the asset pipeline path resolver


body, textarea {
    font-size: 12pt;
    font-family: "Courier", monospace;
}

#title {
    font-size: 14pt;
    padding-bottom: 40px;
}

#conversion_table {
    border-spacing: 0;
    width: 100%;
    max-width: 600px;
}

#conversion_table td {
    height: 48px;
    vertical-align: top;
}

#conversion_table td:first-child {
    font-weight: bold;
    width: 1px;
    text-align: left;
    padding-right: 8px;
    border-bottom: 1px solid #c0c0c0;
}

#conversion_table td:last-child {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-image: linear-gradient(to right, #c0c0c0, transparent 90%);
    border-image-slice: 1;
}

textarea {
    outline: none;
    border: none;
    width: 100%;
    padding: 0;
    margin: 0;
    resize: none;
    overflow: hidden;
    text-align: right;
}

#conversion_table tr:last-child td {
    border: none;
}

body, textarea {
    font-size: 12pt;
    font-family: "Courier", monospace;
}

#title {
    font-size: 14pt;
    padding-bottom: 40px;
}

#conversion_table {
    border-spacing: 0;
    width: 100%;
    max-width: 600px;
    border-collapse: collapse;
}

#conversion_table td {
    height: 48px;
    vertical-align: top;
}

#conversion_table td:first-child {
    font-weight: bold;
    width: 1px;
    text-align: left;
    padding-right: 8px;
}

textarea {
    outline: none;
    border: none;
    width: 100%;
    padding: 0;
    margin: 0;
    resize: none;
    overflow: hidden;
    text-align: right;
}

#conversion_table tr {
    border-bottom: 1px solid #c0c0c0;
}

#conversion_table tr:last-child {
    border: none;
}

Remove the gradient; it looks silly.

Remove the gradient; it looks silly.


body {
    overflow-y: scroll;
}

#content {
    padding-bottom: 50px;
}

h2, h3 {
    float: left;
}

textarea {
    resize: vertical;
}

.page-header {
    margin: 20px 0px 20px 0px;
}

.clickToEdit {
    position: absolute;
    width: 100%;
    height: 0px;
    margin: 10px 0px 10px 0px;
    text-align: center;
}

.inlineEditTooltip {
    margin-left: 7px;
    padding: 2px 6px;
    font-size: 10px;
    color: #FFF;
    background: #005292;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

iframe {
    border: 1px solid #CCCCCC;
    border-radius: 4px 4px 4px 4px;
}

html {
    min-height: 100%;
    background-color: #EBF3F9;
}

body {
    overflow-y: scroll;
    background-color: transparent;
}

#content {
    padding-bottom: 50px;
}

h2, h3 {
    float: left;
}

textarea {
    resize: vertical;
}

.page-header {
    margin: 20px 0px 20px 0px;
}

.clickToEdit {
    position: absolute;
    width: 100%;
    height: 0px;
    margin: 10px 0px 10px 0px;
    text-align: center;
}

.inlineEditTooltip {
    margin-left: 7px;
    padding: 2px 6px;
    font-size: 10px;
    color: #FFF;
    background: #005292;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

iframe {
    border: 1px solid #CCCCCC;
    border-radius: 4px 4px 4px 4px;
}

Use the typical Fork style background color.


body {
  padding-top: 50px;
}

.skin-52prog {
  padding: 40px 15px;
  text-align: center;
}

body {
  padding-top: 50px;
  color: #5a5a5a;
}

.skin-52prog {
  padding: 40px 15px;
  text-align: center;
}

Update font color for <body>.

Update font color for <body>.


.hero.is-primary {
  background-color: #4abdac;
}

footer.footer .github-fork-ribbon-wrapper .github-fork-ribbon {
  background-color: #4abdac;
}

a, .card-content a h3 {
  color: #4abdac;
}

.menu-list a.is-active {
  background-color: #fc4a1a;
}

a.nav-item.is-tab.is-active, a.nav-item.is-tab.is-active:hover {
  border-bottom-color: #fc4a1a;
  color: #fc4a1a;
}

footer.footer .github-fork-ribbon-wrapper .github-fork-ribbon:hover a {
  border-color: #f7b733;
  color: #f7b733;
}

article a:hover, footer a:hover, #content a:hover, .menu-list a:hover, .card-content a:hover h3 {
  color: #f7b733;
}

a.nav-item.is-tab:hover {
  border-bottom-color: #f7b733;
}

article code {
  color: #f7b733;
}

.menu-list a.is-active:hover {
  color: #ffffff;
}

#mc_embed_signup_scroll button.is-success {
  background-color: #4abdac;
}

#mc_embed_signup_scroll .response.is-success {
    color: #4abdac;
}

.hero.is-primary {
  background-color: #4abdac;
}

footer.footer .github-fork-ribbon-wrapper .github-fork-ribbon {
  background-color: #4abdac;
}

a, .card-content a h3 {
  color: #4abdac;
}

.menu-list a.is-active {
  background-color: #fc4a1a;
}

a.nav-item.is-tab.is-active, a.nav-item.is-tab.is-active:hover {
  border-bottom-color: #fc4a1a;
  color: #fc4a1a;
}

footer.footer .github-fork-ribbon-wrapper .github-fork-ribbon:hover a {
  border-color: #f7b733;
  color: #f7b733;
}

article a:hover, footer a:hover, #content a:hover, .menu-list a:hover, .card-content a:hover h3 {
  color: #f7b733;
}

a.nav-item.is-tab:hover {
  border-bottom-color: #f7b733;
}

article code {
  color: #268bd2;
}

.menu-list a.is-active:hover {
  color: #ffffff;
}

#mc_embed_signup_scroll button.is-success {
  background-color: #4abdac;
}

#mc_embed_signup_scroll .response.is-success {
    color: #4abdac;
}

Switch inline code from yellow to blue

Switch inline code from yellow to blue


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

#second_from_top {
display: block;
position: relative;

}

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

#second_from_top {
display: block;
position: relative;

}

Change top block technical stylesheet

Change top block technical stylesheet


.ErrorBoundary {
  height: 100%;
  width: 100%;
  background-color: white;
  color: red;
  padding: 0.5rem;
  overflow: auto;
}

.Header {
  font-size: var(--font-size-sans-large);
  font-weight: bold;
}

.Stack {
  margin-top: 0.5rem;
  white-space: pre;
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-monospace-small);
  background-color: hsl(0, 100%, 97%);
  border: 1px solid hsl(0, 100%, 92%);
  border-radius: 0.25rem;
  padding: 0.5rem;
}

.ErrorBoundary {
  height: 100%;
  width: 100%;
  background-color: white;
  color: red;
  padding: 0.5rem;
  overflow: auto;
}

.Header {
  font-size: var(--font-size-sans-large);
  font-weight: bold;
}

.Stack {
  margin-top: 0.5rem;
  white-space: pre-wrap;
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-monospace-small);
  background-color: hsl(0, 100%, 97%);
  border: 1px solid hsl(0, 100%, 92%);
  border-radius: 0.25rem;
  padding: 0.5rem;
}

Enable text to wrap within error boundary stacks


header {
  font-size: 3em;
  margin: auto;
  padding: 0% 0% 0% 0%;
  left: -10em;
}

#nav-1 {
  display: block;
  font-size: 1.5em;
  border: none;
  top: -100em;
}

#li-1 {
  margin: auto;
  display: inline-table;
  position: relative;
  padding: 0% 5% 0% 5%;
  left: -4em;
}

* {
  font-family: Courier New;
}

html {
  background-color: #6C7A88;
  margin: none;
}

a {
  text-decoration: none;
  color: black;
}

a:link {
  color: #000000;
}

a:hover {
  color:#15FF23;
}

nav {
  border: none;
  margin: auto;
  padding: 0% 0% 0% 0%;
}

footer {
  position: absolute;
  bottom: -2px;
  font-size: .9em;
}

header {
  font-size: 3em;
  margin: auto;
  padding: 0% 0% 0% 0%;
  left: -10em;
}

#nav-1 {
  display: block;
  font-size: 1.5em;
  border: none;
  top: -100em;
}

#li-1 {
  margin: auto;
  display: inline-table;
  position: relative;
  padding: 0% 5% 0% 5%;
  left: -4em;
}

* {
  font-family: Courier New;
}

html {
  background-color: #6C7A88;
  margin: none;
}

a {
  text-decoration: none;
  color: black;
}

a:link {
  color: #000000;
}

a:hover {
  color:#15FF23;
}

nav {
  border: none;
  margin: auto;
  padding: 0% 0% 0% 0%;
}

footer {
  position: relative;
  bottom: -2px;
  font-size: .9em;
}

Update the css for footer

Update the css for footer


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

/*
When drag events occur, `p-mod-override-cursor` is added to the body.
This reuses the same CSS selector logic as jp-IFrame to prevent embedded
PDFs from swallowing cursor events.
*/
body.p-mod-override-cursor .jp-PDFContainer {
  position: relative;
}

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

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

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

.jp-Notebook .jp-Cell .jp-OutputArea .jp-PDFViewer {
  min-height: 500px;
}

/*
When drag events occur, `p-mod-override-cursor` is added to the body.
This reuses the same CSS selector logic as jp-IFrame to prevent embedded
PDFs from swallowing cursor events.
*/
body.p-mod-override-cursor .jp-PDFContainer {
  position: relative;
}

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

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

Enforce large-ish min-height for embedded pdfs in notebook outputs.


html,body{
    height: 100%
}

footer {
/*    bottom: 0px !important;
    left: 0;
    position: fixed !important;
    right: 0;
    */
    height: 24px;
    width:100%;
    position: absolute !important;
    margin: 0px !important;
    left: 0;
    bottom: 0;
}

#holder {
  min-height: 100%;
  position:relative;
}

#content-holder{
    padding-bottom: 24px;
}

html,body{
    height: 100%
}

footer {
    height: 24px;
    width:100%;
    position: absolute !important;
    margin: 0px !important;
    left: 0;
    bottom: 0;
}

#holder {
  min-height: 100%;
  position:relative;
}

#content-holder{
    padding-bottom: 24px;
}

Remove some garbage from CSS

Remove some garbage from CSS


.highlight {
  background-color: #272822;
  color: #f8f8f2;
  font-size: 10pt;
  overflow: scroll;
}

.code {
  color: #f8f8f2;
}

/* line numbers */
.l {
  color: #90908a;
  background-color: #3c3d37;
}

/* comment */
.c {
  color: #75715e;
}

/* function? */
.k {
  color: #66d9ef;
}

/* brackets () */
.p {
  color: #f92672;
}

/* argument? */
.n {
  color: #f8f8f0;
}

/* string */
.s {
  color: #fc7c21;
}

/* operator */
.o {
  color: #f92672;
}

/* import? */
.kn {
  color: #a5e22e;
}

/* thing to import */
.nn {
  color: #f8f8f2;
}

/* calling a function */
.nb {
  color: #f92672;
}

/* number? */
.mi {
  color: #8f7ee2;
}

/* in etc. */
.ow {
  color: #2ac1a3;
}

.highlight {
  background-color: #272822;
  color: #f8f8f2;
  font-size: 10pt;
  overflow: auto;
}

.code {
  color: #f8f8f2;
}

/* line numbers */
.l {
  color: #90908a;
  background-color: #3c3d37;
}

/* comment */
.c {
  color: #75715e;
}

/* function? */
.k {
  color: #66d9ef;
}

/* brackets () */
.p {
  color: #f92672;
}

/* argument? */
.n {
  color: #f8f8f0;
}

/* string */
.s {
  color: #fc7c21;
}

/* operator */
.o {
  color: #f92672;
}

/* import? */
.kn {
  color: #a5e22e;
}

/* thing to import */
.nn {
  color: #f8f8f2;
}

/* calling a function */
.nb {
  color: #f92672;
}

/* number? */
.mi {
  color: #8f7ee2;
}

/* in etc. */
.ow {
  color: #2ac1a3;
}

Change to on demand scrollbar

Change to on demand scrollbar


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

@namespace "http://www.w3.org/1999/xhtml";

body {
  -webkit-user-select: none;
  cursor: default;
}

webview, adview {
  display: inline-block;
  width: 300px;
  height: 300px;
}

html, body {
  overflow: hidden;
}

img, a {
  -webkit-user-drag: none;
}

[contenteditable], input {
  -webkit-user-select: auto;
}

Add rule to platform apps default CSS to allow user selection within content-editable elements.

BUG=226459

Review URL: https://chromiumcodereview.appspot.com/13801013

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


/* modelAnswer.html */

	#pageContents .panel {
		overflow:	auto;
	}

	#pageContents button {
		margin:		10px;
		float:		right;
	}

	#answer {
		margin-top:	1em;
	}

	#pageContents .panelImg {
		text-align: center;
		padding-top: 1em;
	}

	#pageContents .panelImg img {
		max-width: 65%;
	}

	.x_mobile #pageContents .panelImg img {
		max-width: 80%;
	}

	#answerTxt {
		display:	block;
		width:		95%;
		resize:		vertical;
		margin:	0.5em auto;
	}

	#copyTxt {
		color:		red;
		font-size:	0.8em;
	}

/* modelAnswer.html */

	#pageContents .panel {
		overflow:	auto;
	}

	#pageContents button {
		margin:		10px;
		float:		right;
	}

	#answer {
		margin-top:	1em;
	}

	#pageContents .panelImg {
		text-align: center;
		padding-top: 1em;
	}

	#pageContents .panelImg img {
		max-width: 65%;
	}

	.x_mobile #pageContents .panelImg img {
		max-width: 80%;
	}

	#answerTxt {
		display:	block;
		width:		95%;
		resize:		vertical;
		margin:	0.5em auto;
	}

	#copyTxt {
		color:		#b50202;
		font-size:	0.8em;
	}

Increase contrast of red text on model answer results page *Accessibility


.menu__heading {
    display: block;
    vertical-align: middle;
    text-transform: uppercase;
    text-decoration: none;
    color: #333;
    font-size: 80%;
    line-height: 1.5em;
    padding: 5px 20px;
}

@media screen and (min-width: 35.5em) {
    .menu__heading {
        display: inline-block;
    }
}

.menu__heading {
    display: block;
    vertical-align: middle;
    text-transform: uppercase;
    text-decoration: none;
    color: #333;
    font-size: 80%;
    line-height: 1.5em;
    padding: 5px 20px;
}

.menu__heading:hover {
    text-decoration: none;
}

@media screen and (min-width: 35.5em) {
    .menu__heading {
        display: inline-block;
    }
}

Remove underline from menu heading

Remove underline from menu heading


section.select-seats {
    display: flex;
    flex-direction: row;
}

div.seat-info div {
    border: 1px dotted;
    padding: 0.5rem;
}

.theater-seat-map svg {
    max-width: 520px;
    max-height: 620px;
}

.theater-seat-map svg rect.stage {
    stroke-width: 1;
    fill: none;
    stroke: #000;
}

.theater-seat-map svg text.stage-text {
    font-size: 14;
    text-anchor: middle;
    fill: #000;
}

.seat {
    fill: #000;
}

.taken-seat {
    fill: #ff173d;
}

.selected-seat {
    fill: #ffff00;
}

.seat:not(.taken-seat) {
    cursor: pointer;
}

.seat:not(.taken-seat):hover {
    fill: #ffff00;
}

section.select-seats {
    display: flex;
    flex-direction: row;
}

div.seat-info div {
    border: 1px dotted;
    padding: 0.5rem;
}

.theater-seat-map svg {
    border: 1px solid black;
}

.theater-seat-map svg rect.stage {
    stroke-width: 1;
    fill: none;
    stroke: #000;
}

.theater-seat-map svg text.stage-text {
    font-size: 14;
    text-anchor: middle;
    fill: #000;
}

.seat {
    fill: #000;
}

.taken-seat {
    fill: #ff173d;
}

.selected-seat {
    fill: #ffff00;
}

.seat:not(.taken-seat) {
    cursor: pointer;
}

.seat:not(.taken-seat):hover {
    fill: #ffff00;
}

Remove magic numbers from select.seats.css


.rotate-z-180 {
  transform: rotate(180deg); /* reveiving element should be block-level */
}

.rotate-z-180 {
  transform: rotateZ(180deg); /* reveiving element should be block-level */
}

Update rotate-z-180 to specifically rotate around z-axis


body {
    text-align: center;
}
.game {
    border: 1px solid black;
    width: 250px;
    margin: 0 auto;
}
.your-move-message, opponent-move-message {
	display: none;
	display: none;
}

body {
    text-align: center;
}
.game {
    border: 1px solid black;
    width: 250px;
    margin: 0 auto;
}
#your-move-message, #opponent-move-message {
    display: none;
    display: none;
}

Fix wrong selector in css, also mixed tabs&spaces indentation


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

/* Never edit core.css, only edit main.css and then run 'make'.  */

body {
  font-family: Arial, sans-serif;
  font-size: 15px;
}

#pageWrapper {
  background: white;
}
.col {
  padding: 0.5em;
}

html /deep/ core-toolbar,
#title {
  background-color: #D95F02;
  color: #fff;
}

#title status-sk {
  margin-left: auto;
}

#title login-sk {
  margin-left: 3em;
}

#title /deep/ a {
  color: white;
}

html /deep/ a {
  color: #FF7F00;
  font-weight: bold;
}

html /deep/ #mainContainer {
  padding: 1em;
  background: white;
}

html /deep/ paper-button {
  color: #1F78B4;
}

html /deep/  paper-button:hover {
  background: #eee;
}

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

/* Never edit core.css, only edit main.css and then run 'make'.  */

body {
  font-family: Arial, sans-serif;
  font-size: 15px;
}

#pageWrapper {
  background: white;
}
.col {
  padding: 0.5em;
}

html /deep/ core-toolbar,
#title {
  background-color: #D95F02;
  color: #fff;
}

#title status-sk {
  margin-left: auto;
}

#title login-sk {
  margin-left: 3em;
}

#title /deep/ a {
  color: white;
}

html /deep/ a {
  color: #FF7F00;
  font-weight: bold;
}

html /deep/ #mainContainer {
  padding: 1em;
  background: white;
  min-height: 30em;
}

html /deep/ paper-button {
  color: #1F78B4;
}

html /deep/  paper-button:hover {
  background: #eee;
}

Fix broken menu in Gold

Fix broken menu in Gold

BUG=skia:
TBR=jcgregorio
NOTRY=true

Review URL: https://codereview.chromium.org/1761783003


/* Override banner in style.css */
#banner h1 {
    font-stretch: none;
    text-transform: none;
}

.footnote {
    font-size: 90%;
}

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

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

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

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

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

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

/* Override banner in style.css */
#banner h1 {
    font-stretch: normal;
    text-transform: none;
}

.footnote {
    font-size: 90%;
}

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

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

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

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

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

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

Fix font-stretch none > normal

Fix font-stretch none > normal


Fix visual style for disabled input in iPad;


.login_form{
	display: none;
}

.signup_form{
	display: none;
}

#error{
	color: red;
}

Add red color to error message

Add red color to error message


form table li {
    list-style-type: none;
}

.form-indent { margin-left: 2.5em; }
.horizontal { width: 30em; }
    .horizontal li { float: left; margin: 0; }
    .horizontal li label { width: 4em; display: block; float: left; }
#recurrence-options { float: left; }
    #recurrence-options li { margin-bottom: 4px; }

#add_occurrences { cursor: pointer; }

@media (max-device-width: 600px) {
    #subscribe-instructions {
        font-size: 450%;
    }
    #subscribe-instructions h4 {
        font-size: 100%;
    }
}

form table li {
    list-style-type: none;
}

.form-indent { margin-left: 2.5em; }
.horizontal { width: 30em; }
    .horizontal li { float: left; margin: 0; }
    .horizontal li label { width: 4em; display: block; float: left; }
#recurrence-options { float: left; }
    #recurrence-options li { margin-bottom: 4px; }

#add_occurrences { cursor: pointer; }

@media (max-device-width: 600px) {
    #subscribe-instructions {
        font-size: 450%;
        line-height: 1em;
    }
    #subscribe-instructions h4 {
        font-size: 100%;
    }
}

Fix line height on skinny screens

Fix line height on skinny screens


.synopsis {
    color: #7E8184;        /* Light gray */
    font-style: italic;
}

.synopsis em {
    font-style: normal;
}

.page {
    width: 600px;
    margin: 0 auto;
}

.button {
    color: #FFF;
    background-color: #5995DA;    /* Blue */
    font-weight: bold;
    padding: 20px;
    text-align: center;
    border: 2px solid #5D6063;    /* Dark gray */
    border-radius: 5px;

    width: 200px;
    margin: 20px auto;
  }

  .call-to-action {
    font-style: italic;
    background-color: #EEB75A;    /* Yellow */
  }

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

  a:visited {
    color: purple;
  }

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

  a:active {
    color: red;
  }

  a:visited:hover {
    color: orange;
  }

a:visited:active {
    color: red;
  }

Add pseudo classes for anchor tags

Add pseudo classes for anchor tags


/*
 Theme Name:   Harp Column Child
 Theme URI:    http://example.com/smartmag-child/
 Description:  SmartMag Child Theme for Harp Column
 Author:       Hugh Brock
 Author URI:   http://example.com
 Template:     smart-mag
 Version:      1.0.0
*/

@import url("../smart-mag/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

#buddypress #whats-new-options {
	overflow: hidden;
}

#buddypress form#whats-new-form textarea {
	overflow: hidden;
}

/* style the banner ad widget */

div.ad_container_1 {
  float: right;
  margin-top: 22px;
}

.pmpro_level-price-select {
  text-align: center;
  min-height: 150px;
  width: 200px;
  margin-top: 20px;
  float: left;
}

.bbp-logged-in .links li {
  margin-bottom: 1em;
}
.bbp-logged-in .links li a {
  font-weight: bold;
}

.current-level-text {
  font-weight: bold;
  margin: 0;
  padding: 0;
}

#bbpress-forums .post-content {
	font-size: 14px;
}

/*
 Theme Name:   Harp Column Child
 Theme URI:    http://example.com/smartmag-child/
 Description:  SmartMag Child Theme for Harp Column
 Author:       Hugh Brock
 Author URI:   http://example.com
 Template:     smart-mag
 Version:      1.0.0
*/

@import url("../smart-mag/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

#buddypress #whats-new-options {
	overflow: hidden;
}

#buddypress form#whats-new-form textarea {
	overflow: hidden;
}

/* style the banner ad widget */

div.ad_container_1 {
  float: right;
  margin-top: 22px;
}

.pmpro_level-price-select {
  text-align: center;
  min-height: 150px;
  width: 200px;
  margin-top: 20px;
  float: left;
}

.bbp-logged-in .links li {
  margin-bottom: 1em;
}
.bbp-logged-in .links li a {
  font-weight: bold;
}

.current-level-text {
  font-weight: bold;
  margin: 0;
  padding: 0;
}

#bbpress-forums .forums .bbp-body .post-content {
        font-size: 14px;
        color: #333;
}

#bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content {
    font-size: 15px;
    color: #222
}

Make forum type a bit bigger

Make forum type a bit bigger


body {
  padding-top: 70px;
}

.footer {
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: auto;
  color: #efefef;
  background-color: #333;
}
footer a {
  color: #9af7fe;
}
.features .glyphicon{
  font-size: 32px;
}

.quote{
  background-color: #444;
  color: #e1e1e1;
  margin: 2em 0;
  border: none;
}

.quote blockquote{
  border: none;
  margin: 0;
}

.quote footer {
  color: #c1c1c1;
}

Add required body padding for fixed-top

Add required body padding for fixed-top


.container {
  display: flex;
  flex-direction: row;
}

.column {
  margin-right: 8px;
  min-width: 173px;
}

table {
  width: 100%;
}

.withButtons tr {
  height: 23px;
}

button:disabled {
  visibility: hidden;
}

.standings {
  border: 1px solid black;
  border-collapse: collapse;
}

.standings td {
  border: 1px solid black;
  padding: 4px;
}

.container {
  display: flex;
  flex-direction: row;
}

.column {
  margin-right: 8px;
  min-width: 200px;
}

table {
  width: 100%;
}

.withButtons tr {
  height: 23px;
}

button:disabled {
  visibility: hidden;
}

.standings {
  border: 1px solid black;
  border-collapse: collapse;
}

.standings td {
  border: 1px solid black;
  padding: 4px;
}

Increase column width to 200px

Increase column width to 200px


@import 'fonts.css';
@import 'header.css';
@import 'nav.css';
@import 'blog.css';
@import 'footer.css';
@import 'jekyll-github.css';

.container { max-width: 725px; }

.content {
  margin: 0 auto;
  font-family: 'rubiklight';
}

img {
  max-width: 100%;
}

h1,h2,h3,h4 {
  font-family: 'rubikmedium';
}

p {
  font-size: 14pt;
}

@import 'fonts.css';
@import 'header.css';
@import 'nav.css';
@import 'blog.css';
@import 'footer.css';
@import 'jekyll-github.css';

.container { max-width: 725px; }

.content {
  margin: 0 auto;
  font-family: 'rubiklight';
}

img {
  max-width: 100%;
}

h1,h2,h3,h4 {
  font-family: 'rubikmedium';
}

p {
  font-size: 12pt;
}

pre,code {
  font-family: 'Anonymous Pro', sans-serif;
}

Use AnonymousPro for code blocks.

Use AnonymousPro for code blocks.


/**
 * Copyright (C) 2015 Wasabeef
 *
 * 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.
 */

@charset "UTF-8";

html {
    height: 100%;
}

body {
    min-height: 100%;
    overflow: hidden;
}

body, h1, p {
    margin: 0;
}

#editor {
        -webkit-user-select: auto !important;
        -webkit-user-modify: read-write !important;
}

#editor:focus {
        outline: 0px solid transparent;
}

#editor {
    min-height: 100%;
	font-family: 'HelveticaNeue';
	color:#666666;
	line-height:28px;
	font-size: 12pt;
}

/**
 * Copyright (C) 2015 Wasabeef
 *
 * 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.
 */

@charset "UTF-8";

html {
    height: 100%;
}

body {
    min-height: 100%;
    overflow: hidden;
}

body, h1, p {
    margin: 0;
}

#editor {
        -webkit-user-select: auto !important;
        -webkit-user-modify: read-write !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#editor:focus {
        outline: 0px solid transparent;
}

#editor {
    min-height: 100%;
	font-family: 'HelveticaNeue';
	color:#666666;
	line-height:28px;
	font-size: 12pt;
}

Remove gray highlight in between tap and actual focus


#container
{
  width: 95%;
  margin: 0 auto;
}

.masthead
{
  margin: 0 auto;
  max-width: 320px;
}

body
{
  color: rgba(71, 66, 59, 1);
  background-color: rgba(242, 249, 248, 1);
  font-size: large;
}

h1
{
  color: rgba(17, 113, 134, 1);
}

h2
{
  color: rgba(17, 113, 134, 1);
  /*color: rgba(133, 179, 194, 1);*/
}

a:visited
{
  color: rgba(119, 119, 119, 1);
}

a
{
  color: rgba(167, 183, 183, 1);
}

#avatar
{
  margin: 0 auto;
  background: url('../img/avatar_v2_200.jpg') no-repeat;
  background-size: contain;
}

.circle-200
{
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  width: 200px;
  height: 200px;
  margin-right: 15px;
}

#container
{
  width: 95%;
  margin: 0 auto;
}

.masthead
{
  margin: 0 auto;
  max-width: 320px;
}

body
{
  color: rgba(71, 66, 59, 1);
  background-color: rgba(242, 249, 248, 1);
  font-size: large;
}

h1
{
  color: rgba(17, 113, 134, 1);
}

h2
{
  color: rgba(17, 113, 134, 1);
  /*color: rgba(133, 179, 194, 1);*/
}

a:visited
{
  color: rgba(119, 119, 119, 1);
}

a
{
  color: rgba(167, 183, 183, 1);
}

#avatar
{
  margin: 0 auto;
}

.circle-200
{
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  width: 200px;
  height: 200px;
  margin-right: 15px;
}

Remove background image via CSS.

Remove background image via CSS.


/* Parameters modale */
#overlay .settings-dropdown-menu {
    color: #444444;
    background-color: white;
    border-radius: 3px;
    border: 1px solid #C0C0C0;
    box-shadow: 0 1px 3px 0 rgba(50, 54, 63, 0.2), 0 6px 18px 0 rgba(50, 54, 63, 0.2);
}

#overlay .settings-dropdown-menu > ul + ul {
    border-top: 1px solid #C0C0C0;
}

#overlay .settings-dropdown-menu li:hover {
    background-color: #F5F6F7;
}

/* Parameters modale */
#overlay .settings-dropdown-menu {
    color: #444444;
    background-color: white;
    border-radius: 3px;
    border: 1px solid #C0C0C0;
    box-shadow: 0 1px 3px 0 rgba(50, 54, 63, 0.2), 0 6px 18px 0 rgba(50, 54, 63, 0.2);
}

#overlay .settings-dropdown-menu > ul + ul {
    border-top: 1px solid #C0C0C0;
}

#overlay .settings-dropdown-menu li a:hover,
#overlay .settings-dropdown-menu li a:focus {
    background-color: #F5F6F7;
}

[CSS] Make dropdown menu links respond visually to keyboard navigation


.field input.youtube {
    background-image: url('../images/field-icon-youtube.png');
    background-position: 6px center;
    background-repeat: no-repeat;
    background-size: 28px 20px;
    padding-left: 40px;
}
.field .youtube-active input.youtube {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	padding-right: 120px;
}

.field .youtube-info {
	display: none;
	background-color: #eee;
	border: 1px solid #b3b3b3;
	border-top: 0;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	height: 45px;
	width: 510px;
}
.field .youtube-active .youtube-info {
	display: block;
}

.field .youtube-info-thumb {
	float: right;
}

.field .youtube-info-title {
	font-size: 13px;
	font-weight: bold;
	padding: 7px 7px 0 7px;
	margin-bottom: 0;
}

.field .youtube-info-more {
	font-size: 11px;
	padding: 0px 7px 7px 7px;
	margin-bottom: 0;
}

.field input.youtube {
    background-image: url('../images/field-icon-youtube.png');
    background-position: 6px center;
    background-repeat: no-repeat;
    background-size: 28px 20px;
    padding-left: 40px;
}
.field .youtube-active input.youtube {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.field .youtube-info {
	display: none;
	background-color: #eee;
	border: 1px solid #b3b3b3;
	border-top: 0;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	height: 45px;
	width: 510px;
}
.field .youtube-active .youtube-info {
	display: block;
}

.field .youtube-info-thumb {
	float: right;
}

.field .youtube-info-title {
	font-size: 13px;
	font-weight: bold;
	padding: 7px 7px 0 7px;
	margin-bottom: 0;
}

.field .youtube-info-more {
	font-size: 11px;
	padding: 0px 7px 7px 7px;
	margin-bottom: 0;
}

Remove unnecessary padding from input field


/*
 * 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 foundation_and_overrides
 *= 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 foundation_and_overrides
 *= require foundation-icons
 *= require_tree .
 */

Add foundation icons to asset pipeline

Add foundation icons to asset pipeline


.highlight {
  background-color: #f8f8f8;
}

body {
  font-family: 'Lora', 'Times New Roman', 'serif';
  font-size: 18px;
  line-height: 1.42857143;
}

.highlight {
  background-color: #f8f8f8;
}

body {
  font-family: 'Georgia', 'Lora', 'Times New Roman', 'serif';
  font-size: 1.2rem;
  line-height: 1.7rem;
  text-align: justify center;
}

article {
  max-width: 900px;
}

article p {
  text-align: justify center;
}

main article {
  margin: auto;
  padding-right: 20px;
  padding-left: 20px;
}

Modify css to make articles easier to read (for me)


body {
	background-color: #cc9900;
}

.medium {
	height: 144px;
	width: 144px;
	background-color: #ff4719;
	border: 3px solid black;
	/*padding: 9px;*/
}

#picture {
	height: 108px;
	width: 108px;
	margin: auto;
}

header {
	height: 144px;
	width: 610px;
	background-color: #ff4719;
	float: right;
	border: 3px solid black;
}

header h2 {
	margin: center;
}

a:link {
	text-decoration: none;
}

a:hover {
	font-weight: bolder;
	color: #cc9900;
}

nav {
	height: 72px;
	width: 72px;
	background-color: #cc9900;
}

Add css to nav element.

Add css to nav element.


body {
	background: #e6ffff;
  max-width: 700px;
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

Add a background to index page and center the body content


.wrapper {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.li {
    composes: wrapper;
    width: 100%;
}

.label-symbol-wrapper {
    composes: wrapper;
    flex: 1 1 auto;
}

.clickable {
    cursor: pointer;
}

.svg {
    margin-right: 0.25em;
    flex: 0 0 16px;
}

.label {
    flex: 1 1 90%;
}

.wrapper {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.li {
    composes: wrapper;
    width: 100%;
}

.label-symbol-wrapper {
    composes: wrapper;
    flex: 1 1 auto;
}

.clickable {
    cursor: pointer;
}

.svg {
    margin-right: 0.25em;
    flex: 0 0 auto;
}

.label {
    flex: 1 1 90%;
}

Set legend item svg to flex-basis auto to fix faulty width constraint in parent element.


.select-button {
	display: block;
	width: 2em;
	height: 2em;
	margin: 0 0.2em;

	background: inherit;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;

	font: inherit;
	font-size: 1em;
	white-space: nowrap;
	color: inherit;
}

.dark .select-button-font {
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.select-button-group {
	display: flex;
	align-items: center;
	justify-content: center;
}

.select-button {
	display: block;
	width: 2em;
	height: 2em;
	margin: 0 0.2em;

	background: inherit;
	border: none;
	box-shadow: inset 0 0 2px;
	border-radius: 50%;

	font: inherit;
	font-size: 1em;
	white-space: nowrap;
	color: inherit;
}

.select-button-group {
	display: flex;
	align-items: center;
	justify-content: center;
}

Replace button border with shadow

Replace button border with shadow


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

:root {
  --label-color: var(--color-teal-darkest);
}

.label {
  display: block;
  color: var(--label-color);
}

@import '@teamleader/ui-colors';

:root {
  --label-color: var(--color-teal-darkest);
}

.label {
  display: block;
  color: var(--label-color);
}

Remove unused import of ui-typogrphy

Remove unused import of ui-typogrphy


/**
 * Copyright (C) 2011 Orbeon, Inc.
 *
 * This program is free software; you can redistribute it and/or modify it under the terms of the
 * GNU Lesser General Public License as published by the Free Software Foundation; either version
 * 2.1 of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
 * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 * See the GNU Lesser General Public License for more details.
 *
 * The full text of the license is available at http://www.gnu.org/copyleft/lesser.html
 */

.fb-custom-xml-dialog textarea.xforms-textarea {
    width: 50em; height: 20em;                  /* Reasonably large area to view/edit the instance XML */
    font-family: monospace;                     /* Waiting for CodeMirror to do a better job */
    font-size: 93%;
}

.fb-custom-xml-dialog .xforms-select1 {
    margin:  0.5em 0 1em 0; display: block;     /* Spacing around the radio buttons */
}

.fb-custom-xml-dialog .xforms-select1 span {
    margin-bottom: .5em;                        /* Spacing between the radio buttons */
}

/**
 * Copyright (C) 2011 Orbeon, Inc.
 *
 * This program is free software; you can redistribute it and/or modify it under the terms of the
 * GNU Lesser General Public License as published by the Free Software Foundation; either version
 * 2.1 of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
 * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 * See the GNU Lesser General Public License for more details.
 *
 * The full text of the license is available at http://www.gnu.org/copyleft/lesser.html
 */

.fb-custom-xml-dialog {
    width: 70em;                                /* Reasonable dialog width to edit content */
}
.fb-custom-xml-dialog .CodeMirror {
    height: 50em;                               /* Reasonable textarea height to edit content */
}

.fb-custom-xml-dialog .xforms-select1 {
    margin:  0.5em 0 1em 0; display: block;     /* Spacing around the radio buttons */
}

.fb-custom-xml-dialog .xforms-select1 span {
    margin-bottom: .5em;                        /* Spacing between the radio buttons */
}

Set size of custom XML dialog to be the same as the edit XML dialog


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

.wrapper {
  /* Override hyper-specific Semantic UI styles*/
  padding-bottom: 0 !important;
  &::before { content: "" !important; }

  .picture {
    --sidePadding: 0.5rem;
    height: calc(var(--sidePadding) * 9);
    padding-left: var(--sidePadding) !important;
    padding-right: var(--sidePadding) !important;
    border-radius: 50%;
  }

  p {
    margin: 0;
  }

  .all-votes-in {
    color: var(--semantic-green);
    font-size: 0.7rem;
    font-weight: 500;

    opacity: 0;
    transition: opacity 0.3s ease-in;
    &:global(.opaque) {
      opacity: 1;
    }
  }
}

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

.wrapper {
  /* Override hyper-specific Semantic UI styles*/
  padding-bottom: 0 !important;
  &::before { content: "" !important; }

  .picture {
    --sidePadding: 0.5rem;
    height: calc(var(--sidePadding) * 9);
    padding-left: var(--sidePadding) !important;
    padding-right: var(--sidePadding) !important;
    border-radius: 50%;
  }

  p {
    margin: 0;
  }

  .all-votes-in {
    color: var(--semantic-green);
    font-size: 0.7rem;
    font-weight: 600;

    opacity: 0;
    transition: opacity 0.3s ease-in;
    &:global(.opaque) {
      opacity: 1;
    }
  }
}

Increase font-weight of 'ALL VOTES IN' indicator

  - increases visibility


/*
 * 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 jquery.ui.datepicker
 *= require_tree .
 */

section {
  margin-top: 60px;
}

@media (min-width: 980px) {
  body {
    padding-top: 100px;
  }
}

/*
 * 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 jquery.ui.datepicker
 *= require_tree .
 */

section {
  margin-top: 60px;
}

@media (min-width: 980px) {
  body {
    padding-top: 50px;
  }
}

Fix content padding on desktops

Fix content padding on desktops


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

.wrapper {
  display: inline-block;
  vertical-align: top;

  max-width: 250px;

  font-size: 12px;
  padding: 4px 8px;

  &:global(.minimized) {
    font-size: 10px;
    padding: 4px 6px;
  }

  margin: 0.25rem 0 0 0.35rem;

  &:first-child {
    /* regarding the negative margin here, there is additional phantom space
       between the first and second card that I simply cannot account for ¯\_(ツ)_/¯¯
    */
    margin: 0.25rem -1px 0 0.2rem;
  }

  border: 1px solid var(--semantic-dark-grey);
  border-radius: 3px;

  color: var(--semantic-dark-grey);
  background-color: white;

  /* disable text selection on mobile drags */
  -webkit-touch-callout: none; /* iOS Safari */
  user-select: none;

  &:global(.in-edit-state) {
    opacity: 0.5;
  }

  .loading-wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;

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

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

.wrapper {
  display: inline-block;
  vertical-align: top;

  max-width: 250px;

  font-size: 12px;
  padding: 4px 8px;

  &:global(.minimized) {
    font-size: 10px;
    padding: 4px 6px;
  }

  margin-bottom: 0;

  border: 1px solid var(--semantic-dark-grey);
  border-radius: 3px;

  color: var(--semantic-dark-grey);
  background-color: white;

  /* disable text selection on mobile drags */
  -webkit-touch-callout: none; /* iOS Safari */
  user-select: none;

  &:global(.in-edit-state) {
    opacity: 0.5;
  }

  .loading-wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;

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

Revert "Ensure ideas aren't grouped at the outset of the grouping stage"

  - introduces discrepancy between local builds and CI builds

This reverts commit 7dc552baa7db254dd465b5eeba0f5c75bcc0c6c3.


.variword-sentence {
	position: absolute;
}
.variword-sentence * {
	overflow-y: visible;
}
.variword-sentence .list {
	display: inline-block;
	vertical-align: text-top;
	position: relative;
}
.variword-sentence ul {
	display: block;
	position: relative;
	vertical-align: baseline;
}
.variword-sentence li {
	display: block;
	list-style: none;
}
.variword-sentence li:not(:first-child) {
	visibility: hidden;
}

.variword-sentence {
	position: absolute;
}

.variword-sentence .list {
	display: inline-block;
	vertical-align: text-top;
	position: relative;
}

.variword-sentence ul {
	display: block;
	position: relative;
	vertical-align: baseline;
}

.variword-sentence li {
	display: block;
	list-style: none;
}
.variword-sentence li:not(:first-child) {
	visibility: hidden;
}

Remove overflow CSS in prep of fixing

Remove overflow CSS in prep of fixing


.slick-pager {
  width: 100%;
  height: 26px;
  border: 1px solid gray;
  border-top: 0;
  background: url('../images/header-columns-bg.gif') repeat-x center bottom;
  vertical-align: middle;
}

.slick-pager .slick-pager-status {
  display: inline-block;
  padding: 6px;
}

.slick-pager .ui-icon-container {
  display: inline-block;
  margin: 2px;
  border-color: gray;
}

.slick-pager .slick-pager-nav {
  display: inline-block;
  float: left;
  padding: 2px;
}

.slick-pager .slick-pager-settings {
  display: block;
  float: right;
  padding: 2px;
}

.slick-pager .slick-pager-settings * {
  vertical-align: middle;
}

.slick-pager .slick-pager-settings a {
  padding: 2px;
  text-decoration: underline;
  cursor: pointer;
}

.slick-pager {
  width: 100%;
  height: 26px;
  border: 1px solid gray;
  border-top: 0;
  background: url('../images/header-columns-bg.gif') repeat-x center bottom;
  vertical-align: middle;
}

.slick-pager .slick-pager-status {
  display: inline-block;
  padding: 6px;
}

.slick-pager .ui-icon-container {
  display: inline-block;
  margin: 2px;
  border-color: gray;
  cursor: pointer;
}

.slick-pager .slick-pager-nav {
  display: inline-block;
  float: left;
  padding: 2px;
}

.slick-pager .slick-pager-settings {
  display: block;
  float: right;
  padding: 2px;
}

.slick-pager .slick-pager-settings * {
  vertical-align: middle;
}

.slick-pager .slick-pager-settings a {
  padding: 2px;
  text-decoration: underline;
  cursor: pointer;
}

Add 'cursor:pointer;' to clickable buttons in paging control


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

html,
body {
  background-color: black;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

Set background color as black in photo viewer.


#ello-icon {
  padding: 0;
  margin: 0;
}

span.icon {
  margin: 0 auto;
  display: block;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

span.icon.small {
  width: 18px;
}

span.icon.medium {
  width: 24px;
}

span.icon.large {
  width: 40px;
}

span.icon svg {
  width: 100%;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
}

span.icon.black svg path.svg__bg {
  fill: black;
}

span.icon.black svg path.svg__fg {
  fill: white;
}

span.icon.white svg path.svg__bg {
  fill: white;
}

span.icon.white svg path.svg__fg {
  fill: black;
}

#ello-icon {
  padding: 0;
  margin: 0;
}

span.icon {
  margin: 0 auto;
  display: block;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

span.icon.small {
  width: 18px;
}

span.icon.medium {
  width: 24px;
}

span.icon.large {
  width: 40px;
}

span.icon svg {
  width: 100%;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
}

span.icon.black svg path.svg__bg {
  fill: black;
}

span.icon.black svg path.svg__fg {
  fill: white;
}

span.icon.white svg path.svg__bg {
  fill: white;
}

span.icon.white svg path.svg__fg {
  fill: black;
}

Fix half ello button bug in firefox

Fix half ello button bug in firefox


.color-picker {
    width: 100%;
    padding: 2em;
    font-size: 70%;
    line-height: 1.4em;
    position: absolute;
    box-sizing: border-box;
    bottom: 0;
}
.color-picker,
.swatch--meta-control {
    transition: opacity 300ms;
    opacity: 0;
}
.swatch:hover .color-picker,
.swatch:hover .swatch--meta-control {
	opacity: 0.4;
}
.swatch:hover .color-picker:hover,
.swatch:hover .swatch--meta-control:hover {
	opacity: 1;
}
.color-picker nav {
	margin-bottom: 1em;
}
.color-picker .pure-menu-link {
	color: inherit;
	background: inherit;
}
.color-picker .pure-menu-link:hover {
    color: inherit;
    background: inherit;
}
.color-picker .pure-menu-link.active {
    color: inherit;
    background: inherit;
    border: 1px solid;
}
.color-picker .pure-menu-link:hover{
	background-color: inherit;
}
.color-picker input {
	background-color: inherit;
}
.color-picker svg,
.color-picker .UI-slider--knob {
	fill: inherit;
	stroke: inherit;
}

.color-picker--colorbit {
	font-family: monospace;
}

.color-picker {
    width: 100%;
    height: 12.5em;
    padding: 2em;
    font-size: 70%;
    line-height: 1.4em;
    position: absolute;
    box-sizing: border-box;
    bottom: 0;
}
.color-picker,
.swatch--meta-control {
    transition: opacity 300ms;
    opacity: 0;
}
.swatch:hover .color-picker,
.swatch:hover .swatch--meta-control {
	opacity: 0.4;
}
.swatch:hover .color-picker:hover,
.swatch:hover .swatch--meta-control:hover {
	opacity: 1;
}
.color-picker nav {
	margin-bottom: 1em;
}
.color-picker .pure-menu-link {
	color: inherit;
	background: inherit;
}
.color-picker .pure-menu-link:hover {
    color: inherit;
    background: inherit;
}
.color-picker .pure-menu-link.active {
    color: inherit;
    background: inherit;
    border: 1px solid;
}
.color-picker .pure-menu-link:hover{
	background-color: inherit;
}
.color-picker input {
	background-color: inherit;
}
.color-picker svg,
.color-picker .UI-slider--knob {
	fill: inherit;
	stroke: inherit;
}

.color-picker--colorbit {
	font-family: monospace;
}

Make sure color picker doesn't change height all the time


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

.jp-PDFContainer iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.jp-OutputArea .jp-PDFContainer {
  min-height: 512px;
}

/*
When drag events occur, `p-mod-override-cursor` is added to the body.
This reuses the same CSS selector logic as jp-IFrame to prevent embedded
PDFs from swallowing cursor events.
*/
body.p-mod-override-cursor .jp-PDFContainer {
  position: relative;
}

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

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

.jp-PDFContainer iframe {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.jp-OutputArea .jp-PDFContainer {
  min-height: 512px;
}

/*
When drag events occur, `p-mod-override-cursor` is added to the body.
This reuses the same CSS selector logic as jp-IFrame to prevent embedded
PDFs from swallowing cursor events.
*/
body.p-mod-override-cursor .jp-PDFContainer {
  position: relative;
}

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

Fix z-indices for iframe drag hack so invisible div takes priority.


table.recordlist {
	width: 100%;
	margin-top: 1em;
}

table.recordlist thead tr {
	border-bottom: solid 1px;
}

table.recordlist tr:nth-child(odd) td {
	background-color: #FFEBEE;
}

@media print {
	table.recordlist td:last-child, th:last-child {
		display: none;
	}
}

Hide the page link on the record lists.

Hide the page link on the record lists.

There is no need to display this when printing.  Just hide it.


/*
* Stylesheet which loads thin (font-weight:300) Lato web fonts.
*/

/* Webfont: LatoLatin-Light */
@font-face {
	font-family: 'LatoLatinWebLight';
	src: url('/css/common/fonts/lato/latin/LatoLatin-Light.eot'); /* IE9 Compat Modes */
	src: url('/css/common/fonts/lato/latin/LatoLatin-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('/css/common/fonts/lato/latin/LatoLatin-Light.woff2') format('woff2'), /* Modern Browsers */
		 url('/css/common/fonts/lato/latin/LatoLatin-Light.woff') format('woff'), /* Modern Browsers */
		 url('/css/common/fonts/lato/latin/LatoLatin-Light.ttf') format('truetype');
	font-style: normal;
	font-weight: normal;
	text-rendering: optimizeLegibility;
}

/* Webfont: LatoLatin-LightItalic */
@font-face {
	font-family: 'LatoLatinWebLight';
	src: url('/css/common/fonts/lato/latin/LatoLatin-LightItalic.eot'); /* IE9 Compat Modes */
	src: url('/css/common/fonts/lato/latin/LatoLatin-LightItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('/css/common/fonts/lato/latin/LatoLatin-LightItalic.woff2') format('woff2'), /* Modern Browsers */
		 url('/css/common/fonts/lato/latin/LatoLatin-LightItalic.woff') format('woff'), /* Modern Browsers */
		 url('/css/common/fonts/lato/latin/LatoLatin-LightItalic.ttf') format('truetype');
	font-style: italic;
	font-weight: normal;
	text-rendering: optimizeLegibility;
}

Add style sheet for Lato light web fonts


/*
* Object Fit
* You can use object-fit and object-position to mimic similar functionality
* from background-image without having to use background images
* Supported everywhere except IE and Edge
* http://caniuse.com/#feat=object-fit
*/

img.cover{
	object-position: cover;
	object-position: 50% 50%;
}

Add note about using css 'object-fit' to mimic background-image


/* [XUL] Advanced locationbar tweak */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* for the environment on which "Advanced locationbar" is installed */
.textbox-presentation-protocol,
/* .textbox-presentation-subdomain, */
/* .textbox-presentation-port, */
.textbox-presentation-domain,
.textbox-presentation-slash,
.textbox-presentation-segment-label,
.textbox-presentation-file,
.textbox-presentation-query,
.textbox-presentation-fragment {
  margin-right: 1px !important;
}
.textbox-presentation-port[value^=":"] {
  margin-left: -1px !important;
}

.textbox-presentation-protocol[value^="https:"] {
  color: #0a0 !important;
}
.textbox-presentation-domain {
  font-weight: bold !important;
  color: #000 !important;
}
.textbox-presentation-slash,
.textbox-presentation-query,
.textbox-presentation-fragment {
  color: #bbb !important;
}

.textbox-presentation-query[value="?"],
.textbox-presentation-fragment[value="#"] {
  visibility: collapse !important;
}

/* [XUL] Advanced locationbar tweak */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/* for the environment on which "Advanced locationbar" is installed */
.textbox-presentation-protocol,
/* .textbox-presentation-subdomain, */
/* .textbox-presentation-port, */
.textbox-presentation-domain,
.textbox-presentation-slash,
.textbox-presentation-segment-label,
.textbox-presentation-file,
.textbox-presentation-query,
.textbox-presentation-fragment {
  margin-right: 1px !important;
}
.textbox-presentation-port[value^=":"] {
  margin-left: -1px !important;
}

.textbox-presentation-protocol,
.textbox-presentation-subdomain,
.textbox-presentation-port,
.textbox-presentation-path,
.textbox-presentation-file {
  color: #888 !important;
}

.textbox-presentation-protocol[value^="https:"] {
  color: #0a0 !important;
}
.textbox-presentation-domain {
  font-weight: bold !important;
  color: #000 !important;
}
.textbox-presentation-slash,
.textbox-presentation-query,
.textbox-presentation-fragment {
  color: #bbb !important;
}

.textbox-presentation-query[value="?"],
.textbox-presentation-fragment[value="#"] {
  visibility: collapse !important;
}

Change the color of some location bar elements

Advanced locationbar v1.1.1 introduces the change of color from 'graytext' to 'rgba(0, 0, 0, 0.5)'.
It causes a bleeding of text.


.btn-custom {
    width: 150px !important;
    }

li {list-style-type: none;}

.logos li {
	float: left;
	width: 150px;
	height: 100px;
	padding: 10px;
	text-align: center;
	line-height: 200px;
}

.logos img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	vertical-align: middle;
}

.logo_block {
	margin-top: 20px
}

.text_logo {
	font-weight: bold;
	font-size: 50px;
}

.superscript {
	font-size: 80%;
	position: relative;
	top: -10px;
}

@keyframes emphasis {
	from {background-color: bisque;}
	to {background-color: white;}
}

th[role='columnheader']:hover .help, .help-target:hover .help {
	visibility: visible;
}

th[role='columnheader'] .help, .help-target .help {
	visibility: hidden;
}

.btn-custom {
    width: 150px !important;
    }

li {list-style-type: none;}

.logos li {
	float: left;
	width: 150px;
	height: 100px;
	padding: 10px;
	text-align: center;
	line-height: 90px;
}

.logos img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	vertical-align: middle;
}

.logo_block {
	margin-top: 20px
}

.text_logo {
	font-weight: bold;
	font-size: 50px;
}

.superscript {
	font-size: 80%;
	position: relative;
	top: -10px;
}

@keyframes emphasis {
	from {background-color: bisque;}
	to {background-color: white;}
}

th[role='columnheader']:hover .help, .help-target:hover .help {
	visibility: visible;
}

th[role='columnheader'] .help, .help-target .help {
	visibility: hidden;
}

Align logo anchor tags with their img tags.


.batch_task {
    margin: 5px;
    border: 1px solid #999;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 5px;
    background-color: #FCFCFC;
}
.progress_outer {
    float: right;
    width: 200px;
    border: 1px; solid #999;
    height: 20px;
}

.progress_inner {
    float: left;
    width: 0%;
    height: 20px;
    background-color: #44FF44;
}

Add another css file for the batch stuff


body {
  background-color: yellow;
}

.zambezi-grid-cell > .nested-indicator {
}

.zambezi-grid-cell > .nested-indicator.is-expand:after {
  content: '▣';
}

.zambezi-grid-cell > .nested-indicator.is-expand:hover {
  color: red;
}

.zambezi-grid-cell > .nested-indicator.is-collapse:after {
  content: '▢';
}

.zambezi-grid-cell > .nested-indicator.is-collapse:hover {
  color: red;
}

.zambezi-grid-cell > .nested-indicator.is-up-right:after {
  content: '└';
}

.zambezi-grid-cell > .nested-indicator.is-vertical-right:after {
  content: '├';
}

.zambezi-grid-cell > .nested-indicator.is-horizontal:after {
  content: '─';
}

.zambezi-grid-cell > .nested-indicator.is-vertical:after {
  content: '│';
}

body {
  background-color: yellow;
}

.zambezi-grid-cell.nested-expander-cell {
  overflow: visible;
}

.zambezi-grid-cell > .nested-indicator {
  font-size: 16px;
  font-family: monospace;
  white-space: pre;
  color: #555;
}

.zambezi-grid-cell > .nested-indicator.is-collapse:hover,
.zambezi-grid-cell > .nested-indicator.is-expand:hover {
  color: black;
}

.zambezi-grid-cell > .nested-indicator:after {
  content: ' ';
}

.zambezi-grid-cell > .nested-indicator.is-expand:after {
  content: '▣';
}

.zambezi-grid-cell > .nested-indicator.is-collapse:after {
  content: '▢';
}

.zambezi-grid-cell > .nested-indicator.is-up-right:after {
  content: '└';
}

.zambezi-grid-cell > .nested-indicator.is-vertical-right:after {
  content: '├';
}

.zambezi-grid-cell > .nested-indicator.is-horizontal:after {
  content: '─';
}

.zambezi-grid-cell > .nested-indicator.is-vertical:after {
  content: '│';
}

Fix nested row expanders layout.

Fix nested row expanders layout.


.modal-budget-move-money .modal, .modal-budget-overspending .modal {
    width: 20em;
}

.ynab-select-options {
    height: 15em;
}

Change size of Move money dialog

Change size of Move money dialog


#lblDistance{
    color:white;
    font-weight: bold;
    text-shadow:  2px  2px 2px black,
            2px -2px 2px black,
           -2px  2px 2px black,
           -2px -2px 2px black;
  }

.container-fluid{
    margin-top: 15px;
    position: absolute;
}

#search-results{
    background-color: #ffffff;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

.search-result{
    padding: 10px;
}

#overhead-map{
    margin-top: 65px;
    padding: 5px;
    background-color: #ffffff;
}

#lblDistance{
    color:white;
    font-weight: bold;
    text-shadow:  2px  2px 2px black,
            2px -2px 2px black,
           -2px  2px 2px black,
           -2px -2px 2px black;
  }

.container-fluid{
    margin-top: 15px;
    position: absolute;
}

#search-results{
    margin-top: 10px;
    background-color: #ffffff;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

.search-result{
    padding: 10px;
}

#overhead-map{
    margin-top: 65px;
    padding: 5px;
    background-color: #ffffff;
}

Add top margin to search results box

Add top margin to search results box

What still needs to be done is to make the search results box as wide as
the search input box.


.select { margin: 0px; }

body {
bgcolor : #999999;
background= 'images/backstripes.gif';
padding-top : 0;
padding-right : 0;
padding-bottom : 0;
padding-left : 0;
border-top-width : 0;
border-right-width : 0;
border-bottom-width : 0px;
border-left-width : 0;
margin : 0;
}

#queries a{
	color: inherit;
}

Fix font color on the recent queries.

Fix font color on the recent queries.

Thanks for DJCP for pointing out that the old color was bad.


.district {
  width: 100%;
  height: 100%;
  border: solid 1px var(--color-greyLighter);
  background-color: var(--color-white);
}

.district:hover {
  color: var(--color-greyDark);
}

.imageContainer,
.content {
  vertical-align: top;
}

.imageContainer {
  width: 100%;
}

.image {
  width: 100%;
  height: 100%;
}

.content {
  margin: 1rem;
  padding: 0;
}

.title {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-i);
  font-weight: var(--fontweight-demi);
  line-height: 1.74583125rem;
  color: var(--color-black);
  margin: 0 0 0.25rem 0;
  padding: 0;
  text-decoration: none;
}

.subtitle {
  font-family: var(--font-avenir);
  font-size: var(--font-small-i);
  line-height: 1.43020625rem;
  color: var(--color-grey);
  margin: 0;
  padding: 0;
}

.district {
  width: 100%;
  height: 100%;
  border: solid 1px var(--color-greyLighter);
  background-color: var(--color-white);
}

.district:hover {
  color: var(--color-greyDark);
}

.imageContainer,
.content {
  vertical-align: top;
}

.imageContainer {
  width: 100%;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  margin: 1rem;
  padding: 0;
}

.title {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-large-i);
  font-weight: var(--fontweight-demi);
  line-height: 1.74583125rem;
  color: var(--color-black);
  margin: 0 0 0.25rem 0;
  padding: 0;
  text-decoration: none;
}

.subtitle {
  font-family: var(--font-avenir);
  font-size: var(--fontsize-small-i);
  line-height: 1.43020625rem;
  color: var(--color-grey);
  margin: 0;
  padding: 0;
}

Update District card to have object-fit and use smaller font for supporting copy


.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 50vh;
}

.heroBackground {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;

    background-image: url(../images/hero.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    -webkit-filter: blur(5px);
            filter: blur(5px)
}

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 50vh;
}

.heroBackground {
    position: absolute;
    /* Make the image larger than normal and then mask it so it has clean edges */
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;

    background-image: url(../images/hero.jpg);
    background-size: cover;
    background-position: center 32%;
    background-repeat: no-repeat;
    -webkit-filter: blur(5px);
            filter: blur(5px)
}

Fix hero background size on mobile, adjust positioning


/* ======================================================
  common.
=======================================================*/
h2 {
  padding-left:40px;
  line-height: 62px;
  background: transparent url(../image/parts/head-score.png) no-repeat;
}

.ui.main.container {
  margin-top: 4em;
}

body {
  background: transparent url(../image/parts/background.png);
}

a:hover {
  cursor : pointer;
}

Unify a tag hover effect

Unify a tag hover effect


/* callimachus.css */

.noauth .protected {
    display: none !important;
}

.wait,.wait * {
    cursor:wait;
}

.drag-over {
    cursor:copy;
}

time {
    white-space:nowrap;
}

[dropzone] .ui-state-highlight {
    white-space:nowrap;
}

iframe.ui-widget-content.ui-dialog-content {
    margin:0;
    padding:0;
}

html.iframe {
    overflow-y: auto;
}

pre {
    white-space:pre-wrap;
}

img.icon {
    max-height:1em;
    padding-right:2pt;
    vertical-align:text-top;
}

.flex {
    display:block;
}

.summary {
    line-height:1em;
    max-height:3.1em;
    overflow:hidden;
}

.summary * {
    margin:0;
    padding:0;
}

Include styles to fix common subtle css errors


		body {
			background-color:white;
			position: fixed;
		}

		#side {
			background-color: palegreen;
			width: 230px;
			height: 100%;
			position: fixed;
			float:left;
			padding: 20px;
		 	margin-top:-10px;
			left: 0px;
		}

		#side .title {
			font-family: "Casual Affair";
			font-size: 30px;
			text-align: center;
			padding: 10px;

		}

		#side .description {
			background-color: mistyrose;
			color: black;
			font-size: 10px;
			width: 230px;
		}

		#side .links {
			background-color: mistyrose;
			color: black;
			font-size: 12px;
			font-family: "Casual Affair";
			text-align: center;
			margin: 2px;
		}

		a:link{
			text-decoration: none;
		}

		#side .links:hover {
			background-color: white;
		}

body {
	background-color:white;
}

#side {
	background-color: palegreen;
	width: 230px;
	height: 100%;
	position: fixed;
	float:left;
	padding: 20px;
	margin-top:-10px;
	left: 0px;
}

#side .title {
	font-family: "Casual Affair";
	font-size: 30px;
	text-align: center;
	padding: 10px;
}

#side .description {
	background-color: mistyrose;
	color: black;
	font-size: 10px;
	width: 230px;
}

#side .links {
	background-color: mistyrose;
	color: black;
	font-size: 12px;
	font-family: "Casual Affair";
	text-align: center;
	margin: 2px;
}

#main {
	background-color: white;
	padding-left: 280px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid;
}

#main .title {
	font-family: "Casual Affair";
	font-size: 30px;
	text-align: center;
	padding: 10px;
}

a:link{
	text-decoration: none;
}

#side .links:hover {
	background-color: white;
}

Update with main / Position fix

Update with main / Position fix


@page-background: #111111 url(public/images/green_bg.jpg) no-repeat center top fixed;

@primary-background: #0D6509;
@alt-primary-background: #0C9A00;

@header-background: #0F2C04;
@header-sub-background: #262626;
@footer-background: #353535;

@chain-map-background: #0D6509;

@box-button-background: #494242;

@page-background: #111111 url(public/images/green_bg.jpg) no-repeat center top fixed;

@primary-background: #0D6509;
@alt-primary-background: #0C9A00;

@header-background: #0F2C04;
@header-sub-background: #262626;
@footer-background: #353535;

@chain-map-background: #2d2d2d;

@box-button-background: #494242;

Revert green theme chain map background to grey.


#lblDistance{
    color:white;
    font-weight: bold;
    text-shadow:  2px  2px 2px black,
            2px -2px 2px black,
           -2px  2px 2px black,
           -2px -2px 2px black;
  }

.container-fluid{
    position: absolute;
}

#search-results{
    background-color: #ffffff;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

.search-result{
    padding: 10px;
}

#overhead-map{
    margin-top: 80px;
    padding: 5px;
    background-color: #ffffff;
}

#lblDistance{
    color:white;
    font-weight: bold;
    text-shadow:  2px  2px 2px black,
            2px -2px 2px black,
           -2px  2px 2px black,
           -2px -2px 2px black;
  }

.container-fluid{
    margin-top: 15px;
    position: absolute;
}

#search-results{
    background-color: #ffffff;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

.search-result{
    padding: 10px;
}

#overhead-map{
    margin-top: 65px;
    padding: 5px;
    background-color: #ffffff;
}

Add top margin to the container

Add top margin to the container

For better spacing of the search box.


@import 'normalize.css/normalize.css';

/* Variables */
@import 'base/media-queries.css';
@import 'base/variables.css';

/* Base */
@import 'base/base.css';
@import 'base/fonts.css';
@import 'base/typography.css';
@import 'base/utilities.css';

/* Modules */

/* Layouts */

@import 'normalize.css';

/* Variables */
@import 'base/media-queries.css';
@import 'base/variables.css';

/* Base */
@import 'base/base.css';
@import 'base/fonts.css';
@import 'base/typography.css';
@import 'base/utilities.css';

/* Modules */

/* Layouts */

Fix bug with CSS import not finding normalize.css


.LinkViewWidget {
    overflow-y: scroll;
}
.LinkViewWidget li[data-type="project"] > p { font-weight: bold; }
.LinkViewWidget li[data-type="note"] > p { font-style: italic; color: grey; }
.LinkViewWidget li[data-done] > p { text-decoration: line-through; }
.LinkViewWidget span[tag] { color: lightgray; font-weight: normal }

.LinkViewWidget ul,
.LinkViewWidget li {
    list-style-type: none;
}

.LinkViewWidget ul p,
.LinkViewWidget li p {
    margin: .38em auto;
}

Tweak List View CSS a little more (line spacing and bullets).


@charset "utf-8";

body > .ui.container {
  margin-top: 3em;
}

div.contrib {

}

@charset "utf-8";

body > .ui.container {
    margin-top: 3em;
}

#cal {
    margin: 3em auto 0 auto;
}

#cal .cal-heatmap-container {
    margin: 0 auto;
}

Align contribution graph to center of the document


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

.list {
  list-style: none;

  margin: 0;
  padding-left: 0;

  /* ensure list takes up maximum vertical space amount between column header and user list */
  flex-grow: 1;

  overflow-y: hidden;
  &:global(.overflowed) {
    overflow-y: scroll;
    border-bottom: 1px solid #C0C1C2;

    --width: 5px;
    --inverse: -5px;
    box-shadow:
      inset 0 var(--inverse) var(--width) var(--inverse) rgba(0,0,0,.7),
      inset 0 var(--width)   var(--width) var(--inverse) rgba(0,0,0,.7);

    li:last-of-type {
      border-bottom: none;
    }
  }
}

/* hack for scrollability (conditionally applied) in firefox,
   as overflow content in a flex container will not scroll
   without it. It will just continue to get larger.
   Note that this declaration does *not* limit the height due
   to the `flex-grow: 1` declaration above
*/
@-moz-document url-prefix() {
  .list {
    height: 1px;
  }
}

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

.list {
  list-style: none;

  margin: 0;
  padding-left: 0;

  /* ensure list takes up maximum vertical space amount between column header and user list */
  flex-grow: 1;
  /* hack for scrollability (conditionally applied) in firefox and iOS safari,
     as overflow content in a flex container will not scroll
     without it. It will just continue to get larger.
     Note that this declaration does *not* limit the height due
     to the `flex-grow: 1` declaration above
  */
  height: 1px;

  overflow-y: hidden;
  &:global(.overflowed) {
    overflow-y: scroll;
    border-bottom: 1px solid #C0C1C2;

    --width: 5px;
    --inverse: -5px;
    box-shadow:
      inset 0 var(--inverse) var(--width) var(--inverse) rgba(0,0,0,.7),
      inset 0 var(--width)   var(--width) var(--inverse) rgba(0,0,0,.7);

    li:last-of-type {
      border-bottom: none;
    }
  }
}

Revert scoping of height declaration, as it breaks scrolling on iOS safari


html {
  font-family: Helvetica;
  background-color: #BCED91;
}

h2 {
  display: block;
  text-align: center;
  border: 5px solid black;
  padding: 20px;
}

#definition {
  text-align: center;

}

#red {
  color: red;
  }
#red_center {
  color: red;
  text-align: center;
}
.topics {
  font-weight: bold;
}

.italics {
  font-style: italic;
}

.center {
  text-align:center;
}

.indent {
  margin-left: 50px;
}
.huge_indent {
  margin-left: 200px;
}

#hover_example:hover {
  background-color:blue;
  }

Add cheat sheet stylesheet week 8 pair

Add cheat sheet stylesheet week 8 pair


@media print {
  html, body {
    height: 99%;
  }
}

body {
  font-family: 'Roboto';
  font-size: 12pt;
  padding: 10;
  margin: 10;
}

table,
th {
  font-size: 12pt;
  color: #333333;
  border-bottom: 1px solid #9aa5af;
  line-height: 36px;
  padding: 20px;
}
table,
th,
td {
  border-collapse: collapse;
}
button {
  font-size: 12pt;
}

caption {
  font-size: 14pt;
  font-weight: 600;
}
.app-title {
  font-size: 12pt;
  font-weight: 600;
}
.boldlabel {
  font-size: 11pt;
  color: #1b5faa;
  font-weight: 600;
}
.block,
.title {

}
.block {
  padding: 40px;
}

div {
  margin : 10px;
}

.infomessage {
  margin : 10px;
  margin-left : 50px;
  color : red;
  font-family: 'Roboto';
  font-size : 12pt;
  padding  : 40px;
}

.bom-progress-bar {
  position: absolute;
  z-index: -5;
}

@media print {
  html, body {
    height: 99%;
  }
}

body,
pre {
  font-family: 'Roboto';
  font-size: 12pt;
  padding: 10;
  margin: 10;
}

table,
th {
  font-size: 12pt;
  color: #333333;
  border-bottom: 1px solid #9aa5af;
  line-height: 36px;
  padding: 20px;
}
table,
th,
td {
  border-collapse: collapse;
}
button {
  font-size: 12pt;
}

caption {
  font-size: 14pt;
  font-weight: 600;
}
.app-title {
  font-size: 12pt;
  font-weight: 600;
}
.boldlabel {
  font-size: 11pt;
  color: #1b5faa;
  font-weight: 600;
}
.block,
.title {

}
.block {
  padding: 40px;
}

div {
  margin : 10px;
}

.infomessage {
  margin : 10px;
  margin-left : 50px;
  color : red;
  font-family: 'Roboto';
  font-size : 12pt;
  padding  : 40px;
}

.bom-progress-bar {
  position: absolute;
  z-index: -5;
}

Fix for padding for Alert box

Fix for padding for Alert box

Padding fix


.App {
  text-align: center;
  width: 100%;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    height: 10%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar-left li {
    float: left;
}

.navbar-right li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

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

.sidebar-wrapper {
  height: 100%;
}

.sidebar {
  float: left;
  width: 30%;
  height: 90vh;
  background: #eee
}

.household-main {
  float: left;
  width: 70%;
  height: 90vh;
  background: lightgrey;
  color: black;
}

.App {
  width: 100%;
}

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

.sidebar-wrapper {
  height: 100%;
}

.sidebar {
  float: left;
  width: 30%;
  height: 90vh;
  background: #eee
}

.household-main {
  float: left;
  width: 70%;
  height: 90vh;
  background: lightgrey;
  color: black;
}

Remove previous navbar styles to use semantic ui


.mdl-layout {
    align-items: center;
    justify-content: center;
}

.mdl-card__actions {
    display: flex;
    box-sizing:border-box;
    align-items: center;
}

.mdl-card__actions > .mdl-button--icon {
    margin-right: 3px;
    margin-left: 3px;
}

.mdl-layout__content {
    padding: 24px;
    flex: none;
}

.mdl-layout__header {
    background-color: #FFD520;

}

.mdl-button--fab.mdl-button--colored {
    background: #6AC4AE;
    color: #fff
}

.mdl-button--fab.mdl-button--colored:hover {
    background: #00B1C7;
    color: #fff
}

a {
    color: #6AC4AE;
    font-weight: 500
}

.mdl-card__media{
    background-color: #6AC4AE;
}

.mdl-color--primary {
    background-color: #FFD520 !important;
}

.mdl-button--accent {
    background-color: #6AC4AE !important;
}

.mdl-layout {
    align-items: center;
    justify-content: center;
}

.mdl-card__actions {
    display: flex;
    box-sizing:border-box;
    align-items: center;
}

.mdl-card__actions > .mdl-button--icon {
    margin-right: 3px;
    margin-left: 3px;
}

.mdl-layout__content {
    padding: 24px;
    flex: none;
}

.mdl-layout__header {
    background-color: #FFD520;

}

.mdl-button--fab.mdl-button--colored {
    background: #6AC4AE;
    color: #fff
}

a {
    color: #6AC4AE;
    font-weight: 500
}

.mdl-card__media{
    background-color: #6AC4AE;
}

.mdl-color--primary {
    background-color: #FFD520 !important;
}

.mdl-button--accent {
    background-color: #6AC4AE !important;
}

Revert "Changes search button hover from pink to blue"

This reverts commit 784f92f2098f7c6ceba2849af17819c0fafaeaf1.

Reverted commit


body {
	text-align: left;
}
div#credit {
    font-size: 80%;
    padding: 7px 20px 7px 20px;
    text-align: right;
}
div#footer {
    padding: 5px 10px 5px 10px;
}
div#footer a {
	color: #ffffff;
	text-decoration: none;
}
.ui-page {
    -webkit-backface-visibility: hidden;
}

Remove transition flicker workaround, causing font focus FAIL.