Crisp & Clean - theme for Relics of Avabur - Stylish

/* This is a theme for the game Relics of Avabur. I use Stylish, which requires Google Chrome, in order to install this theme. Just click the extension icon, then the three little dots, and select "Create New Style" then copy and paste and save and whatever. It requires having the Default theme set in Account Management for it to work. If you use something else, I don't have instructions. This is the best I can do.

I have also included some code in my themes for Notifications of Avabur. Made by WinterPhoenix. Get here: https://github.com/davidmcclelland/notifications-of-avabur

Credit also goes to Reltorakii and his Relics of Avabur - Rewamped themes. If it wasn't for his code, this wouldn't even be possible. Link: https://userstyles.org/styles/123685/relics-of-avabur-rewamped

This one is easily customized to whatever colors and whatnot you want. You can edit and play with it and learn maybe a little bit of coding if you don't already know how to do so. Each code section is labelled as best I can do (I am an amateur myself) so feel free to give some of it a shot.

Screenshot (Forest Bubbles): https://i.imgur.com/WsvejZm.png

*/


.toprounder, .toprounder15
{
    box-shadow: none !important;
}
/* here be tables like clan member lists and shit */
#accountActivityTable > .row:nth-child(odd), #clanMemberList tr:nth-child(odd), #clanActivityTable>.row:nth-child(odd), #onlineStaff tr:nth-child(odd), #onlinePlayers tr:nth-child(odd), #myClanDonationTable tr:nth-child(odd), #myClanDonationTable tr:nth-child(odd), .marketListings tr:nth-child(odd), .marketListings tr:nth-child(odd), #rankingTable tr, #milestoneTable tr, .marketListings tr, #inventoryTable tr, #accountReferralTable tr, #fameShopPurchaseTable tr, #clan_list tr:nth-child(odd), .bossParticipantList tr:nth-child(odd), .sorted_table tr:nth-child(odd), .full tr:nth-child(odd), td[class^="calendar-day"]:nth-child(odd), .shortActivitySection > .row:nth-child(odd), #confirmButtons > .button.green
{
    background: linear-gradient( to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.8) 100%) !important;
    border: 1px rgba(255,255,255,.9) solid !important;
}
#accountActivityTable > .row:nth-child(even), #clanMemberList tr:nth-child(even), #clanActivityTable>.row:nth-child(even), #onlineStaff tr:nth-child(even), #onlinePlayers tr:nth-child(even), #myClanDonationTable tr:nth-child(even), #myClanDonationTable tr:nth-child(even), .marketListings tr:nth-child(even), .marketListings tr:nth-child(even), #clan_list tr:nth-child(even), .bossParticipantList tr:nth-child(even), .sorted_table tr:nth-child(even), .full tr:nth-child(even), td[class^="calendar-day"]:nth-child(even), .shortActivitySection > .row:nth-child(even)
{
    background: linear-gradient( to right, rgba(20,20,20,.8) 0%, rgba(20,20,20,.8) 100%) !important;
   border: 1px rgba(255,255,255,.9) solid !important;
}
#myClanDonationTable, #onlineStaff td, #onlinePlayers td, .dataTable thead th, .marketListings td, .marketListings th, #myClanDonationTable td, #myClanDonationTable td, .marketListings td, .marketListings td, .bossParticipantList td, .sorted_table td, .full td, td[class^="calendar-day"]
{
    background: linear-gradient( to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.8) 100%) !important;
border: 1px rgba(255,255,255,.9) solid !important;
}
select option
{
    background: rgba(0,0,0,0.75) !important;
}
#chatMessageListWrapper, #modalBackground /* chat box */
{
    background: transparent -moz-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 100%) !important;
    background: transparent -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 100%) !important;
    background: transparent linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 100%) !important;
}
#areaWrapper.fatigued
{
    /* fatigue thingy if you have the setting that changes colors if you get fatigued */

    background: -moz-linear-gradient(top, rgba(96,0,0, 0.75) 0%, rgba(96,0,0,.5)5%, rgba(255,255,255, 0.5) 6%, rgba(0,0,0,.5) 25%, rgba(0, 0, 0, 0.5) 100%) !important;
    background: -webkit-linear-gradient(top, rgba(96,0,0, 0.75) 0%, rgba(96,0,0,.5)5%, rgba(255,255,255, 0.5) 6%, rgba(0,0,0,.5) 25%, rgba(0, 0, 0, 0.5) 100%) !important;
    background: linear-gradient(to bottom, rgba(96,0,0, 0.75) 0%, rgba(96,0,0,.5)5%, rgba(255,255,255, 0.5) 6%, rgba(0,0,0,.5) 25%, rgba(0, 0, 0, 0.5) 100%) !important;
}
.closeModal, .spellCircle, .closeCustomWindow
{
    /* this is the circle for x-ing out open thingies */

    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0, 0.85) 0%, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0.75) 100%) !important;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0.75) 100%) !important;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0.75) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0px 0px 10px rgba(255,255,255, 0.75) !important;}

/* event damage bubble */ .badcircle {
    background: -moz-radial-gradient(center, ellipse cover, rgba(95,0,0, 0.85) 0%, rgba(95,0,0, 0.75) 25%, rgba(95,0,0, 0.75) 100%) !important;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(95,0,0, 0.85) 0%, rgba(95,0,0, 0.75) 25%, rgba(95,0,0, 0.75) 100%) !important;
    background: radial-gradient(ellipse at center, rgba(95,0,0, 0.85) 0%, rgba(95,0,0, 0.75) 25%, rgba(95,0,0, 0.75) 100%) !important;
    border: 1px solid rgba(255,255,255, 0.25) !important;
    box-shadow: 0px 0px 10px rgba(255,255,255, 0.75) !important;}

/* event healing bubble */ .goodcircle {
        background: -moz-radial-gradient(center, ellipse cover, rgba(0,200,0, 0.85) 0%, rgba(0,200,0, 0.75) 25%, rgba(0,200,0, 0.75) 100%) !important;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,200,0, 0.85) 0%, rgba(0,200,0, 0.75) 25%, rgba(0,200,0, 0.75) 100%) !important;
    background: radial-gradient(ellipse at center, rgba(0,200,0, 0.85) 0%, rgba(0,200,0, 0.75) 25%, rgba(0,200,0, 0.75) 100%) !important;
    border: 1px solid rgba(255,255,255, 0.25) !important;
    box-shadow: 0px 0px 10px rgba(255,255,255, 0.75) !important;}

div.day-number {
    background: rgba(0,0,0,0.4);
    border-left: 1px solid #777;
    border-bottom: 1px solid #777;
    width: 30px;
}

/* these are the headers */
h1, h2, h3, h4, h5, h6, .customWindowContent thead th, #NoAConfig_header {
    background-color: transparent !important;
    font-weight: bold;
    color: #FFFFFF !important;
    text-shadow: 0 0 9px rgba(0, 0, 0, 0.9) !important;
   /* gradient */
background: -moz-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 2%, rgba(0,0,0,0.75) 3%, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, rgba(0,0,0,.75) 97%, rgba(255,255,255,.9) 98%, rgba(255,255,255,0.9) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 2%, rgba(0,0,0,0.75) 3%, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, rgba(0,0,0,.75) 97%, rgba(255,255,255,.9) 98%, rgba(255,255,255,0.9) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 2%, rgba(0,0,0,0.75) 3%, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, rgba(0,0,0,.75) 97%, rgba(255,255,255,.9) 98%, rgba(255,255,255,0.9) 100%);
}

#confirmBox h1 {
   /* this is where gradients live*/
background: -moz-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 2%, rgba(0,0,0,0.75) 3%, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, rgba(0,0,0,.75) 97%, rgba(255,255,255,.9) 98%, rgba(255,255,255,0.9) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 2%, rgba(0,0,0,0.75) 3%, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, rgba(0,0,0,.75) 97%, rgba(255,255,255,.9) 98%, rgba(255,255,255,0.9) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 2%, rgba(0,0,0,0.75) 3%, rgba(0,0,0,.1) 20%, rgba(0,0,0,.1) 80%, rgba(0,0,0,.75) 97%, rgba(255,255,255,.9) 98%, rgba(255,255,255,0.9) 100%);

}
/* shadow color for names in chat I suppose */
#chatMessageList .profileLink {
    text-shadow: 0 0 9px rgba(0,0,0, 0.9) !important;

}


.chat_invert {
   /* this is the gradient for being @'d */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.65) 4%, rgba(255,255,255,.57) 8%, rgba(0,0,0,0.4) 20%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,0.65) 93%, rgba(255,255,255,0.65) 96%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.65) 4%, rgba(255,255,255,.57) 8%, rgba(0,0,0,0.4) 20%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,0.65) 93%, rgba(255,255,255,0.65) 96%, rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.65) 4%, rgba(255,255,255,.57) 8%, rgba(0,0,0,0.4) 20%, rgba(0,0,0,0.4) 80%, rgba(255,255,255,0.65) 93%, rgba(255,255,255,0.65) 96%, rgba(255,255,255,1) 100%);
}

/* major borders */
.border2, .currentPage, #chatMessage, #chatChannel, input[type="button"], input[type="submit"], input[type=text], input[type="password"], input[type="submit"], input[type="email"], input[type="number"], input[type="search"], textarea, .btn-primary, select, .dropdown-menu, .page_link, .milestoneBarWrapper, .xpCircle, #tradeXPBar, #confirmBox, .customWindowContent thead th, #houseXPBar, #eventCountdown, .sorted_table th, #NoAconfig_saveBtn, #NoAconfig_closeBtn {
    background: rgba(0,0,0,.7) !important;
    border-color: rgba(255,255,255, 0.9) !important; /* outlines*/
}
/* outlines for boxes */
#helpSection a, .navSection a, #confirmBox p, .customWindowContent .bRight, .customWindowContent tbody, .customWindowContent th {
    border-color: rgba(0,0,0, 0.6) !important; /* outlines */
}

#xpBar {
    border: 1px rgba(255,255,255,.9) solid !important;}


}
/* tooltips */
#profileOptionTooltip, #statTooltip, #currencyTooltip, #itemTooltip, #itemEquippedTooltip, #toolTooltip, #gemTooltip, #updateCount, #levelTooltip, #promoActive, .separator {
    background: rgba(0,0,0,.7) !important;
    border-color: rgba(255,255,255, 0.9) !important; /* outlines*/
color: rgba(255,255,255,.9) !important;
text-shadow: 0 0 9px rgba(0,0,0,.9) !important;
}
/* stamina number */
.actionTimer, .autosMaximum, .autosRemaining, #areaWrapper > h5 > div {
    color: rgba(255,255,255, 0.75) !important;
font-weight: bold !important;
text-shadow: 0 0 6px rgba(0,0,0,.9) !important;
}

/* shop borders n stuff */
.bt1, #rankingTable tr, #milestoneTable tr, .marketListings tr, #inventoryTable tr, #accountReferralTable tr, #fameShopPurchaseTable tr, .bossParticipantList tr, .sorted_table tr {
        border: 1px rgba(255,255,255, 0.8) solid !important; /* outlines */
}
/* backgrounds for ALL of the major boxes */
.border2, .ui-element, input[type="button"], input[type="submit"], .page_link, #onlineStaff thead tr th, #updateCount, #onlinePlayers thead tr th, #myClanDonationTable thead tr th, #myClanDonationTable tfoot tr th, .marketListings thead tr th, .marketListings tfoot tr th, .invTypeHeader, #promoActive, .xpCircle, #confirmBox, #confirmBox p, #modalWrapper, .bossParticipantList thead tr th, #eventCountdown, .sorted_table th
{
    background: linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.8) 100%) !important;
border: 1px rgba(255,255,255,.9) solid !important;
}
/* inputs and stuff */
div.editable, select, .dropdown-menu, input[type=text], input[type="password"], input[type="email"], input[type="number"], #chatChannel, #chatMessage, textarea, .btn-primary, .milestoneBarFillIncomplete {
    background: linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.8) 100%) !important;
}
/* these are the buttons like Account Management and whatnot at the top */
#accountLinks li {
    background: transparent !important;
    border-width: 1px 0 1px 0;
    border-color: rgba(0,0,0, 0.6); /* outlines */
    border-top-color: rgba(0,0,0, 0.75);
border-bottom-color: rgba(255,255,255, 0.9);
}

/* varous buttons and stuff */
.navSection li, #helpSection li, #gameStatList li {
    background: transparent !important;
    border-top: 1px rgba(0,0,0, 0) solid !important; /* outlines */
}

#moreStatsLinkWrapper {
    background: transparent !important;
    border: 1px rgba(0,0,0,0) solid !important;
}
 #eventCalendarLink {
              background: transparent;
              border: 1px rgba(0,0,0,0) solid !important;
          }

/* button hovers */
.navSection a:hover, #helpSection a:hover, #onlineList > li:hover, #moreStatsLinkWrapper:hover, #accountLinks>a>li:hover, #bq_flasher:hover, input[type="button"]:hover, input[type="submit"]:hover, .btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary, .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover, .dropdown-menu > li > a:hover, .page_cur, a>h5:hover, #eventCalendarLink:hover, #NoAconfig_saveBtn:hover, #NoAconfig_closeBtn:hover, #confirmButtons > .button.green:hover {
    background: linear-gradient(to right, rgba(0,0,0,.9) 0%, rgba(0,0,0,.9) 100%) !important;
border: 1px rgba(255,255,255,.9) solid !important;
color: rgba(200,200,200,.9) !important;
}

/* just XP bars. I wouldn't touch this. */
#xpFill, #tradeskillXPFill, .PlayerHPFill, .milestoneBarFillComplete, #tradeXPFill, #houseXPFill {
    background: linear-gradient(to right, rgba(65, 65, 65, .90) 0%, rgba(65, 65, 65, .75) 100%) !important;
}

/* links, of course */
a, a:link, a:visited, #NoAConfig_resetLink, #NoAConfig_resetLink:link, #NoAConfig_resetLink:visited {
    color: #FFFFFF !important;
    text-shadow: 0 0 9px rgba(0, 0, 0, 0.9) !important;
}
/* link hovering... */
a:active, a:hover, #NoAConfig_resetLink:hover, #NoAConfig_resetLink:active {
    color: rgba(200,200,200,.9) !important;
}

/* the actual background */
body {
    background: url(https://i.imgur.com/WJNEguH.jpg) no-repeat center center fixed !important;
    background-color: rgba(200,200,200, 1) !important;
    -webkit-background-size: cover;
    /* For WebKit*/
    -moz-background-size: cover;
    /* Mozilla*/

    -o-background-size: cover;
    /* Opera*/

    background-size: cover;
    /* Generic*/
color: #FFFFFF;
text-shadow: 0 0 9px rgba(0,0,0,.95);
    --scrollbar-color: rgba(255,255,255, 0.65) !important;
    --scrollbar-background: rgba(255,255,255, 0.1) !important;
/* Background Image links (or use your own, IDC). I got these from Google, I don't own them. And yes, you want to keep the ?# at the end of those ones. It'll work, I promise.

Grey Wallpaper: https://i.imgur.com/F9vy6B9.jpg
Some kind of red rock: https://i.imgur.com/GfSB6q3.jpg
Black wood panelling: https://i.imgur.com/WJNEguH.jpg
Purple canvas, I think: https://i.imgur.com/PNB3IMp.jpg
Paisley on Wood: https://i.imgur.com/dEAiwWT.jpg?1
Green Bamboo: https://i.imgur.com/WVva9LG.jpg
Blue Spackled Wall: https://i.imgur.com/kLYZRcS.jpg?1
Turquoise Mosaic: https://i.imgur.com/P6ASY4l.jpg
Minecraft block thing: https://i.imgur.com/Dst8bPc.jpg

I made these ones:

Purple Bubbles: https://i.imgur.com/7QbnL4k.png?1
Forest Bubbles: https://i.imgur.com/PkmAcs9.png?1
Orange Soda Bubbles: https://i.imgur.com/Pf2QoOw.png?1
Red Bubbles: https://i.imgur.com/eEF3yan.png?1
Blue Bubbles: https://i.imgur.com/t0kN7DR.png?1


*/
/* this is the background for the top stats list and stuff. I recommend leaving this alone. This is just to make it transparent. */
#statsAndStuff { background: transparent }

#statsTable, #resourcesTable, #tradesTable, #attrTable, #skillTable { background: transparent}

/* this is the background for the config for Notifications of Avabur. */

iframe#NoAConfig{
    background:transparent!important;
}

body#NoAConfig {
    text-shadow: 0 0 9px rgba(0, 0, 0, 0.9) !important;
    color: rgba(255,255,255, .95) !important;
    background: linear-gradient(to right, rgba(0,0,0,.85) 0%, rgba(0,0,0,.65) 30%, rgba(0,0,0,.65) 70%, rgba(0,0,0,.85) 100%) !important;
    border: 2px solid rgba(255,255,255, 0.8) !important;
}

#NoAConfig_header{
    border-bottom: 1px solid rgba(255,255,255, 0.8) !important;
}
/* this is specifically to change the padding between options. It helps make it more visible and stuff. */
#NoAConfig_fatiguepopup_var{padding-top:6px;}
#NoAConfig_fatiguesound_var{padding-top:6px;}
#NoAConfig_chatsearchvalues_var{padding-top:6px;}