Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Series:
Part 2 of #ao3_work_skins
Collections:
A Guide to Coding and Fanworks, Ao3 Skins, ao3 (kenmasimp), Fanfiction Reference Works, AO3 & Coding Layouts & Creative References, html guides save me html guides if you can hear me html guides
Stats:
Published:
2020-11-27
Completed:
2020-11-27
Words:
321
Chapters:
2/2
Comments:
3
Kudos:
50
Bookmarks:
27
Hits:
6,657

Zoom inspired AO3 skin

Summary:

are your characters stuck in quarantine and attending online zoom classes??? here's a really simple skin for that

Notes:

in your profile, go to Skins, Create Site Skin (or even update an existing one), then copy paste this css and name it whatever you want.
when you want to use this skin in a fic, you would pick it from the Select Work Skin dropdown

this ch has the CSS and next ch has the html mockups

Chapter 1: CSS

Chapter Text

.zoom-chatbox {
  max-width: 300px;
  border: .02em solid #dddddd;
  margin-left: auto;
  background-color: whtie;
  margin-right: auto;
}

.zoom-title {
  line-height: 1em;
  margin: 0em;
  text-align: center;
  font-weight: bold;
  font-family: "Arial Black", Gadget, sans-serif;
  background-color: #dddddd;
  margin-bottom: 0.5em;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
}

.zoom-content {
  padding-left: 0.5em;
  padding-bottom: 0.5em;
}

.zoom-from {
  padding-top: 0.8em;
  font-size: small;
  color: rgb(140,140,140);
  font-family: Tahoma, Geneva, sans-serif;
}

.zoom-msg {
  font-size: 13.5px;
  font-family: Tahoma, Geneva, sans-serif;
}

.zoom-private {
  color: red !important;
  font-family: inherit;
}

.zoom-public {
  color: blue !important;
}

.zoom-enter-box {
  height: 15px;
  border-top: .02em solid #dddddd;
  margin-top: 1.5em;
  margin-right: 0em;
  margin-left: 0em;
}