Phone thing for Renkhal's KKmLL.

Please ignore that they aren't iPhone colors and layout, this is a holdover from other uses of the code for where I generally have characters not using an iPhone because why would a hacker like Skye use such a closed-source system? And for the DC Context, why would Lena Luthor use something for similar reason? Assume its something from L(uthor)Corp's electronics division.

I am using the same author work CSS I use for those.

Read Twice, Creator Styles On, and Off.

(See the end of the work for more notes.)

Work Text:

Kara
Encrypted Line

Lena Wrote: "Was Krypton in the Milky Way?"

Kara wrote: "No, Andromeda." Lena paused reading that message and blinked at that, and wondered just how long ago it was that Krypton was actually destroyed, because if it was months before Kal's arrival... She continued to read, "In the Rao System." Well. That was... informative? Especially with how she'd heard Kara exclaim 'oh Rao' and variations of, instead of what a human would, like 'Jesus!' or 'Oh God'.

Another ping had her looking to see what else Kara sent her: "I'm about to leave here. You better not be at work still, or I'll come get you." Was that a threat... or a promise?

Kara POV

Lena
Encrypted Line

"I'm about to leave here. You better not be at work still, or I'll come get you." She'd hit send, only to realize and wonder, 'Wait was that was confrontational?'

Lena back after a minute: "I'm about to head home. Promise." 'definitely confrontational' she thought.

How I did this, CSS:

CSS for the workskin

#workskin .iphone {
max-width: 350px;
margin: auto;
margin-bottom: 20px;
padding: 0;
background: #360606;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border: 1px solid #ededed;
border-radius: 15px;
display: block;
}

#workskin .iphone-header {
max-height: 70px;
margin-top: 0px;
padding-bottom: .5em;
padding-top: .5em;
margin-left: 0em;
margin-right: 0em;
margin-bottom: 0em;
color: #FFFFFF;
background-color: #360606;
font-size: 10px;
font-weight: bold;
text-align: center;
text-transform: capitalize;
position: relative;
font-family: Futura,Helvetica,Arial,sans-serif;
border-bottom: 1px solid #b2b2b2;
border-radius: 25px 25px 0px 0px;
}

#workskin .iphone-chatbox {
margin: auto;
display: block;
float: none;
padding: 1em .5em 1em .5em;
font-size: small;
background-color: #0F0202;
overflow: auto;
overflow-y: scroll;
height: 400px;
max-height: 400px;
}

#workskin .iphone-time {
min-width: 295px;
color: #7B7C80;
font-size: .75em;
padding-bottom: .5em;
padding-top: .5em;
margin-left: -.5em;
margin-right: -.5em;
margin-bottom: -.5em;
text-align: center;
display: table;
}

#workskin .iphone-received {
float: left;
color: #F0F0F0;
margin: 0 0 0.5em;
border-radius: 1em;
padding: 0.5em 1em;
background: #25251a;
max-width: 75%;
clear: both;
position: relative;
}

#workskin .iphone-received::after {
content: "";
position: absolute;
left: -.5em;
bottom: 0;
width: 0.5em;
height: 1em;
border-right: 0.5em solid #25251a;
border-bottom-right-radius: 1em 0.5em;
}

#workskin .iphone-sent {
float: right;
color: #FFFFFF;
margin: 0 0 0.5em;
border-radius: 1em;
padding: 0.5em 1em;
background: #421020;
max-width: 75%;
clear: both;
position: relative;
}

#workskin .iphone-sent::after {
content: "";
position: absolute;
right: -0.5em;
bottom: 0;
width: 0.5em;
height: 1em;
border-left: 0.5em solid #421020;
border-bottom-left-radius: 1em 0.5em;
}

#workskin .iphone-footer .iphone-footer-message {
content: "iMessage";
float: right;
margin-left: 5px;
margin-right: 2px;
margin-top: 2px;
width: 250px;
padding: 5px;
color: #cfcfc6;
border-radius: 20px 20px 20px 20px;
border: 1px solid #c5c5c6;
background: #040202;
max-height: 20px;
font-size: 12px;
}

#workskin .iphone-footer .iphone-footer-circle {
content: "+";
float: left;
margin-left: 2px;
margin-right: 5px;
padding: 5px;
width: 20px;
height: 20px;
color: #7e7f85;
background: #380407;
border-radius: 20px 20px 20px 20px;
border: 1px solid #e8e9eb;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 20px;
}

#workskin .iphone-footer .iphone-footer-message. {
display: inline-block;
}

#workskin .iphone-footer .iphone-footer-circle {
display: inline-block;
}

#workskin .iphone-footer {
background: #360606;
max-height: 20px;
margin: 5px;
color: #c5c5c6;
overflow: hidden;
display: block;
float: none;
border-radius: 0px 0px 25px 25px;
padding: 0px 1em 1em 1em;
}

#workskin .iphone-chatbox::-webkit-scrollbar {
width: 8px;
}

#workskin .iphone-chatbox::-webkit-scrollbar-track {
background: #2C0C22;
}

#workskin .iphone-chatbox::-webkit-scrollbar-thumb {
background: #461010;
border-radius: 8px;
}

#workskin .iphone-chatbox::-webkit-scrollbar-thumb:hover {
background: #6C4C62;
}

How I did this, the in-chapter html:

Cannot switch to 'Rich Text Editor' mode for the site: stay in html view.

<div class="iphone">
<div class="iphone-header"><big><big>Kara</big></big> Encrypted Line</div>
<div class="iphone-chatbox">Lena Wrote: "Was Krypton in the Milky Way?"
Kara wrote: "No, Andromeda." Lena paused reading that message and blinked at that, and wondered just how long ago it was that Krypton was actually destroyed, because if it was months before Kal's arrival... She continued to read, "In the Rao System." Well. That was... informative? Especially with how she'd heard Kara exclaim 'oh Rao' and variations of, instead of what a human would, like 'Jesus!' or 'Oh God'.
Another ping had her looking to see what else Kara sent her: "I'm about to leave here. You better not be at work still, or I'll come get you." Was that a threat... or a promise?</div>
  She started writing another text, " Was that a threat or a Pro|" But thought better of it part way through, and deleted it.</div>

Kara POV
<div class="iphone">
<div class="iphone-header"><big><big>Lena</big></big> Encrypted Line</div>
<div class="iphone-chatbox">"I'm about to leave here. You better not be at work still, or I'll come get you." She'd hit send, only to realize and wonder, 'Wait was that was confrontational?'
Lena back after a minute: "I'm about to head home. Promise." 'definitely confrontational' she thought.</div>
  Message</div>

Notes:

Incase you only read it with Creator styles OFF or ON
Read Twice, Creator Styles On, and Off.
The button is at the top, between the comment and share buttons. (only shows up when a creator actually uses work skins)

Actions

↑ Top

Kudos

Deanna_MG, Renkhal, SilverDragonC, dangerousb, TrizIMIonze, Anchovyrino, Ksusha0803, jah728, catskitcats, and Wolf_Blood12 as well as 2 guests left kudos on this work!

Comments

Sorry, this work doesn't allow non-Archive users to comment. You can however still leave Kudos!

Archive of Our Own

Actions

Work Header