#itelic-renewal-reminder-scheduling label {
	display: block;
}

#itelic-renewal-reminder-scheduling input[type="text"],
#itelic-renewal-reminder-scheduling input[type="email"],
#itelic-renewal-reminder-scheduling input[type="password"],
#itelic-renewal-reminder-scheduling input[type="number"],
#itelic-renewal-reminder-scheduling input[type="url"],
#itelic-renewal-reminder-scheduling textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 10px;
	border: 1px solid #d6d6d6;
	border-radius: 2px;
	font-size: 16px;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	line-height: 1.2;
	color: #4e5559;
}

#itelic-renewal-reminder-scheduling input {
	font-size: 24px;
}

#itelic-renewal-reminder-scheduling textarea {
	line-height: 1.6;
}

#save-post {
	margin-top: 10px;
}

#minor-publishing-actions {
	padding: 0 10px 0 10px;
}

#minor-publishing-actions .spinner {
	display: none;
}

#visibility {
	display: none;
}

.curtime {
	display: none;
}

Simplify renewal reminder publish meta box Hide the visibility settings and post published date settings from the publish meta box. Additionally, hide the spinner completely so extra whitespace isn't displayed in the meta box.


.polymorphic-add-choice {
  position: relative;
}

.polymorphic-add-choice a:focus {
  text-decoration: none;
}

.polymorphic-type-menu {
  position: absolute;
  top: 2.2em;
  left: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px;
  background-color: #fff;
}

.polymorphic-type-menu ul {
  padding: 2px;
  margin: 0;
}

.polymorphic-type-menu li {
  list-style: none inside none;
  padding: 4px 8px;
}

.inline-related.empty-form {
  /* needed for grapelli, which uses grp-empty-form */
  display: none;
}

Add explicit .empty-form hiding for grapelli


.table-container {
	width: 100%;
}

table,
.tabs {
	margin: 0 auto;
	width: 70%;
	border-collapse: collapse;
}

.active {
	color: var(--complementary-purple);
}

.tabs:hover {
	cursor: pointer;
}

tr {
	border-top: 2px solid var(--orange);
}

td,
th,
.tabs {
	padding: 10px;
}

thead tr {
	text-align: left;
	border-top: none;

}

.rsvp-link {
	padding: 5px;
	color: inherit;
	border-radius: 5px;
	text-decoration: none;
	border:  2px solid var(--blue);
}

.rsvp-link:hover {
	background:  var(--blue);
}

@media (max-width: 768px) {
	table, .tabs {
		width: 95%;
	}

	table {
		font-size: 16px;
	}

	.tabs {
		font-size: 24px;
	}
}

Fix mobile width for shows table

Fix mobile width for shows table


.last-updated{
  margin-bottom: 1em;
}

table.index{
  text-align: center;
}

table.index th{
  border-bottom: 1px solid lightgrey;
  text-align: center;
  padding: 0 10px;
}

table.index td{
  text-align: center;
  padding: 0 0.5em;
}

.glyphicon-ok{
  color: green;
}

.glyphicon-remove{
  color: red;
}

table.edit-form td{
  padding: 0.25em 1em;
}

input[type=checkbox]{
  transform: scale(2,2);
}

input[type=radio]{
  transform: scale(2,2);
}

input.btn.btn-primary.submit{
  font-size: 30px;
}

.last-updated{
  margin-bottom: 1em;
}

table.index{
  text-align: center;
}

table.index th{
  border-bottom: 1px solid lightgrey;
  text-align: center;
  padding: 0 10px;
}

table.index td{
  text-align: center;
  padding: 0 0.5em;
}

.glyphicon-ok{
  color: green;
}

.glyphicon-remove{
  color: red;
}

table.edit-form td{
  padding: 0.25em 1em;
}

input[type=checkbox]{
  transform: scale(2,2);
}

input[type=radio]{
  transform: scale(2,2);
}

select {
  width: 10em;
}

input.btn.btn-primary.submit{
  font-size: 30px;
}

Select boxes are now all the same size

Select boxes are now all the same size


.navbar-brand {
    padding-top: 5px;
    padding-left: 35px;
}
.navbar-brand>img {
    float: left;
    width: 150px;
}

.navbar-brand {
    padding-top: 7px;
    padding-left: 35px;
}
.navbar-brand>img {
    float: left;
    width: 150px;
}

Update CSS with new logo padding

Update CSS with new logo padding


/* Copyright (c) 2013, 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("packages/bootjack/css/bootstrap.css");
@import url("packages/bootjack/css/bootstrap-theme.css");

body {
  bottom: 0;
  display: flex;
  flex-flow: column;
  left: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

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

#modalBackdrop {
  display:none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.6;
  z-index: 500;
}

/* Copyright (c) 2013, 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. */

body {
  bottom: 0;
  display: flex;
  flex-flow: column;
  left: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

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

#modalBackdrop {
  display:none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.6;
  z-index: 500;
}

Remove the unneeded and duplicating Bootstrap CSS inclusions


@import url('sphinxdoc.css');

.section h1 {
  font-size: 1.7em;
}

.section h2 {
  font-size: 1.4em;
  margin-top: 1.0em;
  margin-bottom: 0.1em;
  padding-top: 0.2em;
  padding-bottom: 0.3em;
  padding-left: 0.3em;
  border-bottom: thin solid gray;
  border-left: thick solid gray;
}

.section h3 {
  font-size: 1.3em;
  margin-top: 1.0em;
  margin-bottom: 0.1em;
  padding-bottom: 0.2em;
  border-bottom: thin solid gray;
}

.section h4 {
  font-size: 1.2em;
  margin-top: 1.0em;
  margin-bottom: 0.1em;
  padding-bottom: 0.1em;
  border-bottom: thin dotted gray;
}

.section h5 {
  font-size: 1.1em;
  margin-top: 1.0em;
  margin-bottom: 0.1em;
  padding-bottom: 0.1em;
  border-bottom: thin dotted lightgrey;
}

.section caption {
  margin-top: 1em;
  margin-bottom: 0.3em;
}

div.attention p.admonition-title {
  background-color: #EE9816
}

Modify attention directive block color

Modify attention directive block color


.autocomplete {
	position: relative;
	margin: 0;
}

.autocomplete ul {
	width: 100%;
	z-index: 1;
	position: absolute;
	left: 0;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	background-color: white;
	color: black;
	padding: inherit;
}

.autocomplete li{
	padding: 4px 12px;
	list-style: none;
	text-align: left;
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.autocomplete li:hover {
	background-color: #ccc;
}

.autocomplete {
	position: relative;
	margin: 0;
}

.autocomplete ul {
	width: 90%;
	z-index: 1;
	position: absolute;
	left: 0;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	background-color: white;
	color: black;
	padding: 0;
	margin-left: 15px;
}

.autocomplete li {
	padding: 4px 12px;
	list-style: none;
	text-align: left;
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.autocomplete li:hover {
	background-color: #ccc;
}

@media (max-width: 767px) {
	.autocomplete ul {
		width: 89%;
	}
}

@media (min-width: 768px) and (max-width: 990px) {
	.autocomplete ul {
		width: 95%;
	}
}

Fix for autocomplete selector rendering issue


.input {
  width: 100%;
  height: 45px;
  background-color: var(--main-background-color);
  color: var(--main-font-color);
  font-family: var(--main-font);
  font-size: 1.5em;
  border: 0;
  outline: none;
  padding: 0 10px;
  line-height: 60px;
  box-sizing: border-box;
  background: transparent;
  white-space: nowrap;
  -webkit-app-region: drag;
  -webkit-user-select: none;
}

.input {
  width: 100%;
  height: 45px;
  color: var(--main-font-color);
  font-family: var(--main-font);
  font-size: 1.5em;
  border: 0;
  outline: none;
  padding: 0 10px;
  line-height: 60px;
  box-sizing: border-box;
  background: transparent;
  white-space: nowrap;
  -webkit-app-region: drag;
  -webkit-user-select: none;
}

Remove unnecessary input background (may cause theming issues in future)


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

.icon-access-time {
  float: left;
  margin: 1px 2px 0 3px;
  opacity: 0.7;
  font-size: 12px;
}

.icon-keyboard-arrow-down, .icon-clear{
  color: #ffffff;
  background: #bbbbbb;
  font-size: 22px;
  font-weight: 500;
  padding: 5px 4px 5px 4px;
  width: 25px;
  cursor: pointer;
}
.icon-keyboard-arrow-down{
  position: absolute;
  box-shadow: 0 -1px 1px rgba(5, 5, 5, 0.3);
}
.icon-clear{
  position: relative;
}

.parent {
  width: 100%;
  height: 100%;
  outline: 1px solid black;

  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-flow: column nowrap;
}

#root {
  position: relative;
  height: 100%;
}

#usermenu {
  margin: 10px; text-align: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-flow: row nowrap;
}

#usermenu>a {
  flex: 50px 1 1;
  align-self: flex-start;
  text-align: center;
  color: #fff;
  background-color: darkslategray;
  outline: 2px solid papayawhip;
  padding: 5px;
  text-decoration: none;
}
#usermenu>a:hover {
  background-color: darkolivegreen;
}

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

.parent {
  width: 100%;
  height: 100%;
  outline: 1px solid black;

  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-flow: column nowrap;
}

#root {
  position: relative;
  height: 100%;
}

#usermenu {
  margin: 10px; text-align: center;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-flow: row nowrap;
}

#usermenu>a {
  flex: 50px 1 1;
  align-self: flex-start;
  text-align: center;
  color: #fff;
  background-color: darkslategray;
  outline: 2px solid papayawhip;
  padding: 5px;
  text-decoration: none;
}
#usermenu>a:hover {
  background-color: darkolivegreen;
}

Remove unused styles from xmpp example

Remove unused styles from xmpp example


/* major page sections */
.main-column {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.content {
  margin-bottom: 50px;
}

footer {
  text-align: center;
  font-size: 12px;
  width: 100%;
  position: absolute;
  bottom: 0;
  margin-bottom: 15px;
  padding-bottom: 0;
}

/* page content */
.email {
  display: none;
}

/* projects page */
.well {
  padding: 0;
}

.well a {
  color: #999;
  text-decoration: none;
  padding: 19px;
  display: block;
  width: 100%;
  height: 100%;
}

.well:hover {
  background-color: #283033;
}

.well .project-title {
  color: #33b5e5;
  font-size: 31.5px;
  line-height: 31.5px;
}

.well .version {
  float: right;
}

.sidebar a {
  background-color: #131517;
}

@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    width: 115px;
  }
}

/* major page sections */
.main-column {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.content {
  margin-bottom: 50px;
}

footer {
  text-align: center;
  font-size: 12px;
  width: 100%;
  position: absolute;
  bottom: 0;
  margin-bottom: 15px;
  padding-bottom: 0;
}

/* page content */
.email {
  display: none;
}

/* projects page */
.well {
  padding: 0;
}

.well a {
  color: #999;
  text-decoration: none;
  padding: 19px;
  display: block;
}

.well:hover {
  background-color: #283033;
}

.well .project-title {
  color: #33b5e5;
  font-size: 31.5px;
  line-height: 31.5px;
}

.well .version {
  float: right;
}

.sidebar a {
  background-color: #131517;
}

@media (min-width: 768px) {
  .sidebar {
    position: fixed;
    width: 115px;
  }
}

Remove some unnecessary width and height properties


#header {
  background-color:black;
  color:white;
  text-align:center;
  padding:5px;
}

#nav {
  line-height:30px;
  background-color:#eeeeee;
  height:300px;
  width:100px;
  float:left;
  padding:5px;
  text-align: center;
}

#section {
  font-family: Roboto
  width:350px;
  float:left;
  padding:10px;
}

#footer {
  font-family: Roboto;
  background-color: black;
  color: white;
  clear:both;
  text-align:center;
  height: 5em;
  width: 100%;
}

a {
  color: inherit;
}

#header {
  background-color:black;
  color:white;
  text-align:center;
  padding:5px;
}

#nav {
  line-height:30px;
  background-color:#eeeeee;
  height:300px;
  width:100px;
  float:left;
  padding:5px;
  text-align: center;
}

#section {
  font-family: Roboto
  width: 80%;
  float:left;
  padding:10px;
}

#footer {
  font-family: Roboto;
  background-color: black;
  color: white;
  clear:both;
  text-align:center;
  height: 5em;
  width: 100%;
}

a {
  color: inherit;
}

Increase section width to 80%

Increase section width to 80%


@font-face {
    font-family: "oswald";
    src: url("../res/fonts/oswald.ttf") format("opentype");
}

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

.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;
  transform: translate(-50%, -50%);
}

@font-face {
    font-family: "oswald";
    src: url("../res/fonts/oswald.ttf") format("opentype");
}

ul.table-view.recpie-table {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

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

ul.recpie-table li:nth-child(odd) {
  background-color: rgba(0, 164, 152, 0.15);
}

ul.recpie-table li:nth-child(even) {
  background-color: white;
}

.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;
  transform: translate(-50%, -50%);
}

Add new styles for home

Add new styles for home


.language-switch {
    margin: auto 1em 1em auto;
    float: right;
}
p {
    text-align: justify;
}
img {
    max-width: 100%;
}
.content .alert {
    margin-top: 16px;
}
.content .alert .close {
    margin-left: 8px;
}

.language-switch {
    margin: auto 1em 1em auto;
}
@media(min-width: 992px) {  /* md or up */
    .language-switch {
        float: right;
    }
}
p {
    text-align: justify;
}
img {
    max-width: 100%;
}
.content .alert {
    margin-top: 16px;
}
.content .alert .close {
    margin-left: 8px;
}

Put select in own row on small screens

Put select in own row on small screens


a[href ^= "http"]:not([href*="//sleepdata.org"]) {
  color: #f0ad4e;
  border-color: #eea236;
}

a[href ^= "http"]:not([href*="//sleepdata.org"]):hover {
  color: #ed9c28;
  border-color: #d58512;
}

a[href ^= "http"]:not([href*="//sleepdata.org"]):after {
  /*content: ' »';*/
}

a[href ^= "http"]:not([href*="//sleepdata.org"]) {
  color: #5bc0de;
  border-color: #46b8da;
}

a[href ^= "http"]:not([href*="//sleepdata.org"]):hover {
  color: #31b0d5;
  border-color: #269abc;
}

Use a less bright color for external links


* {
  background-color: #a3a3c2;
  border: 1px solid black;
}

h1, h2, h3 {
  font-weight: 400;
}

.App {
  text-align: center;
  background-color: #a3a3c2;
  color: #f2f2f2;
}

.App-header {
  background-color: transparent;
  height: 150px;
  padding: 10px;
  color: white;
  /*width: 100%;*/
}

.App-header h1 {
  font-size: 5em;
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  color: #f2f2f2;
}

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

.body {
  display: inline-block;
  height:100vh;
  overflow: scroll;
  width: 100%;
}

.hidden {
  display: none;
}

.button {
  background: white;
  color: black;
}

.back {
  color: #ffe6cc;
}

.back:hover {
  color: black;
}

a {
  text-decoration: none;
  background-color: transparent;
  color: #ffe6cc;
}

a:hover {
  color: black;
  background-color: transparent;
}

* {
  background-color: #a3a3c2;
}

h1, h2, h3 {
  font-weight: 400;
}

.App {
  text-align: center;
  background-color: #a3a3c2;
  color: #f2f2f2;
}

.App-header {
  background-color: transparent;
  height: 150px;
  padding: 10px;
  color: white;
  /*width: 100%;*/
}

.App-header h1 {
  font-size: 5em;
  font-family: 'Open Sans', sans-serif;
  font-weight: 100;
  color: #f2f2f2;
}

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

.body {
  display: inline-block;
  height:100vh;
  overflow: scroll;
  width: 100%;
}

.hidden {
  display: none;
}

.button {
  background: white;
  color: black;
}

.back {
  color: #ffe6cc;
}

.back:hover {
  color: black;
}

a {
  text-decoration: none;
  background-color: transparent;
  color: #ffe6cc;
}

a:hover {
  color: black;
  background-color: transparent;
}

Remove border added for troubleshooting

Remove border added for troubleshooting


body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  background-color: #eee;
}

#chart_container {
        font-family: Arial, Helvetica, sans-serif;
}

#chart {
        position: relative;
        width: 80%;
}

svg {
  border: 1px solid #aaa;
  margin-bottom: 5px;
}

#legend {
        display: inline-block;
        vertical-align: top;
        margin: 0 0 0 0px;
        background-
}

input:not([type=submit]):not([type=file]):not([type=button]) {
  border: 1px solid #aaa;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

input:focus {
        border:solid 2px #73A6FF;
}

.grouping-box {
  position: relative;
  padding: 5px;
  margin: 2px;
  background-color: #fff;
  border: 1px solid #ccc;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

Add CSS styles for graphing frontend.

Add CSS styles for graphing frontend.


.root {
  font-weight: 700;
  text-decoration: underline;
}

.root.blue {
  color: #2421ab;
}

.root.white {
  color: #fcfcfc;
}

.root.regular {
  font-size: 16px;
  line-height: 20px;
}

.root.large {
  font-size: 20px;
  line-height: 28px;
}

@media (min-width: 321px) {
  .root.regular {
    font-size: 20px;
    line-height: 28px;
  }

  .root.large {
    font-size: 28px;
    line-height: 40px;
  }
}

.root {
  position: relative;
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
}

.root::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 2px solid currentColor;
  transform: translateY(1px);
  transition: transform 0.2s;
}

.root.blue {
  color: #2421ab;
}

.root.white {
  color: #fcfcfc;
}

.root.regular {
  font-size: 16px;
  line-height: 20px;
}

.root.large {
  font-size: 20px;
  line-height: 28px;
}

@media (min-width: 321px) {
  .root::after {
    border-bottom: 3px solid currentColor;
  }

  .root:hover::after {
    transform: translateY(2px);
    transition: transform 0.2s;
  }

  .root.regular {
    font-size: 20px;
    line-height: 28px;
  }

  .root.large {
    font-size: 28px;
    line-height: 40px;
  }
}

Add hover with underline to CallToAction


/*.list {
  width: 200%;
}*/

.list + .list {
  margin-top: calc(var(--gutter) * 4);
}

.list-content a {
  /* enable rotation */
  display: inline-block;
}

@media (--w-l-800) {
  .list-title {
    text-align: right;
    border-top: 0.1em solid currentColor;
    padding-top: var(--gutter);
  }
}

@media (--w-800) {
  .list-content a:hover {
    transform: rotate(180deg);
  }

    .list-content a:hover::before,
    .list-content a:hover::after {
      position: absolute;
      /*top: 0;*/
      /*right: 0;*/
      bottom: 0;
      /*left: 0;*/

      transition: var(--hover-off);
    }

    .list-content a:hover::before {
      content: ">";
      left: -0.75em;
    }

    .list-content a:hover::after {
      content: "<";
      right: -0.75em;
    }
}

/*.list {
  width: 200%;
}*/

.list + .list {
  margin-top: calc(var(--gutter) * 4);
}

.list-content a {
  /* enable rotation */
  display: inline-block;
}

@media (--w-l-800) {
  .list-title {
    text-align: right;
    border-top: 0.1em solid currentColor;
    padding-top: var(--gutter);
  }
}

@media (--w-800) {
  .list-content a:hover {
    transform: rotatex(180deg);
  }

    .list-content a:hover::before,
    .list-content a:hover::after {
      position: absolute;
      /*top: 0;*/
      /*right: 0;*/
      bottom: 0;
      /*left: 0;*/

      transition: var(--hover-off);
    }

    .list-content a:hover::before {
      content: ">";
      left: -0.75em;
    }

    .list-content a:hover::after {
      content: "<";
      right: -0.75em;
    }
}

Update list item hover styling to flip vertically


@import "fyndiq-styles-colors/colors.css";

.input {
  padding: 12px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  font-size: 15px;

  &:invalid {
    box-shadow: none;
  }
}

.presetWrapper {
  display: flex;

  & .input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  & .presetDropdownButton {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 100%;
  }
}

@import "fyndiq-styles-colors/colors.css";

.input {
  padding: 0 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  font-size: 15px;
  line-height: 48px;

  &:invalid {
    box-shadow: none;
  }
}

.presetWrapper {
  display: flex;

  & .input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  & .presetDropdownButton {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 100%;
  }
}

:eyes: Use line-height instead of vertical padding


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

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

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

.responsive-object {
	padding-bottom: 0px !important;
}

Remove the responsive CSS for now.

Remove the responsive CSS for now.

To work around Instagram embeds disappearing.
https://github.com/torchbox/wagtail/issues/1495


/* MListIndexStyle : MWidgetStyle */
MListIndexStyle {
    shortcut-object-name: "whiteFont";

    background-opacity: 0.5;
    background-image: meegotouch-fastscroll-background 12px 12px 12px 12px;
    preferred-size: 7mm  100%;

    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
}

#whiteFont {
    color: $COLOR_INVERTED_FOREGROUND;
}

/* MListIndexStyle : MWidgetStyle */
MListIndexStyle {
    shortcut-object-name: "whiteFont";

    background-opacity: 0.5;
    background-image: meegotouch-fastscroll-background 12px 12px 12px 12px;
    preferred-size: 7mm  100%;

    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
}

#whiteFont {
    color: $COLOR_INVERTED_FOREGROUND;

    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
}

Changes: Remove margins from list index shortcut labels.

RevBy: TBD


#sidebar .button, #header .button {
  color: #000000;
}

#header a { color: #FFFFFF; font-weight: bold; text-decoration: none; font-size: 14px; }

Make the headerbar and the sidebar buttons more similar


/* ===== Primary Styles ========================================================
   Author:
   ========================================================================== */

#front_page_image { height: 640px; overflow: hidden; }

.carousel-inner { text-align: center }

.carousel .item > img { display: inline-block; margin-top: 30px }

/* Make link text black instead of blue. */
a {
  color: #000000;
}

a:hover {
  color: #000000;
}

/* Change the active element in the right hand navbar to grays. */
.nav-list > .active > a,
.nav-list > .active > a:hover {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  background-color: #888888;
}

.nav .nav-header {
  text-transform: none;
  font-weight: bold;
  font-variant: small-caps;
  text-indent: -0.5em;
  font-size: 21px;
  line-height: 27px;
  color: #888888;
}

/* ===== Primary Styles ========================================================
   Author:
   ========================================================================== */

#front_page_image { height: 640px; overflow: hidden; }

.carousel-inner { text-align: center }

.carousel .item > img { display: inline-block; margin-top: 30px }

/* Make link text black instead of blue. */
a {
  color: #000000;
}

a:hover {
  color: #000000;
}

/* Change the active element in the right hand navbar to grays. */
.nav-list > .active > a,
.nav-list > .active > a:hover {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  background-color: #888888;
}

.nav .nav-header {
  text-transform: none;
  font-weight: bold;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  text-indent: -0.5em;
  font-size: 21px;
  line-height: 27px;
  color: #888888;
}

Set the title on the RH navlist to be slightly outdented so that it stands out a little more from the gallery names below it.


body {
    background: black;
    color: white;
    height: 100%;
    font-size: x-large;
}

p {
    line-height: 70%
}

#time {
    text-align: center;
    font-size: xx-large;
}

#left {
    position: fixed;
    left: 0;
    width: 30%
}

#message {
    text-align: center;
    font-size: x-large;
    position: fixed;
    bottom: 0;
    width: 100%;
}

#temperature {
    font-size: xx-large;
}

#irc {
    position: fixed;
    right: 0;
    width: 30%;
    text-align: left;
}

#irc p {
    line-height: 90%
}

.up {
    color: green;
}

.down {
    color: red;
}

body {
    background: black;
    color: white;
    height: 100%;
    font-size: x-large;
}

p {
    line-height: 70%
}

#time {
    text-align: center;
    font-size: xx-large;
}

#left {
    position: fixed;
    left: 0;
    width: 40%
}

#message {
    text-align: center;
    font-size: x-large;
    position: fixed;
    bottom: 0;
    width: 100%;
}

#temperature {
    font-size: xx-large;
}

#irc {
    position: fixed;
    right: 0;
    width: 30%;
    text-align: left;
}

#irc p {
    line-height: 90%
}

.up {
    color: green;
}

.down {
    color: red;
}

Adjust spacing for when the display is in portrait mode


body {
    margin: 10px auto;
    width: 1024px;
    background: black;
    font-family: sans-serif;
}

h1 {
    color: salmon;
    text-align: center;
    margin: 0;
}

canvas {
    border: 1px solid #333;
}

div.description {
    color: salmon;
    width: 600px;
    margin: 0px auto;
    text-indent: 1em;
}

.description p {
    margin: 5px 0;
    text-align: justify;
}

.fps {
    position: absolute;
    top: 0;
    right: 0;
    color: #444;
    font-size: 12px;
}

body {
    margin: 10px auto;
    width: 1024px;
    background: black;
    font-family: sans-serif;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

h1 {
    color: salmon;
    text-align: center;
    margin: 0;
}

canvas {
    border: 1px solid #333;
}

div.description {
    color: salmon;
    width: 600px;
    margin: 0px auto;
    text-indent: 1em;
}

.description p {
    margin: 5px 0;
    text-align: justify;
}

.fps {
    position: absolute;
    top: 0;
    right: 0;
    color: #444;
    font-size: 12px;
}

Disable selection for better interaction.


h1 {
    font-size: 300%;
}

h1.graffiti {
    color: #af0;
    text-shadow: 0 0 15px #af0, 0 0 2px #fff;
    transform: rotate(-12deg)
}

#plain-brainbow div, #word-brainbow div {
    margin-left: auto;
    margin-right: auto;
}

ul.permutation {
    list-style: none;
}

ul.permutation li.focus {
    display: inline-block;
    background-color: rgba(255, 0, 0, 0.5);
}

ul.permutation li.intense.focus {
    font-size: 200%;
}

table, td {
    border-style: solid;
    border-color: white;
    border-width: 1px;
}

td {
    padding: 1em;
}

Scale header font to fit 800x600

Scale header font to fit 800x600


body {
    background-color: #393f4c;
    color: #cdcdcd;
}

input, select, textarea, fieldset, legend {
    background-color: #6e7079;
    color: #f2f2f2;
    border: 1px solid #717171;
}

::selection { background: #b36800; color: #24242d}
::-moz-selection { background: orange; color: #24242d}

input:disabled,
select:disabled,
textarea:disabled {
    color: #949494;
}

input:disabled,
textarea:disabled,
select:disabled {
    background-color: #4c4e57;
}

button {
    background-color: #5675b9;
    color: white;
    border: 1px solid #5b9ae2;
}

button:disabled,
button:disabled:hover {
    background-color: #485590;
    color: #999999;
}

button:hover {
    background-color: #5698dc;
    color: #ffffff;
}

fieldset {
    border-color: #757575;
    background-color: #373740;
}

legend {
    border-color: #999999;
    background-color: #36363f;
    color: #acacac;
}

body {
    background-color: #393f4c;
    color: #cdcdcd;
}

input, select, textarea, fieldset, legend {
    background-color: #6e7079;
    color: #f2f2f2;
    border: 1px solid #717171;
}

::selection { background: #b36800; color: #24242d}
::-moz-selection { background: orange; color: #24242d}

a {
    color: #56bbff;
}

input:disabled,
select:disabled,
textarea:disabled {
    color: #949494;
}

input:disabled,
textarea:disabled,
select:disabled {
    background-color: #4c4e57;
}

button {
    background-color: #5675b9;
    color: white;
    border: 1px solid #5b9ae2;
}

button:disabled,
button:disabled:hover {
    background-color: #485590;
    color: #999999;
}

button:hover {
    background-color: #5698dc;
    color: #ffffff;
}

fieldset {
    border-color: #757575;
    background-color: #373740;
}

legend {
    border-color: #999999;
    background-color: #36363f;
    color: #acacac;
}

Set a dark theme color for the 'a' element


ul.errorlist {
	margin: 0;
	list-style: none;
}

header, footer {
	background-color: #CCEEFF;
}

#wrapper {
	min-height: 100%;
	position: relative;
	padding-bottom: 75px;
}

#site_content {
	background-color: #FFFFFF;
}

header li {
	background-color: #1CC7FF;
	border-bottom-left-radius:  10px;
	border-bottom-right-radius: 10px;
}

header li a {
	color: #FFFFFF;
	padding: 0.2em 0.9em 0.5em;
}

header li a:hover {
	color: #CCEEFF;
}

footer {
	width: 100%;
	position: absolute;
	bottom: 0px;
	font-size: 0.8em;
	padding: 1.5em 1em;
	text-align: center;
}

ul.errorlist {
	margin: 0;
	list-style: none;
}

header, footer {
	background-color: #CCEEFF;
}

#wrapper {
	min-height: 100%;
	position: relative;
	padding-bottom: 125px;
}

#site_content {
	background-color: #FFFFFF;
}

header li {
	background-color: #1CC7FF;
	border-bottom-left-radius:  10px;
	border-bottom-right-radius: 10px;
}

header li a {
	color: #FFFFFF;
	padding: 0.2em 0.9em 0.5em;
}

header li a:hover {
	color: #CCEEFF;
}

footer {
	width: 100%;
	position: absolute;
	bottom: 0px;
	font-size: 0.8em;
	padding: 1.5em 1em;
	text-align: center;
}

Fix footer covering up content on small screens


.panelist-list {
  lost-utility: clearfix;
  width: 80%;
  margin: auto;

  &__panelist {
    margin: 0;
    padding: 20px;

    @media only screen and (min-width : 400px) {
      lost-column: 1/2;
    }

    @media only screen and (min-width : 600px) {
      lost-column: 1/3;
    }

    @media only screen and (min-width : 800px) {
      lost-column: 1/4;
    }
  }
}

.panelist-list {
  lost-utility: clearfix;
  width: 80%;
  margin: auto;

  &__panelist {
    margin: 0;
    margin-bottom: 30px;

    @media only screen and (min-width : 400px) {
      lost-column: 1/2;
    }

    @media only screen and (min-width : 600px) {
      lost-column: 1/3;
    }

    @media only screen and (min-width : 800px) {
      lost-column: 1/4;
    }
  }
}

Add some margin bottom to panelist headshots


/* On an iPad, the rules below takes precedence over the rules above (order is important) */
@media only screen and (device-width: 768px) {
  #root {
    margin: 10px 0 0p 210px;
    background-color: lightgrey;
	  background-color: white;
  }
}

@media screen and (max-device-width: 480px) and (orientation:portrait) {
  #root {
    margin: 0 10px 0 10px;
    background-color: lightgrey;
	  background-color: white;
    font-size: 20px;
  }
  input[type="text"], textarea {
    font-size: 16px;
  }
	button {
	  height: 20px;
	  margin-bottom: 3px;
	}
	.clientView {
	  width: 300px;
	}
}

button {
	border-width: 1px;
	border-color: black;
	border-radius: 10px;
	background-color: lightgrey;
}
button[selected] {
	background-color: #04f;
	color: white;
}

.CalendarHeader button {
	width: 6em;
}

.DialogContainer {
	width: 300px;
}

/* On an iPad, the rules below takes precedence over the rules above (order is important) */
@media only screen and (device-width: 768px) {
  #root {
    margin: 10px 0 0p 210px;
    background-color: lightgrey;
	  background-color: white;
  }
}

@media screen and (max-device-width: 480px) and (orientation:portrait) {
  #root {
    margin: 0 10px 0 10px;
    background-color: lightgrey;
	  background-color: white;
    font-size: 20px;
  }
  input[type="text"], textarea {
    font-size: 16px;
  }
	button {
	  height: 20px;
	  margin-bottom: 3px;
	}
	.clientView {
	  width: 300px;
	}
}

textarea {
	resize: none;
}

button {
	border-width: 1px;
	border-color: black;
	border-radius: 10px;
	background-color: lightgrey;
}
button[selected] {
	background-color: #04f;
	color: white;
}

.CalendarHeader button {
	width: 6em;
}

.DialogContainer {
	width: 300px;
}

Disable resize on textarea (doesn't work well in iframe)

git-svn-id: aa6b683a0c3c4a7a7056638acacb3aaf04dd239a@3617 63c81c92-1a08-11de-87e6-23293a004a03


.content {
  padding: 20px;
}

#header {
  flex: 0 0 100%;
  display: flex;
  justify-content: flex-end;
}

#search_results .cloudsearch_result_icon {
  display: none;
}

#search_results .cloudsearch_result_snippet {
  padding-left: 0;
}

#search_results .cloudsearch_result_count_container {
  padding-left: 0;
}

#facet_results .cloudsearch_facet_result_operator_name {
  font-weight: bold;
}

#facet_results .cloudsearch_facet_bucket_value {
  margin-left: 8px;
}

#app {
  display: flex;
  flex-wrap: wrap;
}

#search_bar {
  flex: 0 0 100%;
}

#facet_results {
  flex: 0 1 20%;
}

#search_results {
  flex: 0 1 80%;
}

.content {
  padding: 20px;
}

#header {
  flex: 0 0 100%;
  display: flex;
  justify-content: flex-end;
}

#search_results .cloudsearch_result_icon {
  display: none;
}

#search_results .cloudsearch_result_snippet {
  padding-left: 0;
}

#search_results .cloudsearch_result_meta_line {
  padding-left: 0;
}

#search_results .cloudsearch_result_count_container {
  padding-left: 0;
}

#facet_results .cloudsearch_facet_result_operator_name {
  font-weight: bold;
}

#facet_results .cloudsearch_facet_bucket_value {
  margin-left: 8px;
}

#app {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

#search_bar {
  flex: 0 0 100%;
}

#facet_results {
  flex: 0 0 auto;
}

#search_results {
  flex: 1 1 50%;
}

Tweak CSS for facets & results

Tweak CSS for facets & results

Change-Id: I89500671f7c17b4a82abc689d7482111ef039a78


/*

   FORMS

*/

.input-text {
  outline: 0;
}
.input-text:focus,
.input-text:hover {
  outline: 0;
}

.input-invisible {
  outline: 0;
  border: 0;
}

/*

   FORMS

*/

.input-text {
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.input-text:focus,
.input-text:hover {
  outline: 0;
}

.input-invisible {
  outline: 0;
  border: 0;
}

Add appearance none to certain form inputs.


div.wrap-canvas {
    display: inline-block;
    border-style: solid;
    border-width: thin;
}

div.manual-input {
    margin: 5%;
    display: none;
}

button.manual-input[id$="detail"] {
    width: 10%;
}

div.wrap-canvas {
    display: inline-block;
    border-style: solid;
    border-width: thin;
}

div.manual-input {
    margin: 5%;
    display: none;
}

button.manual-input[id$="_detail"] {
    width: 90%;
}

button.manual-input[id$="_reset"] {
    width: 10%;
}

Fix button style, checked with IE and chrome.


.nav-pills a {
    cursor: pointer;
}

.pagesContainer {
    height: calc(100% - 120px);
    padding-top: 20px;
}

.page {
    display: none;
    height: 100%;
    padding: 0 15px;
    position: relative;
    z-index: 1;
}

.page.active {
    display: block;
    z-index: 2;
}

.looser.tree .round-1 {
    margin-right: 30px;
}

[data-haspools="false"] {
    display: none;
}

.label {
    font-size: 16px;
    font-weight: 400;
    margin-top: 2px;
}

.lose .label, .win .label {
    color: #777;
}

.lose.highlightWinner .label, .win.highlightWinner .label {
    color: #fff;
}

.tree input {
    color: #000;
}

div.jQBracket .team div.label {
    color: #888;
}

Make teams without score more lisible

Make teams without score more lisible


body {
  padding-top: 1em;
}

.logo-img {
	padding-left: 4px;
}

.logo-text {
    font-family: 'Comic Sans MS', cursive, sans-serif;
    font-size: 32px;
    font-style: italic;
}

.body-content {
  padding: 32px 0 0 0;
}

.section-dropdown-icon {
    height: 1.5em;
    width: 2em;
    margin-right: 2px;
}

.publisher-link {
  color: #666666;
}

.storyCarouselPic {
  max-height: 14em;
  width: 100%
}

.storyMedia {
  height: 14em;
}

/* used in old site */
.storyDiv {
  padding: 0;
  margin-bottom: 0;
  border: 0;
}

body {
  padding-top: 1em;
}

.logo-img {
	padding-left: 4px;
}

.logo-text {
    font-family: 'Comic Sans MS', cursive, sans-serif;
    font-size: 32px;
    font-style: italic;
}

.body-content {
  padding: 40px 0 0 0;
}

#section-dropdown-button {
  margin-bottom: 0.5em;
}

.section-dropdown-icon {
    height: 1.5em;
    width: 2em;
    margin-right: 2px;
}

.publisher-link {
  color: #666666;
}

.storyCarouselPic {
  max-height: 14em;
  width: 100%
}

.storyMedia {
  height: 14em;
}

/* used in old site */
.storyDiv {
  padding: 0;
  margin-bottom: 0;
  border: 0;
}

Improve spacing around the section chooser dropdown


@import "part:@sanity/base/theme/variables-style";
@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,500,500i,700,700i,900,900i");

:global(body) {
  font-family: var(--font-family-sans-serif);
  line-height: var(--line-height-base);
  color: var(--text-color);
  background-color: var(--body-bg);
  margin: 0;
  padding: 0;
}

@import "part:@sanity/base/theme/variables-style";
@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,400i,500,500i,700,700i,900,900i");

:global(body) {
  font-family: var(--font-family-sans-serif);
  line-height: var(--line-height-base);
  color: var(--text-color);
  background-color: var(--body-bg);
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

[base] Reset webkit highlight on mobile devices


body {
  margin: 0;
  padding: 1px;
  font-size: 16px;
}

.passwords {
  font-family: monospace;
}

.passwords__password {
  color: #eee;
  background: #fff;
  float: left;
  margin: 1px;
  padding: 3px;
}

.passwords__password::selection {
  color: #fff;
  background: #eee;
}

body {
  margin: 0;
  padding: 1px;
  font-size: 16px;
}

.passwords {
  display: flex;
  flex-wrap: wrap;
}

.passwords__password {
  font-family: monospace;
  color: #eee;
  background: #fff;
  margin: 1px;
  padding: 3px;
}

.passwords__password::selection {
  color: #fff;
  background: #eee;
}

Make a single password selectable with a double click


/*
 * 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.
 */

div {
    background-image: url(Images/toolbarButtonGlyphs.png);
    background-size: 320px 144px;
}

@media (-webkit-min-device-pixel-ratio: 1.5) {
div {
    background-image: url(Images/toolbarButtonGlyphs_2x.png);
}
} /* media */

.close-button {
    width: 14px;
    height: 14px;
    background-position: -128px -96px;
}

.close-button:hover {
    background-position: -96px -96px;
}

.close-button:active {
    background-position: -111px -96px;
}

.close-button-gray {
    width: 13px;
    height: 13px;
    background-position: -175px -96px;
}

.close-button-gray:hover {
    background-position: -143px -96px;
}

.close-button-gray:active {
    background-position: -160px -96px;
}

/*
 * 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.
 */

div {
    background-image: url(Images/toolbarButtonGlyphs.png);
    background-size: 320px 144px;
}

@media (-webkit-min-device-pixel-ratio: 1.5) {
div {
    background-image: url(Images/toolbarButtonGlyphs_2x.png);
}
} /* media */

.close-button {
    width: 14px;
    height: 14px;
    background-position: -128px -96px;
    cursor: default;
}

.close-button:hover {
    background-position: -96px -96px;
}

.close-button:active {
    background-position: -111px -96px;
}

.close-button-gray {
    width: 13px;
    height: 13px;
    background-position: -175px -96px;
}

.close-button-gray:hover {
    background-position: -143px -96px;
}

.close-button-gray:active {
    background-position: -160px -96px;
}

Fix cursor over close button

Devtools: Fix cursor over close button

BUG=481812

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

git-svn-id: bf5cd6ccde378db821296732a091cfbcf5285fbd@194610 bbb929c8-8fbe-4397-9dbb-9b2b20218538


@tailwind base;

@tailwind components;

@tailwind utilities;

@responsive {
  .example {
    @apply .font-bold;
    color: theme('colors.red.500');
  }
}

@tailwind base;

@tailwind components;

@tailwind utilities;

@responsive {
  .example {
    @apply font-bold;
    color: theme('colors.red.500');
  }
}

Remove leading dot from apply case in sanity test


@value grey-vivid, dark from "Stylesheets/colors";

.list {
	composes: wrapper from 'Stylesheets/general';
	display: flex;
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	overflow-x: scroll;
}

.wrapper {
	background: grey-vivid;
}

.item {
	margin-right: 1.5em;
}

.item__link {
	composes: condensed-light from "Stylesheets/typography";
	font-size: 1.125em;
	line-height: 1;
	color: dark;
}

.is_active {
	font-weight: bold;
}

@value light, dark from "Stylesheets/colors";

.list {
	composes: wrapper from 'Stylesheets/general';
	display: flex;
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	overflow-x: scroll;
}

.wrapper {
	background: light;
}

.item {
	margin-right: 1.5em;
}

.item__link {
	composes: condensed-light from "Stylesheets/typography";
	font-size: 1.125em;
	line-height: 1;
	color: dark;
}

.is_active {
	font-weight: bold;
}

Make category list background white again.


.loader {
  height: 4px;
  top: 4px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #ddd;
}

.loader::before {
  display: block;
  position: absolute;
  content: '';
  left: -200px;
  width: 200px;
  height: 4px;
  background-color: red;
  animation: loading 2s linear infinite;
}

.center {
  display: flex;
  justify-content: center;
}

@keyframes loading {
  from {
    left: -200px;
    width: 30%;
  }

  50% {
    width: 30%;
  }

  70% {
    width: 70%;
  }

  80% {
    left: 50%;
  }

  95% {
    left: 120%;
  }

  to {
    left: 100%;
  }
}

.loader {
  height: 4px;
  top: 4px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #ddd;
}

.image {
  object-fit: contain;
}

.loader::before {
  display: block;
  position: absolute;
  content: '';
  left: -200px;
  width: 200px;
  height: 4px;
  background-color: red;
  animation: loading 2s linear infinite;
}

.center {
  display: flex;
  justify-content: center;
}

@keyframes loading {
  from {
    left: -200px;
    width: 30%;
  }

  50% {
    width: 30%;
  }

  70% {
    width: 70%;
  }

  80% {
    left: 50%;
  }

  95% {
    left: 120%;
  }

  to {
    left: 100%;
  }
}

Fix image rendering on mobile in editor

Fix image rendering on mobile in editor

Use 'contain' in order to not stretch images more than needed
on mobile


body {
    background: #D3D3D3;
}

img {
}

.img-wrapper {
    background-image: url("background.png");
}

div.screenshot {
    padding: 10px;
}

div.alternate {
    background: #E0E0E0;
}

div.screenshot_error {
    color: red;
}

table {
    border-collapse: collapse;
}
th, tr, td {
    padding: 0;
}

body {
    background: #D3D3D3;
}

img {
    display:block;
}

.img-wrapper {
    background-image: url("background.png");
}

div.screenshot {
    padding: 10px;
}

div.alternate {
    background: #E0E0E0;
}

div.screenshot_error {
    color: red;
}

table {
    border-collapse: collapse;
}

table, th, tr, td, img{
    padding: 0;
    margin: 0;
    border: 0;
}

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

Fix spacing issue on screenshot reports

Fix spacing issue on screenshot reports


/* ==UserStyle==
@name           compact youtube
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    makes youtube's grid view more compact
@author         Me
==/UserStyle== */

@-moz-document domain("youtube.com") {
    :root {
        --compactwidth: 165px;
    }

    #items.ytd-grid-renderer > ytd-grid-video-renderer.ytd-grid-renderer {
        width: var(--compactwidth) !important;
        margin-bottom: 12px !important;
        margin-right: 10px !important;
    }

    ytd-browse[guide-persistent-and-visible] ytd-two-column-browse-results-renderer.ytd-browse {
        width: 85% !important;
    }

    #items.ytd-grid-renderer > ytd-grid-video-renderer.ytd-grid-renderer ytd-thumbnail {
        width: var(--compactwidth) !important;
    }

    ytd-thumbnail.ytd-grid-video-renderer {
        height: 85px !important;
    }

    h3.ytd-grid-video-renderer {
        margin: 3px 0 3px !important;
    }

    #metadata-line.ytd-grid-video-renderer {
        display: none !important;
    }

    #meta.ytd-grid-video-renderer {
        padding-right: 0px !important;
    }

    ytd-grid-video-renderer #video-title.yt-simple-endpoint.ytd-grid-video-renderer
    {
        max-height: none !important;
    }
}

Add userstyle for more compact youtube grid view


/*
 * Style for components/Textarea/index.js
 */

.textarea {
    background-color: #fff;
    border: 1px solid #aaa;
    padding: 6px 13px;
    width: 90%;
    margin-left: 20px;
}

.textarea:-ms-input-placeholder {
    color: #aaa;
}

/*
 * Style for components/Textarea/index.js
 */

.textarea {
    background-color: #fff;
    border: 1px solid #aaa;
    padding: 6px 13px;
    width: 90%;
    margin-left: 20px;
    resize: none;
}

.textarea:-ms-input-placeholder {
    color: #aaa;
}

Disable resizable property of textarea

Disable resizable property of textarea


.leaflet-control-minimap {
    border:solid rgba(255, 255, 255, 1.0) 3px;
    box-shadow: 0 1px 7px #999;
    background: #f8f8f9;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    transition: all .2s;
}

.leaflet-control-minimap a {
    background-color: rgba(255, 255, 255, 1.0);
    background-position: 1px 2px;
    background-repeat: no-repeat;
    display: block;
    outline: none;
    z-index: 99999;
    transition: all .2s;
}

.leaflet-control-minimap a.minimized {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.leaflet-control-minimap-toggle-display {
    background-image: url("images/toggle.png");
    border-radius: 2px 0px 2px 0px;
    height: 19px;
    width: 19px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.leaflet-control-minimap {
    border:solid rgba(255, 255, 255, 1.0) 3px;
    box-shadow: 0 1px 7px #999;
    background: #f8f8f9;
    border-radius: 8px;
    transition: all .2s;
}

.leaflet-control-minimap a {
    background-color: rgba(255, 255, 255, 1.0);
    background-position: 1px 2px;
    background-repeat: no-repeat;
    display: block;
    outline: none;
    z-index: 99999;
    transition: all .2s;
}

.leaflet-control-minimap a.minimized {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.leaflet-control-minimap-toggle-display {
    background-image: url("images/toggle.png");
    border-radius: 2px 0px 2px 0px;
    height: 19px;
    width: 19px;
    position: absolute;
    bottom: 0;
    right: 0;
}

Remove vendor prefixes on border-radius

Remove vendor prefixes on border-radius

They're no longer needed, acccording to canIuse.com. Still keeping
webkit-transform since webkit for some reason still wants a prefix.


.description {
    color:red;
}

* {
   outline: 1px solid red !important;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.image {
  max-width:460px;
}
.description {

  max-width;705px;
}

Add image and descriptor sizes

Add image and descriptor sizes


html, body {
  margin: 0;
  border: 0;
  padding: 0;
}

body {
  color: [[text-color]];
  background-color: [[background-color]];
  font-family: 'Arial', 'Helvatica', sans-serif;
}

.x-component--header-section {
  background: [[header-background-color]];
}

.x-component--logo {
  display: inline-block;
  font-weight: normal;
  margin: 0;
}

.x-component--logo a {
  color: [[logo-text-color]];
  text-decoration: none;
}

[hidden], [hidden] *, input[type='hidden'], button[type='hidden'], {
  display: none;
}

Make sure hidden elements are hidden

Make sure hidden elements are hidden


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

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

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

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

.monaco-workbench .terminal-cursor {
	background-color: #1e1e1e;
}

.monaco-workbench .reverse-video {
	color: #CCC;
}

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

.vs-dark .monaco-workbench .reverse-video {
	color: #252526;
}

/* High Contrast Theming */

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

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

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

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

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

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

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

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

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

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

/* High Contrast Theming */

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

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

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

Fix terminal light theme colors

Fix terminal light theme colors

The foreground color was not set so the editor's color was used


.element {
    text-decoration: none;
    color: black;
    background-color: lightgrey;
    padding: 10px
}

.element:hover {
    background-color: grey;
}

.active {
    background-color: grey;
}

img {
    text-align: center;
}

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

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

.icon-container a {
    text-decoration: none;
}

Remove underline in icon containers

Remove underline in icon containers

Signed-off-by: Kien Ha <3e36ebd6a7c89ee7d9a20a5fbbffc571f107e566@gmail.com>


html {
    background-color: #ebebeb !important;
}

html {
filter: invert(1) hue-rotate(.5turn);
}

img:not(.icon-text, .icon-social),
video,
code {
filter: hue-rotate(180deg) contrast(100%) invert(100%);
}

html {
    background-color: #ebebeb !important;
}

html {
filter: invert(100%) hue-rotate(180deg);
}

img:not(.icon-text, .icon-social),
video,
code {
filter: invert(100%) hue-rotate(180deg) contrast(100%);
}

Make CSS filter usage more consistent

[fix] Make CSS filter usage more consistent


.move-handle {
	cursor: move;
}

.box-placeholder {
	border: 2px dotted black;
	margin: 10px;
	background: #efefef;
}

.sorting {
	margin-bottom: 5px;
	border: 1px dashed #444;
	min-height: 100px !important;
}

.sorting .box {
	margin: 10px;
}

.blogfeed h1 {
	font-size: 100%;
	line-height: 20px;
}

.blogfeed p.lead {
	font-size: 100%;
}

.move-handle {
	cursor: move;
}

.box-placeholder {
	border: 2px dotted black;
	background: #efefef;
}

.sorting {
	padding: 10px;
	border: 1px dashed #444;
	min-height: 100px !important;
}

.sorting > * {
	margin: 0px 0px 10px 0px;
}

.sorting > *:first-child {
	margin-top: 0;
}

.sorting > *:last-child {
	margin-bottom: 0;
}

.blogfeed h1 {
	font-size: 100%;
	line-height: 20px;
}

.blogfeed p.lead {
	font-size: 100%;
}

Dashboards: Remove margins as it complicates the grid

Instead putting margins in the placeholder elements,
put appropriate margins within the children of .sorting element.


/* Place module CSS here */

.Launchpad_ContentList { width:100% }
.Launchpad_ContentListItem { text-align: left }
.Launchpad_UserName { font-weight:bold }
.Launchpad_CreateOnDate { font-style:italic }
.Launchpad_Content { clear:both }

/*
.dlTable { display:table; width:100% }
.dlRow { display:table-row }

.dlColumn1 { display:table-cell }
.dlColumn2 { display:table-cell }
*/

/* Place module CSS here */

.Launchpad_ContentList { width:100% }
.Launchpad_ContentListItem { text-align: left }
.Launchpad_UserName { font-weight:bold }
.Launchpad_CreateOnDate { font-style:italic }
.Launchpad_Content { clear:both }

/* dnnGridHeader fix */
.dnnGridHeader th {
    border-bottom: 1px solid #c9c9c9;
    border-right: 1px solid #c9c9c9;
    background: #f0f2f1;
    background: linear-gradient(top, #fff 0%,#f0f2f1 100%);
    padding: 5px;
}

Fix dnnGridHeader doesn't apply to <th>

Fix dnnGridHeader doesn't apply to <th>


.member-card {
    background-color: #E6E6E6;
    margin-bottom: 2.5em;
}

.member-header {
    background-color: #2D2D2D;
    color: #EBEBEB;
    padding: 0.5em;
    font-weight: 500;
}

.member-header:hover .headerlink {
    display: inline-block;
}

.member-body {
    display: flex;
    /* Padding on all sides except the bottom,
    as the right-panel takes care of this padding */
    padding: 1em 1em 0em 1em;
}

.member-left-panel {
    /* This panel only exists if there is an image to fill it. */
    padding-right: 1em;
}

.member-right-panel {
    /* This panel extends as far as it can */
    flex: 1;
    /* padding-left: 1em; */
}

.github-link {
    font-weight: 200;
    float: right;
}

.member-card {
    background-color: #E6E6E6;
    margin-bottom: 2.5rem;
}

.member-header {
    background-color: #2D2D2D;
    color: #EBEBEB;
    padding: 0.5em;
    font-weight: 500;
}

.member-header:hover .headerlink {
    display: inline-block;
}

.member-body {
    display: flex;
    /* Padding on all sides except the bottom,
    as the right-panel takes care of this padding */
    padding: 1em 1em 0em 1em;
}

.member-left-panel {
    /* This panel only exists if there is an image to fill it. */
    padding-right: 1em;
}

.member-right-panel {
    /* This panel extends as far as it can */
    flex: 1;
    /* padding-left: 1em; */
}

.github-link {
    font-weight: 200;
    float: right;
}

Use rem instead, seems to align better

Use rem instead, seems to align better


.test {
    background-color: blueviolet;
}

#map-component {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
    background-color: royalblue;
}

#finalized-component {
    width: 300px;
    background-color: red;
    height: 100%;
    overflow-y: auto;
    pointer-events: auto;
    box-shadow: 1px 1px 10px gray;
}

#unfinalized-component {
    width: 300px;
    background-color: red;
    height: 100%;
    overflow-y: auto;
    pointer-events: auto;
    box-shadow: 1px 1px 7px gray;
}

#trip {
    height: 100vmin;
    position: relative;
}

.foreground {
    width: 100%;
    height: 100vmin;
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

#add-button-component {
    z-index: 5;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 30px;
}

#add-form-container {
    height: 500px;
    width: 600px;;
}

.test {
    background-color: blueviolet;
}

#map-component {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
    background-color: royalblue;
}

#finalized-component {
    width: 300px;
    background-color: red;
    height: 100%;
    overflow-y: auto;
    pointer-events: auto;
    box-shadow: 1px 1px 7px gray;
}

#unfinalized-component {
    width: 300px;
    background-color: red;
    height: 100%;
    overflow-y: auto;
    pointer-events: auto;
    box-shadow: 1px 1px 7px gray;
}

#trip {
    height: 100vmin;
    position: relative;
}

.foreground {
    width: 100%;
    height: 100vmin;
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

#add-button-component {
    z-index: 5;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 30px;
}

#add-form-container {
    height: 500px;
    width: 600px;;
}

Fix shadow in css: :

Fix shadow in css:
:


.promotePanel {
    width: 400px;
    height: 70px;
    display:flex;
    visibility: hidden;
}

.promote {
    background-position: 50% 50%;
    background-repeat:no-repeat;
    cursor: pointer;
    opacity: 0.5;

    transition: 300ms;
}

.promote:hover {
    opacity: 1;
}

.promote.queen {
    background-image: url('../assets/images/pieces/cburnett/wQ.svg');
}

.promote.rook {
    background-image: url('../assets/images/pieces/cburnett/wR.svg');
}

.promote.bishop {
    background-image: url('../assets/images/pieces/cburnett/wB.svg');
}

.promote.knight {
    background-image: url('../assets/images/pieces/cburnett/wN.svg');
}

.promotePanel {
    width: 400px;
    height: 70px;
    display:flex;
    visibility: hidden;
}

.promote {
    background-position: 50% 50%;
    background-repeat:no-repeat;
    cursor: pointer;
    opacity: 0.5;

    transition: 300ms;
}

.promote:hover {
    opacity: 1;
}

.promote.queen {
    background-image: url('../assets/chessground/images/pieces/cburnett/wQ.svg');
}

.promote.rook {
    background-image: url('../assets/chessground/images/pieces/cburnett/wR.svg');
}

.promote.bishop {
    background-image: url('../assets/chessground/images/pieces/cburnett/wB.svg');
}

.promote.knight {
    background-image: url('../assets/chessground/images/pieces/cburnett/wN.svg');
}

Fix path to fix display of promotion pieces


.subpagelist-button {
  margin-left: 10px;
}

.subpagelist .shiv-white,
.subpagelist .shiv-white:after {
  background: none !important;
}

.subpagelist-item-empty {
  padding: 1em;
  background: #ddd;
}

.hgroup-option-right a:first-child {
    display: none;
}

Hide editing button on subpage listing

Hide editing button on subpage listing


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

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

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

.header ul {
    display: block;
    padding: 0;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.header li {
    display: inline-block;
    width: 200px;
    text-align: center;
}

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

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

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

.header ul {
    display: block;
    padding: 0;
    max-width: 620px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
}

.header li {
    display: inline-block;
    width: 200px;
    text-align: center;
}

Remove margin between title and topics

Remove margin between title and topics


html, body, .modal-content {
  color: #e5e4df;
  background-color: #212224;
}

.btn, .button {
  background-color: #a40214;
  color: #e5e4df;
  border: none;
}

.dropdown-menu {
  background-color: #a40214;
  color: #e5e4df;
  font: menu;
}

#gear-menu > span {
  color: #a40214;
  font-size: 25px;
}

#gear-menu:hover > span {
  color: #a40214;
  font-size: 25px;
}

#file-path, #status {
  font-size: 12px;
  background-color: #005699;
  border: #212224 solid 1px;
}

select, option {
  background-color: #e5e4df;
  color: #212224;
}

html, body, .modal-content {
  color: #e5e4df;
  background-color: #212224;
}

.btn, .button {
  background-color: #a40214;
  color: #e5e4df;
  border: none;
}

.dropdown-menu {
  background-color: #a40214;
  color: #e5e4df;
  font: menu;
}

#gear-menu > span {
  color: #a40214;
  font-size: 25px;
}

#gear-menu:hover > span {
  color: #a40214;
  font-size: 25px;
}

#file-path, #status {
  font-size: 12px;
  background-color: #005699;
  color: #e5e4df;
  border: #212224 solid 1px;
}

select, option {
  background-color: #e5e4df;
  color: #212224;
}

Fix the color for modern selectric's file display


#progress-bars {
	margin-top: 1.5em;
}

/*progress-bars .close {
	display: block;
	float: none;
	text-align: right;
	width: 100%;
}*/

#progress-bars div.pull-left {
	width: 35px;
	margin-left: 5px;
	margin-right: 5px;
}

#progress-bars div.alert-error {
	margin-left: 45px;
	display: none;
}

#progress-bars div.description {
	margin-left: 45px;
}

#progress-bars span.parser{
	font-weight: bold;
}

#progress-bars {
	margin-top: 1.5em;
}

#progress-bars div.pull-left {
	width: 35px;
	margin-left: 5px;
	margin-right: 5px;
}

#progress-bars div.alert-error {
	margin-left: 45px;
	display: none;
}

#progress-bars div.description {
	margin-left: 45px;
}

#progress-bars span.parser{
	font-weight: bold;
}

Remove baaad baaaaaaad comments in css

Remove baaad baaaaaaad comments in css


.island
{
    float: left;

    width: 50%;
}

.island__inner
{
    margin: 5% 5% 0;

    /*float: left;

    width: 44.5%;
    margin-left: 38%;*/
}

.island__container
{
    position: relative;
    z-index: 10;

    min-height: 615px;
    padding: 5%;

    background: #fff;
}

.island__shadow
{
    position: relative;
    z-index: 0;

    height: 33px;
    margin-top: -19px;

    background: -moz-radial-gradient(center,ellipse contain,#bbbdc1 0,#f3f1ee 100%);
    background: -webkit-radial-gradient(center,ellipse contain,#bbbdc1 0,#f3f1ee 100%);
    background: -o-radial-gradient(center,ellipse contain,#bbbdc1 0,#f3f1ee 100%);
    background: -ms-radial-gradient(center,ellipse contain,#bbbdc1 0,#f3f1ee 100%);
    background: radial-gradient(center,ellipse contain,#bbbdc1 0,#f3f1ee 100%);
}

/*.brick
{
    float: left;

    width: 50%;
}

.brick__inner
{
    padding: 10% 10% 0;
}*/

.island
{
    display: inline-block;
    vertical-align: top;
    width: 50%;
}

.island__inner
{
    margin: 5% 5% 0;
}

.island__container
{
    position: relative;
    z-index: 10;

    min-height: 615px;
    padding: 5%;

    background: #fff;
}

.island__shadow
{
    position: relative;
    z-index: 0;

    height: 33px;
    margin-top: -19px;

    background: -moz-radial-gradient(center,ellipse contain,#bbbdc1 0,#f3f1ee 100%);
    background: -webkit-radial-gradient(center,ellipse contain,#bbbdc1 0,#f3f1ee 100%);
    background: -o-radial-gradient(center,ellipse contain,#bbbdc1 0,#f3f1ee 100%);
    background: -ms-radial-gradient(center,ellipse contain,#bbbdc1 0,#f3f1ee 100%);
    background: radial-gradient(center,ellipse contain,#bbbdc1 0,#f3f1ee 100%);
}

Fix index layout - change float to inline-block


body {
  padding-top: 3rem;
}

#welcome-jumbotron {
  background-image: url(../img/panorama-cs4hs-2015.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 0;
}

.navbar {
  background-color: #0a83bb;
}

footer {
  margin-top: 3rem;
  border-top: 1px solid #eee;
}

.logo {
  display: block;
  height: 3rem;
}

.schedule-line {
  border-top: 2px solid #e0e0e0;
}

.schedule-line-thin {
  border-top: 1px solid #e0e0e0;
}

/* Fixes #38 */
/* This fix will be implemented in Bootstrap 4 Beta 1 */
@media (max-width: 576px) {
  nav > .container {
      margin-left: 0;
      margin-right: 0;
  }
}

.img-inline {
  height: 1em;
  vertical-align: text-top;
}
.img-sponsor-logo {
  height: 2rem;
}

/* This fix should not be required in later versions of Bootstrap 4 */
.table-responsive {
  display: table !important;
}

Fix display property of .table-responsive


/*
 * nvim.css
 * Copyright (c) 2015 Lu Wang <coolwanglu@gmail.com>
 */

html,
body,
canvas {
  background-color: #fff;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.nvas-invisible{
  position: absolute;
  right: 100%;
  bottom: 100%;
}

#nvas-cursor {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid;
}

.insert-mode #nvas-cursor {
  border: 0;
  border-left: 1px solid;
}

#nvas-font-test {
  padding:0;
}

/*
 * nvim.css
 * Copyright (c) 2015 Lu Wang <coolwanglu@gmail.com>
 */

html,
body,
canvas {
  background-color: #fff;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.nvas-invisible{
  position: absolute;
  right: 100%;
  bottom: 100%;
}

#nvas-cursor {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid;

  -webkit-animation: 1s blink step-end infinite;
}

.insert-mode #nvas-cursor {
  border: 0;
  border-left: 2px solid;
}

@-webkit-keyframes blink {
  0%   { opacity: 1 }
  50%  { opacity: 0 }
}

#nvas-font-test {
  padding:0;
}

Use CSS to make cursor blink.

Use CSS to make cursor blink.


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

body {
  margin: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #333333;
}

#firepad-container {
  height: 100%;
  width: 100%;
  flex: 1;
}

.column {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.tabs-container {
  float: left;
  overflow: scroll;
}

.tab {
  border: none;
  height: 30px;
  color: #b5b5b5;
  float: left;
  padding: 10px 8px;
  display: flex;
  align-items: center;

  border-right-style: solid;
  border-color: #1e1e1e;
  border-width: 1px;
}

.active-tab {
  background-color: #1e1e1e;
}

.inactive-tab {
  background-color: #333333;
}

.inactive-tab:hover, .active-tab:hover {
  background-color: #555555;
}

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

body {
  margin: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #333333;
}

#firepad-container {
  height: 100%;
  width: 100%;
  flex: 1;
}

.column {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.tabs-container {
  float: left;
  overflow: scroll;
}

.tab {
  border: none;
  height: 30px;
  color: #b5b5b5;
  float: left;
  padding: 10px 8px;
  display: flex;
  align-items: center;

  border-right-style: solid;
  border-color: #1e1e1e;
  border-width: 1px;
}

.active-tab {
  background-color: #1e1e1e;
}

.inactive-tab {
  background-color: #333333;
}

.tab:hover {
  background-color: #555555;
}

Set hover on tab class instead of both active and inactive.


.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


.wrapper {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.header {
	display: flex;
	flex: 1;
	align-items: stretch;
}

.header > * {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	padding: 0 1rem;
	margin-bottom: .5rem;
	border: 2px solid #1e2c37;
	border-right: 0;
}

.header > *:last-child {
	border-right: 2px solid #1e2c37;
}

.stepComplete {
	background-color: #1e2c37;
}

.topics {
	display: flex;
}

.topics > * {
	margin: 0 .5rem;
}

.wrapper {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.header {
	display: flex;
	flex: 1;
	align-items: stretch;
}

.header > * {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	padding: 0 1rem;
	margin-bottom: .5rem;
	border: 2px solid #1e2c37;
	border-right: 0;
}

.header > *:last-child {
	border-right: 2px solid #1e2c37;
}

.stepComplete {
	background-color: #1e2c37;
}

.topics {
	display: flex;
}

.topics > * {
	margin: 0 .5rem;
}

Fix bug with icons not expanding AddEntry progress bar segment on iOS


a {
    color: rgb(54, 96, 146);
}

a:visited {
    color: rgb(54, 96, 146);
}

a:hover {
    background-color: rgba(54, 96, 146, 0.05);
    color: rgb(54, 96, 146);
    border: 1px solid rgba(54, 96, 146, 0.13);
}

div.header {
    background: rgb(54, 96, 146);
}

div.section {
    color: rgb(54, 96, 146);
}

span.opencor {
    display: none;
}

p.center {
    text-align: center;
}

pre {
    background: rgba(54, 96, 146, 0.05);
    border: 1px solid rgba(54, 96, 146, 0.13);
}

code {
    color: rgb(54, 96, 146);
}

img.centerLink:hover {
    background: rgba(54, 96, 146, 0.05);
    border: 1px solid rgba(54, 96, 146, 0.13);
}

table.toolbarButtons th {
    padding: 0px 13px 0px 13px;
}

a {
    color: rgb(54, 96, 146);
}

a:visited {
    color: rgb(54, 96, 146);
}

a:hover {
    background-color: rgba(54, 96, 146, 0.05);
    color: rgb(54, 96, 146);
    border: 1px solid rgba(54, 96, 146, 0.13);
}

div.header {
    background: rgb(54, 96, 146);
}

div.section {
    color: rgb(54, 96, 146);
}

span.opencor {
    display: none;
}

p.center {
    text-align: center;
}

pre {
    background: rgba(54, 96, 146, 0.05);
    border: 1px solid rgba(54, 96, 146, 0.13);
}

code {
    color: rgb(54, 96, 146);
}

img.centerLink {
    border: none;
}

img.centerLink:hover {
    background: rgba(54, 96, 146, 0.05);
    border: 1px solid rgba(54, 96, 146, 0.13);
}

table.toolbarButtons th {
    padding: 0px 13px 0px 13px;
}

Revert "Revert "Minor CSS fix for our user documentation (for Internet Explorer 10).""

This reverts commit e67a849b61fec3ec653a406dc1ebe9eafabe973c.


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

.btn-primary {
  @apply font-semibold
    inline-flex
    items-center
    justify-center
    px-4
    py-3
    uppercase
    bg-orange-500
    hover:bg-orange-600
    rounded-lg
    shadow-lg
    cursor-pointer
    text-gray-800
    hover:text-white
    text-lg

    outline-none
    focus:ring-4
    focus:ring-orange-500
    focus:ring-opacity-90;
}

.btn-secondary {
  @apply font-semibold
    inline-flex
    items-center
    justify-center
    px-4
    py-3
    uppercase
    bg-gray-400
    hover:bg-orange-600
    text-sm
    rounded-lg
    shadow-lg
    cursor-pointer
    text-gray-800
    hover:text-white

    outline-none
    focus:ring-4
    focus:ring-orange-500
    focus:ring-opacity-90;
}

.text-input {
  @apply px-4
    py-2
    rounded
    placeholder-gray-400
    text-center
    outline-none
    focus:ring-4
    focus:ring-orange-500
    focus:ring-opacity-90
    text-lg
    font-medium
    text-gray-700;
}

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

@layer components {
  .btn-primary {
    @apply font-semibold
    inline-flex
    items-center
    justify-center
    px-4
    py-3
    uppercase
    bg-orange-500
    hover:bg-orange-600
    rounded-lg
    shadow-lg
    cursor-pointer
    text-gray-800
    hover:text-white
    text-lg

    outline-none
    focus:ring-4
    focus:ring-orange-500
    focus:ring-opacity-90;
  }

  .btn-secondary {
    @apply font-semibold
    inline-flex
    items-center
    justify-center
    px-4
    py-3
    uppercase
    bg-gray-400
    hover:bg-orange-600
    text-sm
    rounded-lg
    shadow-lg
    cursor-pointer
    text-gray-800
    hover:text-white

    outline-none
    focus:ring-4
    focus:ring-orange-500
    focus:ring-opacity-90;
  }

  .text-input {
    @apply px-4
    py-2
    rounded
    placeholder-gray-300
    text-center
    outline-none
    focus:ring-4
    focus:ring-orange-500
    focus:ring-opacity-90
    text-lg
    font-medium
    text-gray-700;
  }
}

Move styles to `components` layer

Move styles to `components` layer


/**
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications. Removes the default spacing and border for
 * appropriate elements.
 */

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
p,
pre {
  margin: 0;
}

button {
  background: transparent;
  border: 0;
  padding: 0;
}

/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 */

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

iframe {
  border: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * Suppress the focus outline on links that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */

[tabindex="-1"]:focus {
  outline: none !important;
}

/**
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications.
 */

/**
 * Prevent margin and border from affecting element width.
 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */

html {
  box-sizing: border-box;
}

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

/**
 * Removes the default spacing and border for appropriate elements.
 */

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
p,
pre {
  margin: 0;
}

button {
  background: transparent;
  border: 0;
  padding: 0;
}

/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 */

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

iframe {
  border: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * Suppress the focus outline on links that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */

[tabindex="-1"]:focus {
  outline: none !important;
}

Reset `box-sizing` to use `border-box`

Reset `box-sizing` to use `border-box`

More info:
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/

Fixes #20


Update theme to remove selection color

Update theme to remove selection color


.list.sigtrello-collapsed-list {
	transform: rotate(-90deg) translate(0.5px,0.5px) !important;
	-webkit-transform: rotate(-90deg) translate(0.5px,0.5px) !important;
	margin: 113px -115px;
}

.list.sigtrello-collapsed-list .list-cards {
	display: none;
}

.list.sigtrello-collapsed-list .open-card-composer {
	display: none;
}

a.sigtrello-icon-collapse {
	right: 18px;
}

.sigtrello-icon-collapse:before {
	content: "\f029";
	/*	see core.css .icon-*
		009 - label		"label"
		016 - eye		"follow"
		020 - mag glass	"search"
		021 - pin icon	"pin"
		026 - plus		"add"
		027 - minus		"remove"
		029 - rotatey	"reopen"
	*/
}

/*

*/

.list.sigtrello-collapsed-list {
	transform: rotate(-90deg) translate(0.5px,0.5px) !important;
	-webkit-transform: rotate(-90deg) translate(0.5px,0.5px) !important;
	margin: 113px -115px;
}

.list.sigtrello-collapsed-list:first-child {
	margin-left: -103px;
}

.list.sigtrello-collapsed-list .list-cards {
	display: none;
}

.list.sigtrello-collapsed-list .open-card-composer {
	display: none;
}

a.sigtrello-icon-collapse {
	right: 18px;
}

.sigtrello-icon-collapse:before {
	content: "\f029";
	/*	see core.css .icon-*
		009 - label		"label"
		016 - eye		"follow"
		020 - mag glass	"search"
		021 - pin icon	"pin"
		026 - plus		"add"
		027 - minus		"remove"
		029 - rotatey	"reopen"
	*/
}

/*

*/

Improve collapse styling on first list

Improve collapse styling on first list


#forkme {
	position: absolute;
	top: 0;
	right: 0;
	border: 0;
	z-index: 40000;
}
.masthead.segment {
	min-height: 22em;
}
h1 {
	font-size: 1.8em !important;
}
h2 {
	font-size: 1.6em !important;
}
h3 {
	font-size: 1.4em !important;
}
h4 {
	font-size: 1.2em !important;
}
h5 {
	font-size: 1em !important;
}
h6 {
	font-size: 0.8em !important;
}
.masthead h1.ui.header {
	margin-top: 1.2em;
	font-size: 3.2em !important;
	font-weight: normal;
}
.masthead h2 {
	font-size: 1.4em !important;
	font-weight: normal;
}
#menu {
	margin-bottom: 2em;
}

#forkme {
	position: absolute;
	top: 0;
	right: 0;
	border: 0;
	z-index: 40000;
}
h1 {
	font-size: 1.8em !important;
}
h2 {
	font-size: 1.6em !important;
}
h3 {
	font-size: 1.4em !important;
}
h4 {
	font-size: 1.2em !important;
}
h5 {
	font-size: 1em !important;
}
h6 {
	font-size: 0.8em !important;
}
.masthead.segment {
	min-height: 9.7em;
}
.masthead.segment h1.ui.header {
	margin-top: 1em;
}
#about_layout.masthead.segment {
	min-height: 22em;
}
#about_layout.masthead h1.ui.header {
	margin-top: 1.2em;
	font-size: 3.2em !important;
	font-weight: normal;
}
#about_layout.masthead h2 {
	font-size: 1.4em !important;
	font-weight: normal;
}
#menu {
	margin-bottom: 2em;
}

Use different header sizes for about layout and others


@CHARSET "UTF-8";

#container {
	border: 1px solid black;
	padding: 5px;
}

#headerwrap {
	border: 1px solid cyan;
}

#head_left {
	float: left;
	border: 1px solid red;
	height: 50px;
}
#head_center {
	float: left;
	border: 1px solid green;
	height: 50px;
}
#head_right {
/* 	float:left; */
	border: 1px solid red;
	height: 50px;
}

#contentwrap {
	border: 1px solid black;
	height: 500px;
}

@CHARSET "UTF-8";

#container {
	border: 1px solid black;
	padding: 5px;
	width: 800px;
	margin: 0 auto;
}

#headerwrap {
	border: 1px solid cyan;
	padding: 2px;
	overflow: hidden;
}

#head_left {
	float: left;
	border: 1px solid red;
	height: 50px;
	width: 50px;
}
#head_center {
	float: left;
	border: 1px solid green;
	height: 50px;
	width: 400px;
}
#head_right {
	float:left;
	border: 1px solid red;
	height: 50px;
	width: 50px;
}

#contentwrap {
	border: 1px solid magenta;
	height: 500px;
	margin-top: 2px;
}

Add some colored borders an spaces

Add some colored borders an spaces


.absolute_path_logo {
  background-image: url("/phoenix.png");
}

.relative_path_logo {
  background-image: url('../images/relative.png');
}

.absolute_url_logo {
  background-image: url(http://www.phoenixframework.org/absolute.png);
}

.absolute_path_logo{background-image:url(/phoenix.png)}.relative_path_logo{background-image:url(../images/relative.png)}.absolute_url_logo{background-image:url(http://www.phoenixframework.org/absolute.png)}

.absolute_path_logo {
  background-image: url("/phoenix.png");
}

.relative_path_logo {
  background-image: url('../images/relative.png');
}

.absolute_url_logo {
  background-image: url(http://www.phoenixframework.org/absolute.png);
}

.absolute_path_logo{background-image:url(/phoenix.png)}
.relative_path_logo{background-image:url(../images/relative.png)}
.absolute_url_logo{background-image:url(http://www.phoenixframework.org/absolute.png)}

Break css in fixture over multiple lines


body {
	background: #eee;
	margin: 0;
	padding: 1em;
}
#busy {
	position: fixed;
	z-index: 1;
	left: 50%;
	top: 50%;
	width: 10em;
	height: 2em;
	margin: -10em 0 0 -2em;
	line-height: 2em;
	text-align: center;
	background: #333;
	color: #fff;
	opacity: 0.8;
}
#graph_form {
	position: fixed;
	z-index: 2;
	left: 1em;
	top: 1em;
}
#graph_container {
	background: #fff;
	margin: 0 auto;
}
#graph_texts {
	position: relative;
}
#graph_texts div div {
	position: absolute;
}

body {
	background: #eee;
	margin: 0;
	padding: 1em;
}
#busy {
	position: fixed;
	z-index: 1;
	left: 50%;
	top: 50%;
	width: 10em;
	height: 2em;
	margin: -1em 0 0 -5em;
	line-height: 2em;
	text-align: center;
	background: #333;
	color: #fff;
	opacity: 0.8;
}
#graph_form {
	position: fixed;
	z-index: 2;
	left: 1em;
	top: 1em;
}
#graph_container {
	background: #fff;
	margin: 0 auto;
}
#graph_texts {
	position: relative;
}
#graph_texts div div {
	position: absolute;
}

Correct the centering of the busy / loading indicator.

git-svn-id: d236aa11b63010c45751038f21095274a1190d52@12 96afbf3d-d051-0410-af9b-0f47d9322047


.column-error_status .tooltip {
	display: none;
}
.column-error_status .dashicons-editor-help {
	color: #767676;
}
.column-sources_with_invalid_output .dashicons {
	margin-right: 5px;
}
.column-sources_with_invalid_output .dashicons-admin-plugins {
	color: #64a2e9;
}
.column-sources_with_invalid_output .dashicons-admin-appearance {
	color: #ebb04f;
}
.column-sources_with_invalid_output .dashicons-wordpress-alt {
	color: #92b371;
}
.sources-plugins, .sources-core {
	margin-left: 25px;
	margin-bottom: 15px;
}
.amp-logo-icon {
	background-image: url( '../images/amp-logo-icon.svg' );
	background-color: transparent;
	background-size: 20px 20px;
	height: 20px;
	width: 20px;
	display: inline-block;
}
.column-error_status .error-status {
	line-height: 20px;
	display: inline-block;
	position: relative;
	vertical-align: top;
	margin-left: 10px;
}
td.column-found_elements_and_attributes {
	color: #c06e60;
}

Add color to removed elements column text


th, td {
    white-space: nowrap;
    text-align: center;
}

.table > thead > tr > th {
    padding: 8px 32px;
}

.yadcf-filter-wrapper {
    display: block;
}

.dataTables_filter {
    display: none;
}

Add yadcf and datatable search box style


body {
  font-family: serif;
}
.header {
  text-align: center;
}

.header > p {
  font-weight: bold;
}

.nav {
  background-color: #f9d1e9;
  color: #FFFFFF;
  list-style: none;
  text-align: center;
  font-weight: bold;
  padding: 20px 0 20px 0
}

.nav li {
  display: inline-block;
  padding-right: 50px;
}

.nav > li > a {
  text-decoration: none;
  color: #FFFFFF;
}

.nav > li > a:hover {
  color: teal;
}

h1, h2 {
  color: #999;
}
h3 {
  color: teal;
}
p {
  color: #646362;
}

a {
  color: #F28445;
}

img {
  align-self: center;
  border-radius: 15px;
  corner-shape: bevel;
}

.footer {

}

body {
  font-family: sans-serif;
}
.header {
  text-align: center;
}

.header > p {
  font-weight: bold;
}

.nav {
  background-color: #f9d1e9;
  color: #FFFFFF;
  list-style: none;
  text-align: center;
  font-weight: bold;
  padding: 20px 0 20px 0
}

.nav li {
  display: inline-block;
  padding-right: 50px;
}

.nav > li > a {
  text-decoration: none;
  color: #FFFFFF;
}

.nav > li > a:hover {
  color: teal;
}

h1, h2 {
  color: #999;
}
h3 {
  color: teal;
}
p {
  color: #646362;
}

a {
  color: #F28445;
}

img {
  align-self: center;
  border-radius: 15px;
  corner-shape: bevel;
}

.footer {

}

Add font family to body

Add font family to body


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

.select {
  composes: reset-font-smoothing;
  font-family: var(--font-family-regular);
  font-size: calc(1.4 * var(--unit));
  border-color: var(--color-neutral-dark);
  max-width: 360px;
}

.dropdown-indicator {
  border: 0 !important;
  border-radius: 0 4px 4px 0;
  min-height: 100%;
}

.validation-icon {
  margin-top: -1px;
}

.has-error {
  &:not(.is-inverse) .validation-text {
    color: var(--color-ruby-dark);
  }

  &.is-inverse .validation-text {
    color: var(--color-ruby-light);
  }
}

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

.select {
  composes: reset-font-smoothing;
  font-family: var(--font-family-regular);
  font-size: calc(1.4 * var(--unit));
  border-color: var(--color-neutral-dark);
}

.dropdown-indicator {
  border: 0 !important;
  border-radius: 0 4px 4px 0;
  min-height: 100%;
}

.validation-icon {
  margin-top: -1px;
}

.has-error {
  &:not(.is-inverse) .validation-text {
    color: var(--color-ruby-dark);
  }

  &.is-inverse .validation-text {
    color: var(--color-ruby-light);
  }
}

Remove the max-width so it becomes fluid


/*
* Table Cell Counter
*
* Adapted from:
* http://stackoverflow.com/questions/17012421/auto-number-table-rows
* You can turn the first cell of a table into a row counter using these
* styles. Even works on IE8+!
* Also would technically work with any element
*/
tbody {
    counter-reset: rowNumber;
}

tbody tr {
    counter-increment: rowNumber;
}

tbody tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
}

Add note on how to number table rows using CSS


@import url("theme.css");

.wy-nav-side {
   padding-bottom: 3em;
}

.wy-nav-side .logo {
  padding: 2em;
}

Reduce logo size via padding

Reduce logo size via padding

Signed-off-by: Niklas Koep <342d5290239d9c5264c8f98185afedb99596601a@gmail.com>


$fg-color: #222;
$bg-color: white;
$arrow-size: 10px;
$vertical-border-color: #cacaca;

.container {
  z-index: 10;

  /* Prevents the popper from shifting when adding it to the DOM
   * triggers showing the scrollbars.
   * https://github.com/FezVrasta/popper.js/issues/457#issuecomment-367692177
   */
  top: 0;
  font-size: 12px;

  button:enabled {
    cursor: pointer;
  }
}

.arrow {
  position: absolute;
  border: $arrow-size solid transparent;
  margin: $arrow-size;
}

.container[data-placement^='bottom'] .arrow {
  border-top-width: 0;
  border-bottom-color: $bg-color;
  margin-top: 0;
}

.content {
  border-right: 1px solid $vertical-border-color;
  border-bottom: 1px solid var(--header-accent-border);
  border-left: 1px solid $vertical-border-color;
  margin: $arrow-size;
  background: $bg-color;
  border-radius: var(--header-border-radius);
  box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.6), inset 0 1px 0 white;
  color: $fg-color;
}

$fg-color: #222;
$bg-color: white;
$arrow-size: 10px;
$vertical-border-color: #cacaca;

.container {
  z-index: 10;

  /* Prevents the popper from shifting when adding it to the DOM
   * triggers showing the scrollbars.
   * https://github.com/FezVrasta/popper.js/issues/457#issuecomment-367692177
   */
  top: 0;
  font-size: 12px;

  button:enabled {
    cursor: pointer;
  }
}

.arrow {
  border: $arrow-size solid transparent;
}

.container[data-placement^='bottom'] .arrow {
  border-top-width: 0;
  border-bottom-color: $bg-color;
  margin-top: 0;
}

.content {
  border-right: 1px solid $vertical-border-color;
  border-bottom: 1px solid var(--header-accent-border);
  border-left: 1px solid $vertical-border-color;
  margin: $arrow-size;
  background: $bg-color;
  border-radius: var(--header-border-radius);
  box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.6), inset 0 1px 0 white;
  color: $fg-color;
}

Adjust positioning of the popper arrow so it is centered


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

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

.root {
  padding-left: 20px;
  padding-right: 20px;
}

.container {
  margin: 0 auto;
  padding: 0 0 40px;
  max-width: var(--max-content-width);
}

.notLoggedInContainer,
.noGroupContainer,
.holidayContainer {
  width: 100%;
  height: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}

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

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

.logoContainer img,
.noGroupContainer img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  text-align: center;
  margin-bottom: 20px;
}

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

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

.root {
  padding-left: 20px;
  padding-right: 20px;
}

.container {
  margin: 0 auto;
  padding: 0 0 40px;
  max-width: var(--max-content-width);
}

.notLoggedInContainer,
.noGroupContainer,
.holidayContainer {
  width: 100%;
  height: 100%;
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
}

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

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

.logoContainer img,
.noGroupContainer img,
.holidayContainer img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  text-align: center;
  margin-bottom: 20px;
}

Add styling for holiday container img

Add styling for holiday container img


@import url('file:///home/z/.cache/wal/firefox.css');

/* All tabs in the tab bar */
#tabbrowser-tabs {
    background-color: var(--color3) !important;
    color: var(--color7) !important;
}

/* The currently selected tab */
.tabbrowser-tab[selected=true] {
    background-color: var(--color2) !important;
    color: var(--color7) !important;
}

/* When hovering over an available tab */
.tabbrowser-tab[beforeselected=true]:hover {
    background-color: var(--color7) !important;
    color: var(--color0) !important;
}

/* The section right below the tabs, contains the URL entry and search
   bar, bookmarks, etc. */
#nav-bar {
    background-color: var(--color7) !important;
    color: var(--color0) !important;
}

/* When hovering over the button to create a new tab */
#new-tab-button {
    background-color: var(--color7) !important;
    color: var(--color0) !important;
}

/* For reference:      */
/* --color0 == black   */
/* --color1 == red     */
/* --color2 == green   */
/* --color3 == yellow  */
/* --color4 == blue    */
/* --color5 == magenta */
/* --color6 == cyan    */
/* --color7 == white   */

@import url('file:///home/z/.cache/wal/firefox.css');

/* All tabs in the tab bar */
#tabbrowser-tabs {
    background-color: var(--color3) !important;
    color: var(--color7) !important;
}

/* The currently selected tab */
.tabbrowser-tab[selected] {
    background-color: var(--color2) !important;
    color: var(--color7) !important;
}

/* When hovering over an available tab */
.tabbrowser-tab:not([selected]):hover {
    background-color: var(--color7) !important;
    color: var(--color0) !important;
}

/* The section right below the tabs, contains the URL entry and search
   bar, bookmarks, etc. */
#nav-bar {
    background-color: var(--color7) !important;
    color: var(--color0) !important;
}

/* For reference:      */
/* --color0 == black   */
/* --color1 == red     */
/* --color2 == green   */
/* --color3 == yellow  */
/* --color4 == blue    */
/* --color5 == magenta */
/* --color6 == cyan    */
/* --color7 == white   */

Fix color issue when hovering over tabs

Fix color issue when hovering over tabs


.root {
	position: relative;
	composes: border from "../../styles/colors.css";
	margin-bottom: 30px;
	border-radius: 3px 3px 0 3px;
}

.preview {
	margin-bottom: 3px;
	padding: 15px;
}

.codeToggle {
	composes: font from "../../styles/common.css";
	composes: border link from "../../styles/colors.css";
	position: absolute;
	right: -1px;
	bottom: -26px;
	cursor: pointer;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	border-top: 0;
	padding: 4px 8px;
	font-size: 14px;
}

.showCode {
	composes: base-bg from "../../styles/colors.css";
	composes: codeToggle;
}

.hideCode {
	composes: code-bg from "../../styles/colors.css";
	composes: codeToggle;
}

.root {
	position: relative;
	composes: border from "../../styles/colors.css";
	margin-bottom: 30px;
	border-radius: 3px 3px 0 3px;
}

.preview {
	margin-bottom: 3px;
	padding: 15px;
}

.codeToggle {
	composes: font from "../../styles/common.css";
	composes: border link from "../../styles/colors.css";
	position: absolute;
	right: -1px;
	bottom: -27px;
	cursor: pointer;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	border-top: 0;
	padding: 6px 8px;
	font-size: 14px;
	line-height: 1;
}

.showCode {
	composes: base-bg from "../../styles/colors.css";
	composes: codeToggle;
}

.hideCode {
	composes: code-bg from "../../styles/colors.css";
	composes: codeToggle;
}

Make code toggle more bullet-proof.

Make code toggle more bullet-proof.


@import 'normalize.css';

body,
.cf {
  *zoom: 1;
}
body:before,
.cf:before,
body:after,
.cf:after {
  content: '';
  display: table;
}
body:after,
.cf:after {
  clear: both;
}
*,
*:before,
*:after,
*::before,
*::after {
  *behavior: url("js/vendor/boxsizing.htc");
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  overflow-y: scroll;
  overflow-x: hidden;
}
body {
  width: 100%;
}
img,
video,
audio,
embed,
object,
input,
iframe {
  max-width: 100%;
}
.browsehappy {
  width: 100%;
  padding: 15px 0;
  background: #fff;
  border-bottom: 1px solid #ddd;
}
.browsehappy p {
  text-align: center;
}
.browsehappy p:last-of-type {
  margin-bottom: 0;
}
.browsehappy a {
  color: #00f;
}

@import 'normalize.css';

body,
.cf {
  *zoom: 1;
}
body:before,
.cf:before,
body:after,
.cf:after {
  content: '';
  display: table;
}
body:after,
.cf:after {
  clear: both;
}
*,
*:before,
*:after,
*::before,
*::after {
  *behavior: url("js/vendor/boxsizing.htc");
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  overflow-y: scroll;
  overflow-x: hidden;
}
body {
  width: 100%;
}
img,
video,
audio,
embed,
object,
input,
iframe {
  max-width: 100%;
}
.browsehappy {
  width: 100%;
  padding: 15px 0;
  background: #fff;
  border-bottom: 1px solid #ddd;
}
.browsehappy p {
  text-align: center;
}
.browsehappy p:last-of-type {
  margin-bottom: 0;
}
.browsehappy a {
  color: #5eccf7;
}

Make browse happy link prettier

Make browse happy link prettier


body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

#site-title, .t {
  transition: 0.3s;
  transition-timing-function: ease;
}

#site-title {
  height: 40px;
  overflow: hidden;
}

#site-title span {
  display: block;
}

#site-title:hover .t {
  margin-top: -30px;
}

.wallpaper, footer {
  margin-bottom: 2.5rem;;
}

@media (max-width: 575.98px) {
  h1 {
    font-size: 1.7rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  h1.title {
    font-size: 1.2rem;
  }
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

#site-title, .t {
  transition: 0.3s;
  transition-timing-function: ease;
}

#site-title {
  height: 40px;
  overflow: hidden;
}

#site-title span {
  display: block;
}

#site-title .t {
  margin-top: 0;
}

#site-title:hover .t {
  margin-top: -30px;
}

.wallpaper, footer {
  margin-bottom: 2.5rem;;
}

@media (max-width: 575.98px) {
  h1 {
    font-size: 1.7rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  h1.title {
    font-size: 1.2rem;
  }
}

Fix transition on page load

Fix transition on page load


#copyurlsexpert-toolbar-btnmain {
  list-style-image: url(chrome://copy-urls-expert/skin/cue-icon16.png);
}

/* Inside customization panel, use a 32x32 image (FF 29+)*/
.customization-palette #copyurlsexpert-toolbar-btnmain {
  list-style-image: url(chrome://copy-urls-expert/skin/cue-icon.png);
}

Fix blurry icon in customization panel FF29+


.container {
  width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px dotted black;
}

.post {
  margin-bottom: 5%;
}

h3
{
  text-align: center;
}

footer
{
  margin-left: 7%;
  margin-right: 7%;
}

#left-header {
  float: left;
}

#right-header {
  float: right;
}

#computer-logo {
  height: auto;
  width: auto;
  max-width: 150px;
  max-height: 150px;
}

html {
  background-color: #f1f1f1;
}

Add light gray background color

Add light gray background color


/*
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 * https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66
 * https://www.codementor.io/karaluton/a-beginner-s-guide-to-css-grid-j27g9uqys?utm_swu=7100
*/

header { grid-area: header }
main   { grid-area: main   }
aside  { grid-area: aside  }
footer { grid-area: footer }

body {
  display: grid;
  grid-template-areas:
    "header" "main" "aside" "footer"
}

@media ( orientation : landscape ) {
  body {
    grid-template-areas:
      "header header" "main aside" "footer footer";

    grid-template-columns: 70% 30%;
    grid-template-rows: 15vh 1fr  15v
  }
}

/*
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
 * https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66
 * https://www.codementor.io/karaluton/a-beginner-s-guide-to-css-grid-j27g9uqys?utm_swu=7100
*/

header { grid-area: header }
main   { grid-area: main   }
aside  { grid-area: aside  }
footer { grid-area: footer }

body {
  display: grid;
  grid-template-areas:
    "header" "main" "aside" "footer"
}

@media ( orientation : landscape ) {
  body {
    grid-template-areas:
      "header header" "main aside" "footer footer";

    grid-template-columns: 70% 30%;
    grid-template-rows: 15vh 70vh  15vh
  }
}

Update CSS grid template rows

Update CSS grid template rows