lioden.css

/*
Layout Made by Chris (#105465) for free use
*/

/* font import */
@import url('https://fonts.googleapis.com/css2?family=Kameron:[email protected]&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* Body */
body {
    font-family: "Lato", sans-serif;
    background: #f4e5d7 url('https://images.pexels.com/photos/26976474/pexels-photo-26976474/free-photo-of-proud-lion-laying-on-ground.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') fixed;
    background-position-y: center;
    background-position-x: center;
    /* DON'T CHANGE BELOW */
    background-repeat: no-repeat;
    background-size: cover;
    color: #000000;
}

/* Headers */
h1,
h2,
h3,
.sidebar h3 {
    color: #000000;
    font-family: "Lato", sans-serif;
}

/* Other Text */
p,
b,
#fraProfileContent {
    color: #000000;
}

small {
    color: #000000 !important;
}

/* Links */
a:link,
a:visited,
a:active {
    color: #1a1a1a;
}

a:hover,
a:focus {
    color: #000000;
}

/* Topbar */
.topbar a:link,
.topbar a:visited,
.topbar a:active {
    color: #1a1a1a;
}

.topbar a:hover,
.topbar a:focus {
    color: #000000;
}

.topbar {
    background: #d9a473;
    border: 1px solid #faf2eb;
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    color: #000000;
    box-shadow: none;
}

/* Navbar */
.navbar {
    background: #deb187;
    border-bottom: 1px solid #faf2eb;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    font-family: "Lato", sans-serif;
}

/* logo */
.navbar-brand img {
    filter: contrast(120%) saturate(70%);
}

/* navbar defaults */
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    color: #1a1a1a;
}

.navbar-default .navbar-nav>li>a {
    color: #1a1a1a;
    font-weight: bold;
}

/* mobile toggle box */
.navbar-default .navbar-toggle {
    border-color: transparent;
}

/* make different from navbar */
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background: #e4be9b;
}

/* bars in navbar icon */
.navbar-default .navbar-toggle .icon-bar {
    background: #000000;
}

/* collapsed navbar */
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #d9a473;
    box-shadow: none;
}

/* active and hovered links in navbar */
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav li a:hover,
.navbar-default .navbar-nav li a:focus,
.navbar .active a:link,
.navbar .active a:visited,
.navbar .active a:active,
.navbar .active a:focus {
    background: #e4be9b;
    color: #000000;
}

/* main */
.main {
    background: #f4e5d7b3;
    border-radius: 10px;
    border: 1px solid #faf2eb;
    box-shadow: none;
}

/* territory box */
.col-md-9 {
    background: none;
}

/* Breadcrumb */
.breadcrumb {
    background: #e4be9b;
    border: 1px solid #faf2eb;
    border-radius: 10px;
    box-shadow: 1px 1px 3px #625950;
}

.breadcrumb::after {
    content: "CSS by Chris (#105465)";
    position: absolute;
    right: 20%;
    z-index: 100;
    color: #000000;
    font-family: 'Kameron', 'Times New Roman', Times, serif;
}

.breadcrumb-item.active,
.breadcrumb-item::before {
    color: #262626 !important;
}

/* Side Bar */
/* side panel bg */
.sidebar.col-md-3 {
    background: none;
}

/* sidebar inner boxes */
.col-md-3 .panel {
    border: 1px solid #faf2eb;
    border-radius: 10px;
    background: #e4be9b;
    box-shadow: 1px 1px 3px #625950;
    color: #000000;
}

/* dotted line above chat on smaller screen sizes */
.clear {
    border-color: #000000 !important;
}

/* Progress Bars */
/* background container */
.progress {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #faf2eb;
}

/* default and impression */
.progress-bar {
    background: linear-gradient(#c2f0f0, #99e6e6);
}

/* if you want all to match comment out the next three classes */
/* exp, hunger, and energy */
.progress-bar-success {
    background: linear-gradient(#daf3be, #c1eb93);
}

.progress-bar-danger {
    background: linear-gradient(#ffcccc, #ff9999);
}

.progress-bar-warning {
    background: linear-gradient(#fff0b3, #ffe680);
}

/* text inside the progress bars */
.progress div {
    color: #000;
    font-family: "Lato", sans-serif;
}

/* alerts */
/* all */
.alert-danger,
.alert-success,
.alert-warning {
    border: 1px solid #faf2eb;
    border-radius: 10px;
    box-shadow: 1px 1px 3px #625950;
}

/* red notifications */
.alert-danger {
    color: #000000;
    background: #e6b2bf;
}

.alert-danger>a,
.alert-danger>a:link,
.alert-danger>a:active,
.alert-danger>a:visited {
    color: #3a131c;
}

.alert-danger>a:hover,
.alert-danger>a:focus,
.alert-danger b {
    color: #000000;
}

/* green notifications */
.alert-success {
    color: #000000;
    background: #c9d2ad;
}

.alert-success>a,
.alert-success>a:link,
.alert-success>a:active,
.alert-success>a:visited {
    color: #1d2112;
}

.alert-success>a:hover,
.alert-success>a:focus,
.alert-success b {
    color: #000000;
}

/* yellow notifications */
.alert-warning {
    color: #000000;
    background: #ccc2b3;
}

.alert-warning>a,
.alert-warning>a:link,
.alert-warning>a:active,
.alert-warning>a:visited {
    color: #1f1b14;
}

.alert-warning>a:hover,
.alert-warning>a:focus,
.alert-warning b {
    color: #000000;
}

/* HTML Boxes if applicable */


/* comment box */
#commentBox {
    border: 1px solid #faf2eb !important;
    border-radius: 5px !important;
    height: 200px !important;
    background: #e9cbaf;
    box-shadow: 1px 1px 3px #625950;
}

.comment:nth-child(even) {
    background: #e4be9b !important;
}

/* scrollbar */
#commentBox::-webkit-scrollbar {
    height: 0;
    width: 8px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background: #fff;
}

/* scrollbar button */
#commentBox::-webkit-scrollbar-thumb {
    background: #deb187;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

#commentBox::-webkit-scrollbar-thumb:hover {
    background: #d9a473;
}

/* tables */
/* table headers */
.table .top,
.table th {
    background: #d9a473;
    color: #000000;
    font-family: "Lato", sans-serif;
    font-weight: bold;
}

/* lion title and name */
.xlarge.b {
    font-weight: bold;
}

/* lion image */
#lion_image>div {
    border-radius: 10px;
    border: 1px solid #faf2eb;
}

/* table body */
.table {
    background: #e9cbaf;
    border: 1px solid #faf2eb;
    color: #000000;
    box-shadow: 1px 1px 3px #625950;
}

/* table links */
.table .top a:link,
.table .top a:active,
.table .top a:visited,
.table th a:link,
.table th a:active,
.table th a:visited {
    color: #1a1a1a;
    font-weight: bold;
    border-bottom: none;
}

.table .top a:hover,
.table th a:hover,
.table .top a:focus,
.table th a:focus {
    color: #000000;
    font-weight: bold;
}

/* left side of stats on king and status bars in caves */
.table .left {
    background: #deb187;
}

/* left side of stats on king */
.inner-table .left {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

/* right side of king stats */
.inner-table .right {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background: #e4be9b;
}

/* every other lion in caves */
.table .right_odd {
    background: #e4be9b;
}

/* table footers */
.table .innerHeader,
.table .bottom,
#player>tbody>tr {
    background: #d9a473;
    color: #000000;
}

/* player table footer adjustments for rounded corners */
#player .right_odd {
    background: none;
}

#player tr.right {
    background: none;
}

/* quick link to mutated lions under king panel */
.table .bottom a:link,
.table .bottom a:visited,
.table .bottom a:active {
    color: #1a1a1a;
    text-decoration: none;
}

.table .bottom a:hover,
.table .bottom a:focus {
    color: #000000;
    text-decoration: underline;
}

/* hr in player table */
#player hr {
    border-color: transparent;
    margin: 0;
    margin-top: 1em;
}

/* little :|: spans in player table */
#player .text-muted {
    color: #00000080;
}

/* days left until heat badge */
.badge {
    background: #f2be8c;
    color: #000000;
    border: 1px solid #faf2eb;
}

/* inputs for typing in text in territory description etc. */
textarea,
input,
select,
#fra_chatContainer #txtChatInput {
    color: #000000;
    background: #ffffff;
    border: 1px solid #d9a473;
}

input::placeholder {
    color: #00000080;
}

/* CLAN STUFF */
.page-description {
    border: 1px solid #faf2eb;
    background: #e9cbaf;
    padding: 20px;
    box-shadow: 1px 1px 3px #625950;
}

.page-description>div {
    padding: 0;
    margin: 0;
}

/* Caves and Mounds Main */
/* main overrides */
.mound-grid,
.cave-grid {
    background: #f2be8c;
    border: 1px solid #faf2eb;
    border-radius: 10px;
    color: #1a1a1a;
    box-shadow: 1px 1px 3px #625950;
}

/* cave and mound link hover */
.center>a:hover>.cave-grid,
.center>a:focus>.cave-grid,
.center>a:hover>.mound-grid,
.center>a:focus>.mound-grid {
    color: #000000;
}

/* cave and mound customization */
/* all caves */
.cave-grid>img {
    content: url('https://static.lioden.com/images/dynamic/backgrounds/MBnesting.png');
    height: 120px;
    object-fit: cover;
    object-position: top;
}

/* pride tabs */
img[src$='//static.lioden.com/images/layout/unsortedlionsbanner.png'],
img[src$='//static.lioden.com/images/layout/nestingbanner.png'],
img[src$='//static.lioden.com/images/layout/prideoverviewbanner.png'] {
    content: url('https://static.lioden.com/images/dynamic/backgrounds/7thlionlands_Day.png');
    height: 80px;
    object-fit: cover;
    object-position: center 60%;
}

/* unsorted lions */
/* img[src$='//static.lioden.com/images/layout/unsortedlionsbanner.png'] {
content: url('LINK');
object-position: top;
} */
/* pregnant lionesses */
/* img[src$='//static.lioden.com/images/layout/nestingbanner.png'] {
content: url('LINK');
object-position: top;
} */
/* pride overview */
/* img[src$='//static.lioden.com/images/layout/prideoverviewbanner.png'] {
content: url('LINK');
object-position: top;
} */
/* all mounds */
/* .mound-grid img {
content: url('LINK');
padding: 5px;
} */
/* all mounds but like a cave */
.mound-grid {
    padding: 0 0 5px 0;
}

.mound-grid img {
    content: url('https://static.lioden.com/images/dynamic/backgrounds/Shrublands_Day.png');
    height: 100px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* create mound image and empty cave slots */
img[src$='//static.lioden.com/images/layout/addbeetlemound.png'],
img[src$='//static.lioden.com/images/layout/caveunused.jpg'] {
    filter: saturate(50%);
}

/* featured lion section */
.featured-lion {
    background: #d9a473;
    color: #000000;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 0 0 1px #faf2eb, 1px 1px 3px #625950;
}

.featured-lion img {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

/* featured lion background image */
.featured-lion img[src$='//static.lioden.com/images/cave/default.png'] {
    content: url('https://static.lioden.com/images/dynamic/backgrounds/CaveBG.png') !important;
    /* filter: none; */
}

/* very important if you want it to not look ugly anymore lol don't change the padding here or the media queries at the bottom */
.featured-lion .b {
    padding-top: 8px;
}

.featured-lion a:hover,
.featured-lion a:focus {
    color: #000000;
}

.featured-lion a:link,
.featured-lion a:active,
.featured-lion a:visited {
    color: #1a1a1a;
}

/* owned by text */
h1.center>small,
h1.center>small a:hover,
h1.center>small a:focus {
    color: #000000 !important;
}

h1.center>small a,
h1.center>small a:link,
h1.center>small a:visited,
h1.center>small a:active {
    color: #1a1a1a !important;
}

/* dropdown text */
.table .bottom select {
    color: #000;
}

/* Inner Mounds */
/* menu bg */
.sub_menu {
    background: #d9a473;
    border: 1px solid #faf2eb;
    border-radius: 10px;
    box-shadow: 1px 1px 3px #625950;
}

.sub_sub_menu {
    display: none;
}

/* Feature Styling (like feed all play all etc.) */
div.feature {
    border-radius: 10px;
    border: 1px solid #faf2eb;
    background: #e9cbaf;
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 1px 1px 3px #625950;
}

/* dropdown width (acts funny on smaller screens at the default 200px sometimes) */
div.feature select {
    width: 180px !important;
}

/* header */
div.feature h3 {
    color: #000000;
}

.feature-footer {
    background: #e9cbaf;
}

/* inner text */
.feature .xsmall {
    color: #000000;
}

/* Dynasty Pills */
/* dynasty main */
div.left {
    background: #f2be8c;
    border-radius: 10px;
    border: 1px solid #faf2eb;
    color: #000000;
    box-shadow: 1px 1px 3px #625950;
}

/* custom dynasty images */
div.left img {
    content: url('https://static.lioden.com/images/dynamic/backgrounds/AridDesert_Day.png');
    object-fit: cover;
    object-position: top;
    padding: 0;
    height: 60px;
    max-width: 500px !important;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.dynastylist .left {
    padding: 5px 0 0 0;
}

/* dynasty headers */
.dynastylist h3 {
    color: #1a1a1a;
    padding-top: 5px;
}

.dynastylist h3:hover,
.dynastylist h3:focus {
    color: #000000;
}

/* links in the pills beneath dynasty stuff */
a div.left {
    color: #1a1a1a;
}

a div.left:hover,
a div.left:focus {
    color: #000000;
}

/* Branch */
.item {
    background: #e4be9b;
    border: 1px solid #faf2eb;
    border-radius: 5px;
}

.item-header {
    background: #deb187;
    color: #000000;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.item-footer {
    background: #deb187;
    color: #000000;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Buttons */
/* all */
.select-control,
button.button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.select-control:hover,
button.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.select-control.bad,
button.button.bad,
input[type="button"].bad,
input[type="submit"].bad,
input[type="reset"].bad,
.select-control.bad:hover,
button.button.bad:hover,
input[type="button"].bad:hover,
input[type="submit"].bad:hover,
input[type="reset"].bad:hover {
    border-radius: 5px;
}

/* regular button */
.select-control,
button.button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    background: #a1662b;
    background: linear-gradient(to bottom, #a1662b 5%, #794d20 5%, #794d20 95%, #513315 95%);
    color: #ffffff;
    border: 1px solid #513315;
    text-shadow: 1px 1px 0px #513315;
    font-family: 'Kameron', 'Times New Roman', Times, serif;
}

/* regular button hover */
.select-control:hover,
button.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    background: #8d5925;
    background: linear-gradient(to bottom, #8d5925 5%, #65401b 5%, #65401b 95%, #3c2610 95%);
    color: #ffffff;
    border: 1px solid #3c2610;
    text-shadow: 1px 1px 0px #3c2610;
}

/* red button */
.select-control.bad,
button.button.bad,
input[type="button"].bad,
input[type="submit"].bad,
input[type="reset"].bad {
    background: #ad3873;
    background: linear-gradient(to bottom, #ad3873 5%, #872c59 5%, #872c59 49%, #872c59 95%, #601f40 95%);
    color: #ffffff;
    border: 1px solid #601f40;
    text-shadow: 1px 1px 0px #601f40;
}

/* red button hover */
.select-control.bad:hover,
button.button.bad:hover,
input[type="button"].bad:hover,
input[type="submit"].bad:hover,
input[type="reset"].bad:hover {
    background: #9a3266;
    background: linear-gradient(to bottom, #9a3266 5%, #74254d 5%, #74254d 49%, #74254d 95%, #4d1933 95%);
    color: #ffffff;
    border: 1px solid #4d1933;
    text-shadow: 1px 1px 0px #4d1933;
}

/* Event Flavor Text */
/* has to go at the bottom since it likes to be mean to me otherwise trust me best left here lol */
center>div.center.b,
center>b>span {
    color: #663100 !important;
}

/* Footer */
.footer {
    background: #f4e5d7b3;
    border: 1px solid #faf2eb;
    border-radius: 10px;
    padding: 1em;
    margin-top: 2em;
}

/* technically applies to all "white" text on the site but mainly applies to the footer text */
.white {
    color: #000000;
}

/* bottom links container size to prevent weird stacking issues */
ul.bottomlinks {
    width: max-content !important;
}

/* bottoms links */
.bottomlinks li a,
.bottomlinks li a:link,
.bottomlinks li a:active,
.bottomlinks li a:visited,
.footer a,
.footer a:link,
.footer a:active,
.footer a:visited {
    color: #1a1a1a;
    border-bottom: none;
}

.bottomlinks li a:hover,
.bottomlinks li a:focus,
.footer a:hover,
footer a:focus {
    color: #000000;
}

/*#region Chat */
/* main container */
#chatMessageContainer {
    border: 1px solid #faf2eb;
}

/* chat buttons */
#btnChatSettings,
#btnLoadNewMessages,
.s-chat-message_menu {
    filter: grayscale() brightness(0%);
}

/* menu dropbox */
.channelMenu>button,
.channelMenu>div {
    background: #d9a473 !important;
    border-color: #faf2eb !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
}

/* message text */
.s-chat-message {
    color: #000000;
}

/* even messages */
.s-chat-message:nth-child(even) {
    background: #e9cbaf;
}

/* odd messages */
.s-chat-message:nth-child(odd) {
    background: #e4be9b;
}

/* mention */
#chatMessageList[data-pings="enabled"] .s-chat-message_mention,
.s-chat-message.hasContext {
    background: #e9cbaf !important;
    border-color: #d9a473 !important;
    color: #000000 !important;
    padding-left: 10px;
}

.s-chat-message.hasContext .s-chat-message_timestamp,
.s-chat-message_mention.s-chat-message_timestamp {
    padding-left: 10px;
}

#chatMessageList[data-pings="enabled"] .s-chat-message_mention a {
    color: #1a1a1a !important;
}

#chatMessageList[data-pings="enabled"] .s-chat-message_mention a:hover,
#chatMessageList[data-pings="enabled"] .s-chat-message_mention a:focus {
    color: #000000 !important;
}

/* scrollbar */
#chatMessageList::-webkit-scrollbar {
    width: 8px;
    background: #fff;
}

/* scrollbar button */
#chatMessageList::-webkit-scrollbar-thumb {
    background: #deb187;
    border-radius: 0;
}

#chatMessageList::-webkit-scrollbar-thumb:hover {
    background: #d9a473;
}

/* claim badge */
.s-chat-message_claim {
    background: #deb187;
    border-bottom: none;
    color: #000000;
}

/* claim popout box stuff */
#modalClaimBG {
    background: rgba(0, 0, 0, 0.5);
}

/* main inner bit */
#modalClaimList {
    background: #e9cbaf;
    color: #000000;
    border: 1px solid #faf2eb;
}

#modalClaimList a,
#modalClaimList a:active,
#modalClaimList a:visited,
#modalClaimList a:link {
    color: #1a1a1a;
}

#modalClaimList a:hover,
#modalClaimList a:focus {
    color: #000000;
}

/* header */
#modalClaimList h3 {
    background: #deb187;
    color: #000000;
}

/* close button */
#modalClaimList button.close {
    color: #000000;
}

/* pinned message */
#chatMessagePinned,
#chatMessagePinned.s-chat-message__pinned {
    background: #d9a473;
    color: #000000 !important;
    border: none !important;
}

.s-chat-sidebar #chatMessagePinned.s-chat-message__pinned {
    text-indent: 4px;
}

/* timestamp */
.s-chat-message_timestamp {
    color: #000000;
}

/* mod message text (best left at #000) */
.s-chat-message__mod,
.s-chat-message__mod .s-chat-message_content,
.s-chat-message__mod .s-chat-message_timestamp {
    color: #000;
}

#fra_chatContainer .channelMenu .channelSwitcher {
    color: #000000;
}

#fra_chatContainer .channelMenu .channelSwitcher:hover,
#fra_chatContainer .channelMenu .channelSwitcher:focus {
    background: #deb187;
    color: #000000;
}

#fra_chatContainer .channelMenu .channelSwitcher.active {
    background: #e4be9b;
    color: #000000;
}

/* settings text (DO NOT CHANGE OR IT WILL BREAK) */
#fra_chatContainer label {
    color: #000;
}

/* char count */
#lblCharacterCounter {
    color: #000000 !important;
}

/* code of conduct & chat room link */
a[href$='./code.php'],
a[href$='./chat.php'] {
    color: #000000;
}

/*#endregion */

/* Media Query Adjustments */
@media (max-width: 993px) {
    .dynastylist {
        margin-bottom: 15px;
    }
}

@media (max-width: 768px) {
    body {
        background-position-y: center;
        background-position-x: center;
        /* DON'T CHANGE BELOW */
        background-repeat: no-repeat;
        background-size: cover;
        width: auto !important;
        min-width: 600px;
    }

    .main,
    .topbar {
        box-shadow: none !important;
    }

    #fraProfileContent.hidden-xs {
        display: block !important;
    }

    .breadcrumb::after {
        right: 22% !important;
    }
}

@media (max-width: 684px) {
    div.lionImage.featured-lion>div {
        height: 475px !important;
    }
}

@media (max-width: 620px) {
    div.lionImage.featured-lion>div {
        height: 450px !important;
    }
}