@font-face {
	font-family: "M+ 1p";
	font-weight: 400;
	src: local("M+ 1p regular"), url(mplus-1p-regular.ttf);
}

@font-face {
	font-family: "M+ 1p";
	font-weight: 700;
	src: local("M+ 1p bold"), url(mplus-1p-bold.ttf);
}

@font-face {
	font-family: "M+ 1p";
	font-weight: 400;
	src: local("M+ 1p"), url(mplus-1p-regular.ttf);
}

@font-face {
	font-family: "M+ 1p";
	font-weight: 700;
	src: local("M+ 1p"), url(mplus-1p-bold.ttf);
}

Use just "M+ 1p" as the system font reference


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

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

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

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

Change second third block blog index css


.aui-toolset {
	white-space: nowrap;
}

.aui-toolset-content {
	float: none;
	display: inline-block;
	vertical-align: top;
}

.aui-toolset-item {
	display: inline-block;
	vertical-align: top;
	margin-left: -1px;
}

.aui-toolset-item-content {
	margin: 0;
	float: none;
	display: block;
}

.aui-toolset-first {
	margin-left: 0;
}

.aui-toolset {
	white-space: nowrap;
}

.aui-toolset-content {
	float: none;
	display: inline-block;
	vertical-align: top;
}

.aui-toolset-item {
	display: inline-block;
	vertical-align: top;
}

.aui-toolset-item-content {
	margin: 0;
	float: none;
	display: block;
}

Rollback ToolSet css improvements; Conflicts with the state class (borders)

git-svn-id: eaac6977d0b6fa3343c402860739874625caf655@40720 05bdf26c-840f-0410-9ced-eb539d925f36


/*
 * 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 styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

/*
 * 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 styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require scrivito
 */

Add assets for scrivito stylesheets

Add assets for scrivito stylesheets


.image-container {
    display: flex;
    position: relative;
    margin: 5px;
}

.image-container img {
    width: 200px;
    display: block;
    z-index: 9;
}

.image-container {
    display: flex;
    position: relative;
    margin: 5px;
}

.image-container img {
    width: 200px;
    display: block;
    z-index: 9;
    background: #ccc;
}

Add gray background to img tags so you can see that something is happening before they load.


/*
*= require bootstrap
*/

body.base {
  padding-top: 60px;
}

.actions {
  border: none;
  background: none;
}

.form-stacked {
  margin-left: -20px;
}

/*
*= require bootstrap
*/

body.base {
  padding-top: 60px;
}

.actions {
  border: none;
  background: none;
  margin: 0;
}

.form-stacked {
  margin-left: -20px;
}

Fix spacing between actions and form.

Fix spacing between actions and form.


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

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

.app-component-container {
    min-width: 50em;
}

.message-list-component{
    margin-bottom: 5em;
}

.footer-container {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.footer-container .well {
    margin-bottom: 0;
    background: #03a9f4;
    color: rgba(255,255,255,.84);
}

.samlmessage code {
    font-size: 0.7em;
}

.welcome-notice {
    color: #666;
    text-align: center;
    padding: 5em;
}

.clear-all {
    font-size: .7em;
    color: rgba(255,255,255,.84);
    border-bottom: 1px solid rgba(255,255,255,.84);
}

.clear-all:hover {
    color: rgba(255, 255, 255, 1);
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    text-decoration: none;
}

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

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

.app-component-container {
    min-width: 50em;
}

.message-list-component{
    margin-bottom: 5em;
}

.footer-container {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.footer-container .well {
    margin-bottom: 0;
    background: #03a9f4;
    color: rgba(255,255,255,.84);
}

.samlmessage code {
    font-size: 0.7em;
}

.welcome-notice {
    color: #666;
    text-align: center;
    padding: 5em;
}

.clear-all {
    cursor: pointer;
    font-size: .7em;
    color: rgba(255,255,255,.84);
    border-bottom: 1px solid rgba(255,255,255,.84);
}

.clear-all:hover {
    color: rgba(255, 255, 255, 1);
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    text-decoration: none;
}

Make the 'CLEAR ALL' link display a cursor when hovering.


@import "texgyreadventor.css";

.header-container {
    color: #ddd;
    height: 8rem;
}

.header-content {
    height: 100%;
    margin: 0px;
}

.header-content-left {
    background-color: white;
    height: inherit;
    background-image: url("/static/vendor/serviva/serviva-logo.png");
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
}

.header-content-right {

    height: inherit;
    margin: 0px !important;

    display: flex;
    justify-content: right;

    background-color: #0062A1;

    font-family: TeXGyreAdventor;
    font-size: 4.0rem;
    line-height: normal;

}

.header-content-right-inner {
    margin-right: 1rem !important;
}

.header-content-small {
    font-size: 1.5rem;
}

@import "texgyreadventor.css";

#header-region {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9999;
}

.header-container {
    color: #ddd;
    height: 8rem;
}

.header-content {
    height: 100%;
    margin: 0px;
}

.header-content-left {
    background-color: white;
    height: inherit;
    background-image: url("/static/vendor/serviva/serviva-logo.png");
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
}

.header-content-right {

    height: inherit;
    margin: 0px !important;

    display: flex;
    justify-content: right;

    background-color: #0062A1;

    font-family: TeXGyreAdventor;
    font-size: 4.0rem;
    line-height: normal;

}

.header-content-right-inner {
    margin-right: 1rem !important;
}

.header-content-small {
    font-size: 1.5rem;
}

Add stickyness to vendor header

[ui] Add stickyness to vendor header


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

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

 */

Add more styling for having a map canvas within a map container


img.list-image-recipe {
  width: 100%;
}

span.fav-star {
  margin-left: 10px;
  margin-top: 2px;
}

ul {
  list-style-type: none;
  padding-left: 10px;
}

ul.table-view.recpie-table {
  margin: 0;
  padding: 0;
}

ul.recpie-table li {
  padding: 15px 15px 5px 10px;
}

.page-detail p:not(.image){
  padding-left: 10px;
}

ul.recpie-table li {
  background-color: #FFF;
  font-family: "oswald";
  text-transform: uppercase;
}

.center {
  text-align: center;
}

.splash {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 999;
}

.splash-text {
  color: #000;
  text-align: center;
  top: 50%;
  position: fixed;
  left: 50%;
  font-family: "oswald";
  font-size: 55px;
  line-height: 1;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

img.list-image-recipe {
  width: 100%;
}

span.fav-star {
  margin-left: 10px;
  margin-top: 2px;
}

img#fav-star-img {
    height: 25px;
    position: relative;
    top: 3px;
}

ul {
  list-style-type: none;
  padding-left: 10px;
}

ul.table-view.recpie-table {
  margin: 0;
  padding: 0;
}

ul.recpie-table li {
  padding: 15px 15px 5px 10px;
}

.page-detail p:not(.image){
  padding-left: 10px;
}

ul.recpie-table li {
  background-color: #FFF;
  font-family: "oswald";
  text-transform: uppercase;
}

.center {
  text-align: center;
}

.splash {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 999;
}

.splash-text {
  color: #000;
  text-align: center;
  top: 50%;
  position: fixed;
  left: 50%;
  font-family: "oswald";
  font-size: 55px;
  line-height: 1;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

Add some styles for fav star icon

Add some styles for fav star icon


.command-panel {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #515151;
  padding: 3px;
}

.command-panel .preview-list {
  max-height: 300px;
  overflow: auto;
  margin-bottom: 3px;
  position: relative;
  background: #161616;
}

.command-panel .preview-list .path {
  padding-left: 3px;
  color: #f9ee98;
  margin-right: 1ex;
}

.command-panel .preview-list .preview {
  color: #f6f3e8;
}

.command-panel .preview-list .preview .match {
  background-color: rgba(255,255,255,.25);
  padding: 1px;
}

.command-panel .preview-list li.selected {
  background: #444;
}

.command-panel .preview-list:focus li.selected {
  background: #223555;
}

.command-panel .prompt-and-editor {
  display: -webkit-box;
}

.command-panel .prompt {
  color: white;
  font-weight: bold;
  padding: .2em;
}

.command-panel {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #515151;
  padding: 3px;
}

.command-panel .preview-list {
  max-height: 300px;
  overflow: auto;
  margin-bottom: 3px;
  position: relative;
  background: #161616;
}

.command-panel .preview-list {
  cursor: default;
}

.command-panel .preview-list li.selected {
  background: #444;
}

.command-panel .preview-list:focus li.selected {
  background: #223555;
}

.command-panel .preview-list .path {
  padding-left: 3px;
  color: #f9ee98;
  margin-right: 1ex;
}

.command-panel .preview-list .preview {
  color: #f6f3e8;
}

.command-panel .preview-list .preview .match {
  background-color: rgba(255,255,255,.25);
  padding: 1px;
}

.command-panel .prompt-and-editor {
  display: -webkit-box;
}

.command-panel .prompt {
  color: white;
  font-weight: bold;
  padding: .2em;
}

Fix preview list cursor styling

Fix preview list cursor styling


.editor,
.viewer {
    margin:0;
    padding:0;
    text-align:center;
}
#canvas-container {
    margin:0.4em;
}

.ui-content { margin:0; padding: 0; }
.ui-grid-a { margin:0; padding: 0; }
#session-editor { margin:0; padding: 0; }
#session-viewer { margin:0; padding: 0; }
#current_color {border:1px solid #ffffff; margin-right: 0.5em;}
.ui-li-count { right:10px; }

Set messages count more on the right.

Set messages count more on the right.


.header {
  margin-top: 0;
  padding: 0;
  border-bottom: solid 5px #eee;
  background: #242728;
}

.header-site-link {
  text-decoration: none;
}

.header-site-title, .header-site-extra {
  padding: 0 5px;
}

.header-site-lambda, .header-site-extra {
  font-weight: bold;
}

.header-site-lambda {
  display: inline;
  color: #c8d8df;
  font-size: 20pt;
}

.header-site-title {
  color: #ffb473;
  display: inline;
  font-size: 16pt;
  font-family: 'Anonymous Pro', sans-serif;
}

.header-site-tagline {
  display: inline;
  color: #656565;
  font-size: 14pt;
  font-family: 'Anonymous Pro', sans-serif;
}

.header-site-tagline span {
  color: #aaa;
}

.header {
  margin-top: 0;
  padding: 0;
  border-bottom: solid 5px #eee;
  background: #242728;
}

.header-site-link {
  text-decoration: none;
}

.header-site-lambda, .header-site-title, .header-site-extra {
  font-weight: bold;
  font-size: 18pt;
}

.header-site-lambda {
  display: inline;
  color: #c8d8df;
  font-size: 20pt;
}

.header-site-title {
  color: #ffb473;
  display: inline;
  font-family: 'Anonymous Pro', sans-serif;
  margin: 0 5px 0 15px;
}

.header-site-tagline {
  display: inline;
  color: #656565;
  font-size: 18pt;
  font-family: 'Anonymous Pro', sans-serif;
}

.header-site-tagline span {
  color: #aaa;
}

Tweak padding and match tagline font size.


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

.jp-Completer {
  background: #EEEEEE;
  border: var(--jp-border-width) solid var(--jp-border-color1);
  list-style-type: none;
  overflow: auto;
  padding: 0;
  margin: 0 0 0 -4px;
  position: absolute;
  z-index: 10001;
}

.jp-Completer.jp-mod-outofview {
  display: none;
}

.jp-Completer-item {
  margin: 0;
  min-width: 150px;
  padding: 0 2px;
}

.jp-Completer-item:nth-child(odd) {
  background: #FFFFFF;
}

.jp-Completer-item.jp-mod-active {
  background: #BFBFBF;
}

.jp-Completer-item code {
  font-size: 14px;
  line-height: 25px;
}

.jp-Completer-item mark {
  font-weight: bold;
  text-decoration: underline;
  background: inherit;
  color: inherit;
}

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

.jp-Completer {
  background: #EEEEEE;
  border: var(--jp-border-width) solid var(--jp-border-color1);
  list-style-type: none;
  overflow: auto;
  padding: 0;
  margin: 0 0 0 -4px;
  position: absolute;
  z-index: 10001;
}

.jp-Completer.jp-mod-outofview {
  display: none;
}

.jp-Completer-item {
  margin: 0;
  min-width: 150px;
  padding: 0 2px;
}

.jp-Completer-item:nth-child(odd) {
  background: #FFFFFF;
}

.jp-Completer-item:hover, .jp-Completer-item.jp-mod-active {
  background: #BFBFBF;
}

.jp-Completer-item code {
  font-size: 14px;
  line-height: 25px;
}

.jp-Completer-item mark {
  font-weight: bold;
  text-decoration: underline;
  background: inherit;
  color: inherit;
}

Add visual indicator of mouse hovering over completer items.


.selected {
  text-decoration: underline;
}

.full-height {
  height: 100vh;
}

.row {
  max-width: 95vw;
}

.context-menu {
  position: absolute;
  z-index: 1;
}

#sidepanel {
  z-index: 1;
  position: relative;
}

#sidepanel-body {
  margin-left: 4px;
}

#sidepanel-resizer {
  position: absolute;
  width: 8px;
  border-left: 1px solid;
  border-color: #d8d8d8;
  cursor: e-resize;
}

.selected {
  text-decoration: underline;
}

.full-height {
  height: 100vh;
}

.row {
  max-width: 95vw;
}

.context-menu {
  position: absolute;
  z-index: 1;
  border: solid 1px #cccccc;
  background: #fff;
}

#sidepanel {
  z-index: 1;
  position: relative;
}

#sidepanel-body {
  margin-left: 4px;
}

#sidepanel-resizer {
  position: absolute;
  width: 8px;
  border-left: 1px solid;
  border-color: #d8d8d8;
  cursor: e-resize;
}

Add some style to the context menu

Add some style to the context menu


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

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

footer.footer .github-fork-ribbon-wrapper .github-fork-ribbon:hover a {
  border-color: #4abdac;
  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;
}

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

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

Update hover state for GitHub fork ribbon


body {
position: relative;
padding-top: 80px;
}

input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#eeeeee;border-color:#ddd; cursor: auto;}

#qr {
    width: 185px;
    height: 185px;
    display: inline-block;
}

#qr_addr {
    position: relative;
    z-index: 1;
}

legend {
    margin-bottom: 0px;
}

.form-hide {
    display: none;
}

#form-well {
    width: 600px;
    margin: 0 auto;
    padding-bottom: 0px;
}

#form-well input[type='text'] {
    width: 520px;
}

/* Footer */
footer p {
    text-align: center;
}

body {
position: relative;
padding-top: 80px;
}

input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#eeeeee;border-color:#ddd; cursor: auto;}

#qr {
    width: 185px;
    height: 185px;
    display: inline-block;
}

#qr_addr {
    position: relative;
    z-index: 1;
}

legend {
    margin-bottom: 0px;
}

.form-hide {
    display: none;
}

/* Front page password form */

#form-well {
    width: 600px;
    margin: 0 auto;
    padding-bottom: 0px;
}

#form-well input {
    margin-bottom: 0;
}

#form-well input[type='text'] {
    width: 520px;
}

#form-well input[type='password'] {
    width: 320px;
}

#form-well .btn-success {
  width: 125px;
}

#open-sesame {
  width: 80px;
}

/* Footer */
footer p {
    text-align: center;
}

Support for Elektrum style addresses.

Support for Elektrum style addresses.


.caption{
  font-size: 12px;
}

.sub-page {
  min-height: 400px !important;
}

.portfolio-modal .img-centered{
	display: inline;
}

.bold{
	font-weight: 700;
}

.post-container {
	margin-bottom: 200px;
	min-height: 500px;
}

.date-container{
	width:100%;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

.header-content-inner.short{
	margin-top: 90px;
}

.blog-content{
	margin: 40px;
}

.blog-content>h1{
	margin-top: 1.5em;
	text-align: center;
	font-weight: 600;
}

.blog-item>h2{
	margin-top: 1.5em;
	font-weight: 600;
}

.blog-item>.date{
	color: #bbb;
	margin-bottom: 10px;
}

@media (min-width:1200px){
	.container{width:970px;}
	.wide{width:1170px;}
}

.row{
	margin: 0px;
}

Remove edge problem caused by css attribute row


.UrlField > input, .status-info, .OmniLinkItem-Url {
    font-family: "PragmataPro" !important;
}

.status-info {
    font-size: 12px !important;
}

.siteinfo-text {
    display: none !important;
}

vivaldi: Add css mods to use PragmataPro for urls


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

.startBtn {
  margin-top: 1em;
}

.errorMessage {
  color: rgb(222, 50, 38);
  padding-left: 1em;
}

.action-button-container {
  display: flex;
}

.action-button-container > div:last-child {
  margin-left: auto;
}

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

.startBtn {
  margin-top: 1em;
}

.errorMessage {
  color: rgb(222, 50, 38);
  padding-left: 1em;
}

.action-button-container {
  display: flex;
  & > div:last-child {
    margin-left: auto;
  }
}

Use CSS nesting on some CSS

Use CSS nesting on some CSS


.container {
    max-width: 960px;
}

.header {
    margin-top: 4rem;
    text-align: center
}

.value-prop {
    margin-top: 1rem;
}

.value-props {
    margin-top: 4rem;
    margin-bottom: 4rem;
 }

.docs-header {
    text-transform: uppercase;
    font-size: 1.8rem;
    letter-spacing: .2rem;
    font-weight: 500;
 }

.docs-section {
    border-top: 1px solid #eee;
    padding: 4rem 0;
    margin-bottom: 0;}
}

/*This CSS belongs to the nav_bar.php file*/

.nav_bar{
	margin: 0;
}

.spacer{
	margin: 50px;
}
.navbar{
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: rgb(50,50,50);
	position: fixed;
	top: 0;
	width: 100%;

}

.nav_bar li{
	display: inline;
	float: left;
	margin: 0;

}

.nav_bar li a {
    display: block;
    color: white;
    text-align: center;

    padding: 14px 16px;
    padding-bottom: 10px;
    text-decoration: none;
 }

 .nav_bar a:hover {

	background-color: rgb(64,64,64);
}

.container {
    max-width: 960px;
}

.header {
    margin-top: 4rem;
    text-align: center;
}

.value-prop {
    margin-top: 1rem;
}

.value-props {
    margin-top: 4rem;
    margin-bottom: 4rem;
 }

.docs-header {
    text-transform: uppercase;
    font-size: 1.8rem;
    letter-spacing: .2rem;
    font-weight: 500;
 }

.docs-section {
    border-top: 1px solid #eee;
    padding: 4rem 0;
    margin-bottom: 0;}
}

Add nav bar styles and spacer between nav bar and other elements


html, body, ul, ol, li, form, fieldset, legend {
    margin: 0;
    padding: 0;
}
body {
    font-family: Ubuntu, Verdana, Tahoma, sans-serif;
    background: white;
}
input {
    padding: 4px;
    border: solid 1px #E5E5E5;
    outline: 0;
    background: #FFFFFF;
    margin-right: 9px;
}
input:hover, input:focus {
    border-color: #C9C9C9;
}
label {
    padding-right: 9px;
}
#control button {
    font-weight:bold;
    cursor: pointer;
}
#control button.stop {
    display: none;
}
#control.connected button.start {
    display: none;
}
#control.connected button.stop {
    display: inline;
}

html, body, ul, ol, li, form, fieldset, legend {
    margin: 0;
    padding: 0;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background: white;
}

#main {
    margin: 0 auto;
    width: 700px;
}

input {
    padding: 4px;
    border: solid 1px #E5E5E5;
    outline: 0;
    background: #FFFFFF;
    margin-right: 9px;
}
input:hover, input:focus {
    border-color: #C9C9C9;
}
label {
    padding-right: 9px;
}
#control button {
    font-weight:bold;
    cursor: pointer;
}
#control button.stop {
    display: none;
}
#control.connected button.start {
    display: none;
}
#control.connected button.stop {
    display: inline;
}

Use standard fonts and center layout

Use standard fonts and center layout


body {
  max-width: 44em !important;
  margin: 0 auto !important;
  font-size: 22px !important;
  background: none !important;
}

p {
  font-family: serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: sans-serif !important;
}

Enforce really basic font selection

Enforce really basic font selection

It may be worth looking into something nicer.
And removing existing styles on a page.


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

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

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

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

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

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

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

Make attribute names look a bit different form the values


/* Account Login page */

#login_frame {
	width: 55%;
	float: left;
	margin-right: 4%;
}

#new_customers_frame {
	width: 38%;
	float: left;
}

#new_customers_frame p {
	margin: 0 0 1em 0;
}

#login_frame #email_address {
	width: 98%;
}

.swat-footer-form-field {
	clear: left;
}

#login_frame .swat-footer-form-field .swat-button {
	vertical-align: middle;
}

/* Account Login page */

#login_frame {
	width: 55%;
	float: left;
	display: inline; /* For IE6 */
	margin-right: 4%;
}

#new_customers_frame {
	width: 38%;
	float: left;
}

#new_customers_frame p {
	margin: 0 0 1em 0;
}

#login_frame #email_address {
	width: 98%;
}

.swat-footer-form-field {
	clear: left;
}

#login_frame .swat-footer-form-field .swat-button {
	vertical-align: middle;
}

Fix minor IE6 margin+float bug

Fix minor IE6 margin+float bug

svn commit r34585


body {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 0px;
}

.header {
  background-color: #595959;
  height: 50px;
  width: 100%;
}

.vertical-align-helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.logo-name {
  font-size: 28px;
  font-family: Futura;
  color: #F6F6F6;
  vertical-align: middle;"
}

body {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 0px;
}

.header {
  background-color: #595959;
  height: 50px;
  width: 100%;
  -moz-box-shadow:    0px 1px 2px 0px rgba(0,0,0,0.50);
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.50);
  box-shadow:         0px 1px 2px 0px rgba(0,0,0,0.50);
  position:absolute;
  z-index: 100;
}

.vertical-align-helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.logo-name {
  font-size: 28px;
  font-family: Futura;
  color: #F6F6F6;
  vertical-align: middle;"
}

Add shadow to header bar

Add shadow to header bar


.no-margin {
    margin: 0;
}

.navbar {
    margin-bottom: 0;
}

#controls {
    position: absolute;
    top: 42px;
    bottom: 0;
    width: 28em;
    border-right: 1px solid #D4D4D4;
    z-index: 1;
    box-sizing: border-box;
    padding: 0 2em;
}

#map {
    position: absolute;
    margin-left: 28em;
    width: 100%;
}

html, body {
    height: 100%;
    position: relative;
}

.full-height {
    height: 100%;
}

.centered {
    text-align: center;
}

input.input-full {
    width: 100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 12px;
    padding-top: 12px;
}

.no-margin {
    margin: 0;
}

.navbar {
    margin-bottom: 0;
}

#controls {
    position: absolute;
    top: 42px;
    bottom: 0;
    width: 28em;
    border-right: 1px solid #D4D4D4;
    z-index: 1;
    box-sizing: border-box;
    padding: 0 2em;
}

#map {
    position: absolute;
    margin-left: 28em;
    width: 100%;
}

#map img {
    max-width: none;
}

html, body {
    height: 100%;
    position: relative;
}

.full-height {
    height: 100%;
}

.centered {
    text-align: center;
}

input.input-full {
    width: 100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 12px;
    padding-top: 12px;
}

Fix CSS conflict between Bootstrap and Google Maps.


@font-face {
    font-family: "Helvetica Neue Light";
    src: url("fonts/HelveticaNeueLight.ttf")
}

* {
    font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

blockquote > p:before {
content: "- ";
}

blockquote > p {
margin: 0 0 0 0;
}

.canvas-view {
width: 100%;
height: 100%;
background-color: white;
}

.markdown {
padding: 0 15% 0 15%;
font-size: large;
}

.element-book {
width: 90%;
height: 80%;
}

@font-face {
    font-family: "Helvetica Neue Light";
    src: url("fonts/HelveticaNeueLight.ttf")
}

* {
    font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

blockquote > p:before {
    content: "- ";
}

blockquote > p {
    margin: 0 0 0 0;
}

.canvas-view > canvas {
    width: 100%;
    height: 90%;
    background-color: white;
}

.canvas-view > .w3-row > a, .canvas-view > .w3-row > a > img {
    padding: 0 5px 0 5px;
    height: 30px;
    margin-bottom: 10px;
}

.markdown {
    padding: 0 15% 0 15%;
    font-size: large;
}

.element-book {
    width: 90%;
    height: 80%;
}

Use styling instead of javascript

Use styling instead of javascript


.spacer-vertical {
  height:20px;
}
.spacer-horizontal{
  width:10px;
}
.members .members-title {
  padding-bottom: 10px;
}

.members .members-msgCount {
  padding-bottom: 8px;
  color: #3273dc;
}
.bg-color{
  background-color: #D6DBDF;
}
.break-word{
  width: 50vw;
  overflow-wrap: break-word;
}
.break-word-info{
  width: 30vw;
  overflow-wrap: break-word;
}
/*@media screen and (max-width:767px) {
    img.responsive {
        max-width: 16px;
        max-height: 16px;
    }
}

@media screen and (min-width:768px) {
    img.responsive {
        max-width: 24px;
        max-height: 24px;
    }
}

@media screen and (min-width:992px) {
    img.responsive {
        max-width: 32px;
        max-height: 32px;
    }
}

@media screen and (min-width:1200px) {
    img.responsive {
        max-width: 96px;
        max-height: 96px;
    }
}*/

Add messageContent width toggling on grouInfo toggle


.queue {
	margin: 2em auto;

}
.counter { text-align: center;
	font-size: 1em;
	font-family: monospace;
	white-space: nowrap;
	float: right;
	display: block;
	margin: 1em;
}

body { color: #bbb; font-family: monospace; font-size: 1em; margin: 2em;}
li { color: inherit; background: inherit; font: inherit; border: inherit; list-style-type: square; }

.delta.negative { color: red; }
.delta.zero { color: gray; }
.delta { color: lime; font-size: 2em; }

.queue {
	margin: 2em auto;

}
.counter { text-align: center;
	font-size: 1em;
	font-family: monospace;
	white-space: nowrap;
	float: right;
	display: block;
	margin: 1em;
}

body { color: #bbb; font-family: monospace; font-size: 1em; max-width: 979px; margin: auto;}
li { color: inherit; background: inherit; font: inherit; border: inherit; list-style-type: square; }

.delta.negative { color: #00bfff; }
.delta.zero { color: #ff00bf; }
.delta { color: #bfff00; font-size: 2em; }

Change delta colors away from red/green

Change delta colors away from red/green


@import 'highlight.js/styles/agate';

code {
  @apply bg-gray-400 p-1 text-sm;

  background-color: ghostwhite;
}

pre {
  @apply mb-6;
  display: block;
  word-break: break-all;
  word-wrap: break-word;
}

pre code {
  @apply border leading-snug text-sm -mx-4;
  background-color: none;
  overflow: auto;
  font-weight: normal;
}

.hljs {
  @apply p-4;
}

@screen md {
  pre code {
    @apply rounded -mx-6;
  }

  .hljs {
    @apply p-6;
  }

}

@screen lg {
  pre code {
    @apply -mx-8 text-base rounded-lg;
  }

  .hljs {
    @apply p-8;
  }
}

@import 'highlight.js/styles/dracula';

/* Dracula-specific override */
.hljs-comment {
  color: #8293c6;
}

code {
  @apply bg-gray-400 p-1 text-sm;

  background-color: ghostwhite;
}

pre {
  @apply mb-6;
  display: block;
  word-break: break-all;
  word-wrap: break-word;
}

pre code {
  background-color: none;
  overflow: auto;
  font-weight: normal;
}

pre code,
.hljs {
  @apply border leading-snug text-sm -mx-4 p-4;
}

@screen md {
  pre code,
  .hljs {
    @apply rounded -mx-6 p-6;
  }
}

@screen lg {
  pre code,
  .hljs {
    @apply text-base rounded-lg -mx-8 p-8;
  }
}

Update syntax highlighting to dracula

Update syntax highlighting to dracula


.content {
  position: relative;
}

nav{
  min-height: 70px;
  background-color: gray;
}

#logout{
  display: none;
}

.auth-box{
  border: 1px solid gray;
  width: 260px;
  height: 200px;
  text-align: center;
  margin: 120px auto;
}

#login {
  background-color: rgba(246, 196, 25,0.7);
  margin: 20px auto 40px auto;
}

#open-page{
  height: 880px;
  border: 1px solid black;
  width: 724px;
  display: inline-block;
}

.prev-flip {
  display: inline-block;
  min-height: 100%;
  background-color: blue;
  min-width: 220px;
  left: 0;
}

.next-flip {
  display: inline-block;
  min-height: 100%;
  background-color: green;
  min-width: 220px;
  right: 0;
}

.content {
  position: relative;
}

nav{
  min-height: 70px;
  background-color: gray;
}

#logout{
  display: none;
}

.auth-box{
  border: 1px solid gray;
  width: 260px;
  height: 200px;
  text-align: center;
  margin: 120px auto;
}

#login {
  background-color: rgba(246, 196, 25,0.7);
  margin: 20px auto 40px auto;
}

#open-page{
  height: 880px;
  border: 1px solid black;
  width: 724px;
  display: inline-block;
}

#open-page p {
  font-size: 1.4em;
  line-height: 1.3em;
  padding-left: 2.3em;
  padding-right: 2.3em;
  text-align: justify;
}

.prev-flip {
  display: inline-block;
  min-height: 100%;
  background-color: blue;
  min-width: 220px;
  left: 0;
}

.next-flip {
  display: inline-block;
  min-height: 100%;
  background-color: green;
  min-width: 220px;
  right: 0;
}

Add styling for page body text.

Add styling for page body text.


/* https://bitsofco.de/holy-grail-layout-css-grid/ */
:root {
  --lighter:  #ccc;
  --lightest: #fff;
  --darker:   #999;
  --darkest:  #444;
  --background: pink;
}

header, footer { background: var(--darker) }

aside { background: var(--background) }

/* https://bitsofco.de/holy-grail-layout-css-grid */
:root {
  --lighter:  #ccc;
  --lightest: #fff;
  --darker:   #999;
  --darkest:  #444;
  --background: pink;
}

header, footer { background: var(--darker) }

aside { background: var(--background) }

Add link to css grail grid layout

Add link to css grail grid layout


.contextmenu
{
  position: absolute;
  min-width: 150px;
  background: #FFF;
  /*opacity: .88;*/
  user-select: none;
  z-index: 5;
  display: flex;
  flex-direction: column;
  border: 1px solid #CCC;
}

.contextmenu:focus{
  outline: 0;
}

.menuitem{
  color: #000;
  cursor: pointer;
  padding: 2px 5px;
}

.menuitem:hover{
  background: #eee;
}

.contextmenu hr{
  margin: 1px;
}

.contextmenu
{
  position: absolute;
  min-width: 150px;
  background: #FFF;
  /*opacity: .88;*/
  user-select: none;
  z-index: 5;
  display: flex;
  flex-direction: column;
  border: 1px solid #CCC;
}

.contextmenu:focus{
  outline: 0;
}

.menuitem{
  color: #000;
  cursor: pointer;
  padding: 2px 5px;
}

.menuitem:hover{
  background: #eee;
}

.contextmenu hr{
  margin: 0;
  border: none;
  border-top: .5px solid #aaa;
}

Make context menu breaks more pleasant looking


@import '../type-racer-style.css';

.wrapper {
  width: 100%;
  clear: both;
}

.text-area {
    width: 500px;
    height: 200px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 3px solid #ccc;
    border-radius: 4px;
    margin-top: 15px;
    background-color: #f8f8f8;
    font-size: 30px;
}

.game-control-button-block {
    width: 250px;
}

.game-control-start-button {
    background-color: #4CAF50; /* Green colour */
}

.challenge-string {
    font-family: Courier New;
    font-size: 32px;
    font-style: italic;
}

Add the styles for Gameplay.

Add the styles for Gameplay.


.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
  margin-bottom: 0;
}

.tt-dropdown-menu {
  min-width: 160px;
  margin-top: 2px;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.tt-suggestion {
  display: block;
  padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}

.tt-suggestion.tt-is-under-cursor a {
  color: #fff;
}

.tt-suggestion p {
  margin: 0;
}

Add a basic css for typeahead

Add a basic css for typeahead


.toolkit-privacyMode .currency {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.toolkit-privacyMode *:hover > .currency,
.toolkit-privacyMode *:hover > * > .currency,
.toolkit-privacyMode .currency:hover {
  -webkit-filter: initial;
  filter: initial;
}

.toolkit-privacyMode .currency,
.toolkit-privacyMode .button-prefs-user {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.toolkit-privacyMode .button-prefs-user:hover,
.toolkit-privacyMode *:hover > .currency,
.toolkit-privacyMode *:hover > * > .currency,
.toolkit-privacyMode .currency:hover {
  -webkit-filter: initial;
  filter: initial;
}

Add email hiding to privacy mode

Add email hiding to privacy mode


.tsbar-popup {
    display:none;
}

.open .tsbar-popup {
    display:block;
    z-index: 1;
}

#tsbar {
    position:relative;
    height:50px;
    width:100%;
    border:solid black;
}

.tsbar-left {
    position:absolute;
    left:0px;
    top:0px;
}
.tsbar-middle  {
    position:absolute;
    left:50%;
    margin-left:-100px;
    top:0px;
}
.tsbar-right {
    position:absolute;
    right:0px;
    top:0px;
}

.tsbar-user-icon, .tsbar-notification-icon {
    width:48px;
    height:48px;
}

.tsbar-popup {
    display:none;
}

.open .tsbar-popup {
    display:block;
    z-index: 1;
}

#tsbar {
    position:relative;
    height:50px;
    width:100%;
    border:solid black;
}

.tsbar-left {
    position:absolute;
    left:0px;
    top:0px;
}
.tsbar-middle  {
    position:absolute;
    left:50%;
    margin-left:-100px;
    top:0px;
}
.tsbar-right {
    position:absolute;
    right:0px;
    top:0px;
}

.tsbar-user-icon, .tsbar-notification-icon, .search img {
    width:48px;
    height:48px;
}

Apply image sizing to search result site icons.


@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);

:root {
  --background: #0C0D25;
  --primary: white;
  font-size: 16px;
}

body {
  background-color: var(--background);
  color: var(--primary);
  display: flex;
  font-family: 'Roboto', sans-serif;
  flex-direction: column;
  margin: 0.5rem 3rem;
}

Set body as flex, add margin and set colouring


@charset 'UTF-8';

body {
 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(238, 238, 238)), color-stop(1, rgb(248, 248, 248)));
}

.navbar-search {
 width: 500px;
}

.title {
 width: 458px;
 text-overflow: ellipsis;
 overflow: hidden;
}

.url {
 width: 458px;
 text-overflow: ellipsis;
 overflow: hidden;
 display: block;
}

.dropdown-menu {
 background-color: rgb(233, 233, 233);
}

.muted {
 color: rgb(100, 100, 100);
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
 background-color: rgb(209, 209, 209);
 color: inherit;
}

@charset 'UTF-8';

body {
 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(238, 238, 238)), color-stop(1, rgb(248, 248, 248)));
}

.navbar-search {
 width: 500px;
}

.title {
 width: 458px;
 text-overflow: ellipsis;
 overflow: hidden;
}

.url {
 width: 458px;
 text-overflow: ellipsis;
 overflow: hidden;
 display: block;
}

.dropdown-menu {
 background-color: rgb(233, 233, 233);
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, .dropdown-submenu:hover>a, .dropdown-submenu:focus>a {
 background-color: rgb(209, 209, 209);
 color: inherit;
}

.muted {
 color: rgb(100, 100, 100);
}

Fix ui glitch, when hovering and then using arrow keys.


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

.header-row-overlay {
  background: var(--color-neutral-light);
  position: absolute;
  left: 48px;
  right: 0;
  height: 48px;
  overflow-x: auto;
  z-index: 3;
}

.num-selected-rows-number {
  font-family: var(--font-family-medium);
}

Remove css selector because we use the strong tag inside a Text component instead


@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


footer {
  border-top: 1px solid #efefef;
  margin-top: 5em;
}

.info {
  font-size: 1.5em;
  color: gray;
}

#page-title {
  font-size: 3em;
  margin-bottom: 0em;
}

#community {
  margin-top: 1em;
  padding: 1em;
  font-size: 1.3em;
  border-top: 2px solid #efefef;
  border-bottom: 2px solid #efefef;
}

#contributing {
  font-size: 1.3em;
}

.btn {
  margin-top: 1em;
}

h2 {
  font-size: 2.3em;
  letter-spacing: 0.14em;
}

h3 {
  font-size: 1.7em;
  letter-spacing: 0.05em;
}

Improve the styling of the h2 and h3 headers


html {
  box-sizing: border-box;
  background-color: $color-scorpion;
  overflow: hidden;
}

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

html,
body {
  position: relative;
  font-family: $font-pixel;
}

body {
  overflow: auto;
}

.app-container {
  height: 100%;
  width: 90%;
  margin: 0 auto;
  padding: 0;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 0.8em;
  padding-right: 1em;
  display: inline;
  position: relative;
  top: -0.9em;
}

h3 {
  font-size: 1em;
}

html {
  box-sizing: border-box;
  background-color: $color-scorpion;
}

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

html,
body {
  position: relative;
  font-family: $font-pixel;
}

body {
  overflow: auto;
}

.app-container {
  height: 100%;
  width: 90%;
  margin: 0 auto;
  padding: 0;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 0.8em;
  padding-right: 1em;
  display: inline;
  position: relative;
  top: -0.9em;
}

h3 {
  font-size: 1em;
}

Fix issue with html tag overflow with mobile


/* Left for CSS overrides we need to make in the future */

/* Fix badge on RTD Theme */

.rst-other-versions {
	text-align: left;
}

.rst-other-versions a {
	border: 0;
}

.rst-other-versions dl {
	margin: 0;
}

/* Fix Mkdocs sidebar */

nav.stickynav {
	position: absolute;
}

/* Left for CSS overrides we need to make in the future */

/* Fix badge on RTD Theme */

.rst-versions.rst-badge {
    display: block;
}

.rst-other-versions {
	text-align: left;
}

.rst-other-versions a {
	border: 0;
}

.rst-other-versions dl {
	margin: 0;
}

/* Fix Mkdocs sidebar */

nav.stickynav {
	position: absolute;
}

Set badge display to block

Set badge display to block


/* global */
body {
  padding-top: 100px;
}

.material-icons.md-18 {
  font-size: 18px;
}

.material-icons {
  vertical-align: middle;
}

/* navbar */
.navbar-brand.logo img {
  height: 20px;
  margin-top: -5px;
}

/* global */
body {
  padding-top: 100px;
}

.material-icons.md-18 {
  font-size: 18px;
}

.material-icons {
  vertical-align: middle;
}

.error-page p {
  text-align: left;
}

/* navbar */
.navbar-brand.logo img {
  height: 20px;
  margin-top: -5px;
}

Add styling for the error page

Add styling for the error page


.rccnav {
  display: inline-block;
  color: rgba(255, 255, 255, .95);
  /*vertical-align: text-bottom;*/
  /*margin: 0 .15em;*/
  /*border-radius: .2em;*/
  /*padding: .17em .4em .25em;*/
  /*font-size: 95%;*/
  /*line-height: 1;*/
  /*background-color: rgba(0, 0, 0, .5);*/
}
.rccnav svg {
  position: relative;
  /*bottom: .02em;*/
  display: inline-block;
  /*vertical-align: middle;*/
  width: 1.95em;
  height: 1.85em;
  fill: currentColor;
}
.rccpagination {
  display: inline-block;
  /*color: rgba(255, 255, 255, .95);*/
  /*vertical-align: text-bottom;*/
  /*margin: 0 .15em;*/
  /*border-radius: .2em;*/
  /*padding: .17em .4em .25em;*/
  /*font-size: 95%;*/
  /*line-height: 1;*/
  /*background-color: rgba(0, 0, 0, .5);*/
}
.rccpagination svg {
  position: relative;
  /*bottom: .02em;*/
  display: inline-block;
  /*vertical-align: middle;*/
  width: 1.95em;
  height: 1.85em;
  fill: currentColor;
}

.rccnav {
  display: inline-block;
  color: rgba(255, 255, 255, .95);
  /*vertical-align: text-bottom;*/
  /*margin: 0 .15em;*/
  /*border-radius: .2em;*/
  /*padding: .17em .4em .25em;*/
  /*font-size: 95%;*/
  /*line-height: 1;*/
  /*background-color: rgba(0, 0, 0, .5);*/
}
.rccnav svg {
  position: relative;
  /*bottom: .02em;*/
  display: inline-block;
  /*vertical-align: middle;*/
  width: 1.95em;
  height: 1.85em;
  fill: currentColor;
}
.rccpagination {
  display: inline-block;
  /*color: rgba(255, 255, 255, .95);*/
  /*vertical-align: text-bottom;*/
  /*margin: 0 .15em;*/
  /*border-radius: .2em;*/
  /*padding: .17em .4em .25em;*/
  /*font-size: 95%;*/
  /*line-height: 1;*/
  /*background-color: rgba(0, 0, 0, .5);*/
}
.rccpagination svg {
  position: relative;
  /*bottom: .02em;*/
  display: inline-block;
  /*vertical-align: middle;*/
  width: .9em;
  height: .8em;
  fill: currentColor;
}

Reduce size of svg for "older" link

Reduce size of svg for "older" link


.CodeMirror {
  position: relative;
}

.CodeMirror-code {
  overflow: auto;
  height: 300px;
  padding: .4em;
  white-space: pre;
  font-family: monospace;
  line-height: 1em;
  position: relative;
}

span.CodeMirror-selected {
  background: #bbb !important;
  color: white !important;
}

.CodeMirror-focused .CodeMirror-selected {
  background: #88f !important;
}

.CodeMirror-cursor {
  z-index: 10;
  position: absolute;
  visibility: hidden;
  border-left: 1px solid black;
}
.CodeMirror-focused .CodeMirror-cursor {
  visibility: visible;
}

.CodeMirror-gutter {
  float: left;
  background-color: #f7f7f7;
  border-right: 1px solid #eee;
  color: #aaa;
  text-align: right;
  min-width: 1.5em;
  padding: .4em .2em;
  margin: -.4em 0 -.4em -.4em;
  height: 100%;
}

.CodeMirror {
  position: relative;
}

.CodeMirror-code {
  overflow: auto;
  height: 300px;
  padding: .4em;
  white-space: pre;
  font-family: monospace;
  line-height: 1em;
  position: relative;
}

span.CodeMirror-selected {
  background: #bbb !important;
  color: HighlightText !important;
}

.CodeMirror-focused .CodeMirror-selected {
  background: Highlight !important;
}

.CodeMirror-cursor {
  z-index: 10;
  position: absolute;
  visibility: hidden;
  border-left: 1px solid black;
}
.CodeMirror-focused .CodeMirror-cursor {
  visibility: visible;
}

.CodeMirror-gutter {
  float: left;
  background-color: #f7f7f7;
  border-right: 1px solid #eee;
  color: #aaa;
  text-align: right;
  min-width: 1.5em;
  padding: .4em .2em;
  margin: -.4em 0 -.4em -.4em;
  height: 100%;
}

Use system colors for selected text.

Use system colors for selected text.


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

/* Hide status-sk in plain sight until it has live data. */
#title status-sk /deep/ span,
#title status-sk /deep/ a {
  color: #D95F02;
}

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

Hide status bar until it has real data.

Hide status bar until it has real data.

TBR=stephana
BUG=skia:

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


.kwfUp-clear { height: 0px; clear: both; }
.kwfUp-left { float: left; }
.kwfUp-right { float: right; }

.kwfUp-webStandard strong { font-weight: bold; }
.kwfUp-webStandard em { font-style: italic; }

.kwfUp-webStandard ol,
.kwfUp-webStandard ul { margin-bottom: 10px; margin-left: 20px; }
.kwfUp-webStandard li { list-style-type: disc; margin-bottom: 5px; }

ul.kwfUp-webListNone,
.kwfUp-webListNone ul { margin: 0px; }
.kwfUp-webListNone li {
    list-style-type: none !important;
    list-style-image: none !important;
    margin-bottom: 0px;
}

@media print {
    .kwfUp-outerBenchmarkBox {
        display: none;
    }
}

.kwfUp-clear { height: 0px; clear: both; }
.kwfUp-left { float: left; }
.kwfUp-right { float: right; }

.kwfUp-webStandard strong { font-weight: bold; }
.kwfUp-webStandard em { font-style: italic; }

.kwfUp-webStandard ol,
.kwfUp-webStandard ul { margin-bottom: 10px; margin-left: 20px; }
.kwfUp-webStandard li { list-style-type: disc; margin-bottom: 5px; }

ul.kwfUp-webListNone,
.kwfUp-webStandard.kwfUp-webListNone ul { margin: 0px; }
.kwfUp-webStandard.kwfUp-webListNone li {
    list-style-type: none !important;
    list-style-image: none !important;
    margin-bottom: 0px;
}

@media print {
    .kwfUp-outerBenchmarkBox {
        display: none;
    }
}

Add webstandard selector to weblistnone ul styles

More accurate selector to enable overwriting of webstandard list styles


#project1, #project2, #project3 {
  display: none;
}

body {
  background: url("https://images.unsplash.com/photo-1483205464475-6204a96e1ef3?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=");
}

.wrap {
    margin: auto;
    width: 50%;
    border: 2px solid #eeecec;
    padding: 70px;
    margin-top: 50px;
}

a {
  color: #000080;
  font-family: sans-serif;
}

img {
    display: block;
    margin: auto;
    width: 80%;
    align-self: center;
}

.footer {
   display: table;
   text-align: center;
   font-family: sans-serif;
   margin-left: auto;
   margin-right: auto;
}

#project1, #project2, #project3 {
  display: none;
}

body {
  background: url("https://images.unsplash.com/photo-1483205464475-6204a96e1ef3?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.wrap {
    margin: auto;
    width: 50%;
    border: 2px solid #eeecec;
    padding: 70px;
    margin-top: 50px;
}

a {
  color: #000080;
  font-family: sans-serif;
}

img {
    display: block;
    margin: auto;
    width: 80%;
    align-self: center;
}

.footer {
   display: table;
   text-align: center;
   font-family: sans-serif;
   margin-left: auto;
   margin-right: auto;
}

Add background css to make it fixed

Add background css to make it fixed


.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
  padding: 0px 5px;
}

@media (min-width: 1200px) {
  #map-container {
    min-width: 1000px;
  }
}

.plot-widget {
  min-width: 500px;
}

.plot-widget .x_panel {
  height: 100%;
  min-height: 500px;
}

#map-container .x_panel{
  padding: 15px;
}

#map-container .x_panel .x_content{
  height: 100%;
}

#map-div {
  height: 100%;
}

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
  padding: 0px 5px;
  flex-grow: 1;
}

@media (min-width: 1200px) {
  #map-container {
    min-width: 1000px;
  }
}

.plot-widget {
  min-width: 500px;
}

.plot-widget .x_panel {
  height: 100%;
  min-height: 500px;
}

#map-container .x_panel{
  padding: 15px;
}

#map-container .x_panel .x_content{
  height: 100%;
}

#map-div {
  height: 100%;
}

Allow plot widget to grow

Allow plot widget to grow


.title {
	background: #fceabb; /* Old browsers */
	background: -moz-linear-gradient(top,  #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */

	margin-top: 0;
}

div.title {
	width: 50%;
	margin: 0 auto;
	text-align: center;
}

body {
	background-color: #FFFFFF;
}

h2, h3, h4, p, small, strong, .accounts, .networks, .nonetworks, .main, .disclaimer {
	text-align: center;
}

@media only screen and (max-width: 720px) {
	img { max-width: 100%; }
}

img {
	width: auto;
	max-width: 300px;
	min-width: 200px;
	margin: 0 auto;
	display: block;
}

Add style for title on index

Add style for title on index


    #outerWrapper {
      background: url('static/img/login_gradient.png') repeat-x;
      height: 300px;
    }

    #registerWrapper {
      width: 28em;
      height: 15em;
      margin: -8em 0 0 -12em;
      position: absolute;
      top: 35%;
      left: 50%;
      border-width: 3px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      z-index: 100;
      overflow: visible;
    }

    .registerWrapperWithError {
      height: 16em !important;
    }

    #register {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      margin: 1em auto;
      width: 25em;
    }

    #registerWrapper tr {
      line-height: 2em;
    }

    #disclaimer {
      position: relative;
      top: 10em;
      left: 50%;
      z-index: 101;

      width: 22em;
      /*height: 8em;*/
      margin: -4em 0 0 -12em;
      padding: 0 1em;

      border-width: 3px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;

      font-size: 80%;
      color: #f00;
    }

    #disclaimer a {
      color: rgb(30, 94, 238) !important;
    }

    #disclaimer a:hover {
      color:  #e50 !important;
    }

    #agilefantText {
      margin: 0;
      position: absolute;
      bottom: 0;
      z-index: 50;
      font-size: 72pt;
      font-style: italic;
      font-weight: bold;
    }

    #agilefantText img {
      display: block;
      float: left;
    }

    #agilefantText span {
      display: block;
      margin: 0.5em 0 0 150px;
    }

    #footerWrapper {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 0 0 1em 0;
      background-color: white;
      z-index: 200;
    }

    #footerText {
      margin: 1em 0 0 1em;
      white-space: nowrap;
    }

Remove unused entries from the registration css.


select, input, textarea {
	margin: 0;
	color: #000;
}

form {
	margin: 0;
}

img {
	border: 0;
}

/* table */

table {
	border-spacing: 0;
	margin: 0;
	border: 0;
}

td {
	padding: 0;
	vertical-align: top;
}

/* checkbox */

label {
	display: block;
	float: left;
	white-space: nowrap;
}

input[type=checkbox] {
	vertical-align: middle;
}

label span {
	padding-left: 4px;
	vertical-align: middle;
}

/* helpers */

.clear {
	clear: both;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.hidden {
	display: none;
}

.popup-body {
	margin: 0px;
}

/* edditing */

.edit-login td {
	padding: 0 8px 4px 0;
}

select, input, textarea {
	margin: 0;
	color: #000;
}

form {
	margin: 0;
}

img {
	border: 0;
}

/* table */

table {
	border-spacing: 0;
	margin: 0;
	border: 0;
}

td {
	padding: 0;
	vertical-align: top;
}

/* checkbox */

label {
	display: block;
	float: left;
	white-space: nowrap;
}

input[type=checkbox] {
	vertical-align: middle;
}

label span {
	padding-left: 4px;
	vertical-align: middle;
}

/* helpers */

.clear {
	clear: both;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.hidden {
	display: none;
}

.popup-body {
	margin: 0px;
	/* remove scrollbars on chrome */
	overflow: hidden;
}

/* edditing */

.edit-login td {
	padding: 0 8px 4px 0;
}

Remove scrollbars on image popup windows on Chrome.


@tailwind base;
@tailwind components;
@tailwind utilities;

:not(pre) > code[class*='language-'] {
  padding: 0;
  border-radius: 0;
  white-space: normal;
  background: none;
}

Fix inline code style error

Fix inline code style error


/* Custom page footer */
.footer {
    padding-top: 19px;
    color: #747474 ;
    border-top: 1px solid #e5e5e5;
    padding-left: 15px;
    padding-right: 15px;
}

#page-sub-header h2{
    margin-top: 0px;
}

#app-notice {
  clear: both;
  padding: 1.5em 0em;
}

.glyphicon-edit {
  margin-left: 4px;
}

.glyphicon-trash {
  margin-left: 12px;
}

Make the space wider for the two icons edit and trash


/* Pretty fonts, thanks to Google */
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
body {
    font-family:"PT Sans", Verdana, sans-serif;
}

/* Wider page */
.inner {
    max-width:40em;
}

/* More conventional bullet list marker */
ul>li:before {
    margin-top: -0.05em;
    content: "–";
}

/* Cleaner print style */
@media print {
    html * {
        font-size:12pt!important;
        color:black!important;
    }
    body {line-height:1.3em;}
    h1 {font-size:125%!important;}
    h2 {font-size:115%!important;}
    h3 {font-size:110%!important;}
    p ul ol {margin:0.5em auto!important;}
    .inner {
        max-width:100%!important;
    }
    #menu, #navigation,
    .blog-cover, .post-cover,
    .progress-container {
        display:none!important;
    }
    #blog-header, #post-header {
        background-color: white!important;
        padding:2em 0 0 0!important;
    }
    .post {
        padding-top:0!important;
    }
}

/* Pretty fonts, thanks to Google */
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,700&subset=cyrillic,cyrillic-ext,latin-ext');
@import url('https://fonts.googleapis.com/css?family=PT+Sans');

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

/* Wider page */
.inner {
    max-width:40em;
}

/* More conventional bullet list marker */
ul>li:before {
    margin-top: -0.05em;
    content: "–";
}

/* Cleaner print style */
@media print {
    html * {
        font-size:12pt!important;
        color:black!important;
    }
    body {line-height:1.3em;}
    h1 {font-size:125%!important;}
    h2 {font-size:115%!important;}
    h3 {font-size:110%!important;}
    p ul ol {margin:0.5em auto!important;}
    .inner {
        max-width:100%!important;
    }
    #menu, #navigation,
    .blog-cover, .post-cover,
    .progress-container {
        display:none!important;
    }
    #blog-header, #post-header {
        background-color: white!important;
        padding:2em 0 0 0!important;
    }
    .post {
        padding-top:0!important;
    }
}

Support for cyrillic letters in headings

Uses Fira Sans from Google Web Fonts with extra glyphs

Closes #2


body {
  margin: 0;
  font-family: 'Roboto', 'Noto', sans-serif;
  background-color: #eee;
}

a {
  text-decoration: none;
}

a > paper-icon-item {
  color: black;
}

a > paper-item {
  color: black;
}

app-drawer-layout:not([narrow]) [drawer-toggle] {
  display: none;
}

app-toolbar > paper-progress {
  width: 100%;
}

iron-icon.status-unknown {
  color: var(--paper-grey-500);
}

iron-icon.status-failed {
  color: var(--error-color);
}

iron-icon.status-changed {
  color: var(--paper-green-500);
}

body {
  margin: 0;
  font-family: 'Roboto', 'Noto', sans-serif;
  background-color: var(--paper-grey-50);
}

a {
  text-decoration: none;
}

a > paper-icon-item {
  color: var(--primary-text-color);
}

a > paper-item {
  color: var(--primary-text-color);
}

app-drawer-layout:not([narrow]) [drawer-toggle] {
  display: none;
}

app-toolbar > paper-progress {
  width: 100%;
}

iron-icon.status-unknown {
  color: var(--paper-grey-500);
}

iron-icon.status-failed {
  color: var(--error-color);
}

iron-icon.status-changed {
  color: var(--paper-green-500);
}

Correct colors on background and navbar links


*{
}
body{
  margin: 0;
  background: #222;
  color: black;
}
#content{
  display: flex;
  flex-direction: row;
  background: black;
  padding: 1% 5%;
  margin: 2.5%;
}
#tabs{
  background: grey;
  width: 150px;
}
#mainBody{
  display: flex;
  flex: auto;
  flex-direction: column;
  background: antiquewhite;
  border: solid 1px;
  border-color: silver;
}
#mainInput{
  flex: auto;
  display: block;
  margin: 4px 2px;
}
.item{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  flex: auto;
  margin: 2px 0px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 0px 10px;
}

*{
}
body{
  margin: 0;
  background: #222;
  color: black;
}
#content{
  display: flex;
  flex-direction: row;
  background: black;
  padding: 1% 5%;
  margin: 2.5%;
}
#tabs{
  background: grey;
  width: 150px;
  flex-shrink: 0;
}
#mainBody{
  display: flex;
  flex: auto;
  flex-direction: column;
  background: antiquewhite;
  border: solid 1px;
  border-color: silver;
  flex-shrink: .5;
}
#mainInput{
  flex: auto;
  display: block;
  margin: 4px 2px;
}
.item{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  flex: auto;
  margin: 2px 0px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 0px 10px;
}

Set flex shrink for id's "mainBody", and "tabs"


:root {
  --normal-background: #292A2C;
  --bright-foreground: #fff;
  --light-background: #737373;
  font-family: 'Avenir', 'helvetica', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cardstack-workflow-launcher {
  font-size: 16px;
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 5px;
}

.cardstack-workflow-sidebar {
  display: inline-block;
  line-height: 1.375em;
  margin-left: 0;
  margin-right: 0;
  color: var(--bright-foreground);
  background-color: var(--normal-background);
  cursor: pointer;
  width: 4vw;
  height: inherit;
}

.cardstack-workflow-notification-count {
  width: 2vw;
  height: 2vw;
  line-height: 2vw;
  background-color: red;
  margin: 1vh auto 0 auto;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
}

.cardstack-workflow {
  display: inline-block;
  width: 12vw;
  height: inherit;
  background-color: var(--light-background);
  color: var(--bright-foreground);
}

:root {
  --normal-background: #292A2C;
  --bright-foreground: #fff;
  --light-background: #737373;
  font-family: 'Avenir', 'helvetica', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cardstack-workflow-launcher {
  font-size: 16px;
  padding: 5px;
}

.cardstack-workflow-sidebar {
  display: inline-block;
  line-height: 1.375em;
  margin-left: 0;
  margin-right: 0;
  color: var(--bright-foreground);
  background-color: var(--normal-background);
  cursor: pointer;
  width: 4vw;
  height: inherit;
}

.cardstack-workflow-notification-count {
  width: 2vw;
  height: 2vw;
  line-height: 2vw;
  background-color: red;
  margin: 1vh auto 0 auto;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
}

.cardstack-workflow {
  display: inline-block;
  width: 12vw;
  height: inherit;
  background-color: var(--light-background);
  color: var(--bright-foreground);
}

Remove unnecessary positioning from cardstack-workflow-launcher


.vLargeTextField, .item-richtext {
  width:300px !important;
  height:120px !important;
}
.vTextField {
  width:300px !important;
}
#language-selector label.translated {
  text-decoration:underline;
}
#all_languages { float:left; }
fieldset.module {
  clear: left;
}
fieldset.language {
  clear: none;
  float: left;
  width: 430px;
  margin-right: 5px;
}
fieldset.language h2 {
  height: 25px;
  line-height: 25px;
}
div.item-content div.form-row {
  float:left;
  border-bottom:none;
}
div.inline-group, #main_wrapper, .submit-row {clear:left;}

.vLargeTextField, .item-richtext {
  width:300px !important;
  height:120px !important;
}
.vTextField {
  width:300px !important;
}
#language-selector label.translated {
  text-decoration:underline;
}
#all_languages { float:left; }
fieldset.module {
  clear: left;
}
fieldset.language {
  clear: none;
  float: left;
  width: 430px;
  margin-right: 5px;
}
fieldset.language h2 {
  height: 25px;
  line-height: 25px;
}
div.item-content div.form-row {
  float:left;
  border-bottom:none;
  overflow: visible;
}
div.inline-group, #main_wrapper, .submit-row {clear:left;}

Fix display of form rows in admin

Fix display of form rows in admin


.command-panel {
  width: 100%;
  background: #515151;
  padding: 3px;
}

.command-panel .preview-list {
  max-height: 300px;
  overflow: auto;
  margin-bottom: 3px;
  position: relative;
  background: #161616;
}

.command-panel .preview-list {
  cursor: default;
}

.command-panel .preview-list li.selected {
  background: #444;
}

.command-panel .preview-list:focus li.selected {
  background: #223555;
}

.command-panel .preview-list .path {
  padding-left: 3px;
  color: #f9ee98;
  margin-right: 1ex;
}

.command-panel .preview-list .preview {
  color: #f6f3e8;
}

.command-panel .preview-list .preview .match {
  background-color: rgba(255,255,255,.25);
  padding: 1px;
}

.command-panel .prompt-and-editor {
  display: -webkit-box;
}

.command-panel .prompt {
  color: white;
  font-weight: bold;
  padding: .2em;
}

.command-panel {
  background: #515151;
  padding: 3px;
}

.command-panel .preview-list {
  max-height: 300px;
  overflow: auto;
  margin-bottom: 3px;
  position: relative;
  background: #161616;
}

.command-panel .preview-list {
  cursor: default;
}

.command-panel .preview-list li.selected {
  background: #444;
}

.command-panel .preview-list:focus li.selected {
  background: #223555;
}

.command-panel .preview-list .path {
  padding-left: 3px;
  color: #f9ee98;
  margin-right: 1ex;
}

.command-panel .preview-list .preview {
  color: #f6f3e8;
}

.command-panel .preview-list .preview .match {
  background-color: rgba(255,255,255,.25);
  padding: 1px;
}

.command-panel .prompt-and-editor {
  display: -webkit-box;
}

.command-panel .prompt {
  color: white;
  font-weight: bold;
  padding: .2em;
}

Remove width 100% from .commandPanel (it was not needed and now command panels border is consistent)


/* hides the native tabs */
#TabsToolbar {
  visibility: collapse;
}

#titlebar {
  visibility: collapse;
}

#sidebar-header {
  visibility: collapse !important;
}

Add treestyle tabs config for firefox

Add treestyle tabs config for firefox


Make cell styling a little nicer.

Make cell styling a little nicer.


body, span, table, td, p, div, li {
	background-color: #1A1A1A !important;
	color: #FFF !important;
}

a, a span {
	color: #319DC5 !important;
	background-color: #1A1A1A !important;
}

a:visited, a:visited span {
	color: #319DC5 !important;
	background-color: #1A1A1A !important;
}

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

blockquote *, pre *, code * {
    background-color: #4C4C4C !important;
}

.NB-story > table {
    background-color: #4C4C4C !important;
}

body, span, table, td, p, div, li {
	background-color: #1A1A1A !important;
	color: #FFF !important;
}

a, a span {
	color: #319DC5 !important;
	background-color: #1A1A1A !important;
}

a:visited, a:visited span {
	color: #319DC5 !important;
	background-color: #1A1A1A !important;
}

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

blockquote *, pre *, code * {
    background-color: #4C4C4C !important;
}

blockquote a, blockquote a span {
    background-color: #4C4C4C !important;
}

.NB-story > table {
    background-color: #4C4C4C !important;
}

Fix background of links in blockquotes for dark theme.


.gitgraph-tooltip {
  position: absolute;
  width: 400px;
  height: 20px;
  line-height: 20px;
  padding: 10px;
  font-size: 14px;
  text-align: center;
  color: #333;
  background: #EEE;
  border-radius: 5px;
  margin-left: 25px;
  margin-top: -15px;
}
.gitgraph-tooltip:after {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent #EEEEEE transparent transparent;
  top: 10px;
  left: -20px;
}

.gitgraph-tooltip {
  position: absolute;
  margin-top: -15px;
  margin-left: 25px;
  padding: 10px;
  border-radius: 5px;
  background: #EEE;
  color: #333;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
}

.gitgraph-tooltip:after {
  position: absolute;
  top: 10px;
  left: -20px;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent;
  border-right-color: #EEE;
  content: "";
}

Refactor and reorganize the CSS a bit

Refactor and reorganize the CSS a bit


* {
  font-family: 'Cutive mono', monospace;
}

main {
  margin-top: 5em;
  margin-bottom: 5em;
}

.blog-header {
  width: 50%;
  text-align: center;
  line-height: 10px;
}

.blog-header h4 {
  font-style: italic;
}

.blog-post {
  width: 50%;
  text-align: justify;
  font-size: 1.3em;
}

#edit {
  font-style: italic;
}

* {
  font-family: 'Cutive mono', monospace;
}

main {
  margin-top: 5em;
  margin-bottom: 5em;
}

.blog-header {
  width: 50%;
  margin: auto;
  text-align: center;
  line-height: 10px;
}

.blog-header h4 {
  font-style: italic;
}

.blog-post {
  width: 50%;
  margin: auto;
  text-align: justify;
  font-size: 1.3em;
}

#edit {
  font-style: italic;
}

Make margin auto for header and blog post


.Page {
  background-color: #f6f1f1;
  position: relative;
  z-index: var(--layer-page);
  margin-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
  box-sizing: border-box;
  box-shadow: 0 0 28px 0 rgba(30, 30, 30, 0.3);
  padding-bottom: 100px;
  overflow: hidden;

  @media (--medium) {
    margin-top: 0;
    margin-left: 180px;
    min-height: 100vh;
  }

  &__heading {
    margin: 0;
    padding-top: 0.75rem;
    margin-bottom: 1.25rem;
  }
}

.Page {
  background-color: #f6f1f1;
  position: relative;
  margin-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
  box-sizing: border-box;
  box-shadow: 0 0 28px 0 rgba(30, 30, 30, 0.3);
  padding-bottom: 100px;
  overflow: hidden;

  @media (--medium) {
    margin-top: 0;
    margin-left: 180px;
    min-height: 100vh;
  }

  &__heading {
    margin: 0;
    padding-top: 0.75rem;
    margin-bottom: 1.25rem;
  }
}

Fix Player component hiding behind header in Safari


ul.timeline {
    list-style-type: none;
    position: relative;
    margin-top: 40px;
}

ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 9px;
    width: 2px;
    height: 100%;
    z-index: 400;
}

ul.timeline > li {
    margin: 10px 0;
    margin-top: 20px;
    padding-left: 30px;
}

ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #0155A3;
    left: 0px;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    z-index: 400;
}

table.dataframe {
    font-size: 14px;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table.dataframe td, table.dataframe th {
    padding: 2px 10px 2px 10px;
    border-style: solid 1px black;
}

ul.timeline {
    list-style-type: none;
    position: relative;
    margin-top: 40px;
}

ul.timeline:before {
    content: ' ';
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 9px;
    width: 2px;
    height: 100%;
    z-index: 400;
}

ul.timeline > li {
    margin: 10px 0;
    margin-top: 20px;
    padding-left: 30px;
}

ul.timeline > li:before {
    content: ' ';
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #0155A3;
    left: -3px;
    width: 20px;
    height: 20px;
    margin-top: 0px;
    z-index: 400;
}

table.dataframe {
    font-size: 14px;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table.dataframe td, table.dataframe th {
    padding: 2px 10px 2px 10px;
    border-style: solid 1px black;
}

Improve outline of blue circle on project page


.navbar-default .navbar-brand {
    font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, cursive;
    font-weight: bold;
    color: white;
}

header {
    background-image: none;
    background-color: #666666;
}

.intro-heading {
    color: #880000;
}

#services-button {
    background-color: #442369;
    border-color: #442369;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus  {
    color: #bb0000;
}

.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
    color: #bb0000;
}

.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a {
    background-color: #bb0000;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle {
    background-color: #bb0000;
    border-color: #bb0000;
}

Update color for buttons in mobile/narrow browser window modes


/*
*= require datatables/dataTables.bootstrap
*
*optional add '=' enable
* require datatables/extensions/AutoFill/autoFill.bootstrap
* require datatables/extensions/Buttons/buttons.bootstrap
* require datatables/extensions/ColReorder/colReorder.bootstrap
* require datatables/extensions/FixedColumns/fixedColumns.bootstrap
* require datatables/extensions/FixedHeader/fixedHeader.bootstrap
* require datatables/extensions/KeyTable/keyTable.bootstrap
* require datatables/extensions/Responsive/responsive.bootstrap
* require datatables/extensions/RowReorder/rowReorder.bootstrap
* require datatables/extensions/Scroller/scroller.bootstrap
* require datatables/extensions/Select/select.bootstrap
*/

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  white-space: nowrap
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
  position: relative;
  bottom: -2px;
  left: 5px;
  display: inline-block;
}

Move playlist sorting icons next to header titles


/* Google web search tweak */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("https://www.google.com/search"), url-prefix("https://www.google.co.jp/search") {
  .mw #center_col { width: 46em !important; }
  .mw .s { max-width: 45em !important; line-height: 1.5 !important;  }

  .mw #rhs { margin-left: 62em !important; }
  .mw #nyc { margin-left: 55em !important; }

  /* ChillingEffects */
  .mw .mfr   { font: x-small/1.4 sans-serif !important; opacity: 0.6 !important; }
  .mw .mfr i { font-style: normal !important; }

  /* Hacked */
  .mw .slp a.fl { color: #e00 !important; font-weight: bold !important; background: #fee !important; }

  /* Missing words and/or Recently visited page*/
  .mw ._Tib   { font: bold large/2 sans-serif !important; }
  .mw ._Tib s { text-decoration: none !important; }
}

/* Google web search tweak */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("https://www.google.com/search"), url-prefix("https://www.google.co.jp/search") {
  .mw #center_col { width: 46em !important; }
  .mw .s { max-width: 45em !important; line-height: 1.5 !important;  }

  .mw #rhs { margin-left: 62em !important; }
  .mw #nyc { margin-left: 55em !important; }

  /* ChillingEffects */
  .mw .mfr   { font: x-small/1.4 sans-serif !important; opacity: 0.6 !important; }
  .mw .mfr i { font-style: normal !important; }

  /* Missing words and/or Recently visited page*/
  .mw ._Tib   { font: bold large/2 sans-serif !important; }
  .mw ._Tib s { text-decoration: none !important; }
}

Remove the feature to emphasize the hacked messages

It causes some false positives of an element.


mat-icon {
  font-size: 40px;
  width: 40px;
  height: 40px;
}

mat-icon.clickable:hover {
  background: #EEEEEE;
  cursor: pointer;
}

#player-container {
  text-align: center;
  margin: auto;
}

#waveform {
  position: relative;
}

#controls {
  display: flex;
}

#duration {
  flex: 1 1 100%;
  font-size: 28px;
  font-weight: 550;
  line-height: 48px;
  padding: 0.2rem 0.8rem 0.2rem 0.8rem;
  vertical-align: middle;
  text-align: right;
}

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

mat-icon.clickable:hover {
  background: #EEEEEE;
  cursor: pointer;
}

#player-container {
  text-align: center;
  margin: auto;
}

#waveform {
  position: relative;
}

#controls {
  display: flex;
}

#duration {
  flex: 1 1 100%;
  font-size: 28px;
  font-weight: 550;
  line-height: 48px;
  padding: 0.2rem 0.8rem 0.2rem 0.8rem;
  vertical-align: middle;
  text-align: right;
}

Disable user-select for mat buttons

Disable user-select for mat buttons


h3, h4 {color: #EA9308;}
a {color: #108BBF;}
.information {background: #daeaee;}
.question {background: #e2daee;}
.error {background: #eedada;}
.warning {background: #eee7da;}
.spoiler {background: #EEE;}

Add basic coloration for custom blocks

Add basic coloration for custom blocks


.tile--people_in_space {
    width: 12.4em;
    height: 17.2em;
}

.tile--people_in_space .tile__media {
    height: 12em;
}

.tile--people_in_space  .tile__media__img {
    margin-top: 1.6em;
    border-radius: 100%;
}

.tile--people_in_space .tile__body {
    padding: .3em 1em;
}

.tile--people_in_space  .tile__title {
    text-align: center;
    font-size: 1.4em;
    font-weight: 400;
    height: 2.5em;
}

.tile.tile--people_in_space {
    width: 14em;
    height: 17em;
    padding-top: 1.5em;
}

.tile--people_in_space .tile__media {
    height: 11em;
    width: 11em;
    border-radius: 100%;
    margin-bottom: 0.5em;
}

.tile--people_in_space .tile__body {
    padding: .3em 1em;
}

.tile--people_in_space  .tile__title {
    text-align: center;
    font-size: 1.4em;
    font-weight: 400;
    height: 2.5em;
}

Update CSS, Making rounded edges

PeopleInSpace: Update CSS, Making rounded edges


html,body {
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	font-family:Arial,Helvetica,sans-serif;
}

#mapDiv {
	padding:0;
	margin:0;
	width:100%;
	height:100%;
}

.esriRtl label {
/*Example of a rule that will be applied if the app is viewed in a browser wtih a RTL locale like Hebrew or Arabic.*/
}

html,body {
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	font-family:Arial,Helvetica,sans-serif;
}

#mapDiv {
	padding:0;
	margin:0;
	width:100%;
	height:100%;
}

.esriRTL label {
/*Example of a rule that will be applied if the app is viewed in a browser wtih a RTL locale like Hebrew or Arabic.*/
}

Fix case of esriRTL class style example

Fix case of esriRTL class style example


html {
  height: 100%;
  max-height: 100%;
  font-size: 25px;
}

body {
  /* to cover entire space, always */
  margin: 0;
  min-height: 100%;
  /* grid setup */
  display: grid;
  grid-template: auto / 1fr [content]min-content 1fr;
  grid-row-gap: 15px;
  align-content: space-between;
  /* colors, text, extra */
  background-color: #dedede;
}

/* meta class to format the content bubbles */
.content {
  /* grid */
  grid-column: content;
  /* color */
  background-color: #fff;
  box-shadow: 0 0 12px 1px rgba(42, 42, 42, 0.2);
  /* look */
  border-radius: 10px;
  /* we need to ensure a width */
  width: 1200px;
}

/* Header section: title, subtitle, navigation */
.header {
  /* ensure text is centered here */
  text-align: center;
}

/* To be replaced with text at a later time */
.footer {
  text-align: center;
}

/* Article contents */
.article {
}

/* Responsive design here, for mobile only */
@media (max-width: 650px) {
  body {
    grid-template: auto / [content]1fr;
  }

  .content {
    width: 100%;
  }
}

html {
  height: 100%;
  max-height: 100%;
  font-size: 25px;
}

body {
  /* to cover entire space, always */
  margin: 0;
  min-height: 100%;
  /* grid setup */
  display: grid;
  grid-template: auto / 1fr [content]min-content 1fr;
  grid-row-gap: 15px;
  align-content: space-between;
  /* colors, text, extra */
  background-color: #dedede;
}

/* meta class to format the content bubbles */
.content {
  /* grid */
  grid-column: content;
  /* color */
  background-color: #fff;
  box-shadow: 0 0 12px 1px rgba(42, 42, 42, 0.2);
  /* look */
  border-radius: 10px;
  /* we need to ensure a width */
  width: 1200px;
  /* set a max width for very wide screens */
  max-width: 1500px;
}

/* Header section: title, subtitle, navigation */
.header {
  /* ensure text is centered here */
  text-align: center;
}

/* To be replaced with text at a later time */
.footer {
  text-align: center;
}

/* Article contents */
.article {
}

/* Responsive design here, for mobile only */
@media (max-width: 650px) {
  body {
    grid-template: auto / [content]1fr;
  }

  .content {
    width: 100%;
  }
}

Set max width for very wide screens

Set max width for very wide screens


.user-steps-menu-show,
.user-steps-menu ul.user-steps-menu-list li > a {
	background-color: var(--white-background);
	border-radius: 6px;
	color: var(--dark-text);
	display: inline-block;
	font-size: 18px;
	padding: 11px 0;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}
.user-steps-menu-show,
.user-steps-menu ul.user-steps-menu-list li > .step-active {
	background-color: var(--normal-background);
	color: var(--white-text);
}

.user-steps-menu ul.user-steps-menu-list li > a:hover,
.user-steps-menu ul.user-steps-menu-list li > a:focus,
.user-steps-menu ul.user-steps-menu-list li > a:active {
	background-color: var(--normal-background);
	color: var(--white-text);
}

.user-steps-menu {
	padding-bottom: 4px;
}

.user-steps-menu-item-progress {
	height: 5px;
	width: 0;
	margin-top: 2px;
	background-color: var(--light-background);

}

@media only screen and (max-width: var(--mobile-width)) {
	.user-steps-menu {
		padding-bottom: 11px;
	}
	input[type=checkbox]:checked ~ .user-steps-menu-list li {
		margin-bottom: 4px;
	}
}

Fix VR of responsive view

Fix VR of responsive view


body {
    margin: 0;
    position: absolute;
    font-family: sans-serif;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
}

iframe, textarea {
    flex: 1 0 auto;
    width: 100%;
}

textarea {
    font-family: monospace;
}

Set monospaced font in textarea

Set monospaced font in textarea


html, body
{
height: 100%;
}

#header
{
text-align: center;
}

#logo
{
display: block;
width: 300px;
height: 150px;
margin: 0 auto;
}

#page
{
background-color: #f5f5f5;
color: #000022;
}

#main
{
display:table-row;
}

#navigation
{
display:table-cell;
width: 20%;
background-color: #110011;
color: #0000aa;
border-right: 1px solid #000033;
}

#navigation ul
{
list-style-type: none;
}

#content
{
display:table-cell;
width: 60%;
padding-left: 10px;
padding-right: 10px;
}

#sidebar
{
display:table-cell;
width: 20%;
color: #0000CC;
}

#footer
{
text-align: center;
color: #00bfff;
}

html, body
{
height: 100%;
}

#header
{
text-align: center;
}

#logo
{
display: block;
width: 300px;
height: 150px;
margin: 0 auto;
}

#page
{
background-color: #f5f5f5;
color: #000022;
}

#main
{
display:table-row;
}

#navigation
{
display:table-cell;
width: 20%;
background-color: ##f5f5f5;
color: #0000aa;
border-right: 1px solid #000033;
}

#navigation ul
{
list-style-type: none;
}

#content
{
display:table-cell;
width: 60%;
padding-left: 10px;
padding-right: 10px;
}

#sidebar
{
display:table-cell;
width: 20%;
color: #0000CC;
}

#footer
{
text-align: center;
color: #00bfff;
}

Change background color of navigation bar.


.editor-container {
  height: calc(100vh - 10rem);
}

.transcript-editor {
  overflow-y: scroll;
}

#content > .uk-grid {
  width: 95vw;
}

Define content width in terms of viewport size

Possibly a mistake?


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

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

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

#page-header {
	height: 60px;
}

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

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

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

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

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

#page-header {
	height: 60px;
}

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

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

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

Make sidebar the same color as the header


/*
 *= require spree/frontend
*/

/* Sidebar */
nav#pages .pages-root {
  text-transform: uppercase;
  border-bottom: 1px solid rgb(217, 217, 219);
  margin-bottom: 5px;
  font-size: 14px;
}

Remove the "require spree/frontend" directive from the main css. This will allow Spree applications that use different front end stylesheet to install the extension


html {
  background-image:url(chrome://theme/theme_ntp_background?$1);
  background-color:$2;
  background-position:$3;
  background-repeat:$5;
  overflow:hidden;
}

html[bookmarkbarattached='true'] {
  background-position:$4;
}

html {
  background-image: url(chrome://theme/theme_ntp_background?$1);
  background-color: $2;
  background-position: $3;
  background-repeat: $5;
  height: 100%;
  overflow: auto;
  background-attachment: fixed;
}

html[bookmarkbarattached='true'] {
  background-position: $4;
}

Make themes in the incognito NTP which are bottom-aligned attach to the bottom of the screen, rather than the bottom of the text box.

BUG= http://crbug.com/21543
TEST= Install "Folders" theme. Open incognito window.  Observe that NTP background looks the same as it doesn in normal mode.

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

git-svn-id: http://src.chromium.org/svn/trunk/src@25961 4ff67af0-8c30-449e-8e8b-ad334ec8d88c

Former-commit-id: d5a34f6f686ccf7cd6e280fac44e9c962f69ee5e


/* Copyright (c) 2014, Google Inc. Please see the AUTHORS file for details. */
/* All rights reserved.  Use of this source code is governed by a BSD-style */
/* license that can be found in the LICENSE file. */

@import url("../common/spark_widget.css");

:host {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 20px;
  border: none;
  overflow: hidden;
  cursor: pointer;
}

::content * {
  overflow: hidden;
}

#label,
::content * {
  color: #000;
}

#label,
#description {
  text-transform: uppercase;
}

#description {
  color: #bdbdbd;
  justify-content: flex-end;
}

:host(.active, .selected) #label,
:host(.active, .selected) #description,
:host(.active, .selected) ::content * {
  color: white;
}

:host(.selected) {
  background-color: rgba(66, 129, 244, 0.5);
}

:host(.active) {
  background-color: rgba(66, 129, 244, 1.0);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* Copyright (c) 2014, Google Inc. Please see the AUTHORS file for details. */
/* All rights reserved.  Use of this source code is governed by a BSD-style */
/* license that can be found in the LICENSE file. */

@import url("../common/spark_widget.css");

:host {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 20px;
  border: none;
  overflow: hidden;
  cursor: pointer;
}

::content * {
  overflow: hidden;
}

#label,
::content * {
  color: #000;
}

#label,
#description {
  text-transform: capitalize;
}

#description {
  color: #bdbdbd;
  justify-content: flex-end;
}

:host(.active, .selected) #label,
:host(.active, .selected) #description,
:host(.active, .selected) ::content * {
  color: white;
}

:host(.selected) {
  background-color: rgba(66, 129, 244, 0.5);
}

:host(.active) {
  background-color: rgba(66, 129, 244, 1.0);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

Switch from ALL-CAPS to Title Case for menu items


rect.clickable, .cell {
  cursor: pointer;
}

.background {
  fill: #eee;
}

line {
  stroke: #fff;
}

rect:hover {
  /*fill-opacity: .9 !important;*/
  stroke: black !important;
  stroke-width: 1.5 !important;
  /* Can't use z-index since SVG uses painter model. Must remove and append.
     That's somewhat painful, so we'll settle for some edges of the rectangle
     outline being behind the squares place to the right of and below it.
     This doesn't look that great. We could also try adding a rectangle as the
     final element of the svg and moving that element around as the mouse moves.
  */
}

rect.ignorant {
  fill: yellow !important;
  fill-opacity: .2 !important;
}

#currentPosition_local {
	stroke: white;
	stroke-width: 1.5;
	fill: black;
}

Make clickable cells have hand cursor.

Make clickable cells have hand cursor.


* {
  box-sizing: border-box;
}

:root {
  --page-fg: #333;
  --page-bg: #fff;

  color: var(--page-fg);
  background-color: var(--page-bg);
  font-family: Verdana, sans-serif;
  line-height: 1.4;
  -webkit-hyphens: auto;
  hyphens: auto;
}

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

a,
a:visited {
  color: inherit;
}

dd {
  margin: 0 0 0.5em 4ch;
}

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

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

  h1 {
    margin-top: 0;
  }

  a {
    text-decoration: none;
  }
}

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

@media (prefers-color-scheme: dark) {
  :root {
    --page-fg: #ddd;
    --page-bg: #333;
  }
}

* {
  box-sizing: border-box;
}

:root {
  --page-fg: #333;
  --page-bg: #fff;

  color: var(--page-fg);
  background-color: var(--page-bg);
  font-family: Verdana, sans-serif;
  line-height: 1.4;
  -webkit-hyphens: auto;
  hyphens: auto;
}

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

a,
a:visited {
  color: inherit;
}

dd {
  margin: 0 0 0.5em 4ch;
}

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

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

  h1 {
    margin-top: 0;
  }

  a {
    text-decoration: none;
  }
}

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

@media (prefers-color-scheme: dark) {
  :root {
    --page-fg: #ddd;
    --page-bg: #333;
  }
}

Make padding on bottom big

Make padding on bottom big


body
{
    background-color: #3C3C3C;
    color: #FFF;
    font-family: 'Droid Sans', Arial, Verdana, sans-serif;
}

#navigation
{
    background-color: #121212;
    padding: .5em;
}

#navigation ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#navigation li
{
    /* Fix for IE9 */
    list-style-type:none;
}

h1
{
    /*font-family: BebasNeueRegular, arial, Georgia, serif;*/
    font-family: BebasNeuewebfont, arial, Georgia, serif;
    color: #FFF;
}

a
{
    color: #F88C00;
}

#dirlist
{
    background-color: #121212;
    margin-bottom: 1em;
}

#content .image_normal
{
    max-width: 100%;
    height: 80vh;
}

#imagelarge
{
    text-align: center;
}

img .image_thumbnail
{
}

body
{
    background-color: #3C3C3C;
    color: #FFF;
    font-family: 'Droid Sans', Arial, Verdana, sans-serif;
}

#navigation
{
    background-color: #121212;
    padding: .5em;
}

#navigation ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#navigation li
{
    /* Fix for IE9 */
    list-style-type:none;
}

h1
{
    /*font-family: BebasNeueRegular, arial, Georgia, serif;*/
    font-family: BebasNeuewebfont, arial, Georgia, serif;
    color: #FFF;
}

a
{
    color: #F88C00;
}

#dirlist
{
    background-color: #121212;
    margin-bottom: 1em;
}

#content .image_normal
{
    max-width: 100%;
    max-height: 80vh;
}

#imagelarge
{
    text-align: center;
}

img .image_thumbnail
{
}

Fix for image getting stretched on narrow screen


/** @define block-name; use strict */

.block-name {}
.block-name_mod-name_mod-val {}
.block-name_mod {}
.block-name__elem-name {}
.block-name__elem-name_mod-name_mod-val {}
.block-name__elem_mod {}

.block-name .block-name {}
.block-name_mod-name_mod-val .block-name_mod-name_mod-val {}
.block-name_mod .block-name_mod {}
.block-name__elem-name .block-name__elem-name {}
.block-name__elem-name_mod-name_mod-val .block-name__elem-name_mod-name_mod-val {}
.block-name__elem_mod .block-name__elem_mod {}
.block-name__camelCase {}

Add camelCase test for BEM pattern

Add camelCase test for BEM pattern


/* Base CSS rules */
.comment_blurb {
   margin-top: 20px;
   border-bottom: 0.7px solid #ccc;
}

.comment_blurb:last-of-type {
   border-bottom: none;
}

.author {
   padding-right: 10px;
}

#following_feed {
   display: none;
   margin-bottom: 30px;
}

#subreddits_feed {
   display: none;
   margin-bottom: 30px;
}

.section_title {
   margin-bottom: 20px;
}

/* Subreddit self and comment text */
.md {
   padding-top: 20px;
}

/* Base CSS rules */
.comment_blurb {
   margin-top: 20px;
   border-bottom: 0.7px solid #ccc;
}

.comment_blurb:last-of-type {
   border-bottom: none;
}

.author {
   padding-right: 10px;
}

#following_feed {
   display: none;
   margin-bottom: 30px;
}

#subreddits_feed {
   display: none;
   margin-bottom: 30px;
}

#preferences_page {
   display: none;
   margin-bottom: 30px;
}

.section_title {
   margin-bottom: 20px;
}

/* Subreddit self and comment text */
.md {
   padding-top: 20px;
}

Hide the preferences page on page load

Hide the preferences page on page load


:host {
  display: inline-block;
  min-width: 168px;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 215px;
  -ms-flex: 1 1 215px;
  flex: 1 1 215px;
  flex-basis: 215px;
  -ms-flex-preferred-size: 215px;
  -webkit-flex-basis: 215px;
}

:host >>> .ng-select .ng-select-container .ng-value-container .ng-input {
  padding-bottom: 0;
}

:host >>> .ng-select .ng-select-container .ng-value-container .ng-input > input {
  padding: 0;
  line-height: 28px;

:host >>> .max-select-one .ng-value-icon {
  display: none !important;
}

:host >>> .max-select-one .ng-arrow-wrapper {
  display: none !important;
}

:host {
  display: inline-block;
  min-width: 168px;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 215px;
  -ms-flex: 1 1 215px;
  flex: 1 1 215px;
  flex-basis: 215px;
  -ms-flex-preferred-size: 215px;
  -webkit-flex-basis: 215px;
}

:host >>> .ng-select .ng-select-container .ng-value-container .ng-input {
  padding-bottom: 0;
}

:host >>> .ng-select .ng-select-container .ng-value-container .ng-input > input {
  padding: 0;
  line-height: 28px;
}

:host >>> .max-select-one .ng-value-icon {
  display: none !important;
}

:host >>> .max-select-one .ng-arrow-wrapper {
  display: none !important;
}

Fix syntax error from conflict resolution