lioden-cave.css

/* Free to use CSS template by Katie (#106445). */
/* This code may be altered, edited, or re-uploaded. */
/* This template may be used to create paid codes (pre-mades and commissions). */
/* Please do NOT remove this credit, unless your coding becomes unrecognizable from this one! */

/* FONT (From Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap');

/* BACKGROUND */
body {
  background: url('https://images.unsplash.com/photo-1702747420162-8f060b67689b?q=80&w=1097&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center center fixed;
  background-size: cover;
  font-family: "Montserrat", sans-serif;
  color: #2e2a2b;
}

/* MAIN PANEL */
.container.main {
  background: rgba(1, 1, 1, 0.5);
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* LEFT SIDE */
.col-md-9 {
  background: none;
  border-right: none;
}

/* TOPBAR ("Welcome back, ___") */
.topbar {
  background: rgba(1, 1, 1, 0.5);
  border: none;
  border-top: none;
  color: #000000;
  border-radius: 0;
}

/* NAVBAR (Den/Crossroads/Etc.) */
.navbar {
  background: rgba(1, 1, 1, 0.5);
  border-bottom: none;
  color: #000000;
  border-radius: 0;
}

/* NAVBAR BUTTON TEXT COLOR */
.navbar li a {
  color: #000000 !important;
}

/* NAVBAR BUTTON HOVER */
.navbar li a:hover {
  background: rgba(1, 1, 1, 0.5) !important;
  border-bottom: none;
  color: #000000 !important;
  border-radius: 0;
}

/* BREADCRUMB (Home / Den) */
.breadcrumb {
  background: rgba(1, 1, 1, 0.5) !important;
  border: none;
  border-radius: 0;
}

/* BREADCRUMB TEXT */
.breadcrumb .active {
  color: #000000;
}

/* CSS CREDIT */
.breadcrumb::after {
  content: "Template by Katie (#106445)";
  color: #000000;
  position: absolute;
  right: 13%;
  z-index: 100;
}

/* Responsive adjustments for the breadcrumb credit */
@media only screen and (max-width: 1199px) and (min-width: 992px) {
  .breadcrumb::after {
    right: 20%;
  }
}
@media only screen and (max-width: 991px) and (min-width: 768px) {
  .breadcrumb::after {
    right: 20%;
  }
}
@media only screen and (max-width: 767px) {
  .breadcrumb::after {
    right: 22%;
  }
}

/* BOOKMARK BUTTON */
input.floatright, input.floatright:hover {
  background: rgba(1, 1, 1, 0.5) !important;
  border: none !important;
  border-radius: 0;
  color: #000000 !important;
}

/* SWITCH ACCOUNT BUTTON */
button.button, button.button:hover {
  background: rgba(1, 1, 1, 0.5);
  border: none !important;
  border-radius: 0;
  text-shadow: none !important;
  color: #000000 !important;
}

/* ALERTS */
.alert, .alert-warning, .alert-danger {
  background: rgba(1, 1, 1, 0.5) !important;
  border: none;
  color: #000000;
  border-radius: 0 !important;
}

/* BIGGEST HEADER */
h1 {
  color: #000000;
  font-size: 90px;
  text-align: center;
  font-family: 'FONT NAME';
}

/* MEDIUM HEADER */
h2 {
  color: #000000;
  font-size: 24px;
  text-align: center;
}

/* SMALL HEADER */
h3 {
  color: #000000 !important;
  font-size: 14px !important;
}

/* RIGHT SIDE PANEL HEADER */
.sidebar h3 {
  color: #000000 !important;
  font-size: 26px !important;
  font-family: 'FONT NAME';
}

/* RIGHT SIDE PANELS */
.panel {
  background: rgba(1, 1, 1, 0.5) !important;
  box-shadow: none !important;
  border: none !important;
  color: #000000 !important;
  border-radius: 0;
}

/* ENERGY BAR BACKGROUND */
.progress {
  background: rgba(1, 1, 1, 0.5);
  color: #000000 !important;
  border-radius: 0 !important;
}

/* ENERGY BAR COLOR */
.progress-bar {
  background: rgba(1, 1, 1, 0.5);
  color: #000000 !important;
  border-radius: 0 !important;
}

/* ENERGY BAR TEXT */
.progress div {
  color: #000000 !important;
}

/* CHAT */
.s-chat-message:nth-child(even) {
  background: rgba(1, 1, 1, 0.5) !important;
  color: #000000 !important;
  border: none !important;
}
.s-chat-message:nth-child(odd) {
  background: rgba(1, 1, 1, 0.5) !important;
  color: #000000 !important;
  border: none !important;
}
.s-chat-message__pinned {
  background: rgba(1, 1, 1, 0.5) !important;
  color: #000000 !important;
  border: none !important;
}
.s-chat-message_timestamp {
  color: #000000 !important;
}
div#chatMessageContainer {
  border: none !important;
}
button#label_currentChannel {
  background: rgba(1, 1, 1, 0.5) !important;
  color: #000000 !important;
  border: none !important;
}

/* LION INFO TABLE */
.table {
  background: rgba(1, 1, 1, 0.5);
  border: none !important;
  border-collapse: separate;
  border-radius: 0;
}

.top, .bottom, th {
  background: rgba(1, 1, 1, 0.5) !important;
  color: #000000 !important;
  border-radius: 0;
}

td.bottom a {
  text-decoration: none !important;
}

/* INNER-TABLE STYLING */
.inner-table .left {
  background: rgba(155, 226, 242, 0.6) !important;
  color: #2e2a2b;
  border-radius: 0;
}
.inner-table .right, td.right {
  background: none;
  border-radius: 0 !important;
}

.right_odd {
  background: none !important;
}

/* GRIDS */
.cave-grid, .mound-grid {
  background: rgba(1, 1, 1, 0.5);
  border: none !important;
  border-radius: 0 !important;
}

/* FEATURE BUTTONS */
.feature {
  background: rgba(1, 1, 1, 0.5) !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  border-radius: 0 !important;
}

.feature, div.left {
  background: rgba(1, 1, 1, 0.5);
  border: none;
  border-radius: 0 !important;
}

/* TABLE LEFT */
.table .left {
  background: rgba(1, 1, 1, 0.5);
  border-radius: 0;
}

input, select, textarea {
  background: rgba(1, 1, 1, 0.5) !important;
  border: none !important;
  border-radius: 0 !important;
  color: #000000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ACCOUNT OPTIONS */
.item-header, .item {
  background: rgba(1, 1, 1, 0.5) !important;
  color: #000000  !important;
  border-radius: 0 !important;
}

/* ACCOUNT OPTIONS ON/OFF TOGGLE SWITCH */
div.slider.round {
  background: #000000 !important;
}
div.slider.round::before {
  background: #000000 !important;
}

/* FOOTER */
div.container.footer.center.white.visible-lg.visible-md.visible-sm,
div.container.footer.center.white.visible-lg.visible-md.visible-sm a {
  color: #000000 !important;
  text-shadow: none !important;
}

/* LINK COLORS */
a:link, a:visited {
  color: #ffffff !important;
}
a:hover {
  color: #ffffff !important;
}

/* BOX CONTAINER */
.box {
  background: rgba(1, 1, 1, 0.5) !important;
  color: #000000;
}