Archive of Our Own ^beta

Chapter Text

Within a Phone div class, you can have alert bars show up just like on your very own smartphone!

I based these notifications on how notifications appear on my own phone, but they may look a little different on yours.

Dark theme phone alerts:

Light theme phone alerts:

Now for some added fun, you can even have your character's phone display those annoying alerts from apps!

CSS FOR THE PHONE (From the iMessage texting workskin)

#workskin .phone {
  max-width: 300px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: table;
  margin: auto;
}

 Make sure to have this in a div environment before everything else! And please check out the original text message skin because it is extremely well-implemented and even works with creator's style turned off.

CSS FOR THE NOTIFICATIONS:

#workskin .notifdark {
  border-radius: 20px;
  background: #25242bAA;
  padding: 20px;
  padding-top: 15px;
  width: 300px;
  height: 35px;
  color: #ffffff;
  font-family: sans-serif;
  text-align: left;
  margin-bottom: 6px;
}

#workskin .notiflight {
  border-radius: 20px;
  background: #a29fb950;
  padding: 20px;
  padding-top: 15px;
  width: 300px;
  height: 35px;
  font-family: sans-serif;
  text-align: left;
  margin-bottom: 6px;
}

#workskin .notif-iconbox {
  border-radius: 50%;
  margin-left: 0px;
  float: left;
  height: 30px;
  width: 30px;
  margin-top: 0px;
}

#workskin .appcircle {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  margin-left: 15px;
  margin-right: 0px;
  margin-top: -20px;
}

#workskin .notifname {
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
  font-size: 12px;
}

#workskin .notiftime {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  float: right;
}

#workskin .notiftext {
  margin: 0.5em;
  padding: 0;
  padding-left: 1em;
  overflow: hidden;
  max-height: 2.6em;
  line-height: 1.3em;
  text-overflow: ellipsis;
  font-size: 12px;
  margin-top: -5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

#workskin .notiftitle {
  margin: 0.5em;
  padding: 0;
  padding-left: 1em;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  margin-top: -5px;
}

#workskin img.notificon {
  height: 30px;
  width: 30px;
  border-radius: 50%;
}

#workskin img.img_appcircle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-bottom: 20px;
}

The execution of this is pretty simple, unlike the rest of the Discord skin (which I as the person who had to make it still struggled to implement in places).

For app notifications, follow these steps:

1. Phone in <div> environment
2. "notifdark" or "notiflight" in another <div> environment inside the phone one.
3. "notif-iconbox" in a <p> environment, with the image set to the app's logo. Close the <p> environment.
4. "notiftitle" in a separate <p> environment. Within this environment, use <span> class "notiftitle" for the app or notification title, and "notiftime" for the time of the alert. Close the <p> environment.
5. "notiftext" in a separate <p> environment. Put the alert's text inside this environment. Close the <p> environment.
6.  Close up the div classes from before, unless you want another stacked alert, then leave the phone div class unclosed.

The HTML example:

<div class="phone">
<div class="notifdark">
<p class="notif-iconbox"><img class="notificon" src="https://i.imgur.com/RNEM6SC.png" /></p>
<p class="notiftitle"><span class="notifname">Night Owl Chest available!</span> <span class="notiftime"> 6:30am</span></p>
<p class="notiftext">Tap to claim your reward now.</p>
</div>
<div class="notifdark">
<p class="notif-iconbox"><img class="notificon" src="https://i.imgur.com/QkINx6U.png" /></p>
<p class="notiftitle"><span class="notifname">DoorDash</span> <span class="notiftime"> 20m ago</span></p>
<p class="notiftext">How was your order? Share your thoughts and get a discount code!</p>
</div>
</div>

For message notifications, follow these steps:

1. Phone in <div> environment
2. "notifdark" or "notiflight" in another <div> environment inside the phone one.
3. "notif-iconbox" in a <p> environment, with the image set to the person/character's profile picture.
4. "notif-appcircle" in a <span> class (NOT another paragraph environment!!), with the image set to the app's logo (i.e. Discord, WhatsApp, Facebook Messenger etc) Now, close the notif-iconbox <p> environment.
5. "notiftitle" in a separate <p> environment. Within this environment, use <span> class "notiftitle" for the name or username, and "notiftime" for the time of the alert. Close the <p> environment.
6. "notiftext" in a separate <p> environment. Put the alert's text inside this environment. Close the <p> environment.
7. Close up the div classes from before, unless you want another stacked alert, then leave the phone div class unclosed.

The HTML example:

<div class="phone">
<div class="notifdark">
<p class="notif-iconbox"><img class="notificon" src="https://i.imgur.com/EJwar9D.png" /> <span class="appcircle"> <img class="img_appcircle" src="https://i.imgur.com/4TFWQVB.png" /> </span></p>
<p class="notiftitle"><span class="notifname">DiscordUser</span> <span class="notiftime"> 16:20</span></p>
<p class="notiftext">The quick brown fox jumps over the lazy dog.</p>
</div>
<div class="notifdark">
<p class="notif-iconbox"><img class="notificon" src="https://i.imgur.com/EJwar9D.png" /> <span class="appcircle"> <img class="img_appcircle" src="https://i.imgur.com/ScXiKiN.png" /> </span></p>
<p class="notiftitle"><span class="notifname">WhatsAppUser</span> <span class="notiftime"> 16:20</span></p>
<p class="notiftext">And so I cry sometimes when I'm lying in bed just to get it all out what's in my head and I, I am feeling a little peculiar</p>
</div>
</div>