Actions

Work Header

Rating:
Archive Warning:
Fandoms:
Additional Tags:
Language:
English
Collections:
Ao3 Skins
Stats:
Published:
2025-08-02
Words:
929
Chapters:
1/1
Comments:
20
Kudos:
109
Bookmarks:
26
Hits:
2,176

📄GOOGLE DOCS SITE SKIN

Summary:

Ever wanted to read on AO3 more discreetly on public spaces? Or want to have a nice site skin that is reminiscent of everyone's favourite word-processing program? Or simply look cool while reading literature?

Look no further, the Google Docs AO3 skin V1.0 is here!

Created with love (and sweat and tears), using this skin makes it seem like you're reading something from the Google Docs interface.

If there are any visibility issues/overall problems with the CSS, please send a comment. I'll add it to a log of issues to fix promptly!

Notes:

Hiya :>

If you like this skin, please feel free to kudos/comment/etc. If you have suggestions for another cool skin, feel free to send them my way!

If y'all wanna know, this skin was coded on a 14.02"L x 9.78"W computer screen. As such, this skin is most optimized for computer-size screens, but I think it should be fine on phones too. If there is any issue with mobile friendliness, please comment and I will make note of it to fix in the next version.

 

Known issues/stuff to optimize:

  • "Fandoms, Browse, Search, About" area collides with the "Hi, [user]!" segment in secondary navbar on mobile [added 2025-08-27]
  • Clicking on fandom name makes fandom name collide with the "World, Bookmarks, Filters, etc." box on mobile [added 2025-08-27]
  • Google Docs editor bar on mobile causes large grey box to appear when swiping right [added 2025-08-27]

Work Text:

GOOGLE DOCS SKIN

V1.0 - mobile friendly (hopefully?)

Previews

User's Works

Individual Work

User Dashboard

Searching Through a Tag

CSS

To use this skin, log into your account, click on "skins" on your dashboard, make a new skin while copying + pasting this code into the CSS box, name it something unique, then once its created select "use".

    #header .heading:before {
  content: url(https://i.postimg.cc/5tBdNKXm/Google-Docs-2020-Logo-svg-3.png);
  background-size: 20px 20px;
  display: inline-block;
  padding-right: 20px;
  position: absolute;
  top: 10px;
  left: 10px;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "trebuchet ms" !important
}
html {
    overflow-x:hidden;
}

#header .heading a:after {
  content: " Untitled Document";
  text-indent: 0;
  display: block;
  line-height: initial;
  visibility: visible;
  font-family: 'Trebuchet MS';
  color: #000;
  font-size:22.5px;
 top:12.5px;
  left:45px;
  position:absolute;
}
nav .user {
border:none !important
}
#header .heading a {
  text-indent: -99999px;
  line-height: 0;
  visibility: hidden;
}

#header .heading:after {
  content: url(https://i.postimg.cc/t4CnBZGc/Screenshot-2025-07-30-104700.png);
  background-size: 10px 10px;
  display: inline-block;
  padding-right: 20px;
  position: absolute;
  top: 7.5px;
  left: 275px;
}

nav .primary:after {
  content: url(  https://i.postimg.cc/pL77Tvs0/Screenshot-2025-07-30-104316.png);
  background-size: 10px 10px;
  display: inline-block;
  padding-right: 20px;
}

nav .primary {
  background: #f9fbfd !important;
  filter: none !important;
  background-image: none;
}

.dropdown-toggle {
  color: #000 !important;
  transition: all 0.1s ease;
  border-radius: 5px !important;
}

#header .primary {
  box-shadow: none !important;
}

#header {
  background-color: #f9fbfd;
}

#header .menu {
  background: #f9fbfd;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.dropdown-menu li a:hover {
  background-color: #f1f3f4 !important;
  border-bottom: 0px solid #fff !important;
  color: #000 !important;
}

.dropdown-menu li a {
  color: #202124;
}

#header .menu li {
  border-bottom: 0px solid #f9fbfd;
  margin: 0 0.25em;
  text-align: left;
}

.submit .button {
  background: #ccebff !important;
  border-radius: 20px;
  padding: 12px;
}

.submit .button:hover {
  background: #b2d7ef !important;
  box-shadow: none;
}

.icon {
  display: none;
}

body {
  background-color: #f9fbfd;
}

.work {
  background-color: #fff;
  border: 1px solid #000;
  padding: 0px;
}

.work .group {
  padding: 30px;
}

.stats {
  text-align: left !important;
}

#footer {
  display: none;
}

#main .heading {
  color: #959595;
}

#main .heading .tag {
  color: #b7b7b7;
}

.tag {
  background: none !important;
  transition: all 0.3s ease;
  border-bottom: 1px solid #fff !important;
  font-style: normal;
}

.tag:hover {
  background: none !important;
  color: #444444 !important;
  border-bottom: 1px solid !important;
}

.required-tags {
  filter: grayscale(100);
}

.blurb h4 a:link {
  background: none !important;
  transition: all 0.3s ease;
  border-bottom: 1px solid #fff !important;
  font-style: normal;
  color: #424242;
}

a:hover {
  background: none !important;
  color: #444444 !important;
  border-bottom: 1px solid !important;
}

fieldset,
form dl,
fieldset dl dl,
fieldset fieldset fieldset,
fieldset fieldset dl dl,
dd.hideme,
form blockquote.userstuff {
  display: block;
  background: #ddd;
  border: 2px solid #f3efec;
  margin: 0.643em;
  padding: 0.643em;
  box-shadow: none;
}

.toggled form,
.dynamic form {
  margin-top: 20px;
  padding: 0.5em;
  border: 2px solid #ccc;
  background: #fff;
  box-shadow: 0px 0px 0px;
}

.actions a,
.actions a:link,
.action,
.action:link,
.actions button,
.actions input,
input[type="submit"],
button,
.current,
.actions label,
input {
  background: #ffffff;
  color: #444;
  width: auto;
  font-size: 100%;
  vertical-align: middle;
  display: inline-block;
  padding: 0.25em 0.75em;
  white-space: nowrap;
  overflow: visible;
  position: relative;
  text-decoration: none;
  border: 1px solid #bbb;
  border-bottom: 1px solid #aaa;
  border-radius: 0.0em;
  box-shadow: none;
}

input,
textarea {
  width: 100%;
  border: 1px solid #bbb;
  box-shadow: none !important;
}

input:hover {
  color: #000 !important;
}

.search .search fieldset .text{
    background-color: #f1f3f4 !important;
    border: 1px solid #aaa !important
}

.dropdown .dropdown-toggle:hover {
    background-color:#f1f3f4 !important;
    border-bottom:none !important;
}

li .blurb {
        border: 0px solid #ddd !important;
}

fieldset, form dl, fieldset dl dl, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff {
    display: block;
    background: #ffffff;
    border: 2px solid #f3efec;
    margin: 0.643em;
    padding: 0.643em;
    box-shadow: none;
}

#work-filters fieldset:before {
    content:url("https://i.postimg.cc/0NLLhYPP/Screenshot-2025-08-02-072809.png");

}



.filters .expander
 {
    background: url(/images/arrow-right.gif) left center no-repeat;
    border: none !important;
    font-family:"trebuchet ms";
    color: #2a2a2a;
    height: 100%;
    min-height: 1.786em;
    outline: none;
    padding: 1em 0 1em 14px;
    text-align: left;
    white-space: normal;
    border-radius: 0;
    box-sizing: border-box;
    border-bottom:none !important;
}

.filters .expander:focus {
    outline:none;
}

.work li {
    border: none !important
}

.flash:before {
    content:url("https://i.postimg.cc/FKgBC2Wg/Screenshot-2025-08-02-074509.png");
}

.form dl, form dl, fieldset dl dl {
    border: none !important
}

.dropdown-menu {
    box-shadow:0px 0px 7px #a8a8a8 !important;
}

/* width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #b1b1b1;
  border-radius:20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.navigation .navigation {
    margin-top:-10px;
}
nav .navigation{
margin-top:-20px;
}

#greeting {
    margin-top:20px;
}

#header .primary:before {
   padding-left:2000px;
}

.dropdown:before {
    content:"...";
    font-size:4px;
    color:#f9fbfd
}

#dashboard:before {
    content:url("https://i.postimg.cc/kMQhDLPd/Screenshot-2025-08-02-084340.png");

}


.user {
  background-color: #fff;
  border: 1px solid #000;
  padding:30px;

}

.notice{
    background-color:#ced4db;
    box-shadow:none;
    border-radius:0px;
    border:1px solid #5f6682;
}

.flash.notice:before {
    content:""
}
.error{
    background-color:#d6d0d0;
    box-shadow:none;
    border-radius:0px;
    border:1px solid #825f5f;
    color:#5b5050
}

.notes{
      background:#ced4db !important;
    box-shadow:none !important;
    border-radius:0px !important;
    border:1px solid #5f6682 !important;
}

#dashboard.own {
    background: transparent;
    border-top:none !important;
    border-bottom:none !important;
    opacity: 1.0;
    border-radius: 0.25em;
}

.collections {
    background-color:#f9fbfd !important;
    color:#a1a1a1 !important;
    border:none !important;
    font-family:"trebuchet ms"
}

#dashboard ul {
    float: none;
    display: block;
    padding: 1.286em 0;
    text-align: right;
    border-top: 0px solid #ddd;
    position: relative;
    border-left:2px solid #ddd;
    margin-bottom:20px;
    font-family:"trebuchet ms";
    margin-left:20px;
}

li .current {
    border-radius:20px;
      background: #ccdcff !important;
    
}

li .current:hover {
    border-radius:20px;
       background: #b2c5ef !important;
    
}

li .current:before {
    content:"🗎 ";
    font-weight:bold;
}

#dashboard .navigation li a:hover {
    border-bottom:none !important;
    color:#000
}

#dashboard li a:after {
  content: " X ";
  transition: all 0.1s ease;
  filter: opacity(0);
  transform: translate(30px 0px) !important;
}

#dashboard li a:hover:after {
  content: " X ";
  filter: opacity(1);
  transform: translate(0px 0px) !important;
}

.home .header h2 {
    text-align: left;
    border-bottom: 0px solid;
    display: block;
}


.bookmark {
  background-color: #fff;
  border: 1px solid #000;

}

.bookmark .group {
  padding: 30px;
}

.bookmark .bookmark {
    border:none
}

.userstuff {
    

padding: 30px;
  background-color: #fff;
  border: 1px solid #000;

}

.summary {
    border:none !important
}

#header {
    position:sticky;
    top:0px;
    z-index:10000
}