gab-social/app/javascript/styles/global.css

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

body {
  overflow-y: scroll;
  overscroll-behavior-y: none;
}

.overflowYScroll {
  overflow: hidden;
  overflow-y: scroll;
}

.statusContent,
.statusContent * {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 15px;
  overflow-wrap: break-word;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}

.dangerousContent,
.dangerousContent * {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
  overflow-wrap: break-word;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}

.statusContent a,
.dangerousContent a {
  color: #21cf7a;
  text-decoration: none;
}

.statusContent a:hover,
.dangerousContent a:hover {
  text-decoration: underline;
}

.statusCardVideo iframe {
  height: 100% !important;
  width: 100% !important;
}

.default {
  display: flex;
  flex-basis: auto;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  border: 0 solid black;
  z-index: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

.text {
  display: inline;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}

.font {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
}

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

.overflowWrapBreakWord {
  overflow-wrap: break-word;
}

.inherit {
  color: inherit;
  font: inherit;
  white-space: inherit;
}

.inheritFill {
  fill: inherit;
}

.flexNormal {
  flex-basis: 0%;
  flex-grow: 1;
  flex-shrink: 1;
}

.flexGrow1 {
  flex-grow: 1;
}

.flexShrink1 {
  flex-shrink: 1;
}

.flexRow {
  flex-direction: row;
}

.flexWrap {
  flex-wrap: wrap;
}

.alignItemsEnd {
  align-items: flex-end;
}

.alignItemsStart {
  align-items: flex-start;
}

.alignItemsCenter {
  align-items: center;
}

.justifyContentSpaceBetween {
  justify-content: space-between;
}

.justifyContentCenter {
  justify-content: center;
}

.overflowHidden {
  overflow-x: hidden;
  overflow-y: hidden;
}

.textOverflowEllipsis {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whiteSpaceNoWrap {
  white-space: nowrap;
}

.outlineNone {
  outline: none;
}

.resizeNone {
  resize: none;
}

.circle {
  border-radius: 9999px;
}

.radiusSmall {
  border-radius: 8px;
}

.borderColorSecondary2 {
  border-color: #e5e9ed;
}

.borderColorSecondary {
  border-color: #ECECED;
}

.borderColorWhite {
  border-color: #fff;
}

.borderColorBrand {
  border-color: #21cf7a;
}

.borderColorTransparent {
  border-color: transparent;
}

.borderRight1PX {
  border-right-width: 1px;
}

.borderBottom1PX {
  border-bottom-width: 1px;
}

.borderLeft1PX {
  border-left-width: 1px;
}

.borderTop1PX {
  border-top-width: 1px;
}

.border1PX {
  border-width: 1px;
}

.border2PX {
  border-width: 2px;
}

.borderBottom2PX {
  border-bottom-width: 2px;
}

.borderDashed {
  border-style: dashed;
}

.marginAuto {
  margin: auto;
}

.margin1PX {
  margin: 1px;
}

.displayNone {
  display: none;
}

.displayBlock {
  display: block;
}

.displayInline {
  display: inline;
}

.displayFlex {
  display: flex !important;
}

.displayInlineBlock {
  display: inline-block;
}

.cursorText {
  cursor: text;
}

.cursorPointer {
  cursor: pointer
}

.cursorNotAllowed {
  cursor: not-allowed;
}

.pointerEventsAuto>* {
  pointer-events: auto;
}

.pointerEventsNone {
  pointer-events: none !important;
}

.backgroundTransparent {
  background-color: transparent;
}

.backgroundPanel {
  background-color: #aaa;
}

.backgroundSubtle {
  background-color: #F5F8FA;
}

.backgroundSubtle_onHover:hover {
  background-color: #F5F8FA;
}

.backgroundSubtle2 {
  background-color: #e2e8ec;
}

.backgroundSubtle2Dark_onHover:hover {
  background-color: #d9e0e5;
}

.backgroundColorSecondary3 {
  background-color: #F6F6F9;
}

.backgroundColorPrimary {
  background-color: #fff;
}

.backgroundColorWhite {
  background-color: #fff;
}

.backgroundColorPrimaryOpaque {
  background-color: rgba(255, 255, 255, 0.6);
}

.backgroundColorBrandLightOpaque {
  background-color: rgba(54, 233, 145, 0.1);
}

.backgroundColorBlack {
  background-color: #3B3B3B;
}

.backgroundColorBlackOpaque_onHover:hover {
  background-color: rgba(59, 59, 59, 0.8);
}

.backgroundColorOpaque {
  background-color: rgba(0, 0, 0, 0.4);
}

.backgroundColorBrandLight {
  background-color: #36e991;
}

.backgroundColorBrand {
  background-color: #21cf7a;
}

.backgroundColorBrand_onHover:hover {
  background-color: #21cf7a;
}

.backgroundColorBrandDark {
  background-color: #38A16B;
}

.backgroundColorBrandDark_onHover:hover {
  background-color: #38A16B;
}

.backgroundColorDanger {
  background-color: #DE2960;
}

.colorPrimary {
  color: #000;
}

.colorWhite {
  color: #fff;
}

.colorWhite_onHover:hover {
  color: #fff;
}

.colorTertiary {
  color: #777;
}

.colorSecondary {
  color: #4B4F55;
}

.colorBrand {
  color: #21cf7a
}

.colorGabPro {
  color: #ffd700;
}

.fillColorBlack {
  fill: #000;
}

.fillColorWhite {
  fill: #fff;
}

.fillColorWhite_onHover:hover {
  fill: #fff;
}

.fillColorBrand {
  fill: #21cf7a;
}

.fillColorSecondary {
  fill: #666;
}

.fillColorGabPro {
  fill: #ffd700;
}

.bottom0 {
  bottom: 0;
}

.bottomAuto {
  bottom: auto;
}

.left0 {
  left: 0px;
}

.right0 {
  right: 0px;
}

.rightAuto {
  right: auto;
}

.top0 {
  top: 0px;
}

.lineHeight125 {
  line-height: 1.25em;
}

.lineHeight15 {
  line-height: 1.5em;
}

.lineHeight2 {
  line-height: 2em;
}

.positionFixed {
  position: fixed;
}

.positionSticky {
  position: sticky;
}

.positionRelative {
  position: relative;
}

.positionAbsolute {
  position: absolute;
}

.noSelect {
  user-select: none;
}

.resizeVertical {
  resize: vertical;
}

.heightMax100VH {
  max-height: 100vh;
}

.heightMin100VH {
  min-height: 100vh;
}

.heightMax80VH {
  max-height: 80vh;
}

.heightMin50VH {
  min-height: 50vh;
}

.heightMin50PX {
  min-height: 50px;
}

.height100VH {
  height: 100vh;
}

.height100PC {
  height: 100%;
}

.height24PX {
  height: 24px;
}

.height22PX {
  height: 22px;
}

.height20PX {
  height: 20px;
}

.height4PX {
  height: 4px;
}

.height1PX {
  height: 1px;
}

.height50PX {
  height: 50px;
}

.height53PX {
  height: 53px;
}

.height72PX {
  height: 72px;
}

.height122PX {
  height: 122px;
}

.height158PX {
  height: 158px;
}

.height220PX {
  height: 220px;
}

.height260PX {
  height: 260px;
}

.height350PX {
  height: 350px;
}

.width1015PX {
  width: 1015px;
}

.width645PX {
  width: 645px;
}

.width340PX {
  width: 340px;
}

.width330PX {
  width: 330px;
}

.width250PX {
  width: 240px;
}

.width240PX {
  width: 240px;
}

.width72PX {
  width: 72px;
}

.width50PX {
  width: 50px;
}

.width20PX {
  width: 20px;
}

.width100PC {
  width: 100%;
}

.width50PC {
  width: 50%;
}

.width25PC {
  width: 25%;
}

.width4PX {
  width: 4px;
}

.maxWidth100PC {
  max-width: 100%;
}

@media (min-width: 1480px) {
  .width1015PX {
    width: 1080px;
  }

  .width645PX {
    width: 700px;
  }

  .width340PX {
    width: 350px;
  }

  .width240PX {
    width: 250px;
  }
}

@media (min-width: 1160px) and (max-width: 1280px) {
  .width1015PX {
    width: 910px;
  }

  .width645PX {
    width: 580px;
  }

  .width340PX {
    width: 300px;
  }

  .width240PX {
    width: 230px;
  }
}

@media (min-width: 1080px) and (max-width: 1160px) {
  .width1015PX {
    width: 850px;
  }

  .width645PX {
    width: 525px;
  }

  .width340PX {
    width: 300px;
  }

  .width240PX {
    width: 210px;
  }
}

@media (min-width: 992px) and (max-width: 1080px) {
  .width1015PX {
    width: 850px;
  }

  .width645PX {
    width: 525px;
  }

  .width340PX {
    width: 300px;
  }

  .width240PX {
    width: 100px;
  }
}

@media (min-width: 0px) and (max-width: 992px) {
  .width1015PX {
    max-width: 600px;
    width: 100%;
  }

  .width645PX {
    max-width: 600px;
    width: 100%;
  }

  .width340PX {
    width: 0px;
  }

  .width240PX {
    width: 0px;
  }
}

.top0 {
  top: 0;
}

.top60PC {
  top: 60%;
}

.textAlignLeft {
  text-align: left;
}

.textAlignCenter {
  text-align: center;
}

.fontSize24PX {
  font-size: 24px;
}

.fontSize19PX {
  font-size: 19px;
}

.fontSize16PX {
  font-size: 16px;
}

.fontSize15PX {
  font-size: 15px;
}

.fontSize14PX {
  font-size: 14px;
}

.fontSize13PX {
  font-size: 13px;
}

.fontSize12PX {
  font-size: 12px;
}

.fontSize0 {
  font-size: 0;
}

.fontWeightNormal {
  font-weight: 400;
}

.fontWeightMedium {
  font-weight: 500;
}

.fontWeightBold {
  font-weight: 600;
}

.fontWeightExtraBold {
  font-weight: 800;
}

.noUnderline {
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

.underline_onHover:hover {
  text-decoration: underline;
}

.objectFitCover {
  object-fit: cover;
}

.shadow {
  /* todo */
}

.z1 {
  z-index: 1;
}

.z2 {
  z-index: 2;
}

.z3 {
  z-index: 3;
}

.z4 {
  z-index: 4;
}

.my5 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.ml5 {
  margin-left: 5px;
}

.marginLeftNeg5PX {
  margin-left: -5px;
}

.marginBottomNeg5PX {
  margin-bottom: -5px;
}

.mt2 {
  margin-top: 2px;
}

.mr2 {
  margin-right: 2px;
}

.mr5 {
  margin-right: 5px;
}

.my10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.mr10 {
  margin-right: 10px;
}

.ml15 {
  margin-left: 15px;
}

.ml10 {
  margin-left: 10px;
}

.marginLeftAuto {
  margin-left: auto;
}

.marginRightAuto {
  margin-right: auto;
}

.mb15 {
  margin-bottom: 15px;
}

.mb10 {
  margin-bottom: 10px;
}

.mt10 {
  margin-top: 10px;
}

.mt5 {
  margin-top: 5px;
}

.marginTopAuto {
  margin-top: auto;
}

.marginTopNeg30PX {
  margin-top: -30px;
}

.marginTopNeg75PX {
  margin-top: -75px;
}

.paddingTop5625PC {
  padding-top: 56.25%;
}

.paddingTop25PC {
  padding-top: 25%;
}

.pt15 {
  padding-top: 15px;
}

.pt10 {
  padding-top: 10px;
}

.pt5 {
  padding-top: 5px;
}

.pt2 {
  padding-top: 2px;
}

.pb10 {
  padding-bottom: 10px;
}

.pb5 {
  padding-bottom: 5px;
}

.px15 {
  padding-left: 15px;
  padding-right: 15px;
}

.pl15 {
  padding-left: 15px;
}

.pl0 {
  padding-left: 0;
}

.pr0 {
  padding-right: 0;
}

.pr15 {
  padding-right: 15px;
}

.py5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.py10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py15 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.py2 {
  padding-top: 2px;
  padding-bottom: 2px;
}

.px2 {
  padding-left: 2px;
  padding-right: 2px;
}

.pb15 {
  padding-bottom: 15px;
}

.px5 {
  padding-left: 5px;
  padding-right: 5px;
}

.px10 {
  padding-left: 10px;
  padding-right: 10px;
}

.opacity0 {
  opacity: 0;
}

.opacity05 {
  opacity: 0.5;
}

.opacity1 {
  opacity: 1;
}

.boxShadow1 {
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .25);
}

.boxShadow2 {
  box-shadow: 0 0 15px -5px rgba(0,0,0,0.15);
}

.listStyleNone {
  list-style: none;
}

.videoPlayerControlsBackground {
  background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, .45) 60%, transparent);
}

.videoPlayerSeek:before {
  content: '';
  display: block;
  position: absolute;
  border-radius: 4px;
  top: 10px;
  width: 100%;
  height: 40px;
}

.videoPlayerVolume {
  width: 24px;
  right: 65px;
  bottom: 60px;
}

.select {
  height: 42px;
  line-height: 42px;
  font-size: 18px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.emojione {
  margin: -3px 0 0;
  height: 20px;
  width: 20px;
}

/* .videoPlayerVolume:before {
  content: '';
  display: block;
  position: absolute;
} */

.visibilityHidden {
  visibility: hidden;
}

/**
 * Rich Text Editor
 */
.RTE :global(.RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root) {
  display: none;
}

.RTE :global(.RichEditor-editor .RichEditor-blockquote) {
  border-left: 5px solid #eee;
  color: #666;
  font-family: 'Hoefler Text', 'Georgia', serif;
  font-style: italic;
  margin: 16px 0;
  padding: 10px 20px;
}

.RTE :global(.RichEditor-editor .public-DraftStyleDefault-pre) {
  background-color: rgba(0, 0, 0, 0.05);
  font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace;
  font-size: 16px;
  padding: 20px;
}