/*
 * Author:        Pierre-Henry Soria <hello@ph7cms.com>
 * Copyright:     (c) 2018, Pierre-Henry Soria. All Rights Reserved.
 * License:       GNU General Public License; See PH7.LICENSE.txt and PH7.COPYRIGHT.txt in the root directory.
 */

h2 {
    text-transform: uppercase;
    text-decoration: underline;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.profile-section {
    padding-bottom: 4rem;
}

.profile-section::after {
    position: absolute;
    left: 40px;
    right: 40px;
    content: '';
    padding-bottom: 4rem;
    border-bottom: 1px solid #ddd;
}

.chat, .message, .friend, .heart {
    font-size: 80px;
    line-height: 100px;
}

.chat {
    color: #ff4000;
}

.message {
    color: #45c000;
}

.friend {
    color: #2b65f8;
}

.heart {
    color: #F06;
}

/*
 * Author:        Pierre-Henry Soria <hello@ph7cms.com>
 * Copyright:     (c) 2018, Pierre-Henry Soria. All Rights Reserved.
 * License:       GNU General Public License; See PH7.LICENSE.txt and PH7.COPYRIGHT.txt in the root directory.
 */

h2 {
    text-transform: uppercase;
    text-decoration: underline;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.profile-section {
    padding-bottom: 4rem;
}

.profile-section::after {
    position: absolute;
    left: 40px;
    right: 40px;
    content: '';
    padding-bottom: 2rem;
    border-bottom: 1px solid #ddd;
}

.chat, .message, .friend, .heart {
    font-size: 80px;
    line-height: 100px;
}

.chat {
    color: #ff4000;
}

.message {
    color: #45c000;
}

.friend {
    color: #2b65f8;
}

.heart {
    color: #F06;
}

.bottom {
    float: none !important;
}

Fix "picture"/"video" sections on profile page

(better design style + fix button not linkable)


/*

  Text Align

*/

.tl  { text-align: left; }
.tr  { text-align: right; }
.tc  { text-align: center; }

@media (--breakpoint-not-small) {
  .tl-ns  { text-align: left; }
  .tr-ns  { text-align: right; }
  .tc-ns  { text-align: center; }
}

@media (--breakpoint-medium) {
  .tl-m  { text-align: left; }
  .tr-m  { text-align: right; }
  .tc-m  { text-align: center; }
}

@media (--breakpoint-large) {
  .tl-l  { text-align: left; }
  .tr-l  { text-align: right; }
  .tc-l  { text-align: center; }
}

/*

  Text Align

*/

.tl  { text-align: left; }
.tr  { text-align: right; }
.tc  { text-align: center; }
.tj  { text-align: justify; }

@media (--breakpoint-not-small) {
  .tl-ns  { text-align: left; }
  .tr-ns  { text-align: right; }
  .tc-ns  { text-align: center; }
  .tj-ns  { text-align: justify; }
}

@media (--breakpoint-medium) {
  .tl-m  { text-align: left; }
  .tr-m  { text-align: right; }
  .tc-m  { text-align: center; }
  .tj-m  { text-align: justify; }
}

@media (--breakpoint-large) {
  .tl-l  { text-align: left; }
  .tr-l  { text-align: right; }
  .tc-l  { text-align: center; }
  .tj-l  { text-align: justify; }
}

Add class for justifying text.

Add class for justifying text.


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

.resource-dropdown-menu {
    padding: 12px;
    width: 250px;
}

.copy-resource-id {
    font-weight: normal !important;
    font-size: 14px !important;
    line-height: 1.42857143  !important;
}

.resource-option-key {
}

.resource-option-value {
    display: inline-block;
    text-align: left !important;
    margin-left: 165px;
    width: 200px;
}

.progress {
  max-width: 600px;
  margin:    0.2em 0 0.2em 0;
}

.progress .bar {
  height:  1.2em;
  padding-left: 0.2em;
  color:   white;
  display: none;
}

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

.resource-dropdown-menu {
    padding: 12px;
    width: 250px;
}

.copy-resource-id {
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.42857143  !important;
}

.resource-option-key {
}

.resource-option-value {
    display: inline-block;
    margin-left: 165px;
    text-align: left !important;
    width: 200px;
}

.progress {
  max-width: 600px;
  margin:    0.2em 0 0.2em 0;
}

.progress .bar {
  height:  1.2em;
  padding-left: 0.2em;
  color:   white;
  display: none;
}

Sort CSS properties with alphabetical order


.se-container {
    background: transparent;
}

.se-container.loading.disabled {
    opacity: 1;
}

.se-container-disable-layer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    z-index: 100111;
    background: transparent;
}

.loading > .se-container-disable-layer {
    background: rgba(255, 255, 255, 0.40);
    text-align: center;
}

.se-container-disable-layer > i {
    display: none;
    font-size: 40pt;
    color: #002d67;
    text-shadow: 0px 0px 3px #60c1cf;
}

.loading > .se-container-disable-layer > i {
    display: inline-block;
}

.se-container {
    background: transparent;
}

.se-container.loading.disabled {
    opacity: 1;
}

.se-container > .se-container-disable-layer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    z-index: 100111;
    background: transparent;
}

.loading > .se-container-disable-layer {
    background: rgba(255, 255, 255, 0.40);
    text-align: center;
}

.se-container-disable-layer > i {
    display: none;
    font-size: 40pt;
    color: #002d67;
    text-shadow: 0px 0px 3px #60c1cf;
}

.loading > .se-container-disable-layer > i {
    display: inline-block;
}

Fix some problems with the style of the se-container-disable-layer


/**
 * "Yet Another Multicolumn Layout" - YAML CSS Framework
 *
 * central stylesheet - layout example "flexible-grids"
 *
 * @copyright       Copyright 2005-2012, Dirk Jesse
 * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-CDL (http://www.yaml.de/license.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         v4.0.1
 * @lastmodified    $Date: 2012-03-03 11:45:41 +0100 (Sa, 03 Mrz 2012) $
 */

/* Google Font API */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700|Droid+Sans:700);

/* import core styles | Basis-Stylesheets einbinden */
@import url(../../yaml/core/base.css);

/* import screen layout | Screen-Layout einbinden */
@import url(../../yaml/navigation/hlist.css);
@import url(../../yaml/forms/gray-theme.css);

@import url(../../yaml/screen/typography.css);
@import url(../../yaml/screen/screen-FULLPAGE-layout.css);

/* import print layout | Druck-Layout einbinden */
@import url(../../yaml/print/print.css);

/**
 * "Yet Another Multicolumn Layout" - YAML CSS Framework
 *
 * central stylesheet - layout example "flexible-grids"
 *
 * @copyright       Copyright 2005-2012, Dirk Jesse
 * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-CDL (http://www.yaml.de/license.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         v4.0.1
 * @lastmodified    $Date: 2012-03-03 11:45:41 +0100 (Sa, 03 Mrz 2012) $
 */

/* import core styles | Basis-Stylesheets einbinden */
@import url(../../yaml/core/base.css);

/* import screen layout | Screen-Layout einbinden */
@import url(../../yaml/navigation/hlist.css);
@import url(../../yaml/forms/gray-theme.css);

@import url(../../yaml/screen/typography.css);
@import url(../../yaml/screen/screen-FULLPAGE-layout.css);

/* import print layout | Druck-Layout einbinden */
@import url(../../yaml/print/print.css);

Remove the call to google's font API

Remove the call to google's font API

We don't use the Droid font anymore and Open Sans is now served locally


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

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

Include css components as load path.

Include css components as load path.


html
{
	height:100%;
}
body
{
	background-color:#cccccc;
	height:100%;
}

.files
{
	float:top;
	background-color:#ccccff;
	margin:3px;
	padding:2px;
	overflow:auto;
}
.directories
{
	float:top;
	background-color:#9999ff;
	margin:3px;
	padding:2px;
}
#parent
{
	background-color:#bbbbff;
	padding:10px;
	height: 100%;
}
#browse-list
{
	float:left;
	background-color:#6060ff;
	padding:3px;
	width:50%;
	border-radius:5px;
}
.download
{
	float:left;
	width:20%;
	height:100%;
}
.filename
{
	float:top;
	width:80%;
	height:100%;
	float:left;
}

html
{
	height:100%;
}
body
{
	background-color:#cccccc;
	height:100%;
}

.files
{
	float:top;
	background-color:#ccccff;
	margin:3px;
	padding:2px;
	overflow:auto;
}
.directories
{
	float:top;
	background-color:#9999ff;
	margin:3px;
	padding:2px;
}
#parent
{
	background-color:#bbbbff;
	padding:10px;
	height: 100%;
	overflow:auto;
}
#browse-list
{
	float:left;
	background-color:#6060ff;
	padding:3px;
	width:50%;
	border-radius:5px;
}
.download
{
	float:left;
	width:20%;
	height:100%;
}
.filename
{
	float:top;
	width:80%;
	height:100%;
	float:left;
}

Update css with overflow auto on parent

Update css with overflow auto on parent


.signature {
	position: fixed;
	left: 10px;
	border: 1px solid #e8e8e8;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
	border-radius: 4px;
}

.signature-background .action {
	margin-left: 5px;
}

.signature-background {
	background-color: #D3D7DC;
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	z-index: 1001;
	width: 100%;
	height: 100%;
}

.signature {
	position: relative;
	left: 10px;
	border: 1px solid #e8e8e8;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
	border-radius: 4px;
}

.signature-background .action {
	margin-left: 5px;
}

.signature-background {
	background-color: #D3D7DC;
	position: relative;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

Bugfix: Expand to fill container, not entire window

If this is to be loaded in a modal or as part of a form it should only take up the whole window if that div takes up the whole window.

For Example:
```html
<div class="modal">
  <div class="mr-signature-pad"></div>
</div>
```


.text-editor {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
}

.text-editor div {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.edit-name {
    margin-top: 1px;
    height: 30%;
    -moz-user-modify: read-write-plaintext-only;
    -webkit-user-modify: read-write-plaintext-only;
    -ms-user-modify: read-write-plaintext-only;
    user-modify: read-write-plaintext-only;
}

.edit-description {
    height: 70%;
    margin-top: 2%;
}

/* Override the styles from the zenpen-editor where appropriate. */

blockquote {
    border-color: deepskyblue;
    background: #DDD;
    margin-left: 0;
}

.text-editor {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
}

.text-editor div {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.edit-name {
    margin-top: 1px;
    height: 50%;
    -moz-user-modify: read-write-plaintext-only;
    -webkit-user-modify: read-write-plaintext-only;
    -ms-user-modify: read-write-plaintext-only;
    user-modify: read-write-plaintext-only;
    border-bottom: thin solid black;
}

.edit-description {
    height: 50%;
    margin-top: 2%;
    font-size: small;
}

/* Override the styles from the zenpen-editor where appropriate. */

blockquote {
    border-color: deepskyblue;
    background: #DDD;
    margin-left: 0;
}

Put a dividing line between name and description in edit mode. Made them take up half the space each. Description now has smaller text.


body {
  margin: 0;
  background: aqua;
}

navbar {
  display: block;
  width: 100%;
  height: 30px;
}

input[type=text] {
  width: 70%;
  height: 30px;
  border: none;
  padding: 0;
  font-size: 12px;
  text-indent: 5px;
}

input[type=submit] {
  width: 30%;
  height: 30px;
  padding: 0;
  border: none;
}

.welcomeHeader {
  text-align: center;
}

.currentWeatherSection {
  text-align: center;
}

.currentCity {
  text-align: center;
}

.currentDay {
  text-align: center;
}

.currentTemp {
text-align: center;
}

.simpleForecast {
  text-align: center;
}

.weatherIcon {
  display: block;
  font-size: 80px;
  text-align: center;
}

.weatherSum {
  text-align: center;
}

.loHiContainer {
  position: relative;
}

.currentHi {
  position: absolute;
  top: 0;
  right: 10px;
}
.currentLo {
  position: absolute;
  top: 0;
  left: 10px;
}

body {
  margin: 0;
  background: aqua;
}

navbar {
  display: block;
  width: 100%;
  height: 30px;
}

input[type=text] {
  width: 70%;
  height: 30px;
  border: none;
  padding: 0;
  font-size: 12px;
  text-indent: 5px;
}

input[type=submit] {
  width: 30%;
  height: 30px;
  padding: 0;
  border: none;
}

.welcomeHeader {
  text-align: center;
}

.currentWeatherSection {
  text-align: center;
}

.currentCity {
  text-align: center;
}

.currentDay {
  text-align: center;
}

.currentTemp {
text-align: center;
font-size: 7em;
}

.fahrenheit {
  font-size:.25em;
}

.simpleForecast {
  text-align: center;
}

.weatherIcon {
  display: block;
  font-size: 80px;
  text-align: center;
}

.weatherSum {
  text-align: center;
}

.loHiContainer {
  position: relative;
}

.currentHi {
  position: absolute;
  top: 0;
  right: 10px;
}
.currentLo {
  position: absolute;
  top: 0;
  left: 10px;
}

Add styling for F symbol.

Add styling for F symbol.


body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a{
color: #00B7FF;
}
#body {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}
#content {
  width: 690px;
  height: 300px;
  overflow: auto;
  background-color: #eee;
  margin-bottom: 1em;
  margin-right: 10px;
}
#content li { padding: 5px 10px; }
#content li:nth-child(odd) { background: #eee; }
#data {
  width: 700px;
  margin-bottom: 1em;
  margin-right: 1em;
}

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a{
color: #00B7FF;
}
#body {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}
#defaultRoomContent {
  width: 690px;
  height: 300px;
  overflow: auto;
  background-color: #eee;
  margin-bottom: 1em;
  margin-right: 10px;
}
#room1Content {
  width: 690px;
  height: 300px;
  overflow: auto;
  background-color: #eee;
  margin-bottom: 1em;
  margin-right: 10px;
}
#room2Content {
  width: 690px;
  height: 300px;
  overflow: auto;
  background-color: #eee;
  margin-bottom: 1em;
  margin-right: 10px;
}
.marginStyle {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
  }
#content li:nth-child(odd) { background: #eee; }
#data {
  width: 700px;
  margin-bottom: 1em;
  margin-right: 1em;
}

Add css ID for multiple msg content div

Add css ID for multiple msg content div


Update cache busting for rps-competition.social-buttons


#toc-overlay {
	position: fixed;
	top: 15px;
	right: 15px;
	bottom: 50px;
	z-index: 1000;

	font-family: Menlo, monospace;
	font-size: 12px;
}

#toc-results {
	overflow: scroll;
	max-height: 100%;
	border: 1px solid lightgray;
}

div.toc-entry {
	cursor: hand;
}

.toc-entry {
	color: inherit;
	background: white;
}
.toc-entry:hover {
	background: rgb(92.5%, 92.5%, 92.5%);
}
.toc-highlighted, .toc-highlighted:hover, a.toc-highlighted:hover {
	color: white;
	background: rgb(21%, 45%, 84%);
}

#toc-overlay {
	position: fixed;
	top: 15px;
	right: 15px;
	bottom: 50px;
	z-index: 1000;
	pointer-events: none;

	font-family: Menlo, monospace;
	font-size: 12px;
}

#toc-results {
	overflow: scroll;
	max-height: 100%;
	border: 1px solid lightgray;
	pointer-events: initial;
}

div.toc-entry {
	cursor: hand;
}

.toc-entry {
	color: inherit;
	background: white;
}
.toc-entry:hover {
	background: rgb(92.5%, 92.5%, 92.5%);
}
.toc-highlighted, .toc-highlighted:hover, a.toc-highlighted:hover {
	color: white;
	background: rgb(21%, 45%, 84%);
}

table-of-contents: Fix issue where invisible part of overlay blocked pointer events.


*.AnerleyTileAvatar
{
  border-image: url("file://avatar-bg.png") 7 8 9 8;
  padding: 9 10 11 10;
}

AnerleyTile
{
  padding: 7 8 9 8;
}

AnerleyTile:hover
{
  border-image: url("file://tile-bg-hover.png") 5 6 7 6;
}

*.AnerleyTilePrimaryLabel
{
  font-family: "Liberation Sans";
  font-size: 14;
}

*.AnerleyTileSecondaryLabel
{
  font-family: "Liberation Sans";
  font-size: 13;
  color: #3e3e3eff;
}

*.AnerleyTileAvatar
{
  border-image: url("file://avatar-bg.png") 7 8 9 8;
  padding: 9 10 11 10;
}

AnerleyTile
{
  padding: 7 8 9 8;
}

AnerleyTile:hover
{
  border-image: url("file://tile-bg-hover.png") 5 6 7 6;
}

*.AnerleyTilePrimaryLabel
{
  font-family: "Droid Sans";
  font-size: 14;
}

*.AnerleyTileSecondaryLabel
{
  font-family: "Droid Sans";
  font-size: 13;
  color: #3e3e3eff;
}

Switch to using Droid Sans rather than Liberation Sans


nav {
  padding: 0 0 10px 0;
  border-bottom: 1px solid gray;
}
nav a {
  padding: 5px 10px;
  text-decoration: none;
  margin-top: 10px;
  display: inline-block;
  background-color: #eee;
  border-radius: 5px;
}
nav a:visited, a:link {
  color: #607D8B;
}
nav a:hover {
  color: #039be5;
  background-color: #CFD8DC;
}
nav a.active {
  color: #039be5;
  font-weight: bold;
}

nav {
  padding: 0 0 10px 0;
  border-bottom: 1px solid gray;
}
nav a {
  padding: 5px 10px;
  text-decoration: none;
  margin: 10px 5px 0;
  display: inline-block;
  background-color: #eee;
  border-radius: 5px;
}
nav a:visited, a:link {
  color: #607D8B;
}
nav a:hover {
  color: #039be5;
  background-color: #CFD8DC;
}
nav a.active {
  color: #039be5;
  font-weight: bold;
}

Fix margin for nav links

Fix margin for nav links


.dp-picture.dp-plugin-imbo {
    border: 1px solid #000;
    margin: 10px 18px 10px 9px;
}

.dp-picture.dp-plugin-imbo img {
    max-width: 100%;
}

.dp-picture.dp-plugin-imbo .dp-article-image-title,
.dp-picture.dp-plugin-imbo .dp-article-image-description,
.dp-picture.dp-plugin-imbo .dp-article-image-description p,
.dp-picture.dp-plugin-imbo .dp-article-image-byline {
    line-height: 1.5em;
}

.dp-picture.dp-plugin-imbo .dp-article-image-title:empty {
    display: none;
}

Adjust line heights for description and byline


pre {
    background: #ffffcc;
    padding-left: 5px;
}

div.body {
    min-height: 650px;
}

div.header, div.footer {
    color: #666666;
    font-size: 9pt;
}

pre {
    background: #ffffcc;
    padding-left: 5px;
}

div.body {
    min-height: 600px;
}

div.header, div.footer {
    color: #666666;
    font-size: 9pt;
}

Reduce minimum body height even more

Reduce minimum body height even more


body {
  font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.body-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 24px;
}

.body-margin {
  width: 300px;
  flex-shrink: 2;
}

.page-container {
  width: 100%;
}

.page-container.logged-out {
  margin: 0;
}

.landing-page-img {
  width: 100%;
}

.MuiButton-containedPrimary:enabled, .MuiChip-colorPrimary, span.MuiButton-containedPrimary {
  background-color: #2CAB6F !important;
}

.MuiButton-containedSecondary:enabled, .MuiChip-colorSecondary, span.MuiButton-containedSecondary {
  background-color: #eda14f !important;
}

.MuiFab-root {
  background-color: #ffffff !important;
}

.MuiFab-root:hover {
  background-color: #D5EEE2 !important;
}

Make audio buttons' background white. Add hover color.


/* Bootstrap */

.panel {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.panel-heading {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Font Awesome */
@font-face {
    src: url('../vendor/components-font-awesome/fonts/fontawesome-webfont.eot?v=4.2.0') !important;
    src: url('../vendor/components-font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../vendor/components-font-awesome/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../vendor/components-font-awesome/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../vendor/components-font-awesome/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg') !important;
}

Remove hack lines on css file

Remove hack lines on css file


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

.link {
  composes: reset-font-smoothing;
  cursor: pointer;
  background: transparent;
  border: 0;
  font-size: 100%;
  padding: 0;

  svg {
    transform: translate3d(0, -2px, 0);
  }

  * + svg,
  svg + * {
    margin-left: var(--spacer-smallest);
  }

  &:not(.inherit) {
    color: var(--color-aqua-dark);
    font-family: var(--font-family-regular);
  }

  &.inherit {
    color: inherit;

    &:hover,
    &:active {
      color: inherit;
    }
  }

  &:not(.inherit),
  &.has-icon {
    text-decoration: none;

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

  &.inherit:not(.has-icon) {
    text-decoration: underline;

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

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

.link {
  composes: reset-font-smoothing;
  cursor: pointer;
  background: transparent;
  border: 0;
  font-size: 100%;
  padding: 0;

  svg {
    transform: translate3d(0, -2px, 0);
  }

  * + svg,
  svg + * {
    margin-left: var(--spacer-smallest);
  }

  &:active {
    outline: 0;
  }

  &:not(.inherit) {
    color: var(--color-aqua-dark);
    font-family: var(--font-family-regular);
  }

  &.inherit {
    color: inherit;

    &:hover,
    &:active {
      color: inherit;
    }
  }

  &:not(.inherit),
  &.has-icon {
    text-decoration: none;

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

  &.inherit:not(.has-icon) {
    text-decoration: underline;

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

Remove blue ouline when clicking on a Link with element='button'


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

 */

body { margin:0; padding:0; }

#loader {
    position:absolute; top:0; bottom:0; width:100%;
    background:rgba(255, 255, 255, 1);
    transition:background 1s ease-out;
    -webkit-transition:background 1s ease-out;
}
#loader.done {
    background:rgba(255, 255, 255, 0);
}
#loader.hide {
    display:none;
}
#loader .message {
    position:absolute;
    left:50%;
    top:50%;
}

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

 */

body { margin:0; padding:0; }

#loader {
    position:absolute; top:0; bottom:0; width:100%;
    background: #D1F0FF;
    opacity: 0.75;
    transition:background 1s ease-out;
    -webkit-transition:background 1s ease-out;
}
#loader.done {
    background:rgba(255, 255, 255, 0);
}
#loader.hide {
    display:none;
}
#loader img {
	position: absolute;
  top: 0; bottom:0; left: 0; right:0;
  margin: auto;
  width: 10em;
}

Change styling of loader background - color and opacity; add styling for loader img


.amp-wp-unknown-size [src] {
	/** Worst case scenario when we can't figure out dimensions for an image. **/
	/** Force the image into a box of fixed dimensions and use object-fit to scale. **/
	object-fit: contain;
}

amp-fit-text blockquote,
amp-fit-text h1,
amp-fit-text h2,
amp-fit-text h3,
amp-fit-text h4,
amp-fit-text h5,
amp-fit-text h6 {
	font-size: inherit;
}

/**
 * Override a style rule in Twenty Sixteen and Twenty Seventeen.
 * It set display:none for audio elements.
 * This selector is the same, though it uses amp-audio instead of audio.
 */
body amp-audio:not([controls]) {
	display: inline-block;
	height: auto;
}

.amp-wp-unknown-size [src] {
	/** Worst case scenario when we can't figure out dimensions for an image. **/
	/** Force the image into a box of fixed dimensions and use object-fit to scale. **/
	object-fit: contain;
}

amp-fit-text blockquote,
amp-fit-text h1,
amp-fit-text h2,
amp-fit-text h3,
amp-fit-text h4,
amp-fit-text h5,
amp-fit-text h6 {
	font-size: inherit;
}

/**
 * Override a style rule in Twenty Sixteen and Twenty Seventeen.
 * It set display:none for audio elements.
 * This selector is the same, though it adds body and uses amp-audio instead of audio.
 */
body amp-audio:not([controls]) {
	display: inline-block;
	height: auto;
}

Update comment to account for new body element.


@import 'part:@sanity/base/theme/variables-style';

:root {
  --boolean-input-padding-narrow: calc(var(--medium-padding) - var(--extra-small-padding));
}

.root {
  display: flex;
  align-items: center;
  border: var(--input-border-size) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  padding: var(--boolean-input-padding-narrow);

  @media (--screen-medium) {
    padding: var(--medium-padding);
  }
}

.inputWrapper {
  flex: 1;
  min-width: 0;

  @nest &[data-layout='checkbox'] {
    padding: 2px 0;
  }

  @nest &[data-layout='switch'] {
    margin: -2px 0;
  }
}

@import 'part:@sanity/base/theme/variables-style';

:root {
  --boolean-input-padding-narrow: calc(var(--medium-padding) - var(--extra-small-padding));
}

.root {
  display: flex;
  align-items: center;
  border: 1px solid var(--hairline-color);
  border-radius: var(--border-radius-small);
  padding: var(--boolean-input-padding-narrow);

  @media (--screen-medium) {
    padding: var(--medium-padding);
  }
}

.inputWrapper {
  flex: 1;
  min-width: 0;

  @nest &[data-layout='checkbox'] {
    padding: 2px 0;
  }

  @nest &[data-layout='switch'] {
    margin: -2px 0;
  }
}

Update CSS for boolean input

[form-builder] Update CSS for boolean input


/* Put your CSS here */

html, body {
    height: 100%;
}

.application {
    height: 100%;
}

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

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

#wrap > .container {
    padding: 60px 15px 0;
}

.container .credit {
    margin: 20px 0;
}

#footer > .container {
    padding-left: 15px;
    padding-right: 15px;
}

.navbar-inverse .navbar-nav > li > a.active,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #fff;
    background-color: #080808;
}

.panel-primary > .panel-heading .badge {
    color: #428bca;
    background-color: #fff;
}

@keyframes domChanged { from { background: yellow; } }
@-webkit-keyframes domChanged { from { background: yellow; } }
.ember-view { animation: domChanged 1s; -webkit-animation: domChanged 1s; }

/* Put your CSS here */

html, body {
    height: 100%;
}

.application {
    height: 100%;
}

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

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

#wrap > .container {
    padding: 60px 15px 0;
}

.container .credit {
    margin: 20px 0;
}

#footer > .container {
    padding-left: 15px;
    padding-right: 15px;
}

.navbar-inverse .navbar-nav > li > a.active,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #fff;
    background-color: #080808;
}

.panel-primary > .panel-heading .badge {
    color: #428bca;
    background-color: #fff;
}

.panel .list-group-item h5 {
    margin-top: 0;
}

@keyframes domChanged { from { background: yellow; } }
@-webkit-keyframes domChanged { from { background: yellow; } }
.ember-view { animation: domChanged 1s; -webkit-animation: domChanged 1s; }

Remove margin from h5 element

Remove margin from h5 element


body {
    min-width: 400px;
}

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

div.btn.btn-success {
    float: right;
}

.blocked {
    font-size: 20px;
    height: 50px;
}

div.list {
    min-height: 50px;
    max-height: 285px;
    overflow: auto;
}

div.btn-group {
    padding: 10px 0;
}

.import input {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.panel-body {
    width: 100%;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

body {
    min-width: 400px;
}

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

div.btn.btn-success {
    float: right;
}

.blocked {
    font-size: 20px;
    height: 50px;
}

div.list {
    padding-right: 10px;
    height: 162px;
    overflow: auto;
}

div.list::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

div.list::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
}

div.list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #555;
}

div.btn-group {
    padding: 10px 0;
}

.import input {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.panel-body {
    width: 100%;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.input-group.form-group {
    margin-top: 10px;
}

#option .checkbox.btn {
    margin: 5px 0;
    border-radius: 4px;
}

Change theme of pop-up :)

Change theme of pop-up :)


body {
    margin: 0;
}

#content {
    width:95%;
    margin: auto;
    max-width:960px;
    border: solid grey 2px;
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
}

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

body {
    margin: 0;
}

#content {
    width:95%;
    margin: auto;
    max-width:960px;
    max-height:540px;
    border: solid grey 2px;
    position: absolute;
    top: 0; bottom: 0; right: 0; left: 0;
}

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

Set max-height to avoid start-up flicker


@import 'part:@sanity/base/theme/variables-style';

.resetList {
  display: block;
  margin: 0;
  padding: 0;
}

.resetListItem {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.noLink,
.resetLink {
  color: inherit;
  text-decoration: none;

  @nest &:hover {
    color: inherit;
  }
}

.movingItem {
  z-index: var(--zindex-moving-item);
  position: relative;
  background-color: var(--white);
  composes: shadow-6dp from 'part:@sanity/base/theme/shadows-style';
  box-sizing: content-box;
  overflow: visible;
}

@import 'part:@sanity/base/theme/variables-style';

.resetList {
  display: block;
  margin: 0;
  padding: 0;
}

.resetListItem {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.noLink,
.resetLink {
  color: inherit;
  text-decoration: none;

  @nest &:hover {
    color: inherit;
  }
}

.movingItem {
  z-index: var(--zindex-moving-item);
  position: relative;
  background-color: var(--component-bg);
  composes: shadow-6dp from 'part:@sanity/base/theme/shadows-style';
}

Fix base styles for movingItem

[base] Fix base styles for movingItem


/*Bootstrap modifications*/
.form-control {
  height: 50px;
  font-size: 1.5em;
  margin-bottom: 20px;
}

/*Custom styles*/

.twitter-typeahead {
  width: 100%;
}

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

#intro {
  margin-top: 60px;
}

#intro h1 {
  font-size: 3em;
  margin-bottom: 20px;
}

#intro p {
  font-size: 1.6em;
  font-weight: 200;
  margin-bottom: 30px;
}

#about-wrapper {
  margin-top: 20px;
}

#about-wrapper h1 {
  margin-top: 30px;
  margin-bottom: 50px;
}

#about-wrapper section {
  margin-bottom: 30px;
  margin-top: 20px;
}

#about-wrapper section img {
  margin-bottom: 20px;
  border: 1px solid #dedede;
  box-shadow: 5px 5px 5px #b6b6b6;
}

footer {
  margin-top: 40px;
  padding: 30px 0;
  border-top: 2px solid #dedede;
}

/*Bootstrap modifications*/
.form-control {
  height: 50px;
  font-size: 1.5em;
  margin-bottom: 20px;
}

/*Custom styles*/

.twitter-typeahead {
  width: 100%;
}

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

@media only screen and (max-width: 992px) {
  #map {
    display: none;
  }
}

#intro {
  margin-top: 60px;
}

#intro h1 {
  font-size: 3em;
  margin-bottom: 20px;
}

#intro p {
  font-size: 1.6em;
  font-weight: 200;
  margin-bottom: 30px;
}

#about-wrapper {
  margin-top: 20px;
}

#about-wrapper h1 {
  margin-top: 30px;
  margin-bottom: 50px;
}

#about-wrapper section {
  margin-bottom: 30px;
  margin-top: 20px;
}

#about-wrapper section img {
  margin-bottom: 20px;
  border: 1px solid #dedede;
  box-shadow: 5px 5px 5px #b6b6b6;
}

footer {
  margin-top: 40px;
  padding: 30px 0;
  border-top: 2px solid #dedede;
}

Hide map when small window

Hide map when small window


* {
  margin: 0;
}

header {
  background: #ffb347; /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #ffb347 , #ffcc33); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #ffb347 , #ffcc33); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  height: 8em;
}

nav ul {
  float: right;
  margin-right: 2em;
}

nav ul li {
  list-style: none;
}

Add styling to header in layout

Add styling to header in layout


@charset "UTF-8";
/*
Theme Name: BasalStyle WordPress
Theme URI: https://github.com/viniciusbraga/basalstyle-wordpress
Description: Tema enxuto do WordPress usando o BasalStyle CSS como base de layout.
Author: Vinicius Braga
Version: 0.1
*/

/**
 * Classes disponíveis no tag do BODY quando na seção / página da vez.
 * .body-single
 * .body-page
 * .body-category
 * .body-home
 */

/**
 * Cabeçalho (Header) do Site
 *
 */

/**
 * Corpo do Site
 * Envolve o post, sidebar e tudo que tiver entre o Cabeçalho e o Rodapé.
 *
 */

/**
 * Conteúdo principal
 * Somente a parte do Post
 *
 */

.entry-metadata {
    font-size: 1.3em;
    line-height: 1em;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 3px;
    position: absolute;
}

.entry-title a {
    color: #000000;
    text-decoration: none;
}

@media (max-width: 800px) {

    .entry-metadata {
        margin: 0 16px;
    }

}

/**
 * Rodapé (Footer) do Site
 *
 */

@charset "UTF-8";
/*
Theme Name: BasalStyle WordPress
Theme URI: https://github.com/viniciusbraga/basalstyle-wordpress
Description: Tema enxuto do WordPress usando o BasalStyle CSS como base de layout.
Author: Vinicius Braga
Version: 0.1
*/

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

/**
 * Classes disponíveis no tag do BODY quando na seção / página da vez.
 * .body-single
 * .body-page
 * .body-category
 * .body-home
 */

/**
 * Cabeçalho (Header) do Site
 *
 */

/**
 * Corpo do Site
 * Envolve o post, sidebar e tudo que tiver entre o Cabeçalho e o Rodapé.
 *
 */

/**
 * Conteúdo principal
 * Somente a parte do Post
 *
 */

.entry-metadata {
    font-size: 1.3em;
    line-height: 1em;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 3px;
    position: absolute;
}

.entry-title a {
    color: #000000;
    text-decoration: none;
}

@media (max-width: 800px) {

    .entry-metadata {
        margin: 0 16px;
    }

}

/**
 * Rodapé (Footer) do Site
 *
 */

Define a tipografia padrão do tema

Define a tipografia padrão do tema


@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,100,300);

body {
  background-color: #D06D35;
  font-family: 'Roboto Slab', serif;
  color: #fff;
}

#intro {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)
}

#name {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%,-50%)
}

#links li {
  list-style-type: none;
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%,-50%)

}

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700,100,300);

body {
  background-color: #D06D35;
  font-family: 'Roboto Slab', serif;
  color: #fff;
}

#intro {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)
}

#name {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%,-50%)
}

#links {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%,-50%)

}

li {
  list-style-type: none;
}

Add list to li css

Add list to li css


#second_1 {
display: block;
position: relative;
top: 340px;
left: 100px;

}

#second_3 {
display: block;
position: relative;
top: 780px;
left: 100px;

}

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

}
#second_5 {
display: block;
position: relative;
top: 1680px;
left: 100px;

}

#second_6 {
display: block;
position: relative;
top: 1280px;
left: 100px;

}

Add second_6 to week stylesheet

Add second_6 to week stylesheet


body {
  background-color: #F9F5FC;
}
canvas {
  border: 1px solid #888;
}

.container {
  background-color: #F1EEFA;
  border: 0.5em solid #AAF;
  box-shadow: 0.25em 0.25em 0.25em #444;
  margin: 0 auto;
  padding: 2em;
  text-align: center;
  width: 30em;
}

Move tetrelementis stylesheet into projects


.floatRight{
    float: right !important;
}
.searchBox input{
    display: inline;
}
#add_brand,#add_model{
    cursor: pointer;
    color: red;
}
.filterName{
    font-weight: bold;
}
.filter{
    text-align: center;
}
.filter ul{
    text-align: left;
    border: 1px solid gray;
    height:150px;
    overflow-y:auto;
}
#sort{
    margin-left: 10px;
}
.checkColor{
    display:block;
    width:80px;
#bikelisting{
	float:left;
}
#bikedetailpanel{
	float:right;
	padding-top: 200px;
	padding-left: 500px;
	margin-top: 200px
>>>>>>> 4f4d6e53f832e041078c00cca2b5c0520a1e4c17
}

.floatRight{
    float: right !important;
}
.searchBox input{
    display: inline;
}
#add_brand,#add_model{
    cursor: pointer;
    color: red;
}
.filterName{
    font-weight: bold;
}
.filter{
    text-align: center;
}
.filter ul{
    text-align: left;
    border: 1px solid gray;
    height:150px;
    overflow-y:auto;
}
#sort{
    margin-left: 10px;
}
.checkColor{
    display:block;
    width:80px;
#bikelisting{
	float:left;
}
#bikedetailpanel{
	float:right;
	padding-top: 200px;
	margin-top: 200px
>>>>>>> 4f4d6e53f832e041078c00cca2b5c0520a1e4c17
}

Revert "added css style to floating details"

This reverts commit 1565fe8c9d435ab8d227004d89397619b9f7fee6.


.imon-percent .fa {
  font-size: 1em;
}

.imon-percent .fa.colored {
  color: #6192BD;
}

.imon-percent .fa.plain {
  color: #bdc3c7;
}

.imon-percent .online-users {
  line-height: 0px;
}

.imon-percent .users-container{
  overflow: hidden;
}

.imon-percent .no-data {
  margin-top: 2em;
  text-align: right;
  margin-right: 1em;
}

.imon-percent .indicator-value {
  font-size: 5em;
  color: #888;
}

.imon-percent .value-container{
  padding-left: 0px !important;
  overflow: hidden;
}

.imon-percent .fa {
  font-size: 1em;
}

.imon-percent .fa.colored {
  color: #6192BD;
}

.imon-percent .fa.plain {
  color: #bdc3c7;
}

.imon-percent .online-users {
  line-height: 1.1em;
}

.imon-percent .users-container{
  overflow: hidden;
}

.imon-percent .no-data {
  margin-top: 2em;
  text-align: right;
  margin-right: 1em;
}

.imon-percent .indicator-value {
  font-size: 5em;
  color: #888;
}

.imon-percent .value-container{
  padding-left: 0px !important;
  overflow: hidden;
}

Increase line spacing between icons

Increase line spacing between icons


@-webkit-keyframes bounce {
    0% { -webkit-transform: translateY(0px);   }
   25% { -webkit-transform: translateY(10px);  }
   50% { -webkit-transform: translateY(0px);   }
   75% { -webkit-transform: translateY(-10px); }
  100% { -webkit-transform: translateY(0px);   }
}

Add CSS3 animation for social links

Add CSS3 animation for social links


@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.spinner {
  -webkit-animation: load8 3s infinite linear;
  animation: load8 3s infinite linear;
}

Add in CSS for Spinner

Add in CSS for Spinner


/* https://bitsofco.de/holy-grail-layout-css-grid */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout */

body {
  margin: 0;
  padding: 0;
  display: grid;

  grid-template-areas:
    "header" "main" "aside" "footer";
}

body > header { grid-area: header }
body > footer { grid-area: footer }

@media ( orientation : landscape ) {
  body {
    grid-template-areas:
      "header header"
      " main  aside "
      "footer footer";

    grid-template-columns: 1fr 20vw;
    grid-template-rows: 10vh 1fr 10vh;
  }
}

/* https://bitsofco.de/holy-grail-layout-css-grid */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout */

body {
  margin: 0;
  padding: 0;
  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: 1fr 20vw;
    grid-template-rows: 10vh 1fr 10vh;
  }
}

Add grid-area declarations to master document


#imgcontainer {
  position:relative;
  width: 100%;
  height: 100%;
  overflow: clip;
}

#imgdistort {
  position: absolute;
  top: 0px;
  left: 0px;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
}

.corner {
  position: absolute;
  top: -10px; left: -10px;
}

#inputimage {
  position:absolute;
  top:-100px;
}

.leaflet-pane .leaflet-overlay-pane img {
  pointer-events: all !important;
}

.leaflet-toolbar-icon {
  box-sizing: initial;
}

Fix for menu item widths

Fix for menu item widths


.calendar .day-entry {
  display: flex;
  flex-direction: column;
  padding: 7px 0;
  border: 1px solid #a9a9a9;
  margin-left: -1px;
  margin-top: -1px;
}

.calendar .day-entry:first-child {
  border-top-left-radius: var(--calendar-border-radius);
}

.calendar .day-entry:nth-child(7) {
  border-top-right-radius: var(--calendar-border-radius);
}

.calendar .day-entry:nth-last-child(7) {
  border-bottom-left-radius: var(--calendar-border-radius);
}

.calendar .day-entry:last-child {
  border-bottom-right-radius: var(--calendar-border-radius);
}

.calendar .not-in-month {
  opacity: 0.4;
}

.calendar .day-text {
  text-align: center;
  font-size: 1em;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  margin: 0 auto 5px auto;
}

.calendar .today {
  background-color: hsl(165, 34%, 85%);
  border-radius: 50%;
}

.calendar .entry-markers {
  flex: 1;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calendar .day-entry {
  display: flex;
  flex-direction: column;
  padding: 7px 0;
  border: 1px solid #a9a9a9;
  margin-left: -1px;
  margin-top: -1px;
}

.calendar .day-entry:first-child {
  border-top-left-radius: var(--calendar-border-radius);
}

.calendar .day-entry:nth-child(7) {
  border-top-right-radius: var(--calendar-border-radius);
}

.calendar .day-entry:nth-last-child(7) {
  border-bottom-left-radius: var(--calendar-border-radius);
}

.calendar .day-entry:last-child {
  border-bottom-right-radius: var(--calendar-border-radius);
}

.calendar .not-in-month {
  opacity: 0.4;
}

.calendar .day-text {
  text-align: center;
  font-size: 1em;
  width: 2em;
  height: 2em;
  line-height: 2em;
  margin: 0 auto;
}

.calendar .today {
  background-color: hsl(165, 34%, 85%);
  border-radius: 50%;
}

.calendar .entry-markers {
  flex: 1;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

Increase size of "today" marker

Increase size of "today" marker


.autofill-list-item {
  -webkit-padding-start: 8px;
}

#autofill-options > div:last-child {
  margin-top: 15px;
}

#autofill-options * div.settings-list > :last-child {
  border-top: 1px solid #D9D9D9;
  padding: 5px 10px;
}

.autofill-list-item {
  -webkit-padding-start: 8px;
}

#autofill-options > div:last-child {
  margin-top: 15px;
}

#autofill-options > div.settings-list > div:last-child {
  border-top: 1px solid #D9D9D9;
  padding: 5px 10px;
}

DOMUI: Fix the AutoFill profile list CSS selector for the last item.

BUG=none
TEST=none

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

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


blockquote {
    border-left-width: 0px;
    color: #000000;
    padding: 0px;
    margin: 0 0 0px 35px;
    font-size: 15px;
    border-left: 0px solid #dddddd;
}

/* Override citation removing the left column for the BibTeX references*/
table.citation {
    margin-left: 1px;
    border-left: solid 1px white;
    border-collapse: separate;
}

/* Fix BibTeX alignment */

.label {
    display: block !important; /* fix citation misaligned */
}

/* Remove the colon from the copyright text in the footer */

.footer>.container>p:last-child {
    visibility: hidden;
    position: absolute;
    margin-top: -20px;
}

.footer>.container>p:last-child:after {
    content: ' © Copyright 2017-2018 The appleseedhq Organization';
    visibility: visible;
}

Fix bibtex references issues, css stylesheets


.help-block  {
  font-size: 10px;
}

.navbar-nav>li {
    float: left;
}

div.outer {
  position: fixed;
  top: 41px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 0;
}

.rbox  {
  font-size: 10px;
}

.selectize-dropdown,
.selectize-input,
.selectize-input input,
option {
  font-size: 11px;
}

select::-ms-expand {
  width:12px;
  border:none;
  background:#fff;
}

select.form-control {
  font-size: 11px;
}

label {
  font-size: 12px;
}

.recalculating{
  opacity: 1.0;
}

#cite {
  position: relative;
  bottom: 25px;
  left: 120px;
  font-size: 12px;
}

body {
  max-width: unset !important;
}

#dft {
  margin-bottom: 10px;
}

.htab  {
  font-size: 12px;
}

Set the font size to 12

Set the font size to 12


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

.grid .cell .box {
  position: relative;
}
.cell-icon {
  font-size: 5rem;
  left: 0.25rem;
  opacity: 0.075;
  position: absolute;
  top: 2rem;
}

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

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

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

.grid .cell .box {
  position: relative;
}
.cell-icon {
  font-size: 5rem;
  left: 0.25rem;
  opacity: 0.075;
  position: absolute;
  top: 2rem;
}
.grid .cell .box :first-child {
  margin-top: 0;
  padding-top: 0;
}
.grid .cell .box :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

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

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

Remove outermost top and bottom spacing from paragraphs and similar elements in dashboard cells.


code {
  background-color: black;
  color: #AAAAAA;
  padding-left: 3px;
  padding-right: 3px;
}

img {
  border: 2px solid black;
  -moz-box-shadow: 3px 3px 4px #111111;
  -webkit-box-shadow: 3px 3px 4px #111111;
  box-shadow: 3px 3px 4px #111111;
}

kbd {
  display: inline-block;
  padding: 0 0.5em;
  font-weight: bold;
  font-family: sans-serif;
  color: black;
  background-color: white;
  border: 1px solid black;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  white-space: nowrap;
}

code {
  background-color: black;
  color: #AAAAAA;
  padding-left: 3px;
  padding-right: 3px;
}

img {
  border: 2px solid black;
  -moz-box-shadow: 3px 3px 4px #111111;
  -webkit-box-shadow: 3px 3px 4px #111111;
  box-shadow: 3px 3px 4px #111111;
}

kbd {
  display: inline-block;
  padding: 0 0.5em;
  font-weight: bold;
  font-family: sans-serif;
  color: black;
  background-color: white;
  border: 1px solid black;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 4px;
  white-space: nowrap;
}

Increase border radius on the key styling.


#font-settings > section > .font-input-div {
  -webkit-margin-end: 5em;
}

.font-input-div > div > select {
  margin-bottom: 10px;
}

.font-input-div > div > .font-input {
  width: 12em;
}

#font-settings > section > .font-sample-div {
  position: absolute;
}

.font-settings-huge {
  float: right;
}

#font-settings > section > .font-input-div {
  -webkit-margin-end: 4em;
}

.font-input-div > div > select {
  margin-bottom: 10px;
}

.font-input-div > div > .font-input {
  width: 12em;
}

#font-settings > section > .font-sample-div {
  height: 90px;
  overflow: hidden;
  position: absolute;
}

.font-settings-huge {
  float: right;
}

DOMUI: Fix an issue where the sample font text would display outside its
containing div. Also fix a margin issue.

BUG=70650
TEST=none

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

git-svn-id: dd90618784b6a4b323ea0c23a071cb1c9e6f2ac7@72369 4ff67af0-8c30-449e-8e8b-ad334ec8d88c


.leaflet_div {
  background: #eee;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 1px #fff inset, 0 -1px 0px #ccc inset;
  line-height: 0;
  margin-right: 1em;
}

.leaflet_div.align-left {
  float: left;
}

.leaflet_div.align-right {
  float: right;
}

.leaflet_div.align-center {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

.cke_widget_wrapper:hover>.cke_widget_element {
  outline: 3px solid yellow !important;
}

.responsive-map {
  height: 0;
  padding-bottom: 56.25%;
  padding-top: 25px;
  position: relative;
  width:100%;
}

.responsive-map-iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.leaflet_div {
  background: #eee;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 1px #fff inset, 0 -1px 0px #ccc inset;
  line-height: 0;
  margin-right: 1em;
  margin-bottom: 1em;
}

.leaflet_div.align-left {
  float: left;
}

.leaflet_div.align-right {
  float: right;
}

.leaflet_div.align-center {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

.cke_widget_wrapper:hover>.cke_widget_element {
  outline: 3px solid yellow !important;
}

.responsive-map {
  height: 0;
  padding-bottom: 56.25%;
  padding-top: 25px;
  position: relative;
  width:100%;
}

.responsive-map-iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Add some margin at the bottom of the map widget to improve visual spacing


body {
    font-family: georgia, serif;
}

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

.navbar {
       margin-bottom: 0;
}

Remove space between navbar & jumbotron

Remove space between navbar & jumbotron


/* Fix XWIKI-10664 */
.gwt-TabPanelBottom{
  margin-right: -4px;
}

/* XWIKI-10940 */
.breadcrumb > li{
  display: inline;
}

.buttonwrapper a.attachment-picker-start {
   filter: none;
 }

/* Fix a rendering bug with the panels layout and the WYSIWYG editor, on IE 9
 (see: http://jira.xwiki.org/browse/XWIKI-10664). */
.gwt-TabPanelBottom {
  margin-right: -4px;
}

/* Fix a rendering bug with the breadcrumb on IE 8 (see: http://jira.xwiki.org/browse/XWIKI-10940). */
.breadcrumb > li {
  display: inline;
}

Revert "XWIKI-10859: The "Change photo" button is not correctly displayed on ie9"

This reverts commit 7dd48fa817d25b77eb37670b78212188f00722df.


#header .logo {
	background-image: url(../img/logo.png);
	background-repeat: no-repeat;
	width: 390px;
	height: 120px;
	margin: 0 auto;
}

#header .logo-icon {
	display: inline-block;
	background-image: url(../img/logo-icon.png);
	background-repeat: no-repeat;
	width: 62px;
	height: 34px;
}

#header .logo-wide {
	background-image: url(../img/logo-icon.png);
	background-repeat: no-repeat;
	width: 62px;
	height: 34px;
}

#body-login input {
	font-size: 100%;
}

#body-login input#remember_login {
	margin-top: 5px !important;
}

#body-login div#altlogin input[type="submit"] {
	padding: 10px 18px;
}

div.clientsbox a {
	display: inline-table;
}

div#new ul > li:first-child {
	display:none;
}

Hide text file creation option in New menu.


@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 {
  *behavior: url("js/vendor/boxsizing.htc");
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
h1, figure, fieldset {
  margin: 0;
}
html {
  overflow-x: hidden;
}
body {
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
img,
video,
audio,
embed,
object,
input,
iframe {
  max-width: 100%;
}
.browsehappy {
  width: 100%;
  padding: 15px;
  background: #333;
  color: #fff;
  font-size: 13px;
  line-height: 21px;
  cursor: pointer;
  text-align: center;
}
.browsehappy a {
  color: #fff;
  font-weight: bold;
}
.browsehappy a:hover {
  text-decoration: none;
}

@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 {
  *behavior: url("js/vendor/boxsizing.htc");
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
h1, figure, fieldset {
  margin: 0;
}
html, body {
  height: 100%;
  overflow-x: hidden;
}
body {
  width: 100%;
  overflow-y: scroll;
}
img,
video,
audio,
embed,
object,
input,
iframe {
  max-width: 100%;
}
.browsehappy {
  width: 100%;
  padding: 15px;
  background: #333;
  color: #fff;
  font-size: 13px;
  line-height: 21px;
  cursor: pointer;
  text-align: center;
}
.browsehappy a {
  color: #fff;
  font-weight: bold;
}
.browsehappy a:hover {
  text-decoration: none;
}

Make html, body height: 100%

Make html, body height: 100%


body.dark svg.marks .mark-group .background {
    fill: #121822 !important;
}

body.dark svg.marks .mark-group .mark-text text {
    fill: #c3cbdb !important;
}

body.dark svg.marks .mark-group .mark-rule line {
    stroke: #E3E5E6 !important;
}

Remove black background in pie charts

Remove black background in pie charts


#id_title { font-size:1.3em; font-weight:bold; }
label[for=id_content] { display:none; }
#id_content {
    font-family: monospace;
    width: 60%;
    min-height: 500px;
    background: -webkit-linear-gradient(#fff, #eee);
    font-size:1.3em;
}

#preview_container {
    width:37%; height:500px; float:right;
    margin:0 1em;
    position:relative;
}
#live_preview {
    width:200%; height:1000px;
    border:1px solid #aaa;
    box-shadow:0px 12px 21px #ccc;

    -webkit-transform:scale(0.5);
    -webkit-transform-origin:top left;
    -moz-transform:scale(0.5);
    -moz-transform-origin:top left;
    -o-transform:scale(0.5);
    -o-transform-origin:top left;
    -ms-transform:scale(0.5);
    -ms-transform-origin:top left;
    transform:scale(0.5);
    transform-origin:top left;
}

#id_title { font-size:1.3em; font-weight:bold; }
label[for=id_content] { display:none; }
#id_content {
    font-family: monospace;
    width: 52%;
    min-height: 500px;
    background: -webkit-linear-gradient(#fff, #eee);
    font-size:1.3em;
    float:left;
}

#preview_container {
    width:45%; height:500px; float:left;
    margin:0 0 0 1em;
    position:relative;
}
#live_preview {
    width:200%; height:1000px;
    border:1px solid #aaa;
    box-shadow:0px 12px 21px #ccc;

    -webkit-transform:scale(0.5);
    -webkit-transform-origin:top left;
    -moz-transform:scale(0.5);
    -moz-transform-origin:top left;
    -o-transform:scale(0.5);
    -o-transform-origin:top left;
    -ms-transform:scale(0.5);
    -ms-transform-origin:top left;
    transform:scale(0.5);
    transform-origin:top left;
}

Improve proportions between widths of the content textarea and preview iframe.


@font-face {
  font-family: 'Font';
  src: url("../../lib/fonts/webfont.eot");
}

.navbar-header-2 {
  clear: both;
}

.navbar-header:after {
  clear: both;
}

@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}

@font-face {
  font-family: 'Font';
  src: url("../lib/fonts/webfont.eot?v=4.0.0");
  src: url("../lib/fonts/webfont.eot");
}
@font-face {
  font-family: 'Font1';
  src: url("../lib/fonts/webfont.eot");
}

.navbar-header {
  clear: both;
}

@font-face {
  font-family: 'Font';
  src: url("../../lib/fonts/webfont.eot");
}

.navbar-header-2 {
  clear: both;
}

.navbar-header:after {
  clear: both;
}

@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}

@font-face {
  font-family: 'Font';
  src: url("../lib/fonts/webfont.eot?v=4.0.0");
  src: url("../lib/fonts/webfont.eot");
}
@import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic");

@font-face {
  font-family: 'Font1';
  src: url("../lib/fonts/webfont.eot");
}

.navbar-header {
  clear: both;
}

Update expected file to fix tests

Update expected file to fix tests


body {
    direction: rtl;
}

.google-drive-auth-failed {
    display: none;
}

.hide-everything {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(100, 60, 60, 60);
    background: rgba(100, 60, 60, 60);
}

.center {
    position: fixed;

    left: 50%;
    width: 280px;
    margin-left: -140px;

    top: 50%;
    height: 180px;
    margin-top: -90px;

    background: white;
    border: solid black;
    border-width: 1px 1px 2px 2px;
}

body {
    direction: rtl;
}

.google-drive-auth-failed {
    display: none;
}

.hide-everything {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(100, 60, 60, 60);
}

.no-google-drive-auth .hide-everything {
    background: rgba(100, 100, 100, 60);
}

.center {
    position: fixed;

    left: 50%;
    width: 280px;
    margin-left: -140px;

    top: 50%;
    height: 180px;
    margin-top: -90px;

    background: white;
    border: solid black;
    border-width: 1px 1px 2px 2px;
}

Change background for non-error message.


body {
    margin: 60px auto;
    width: 70%;
}
nav ul, footer ul {
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
    padding: 0px;
    list-style: none;
    font-weight: bold;
}
nav ul li, footer ul li {
    display: inline;
    margin-right: 20px;
}
a {
    text-decoration: none;
    color: #999;
}
a:hover {
    text-decoration: underline;
}
h1 {
    font-size: 3em;
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
}
p {
    font-size: 1.5em;
    line-height: 1.4em;
    color: #333;
}
footer {
    border-top: 1px solid #d5d5d5;
    font-size: .8em;
}

ul.posts {
    margin: 20px auto 40px;
    font-size: 1.5em;
}

ul.posts li {
    list-style: none;
}

// Disable the nasty footer of DISQUS
//
// It is added by DISQUS after the comment section and visually conflicts
// with the original footer of a page.
//
// Note: as we do not control the class name and id of that element,
// it may be changed in the future and the following code will stop
// working. In this case, check the new class name and/or id and update
// the code below.
//
#footer.disqus-footer__wrapper {
    display: none;
}

Disable the nasty footer of DISQUS

Disable the nasty footer of DISQUS


@import url(//fonts.googleapis.com/css?family=Roboto:400,300,300italic,700,500);

body {
  font-family: 'Roboto';
  font-size: 2em;
  font-weight: 100;
  height: 100%;
}

.container {
  margin: 0 17%;
}

h1 {
  font-size: 3em;
  text-align: center;
}

select, input {
  vertical-align: middle;
  margin-bottom: 4px;
}

select {
  margin-right: -2px;
}

@media (max-width: 650px) {
  body {
    font-size: 1.5em;
    margin: 0 5%;
  }
  h1 { font-size: 2em; }
}

input {
  border-radius: 6px;
  font-size: 0.75em;
  padding: 3px;
  vertical-align: middle;
  border: none;
  font-weight: 700;
  width: 65px;
  margin-right: -10px;
}

input:focus {
  outline: 0;
}

#cups, #caffeine {
  font-weight: 700;
}

@import url(//fonts.googleapis.com/css?family=Roboto:400,300,300italic,700,500);

body {
  font-family: 'Roboto';
  font-size: 2em;
  font-weight: 100;
  height: 100%;
}

.container {
  margin: 0 17%;
}

h1 {
  font-size: 3em;
  text-align: center;
}

select, input {
  vertical-align: middle;
  margin-bottom: 4px;
}

select {
  margin-right: -2px;
}

@media (max-width: 650px) {
  body {
    font-size: 1.5em;
    margin: 0 1%;
  }
  h1 { font-size: 2em; }
}

input {
  border-radius: 6px;
  font-size: 0.75em;
  padding: 3px;
  vertical-align: middle;
  border: none;
  font-weight: 700;
  width: 65px;
  margin-right: -10px;
}

input:focus {
  outline: 0;
}

#cups, #caffeine {
  font-weight: 700;
}

Make the margin even smaller on mobiles.


.teamstats {
  white-space: nowrap;
  text-align: center;
}

.charcell {
  white-space: nowrap;
}

.centered {
  vertical-align: middle!important;
  text-align: center!important;
}

.vcentered {
  vertical-align: middle!important;
}

.nolink {
  text-decoration: none!important;
  color: inherit;
}

.borderless tbody tr td, .borderless tbody tr th, .borderless thead tr th, table {
  border: none;
  background-color: inherit;
}

.hover-container {
  position: relative;
}

.hover-content {
  position: absolute;
  bottom: -10px;
  right: 10px;
  display: none;
}

.hover-container:hover .hover-content {
  display: block;
}

Add styling for hovers. Not used yet

Add styling for hovers. Not used yet


/* TEXT CONTENT */

p,
blockquote,
pre,
dl,
ol,
ul,
figure {
  margin-top: 0;
}

figure {
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
}

pre {
  overflow-x: auto;
}

hr {
  clear: both;
  overflow: visible;
}

/* TEXT CONTENT */

p,
blockquote,
pre,
dl,
ol,
ul,
figure {
  margin-top: 0;
}

figure {
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;
}

pre {
  overflow: auto;
}

hr {
  clear: both;
  overflow: visible;
}

Add overflow: auto in pre element

Add overflow: auto in pre element


#map-canvas {
    width: 100%;
    height:450px;
    margin: 0;
    padding: 0;
}

.imgTile{cursor: pointer}

Remove unused google maps css rule.

Remove unused google maps css rule.


body {
    color: black;
    background-color: white;
    font-size: small;
    margin-left: 5em;
    margin-top: 5em;
}
.sending-results {
    margin-left: 0.5em;
    margin-top: 2em;
    font-weight: bold;
    font-size: medium;
}
div.bar-container {
    border: 1px solid;
    border-color: #9ea4b1;
    background-color: white;
}
div.bar {
    background-color: blue;
}
p.progress-text {
    padding-top: 0.5em;
    margin-top: 0;
    margin-bottom: 2em;
    font-style: italic;
}
p.practice-box {
    color: red;
}

body {
    color: black;
    background-color: white;
    font-size: small;
    margin-left: 5em;
    margin-top: 5em;
}
.sending-results {
    margin-left: 0.5em;
    margin-top: 2em;
    font-weight: bold;
    font-size: medium;
}
div.bar-container {
    border: 1px solid;
    border-color: #9ea4b1;
    background-color: white;
}
div.bar {
    background-color: blue;
}
p.progress-text {
    padding-top: 0.5em;
    margin-top: 0;
    margin-bottom: 2em;
    font-style: italic;
}
p.practice-box {
    color: blue;
}

Change color of practice message to blue (in line with 0.1.3.x)


/* Hide the original input */
.x-file--input {
  width: 0px;
  height: 0px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.x-file--input + label {
  display: inline-block;
  cursor: pointer;
}

.x-file--input:focus + label,
.x-file--input + label:hover {
  /* Overwrite this in your own css file with styles for :focus & :hover  */
}

.x-file--input:focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}

.x-file--input + label * {
  pointer-events: none;
}

/* Hide the original input */
.x-file--input {
  width: 0px;
  height: 0px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.x-file--input + label {
  display: inline-block;
  cursor: pointer;
}

.x-file--input:focus + label,
.x-file--input + label:hover {
  /* Overwrite this in your own css file with styles for :focus & :hover  */
}

.x-file--input:focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}

.x-file--input + label * {
  pointer-events: none;
}

Fix mobile Safari styling bug for hidden file input element

Added `max-width: 0` rule to default styles, to ensure the width
of the hidden file input doesn't spill out, and cause a whitespace
gutter.


body {
    min-width: 20em;
    line-height: 1.5;
    background: #fcfcfc;
    color: #222;
    font-family: "proxima-nova" sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "jubilat", serif;
    font-weight: 400;
}

[data-icon]:before {
    font-family: 'Pictos Custom';
    content: attr(data-icon);
    -webkit-font-smoothing: antialiased;
}

.l-wrap {
    position: relative;
    background: #fcfcfc;
}
.l-grid {
    letter-spacing: -0.31em;
    *letter-spacing: normal;
    word-spacing: -0.43em;
}
.l-inline,
.l-grid-u {
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.l-grid-u {
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}
.l-grid,
.l-grid-u {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    min-width: 20em;
    line-height: 1.5;
    background: #fcfcfc;
    color: #222;
    font-family: "proxima-nova" sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "jubilat", serif;
    font-weight: 400;
}

[data-icon]:before {
    font-family: 'Pictos Custom';
    content: attr(data-icon);
    -webkit-font-smoothing: antialiased;
}

.l-wrap {
    position: relative;
    background: #fcfcfc;
}
.l-grid {
    letter-spacing: -0.31em;
    *letter-spacing: normal;
    *word-spacing: -0.43em;
}
.l-inline,
.l-grid-u {
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.l-grid-u {
    letter-spacing: normal;
    *word-spacing: normal;
    vertical-align: top;
}
.l-grid,
.l-grid-u {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Fix grid styles for Chrome 25+

Fix grid styles for Chrome 25+


/*
 * Author:        Pierre-Henry Soria <hello@ph7cms.com>
 * Copyright:     (c) 2018, Pierre-Henry Soria. All Rights Reserved.
 * License:       GNU General Public License; See PH7.LICENSE.txt and PH7.COPYRIGHT.txt in the root directory.
 */

h2 {
    text-transform: uppercase;
}

Set h2 heading to uppercase only (for just that module, of couse)


/* custom properties */

/* custom selectors */

/* usage */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #000000;
  color: rgba(0, 0, 0, 0.9);
}

pre,
.highlight {
  background: #212121;
}
pre,
.highlight {
  background: #2e2e2e;
  color: #ddd;
  line-height: 0.8em
}
pre .constant, .highlight .constant {
  color: #66d9ef;
}

/* custom properties */

/* custom selectors */

/* usage */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #000000;
  color: rgba(0, 0, 0, 0.9);
}

pre,
.highlight {
  background: #212121;
}
pre,
.highlight {
  color: #f5f5f5
}
pre .string, .highlight .string {
  color: #ffeb3b;
}
pre .comment, .highlight .comment {
  color: #727272;
}
pre .keyword, .highlight .keyword {
  color: #FF4081;
}
pre .built_in, .highlight .built_in {
  color: #00BCD4;
}

Add first version of syntax highlighting

Built from c5a0c4724cb14420ddce23b12c29264db0659847.


nav ul {
  list-style: none;
  background-color: black;
  position:fixed;
  width: 100%;

}

nav ul li {
  float: left;
  margin: 10px;
  font-weight: bolder;

}

nav ul li a {
  color: white;
  text-align: center;
  text-decoration: none;

}
header {
  padding-top: 50px;
}

Add header padding to stop it being blocked by fixed navbar


table {
	margin: 20px auto;
}

th {
	text-align: center;
}

form {
	width: 30%;
	margin: 20px auto;
}

#container {
	width: 80%;
	margin: 20px auto;
	text-align: center;
}

#filters td {
	border: none;
}

Add some margin to table

Add some margin to table


@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body {
  margin: 0; padding: 0;

  font-family: "Open Sans";
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;

  background-color: #ecf0f1;

  -webkit-text-size-adjust: 100%;
}

h1 { font-weight: 300; }
h2 { font-weight: 300; }
h3 { font-weight: 300; }
h4 { font-weight: 300; }

img { max-width: 100%; }

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);

body {
  margin: 0; padding: 0;

  font-family: "Open Sans";
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;

  background-color: #FFF;

  -webkit-text-size-adjust: 100%;
}

h1 { font-weight: 300; }
h2 { font-weight: 300; }
h3 { font-weight: 300; }
h4 { font-weight: 300; }

img { max-width: 100%; }

#content article {
  padding: 0 5%;
  max-width: 800px;
}

Add content padding and reset body background.


.header {
    padding-top: 50px;
    padding-bottom: 50px;
    color: white;
    background:
        url('img/header-background.jpg') 50% -100px fixed,
        linear-gradient(to bottom, #F8F8F8 0%, #1C6990 100%);
    text-align: center;
}

.header img {
    height: 200px;
}

@media screen and (min-width: 48em) {
    .header img {
        width: 192px;
    }
}

.header {
    padding-top: 50px;
    padding-bottom: 50px;
    color: white;
    background:
        url('img/header-background.jpg') 50% -100px fixed,
        #4c748c;
    text-align: center;
}

.header img {
    height: 200px;
}

@media screen and (min-width: 48em) {
    .header img {
        width: 192px;
    }
}

Use mean color as fallback

Use mean color as fallback


#title{
    text-align: center;
    font-size: 4vw;
}

#LoggedInAs {
    position: absolute;
    top: 3%;
    right: 1%;
    font-size: 1.5vw;
}

.mdl-layout__header{
    box-shadow: 0px 6px 8px grey;
}

#ButtonContainer {
    position: absolute;
    top: 40%;
    left: 40%;
    width: 20%;
}

.btn{
  font-size: 2vw;
}

#Logo {
    position: absolute;
    bottom: 1%;
    left: 0.2%;
    width:10%;
}

Add css to server folder

Add css to server folder


/**
 * UCSC Xena Client
 * http://xena.ucsc.edu
 *
 * Rules necessary for styling standard Xena checkbox group that are outside of the RTB checkbox theming API (for
 * example, displaying a checkbox group in advanced mode where checkboxes are grouped together under a subheading).
 *
 * Note that RTB does not currently have the concept of a "CheckboxGroup", we are rolling our own here to match
 * RTB's RadioGroup.
 */

.XCheckboxGroup {
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	padding: 12px 16px 24px 16px;
}

/* Subgroup header when in advanced view */
.subgroupHeader {
	composes: mdBody1 from '../../css/typography.module.css';
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	color: rgba(0, 0, 0, 0.87);
	display: block;
	overflow: hidden;
	padding: 32px 0 8px 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: bold;
}

.subgroupHeader:first-of-type {
	padding-top: 8px;
}

/**
 * UCSC Xena Client
 * http://xena.ucsc.edu
 *
 * Rules necessary for styling standard Xena checkbox group that are outside of the RTB checkbox theming API (for
 * example, displaying a checkbox group in advanced mode where checkboxes are grouped together under a subheading).
 *
 * Note that RTB does not currently have the concept of a "CheckboxGroup", we are rolling our own here to match
 * RTB's RadioGroup.
 */

.XCheckboxGroup {
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	padding: 12px 16px 24px 16px;
}

/* Subgroup header when in advanced view */
.subgroupHeader {
	composes: mdBody1 from '../../css/typography.module.css';
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	color: rgba(0, 0, 0, 0.87);
	display: block;
	overflow: hidden;
	padding: 32px 0 8px 0;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* The css loading order changes in production (XXX), causing typography to override these
	 * settings. Using !important to work around it, for the moment.
	 */
	font-weight: bold !important;
}

.subgroupHeader:first-of-type {
	padding-top: 8px;
}

Fix css order for XCheckboxGroup bold.

Fix css order for XCheckboxGroup bold.


@media (min-width: 768px)
.navbar-default {
    background-color: black;
}

.bg-primary.odd {
    background-color: white;
    color: black;
}

aside.bg-primary.odd {
    background-color: black;
    color: #a6228f;
}

p {
    font-weight: 200;
}

Change to a white background

Change to a white background

Signed-off-by: Ian Allison <7bc9988c769ce5090502b3c0632842024edf4f5c@pims.math.ca>


body {
  color: #222;
  line-height: 1.4;
  font-family: 'Roboto Mono', monospace;
  padding: 5vh 10vw;
}

::-moz-selection {
  background: rgba(79, 175, 191, 0.5);
  text-shadow: none;
}

::selection {
  background: rgba(79, 175, 191, 0.5);
  text-shadow: none;
}

.container {
  display: grid;
}

h1 {
  font-size: 4em;
  font-weight: 700;
}

.me-llamo {
  font-weight: 500;
}

p {
  font-weight: 400;
  font-size: 1.6em;
  max-width: 26em;
}

a {
  text-decoration: none;
  color: #e91e63;
  transition: 0.2s ease-in;
}

a:hover {
  color: #e9c71e;
}

body {
  color: #222;
  line-height: 1.4;
  font-family: 'Roboto Mono', monospace;
  padding: 5vh 10vw;
}

::-moz-selection {
  background: rgba(79, 175, 191, 0.5);
  text-shadow: none;
}

::selection {
  background: rgba(79, 175, 191, 0.5);
  text-shadow: none;
}

.container {
  display: grid;
}

h1 {
  font-size: 4em;
  font-weight: 700;
  margin-bottom: 0;
}

.me-llamo {
  font-weight: 500;
}

p {
  font-weight: 400;
  font-size: 1.6em;
  max-width: 26em;
}

a {
  text-decoration: none;
  color: #e91e63;
  transition: 0.2s ease-in;
}

a:hover {
  color: #e9c71e;
}

Remove bottom margin from greeting.

Remove bottom margin from greeting.


// These should only be variables used in items in the `common` pod or across multiple pods.
// Pod-specific variables should go in a variables file in that pod.

// This is the width of the ".container" element. All content in the app,
// aside from borders, will be contrained to this width.
$appWidth: 800px;
// This is padding that is visible on small desktop-sized screens. It prevents
// the app's content from smooshing against the side of the browser window.
$appPadding: 20px;

$rootFontSize: 15px;
$textColor: #000;
$lightTextColor: #aaa;
$linkColor: #c45184;

$borderColor: #e7e7e7;

// Responsive values. Pass these into the responsive mixins
// to target the different screen sizes.
$lg-screen: 1024px;
$md-screen: 768px;

$headerHeight: 50px;
$footerHeight: 65px;
$expandedFooterHeight: 47px;

// These should only be variables used in items in the `common` pod or across multiple pods.
// Pod-specific variables should go in a variables file in that pod.

// This is the width of the ".container" element. All content in the app,
// aside from borders, will be contrained to this width.
$appWidth: 800px;
// This is padding that is visible on small desktop-sized screens. It prevents
// the app's content from smooshing against the side of the browser window.
$appPadding: 20px;

$rootFontSize: 16px;
$textColor: #000;
$lightTextColor: #aaa;
$linkColor: #c45184;

$borderColor: #e7e7e7;

// Responsive values. Pass these into the responsive mixins
// to target the different screen sizes.
$lg-screen: 1024px;
$md-screen: 768px;

$headerHeight: 50px;
$footerHeight: 65px;
$expandedFooterHeight: 47px;

Increase font size of app

Increase font size of app


body {
  background: url('//www.newhdwallpapers.in/wp-content/uploads/2014/03/Pier-Evening-Lights-HD-Wallpapers.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size:    cover;
  -o-background-size:      cover;
  background-size:         cover;
}

body {
  background: url('//i.imgur.com/YahVxGw.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size:    cover;
  -o-background-size:      cover;
  background-size:         cover;
}

Fix background not working on https

Fix background not working on https

newhdwallpapers.in doesn't work on https, sadly


/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
  height: 100%;
  -webkit-font-smoothing: antialiased;
}
*, *:before, *:after {
  box-sizing: inherit;
}

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

h1,h2,h3 {
  margin: 0;
}
div {
  height: 100%;
}

h3 {
  font-family: 'proxima-nova';
  font-weight: 100;
  font-size: 11px;
  color: #5F6876;
  letter-spacing: 2.2px;
}

.content {
  margin: 0 auto;
  width: 100%;
}

.inner {
  background-image: linear-gradient(-169deg, #F4EBE5 0%, #E3D4CA 99%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  height: 694px;
  width: 1034px;
  background: #FEFEFE;
  border-radius: 7px;
  box-shadow: 22px 32px 34px 0 rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
  @media (max-width: 1100px) {
    height: 550px;
  }
}

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
  height: 100%;
  -webkit-font-smoothing: antialiased;
}
*, *:before, *:after {
  box-sizing: inherit;
}

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

h1,h2,h3 {
  margin: 0;
}
div {
  height: 100%;
}

h3 {
  font-family: 'proxima-nova';
  font-weight: 100;
  font-size: 11px;
  color: #5F6876;
  letter-spacing: 2.2px;
}

.content {
  margin: 0 auto;
  width: 100%;
}

.inner {
  background-image: linear-gradient(-169deg, #F4EBE5 0%, #E3D4CA 99%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  height: 694px;
  width: 1034px;
  background: #FEFEFE;
  border-radius: 7px;
  box-shadow: 22px 32px 34px 0 rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
  @media (max-width: 1280px) {
    height: 550px;
  }
}

Change app height on 13inch mac

[F] Change app height on 13inch mac


.map {
    width: 100%;
    height: 99%;
    bottom: 0;
    overflow: hidden;
    border: 1px solid #dddddd;
}
.leaflet-control-container .leaflet-routing-container-hide {
    display: none;
}
.route-popup .leaflet-popup-content-wrapper {
  background: #333333;
  color: #ffffff;
  border-radius: 0px;
}
.route-popup .leaflet-popup-tip {
    background: #333333;
}
.route-popup .leaflet-popup-close-button {
    visibility: hidden;
}
.navbar-collapse {
  overflow: hidden;
}
body {
    padding-top: 70px;
    background-color: #f5f5f5;
}
.scroll {
    overflow-y: scroll;
    height: 100%;
}
.leaflet-container {
    font: 14px "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 300;
}

.map {
    width: 100%;
    height: 99%;
    bottom: 0;
    overflow: hidden;
    border: 1px solid #dddddd;
}
.leaflet-control-container .leaflet-routing-container-hide {
    display: none;
}
.route-popup .leaflet-popup-content-wrapper {
  background: #333333;
  color: #ffffff;
  border-radius: 0px;
}
.route-popup .leaflet-popup-tip {
    background: #333333;
}
.route-popup .leaflet-popup-close-button {
    visibility: hidden;
}
.navbar-collapse {
  overflow: hidden;
}
body {
    padding-top: 70px;
    background-color: #f5f5f5;
}
.scroll {
    overflow-y: scroll;
    height: 100%;
}
.leaflet-container {
    font: 12px "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 300;
}

Change popup size to accomodate new button width.


.notebook tab .button {
    -GtkButton-default-border: 0;
    -GtkButton-default-outside-border: 0;
    -GtkButton-inner-border: 0;
    -GtkWidget-focus-line-width: 0;
    -GtkWidget-focus-padding: 0;
    padding: 0;
}

GtkOverlay > * {
    padding: 4px;
    border-style: solid;
    border-radius: 0 5px 0 0;
    border-width: 1px 1px 0 0;
}

GtkOverlay MidoriFindbar {
    border-radius: 0 0 0 5px;
    border-width: 0 0 1px 1px; /* top right bottom left */
}

/* Kill grey backround on inactive buttons */
GtkDrawingArea,
GtkImage,
GtkImage:insensitive,
GtkImage:selected {
    background-color: @transparent;
}

.notebook tab .button {
    -GtkButton-default-border: 0;
    -GtkButton-default-outside-border: 0;
    -GtkButton-inner-border: 0;
    -GtkWidget-focus-line-width: 0;
    -GtkWidget-focus-padding: 0;
    padding: 0;
    border-width: 1px 1px 0 0;
}

GtkOverlay > * {
    padding: 4px;
    border-style: solid;
    border-radius: 0 5px 0 0;
    border-width: 1px 1px 0 0;
}

GtkOverlay MidoriFindbar {
    border-radius: 0 0 0 5px;
    border-width: 0 0 1px 1px; /* top right bottom left */
}

/* Kill grey backround on inactive buttons */
GtkDrawingArea,
GtkImage,
GtkImage:insensitive,
GtkImage:selected {
    background-color: @transparent;
}

Tweak border-width of notebook tab buttons


html, #banner, #footer {
    background-color: rgb(0, 107, 0);
}

.nav li {
    background-color: rgb(238, 252, 255);
}

body {
    background-color: rgb(238, 252, 255);
}

#metanav .first {
    border-left:2px solid rgb(238, 252, 255);
    border-top-left-radius:5px;
}

#metanav .last {
    border-right:2px solid rgb(238, 252, 255);
    border-top-right-radius:5px;
}

a#tracpowered {
    background-color: rgb(238, 252, 255);
    border:2px solid rgb(238, 252, 255);
    border-radius:5px;
}

a#tracpowered:hover, a#tracpowered:focus  {
    background-color: #80B580 !important;
}

Make backround of trac logo lighter to improve look of logo


body {
	margin: 0;
}
svg {
	width: 100%;
	height: 80vh;
}
path {
	vector-effect: non-scaling-stroke;
}
path.country {
	fill: #ccc;
}
path.country.no-data {
	opacity: .3;
}
path.schengen {
	fill: none;
	stroke: #999;
	stroke-width: 2;
}
path.border {
	fill: none;
	stroke: #fff;
	stroke-width: 1;
}
circle {
	vector-effect: non-scaling-stroke;
}
circle.metric {
	fill: none;
	stroke: rgba(0, 0, 0, .3);
	stroke-width: 2;
}
circle.application-count {
	fill: #f00;
}

body {
	margin: 0;
}
svg {
	width: 100%;
	height: 80vh;
}
path {
	vector-effect: non-scaling-stroke;
}
.country {
	fill: #ccc;
}
.country.no-data {
	opacity: .3;
}
path.schengen {
	fill: none;
	stroke: #999;
	stroke-width: 2;
}
path.border {
	fill: none;
	stroke: #fff;
	stroke-width: 1;
}
circle {
	vector-effect: non-scaling-stroke;
}
circle.metric {
	fill: none;
	stroke-width: 1;
	mix-blend-mode: difference;
	stroke: rgba(255, 255, 255, .5);
}
circle.application-count {
	mix-blend-mode: multiply;
	fill: #415A77;
}

Change colours and use mix-blend-mode

Change colours and use mix-blend-mode


img {
  max-width: 100%;
}

main {
  margin-top: 2em;
}

.ui.menu {
  margin-top: 0;
}

.ui.item.menu .item {
  text-transform: uppercase;
}

li > p {
  margin-bottom: 0;
}

code, pre {
  font-family: Consolas,Monaco,'Andale Mono',monospace;
}

Change code CSS font family

Change code CSS font family


.jq-ry-container {
  position: relative;
  padding: 0 5px;
  line-height: 0;
  display: block;
  cursor: pointer;
}
.jq-ry-container[readonly="readonly"] {
  cursor: default;
}
.jq-ry-container > .jq-ry-group-wrapper {
  position: relative;
  width: 100%;
}
.jq-ry-container > .jq-ry-group-wrapper > .jq-ry-group {
  position: relative;
  line-height: 0;
  z-index: 10;
  white-space: nowrap;
}
.jq-ry-container > .jq-ry-group-wrapper > .jq-ry-group > svg {
  display: inline-block;
}
.jq-ry-container > .jq-ry-group-wrapper > .jq-ry-group.jq-ry-normal-group {
  width: 100%;
}
.jq-ry-container > .jq-ry-group-wrapper > .jq-ry-group.jq-ry-rated-group {
  width: 0;
  z-index: 11;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.jq-ry-container {
  position: relative;
  padding: 0 5px;
  line-height: 0;
  display: block;
  cursor: pointer;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.jq-ry-container[readonly="readonly"] {
  cursor: default;
}
.jq-ry-container > .jq-ry-group-wrapper {
  position: relative;
  width: 100%;
}
.jq-ry-container > .jq-ry-group-wrapper > .jq-ry-group {
  position: relative;
  line-height: 0;
  z-index: 10;
  white-space: nowrap;
}
.jq-ry-container > .jq-ry-group-wrapper > .jq-ry-group > svg {
  display: inline-block;
}
.jq-ry-container > .jq-ry-group-wrapper > .jq-ry-group.jq-ry-normal-group {
  width: 100%;
}
.jq-ry-container > .jq-ry-group-wrapper > .jq-ry-group.jq-ry-rated-group {
  width: 0;
  z-index: 11;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

Enforce "box-sizing: content-box" in order to fix rendering with Bootstrap


body {
    height: 100%;
}

iframe {
    border: 0;
}

.angular-icon {
    background-color: #03A9F4;
    padding: 5px;
}

.fill-height {
    height: 100%;
}

.menu-item {
    width: 100%;
    display: block;
    max-height: 40px;
    line-height: 40px;
    padding: 0px 28px;
    color: #333;
}

.menu-sub-item {
    text-transform: none;
}

body {
    height: 100%;
}

iframe {
    border: 0;
}

.angular-icon {
    background-color: #03A9F4;
    padding: 5px;
}

.fill-height {
    height: 100%;
}

.menu-item {
    width: 100%;
    display: block;
    max-height: 40px;
    line-height: 40px;
    padding: 0px 28px;
}

.menu-parent-item {
    color: #888;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.menu-sub-item {
    text-transform: none;
    color: #333;
}

Add new css class menu-parent-item

Add new css class menu-parent-item


/* Stop headings from appearing as links when 'contents' is used */
h2 a {
    color: inherit;
    text-decoration: none;
}

/* Stop headings from appearing as links when 'contents' is used */
h2 a, h2 a:hover {
    color: inherit;
    text-decoration: none;
}

Stop headings appearing as links when hovering


.startScreen {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: default;
}

.buttonWrapper {
  display: flex;
  flex-direction: column;
}

.buttonBase {
  padding: 10px;
  margin-bottom: .25em;
  border: 0;
  border-bottom: solid 5px;

  color: #fff;

  font-family: 'Space Mono', monospace;
  font-size: 18px;
  letter-spacing: 5px;
  text-transform: uppercase;

  cursor: pointer;
  transition: .2s;
}

.buttonBase:active {
  transform: scale(1.1);
}

.buttonBase:focus {
  outline: 0; /* visual changes made in subclasses */
}

.openFile {
  composes: buttonBase;
  background-color: #BBBCC7;
  border-bottom-color: #818395;
}

.openFile:hover {
  background-color: #b3b4be;
}

.openFile:focus {
  background-color: #adaeb6;
}

.newFile {
  composes: buttonBase;
  background-color: #008cba;
  border-bottom-color: #005e7d;
}

.newFile:hover {
  background-color: #0a85ad;
}

.newFile:focus {
  background-color: #0881a8;
}

.startScreen {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: default;
}

.buttonWrapper {
  display: flex;
  flex-direction: column;
}

.buttonBase {
  padding: 10px;
  margin-bottom: .25em;
  border: 0;
  border-bottom: solid 5px;
  border-bottom-color: rgba(0, 0, 0, .2);

  color: #fff;

  font-family: 'Space Mono', monospace;
  font-size: 18px;
  letter-spacing: 5px;
  text-transform: uppercase;

  cursor: pointer;
  transition: .2s;
}

.buttonBase:active {
  transform: scale(1.1);
}

.buttonBase:focus {
  outline: 0; /* visual changes made in subclasses */
}

.openFile {
  composes: buttonBase;
  background-color: #BBBCC7;
}

.openFile:hover {
  background-color: #b3b4be;
}

.openFile:focus {
  background-color: #adaeb6;
}

.newFile {
  composes: buttonBase;
  background-color: #008cba;
}

.newFile:hover {
  background-color: #0a85ad;
}

.newFile:focus {
  background-color: #0881a8;
}

Improve buttons by adding transparent border-bottom


h1, p {
    background-color: #DDE0E3; /* Light grey */
}

h1 {
    padding: 50px;
    border-bottom: 1px solid #5D6063;
}

p {
    /*

    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;

    padding: 20px 10px;   Vertical  Horizontal

    */
    padding: 20px 0 20px 10px;  /* Top  Right  Bottom  Left */
    margin: 50px 50px;
}

em, strong {
    background-color: #B2D6FF; /* Light blue */
    display: inline;
}

div {
  color: #FFF;
  background-color: #5995DA;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  border: 2px solid #5D6063;
  border-radius: 5px;
  width: 200px;
  box-sizing: border-box;
  /* box-sizing: content-box; Default behaviour */
}

body {
    text-align: center;
}

h1, p {
    background-color: #DDE0E3; /* Light grey */
}

h1 {
    padding: 50px;
    border-bottom: 1px solid #5D6063;
}

p {
    /*

    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;

    padding: 20px 10px;   Vertical  Horizontal

    */
    padding: 20px 0 20px 10px;  /* Top  Right  Bottom  Left */
    margin: 50px 50px;
}

em, strong {
    background-color: #B2D6FF; /* Light blue */
    display: inline;
}

div {
  color: #FFF;
  background-color: #5995DA;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  border: 2px solid #5D6063;
  border-radius: 5px;
  width: 200px;
  box-sizing: border-box;
  /* box-sizing: content-box; Default behaviour */
  margin: 20px auto; /* Vertical  Horizontal */
}

Add horizontal aligning using auto margin


.group {
  padding: 6px;
}

.header {
  padding: 4px;
}

.line {
  font-family: monospace;
  white-space: pre;
}

.warning .msg {
  background: #ffff77;
}

.error .msg {
  background: #ff7777;
}

footer {
  margin-top: 10px;
  padding: 10px;
  background: #F8F8F8;
  border-top: 1px solid #E7E7E7;
}

.group {
  padding: 6px;
}

.header {
  padding: 4px;
}

.line {
  font-family: monospace;
}

.warning .msg {
  background: #ffff77;
}

.error .msg {
  background: #ff7777;
}

footer {
  margin-top: 10px;
  padding: 10px;
  background: #F8F8F8;
  border-top: 1px solid #E7E7E7;
}

Fix line wrapping for long translated strings


@import '~app/styles/variables.css';

.link {
  color: rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 90%);
}

.body {
  composes: withShadow from '~app/styles/utilities.css';
  text-align: center;
  background: var(--lego-card-color);
  height: 322px;
  width: 100%;
  margin-bottom: 20px;
  position: relative;
}

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

.articleTitle {
  margin: 0 5px;
  line-height: 1.1;
  font-size: 1.2rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  word-break: normal;
}

.articleMeta {
  margin: 0 5px;
  font-weight: bold;
}

.infoWrapper {
  padding: 10px 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.articleDescription {
  padding: 0 10px 10px;
}

@import '~app/styles/variables.css';

.link {
  color: rgba(var(--rgb-min), var(--rgb-min), var(--rgb-min), 90%);
}

.body {
  composes: withShadow from '~app/styles/utilities.css';
  text-align: center;
  background: var(--lego-card-color);
  height: 322px;
  width: 100%;
  margin-bottom: 20px;
  position: relative;
}

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

.articleTitle {
  margin: 0 5px;
  line-height: 1.1;
  font-size: 1.2rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  word-break: break-word;
}

.articleMeta {
  margin: 0 5px;
  font-weight: bold;
}

.infoWrapper {
  padding: 10px 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.articleDescription {
  padding: 0 10px 10px;
}

Fix mobile page overflow with long words in articles


.markdown-body.slides {
  position: relative;
  z-index: 1;
  color: #222;
}

.markdown-body.slides::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: currentColor;
  box-shadow: 0 0 0 50vw;
}

.markdown-body.slides section[data-markdown] {
  position: relative;
  margin-bottom: 1.5em;
  background-color: #fff;
  text-align: center;
}

.markdown-body.slides section[data-markdown]::before {
  content: '';
  display: block;
  padding-bottom: 56.23%;
}

.markdown-body.slides section[data-markdown] div:first-child {
  position: absolute;
  top: 50%;
  left: 1em;
  right: 1em;
  transform: translateY(-50%);
  max-height: 100%;
  overflow: hidden;
}

.markdown-body.slides section[data-markdown] ul {
  display: inline-block;
}

.markdown-body.slides > section > section + section::after {
  content: '';
  position: absolute;
  top: -1.5em;
  right: 1em;
  height: 1.5em;
  border: 3px solid #777;
}

.markdown-body.slides {
  position: relative;
  z-index: 1;
  color: #222;
}

.markdown-body.slides::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: currentColor;
  box-shadow: 0 0 0 50vw;
}

.markdown-body.slides section[data-markdown] {
  position: relative;
  margin-bottom: 1.5em;
  background-color: #fff;
  text-align: center;
}

.markdown-body.slides section[data-markdown] code {
  text-align: left;
}

.markdown-body.slides section[data-markdown]::before {
  content: '';
  display: block;
  padding-bottom: 56.23%;
}

.markdown-body.slides section[data-markdown] > div:first-child {
  position: absolute;
  top: 50%;
  left: 1em;
  right: 1em;
  transform: translateY(-50%);
  max-height: 100%;
  overflow: hidden;
}

.markdown-body.slides section[data-markdown] > ul {
  display: inline-block;
}

.markdown-body.slides > section > section + section::after {
  content: '';
  position: absolute;
  top: -1.5em;
  right: 1em;
  height: 1.5em;
  border: 3px solid #777;
}

Fix slide preview styles might overwrite code block styles


body {
  font: 20px/1.5em 'Georgia', serif;
  margin: 1.5em auto 3em;
  max-width: 40em;
  padding: 0 0.75em;
}

body {
  font: 20px/1.5em 'Verdana', sans-serif;
  margin: 1.5em auto 3em;
  max-width: 40em;
  padding: 0 0.75em;
}

Switch from Georgia to Verdana

Switch from Georgia to Verdana


.uf-alert
{
    margin: 10px 0px 0px 0px;
}

.uf-alert .icon {
    line-height: 20px;
}

.uf-alert-message-container {
    margin-left: 30px;
    line-height: 20px;
}

.uf-alert-message-container > ul {
    margin-left: -20px;
}

.uf-alert
{
    margin: 10px 0px 0px 0px;
}

/* Invert margin when inside a modal-body */
.modal-body .uf-alert
{
    margin: 0px 0px 10px 0px;
}

.uf-alert .icon {
    line-height: 20px;
}

.uf-alert-message-container {
    margin-left: 30px;
    line-height: 20px;
}

.uf-alert-message-container > ul {
    margin-left: -20px;
}

Fix alert magin when loaded inside a modal


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

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

Change second block technical relative stylesheet


body {
  font-size: 100% !important;
}
a:link, a:active, a:visited {
  text-decoration: underline;
}
.xwikitabbar li a, .xwikitabbar li a:visited, .xwikitabbar li a:active{
  text-decoration: none;
}
.actionmenu a:link, .actionmenu a:visited  {
  text-decoration: none;
}
input.button, .buttonwrapper a:visited, .buttonwrapper a:link, .buttonwrapper a:active {
  text-decoration: none;
}

body {
  font-size: 100% !important;
}
.skin-flamingo {
  font-size: 160% !important;
}
a:link, a:active, a:visited {
  text-decoration: underline;
}
.xwikitabbar li a, .xwikitabbar li a:visited, .xwikitabbar li a:active{
  text-decoration: none;
}
.actionmenu a:link, .actionmenu a:visited  {
  text-decoration: none;
}
input.button, .buttonwrapper a:visited, .buttonwrapper a:link, .buttonwrapper a:active {
  text-decoration: none;
}

XWIKI-10570: Increase font size when Extra Accessibility is enabled


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

}

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

}

Fix second from top in week3

Fix second from top in week3