hibiyasleep-tgd-theme.css

/*
 * hibiyasleep-tgd-theme
 *
 * (c) 2018 kuriyama hibiya, all rights reserved.
 *
 * Licensed under GPLv3 with additional restrictions:
   * When you reuse entire or any part of this CSS, you should
     quote like "hibiyasleep (and/or) 히비야 made this tgd skin"
     in *at least one of* tgd.kr notice article, in korean or
     english.
   * You can omit explicit source code publication, if you:
     * correctly quote as above
 AND * keep this comment
 AND * code-viewing IS NOT blocked or scramble, to read so-
       urce code normally.
   * If you don't or won't quote, you should pay me 1000 USD
     ('purchase'). and I'm assuming you implictly agree for this
     'purchase'.
 *
 */

:root {
  --shared-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.5);
  --small-shadow: 0 0rem 0.1rem rgba(0, 0, 0, 0.5);
  --border-light: 1px solid rgba(0, 0, 0, 0.25);

/*--theme-color: #39c; 
  --theme-color-darken: #21678a;
  --theme-color-transparent: rgba(51, 153, 204, 0.2); */

/*--theme-color: #F48FB1; /* Pink 200, originally #FF9FB5 borrowed from trans-pride flag //
  --theme-color-darken: #EC407A; /* Pink 400 //
  --theme-color-lighten: hsla(346, 100%, 95%, 0.9);
  --theme-color-transparent: rgba(255, 159, 181, 0.2); */
  
  --theme-color: #1E88E5; /* Blue 600 */
  --theme-color-bg: #1565C0; /* Blue 800 */
  --theme-color-darken: #0D47A1; /* Blue 900, not really darken */
/*--theme-color-lighten: #7986CB; /* Indigo 300 */
  --theme-color-transparent: rgba(40, 53, 147, 0.25);

  --hover-transition-duration: 150ms;
  --usual-button-transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease;

  --text-shadow-against-background: 0 0 0.25rem rgba(0, 0, 0, 1);
}
html {
  font-size: 16px !important;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Lato', 'Source Han Sans K', 'Noto Sans CJK', 'Malgun Gothic', sans-serif;
  background: none !important;
}
a, html.darkmode a {
  color: var(--theme-color-darken);
}

/* background */
body::before {
  display: block;
  content: '';

  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -10000;

  background-color: #111;
  background-image: url('https://d.hibiya.moe/hibiyasleep-tgd-background-4.jpg');
  background-size: cover;
  background-position: center 80%;
}
#main-content > .frame, .fr-toolbar, .fr-content, #header-bar > .row {
  background: rgba(255, 255, 255, 0.1) !important;
}
.spacer {
  background: none !important;
}
#article-content, .reply, .fr-wrapper {
  color: white;
  background: rgba(0, 0, 0, 0.25) !important;
}
.dropdown-menu {
  background: rgba(0, 0, 0, 0.9);
}
.dropdown-menu a,
#main .menu-wrapper > a,
#main .menu-wrapper > .game-wrapper > a.game,
#main .menu-wrapper #fav-shortcut-area > a {
  background: none !important;
  color: white !important;
  border-bottom: none !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transition: background-color var(--hover-transition-duration) ease;
}
.dropdown-menu a:hover,
#main .menu-wrapper a:hover,
#main .menu-wrapper > .game-wrapper > a.game:hover,
#main .menu-wrapper #fav-shortcut-area > a:hover {
  background-color: rgba(127, 127, 127, 0.5) !important;
}
#main .menu-wrapper .spacer {
  margin: 0.25rem 0;
  height: 0.06rem;
  background-color: rgba(255, 255, 255, 0.2) !important;
}

#title,
.frame,
#article-info,
#article-list > .article-list-row > .item > .list-title > a,
#article-content-wrapper .header span,
#commentWriteInfoForm .form-control,
.fr-box.fr-basic .fr-element {
  color: white;
}

#header-top-notice, #header-top-notice a,
#article-list > .article-list-row > .item > .list-title > a[style="color:#000000"] {
  color: white !important;
}

#article-content {
  background-blend-mode: exclusion;
}

.footer {
  background: none !important;
}

/* common buttons */
.btn {
  border-radius: 0 !important;
}
.btn-primary {
  background: var(--theme-color);
  border-color: var(--theme-color);
  transition: var(--usual-button-transition);
}
.btn-primary:hover {
  background: var(--theme-color-darken);
  border-color: var(--theme-color-darken);
}

/* logo */
a[href="/"] > img {
  filter: hue-rotate(-45deg) brightness(1.5) contrast(0.8) !important;
}
/* search */
#right-search-form {
  display: none !important;
}
/* disabled over 'navigation bar movements'
#right-search-form > input {
  border-color: var(--theme-color) !important;
}
#right-search-form > #right-search-btn {
  color: var(--theme-color) !important;
}
*/

/* navigation bar movements */
#header-bar {
  margin: 0.25rem auto !important;
}
#header-bar > .row {
  width: calc(100% - 10.1875rem);
  float: right;
  margin-top: -2.75rem;
}

#header-bar > .row {
  border: none !important;
  box-shadow: var(--shared-shadow);
}
#header-bar .caret {
  display: none;
}
#header-bar > .row {
  display: flex;
  padding: 0 !important;
  position: relative;
}
#header-bar > .row:before, #header-bar > .row:after {
  display: none !important;
}
#header-bar > .row > * {
  float: none;
  width: unset;
  position: static;
}
/* Header Menus */
#header-bar #header-menu-left, #header-bar #header-menu-right {
  display: flex;
  border: none !important;
  padding: 0;
  background: var(--theme-color-bg);
}
#header-bar #header-menu-right {
  margin-left: auto;
}
/* dropdown - general fixes */
#header-bar .dropdown {
  position: static;
}
#header-bar .dropdown .dropdown-menu {
  display: block !important;
  transform-origin: top left;
  transform: scale(0);
  opacity: 0;
  transition: var(--usual-button-transition), transform 150ms ease;
}
#header-bar .dropdown .dropdown-menu-right {
  transform-origin: top right;
}
#header-bar .dropdown.open .dropdown-menu {
  transform: scale(1);
  opacity: 1;
  /* line-height: 1.25rem !important; */
}
#favoriteDropdownMenu {
  transform-origin: 3.5rem top !important;
}
#playgroundDropdown + ul {
  transform-origin: 6.5rem top !important;
}
/* dropdown - content */
.dropdown-menu {
  border: none;
  border-radius: 0 !important;
  box-shadow: var(--shared-shadow);
}
.dropdown-menu:empty::after {
  display: block;
  content: '...?';
  padding: 0.25rem;
  text-align: center;
  color: #888;
  word-break: keep-all;
}
.dropdown-menu > li > a {
  padding: 0.25rem 1rem !important;
  line-height: 1.25rem;
}

/* dropdown - rank / delete button */
#latestDropdownMenu > li > a {
  padding: 0.125rem 0.75rem !important;
}
#favoriteDropdownMenu > li > a {
  padding: 0.125rem 0.5rem !important;
}
.dropdown-menu > li > a > span {
  line-height: 1.5rem !important;
  vertical-align: top !important;
}
.dropdown-menu > li > a > span.label.label-default {
  color: var(--theme-color);
  background: none !important;
  margin-right: 0 !important;
  height: 100%;
}
.dropdown-menu > li > a > .delrow {
  color: rgba(127, 127, 127, 0.5) !important;
  transition: background var(--hover-transition-duration) ease;
  height: 100% !important;
}
.dropdown-menu > li .delrow:hover {
  background-color: rgba(0, 0, 0, 0.5) !important
}

/* user dropdown */
#header-menu-right > .dropdown:last-child {
  padding: 0 !important;
  height: 100%;
  display: inline-flex;
  vertical-align: top;
}
#userDropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  padding: 0 !important;
}
#userDropdown > img {
  width: 2.5rem !important;
  height: 2.5rem !important;
  margin: 0 !important;
}
#userDropdown .badge {
  display: inline-flex;
  height: 100%;
  align-items: center;
  border-radius: 0 !important;
  background: rgba(255, 0, 0, 0.5) !important;
}
/* icon tweaks */
#header-bar .dropdown-toggle {
  transition: var(--usual-button-transition);
  border-top: 0.25rem solid transparent;
  border-bottom: 0.25rem solid transparent;
}
#userDropdown {
  border: none !important;
}
#header-bar .dropdown-toggle[aria-expanded="true"] {
  border-bottom-color: white;
}
#header-bar .dropdown-toggle:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
#userDropdown img {
  vertical-align: top;
}
#latestDropdown, #favoriteDropdown, #playgroundDropdown, a[href="/note/lists"], #userDropdown > .fa-user {
  font-size: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-size: 1.5rem 1.5rem;
  background-position: center;
  background-repeat: no-repeat;

  vertical-align: top;
}
#latestDropdown {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="white" d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>');
}
#favoriteDropdown {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="white" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
}
#playgroundDropdown {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="white" d="M19.77 7.23l.01-.01-3.72-3.72L15 4.56l2.11 2.11c-.94.36-1.61 1.26-1.61 2.33 0 1.38 1.12 2.5 2.5 2.5.36 0 .69-.08 1-.21v7.21c0 .55-.45 1-1 1s-1-.45-1-1V14c0-1.1-.9-2-2-2h-1V5c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v16h10v-7.5h1.5v5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V9c0-.69-.28-1.32-.73-1.77zM18 10c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zM8 18v-4.5H6L10 6v5h2l-4 7z"/></svg>');
}
a[href="/note/lists"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="white" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
}
#userDropdown > .fa-user {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="white" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
}

/* notice */
#header-bar #header-top-notice {
  padding: 0;
  font-size: 1rem;
  flex-grow: 100;
  line-height: 1.75rem;
}
#header-bar .notice-badge {
  display: none;
}

/* sidebar */
.menu-wrapper {
  box-shadow: var(--shared-shadow);
  border: none !important;
  filter: opacity(0.25);
  transition: filter 300ms ease, background 200ms ease;
}
.menu-wrapper:hover {
  filter: opacity(1);
  background-color: rgba(0, 0, 0, 0.2);
}
.menu-wrapper > a {
  transition: var(--usual-button-transition);
}
.menu-wrapper > a:last-child {
  border-bottom: none !important
}
.menu-wrapper > .header {
  background: var(--theme-color-bg) !important;
}
.menu-wrapper em, .menu-wrapper i.fa.fa-square {
  color: var(--theme-color) !important;
}
.menu-wrapper .game {
  text-align: center !important;
}
.menu-wrapper .game img {
  display: none;
}
/* content */
#main-content > .frame {
  box-shadow: var(--shared-shadow);
  border: none !important;
}

/* board info */

#board-info#board-info {
  background: var(--theme-color-bg);
  color: white;
  height: unset;
  padding: 0;
  margin-bottom: 0;
  position: relative;
}
#board-info h1 {
  padding: 0.625rem 0.75rem;
  border-bottom: none !important;
  line-height: 1.625rem;
}
#board-info h1 > .badge {
  color: rgba(255, 255, 255, 0.5) !important;
  background: none;
  font-size: 0.875rem;
  font-weight: 400;
  padding: 0;
}
#board-info h1 > .badge:after {
  display: inline;
  content: ' -';
}
#viewers-area {
  color: rgba(255, 255, 255, 0.5) !important;
  margin-left: -0.125rem;
  padding: 0;
}
#viewers-area i {
  display: none;
}
#viewers-area:after {
  display: inline;
  content: '명이 지켜보는 중'
}
#board-info-bottom {
  padding: 0 5rem 0 0 !important;
  text-align: right;
}
#board-info-bottom > a, #board-info #board-info-bottom #addFavoriteBtn {
  font-size: 0.875rem !important;
  border: none !important;
  padding: 0.625rem 0.75rem !important;
  transition: var(--usual-button-transition)
}
#board-info-bottom > a:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
#board-info a {
  color: white !important
}
#board-info a > i {
  display: none;
}
#board-info a > i.fa-star {
  display: inline;
}
#board-info-profile-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 5rem !important;
  height: 5rem !important;
  border-radius: 0;
  float: none !important;
}
/* article list - header */
#article-option-area#article-option-area {
  display: none;
}
#article-list-category#article-list-category {
  border: none !important;
  background: none !important;
  font-size: 1rem !important;
  margin-top: -2.375rem;
  padding-left: 0 !important;
  pointer-events: none; /* WARN: may not behavior as intended!! */
}
#article-neighbor-list ~ #article-list #article-list-category {
  margin-top: 0;
}
#article-list-category > a,
.article-list-row,
#article-list-menu,
#boardSearchForm {
  pointer-events: all !important;
}
#board-info + ins {
  background: var(--theme-color-bg);
}
ins:not(:empty) + #article-list > #article-list-category {
  background: var(--theme-color-bg);
  margin-top: 0;
}
.nav-link {
  font-size: 0.875rem !important;
  border: none;
  border-bottom: 0.25rem solid transparent;
  padding: 0.75rem 1rem 0.5rem 1rem !important;
  background: none !important;
  color: white;
  font-weight: 300 !important;

  transition: var(--usual-button-transition);
}
.nav-link:hover {
  color: white;
  background-color: rgba(0, 0, 0, 0.1) !important;
}
.nav-link.active {
  border-bottom: 0.25rem solid white;
}
/* article list */
#article-list {
  margin: 0;
  padding: 0 0 1rem 0;
  border: none;
  pointer-events: none;
}
.article-list-row {
  border: none !important;
}
.article-list-row {
  text-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.125);
}
html.darkmode #article-list>.article-list-row:hover,
.article-list-row:hover,
.article-list-row.notice:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  text-shadow: 0 0 0.25rem hsla(0, 0%, 20%, 1);
}
.article-list-row:hover a[style='']:visited,
.article-list-row.notice:hover a[style='']:visited {
  color: white !important;
}
.article-list-row.notice {
  background: rgba(255, 255, 255, 0.1) !important;
  text-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);
}
.list-header > strong {
  color: rgba(255, 255, 255, 0.5) !important;
}
.article-list-row > .item > div {
  border: none !important;
}
.article-list-row > .item > .list-time {
  color: rgba(255, 255, 255, 0.5) !important;
}
.list-title > a {
  transition: color 150ms ease;
}
#article-list > .article-list-row > .item > .list-title > a:visited { /* WARN: selector order */
  color: #999;
}
.article-list-row {
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  transition: background-color 200ms ease;
}
#article-list > .article-list-row.active {
  background: rgba(127, 127, 0, 0.25);
}
#article-list > .article-list-row.active + .article-list-row a::after {
  display: block;
  content: '다음 글';
  position: fixed;
  right: 4.5rem;
  bottom: 0.875rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.25);
  border: 0.08rem solid rgba(255, 255, 255, 0.2);
}
.list-header {
  width: 2.5rem !important;
}
.list-header > span {
  display: block;
  background: transparent !important;
  color: var(--theme-color) !important;
  border-radius: 0 !important;
  font-size: 0.875rem !important;
  height: 18px !important;
  line-height: 1.125rem;
  text-align: left;
  margin-left: 0.5em;
}
.list-header.v0 > span {
  opacity: 0.25;
}
.comment-count {
  color: var(--theme-color) !important;
}
/* icon */
.list-title .a-badge {
  width: 0;
}
.list-title .a-badge i.fa {
  font-size: 0;
}
.list-title .a-badge i.fa::after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-left: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent !important;
}
.list-title .a-badge i.fa.fa-info-circle::after   { border-color: var(--theme-color); }
.list-title .a-badge i.fa.fa-remove::after        { border-color: rgba(204, 0, 0, 0.75); }
.list-title .a-badge i.fa.fa-star::after          { border-color: #efc839; }
.list-title .a-badge i.fa.fa-picture-o::after     { border-color: rgba(70, 156, 104, 0.75); }
.list-writer.logged > span {
  color: var(--theme-color) !important;
}
.list-writer {
  padding: 0 !important;
  text-align: right !important;
  border: none !important;
}
.list-writer > span {
  display: flex !important;
  flex-direction: row-reverse;
  width: 9rem !important;
  height: 1.125rem !important;
}
.list-writer > span > img {
  vertical-align: top;
  margin-left: 0.25rem;
}
/* MAYBE TODO: .list-writer > span > img[title="Broadcaster"] */

.list-time {
  width: 3rem !important;
}
/* article list - footer */
#article-list-menu {
  display: flex;
  position: static !important;
  padding: 0 1rem;
  height: 1.875rem !important;
  margin-bottom: 1rem !important;
}
#article-list-menu > a, #article-list-menu > button {
  position: static !important;
  border: none !important;
  box-shadow: none !important;
  transition: var(--usual-button-transition);
  padding: 0.375rem 0.75rem 0.5rem 0.75rem !important;
}
#article-list-menu > a:hover, #article-list-menu > button:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}
#article-list-menu > .del, #article-list-menu > .cog {
  color: inherit !important;
  background: none !important;
}
#article-list-menu > .write {
  margin-left: auto;
  align-self: flex-end;
  background-color: transparent;
  color: var(--theme-color);
}
.pagination {
  align-self: flex-end;
  margin-bottom: 0;
  margin-left: auto;
  font-size: 0.75rem;
  border-radius: 0 !important;
}
.pagination > li > a {
  color: white !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;

  transition: var(--usual-button-transition);
}
.pagination > .active > a,
.pagination > .active > a:hover {
  cursor: pointer;
  background-color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
}
.pagination > li > a:hover {
  cursor: hand;
  color: white;
  background: rgba(0, 0, 0, 0.25) !important;
}
#boardSearchForm {
  display: flex;
  box-shadow: var(--small-shadow);
}
#boardSearchForm .input-group-btn {
  width: 5rem;
  margin-right: -0.0625rem;
}
#boardSearchForm .btn, #boardSearchForm input {
  box-shadow: none !important;
  background: none !important;
  color: #eee;
  border: none !important;
  width: 100%;
  height: 100%;
  transition: var(--usual-button-transition);
}
#boardSearchForm .btn:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}
#boardSearchForm .btn .fa-search {
  color: var(--theme-color);
}

/* article content */
#article-info {
  padding: 0;
  border-top: none;
  background: var(--theme-color-transparent);
  background-blend-mode: multiply;
}
#article-info .article-profile-img {
  border-radius: 0;
  top: unset;
  right: 0;
  bottom: 0;
  width: 3rem;
}
#article-info > h2 {
  padding: 0.75rem;
}
#article-info-writer {
  padding: 0 0.875rem 0.75rem 0.875rem !important;
}
#article-content-wrapper .header {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-end;
  text-align: right;
  height: 3rem;
  margin-left: 24rem;
  margin-right: 3rem;
  margin-top: -3rem;
  padding: 0.25rem 0.375rem;
  border: none !important;
  background: none !important;
}
#article-content-wrapper .header > span {
  padding: 0 0.25rem !important;
}
#article-content-wrapper .header > #article-time {
  width: 100%;
}
#article-content-wrapper .header > span > i {
  display: none;
}
#article-content-wrapper .header > #article-time > span::before {
  content: attr(title) ' ';
  color: rgba(255, 255, 255, 0.5);
}
#article-content-wrapper .header > span::before {
  display: inline;
  color: rgba(255, 255, 255, 0.5);
}
#article-views::before {
  content: '조회';
}
#article-votes::before {
  content: '추천';
}
#article-comment::before {
  content: '댓글';
}
#article-content {
  border: none !important;
  padding-top: 1.5rem !important;
}
#article-comment a {
  color: inherit;
}
#article-content-wrapper {
  padding: 0 !important;
}
#article-content-wrapper .footer {
  display: flex;
  justify-content: stretch;
  padding: 0;
  border: none !important;
}
#article-content-wrapper .footer .pull-right {
  align-self: flex-end;
}
#article-content-wrapper .footer .report-btn + .btn {
  margin-left: auto !important;
}
#article-content-wrapper .footer > .btn {
  padding: 0.5rem 1rem;
  box-shadow: none;
  margin-right: 0;
}
#article-content-wrapper .footer > .btn {
  transition: var(--usual-button-transition);
}
#article-content-wrapper .footer > .btn-default,
#article-content-wrapper .footer > .report-btn:not(:hover) {
  color: white;
  background: transparent;
  border-color: transparent;
}
#article-content-wrapper .footer > .report-btn {
  border-color: transparent;
  transition: var(--usual-button-transition);
}
#article-content-wrapper .footer > .btn-default:hover {
  background: rgba(0, 0, 0, 0.5);
  background-blend-mode: multiply;
  color: white;
}
/* against darkmode content highlighting */
html.darkmode #article-content p, html.darkmode #article-content span {
  background: none !important;
}

.vote-area {
  height: 0 !important;
  padding: 0 0 0 0 !important;
  margin-top: 1rem;
  margin-bottom: -0.0625rem;
}
.vote-area .btn {
  box-shadow: none;
  transition: var(--usual-button-transition);
}
.vote-area .btn.btn-outline-success {
  border-color: transparent;
  color: hsla(120, 50%, 70%, 1);
}
.vote-area .btn.btn-outline-success:hover {
  color: white;
  background-color: hsla(120, 50%, 50%, 1);
}
/* reply */
#article-reply-area > .header {
  padding: 1rem 1rem 1.25rem 1rem;
}
#article-reply-area > .header > h5, #lastc {
  color: white !important;
  font-size: 0.75rem !important;
  font-weight: 400;
}
.reply {
  border: none !important;
  border-top: 0.125rem solid var(--theme-color) !important;
}
.reply-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: #eee;
  background: rgba(0, 0, 0, 0.25) !important;
  border: none !important;
  padding: 0 0 0.125rem 0 !important;
}
.reply-writer.logged {
  color: var(--theme-color-darken) !important;
}
.reply-writer, .reply-writer ~ .code, .reply-menu {
  padding-top: 0 !important;
}
.reply-menu {
  margin-left: auto;
  margin-right: 0.625rem;
}
.reply-menu > .time {
  order: 0;
  flex-grow: 10;
}
.reply-menu > a {
  color: var(--theme-color) !important;
}
.reply-writer-image {
  width: 3em !important;
  height: 3em !important;
  border-radius: 0 !important;
}
.middot {
  font-size: 0;
  margin: 0 0.375rem !important;
}
.comment-report-btn + a {
  margin-left: 0.375rem;
}
.reply-content .fr-box,
.reply-content #comment-write-button-area {
  margin: 0 -0.625rem;
}
#commentWriteInfoForm .form-control {
  background: none;
  box-shadow: none;
  margin: 1rem;
  border-radius: 0;
  border-top: none;
  border-right: none;
  border-left: none;
}
.reply-content .form-control {
  margin: 0 !important;
  color: #000 !important;
}
.rereply-btn {
  color: var(--theme-color) !important;
  left: -1rem !important;
}
.rereply-btn i::before {
  content: '#' !important;
}
.reply-content img {
  max-width: 100%;
}
/* ad under reply */
#article-reply-area + div > div > div > div {
  background: none !important;
  color: white !important;
}
/* editor */
#comment-write-form-area {
  padding: 0;
}
#commentWriteInfoForm {
  margin: 0 2rem 0 0;
}
#comment-write-button-area > .pull-left {
  margin-left: 1rem;
}
#comment-write-button-area > .pull-right {
  margin-right: 1rem;
}

.fr-toolbar, .fr-wrapper {
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
}
.fr-toolbar {
  border-top: var(--border-light) !important;
  border-bottom: var(--border-light) !important;
}
.fr-toolbar > .fr-command.fr-btn {
  color: var(--theme-color);
  transition: 100ms color ease;
}
.fr-toolbar > .fr-command.fr-btn:hover {
  color: #111;
}
.fr-separator {
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.fr-arrow {
  border-bottom-color: var(--theme-color) !important;
}
.fr-popup {
  border-top-color: var(--theme-color) !important;
}
.fr-popup .fr-buttons {
  background: var(--theme-color);
}
.fr-popup .fr-command.fr-btn, .fr-popup .fr-command.fr-colors-tab {
  color: rgba(255, 255, 255, 0.5);
  transition: var(--usual-button-transition);
}
.fr-popup .fr-command.fr-btn:hover,
.fr-popup .fr-command.fr-btn:focus,
.fr-popup .fr-command.fr-btn.fr-blink,
.fr-popup .fr-command.fr-colors-tab:hover,
.fr-popup .fr-command.fr-colors-tab:focus,
.fr-popup .fr-command.fr-colors-tab.fr-blink {
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.75);
}
.fr-popup .fr-command.fr-btn.fr-active,
.fr-popup .fr-command.fr-selected-tab {
  color: white !important;
  border-bottom-color: white !important;
}
.fr-popup .fr-colors-tab[data-param1=background]::after {
  background: white !important;
}
.fr-wrapper {
  box-shadow: 0 -1px 1px -1px rgba(0, 0, 0, 0.75) inset !important;
}

#articleWriteForm {
  margin: 0 -0.875rem;
}
#articleWriteForm .form-control {
  color: white !important;
}
#articleWriteForm > .row {
  display: flex;
  margin: 0;
}
#articleWriteForm > .row > .col-xs-12 {
  padding: 0;
}
#articleWriteForm > .row .left {
  position: relative;
  padding: 0;
  margin: 0;
  width: 8rem;
}
#articleWriteForm > .row .left::after {
  display: block;
  content: '';
  width: 0.75rem;
  height: 0.75rem;

  position: absolute;
  top: 0.9375rem;
  right: 0.5rem;
  bottom: 0;
  margin: auto;

  border-top: var(--border-light);
  border-right: var(--border-light);
  transform: rotate(45deg);
}
#articleWriteForm > .row .right {
  padding-left: 0;
}
#articleWriteForm > .row .right > input {
  margin-left: 0.25rem !important;
  padding-left: 0 !important;
}
#articleWriteForm > .row:first-of-type + .row #title {
  margin-top: 0.5rem;
}
select[name='category_id'] {
  display: flex;
  align-items: flex-end;
  height: 100%;
  font-size: 1.25rem;

  color: #111;
  background: none;
  box-shadow: none !important;

  padding: 0.1875rem 0.5rem 0.1875rem 0.75rem !important;
  border: none;
  border-radius: 0;
  box-shadow: none;

  vertical-align: bottom;
  -webkit-appearance: none;
}
#articleWriteForm #title {
  border: none;
  box-shadow: none;
  font-size: 1.25rem;
  margin: 1rem 0 0 0;
  padding: 0 1rem;
  color: white;
}
#articleWriteForm input, #articleWriteForm .input-group-addon {
  box-shadow: none;
  border: none;
  border-bottom: 0.08rem solid #ccc;
  background: none;
  padding-left: 0;
  padding-right: 0.5rem;
  border-radius: 0;
}
#articleWriteForm .mt-2:nth-child(4),
#articleWriteForm .mt-2:nth-child(5) {
  margin: 1rem;
}
#articleWriteForm .mt-2.clearfix::before,
#articleWriteForm .mt-2.clearfix::after {
  display: none;
}
#articleWriteForm .mt-2.clearfix {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 1rem;
}

/* alertify */
.alertify {
  transition: opacity 10s ease;
}
.alertify.hide {
  transform: translateY(100%);
}
.alertify > .dialog {
  top: 100%;
  padding: 0;
  transform: translateY(-100%);
  transition: var(--usual-button-transition);
}
.alertify.hide > .dialog {
  transform: translateY(0);
}

/* page footer */
footer {
  color: #ccc;
}
footer, footer a {
  text-shadow: var(--text-shadow-against-background);
}

/* ??? */
div[style="border:1px solid #990000;padding-left:20px;margin:0 0 10px 0;"] {
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  border: none !important;
  color: white;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.75rem;
  padding: 1rem 1.5rem 1rem 0.5rem;
  max-height: 10rem;
  overflow-y: auto;
  z-index: 10000000;
}
div[style="border:1px solid #990000;padding-left:20px;margin:0 0 10px 0;"]:hover {
  max-height: 100%;
}
div[style="border:1px solid #990000;padding-left:20px;margin:0 0 10px 0;"] h4 {
  font: inherit;
  color: #f66;
}
div[style="border:1px solid #990000;padding-left:20px;margin:0 0 10px 0;"] p {
  margin: 0;
}
div[style="border:1px solid #990000;padding-left:20px;margin:0 0 10px 0;"] p[style="margin-left:10px"] {
  margin-left: 2rem !important;
  margin-top: 1rem;
}