.action-container
{
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

.action-container-footer{
    position: fixed;
    right: 20px;
    bottom: 20px;
    top: auto;
    left: auto;
}

.action
{
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    margin: 2px;
    background-color: black;
    border: 2px dashed #191919;
    border-radius: 50%;
    color: white;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    -moz-transition: border, background-color 0.2s ease-out;
    -o-transition: border, background-color 0.2s ease-out;
    -webkit-transition: border, background-color 0.2s ease-out;
    transition: border, background-color 0.2s ease-out;
}

.action-container .action:hover
{
    color: white;
    background-color: #191919;
    border: 2px dashed #424242;
}

.action-container
{
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
}

.action-container-footer
{
    position: fixed;
    right: 20px;
    bottom: 20px;
    top: auto;
    left: auto;
}

.action
{
    display: inline-block;
    height: 35px;
    width: 35px;
    line-height: 35px;
    background-color: black;
    border: 1px dashed #191919;
    color: #CCCCCC;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    -moz-transition: border, background-color, color 0.15s ease-out;
    -o-transition: border, background-color, color 0.15s ease-out;
    -webkit-transition: border, background-color, color 0.15s ease-out;
    transition: border, background-color, color 0.15s ease-out;
}

    .action:first-child
    {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }

    .action:last-child
    {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }

.action-container .action:hover
{
    color: white;
    background-color: #191919;
    border: 1px dashed #424242;
}

Improve the Visual Appearance of the Section Controls


body {
    font-family: sans-serif;
}
.alt {
    display: none;
}
.document * {
    display: inline;
}
.hidden {
    display: none;
}
ul.toc {
  list-style-type: none;
}
.section {
	clear: both;
}
.rfc2119 {
	color: red;
}

Make sure RFC 2119 markup shows up in the output.


.modal-open {
	/* needed for iOS to not zoom in when modals are opened */
	overflow-y: auto;
}
input[type=text] {
	width: 100%;
}
textarea {
	width: 100%;
}
#encodedInput {
	font-family: monospace;
}
pre {
	white-space: all;
	word-break: normal;
}
.fixed {
	position: fixed;
	width: 100%;
	width: calc(100% - 30px);
	background-color: white;
}
.spacer {
	background-color: white;
}
#codepage td {
	text-align: center;
}
#codepage th {
	text-align: center;
}
.modal-xl {
	width: 1000px;
}

.modal-open {
	/* needed for iOS to not zoom in when modals are opened */
	overflow-y: auto;
}
input[type=text] {
	width: 100%;
}
textarea {
	width: 100%;
}
#encodedInput {
	font-family: monospace;
}
pre {
	white-space: all;
	word-break: normal;
}
.fixed {
	position: fixed;
	width: 100%;
	width: calc(100% - 30px);
	background-color: white;
}
.spacer {
	background-color: white;
}
#codepage td {
	text-align: center;
}
#codepage th {
	text-align: center;
}
.modal-xl {
	width: 700px;
}

Reduce width of codepoint info to a saner value of 700px


body {
    font-family: Georgia, sans-serif;
    background-color: whitesmoke;
    color: #666666
}
h1 {
    color: mediumslateblue
}
p {
    font-size: 17.5px;
    line-height: 1.250;
}
a {
    color: navy;
    text-decoration: none;
    font-weight: Bold
}
img {
    margin-left: 20px;
    float: right
}
ul {
    list-style-type: none;
    margin-left: 0px;
    padding-left: 0px
}
li {
    margin-bottom: 5px
}
hr {
    border: none;
    border-top: 1px solid #ccc
}

div#container {
    width: 700px;
    margin: 60px auto
}

body {
    font-family: Georgia, sans-serif;
    background-color: whitesmoke;
    color: #666666
}
h1 {
    color: mediumslateblue
}
p {
    font-size: 17.5px;
    line-height: 1.250;
}
a {
    color: navy;
    text-decoration: none;
    font-weight: none;
}
img {
    margin-left: 20px;
    float: right
}
ul {
    list-style-type: none;
    margin-left: 0px;
    padding-left: 0px
}
li {
    margin-bottom: 5px
}
hr {
    border: none;
    border-top: 1px solid #ccc
}

div#container {
    width: 700px;
    margin: 60px auto
}

Remove bold attribute from links

Remove bold attribute from links


.cssClass .kwcbem__container {
    height: 0;
    position: relative;
    overflow: hidden;
}

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

Add .cssClass, required if bem (and uniquePrefix) is not used


/* sticky footer per http://mystrd.at/modern-clean-css-sticky-footer/ */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin: 0 0 90px;
}
/* end sticky footer */

/* navigation */
nav.navbar-inverse {
  border-radius: 0px;
}

nav.navbar .navbar-brand {
  padding: 7px;
}

nav.navbar .navbar-header img.logo {
  height: 28px;
  display: block;
  float: left;
  margin-left: 8px;
}

nav.navbar .navbar-header span.name {
  padding-top: 8px;
  display: block;
  float: left;
  margin-left: 8px;
}

.container.content {
  padding-bottom: 20px;
}

/* end navigation */

/* footer */

footer {
  margin-top: 20px;
  padding: 20px 10px;
  position: absolute;
  height: 60px;
  left: 0;
  bottom: 0;
  width: 100%;
  color: #222;
  background-color: #efefef;
}

footer .row {
  margin: 0;
}

footer p.credits {
  color: gray;
}

footer p.credits span.separator {
  color: #ccc;
  padding: 0 4px;
}

/* end footer */

/* sticky footer per http://mystrd.at/modern-clean-css-sticky-footer/ */
html {
  position: relative;
  min-height: 100%;
}
body {
  margin: 0 0 90px;
}
/* end sticky footer */

/* navigation */
nav.navbar-inverse {
  border-radius: 0px;
}

nav.navbar .navbar-brand {
  padding: 7px;
}

nav.navbar .navbar-header img.logo {
  height: 28px;
  display: block;
  float: left;
  margin-left: 8px;
}

nav.navbar .navbar-header span.name {
  padding-top: 8px;
  display: block;
  float: left;
  margin-left: 8px;
}

.container.content {
  padding-bottom: 20px;
}

/* end navigation */

/* check page */

button.decommission-check {
  margin-left: 12px;
}

/* footer */

footer {
  margin-top: 20px;
  padding: 20px 10px;
  position: absolute;
  height: 60px;
  left: 0;
  bottom: 0;
  width: 100%;
  color: #222;
  background-color: #efefef;
}

footer .row {
  margin: 0;
}

footer p.credits {
  color: gray;
}

footer p.credits span.separator {
  color: #ccc;
  padding: 0 4px;
}

/* end footer */

Add spacing to the decommission check button


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

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

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

code {
  font-size: 0.8rem;
}

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

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

a {
  color: #0FA5D8;
}

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

.masthead {
  margin: 1rem 0;
}

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

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

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

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

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

code {
  font-size: 0.8rem;
}

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

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

a {
  color: #0fa5d8;
}

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

.masthead {
  margin: 1rem 0;
}

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

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

Use lowercase letters for color hex values


.App {
    margin-top: 1em;
    display: flex;
    margin-bottom: 1em;
}

.App-topButtons {
    margin-bottom: 0.5em;
    display: flex;
    justify-content: center;
}

.App-gutter {
    flex-grow: 1;
}

.App-mainView { }

.App {
    margin-top: 1em;
    display: flex;
    margin-bottom: 1em;
}

.App-topButtons {
    margin-bottom: 0.5em;
    display: flex;
    justify-content: center;
}

.App-gutter {
    flex-grow: 1;
}

.App-mainView {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin-left: 1.5em;
    margin-right: 1.5em;
}

Add margins to the message line without wrapping the content


/*
 * Styles for the Overview Card
 */

.operating-system-label {
  position: absolute;
  top: 0;
  right: 10px;
  margin: auto;
}

.vm-name {
  font-size: 150%;
  margin-bottom: 5px;
}

.vm-name :global(.help-block) {
  font-size: 10px;
}

.vm-status {
  margin-bottom: 5px;
}

.vm-status .vm-status-icon {
  margin: 2px;
}

.vm-status .vm-status-text {
  margin-left: 5px;
}

.vm-uptime {
  color: rgba(0, 0, 0, 0.65);
  font-style: italic;

  padding-left: 15px;
}

.vm-description {
  white-space: pre-wrap;
}

.vm-checkbox {
  font-size: 10px;
  line-height: 20px;
  padding-left: 10px;
}

.vm-checkbox :global(.bootstrap-switch-container .bootstrap-switch-label) {
  height: 20px !important;
}

.vm-checkbox :global(.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on),
.vm-checkbox :global(.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off) {
  line-height: 1;
}

Remove the rest of the unused switch css

A few rules still were in the CSS that are no longer needed.


.u8y-science-directory { font-size:85% }
.u8y-science-directory thead { font-size:85% }

Use even smaller font for THEAD

ScienceDirectory: Use even smaller font for THEAD


/* Red Hat Branding */

.navbar-pf {
    border-color: #cc0000 !important;
}

body.login-pf {
    background: url("/cockpit/static/bg-login.jpg") no-repeat 50% 0;
    background-size: auto;
    background-color: #101010;
}

#badge {
    width: 64px;
    height: 64px;
    background-image: url("/cockpit/static/logo.png");
    background-size: contain;
}

#brand {
    font-size: 18pt;
    text-transform: uppercase;
    content: "${NAME}";
}

#index-brand {
    content: "${NAME}";
}

/* Red Hat Branding */

.navbar-pf {
    border-color: #cc0000 !important;
}

body.login-pf {
    background: url("/cockpit/static/bg-login.jpg") no-repeat 50% 0;
    background-size: auto;
    background-color: #101010;
}

#badge {
    width: 64px;
    height: 64px;
    background-image: url("/cockpit/static/logo.png");
    background-size: contain;
}

#brand {
    font-size: 18pt;
    text-transform: uppercase;
    content: "${NAME}";
}

#index-brand {
    content: "${NAME}";
    font-weight: bold;
}

Make the operating system name bold

rhel: Make the operating system name bold

Otherwise this renders pretty ugly

Reviewed-by: Peter <a316049dd34607c62d4611d63ab22a6454add223@redhat.com>


#help pre {
  direction: ltr;
  font-size: large;
}

#help .blocklyDraggable {
  cursor: default;
}

#help .blocklyEditableText:hover>rect {
  stroke: none;
}

Make Pond Tutor help blocks non-interactive.


@charset "UTF-8";

table {
  white-space: nowrap;
}

td > p {
  margin: 0 10px;
}

td > button {
  float: right;
}

@charset "UTF-8";

table {
  white-space: nowrap;
}

td.name {
  text-align: right;
}

td > p {
  margin: 0 10px;
}

td > button {
  float: right;
}

Set text-align right to names

Set text-align right to names


body.front h3 {
 font-size: 1.6em;
}

/*
 * Image replacement from
 * https://github.com/h5bp/html5-boilerplate/commit/adecc5da035d6d76b77e3fa95c6abde841073da2
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

#banner_inner a#logo {
    top: 5px;
    width: 215px;
    height: 41px;
    background-image: url(../images/logo-trans.png);
}

#orglogo {
  z-index: 200;
  position: absolute;
  top: 2.8em;
  right: 0.5em;
  height: 41px;
  width: 160px;
  background-repeat: no-repeat;
  background-position: -2px 0;
  background-image: url(../images/mysociety.png);
}

#topnav {
  margin-left:0;
}

Remove left margin on nav tabs so that Welsh text fits in.


#root {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.app {
  flex: 1 0 0%;
  height: 80vh;
  max-width: 800px;
  width: 98vw;
}

.app pre.language-jsx {
  padding: 0 1em;
}

.github-fork-ribbon:before,
.github-fork-ribbon:after {
  position: fixed;
}

.github-fork-ribbon:before {
  background-color: #373277;
}

#root {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.app {
  flex: 1 0 0%;
  height: 80vh;
  max-width: 800px;
  width: 98vw;
}

.app pre.language-jsx {
  padding: 0 1em;
}

.github-fork-ribbon:before,
.github-fork-ribbon:after {
  position: fixed;
}

.github-fork-ribbon:before {
  background-color: #373277;
}

Remove height rule that breaks examples on Firefox


@import url("theme.css");

.doc_pages_container {
    clear:both;
    display:inline-block;
}

.doc_page_frame {
    float: left;
}

.doc_page_frame p {
    text-align: center;
    font-size: 0.85em;
}

.doc_page {
    border: 2px solid #aaa;
    -webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.5);
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.5);
    margin-right: 1em;
}

.doc_page:hover {
    border: 2px solid #3399ff;
    border-radius: 3px;
    -webkit-box-shadow: 2px 2px 4px 4px rgba(51,153,255,0.5);
    -moz-box-shadow: 2px 2px 4px 4px rgba(51,153,255,0.5);
    box-shadow: 2px 2px 4px 4px rgba(51,153,255,0.5);
    padding-bottom: 2px;
}

@import url("theme.css");

.doc_pages_container {
    clear:both;
    display:inline-block;
}

.doc_page_frame {
    float: left;
}

.doc_page_frame p {
    text-align: center;
    font-size: 0.85em;
}

.doc_page {
    border: 2px solid #aaa;
    -webkit-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.5);
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.5);
    margin-right: 1em;
    padding-bottom: 2px;
}

.doc_page:hover {
    border: 2px solid #3399ff;
    border-radius: 3px;
    -webkit-box-shadow: 2px 2px 4px 4px rgba(51,153,255,0.5);
    -moz-box-shadow: 2px 2px 4px 4px rgba(51,153,255,0.5);
    box-shadow: 2px 2px 4px 4px rgba(51,153,255,0.5);
    padding-bottom: 2px;
}

Add bottom padding to thumbnails

Add bottom padding to thumbnails


/* Filter tags */
.filter_tags {
    margin-left: 10px;
    float: left;
}
.filter { background-color: #273542; }
.exclude { background-color: #E73E2E; }

/* Make contextual menus appear at a sane location and size,
 * overriding Splunk's Bootstrap. */
.dropdown-menu {
    margin-top: -20px;
    margin-left: 0px;
    width: 10em;
}

Summary: Make dropdown appear with sane location and size.


@media all {
  div.sectionbody, body {
    font-family: sans-serif;
  }

  div.sectionbody {
    line-height: 1.5em;
  }

  a:visited {
    color: #800080;
  }
}

@media screen {
  a {
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  body {
    max-width: 50em; /* approximately 80 characters wide */
    margin-left: 15em;
    font-size: 95%;
  }

  #toc {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 13em;
    padding: 0.5em;
    padding-bottom: 1.5em;
    margin: 0 !important;
    overflow: auto;
  }

  #toc a {
    color: #083194 !important;
  }

  #toc .toclevel1 {
    margin-top: 1.25em;
  }

  #toc .toclevel2 {
    margin-top: 0.25em;
    display: list-item;
  }
}

@media print {
  #toc {
    display: none;
  }
}

@media all {
  div.sectionbody, body {
    font-family: sans-serif;
  }

  div.sectionbody {
    line-height: 1.5em;
  }

  a:visited {
    color: #800080;
  }
}

@media screen {
  a {
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  body {
    max-width: 50em; /* approximately 80 characters wide */
    margin-left: 15em;
  }

  #toc {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 13em;
    padding: 0.5em;
    padding-bottom: 1.5em;
    margin: 0 !important;
    overflow: auto;
  }

  #toc a {
    color: #083194 !important;
  }

  #toc .toclevel1 {
    margin-top: 1.25em;
  }

  #toc .toclevel2 {
    margin-top: 0.25em;
    display: list-item;
  }
}

@media print {
  #toc {
    display: none;
  }
}

Revert "reduce font size to accomodate small screens"

This reverts commit fe9262b50608cfd9826bf0b1ce3be2d37febaa0f.


@import '../../variables';

.iconGrid {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}

.iconGridItem {
  margin: 1rem;
  text-align: center;
  flex-basis: 130px;
  display: flex;
  flex-flow: column;
  align-items: center;
}

.iconGridItemInner {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 120px;
  height: 120px;
}

.iconGridItem p {
  font-size: var(--font-size-x-small);
  margin-top: 6px;
}

Fix missing CSS var import in Icon story


.modal-container {
  position: relative;
}
.modal-container .modal, .modal-container .modal-backdrop {
  position: absolute;
}

Fix formatting of modal dialog style.

Fix formatting of modal dialog style.


#padBookmarkManager {
  position: absolute;
  top: 10px;
  right: 30px;
  z-index:999999;
}

#padBookmarkList {
  max-height: 500px;
  overflow: auto;
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}

.bookmarkPadId {
  font-size: 15px;
  font-weight: bold;
}

.buttonicon-managePadBookmarks:before {
    content: "\272A";
}

.embedMediaButton {
  padding: 10px;
}

div.padBookmark > span.comment {
  color: grey;
  font-size: 14px;
}

div.padBookmark > input.editComment {
  display: none;
  font-size: 14px;
  width: 20em;
}

.editIcon, .closeIcon, .deleteIcon, .saveIcon {
  color: black;
  font-size: 20px;
  padding: 3px;
}

.closeIcon, .deleteIcon {
  color: red;
}

.closeIcon {
  display: none;
}

.saveIcon {
  color: green;
  font-weight: bold;
  display: none;
}

#infoText {
  color: blue;
  right: 10px;
  top: 8px;
}

#padBookmarkManager {
  position: absolute;
  top: 10px;
  right: 30px;
  z-index:999999;
}

#padBookmarkList {
  max-height: 500px;
  overflow: auto;
  border: 1px solid black;
  padding: 5px;
  margin: 5px;
}

#autoAddBookmarkCheckbox {
  position: relative;
  opacity: 1;
  pointer-events: initial;
}

.bookmarkPadId {
  font-size: 15px;
  font-weight: bold;
}

.buttonicon-managePadBookmarks:before {
    content: "\272A";
}

.embedMediaButton {
  padding: 10px;
}

div.padBookmark > span.comment {
  color: grey;
  font-size: 14px;
}

div.padBookmark > input.editComment {
  display: none;
  font-size: 14px;
  width: 20em;
}

.editIcon, .closeIcon, .deleteIcon, .saveIcon {
  color: black;
  font-size: 20px;
  padding: 3px;
}

.closeIcon, .deleteIcon {
  color: red;
}

.closeIcon {
  display: none;
}

.saveIcon {
  color: green;
  font-weight: bold;
  display: none;
}

#infoText {
  color: blue;
  right: 10px;
  top: 8px;
}

Fix autoAddBookmarkCheckbox with colibris skin


.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: $nav-height;
  box-shadow: 0 0 2px rgba(0,0,0,.5);
  padding: 1em;
  display: flex;
  align-items: center;
  background-color: #fff;
}

.nav__wrapper {
  max-width: $max-width;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.nav__logo-wrapper {
  text-decoration: none;
}

.nav__logo {
  font-size: 1em;
  margin: 0;
  user-select: none;
  color: $text-color;
  text-decoration: none;
}

.btn--nav {
  font-size: 0.8em;
  text-transform: uppercase;
}

.btn--nav + .btn--nav {
  margin-left: 1em;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: $nav-height;
  box-shadow: 0 0 2px rgba(0,0,0,.5);
  padding: 1em;
  display: flex;
  align-items: center;
  background-color: #fff;
  z-index: 1;
}

.nav__wrapper {
  max-width: $max-width;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.nav__logo-wrapper {
  text-decoration: none;
}

.nav__logo {
  font-size: 1em;
  margin: 0;
  user-select: none;
  color: $text-color;
  text-decoration: none;
}

.btn--nav {
  font-size: 0.8em;
  text-transform: uppercase;
}

.btn--nav + .btn--nav {
  margin-left: 1em;
}

Fix input fields overlaying nav bar

Fix input fields overlaying nav bar


/*
 *= require admin/spree_backend
*/

#s2id_billing_address_select, #s2id_shipping_address_select {
  max-width: 340px;
}

Add fix to styles on dropdowns

Add fix to styles on dropdowns


@media screen and (min-width:1000px) {
	:root {
		font-size: var(--desktop-rem, 1.3vmax);
	}
}

@media screen and (max-width:999px) and (min-width:500px) {
	:root {
		font-size: var(--tablet-tem, 1.5vmax);
	}
}

@media screen and (max-width: 499px) {
	:root {
		font-size: var(--mobile-rem, 2.3vmax);
	}
}

Add rules for setting `:root` font-size

Add rules for setting `:root` font-size


.streamhub-horizontal-list-view {
    position:absolute;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}
.streamhub-horizontal-list-view .content-container {
    display: inline;
    float: left;
    overflow: hidden;
    padding: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 100%; }
.streamhub-horizontal-list-view .content {
    height: 100%;
    margin-bottom: 0;
}

.streamhub-horizontal-list-view {
    position:relative;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}
.streamhub-horizontal-list-view .content-container {
    display: inline;
    float: left;
    overflow: hidden;
    padding: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 100%; }
.streamhub-horizontal-list-view .content {
    height: 100%;
    margin-bottom: 0;
}

Update position:relative of horizontal list view'


article.definition > h1 {
    font-size: 1.17em;
}

article.definition > section > h1 {
    font-size: 1em;
    margin-top: 0;
    margin-bottom: -0.2em;
    margin-left: 0;
}

article.definition > section {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 2em;
    margin-bottom: 1.5em;
}

article.method.definition {
    margin-top: 2em;
}

article.reader.definition > section.description,
article.method.definition > section.description {
    margin-top: 0;
}

article.definition > section > * {
    margin-left: 2em;
}

article.definition.see-description-below + article.definition.see-description-below {
    margin-top: 0;
}

article.definition article.definition h1 {
    font-size: medium;
}

article.definition article.definition > h1 {
    font-size: large;
}

article.definition .name {
    font-weight: bold;
}

.type {
    font-weight: normal;
    font-style: italic;
}

article.method.definition section.description h1,
article.reader.generic-function.definition section.description h1 {
    display: none;
}

article.method.definition section.description > *,
article.reader.generic-function.definition section.description > * {
    margin-left: 1em;
}

article.method.see-description-below h1 {
    margin-top: 0.3em;
}

p.args-and-retvals {
    margin-top: 0.25em;
    margin-left: 2em;
}

article.method.definition > p.args-and-retvals {
    margin-bottom: -0.2em;
}

p.args-and-retvals + p.args-and-retvals,
p.args-and-retvals + .or + p.args-and-retvals {
    margin-top: -0.75em;
}

.merged-args-and-retvals {
    position: relative;
}

.merged-args-and-retvals .or {
    position: absolute;
    right: 100%;
    margin-top: -1.35em;
    margin-right: -1.5em;
    font-weight: bold;
    font-style: italic;
}

Add global support for CL definitions, extracted from clos-mop.hexstreamsoft.com.


/* Vpass tweak */
@namespace url("http://www.w3.org/1999/xhtml");

@-moz-document url-prefix("https://www.smbc-card.com/memx/") {
  /* Kill loading curtain */
  body > div[style]:first-child {
    display: none !important;
  }

  /* Detail table prettify */
  #meisaiTable td {
    padding: 0.4em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  #meisaiTable td:not([bgcolor]):nth-of-type(2) {
    text-align: center !important;
  }
  #meisaiTable td:only-child {
    background-color: #ffc !important;
  }

  /* Hide revolving payments banner */
  a[href^="/memx/atrevodiv/"] {
    opacity: 0.2 !important;
  }
}

/* Vpass tweak */
@namespace url("http://www.w3.org/1999/xhtml");

@-moz-document url-prefix("https://www.smbc-card.com/memx/") {
  /* Kill loading curtain */
  body > div[style]:first-child {
    display: none !important;
  }

  /* Detail table prettify */
  #meisaiTable td {
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  #meisaiTable td:only-child {
    background-color: #ffc !important;
  }

  /* Hide revolving payments banner */
  a[href^="/memx/atrevodiv/"] {
    opacity: 0.2 !important;
  }
}

Remove the style no longer used

Remove the style no longer used


ul#presence_widget li span.primary {
    opacity: 1;
}

@media screen and (min-width: 1025px) {
    ul#presence_widget li span.control {
        display: none;
    }

    ul#presence_widget_menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease;
    }

    ul#presence_widget_menu:hover,
    ul#presence_widget:hover + ul#presence_widget_menu {
        max-height: 100%;
    }
}

ul#presence_widget li span.primary {
    opacity: 1;
}

@media screen and (min-width: 1025px) {
    ul#presence_widget li span.control {
        display: none;
    }

    ul#presence_widget_menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 1.5s cubic-bezier(1,0,.45,1);
    }

    ul#presence_widget_menu:hover,
    ul#presence_widget:hover + ul#presence_widget_menu {
        max-height: 100%;
        transition: max-height 0.5s ease-in-out;
    }
}

Add a small delay for the sub-menu to stay open


body {
    background-color: #FDEED9;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.profile {
  height: 250px;
  width: auto;
}

#h1 {
    font-family: 'Indie Flower', cursive;
}

Add indie flower font to h1

Add indie flower font to h1


body {
  background-color: #d9d9d9;
}
#header {
  margin: 15px 0 15px 0;
}
#logo {
  color: #666;
  background: transparent;
  font-size: 20px;
  font-weight: normal;
  text-decoration: none;
}
#content {
  padding: 20px 30px 30px;
  margin: 0 auto 15px auto;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
          box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
#footer {
  color: #666;
  background: transparent;
  font-size: 12px;
  padding: 0;
  margin: 0 0 30px 0;
}

body {
  background-color: #222;
}
#header {
  margin: 15px 0 15px 0;
}
#logo {
  color: #fff;
  background: transparent;
  font-size: 20px;
  font-weight: normal;
  text-decoration: none;
}
#content {
  padding: 20px 30px 30px;
  margin: 0 auto 15px auto;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
          box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-actions a {
  color: #666;
  font-size: 12px;
}
#footer {
  color: #eee;
  background: transparent;
  font-size: 12px;
  padding: 0;
  margin: 0 0 30px 0;
}

Make the account module background darker


@CHARSET "UTF-8";
.blur {
    -webkit-filter: blur(1px); /* Chrome, Opera */
       -moz-filter: blur(1px);
        -ms-filter: blur(1px);
            filter: blur(1px);
}

.tags-container{
	margin-left: 30px;
	margin-right: 10px;
}

.tag-panel{
	min-width: 250px;
	height: 200px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 30px;
	text-align: center;

	-moz-box-shadow:4px 4px 5px #888888;
	-webkit-box-shadow:4px 4px 5px #888888;
	box-shadow:4px 4px 5px #888888;
}

.tag-panel h1{
	color: white;
	text-align: center;
}

@CHARSET "UTF-8";
.blur {
    -webkit-filter: blur(1px); /* Chrome, Opera */
       -moz-filter: blur(1px);
        -ms-filter: blur(1px);
            filter: blur(1px);
}

.tags-container{
	margin-left: 30px;
	margin-right: 10px;
}

.tag-panel{
	min-width: 250px;
	height: 200px;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 30px;
	text-align: center;

	-moz-box-shadow:4px 4px 5px #888888;
	-webkit-box-shadow:4px 4px 5px #888888;
	box-shadow:4px 4px 5px #888888;

	transition: All 0.4s ease-in-out;
	-webkit-transition: All 0.4s ease-in-out;
	-moz-transition: All 0.4s ease-in-out;
	-o-transition: All 0.4s ease-in-out;
}

.tag-panel:hover{
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
}

.tag-panel h1{
	color: white;
	text-align: center;
}

Add navigation block hover effect

Add navigation block hover effect


Set the root font size (to 16px).

Set the root font size (to 16px).


body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  padding-bottom: 60px;
}

Set padding-bottom to avoid overlap with footer


/* Imports */

@import "dependent-css/apps";
@import "dependent-css/brand";
@import "dependent-css/client";
@import "dependent-css/menus";
@import "dependent-css/search";
@import "dependent-css/user";

/* Global Navigation
/* ========================================================================== */

.esri-gnav {
	box-shadow: 0 1px 0 0 var(--mono-88);
	color: var(--mono-35) var(--mono-100);
	cursor: default;
	display: flex;
	font: 300 17px/20px var(--font-stack);
	justify-content: space-between;
	position: relative;
	size: * 64px;
	user-select: none;
	z-index: 100;

	&, & * {
		box-sizing: border-box;
	}

	&.-web {
		@media (width > 1440px) {
			padding: * calc(50vw - 1440px / 2);
		}
	}
}

/* Global Navigation: Variations */

.esri-gnav--absolute {
	position: absolute 0 0 *;
}

.esri-gnav--fixed {
	position: fixed 0 0 *;
}

/* Imports */

@import "dependent-css/apps";
@import "dependent-css/brand";
@import "dependent-css/client";
@import "dependent-css/menus";
@import "dependent-css/search";
@import "dependent-css/user";

/* Global Navigation
/* ========================================================================== */

.esri-gnav {
	box-shadow: 0 1px 0 0 var(--mono-88);
	color: var(--mono-35) var(--mono-100);
	cursor: default;
	display: flex;
	font: 300 17px/20px var(--font-stack);
	justify-content: space-between;
	position: relative;
	size: * 64px;
	user-select: none;
	z-index: 100;

	&, & * {
		box-sizing: border-box;
	}

	&.-web {
		@media (width > 1440px) {
			padding: * calc(50vw - 1440px / 2);
		}
	}

	&.-absolute {
		position: absolute 0 0 *;
	}

	&.-fixed {
		position: fixed 0 0 *;
	}
}

Change absolute/fixed variations to use dash class


.Card {
    background-color: var(--white);
    border: 1px solid var(--gray300);
    border-radius: var(--borderRadius-200);
    transition-property: color,background-color,box-shadow,transform;
    transition-duration: 150ms;
    overflow: hidden;
}

.Card.interactive {
    border: none;
    box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
}

.Card.interactive:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 35px rgba(50,50,93,.1), 0 8px 15px rgba(0,0,0,.07);
}

.Card.interactive:active {
    transform: translateY(2px);
    box-shadow: 0 11px 20px rgba(50,50,93,.1), 0 6px 11px rgba(0,0,0,.08);
}

.Card {
    background-color: var(--white);
    border: 1px solid var(--gray300);
    border-radius: var(--borderRadius-200);
    transition-property: color,background-color,box-shadow,transform;
    transition-duration: 150ms;
}

.Card.interactive {
    border: none;
    box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
}

.Card.interactive:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 35px rgba(50,50,93,.1), 0 8px 15px rgba(0,0,0,.07);
}

.Card.interactive:active {
    transform: translateY(2px);
    box-shadow: 0 11px 20px rgba(50,50,93,.1), 0 6px 11px rgba(0,0,0,.08);
}

Remove overflow-hidden from Card so Context can overflow.


html p, body p {
  line-height: 1.25;
}

#loading-bar .bar {
  background: #FFC107;
  height: 5px;
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
}

/* Fancy blur effect */
#loading-bar .peg {
  height: 5px;
  -moz-box-shadow: #FFC107 1px 0 6px 1px;
  -ms-box-shadow: #FFC107 1px 0 6px 1px;
  -webkit-box-shadow: #FFC107 1px 0 6px 1px;
  box-shadow: #FFC107 1px 0 6px 1px;
}

.md-button {
  margin: 16px 8px;
  padding: 0 8px;
  line-height: 36px;
}

md-sidenav md-list .md-button {
  color: inherit;
  font-weight: 500;
  text-align: left;
  width: 100%;
  padding: 16px;
  margin: 0;
  line-height: normal;
}

md-toolbar .separator {
  width: 48px;
  height: 28px;
}

md-icon:focus {
  outline: none;
}

Fix icon outline when focused

Fix icon outline when focused


.root {
    -fx-base: rgb(50, 50, 50);
    -fx-background: rgb(50, 50, 50);
    -fx-control-inner-background: rgb(50, 50, 50);
}

.text-field {
    -fx-prompt-text-fill: derive(-fx-control-inner-background, +50%);
}

.text-field:focused {
    -fx-prompt-text-fill: transparent;
}

.text-field:error {
    -fx-text-box-border: red;
    -fx-focus-color: red;
}

.root {
    -fx-base: rgb(50, 50, 50);
    -fx-background: rgb(50, 50, 50);
    -fx-control-inner-background: rgb(50, 50, 50);
    -fx-light-text-color: rgb(220, 220, 220);
}

.text-field {
    -fx-prompt-text-fill: derive(-fx-control-inner-background, +50%);
}

.text-field:focused {
    -fx-prompt-text-fill: transparent;
}

.text-field:error {
    -fx-text-box-border: red;
    -fx-focus-color: red;
}

Reduce text brightness in dark theme

Reduce text brightness in dark theme

Related:
https://github.com/joffrey-bion/fx-log/issues/7


/* CSS declarations go here */
* {
    margin: 0;
    padding: 0;
}

div#map {
    width: 100vw;
    height: 100vh;
}

div#add-form {
    height: 65vh;
    width: 80vw;
    background-color: white;
    position: fixed;
    top: 10vh;
    left: 10vw;
}

/* CSS declarations go here */
* {
    margin: 0;
    padding: 0;
}

div#map {
    width: 100vw;
    height: 100vh;
}

div.popup {
    height: 65vh;
    width: 80vw;
    background-color: white;
    position: fixed;
    top: 10vh;
    left: 10vw;
    display: block;
}

i.marker {
    shape-rendering: crispEdges;
}

.close-button {
    bottom: 0;
}

div.good>object>svg {
    fill: blue!important;
}

div.bad path {
    fill: red;
}

Move popups to sit under class popup

Move popups to sit under class popup


.cms table.ss-gridfield-table tr td.gridfield-preview{
    padding-top: 0;
    padding-bottom: 0;
}
.cms table.ss-gridfield-table .ss-gridfield-sorting .dataobjectpreview{
    display: none;
}

.cms table.ss-gridfield-table .dataobjectpreview {
    position: relative;
}

/* Overlay to make the iframe area clickable */
.cms table.ss-gridfield-table .dataobjectpreview:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: 100%;
    width: 100%;
}

Make iframe area in grid field clickable

The iframe was absorbing pointer events when moused over, which meant the
preview in grid fields could not be clicked to open a record.


.stepwizard-step p {
    margin-top: 5px;
    margin-bottom: 0;
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    width: 100%;
    position: relative;
    margin-top: 5px;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;

}

.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}

.order-panel .alert {
    margin-bottom: 5px;
}

.stepwizard-step p {
    margin-top: 5px;
    margin-bottom: 0;
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    width: 100%;
    position: relative;
    margin-top: 5px;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 29px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;

}

.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.btn-circle {
    width: 60px;
    height: 60px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 30px;
}

.order-panel .alert {
    margin-bottom: 5px;
}

Make order progress circles larger

feat(order): Make order progress circles larger

Looks better.


body {
    padding-top: 60px;
}

.nav a.disabled,
.nav a.disabled:hover {
    color: #666;
}

h3 a:hover {
    text-decoration: none;
}

#cloud h3 {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    margin-top: 40px;
}
#cloud a {
    color: #404040;
}
#cloud .inactive a {
    color: #c0c0c0;
}

#feedback textarea {
    width: 40em;
}

#status td,
#status_legend td {
    text-align: center;
}
#status .scheduled,
#status_legend .scheduled {
    background: #fcc;
}
#status .fetched,
#status_legend .fetched {
    background: #fff7cc;
}
#status .fetched.scheduled,
#status_legend .fetched.scheduled {
    background: #efc;
}
#status_legend {
    width: auto;
}

body {
    padding-top: 60px;
}

.navbar .nav a.disabled,
.navbar .nav a.disabled:hover {
    color: #444;
}

h3 a:hover {
    text-decoration: none;
}

#cloud h3 {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    margin-top: 40px;
}
#cloud a {
    color: #404040;
}
#cloud .inactive a {
    color: #c0c0c0;
}

#feedback textarea {
    width: 40em;
}

#status td,
#status_legend td {
    text-align: center;
}
#status .scheduled,
#status_legend .scheduled {
    background: #fcc;
}
#status .fetched,
#status_legend .fetched {
    background: #fff7cc;
}
#status .fetched.scheduled,
#status_legend .fetched.scheduled {
    background: #efc;
}
#status_legend {
    width: auto;
}

Fix styling of disabled menu elements after Bootstrap upgrade


html, body {
  font: 13px Helvetica Neue, Lucida Grande, sans-serif;
  height: 100%;
  margin: 0;
  background: rgb(236, 236, 236);
}

/* MARK: - Editor */

.editor {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  height: 100%;
}

.layers-panel {
  width: 215px;
  border-right: 1px solid rgb(184, 184, 184);
}
.canvas {
  -webkit-flex: 1;
  background: rgb(242, 242, 242);
}
.inspector-panel {
  width: 215px;
  border-left: 1px solid rgb(184, 184, 184);
}

html, body {
  font: 13px Helvetica Neue, Lucida Grande, sans-serif;
  height: 100%;
  margin: 0;
  background: rgb(236, 236, 236);
}

/* MARK: - Editor */

.editor {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  height: 100%;
}

.layers-panel {
  border-right: 1px solid rgb(184, 184, 184);
}
.canvas {
  -webkit-flex: 1;
  background: rgb(242, 242, 242);
}
.inspector-panel {
  border-left: 1px solid rgb(184, 184, 184);
}

Remove explicit panel sizes from CSS

Remove explicit panel sizes from CSS


.fieldset {
  border: inherit;
  margin: inherit;
  padding: inherit;
}
.legend {
  font-family: var(--font-brandon);
  font-size: var(--font-small);
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  padding: 0 1em;
}
.panel {
  padding: 0.5em 1em;
}

.field {
  border-bottom: 1px solid var(--color-white-dark);
}
.field:last-child {
  border: none;
}

.fieldset {
  border: inherit;
  margin: inherit;
  padding: inherit;
}
.legend {
  font-family: var(--font-brandon);
  font-size: var(--font-small);
  text-transform: uppercase;
  font-weight: 700;
  display: block;
}
.panel {
  padding: 0.5em 1em;
}

.field {
  border-bottom: 1px solid var(--color-white-dark);
}
.field:last-child {
  border: none;
}

Remove padding from form field

Remove padding from form field


.search-entity-types-column {
    width: 200px;
    vertical-align: top;
    border: 1px solid #cccccc;
    background-color: #f8f8f8;
}

.search-entity-types-column .entity-type {
    border-bottom: 1px solid #cccccc;
    width: 190px;
    height: 30px;
    font-size: 13px;
    padding: 10px 0 0 10px;
}

.search-entity-types-column .entity-type.selected {
    font-weight: bold;
    background-color: #e8e8e8;
}

.search-entity-types-column .entity-type.selected .arrow {
    float: right;
    padding-right: 5px;
}

.search-form {
    display:inline;
    padding-left: 20px;
}

.search-results-column {
    vertical-align: top;
    border: 1px solid #cccccc;
    padding: 10px;
}

.search-no-results {
    width: 100%;
    padding: 10px 0;
    text-align: center;
    vertical-align: middle;
    font-size: 16px;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

.container-fluid.search-header {
    background-color: #f8f8f8;
}

.search-entity-types-column {
    width: 200px;
    vertical-align: top;
    border: 1px solid #cccccc;
    background-color: #f8f8f8;
}

.search-entity-types-column .entity-type {
    border-bottom: 1px solid #cccccc;
    width: 190px;
    height: 30px;
    font-size: 13px;
    padding: 10px 0 0 10px;
}

.search-entity-types-column .entity-type.selected {
    font-weight: bold;
    background-color: #e8e8e8;
}

.search-entity-types-column .entity-type.selected .arrow {
    float: right;
    padding-right: 5px;
}

.search-form {
    display:inline;
    padding-left: 20px;
}

.search-results-column {
    vertical-align: top;
    border: 1px solid #cccccc;
    padding: 10px;
    background-color: #ffffff;
}

.search-no-results {
    width: 100%;
    padding: 10px 0;
    text-align: center;
    vertical-align: middle;
    font-size: 16px;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

.container-fluid.search-header {
    background-color: #f8f8f8;
}

BAP-788: Fix and apply entities templates to render entities using templates on datagrid
 - fixed css


.App {
  text-align: center;
}

.scrollable {
  height: calc(100vh - 102px);
  overflow-y: scroll;
}

.form {
  background-color: #fbfbfb;
  padding-bottom: 10px;
  display: flex;
}

.submit {
  flex: 1;
  align-self: center;
}

.search {
  flex: 1;
}

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

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

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

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

.App {
  text-align: center;
}

.scrollable {
  height: calc(100vh - 120px);
  overflow-y: scroll;
}

.periods {
  margin-top: 7px;
}

.form {
  background-color: #fbfbfb;
  padding-bottom: 10px;
  display: flex;
}

.submit {
  flex: 1;
  align-self: center;
}

.search {
  flex: 1;
}

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

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

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

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

Adjust scrollable height and add periods margin


@charset 'UTF-8';
/*
 * jQuery File Upload UI Plugin CSS 6.2
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */

.fileinput-button {
  position: relative;
  overflow: hidden;
  float: left;
  margin-right: 4px;
}
.fileinput-button input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  border: solid transparent;
  border-width: 0 0 100px 200px;
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-transform: translate(-300px, 0) scale(4);
  direction: ltr;
  cursor: pointer;
}
.fileupload-buttonbar button {
  margin-bottom: 5px;
}
.files .progress {
  width: 200px;
}
.progress-animated .bar {
  background: url(../img/progressbar.gif);
  filter: none;
}

@charset 'UTF-8';
/*
 * jQuery File Upload UI Plugin CSS 6.2
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */

.fileinput-button {
  position: relative;
  overflow: hidden;
  float: left;
  margin-right: 4px;
}
.fileinput-button input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  border: solid transparent;
  border-width: 0 0 100px 200px;
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-transform: translate(-300px, 0) scale(4);
  direction: ltr;
  cursor: pointer;
}
.fileupload-buttonbar .btn,
.fileupload-buttonbar .toggle {
  margin-bottom: 5px;
}
.files .progress {
  width: 200px;
}
.progress-animated .bar {
  background: url(../img/progressbar.gif);
  filter: none;
}

Add bottom margin to both buttons and inputs.


#fanback {
  display:none;
  background:rgba(0,0,0,0.8);
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:99999;
}
#fan-exit {
  width:100%;
  height:100%;
}
#aflafrettir-fb {
  background:white;
  width:420px;
  height:270px;
  position:absolute;
  top:58%;
  left:63%;
  margin:-220px 0 0 -375px;
  -webkit-box-shadow: inset 0 0 50px 0 #939393;
  -moz-box-shadow: inset 0 0 50px 0 #939393;
  box-shadow: inset 0 0 50px 0 #939393;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin: -220px 0 0 -375px;
}
#aflafrettir-widget {
  float:right;
  cursor:pointer;
  height:15px;
  padding:20px;
  position:relative;
  padding-right:40px;
  margin-top:-20px;
  margin-right:-22px;
}
.remove-borda {
  height:1px;
  width:366px;
  margin:0 auto;
  background:#F3F3F3;
  margin-top:16px;
  position:relative;
  margin-left:20px;
}

Add stylings to the facebook popup dialog


.characteristics strong {
  margin-left: 10px;
}

.characteristics {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.iconContainer {
  width: 75px;
  padding: 0 25px 0 0;
}

Update styles for volunteer section for FA Icons


.main.dark .list {
  background-color: black;
  color: gray;
}

.main.dark .list-item.selected {
  color: white;
}

.main.dark .menu-button-content {
  stroke: white;
}

.main.dark .menu-button.active > .menu-button-content,
.main.dark.list-visible .menu-button-content {
  stroke: gray;
}

.main.dark .settings-button-content {
  fill: white;
}

.main.dark .settings-button.active > .settings-button-content,
.main.dark.preferences-visible .settings-button-content {
  fill: gray;
}

Make CSS styles for buttons in dark theme


.failPhases .axis path,
.failPhases .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.failPhases .x.axis text {
    font-size: 0.6rem;
}
.failPhases .x.axis path {
    display: none;
}
.failPhases rect {
    opacity: 0.8;
}
.failPhases rect.red {
    fill: red;
}
.failPhases rect.green {
    fill: green;
}
.failPhases rect.weekend.red {
    fill: darkred;
}
.failPhases rect.weekend.green {
    fill: darkgreen;
}

.failPhases .axis path,
.failPhases .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.failPhases .x.axis text {
    font-size: 0.6rem;
}
.failPhases .x.axis path {
    display: none;
}
.failPhases rect {
    opacity: 0.8;
}
.failPhases rect.red {
    fill: #B42B2B;
}
.failPhases rect.green {
    fill: #2AB228;
}
.failPhases rect.weekend.red {
    fill: #C95E5E;
}
.failPhases rect.weekend.green {
    fill: #519E55;
}

Improve colors for fail phases

Improve colors for fail phases


@custom-media --sm-viewport (min-width:480px) and (max-width:640px);
@custom-media --md-viewport (min-width:640px) and (max-width:960px);
@custom-media --lg-viewport (min-width:960px);

@import "suitcss-components-test";
@import "suitcss-utils-size";
@import "../index.css";

@import "suitcss-components-test";
@import "suitcss-utils-size";
@import "../index.css";

@custom-media --sm-viewport (min-width:480px) and (max-width:640px);
@custom-media --md-viewport (min-width:640px) and (max-width:960px);
@custom-media --lg-viewport (min-width:960px);

Move custom media below imports to fix warning

* postcss-import now warns on any declarations above @import


#navigation {
    margin:0px;
    padding:0px;
    position:absolute;
    top:0;
    left:80px;
}

#navigation {
    width:auto;
    padding:0;
    margin:0;
    padding:0;
    overflow:hidden;
    margin:0;
    background-color:transparent;
    display:block !important;
}

#navigation div ul li {
    float:left;
    width:50px;
    padding:0px;
    margin:0px;
    height:44px;
}

#navigation div ul li a {
    margin:0;
    padding:12px;
    padding-left:6px;
    padding-right:6px;
    width:50px;
}

#navigation div li .app-icon {
    width:20px;
}

.app-loading, .icon-loading-dark {
    background-image:none;
}

#navigation div li span {
    display:none;
}

.menutoggle {
    display:none !important;
}

#navigation {
    margin:0px;
    padding:0px;
    position:absolute;
    top:0;
    left:80px;
    box-shadow:none;
}

#navigation {
    width:auto;
    padding:0;
    margin:0;
    padding:0;
    overflow:hidden;
    margin:0;
    background-color:transparent;
    display:block !important;
}

#navigation div ul li {
    float:left;
    padding:0px;
    margin:0px;
    height:44px;
    background-color:rgb(29, 45, 68);
}

#navigation div ul li a {
    margin:0;
    padding:12px;
    padding-left:6px;
    padding-right:6px;
    width:50px;
    position:relative;
}

#navigation div li .app-icon {
    width:20px;
    float:left;
}

.app-loading, .icon-loading-dark {
    background-image:none;
}

#navigation div li span {
    display:none;
}
#navigation div li:hover a,
#navigation div a.active {
    width:120px !important;
}
#navigation div li:hover span,
#navigation div a.active span {
   display:block;
   float:left;
   background-color:rgb(29, 45, 68);
}

.menutoggle {
    display:none !important;
}

Enable text description for apps on active or hover state


div.field, div.actions {
  margin-bottom: 10px;
}

#notice {
  color: green;
}

.field_with_errors {
  padding: 2px;
  background-color: red;
  display: table;
}

#error_explanation {
  width: 450px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 0;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#error_explanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  margin-bottom: 0px;
  background-color: #c00;
  color: #fff;
}

#error_explanation ul li {
  font-size: 12px;
  list-style: square;
}

div.field, div.actions {
  margin-bottom: 10px;
}

.notice {
  color: green;
}

.alert {
  color: red;
}

.field_with_errors {
  padding: 2px;
  background-color: red;
  display: table;
}

#error_explanation {
  width: 450px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 0;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#error_explanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  margin-bottom: 0px;
  background-color: #c00;
  color: #fff;
}

#error_explanation ul li {
  font-size: 12px;
  list-style: square;
}

Correct stylesheet for notice and alert

Correct stylesheet for notice and alert

stylesheets/user_auth_kuma.css
- Correct '#notice' to '.notice'.
- Add '.alert'.


body {
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 0 0 0 #fff;
  margin: 0;
}
  #page_container {
    margin: auto;
    width: 600px;
  }
  p {
    line-height: 1.4;
  }
  dd {
    padding: 0 0 10px;
  }
  #example {
    padding: 5px 128px 40px;
    background: #eee;
    border: 3px solid #fff;

    -webkit-box-shadow: 0 1px 10px #999;
    -webkit-border-radius: 6px;
    -moz-border-radius: 7px;
  }

Add the example GUI stylesheet.

Add the example GUI stylesheet.


.issue-card.card-outline-secondary {
  border-color: #666;
}

.issue-card .card-block {
  padding: 4px 4px 4px 4px;
}

.issue-card .card-title {
  font-size: 28px;
  margin-bottom: 2px;
}

.issue-card .card-title a {
  color: white;
}

.issue-card .card-subtitle {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 400;
  overflow: hidden;
  line-height: 16px;
  height: 16px;
}

.issue-card .card-footer {
  padding: 2px;
}

.issue-card.card-outline-secondary {
  border-color: #666;
}

.issue-card .card-block {
  padding: 4px 4px 4px 4px;
}

.issue-card .card-title {
  font-size: 28px;
  margin-bottom: 2px;
}

.issue-card .card-title a {
  color: white;
}

.issue-card .card-subtitle {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 400;
  overflow: hidden;
  line-height: 20px;
  height: 20px;
}

.issue-card .card-footer {
  padding: 2px;
}

Fix lineheight of title in issue card

Fix lineheight of title in issue card


svg #ring {
  opacity: 0.2;
}

svg #logs {
  opacity: 0.2;
}

svg .server {
}

svg .follower {
  fill: red;
}

svg .candidate {
  fill: yellow;
}

svg .leader {
  fill: green;
}

svg .server path {
  fill: none;
  stroke: black;
}

svg .server text {
  text-anchor: middle;
  alignment-baseline: central;
  text-align: center';
}

svg .message.request {
  fill: blue;
  stroke: blue;
}

svg .message.reply {
  /* fill with no opacity so it's clickable */
  fill: blue;
  fill-opacity: 0;
  stroke: blue;
}

svg .log {
  fill: none;
  stroke: gray;
}

svg .entry rect {
  fill: none;
  stroke: black;
  stroke-width: 2;
}

svg .entry text {
  text-anchor: middle;
  alignment-baseline: central;
  text-align: center';
}

svg .nextIndex {
  fill: green;
  fill-opacity: .5;
}

svg #ring {
  opacity: 0.2;
}

svg #logs {
  opacity: 0.2;
}

svg .server {
}

svg .follower {
  fill: red;
}

svg .candidate {
  fill: yellow;
}

svg .leader {
  fill: green;
}

svg .server path {
  fill: none;
  stroke: black;
}

svg .server text {
  text-anchor: middle;
  alignment-baseline: central;
  text-align: center;
}

svg .server a:hover {
  text-decoration: none;
}

svg .message.request {
  fill: blue;
  stroke: blue;
}

svg .message.reply {
  /* fill with no opacity so it's clickable */
  fill: blue;
  fill-opacity: 0;
  stroke: blue;
}

svg .log {
  fill: none;
  stroke: gray;
}

svg .entry rect {
  fill: none;
  stroke: black;
  stroke-width: 2;
}

svg .entry text {
  text-anchor: middle;
  alignment-baseline: central;
  text-align: center';
}

svg .nextIndex {
  fill: green;
  fill-opacity: .5;
}

Remove underline when hovering over server


.admin_list {
    width: 100%;
    list-style: none;
}

.admin_list li {
    padding: .6em;
    background-color: #f6f6f6;
    border: 1px solid #ddd;
    display: block;
    transition: none;
}

#delete_button {
    display: block;
}

#delete_confirm {
    display: none;
}

.admin_list {
    width: 100%;
    list-style: none;
}

.admin_list li {
    padding: .6em;
    background-color: #f6f6f6;
    border: 1px solid #ddd;
    display: block;
    transition: none;
}

#useredit, #filedelete {
    box-sizing: content-box;
}

#delete_button {
    display: block;
}

#delete_confirm {
    display: none;
}

Fix minor bug in file edit view

Fix minor bug in file edit view


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

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

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

.ynab-select-options {
    height: 20em;
    top: -86px;
}

.modal-popup .modal-actions {
    padding: 7.3em .765em .765em .765em;
}

Move the buttons to the bottom of the dialog


body {
    background-color: #fafafa;
    margin: 30px 0 60px 0;
    padding: 0;
    font-family: Merriweather, serif;
    font-weight: 300;
    color: #473c3d;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Merriweather, serif;
    margin-top: .2em;
    margin-bottom: .5em;
}

h1 {
    font-size: 3em;
}

p {
    font-size: 16px;
    line-height: 2;
}

ul, li {
    font-family: Merriweather, serif;
    line-height: 2;
}

a {
    color: #DA121A;
}

.scb-header {
    color: #DA121A;
}

.scb-header-title {
    font-family: "Overpass Mono", serif;
    font-weight: 300;
    font-size: 1.5em;
    margin: 0;
}

.scb-content {
    display: block;
    margin: auto;
    padding: 0 30px;
    max-width: 800px;
}

body {
    background-color: #fafafa;
    margin: 30px 0 60px 0;
    padding: 0;
    font-family: Merriweather, serif;
    font-weight: 300;
    color: #473c3d;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Merriweather, serif;
    margin-top: 1.5em;
}

h1 {
    font-size: 3em;
}

p {
    font-size: 16px;
    line-height: 2;
}

ul, li {
    font-family: Merriweather, serif;
    line-height: 2;
}

a {
    color: #DA121A;
}

.scb-header {
    color: #DA121A;
}

.scb-header-title {
    font-family: "Overpass Mono", serif;
    font-weight: 300;
    font-size: 1.5em;
    margin: 0;
}

.scb-content {
    display: block;
    margin: auto;
    padding: 0 30px;
    max-width: 800px;
}

.scb-title {
    margin-top: .2em;
    margin-bottom: .5em;
}

Add extra top margin to headers

Add extra top margin to headers


@charset "UTF-8";
/* orc-misc.css -- CSS style sheet orc-misc
 * $Id$
 */

/* For "Opens in new window" icon */
.newWindowIcon {
    margin: 0;
    border: none;
    padding: 0;
}

/* For Orc in-line demos */
.orc-demo {
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
}
.content ul li {
        margin-top: 1em;
}
.highlight {
        font-weight: bold;
        font-style: italic;
}

/* For our research paper list */
.paper {
        font-weight: bold;
        text-decoration: underline;
}
.venue {
        font-style: italic;
}
.content ul li.new {
        list-style: url(images/new.gif);
}
.doi, .bibtex {
        border: 1px outset;
        height: 10px;
        font-size: 10px;
        padding: 0 2px 0 2px;
        text-decoration: none;
        color: #FFF;
        font-family: sans-serif;
        border-color: #036;
        background: #06C;
}

@charset "UTF-8";
/* orc-misc.css -- CSS style sheet orc-misc
 * $Id$
 */

/* Position Orc logo */
.title h1 img {
    vertical-align: baseline;
}

/* For "Opens in new window" icon */
.newWindowIcon {
    margin: 0;
    border: none;
    padding: 0;
}

/* For Orc in-line demos */
.orc-demo {
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
}
.content ul li {
        margin-top: 1em;
}
.highlight {
        font-weight: bold;
        font-style: italic;
}

/* For our research paper list */
.paper {
        font-weight: bold;
        text-decoration: underline;
}
.venue {
        font-style: italic;
}
.content ul li.new {
        list-style: url(images/new.gif);
}
.doi, .bibtex {
        border: 1px outset;
        height: 10px;
        font-size: 10px;
        padding: 0 2px 0 2px;
        text-decoration: none;
        color: #FFF;
        font-family: sans-serif;
        border-color: #036;
        background: #06C;
}

Fix remaining XHTML Strict validation problems in Orc Web site.

Fixes issue 54


body {
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
}

ul {
    list-style: none;
}

img {
    object-fit: cover;
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3 {
    margin: 0;
    margin-bottom: 20px;
}

.leaflet-container {
    height: 200px;
    width: 100%;
}

Add styles for rendering map

Add styles for rendering map


.x-explorerview {
    min-width: 100%;
}

.valo .x-explorerview .v-tree-node-focused:after {
    opacity: 1;
    border: none;
    background-color: #e8e8e8;
    border-radius: 0;
}

.x-explorerview .v-tree-node img.v-icon {
    height: 21px;
    vertical-align: text-bottom;
}

Make selected focus always full width.

Make selected focus always full width.


article > div:last-child > div > span {
  border-bottom: 1px solid black
}

body {
  padding-top: 70px;
}

footer {
  text-align: center;
  font-size: 50%;
}

#main-content {
  padding-bottom: 100px;
}

#nav_nomina {
  width: 200px;
}

#id_nomina {
  width: 200px;
}

Fix search form input too

Fix search form input too


header .jumbotron {
  position: relative;

  background: #fff url('../img/HS_things.jpg') no-repeat center -630px fixed;
  color: #fff;
  height: 480px;
}

header .jumbotron .container {
position: relative;
bottom: -50px;
}

.jumbotron.social {

}

/* From the boostrap documentation */
.bs-callout {
  margin: 20px 0px 40px;
  padding: 15px 30px 15px 15px;
  border-left: 5px solid #eee;
}
.bs-callout h4 {
  margin-top: 0;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
  background-color: #fff;
}

/* Themes for different contexts */
.bs-callout-danger {
  background-color: #fcf2f2;
  border-color: #dFb5b4;
}
.bs-callout-warning {
  background-color: #fefbed;
  border-color: #f1e7bc;
}
.bs-callout-info {
  /*background-color: #f0f7fd;*/
  background-color: #d6e9f9;
  border-color: #00509e;
}

header .jumbotron {
  position: relative;

  background: #fff url('../img/HS_things.jpg') no-repeat center -630px fixed;
  color: #fff;
  height: 480px;
}

header .jumbotron .container {
position: relative;
bottom: -50px;
}

.jumbotron.social {

}

.helptext {
  margin-top:0px;
  margin-bottom:0px;
  font-size:14px !important;
}

/* From the boostrap documentation */
.bs-callout {
  margin: 20px 0px 40px;
  padding: 15px 30px 15px 15px;
  border-left: 5px solid #eee;
}
.bs-callout h4 {
  margin-top: 0;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
  background-color: #fff;
}

/* Themes for different contexts */
.bs-callout-danger {
  background-color: #fcf2f2;
  border-color: #dFb5b4;
}
.bs-callout-warning {
  background-color: #fefbed;
  border-color: #f1e7bc;
}
.bs-callout-info {
  /*background-color: #f0f7fd;*/
  background-color: #d6e9f9;
  border-color: #00509e;
}

Add some styling to ensure correct height in header


/* Amazon Cloud Player tweak */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("https://www.amazon.co.jp/gp/dmusic/cloudplayer/") {
  .recFooter,                             /* Not interested */
  .recDescription > span[action="buy"],   /* Buy */
  #optionPanel li:nth-last-of-type(-n+2), /* Share */
  .headerActions > .grey,                 /* Delete */
  .ractiveContextMenu > li:nth-child(3)   /* Remove from library */
  {
    display: none !important;
  }

  .listViewDuration {
    font-weight: 300 !important;
    font-size: 1.8rem !important;
  }
}

/* Amazon Cloud Player tweak */
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("https://www.amazon.co.jp/gp/dmusic/cloudplayer/") {
  .recFooter,                             /* Not interested */
  .recDescription > span[action="buy"],   /* Buy */
  #optionPanel li:nth-last-of-type(-n+2), /* Share */
  .headerActions > .grey,                 /* Delete */
  .ractiveContextMenu > li:nth-child(3)   /* Remove from library */
  {
    display: none !important;
  }

  #header .listViewDuration {
    font-weight: 300 !important;
    font-size: 1.8rem !important;
  }
}

Fix scope to apply on header control only


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

.devtools-link {
  color: var(--color-link);
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 0; /* adjust focus ring size */
}

input.devtools-text-input[type="text"] {
  padding: 3px 6px;
  margin-left: 4px;
  margin-right: 4px;
  width: 250px;
  height: 25px;
}

.protocol-handlers-row {
  margin: 10px 0 2px 18px;
}

.inline-icon {
  vertical-align: text-bottom;
}

@media (forced-colors: active) {
  .devtools-link:not(.devtools-link-prevent-click) {
    color: linktext;
  }

  .devtools-link:focus-visible {
    background: Highlight;
    color: HighlightText;
  }
}

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

.devtools-link {
  color: var(--color-link);
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 0; /* adjust focus ring size */
}

.devtools-link:focus-visible {
  outline-width: unset;
}

input.devtools-text-input[type="text"] {
  padding: 3px 6px;
  margin-left: 4px;
  margin-right: 4px;
  width: 250px;
  height: 25px;
}

.protocol-handlers-row {
  margin: 10px 0 2px 18px;
}

.inline-icon {
  vertical-align: text-bottom;
}

@media (forced-colors: active) {
  .devtools-link:not(.devtools-link-prevent-click) {
    color: linktext;
  }

  .devtools-link:focus-visible {
    background: Highlight;
    color: HighlightText;
  }
}

Fix focus box for hyperlinks and text box in protocol handler section

Issue:
1. Focus box was not visible on hyperlinks in the protocol handler section in the Application Tool when tabbing to it.
2. The focus box color for the text box in the protocol handler section did not follow the color of other text boxes in DevTools
GIF of issue: https://drive.google.com/file/d/1bLe_GXtzt1xzidSmaeJf4dj338sfBsKT/view?usp=sharing

Fix:
1. Focus box is now visible for hyperlinks when tabbing to it
2. The focus box color for the text box now matches other text boxes in DevTools

Bug: 1336012: Focus box not visible when tabbing to hyperlinks in Protocol Handler section in Manifest Application Tool
Change-Id: I4db01062183b3bc98eff3a25be65d9355dab7de4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3705145
Commit-Queue: Kristin Lee <0f20a4934da336f76a8882b155f5bcf94925fad0@microsoft.com>
Reviewed-by: Wolfgang Beyer <573aa99bb19da47d816981118f95c945310dd3f4@chromium.org>
Reviewed-by: Michael Liao <00d75d81082fdf74688ec453c516b42f7cbf0f40@microsoft.com>
Reviewed-by: Jack Franklin <993fcadce4d04090da2fefd557a0995e7966c8d5@chromium.org>


/* Firefox userContent.css */

/* Hide elements from new Private Browsing tab. */
@-moz-document url("about:privatebrowsing") {
  html.private div.showPrivate div.logo-and-wordmark,
  html.private div.showPrivate div.search-inner-wrapper,
  html.private .vpn-promo {
    display: none !important;
  }
}

/* Firefox userContent.css */

/* Hide elements from new Private Browsing tab. */
@-moz-document url("about:privatebrowsing") {
  html.private div.showPrivate div.logo-and-wordmark,
  html.private div.showPrivate div.search-inner-wrapper {
    display: none !important;
  }
  html.normal .vpn-promo,
  html.private .vpn-promo {
    display: none !important;
  }
}

Hide VPN promotion in all windows

firefox: Hide VPN promotion in all windows


caption {
  display: block;
}

video, img {
  width: 50vw;
  height: 38vw;
}

figure, caption, video, audio, img {
  display: block;
}

video, img {
  width: 50vw;
  height: 38vw;
}

Add block formatting for resource/fixtures


@import "variables.css";

.header {
}

.title {
  font-weight: 700;
}

.container {
  margin: 1rem 5rem 1rem 5rem;
  padding: 0 0 1rem 1rem;
}

.fields-container {
  padding: 0 1rem 1rem 1rem;
  border: 1px solid var(--color-concrete);
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

.description {
  margin: 0;
  column-count: 2;
}

.json {
  padding: 1rem 0 1rem 0;
}

@import "variables.css";

.header {
  margin: 5rem 0 2rem 0;
}

.title {
  font-weight: 700;
  margin: 0 0 1rem 0;
}

.container {
  margin: 1rem 5rem 1rem 5rem;
  padding: 0 0 1rem 1rem;
}

.fields-container {
  padding: 0 1rem 1rem 1rem;
  border: 1px solid var(--color-concrete);
  border-bottom-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}

.description {
  margin: 0;
}

.json {
  padding: 1rem 0 1rem 0;
}

Add vertical spacing for consistency

Add vertical spacing for consistency


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

.exception-pattern {
  -webkit-box-flex: 1;
  -webkit-margin-end: 10px;
  -webkit-margin-start: 14px;
}

.exception-setting {
  -webkit-margin-end: 20px;
  display: inline-block;
  width: 100px;
}

select.exception-setting {
  vertical-align: middle;
}

/* Hacks to make the <select> align better with the <input>. */
html[toolkit=gtk] select.exception-setting {
  height: 22px;
  margin-top: 1px;
}

#exception-column-headers {
  -webkit-margin-start: 17px;
  display: -webkit-box;
  margin-top: 17px;
}

#exception-column-headers > div {
  font-weight: bold;
}

#exception-pattern-column {
  -webkit-box-flex: 1;
}

#exception-behavior-column {
  width: 140px;
}

.otr-explanation {
  font-style: italic;
}

#content-settings-exceptions-area list {
  margin-bottom: 10px;
  margin-top: 4px;
}

#plugins-tab {
  display: block;
  margin: 7px 0px;
}

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

.exception-pattern {
  -webkit-box-flex: 1;
  -webkit-margin-end: 10px;
  -webkit-margin-start: 14px;
}

.exception-setting {
  -webkit-margin-end: 20px;
  display: inline-block;
  width: 100px;
}

select.exception-setting {
  vertical-align: middle;
}

/* Hacks to make the <select> align better with the <input>. */
html[toolkit=gtk] select.exception-setting {
  height: 22px;
  margin-top: 1px;
}

#exception-column-headers {
  -webkit-margin-start: 17px;
  display: -webkit-box;
  margin-top: 17px;
}

#exception-column-headers > div {
  font-weight: bold;
}

#exception-pattern-column {
  -webkit-box-flex: 1;
}

#exception-behavior-column {
  width: 145px;
}

.otr-explanation {
  font-style: italic;
}

#content-settings-exceptions-area list {
  margin-bottom: 10px;
  margin-top: 4px;
}

#plugins-tab {
  display: block;
  margin: 7px 0px;
}

Adjust location of "Behavior" string in content settings exception table.

The desired horizontal position changed from moving the Add New row to the bottom.

BUG=none
TEST=visual

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

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


/**
 * Ideally use import as below, but currently encounters build issues,
 * and inability to install as NPM package due to missing package version number.
 * @import 'eLife-pattern-library/assets/sass/build.scss';
 * due to the above issues we import and inline the built CSS file from the web
 */
@import 'https://elifesciences.org/assets/patterns/css/all.d21534c9.css';

/**
 * Ensure fonts still resolve when not viewed on ELife website
 * This could potentially be extracted into a separate file, for more granular imports
 */
@import '../../fonts/notoSerif/notoSerif.css';
@import '../../fonts/notoSans/notoSans.css';

/* stylelint-disable xi/selector-pattern */
main {
  @extend .wrapper;
}
/* stylelint-enable */

:--Article {
  @extend .wrapper;
  @extend .content-container;
  @extend .grid__item;

  float: none;

  @extend .one-whole;
  @extend .large--eight-twelfths;
  @extend .x-large--seven-twelfths;
  @extend .grid-column;
}

:--Article :--authors {
  @extend .content-header__author_list;

  :--Person {
    @extend .content-header__author_list_item;
  }
}

/* Chain custom MicroData selectors for style adjustments as needed */
:--Article :--affiliations {
  display: inline;
  padding: 0;
}

/**
 * Ideally use import as below, but currently encounters build issues,
 * and inability to install as NPM package due to missing package version number.
 * @import 'eLife-pattern-library/assets/sass/build.scss';
 * due to the above issues we import and inline the built CSS file from the web
 */
@import 'https://elifesciences.org/assets/patterns/css/all.c3524e0d.css';

/**
 * Ensure fonts still resolve when not viewed on ELife website
 * This could potentially be extracted into a separate file, for more granular imports
 */
@import '../../fonts/notoSerif/notoSerif.css';
@import '../../fonts/notoSans/notoSans.css';

/* stylelint-disable xi/selector-pattern */
main {
  @extend .wrapper;
}
/* stylelint-enable */

:--Article {
  @extend .wrapper;
  @extend .content-container;
  @extend .grid__item;

  float: none;

  @extend .one-whole;
  @extend .large--eight-twelfths;
  @extend .x-large--seven-twelfths;
  @extend .grid-column;
}

:--Article :--authors {
  @extend .content-header__author_list;

  :--Person {
    @extend .content-header__author_list_item;
  }
}

/* Chain custom MicroData selectors for style adjustments as needed */
:--Article :--affiliations {
  display: inline;
  padding: 0;
}

Update hotlink url to eLife css

chore(Deps): Update hotlink url to eLife css


.home {
    padding-top: 50px;
}

.home li .collection {
    border: none;
    margin: 0.5rem 0;
}

.home .highlight {
    font-weight: bold;
}

.home .collection .collection-item.active {
    color: #eafaf9 !important;
}

.home .collection .collection-item.active .highlight {
    color: #eafaf9 !important;
}

.home {
    padding-top: 50px;
}

.home li .collection {
    border: none;
    margin: 0.5rem 0;
}

.home .highlight {
    font-weight: bold;
    -webkit-transition: all .2s ease;
       -moz-transition: all .2s ease;
         -o-transition: all .2s ease;
            transition: all .2s ease;
}

.home .collection .collection-item {
    -webkit-transition: all .2s ease;
       -moz-transition: all .2s ease;
         -o-transition: all .2s ease;
            transition: all .2s ease;
}

.home .collection .collection-item.active {
    color: #eafaf9 !important;
}

.home .collection .collection-item.active .highlight {
    color: #eafaf9 !important;
}

Fix text color animation in search results


/*!
 * Start Bootstrap - Full (http://startbootstrap.com/template-overviews/full)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-full/blob/master/LICENSE)
 */

body {
    background: url('../assets/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    font-family: "Ubuntu";
    color: #ffffff;
}

.navbar-brand::after {
  content: " </>";
}

.content {
  margin-top: 76px;
}

.transparent{
  background: rgba(255,255,255,0.2);
}

a.link {
  color: rgba(255,255,255,0.5)
}

a:hover.link {
  color: rgba(255,255,255,0.75)
}

/*!
 * Start Bootstrap - Full (http://startbootstrap.com/template-overviews/full)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-full/blob/master/LICENSE)
 */

body {
    background: url('../assets/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    font-family: "Ubuntu";
    color: #ffffff;
    min-height:100%;
    height:auto;
}

.navbar-brand::after {
  content: " </>";
}

.content {
  margin-top: 76px;
}

.transparent{
  background: rgba(255,255,255,0.2);
}

a.link {
  color: rgba(255,255,255,0.5)
}

a:hover.link {
  color: rgba(255,255,255,0.75)
}

Add height rules in css

Add height rules in css


.root {
  display: block;
  padding: 0.5em;
  user-select: none;
  overflow: hidden;
}

.heading {
  vertical-align: baseline;
  overflow: hidden;
}

.title {
  font-size: 1em;
  line-height: 1.5em;
  color: inherit;
  font-weight: 500;
  text-transform: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subtitle {
  color: inherit;
  margin: 0;
  padding: 0;
  margin-top: -0.2em;
  font-size: 0.8em;
  font-weight: 300;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1em;
}

.description {
  padding: 0;
  margin: 0;
  font-size: 0.75em;
}

.media {
  float: left;
  height: 2.5em;
  width: 2.5em;
  margin-right: 0.5em;
  overflow: hidden;
  position: relative;

  @nest & div {
    position: relative;
    height: 2.5em;
    width: 2.5em;
    overflow: hidden;
  }

  @nest & img {
    display: block;
    object-fit: cover;
  }
}

.root {
  display: block;
  padding: 0.5em;
  user-select: none;
  overflow: hidden;
  height: 1.5em;
  position: relative;
}

.heading {
  vertical-align: baseline;
  overflow: hidden;
}

.title {
  font-size: 1em;
  line-height: 1.5em;
  color: inherit;
  font-weight: 500;
  text-transform: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  width: calc(100% - 1em);
}

.subtitle {
  color: inherit;
  margin: 0;
  padding: 0;
  margin-top: -0.2em;
  font-size: 0.8em;
  font-weight: 300;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1em;
}

.description {
  padding: 0;
  margin: 0;
  font-size: 0.75em;
}

.media {
  float: left;
  height: 2.5em;
  width: 2.5em;
  margin-right: 0.5em;
  overflow: hidden;
  position: relative;

  @nest & div {
    position: relative;
    height: 2.5em;
    width: 2.5em;
    overflow: hidden;
  }

  @nest & img {
    display: block;
    object-fit: cover;
  }
}

Fix ellipsis overflow bug on preview

[components] Fix ellipsis overflow bug on preview


body {
    background-color: #262626;
    color: white;
    font-family: 'Press Start 2P', cursive;
    margin: 0 auto;
    width: 50%;
}
.string {
    border: 1px solid #262626;
    display: inline;
    float: left;
    height: 20px;
    width: 20px;
}
.string-middle {
    display: inline;
}
.fret {
    display: block;
}
#fret-9 td {
    background: #555555;
    display: inline;
    float: left;
    height: 20px;
    width: 20px;
}

#fret-9 .first {
    border: 1px solid green;
}

#fret-9 .second {
    border: 1px solid red;
}

#fret-9 .third {
    border: 1px solid yellow;
}

#fret-9 .forth {
    border: 1px solid blue;
}

#fret-9 .fifth {
    border: 1px solid orange;
}

#score {
    border-top: 1px solid white;
    padding-left:150px;
    padding-top: 5px;
}
#start {
    background-color: #262626;
    border: 1px solid white;
    color: white;
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    margin: 10px;
}

body {
    background-color: #262626;
    color: white;
    font-family: 'Press Start 2P', cursive;
    margin: 0 auto;
    width: 50%;
}
.string {
    border: 1px solid #262626;
    display: inline;
    float: left;
    height: 20px;
    width: 20px;
}
.string-middle {
    display: inline;
}
.fret {
    display: block;
}
#fret-9 td {
    display: inline;
    float: left;
    height: 20px;
    width: 20px;
}

#fret-9 .first {
    border: 1px solid green;
}

#fret-9 .second {
    border: 1px solid red;
}

#fret-9 .third {
    border: 1px solid yellow;
}

#fret-9 .forth {
    border: 1px solid blue;
}

#fret-9 .fifth {
    border: 1px solid orange;
}

#score {
    border-top: 1px solid white;
    padding-left:150px;
    padding-top: 5px;
}
#start {
    background-color: #262626;
    border: 1px solid white;
    color: white;
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    margin: 10px;
}

Update background of hammer row

Update background of hammer row


input.replaced {
    display: none;
}

input.replaced + label {
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: 50% 50%;
    background-size: 1em;
}

input[type="radio"].replaced + label {
    background-image: url("images/unchecked-radio-button.svg");
}

input[type="radio"].replaced:checked + label {
    background-image: url("images/checked-radio-button.svg");
}

input[type="checkbox"].replaced + label {
    background-image: url("images/unchecked-checkbox.svg");
}

input[type="checkbox"].replaced:checked + label {
    background-image: url("images/checked-checkbox.svg");
}

.navtable td label:hover, .navtable td label:focus {
    background-color: #ECE0A5;
}

.navtable td input.replaced + label {
    display: block;
    padding: 0.4em 0.6em;
}

input.replaced {
    display: none;
}

input.replaced + label {
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: 50% 50%;
}

input[type="radio"].replaced + label {
    background-image: url("images/unchecked-radio-button.svg");
    background-size: 1em;
}

input[type="radio"].replaced:checked + label {
    background-image: url("images/checked-radio-button.svg");
}

input[type="checkbox"].replaced + label {
    background-image: url("images/unchecked-checkbox.svg");
    background-size: 0.886226925454em;
    /* Radio buttons (circles) and checkboxes (squares) are made to have the same area,
       else checkboxes look (and actually are) bigger. */
}

input[type="checkbox"].replaced:checked + label {
    background-image: url("images/checked-checkbox.svg");
}

.navtable td label:hover, .navtable td label:focus {
    background-color: #ECE0A5;
}

.navtable td input.replaced + label {
    display: block;
    padding: 0.4em 0.6em;
}

Forms: Make radio buttons and checkboxes have the same area, not the same diameter. Else checkboxes look (and actually are) bigger.


body{
    overflow: hidden;
}

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

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

.search-result{
    padding: 10px;
}

.clickable{
    pointer-events: all;
}

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

body{
    overflow: hidden;
}

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

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

.search-result{
    padding: 10px;
}

.clickable{
    pointer-events: all;
}

#overhead-map{
    padding: 5px;
    background-color: #ffffff;
    height: 300px;
}

Move map to top of screen.

Move map to top of screen.


#files_rootjs_container #simpleGUI {
	position: relative;
	display: block;
	top: 0;
	left: 0;
	z-index: 0;
	height: 100%;
	width: 100%;
}

#files_rootjs_container{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	padding-top: 44px;
	height: 100%;
	width: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#simpleGUI_close {
	float: right;
	margin-right: 9px;
}

#files_rootjs_container #simpleGUI {
	position: relative;
	display: block;
	top: 0;
	left: 0;
	z-index: 100;
	height: 100%;
	width: 100%;
}

#files_rootjs_container{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	padding-top: 44px;
	height: 100%;
	width: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#simpleGUI_close {
	float: right;
	margin-right: 9px;
}

Hide context menu until we have solved click


.container {
  width: 500px;
}

.row {
  margin: 15px 0;
}

textarea {
  resize: none;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.clearfix {
  overflow: auto;
}

.container {
  width: 500px;
}

.row {
  margin: 15px 0;
}

textarea {
  resize: none;
}

button {
  cursor: pointer;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.clearfix {
  overflow: auto;
}

:cherry_blossom: Change cursor to pointer on button mouse over


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

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

div {
  height: 100%;
}

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

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

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

div {
  height: 100%;
}

.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 (min-width: 1100px) {
    height: 550px;
  }
}

Add media query for smaller screens

[F] Add media query for smaller screens


.error {
    -fx-background-color: #673AB7;
    -fx-text-fill: white;
}

.tag-selector {
    -fx-border-width: 1;
    -fx-border-color: white;
    -fx-border-radius: 3;
    -fx-background-radius: 3;
}

.tooltip-text {
    -fx-text-fill: white;
}

.error {
    -fx-background-color: red;
}

.tag-selector {
    -fx-border-width: 1;
    -fx-border-color: white;
    -fx-border-radius: 3;
    -fx-background-radius: 3;
}

.tooltip-text {
    -fx-text-fill: white;
}

Revert "change bg colour and text colour of error command box style"

This reverts commit d26ea9d4432e5a1e73eba9787548c06391d08bbd.


/* ======================================================================
   qcode.contextMenu default css
*/

/* Context menu block (wrapper <div>, closed by default) */
.context-menu {
    display: none;
    position: fixed;
    z-index: 1;
    background: white;
    border: 1px solid rgb(150,150,150);
    box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.3);
}
/* Modifier to open block */
.context-menu--open {
    display: block;
}

/* <ul> element */
.context-menu__list {
    display: block;
    margin: 0;
    padding: 0.1em 0;
}

/* Single <li> */
.context-menu__item {
    display: block;
    margin: 0;
    padding: 0.5em 20px;
}

/* Focussed <li> */
.context-menu__item:focus {
    background: rgb(66,129,244);
    color: white;
}

/* ======================================================================
   qcode.contextMenu default css
*/

/* Context menu block (wrapper <div>, closed by default) */
.context-menu {
    display: none;
    position: fixed;
    z-index: 1;
    background: white;
    border: 1px solid rgb(150,150,150);
    box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.3);
}
/* Modifier to open block */
.context-menu--open {
    display: block;
}

/* <ul> element */
.context-menu__list {
    display: block;
    margin: 0;
    padding: 0.1em 0;
}

/* Single <li> */
.context-menu__item {
    display: block;
    cursor: pointer;
    margin: 0;
    padding: 0.5em 20px;
}

/* Focussed <li> */
.context-menu__item:focus {
    background: rgb(66,129,244);
    color: white;
}

Use cursor: pointer for context-menu items


@font-face {
  font-family: "proximanova";
  src: url("https://s.dcdn.eu/images/fonts/proximanova-reg-webfont.woff") format('woff');
}

@font-face {
  font-family: "proximanova";
  src: url("https://s.dcdn.eu/images/fonts/proximanova-sbold-webfont.woff") format('woff');
  font-weight: 700;
}

body {
  box-sizing: border-box;
  font-family: 'proximanova', trebuchet ms, Verdana, 'Arial', sans-serif;
  font-size: 14px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-size-adjust: 100%;
}

@font-face {
  font-family: "proximanova";
  src: url("https://s.dcdn.eu/images/fonts/proximanova-reg-webfont.woff") format('woff');
}

@font-face {
  font-family: "proximanova";
  src: url("https://s.dcdn.eu/images/fonts/proximanova-sbold-webfont.woff") format('woff');
  font-weight: 700;
}

body {
  box-sizing: border-box;
  font-family: 'proximanova', trebuchet ms, Verdana, 'Arial', sans-serif;
  font-size: 14px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-size-adjust: 100%;
  margin: 0;
}

Remove the margin on the body element

Remove the margin on the body element


.selected {
  text-decoration: underline;
}

.full-height {
  height: 100vh;
}

.row {
  max-width: 95vw;
}

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

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

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

Add css for sidepanel handling

Add css for sidepanel handling


row {
  -moz-box-align: center;
}

richlistitem {
  -moz-box-align: center;
  border-bottom: 1px dotted grey;
}

.webapp-icon {
  width: 16px;
  height: 16px;
  margin: 5px;
}

richlistitem[dragpos=before] {
  border-top: 2px solid black;
}

richlistitem[dragpos=after] {
  border-bottom: 2px solid black;
}

row {
  -moz-box-align: center;
}

richlistitem {
  -moz-box-align: center;
  border-bottom: 1px dotted grey;
  border-top: 2px solid transparent;
}

.webapp-icon {
  width: 16px;
  height: 16px;
  margin: 5px;
}

richlistitem[dragpos=before] {
  border-top: 2px solid black;
}

richlistitem[dragpos=after] {
  border-bottom: 2px solid black;
}

Fix jerky drag and drop marker

Fix jerky drag and drop marker


body {
  background-color: #333;
}

#breakout {
  border: 2px solid white;
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  background-color: #333;
}

#breakout {
  border: 2px solid black;
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}

table {
  table-layout: fixed;
  width: 400px;
}

tr {
  width: 400px;
}

th, td {
  text-align: left;
  color: white;
  width: 350px;
}

th:first-child, td:first-child {
  width: 50px;
}

Add temporary basic table styling

Add temporary basic table styling


main {
  background-color: white;
  padding: 2em;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 4em;
  margin-bottom: 4em;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

main ol li a {
  color: #1976D2;
}

p a {
  color: #1976D2;
}

section h2 {
  text-align: center;
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 2em;
  margin-bottom: 2em;
}

section code {
  width: auto;
  padding: 1px;
  border: 1px solid gray;
  border-radius: 4px;
  background-color: lightgray;
}

pre code {
  background-color: transparent;
  border: none;
}

img {
  float: right;
  padding-left: 8px;
  width: 240px;
}

Fix up the in-line code styling a bit

Fix up the in-line code styling a bit


.root {
  hyphens: auto;
  white-space: pre-wrap;
  word-wrap: break-word;

  /*
     `word-wrap: break-word` is required for browsers that do not
     support automatic hyphenation (e.g. Edge on Windows as of
     2021-10) to prevent long words from causing horinzontal
     overflow. Mobile Safari (e.g. iPhone 11/iOS 13) does support
     `hyhens: auto`, but disables hyphenation if `word-wrap:
     break-word` is present. Since only Mobile Safari supports
     `-webkit-touch-callout` [1], we can use it to reset `word-wrap`
     for iOS only.

     [1] https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices
  */
  @supports (-webkit-touch-callout: none) {
    word-wrap: normal;
  }
}

.manualHyphens {
  hyphens: manual;
  word-wrap: break-word;
}

.root {
  hyphens: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*
  `word-wrap: break-word` is required for browsers that do not
  support automatic hyphenation (e.g. Edge on Windows as of
  2021-10) to prevent long words from causing horinzontal
  overflow. Mobile Safari (e.g. iPhone 11/iOS 13) does support
  `hyhens: auto`, but disables hyphenation if `word-wrap:
  break-word` is present. Since only Mobile Safari supports
  `-webkit-touch-callout` [1], we can use it to reset `word-wrap`
  for iOS only.

  [1] https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices
*/
@supports (-webkit-touch-callout: none) {
  .root {
    word-wrap: normal;
  }
}

.manualHyphens {
  hyphens: manual;
  word-wrap: break-word;
}

Fix nesting of CSS supports query

Fix nesting of CSS supports query

REDMINE-19252


body {
    padding-top: 20px;
    padding-bottom: 20px;
}

ul
{
    list-style-type: none;
}

.navbar {
    margin-bottom: 20px;
}

.navbar-brand {
    border: 2px;
    border-color: red;
}

ul {
    padding: 1em;
}

/* If a project is marked completed, cross it out */
li.project.completed>span.projectDesc {
    text-decoration: line-through;
}

a.projectifyButton {
    margin-right: 10px;
}

li.project.hidden {
    display: none;
}

li.project {
    border: 1;
    border-radius: 50px;
    background-color: #EEEEEE;
    margin: 0, 0, 5px, 0;
}

/* Not needed yet
#project-list-main {
}
*/

body {
    padding-top: 20px;
    padding-bottom: 20px;
}

ul
{
    list-style-type: none;
}

.navbar {
    margin-bottom: 20px;
}

.navbar-brand {
    border: 2px;
    border-color: red;
}

ul {
    padding: 1em;
}

/* If a project is marked completed, cross it out */
li.project.completed>span.projectDesc {
    text-decoration: line-through;
}

a.projectifyButton {
    margin-right: 10px;
}

li.project.hidden {
    display: none;
}

li.project {
    border: 1px;
    border-radius: 15px;
    background-color: #EEEEEE;
    margin: 0 0 2px 0;
    padding: 2px 10px;
    border: 1px solid;
    border-color: #DDDDDD;
}

span.drag-project {
    padding: 0 0 0 0;
}
span.drag-project > img {
    height: 12px;
    margin: 0 4px 4px 0;
}

Fix margins around draggable project handles


.modal-body {
    background-color: #fff;
}

.move-to-dialog {
    font-size: 15px;
}

.move-to-dialog .directory {
    display: block;
}

.move-to-dialog .directory-name {
    margin-bottom: 6px;
    display: inline-block;
    padding: 6px;
}

.move-to-dialog .directory-name:hover {
    background-color: #eaeaea;
    cursor: pointer;
}

.move-to-dialog .active-directory {
    background-color: #d0d0d0 !important;
}

.move-to-dialog .folder-icon {
    background: url("../images/folder.svg") no-repeat left center;
    opacity: 0.7;
    padding-left: 20px;
}

.modal-body {
    background-color: #fff;
    overflow: auto;
}

.move-to-dialog {
    font-size: 15px;
}

.move-to-dialog .directory {
    display: block;
}

.move-to-dialog .directory-name {
    margin-bottom: 6px;
    display: inline-block;
    padding: 6px;
}

.move-to-dialog .directory-name:hover {
    background-color: #eaeaea;
    cursor: pointer;
}

.move-to-dialog .active-directory {
    background-color: #d0d0d0 !important;
}

.move-to-dialog .folder-icon {
    background: url("../images/folder.svg") no-repeat left center;
    opacity: 0.7;
    padding-left: 20px;
}

Make "Move To" dialog scrollable

Make "Move To" dialog scrollable


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

main {
	display: block;
	height: 100%;
	padding-bottom: 500px;

}

Add main selector to general

Add main selector to general


.fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
}

<style>
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

Add FB button to css

Add FB button to css


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

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

.grid .cell .box {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.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;
}

Make dashboard cells occupy the same height in the same row and not exceed their available column width.


body {
  height: 100%;
  margin: 0;
  background-color: ghostwhite;
  font-family: sans-serif;
}

.full-screen {
  height: 100%;
  width: 100%;
}

.container-raised-desktop {
  display: block;
  background-color: white;
  padding: 1em 1em 0;
  max-width: 700px;
  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 1.14285714rem;
  line-height: 1.5;
}

@media (min-width: 600px) {
  body {
    padding: 0;
  }

  .container-raised-desktop {
    margin-left: auto;
    margin-right: auto;
    border: solid 1px rgba(0, 0, 0, 0.15);
    border-radius: 0.28571429rem;
    box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  }
}

.mono {
  font-family: Inconsolata, Monaco, monospace;
}

.positive {
  color: #21BA45;
}

.negative {
  color: #DB2828;
}

body {
  height: 100%;
  margin: 0;
  background-color: ghostwhite;
  font-family: sans-serif;
}

.full-screen {
  height: 100%;
  width: 100%;
}

.container-raised-desktop {
  display: block;
  background-color: white;
  padding: 1em 1em 0;
  max-width: 700px;
  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 1.14285714rem;
  line-height: 1.5;
}

@media (min-width: 600px) {
  body {
    padding: 0;
  }

  .container-raised-desktop {
    margin: 2em auto;
    border: solid 1px rgba(0, 0, 0, 0.15);
    border-radius: 0.28571429rem;
    box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  }
}

.mono {
  font-family: Inconsolata, Monaco, monospace;
}

.positive {
  color: #21BA45;
}

.negative {
  color: #DB2828;
}

Add margin to welcome screen

Add margin to welcome screen


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

#SignonViewerDialog {
  background: #dadce4;
}

.contentPane {
  margin: 9px 8px 5px 8px;
}

.actionButtons {
  margin: 0px 3px 6px 3px !important;
}

treechildren::-moz-tree-image(siteCol) {
  list-style-image: url(chrome://mozapps/skin/places/defaultFavicon.png);
  width: 16px;
  height: 16px;
  -moz-margin-end: 5px;
}

Fix favicon sizes in password manager

Fix favicon sizes in password manager