dev

Note: After publishing, you may have to bypass your browser's cache to see the changes.

/* Modal popup */
.modalWrapper#dpv-view-post,
.modalWrapper#dpv-view-user {
  animation: slide 0.3s forwards;
  -webkit-animation: slide 0.3s forwards;
  border:none;
  box-sizing:border-box;
  height: 100% !important;
  display:block;
  left: 0 !important;
  margin-left: 0 !important;
  overflow-y:scroll;
  position:fixed;
  top: 0 !important;
  transform: translateX(-100%);
}

.modalWrapper#dpv-view-post button.wikia-chiclet-button {
  position:absolute;
  right: -10px;
  top: -10px;
  background: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" fill="%23000" xml:space="preserve"><path d="M19.707 4.293a.999.999 0 0 0-1.414 0L12 10.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L10.586 12l-6.293 6.293a.999.999 0 1 0 1.414 1.414L12 13.414l6.293 6.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L13.414 12l6.293-6.293a.999.999 0 0 0 0-1.414"></path></svg>');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 30px 30px;
  opacity:1;
  height:30px;
  width:30px;
}
.theme-fandomdesktop-dark .modalWrapper#dpv-view-post button.wikia-chiclet-button {
  background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" fill="%23fff" xml:space="preserve"><path d="M19.707 4.293a.999.999 0 0 0-1.414 0L12 10.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L10.586 12l-6.293 6.293a.999.999 0 1 0 1.414 1.414L12 13.414l6.293 6.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L13.414 12l6.293-6.293a.999.999 0 0 0 0-1.414"></path></svg>');
}

.modalWrapper#dpv-view-post button.wikia-chiclet-button img {
  display:none;
}

/* Modal animation */
@keyframes slide {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes slide {
    100% { -webkit-transform: translateX(0%); }
}

/* Modal popup content */
.dpv-post {
  border-bottom:1px solid var(--theme-accent-color);
  margin-bottom:8px;
}
.dpv-post,
.dpv-post-reply {
  display:grid;
  grid-template-columns:20px 40px 1fr;
  padding:15px 15px;
  position:relative;
  grid-gap:2px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  word-wrap: break-word;
  word-break: break-all;
  margin: 3px;
}

#dpv-view-post h2 {
  margin-top:-10px;
  font-weight:700;
  font-size:2em;
  line-height:180%;
}
.dpv-post-author {
  font-weight:bold;
}
.dpv-post-top a {
  font-size:12px;
  font-weight:normal;
}
.dpv-post-date {
  position:absolute;
  right:20px;
  top:15px;
}
.dpv-post-date a {
  font-size:12px;
  color:#AAA;
}

.dpv-post-avatar {
  display:inline-block;
  grid-column:1/3;
  grid-row:1/3;
  overflow:hidden;
  vertical-align:middle;
  margin-right:10px;
}
.dpv-post-avatar img {
  border-radius:50%;
  width:40px;
}
.dpv-post-content {
  grid-column:3/4;
}
.dpv-post-category {
  padding:10px 0 0 0;	
  grid-column:3/4;
}
.dpv-post-dlink {
  grid-column:3/4;
}
.dpv-lock {
  border-left: 3px solid grey;
}
.dpv-delete {
  border-left: 3px solid red;
}
.dpv-report {
  border-left: 3px solid #DFEC24;
}
.dpv-post-image {
  max-width:450px;
  max-height:1000px;
}