// All posts view themes inherit from this file.

// Please use ems whenever sizing text or things that should scale with text. Then Awful's font scale setting works properly.

// The body has the .iphone class on iPhones; .ipad on iPads.

body {
  // Prevents a grey overlay when tapping below the bottom of the "end of thread" element. Particularly annoying when there's less than a screenful of posts to show.
  min-height: 100vh;

  font: -apple-system-body;

  margin: 0;

  // Maintain text size on orientation change.
  -webkit-text-size-adjust: 100%;

  // Hide the web view's long-tap link menu.
  -webkit-touch-callout: none;

  // Skip the double-tap delay: https://webkit.org/blog/5610/more-responsive-tapping-on-ios/
  touch-action: manipulation;
}

// Don't break tables with text, images, or videos.
body {
  word-wrap: break-word;
}
.postbody {
  img, iframe, embed {
    max-width: 100%;
  }
  div.code pre {
    white-space: break-spaces;
  }
}

// The action sheet code highlights the <header>, <footer>, and .action-button elements. Padding on those elements is included in the highlight but margin is not. So prefer padding the <header> and <footer> over setting a margin on the <post>.
.post-side-padding(@padding) {

  // Spelled out with -left and -right so padding can be individually overridden later.
  header, .postbody {
    padding-left: @padding;
    padding-right: @padding;
  }
  footer {
    padding-left: @padding;
  }
  .action-button {
    padding-right: @padding;
  }
}

post {
  display: block;

  .iphone & {
    .post-side-padding(0.6em);
  }
  .ipad & {
    .post-side-padding(1.07em);
  }

  border-top: 1px solid;
  border-bottom: 1px solid;

  .spacer(@height) {
    margin-top: @height;
    &:first-child {
    	margin-top: 0;
    }
  }
  .spacer(0.5em);
}

header {
  padding-top: 0.75em;
  padding-bottom: 0.7em;

  .ipad & {
    padding-top: 1.22em;
  }

  &:after {
    content: "";
    display: block;
    clear: both;
  }
}

.avatar {
  display: inline-block;
  vertical-align: middle;

  .constrain-size(@width) {
    max-width: @width;
    max-height: @width;
  }
  .iphone & {
    .constrain-size(2.5em);
  }
  .ipad & {
    .constrain-size(4em);
  }
}

.nameanddate {
  display: inline-block;
  vertical-align: middle;
}

.username {
  margin: 0 0 2px;

  // Prevent obnoxiously-long single-word usernames from breaking things.
  word-break: break-all;
}

.postdate {
  font-size: .8em;
  font-weight: 500;
  -webkit-flex-grow: 1;
  -webkit-flex-wrap: wrap-reverse;
}

.regdate {
  display: block;
  font-size: .8em;
  font-weight: 500;
  margin: -.4em 0 0;
}

.username {
  display: inline-block;
  font-size: 1.1em;
  font-weight: 500;

  .role-admin &:before {
    color: #990011;
  }
  .role-mod &:before {
    color: #006699;
  }
  .role-supermod &:before {
    color: #f3a5aa;
  }
  .role-ik &:before {
    color: #787373;
  }
  .role-coder &:before {
    color: #eacf4c;
  }

  .role-admin &:before,
  .role-mod &:before,
  .role-supermod &:before,
  .role-ik &:before,
  .role-coder &:before {
    content: '★';
  }

  .op & {
    color: #199ed7;
  }

	/*  Platinum users */

	.platinum &:after {
		background-image: url('awful-resource://platinum-member.png');
		content: "";
		background-size: 14px;
		width: 14px;
		height: 14px;
		display: inline-block;
	}

	.coder &:before {
		content: url('awful-resource://image-coder.png');
	}

	.idiotking &:before {
		content: url('awful-resource://ik.png');
	}

	.diamond &:before {
		content: url('awful-resource://diamond-icon.png');
	}

	.redpill &:before {
		content: url('awful-resource://redpill.png');
	}

	.award &:before {
		content: url('awful-resource://award.png');
	}

  // Maybe only show these in October?
  .pumpkin &:after, .ghost &:after, .bat &:after {
    width: 20px;
    height: 20px;
    background-size: 20px;
    content: "";
  }
  .pumpkin &:after {
    background-image: url('awful-resource://pumpkin.svg');
  }
  .ghost &:after {
    background-image: url('awful-resource://ghost.svg');
  }
  .bat &:after {
    background-image: url('awful-resource://bat.svg');
  }
}

.action-button {
  margin: 0;
  padding: 0.6em;
  border: none;
  font-family: inherit; // UIWebView base style hardcodes Helvetica.
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;

  img {
    width: 24px;
    height: 8px;
  }
}

.tint-black-template-image-gray(@color) {
  @brightness: lightness(@color);
  -webkit-filter: invert() brightness(@brightness);
}

.tint-black-template-image-color(@color) {
  @hue: hue(@color) - 60;
  @hue-deg: ~"@{hue}deg";
  -webkit-filter: invert() sepia() ~"saturate(10000%)" hue-rotate(@hue-deg);
}

// We don't generally control the markup in the post body, so tread carefully.

// Hide UIWebView's long-tap image menu.
.postbody img, #fyad-flag {
  -webkit-user-select: none;
}

// A bbc-block is [quote], [code], etc.
// h4 is "pokeyman posted:" above a quote.
// h5 is "code" above a code block.
.bbc-block {

  border-left: 2px solid #999;
  font-size: 82%;
  margin: 5px 0;
  padding: 0 10px 5px;


  .ipad & {
    margin: 0 10px 1em 10px;
  }

  h4 {
    margin: 0;
    padding: 1px 0px 2px;
    font-weight: bold;

    & span.mention.highlight {
      color: #7409a0;
      border-color: #7409a0;
    }
  }

  h5 {
    margin: 0;
  }

  &.mention.highlight, &.mention.highlight h4 a {
    color: #7409a0;
    border-color: #7409a0;
  }
}

code, pre, tt {
	font-family: menlo;
	font-size: 0.9em;
}

span.mention.highlight {
  color: #7409a0;
}

// .quote_link is "pokeyman posted:" above a quote, a link to the quoted post.
.quote_link {
  text-decoration: none;
}

// Make linkified images look and act like links.
[data-awful-linkified-image] {
  cursor: pointer;
  text-decoration: underline;
}

.gif-wrap {
  cursor: pointer; // enable delegated click event
	position: relative;
	display: inline-block;
	&:before {
		content: "GIF";
		display: block;
		background-color: rgba(255, 255, 255, 0.5);
		background-image: url('awful-resource://play-button.png');
		background-size: .85em;
		background-repeat: no-repeat;
		background-position: right 5px center;
		color: #000;
		height: 1.35em;
		margin: auto;
		position: absolute;
		width: 1.75em;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		padding: .25em;
		padding-right: 1.25em;
		border-radius: .125em;
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
  }

  &.loading:before {
    background-image: url('awful-resource://spinner-button.png');
  }

  &.playing:before {
	  display: none;
  }

  // Hide GIF play button when image is behind spoiler tags.
  .bbc-spoiler:not(.spoiled) & {
    visibility: hidden;
  }
}

blockquote {
  margin: 0;

  // Shrink quoted images. You can always long-tap to see the real thing.
  img {
    max-width: 160px;
    max-height: 100px;
  }
}

// No rectangle around tapped links.
.postbody a {
  -webkit-tap-highlight-color: transparent;
}

// Amazingly, smiley-busting empty tags (e.g. `v<b></b>:)<b></b>v` to get a shrugging happy face) break `word-wrap: break-word`. I guess it's not considered a word, so it doesn't trigger the start of the next line, but it's not considered several words, so there's no break. To fix, insert a U+200C Zero-Width Non-Joiner before potential smiley-busting tags.
.postbody {
  b, i, s, span.bbc-spoiler, sub, sup, tt, u {
    &::before {
      content: "\200C";
    }
  }
}

// Indenting lists on iPhone wastes too much space.
.iphone .postbody {
  ol, ul {
    margin: 0;
    padding-left: 1.5em;
  }
}

.bbc-block.code pre {
  margin: 0;
}

.editedby {
  margin-bottom: 0;
  font-size: 90%;
  font-style: italic;
}

.attachment {
  margin: 0;
}

footer {
  display: -webkit-flex;
  -webkit-align-items: center;

  &:after {
    content: "";
    display: block;
    clear: both;
  }
}

#fyad-flag {
  width: 100%;
  height: 102px;

  img {
    border: 1px solid black;

    .ipad & {
      display: block;
      margin: 0 auto;
    }
  }
}

#ad {
  text-align: center;

  img {
    max-width: 100%;
  }

  .iphone & {
    padding: .6em;
    padding-bottom: 0;
  }

  .ipad & {
    padding: 1.07em;
    padding-bottom: 0;
  }
}

#end {
  font-weight: normal;
  text-align: center;
  line-height: 1;
  margin-top: 50px;
  margin-bottom: 10px;
  -webkit-user-select: none;
}

.voiceover-only {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

// Redirect long-presses in the header and footer into the post itself. (Someone kept accidentally long-pressing the ... button.)
header, footer {
  -webkit-user-select: none;
}

// Enable delegated click events.
header {
  img.avatar, section.nameanddate {
    cursor: pointer;
  }
}
.bbc-spoiler {
  cursor: pointer;
}
footer button.action-button {
  cursor: pointer;
}

// Handle iPhone X notch.
post, #ad, #end {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  // env() was constant() before iOS 11.3.
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
}

// handle switching between ipad and iphone post header layout
@import "ipad-responsive-postheader.less";
