OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	03/26/2025 04:16:42 AM	rwxr-xr-x
📄 style.css	9.78 KB	03/26/2025 04:16:42 AM	rw-r--r--
📄 styles.css	9.71 KB	03/26/2025 04:16:42 AM	rw-r--r--

Editing: styles.css

/* Define common variables for both light and dark mode */
:root {
  /* --bg-color-dark: #000; */
  --bg-color-light: #dfe3ee;
  /* --text-color-dark: #fff; */
  --text-color-light: #000;
  /* --navbar-bg-dark: #141414; */
  --navbar-bg-light: #f8f9fa;
  /* --link-color-dark: #bbb; */
  --link-color-light: #333;
  /* --link-hover-color-dark: #fff; */
  --link-hover-color-light: #131314;
  /* --button-bg-dark: #1c1c1c; */
  --button-bg-light: #131314;
  /* --footer-bg-dark: #000; */
  --footer-bg-light: #f8f9fa;
  --h2-text-color-light: #000;
  /* --h2-text-color-dark: #fff; */
  /* --a-text-color-dark: #fff; */
  /* --bs-nav-link-color-dark: #fff; */
  --bs-nav-link-color-light: #000;

/* --bs-nav-link-hover-dark-color: #fff; */
  --bs-nav-link-hover-light-color: #000;
  /* stream.php */
  --bg-stream-light: #EDF2F6;
}

.dropdown-menu {
  top: 50px !important;
  right: 31px !important;
  --bs-dropdown-zindex: 1000;
  --bs-dropdown-min-width: 10rem;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0.5rem;
  --bs-dropdown-spacer: 0.125rem;
  --bs-dropdown-font-size: 1rem;
  --bs-dropdown-color: var(--bs-body-color);
  --bs-dropdown-bg: var(--bs-body-bg);
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-border-radius: 0.375rem;
  --bs-dropdown-border-width: var(--bs-border-width);
  --bs-dropdown-inner-border-radius: calc(0.375rem - var(--bs-border-width));
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdown-divider-margin-y: 0.5rem;
  --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.15);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #0d6efd;
  --bs-dropdown-link-disabled-color: #adb5bd;
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: 0.25rem;
  --bs-dropdown-header-color: #6c757d;
  --bs-dropdown-header-padding-x: 1rem;
  --bs-dropdown-header-padding-y: 0.5rem;
  position: absolute;
  z-index: var(--bs-dropdown-zindex);
  display: none;
  min-width: var(--bs-dropdown-min-width);
  padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
  margin: 0;
  font-size: var(--bs-dropdown-font-size);
  color: var(--bs-dropdown-color);
  text-align: left;
  list-style: none;
left: auto !important;

background-clip: padding-box;
  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
  border-radius: var(--bs-dropdown-border-radius);
}

body.light-mode .dropdown-menu {
  background-color: var(--bs-dropdown-link-active-color) !important;
}

/* Base styles */
body {
  background-color:#fafafa;
  color: #000000;
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 0;
  transition: all 0.3s ease;
}

body.dark-mode .category h2 {
  color: var(--bs-nav-link-color-dark);
}

body.light-mode .category h2 {
  color: var(--bs-nav-link-color-light);
}

/* .category-title.light-theme h2 {
  color: var(--h2-text-color-light) !important;
}
.category-title.dark-theme h2 {
  color: var(--h2-text-color-dark) !important;
} */

#settingsDropdown .setting-text {
  color: #fff;
}

.nav-link:focus,
.nav-link:focus {
  color: var(--bs-nav-link-hover-color) !important;
}

.nav-link {
  display: block;
  padding: 0 1rem !important;
}

.dropdown-toggle::after {
  display: none !important;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  /* border-bottom: 0; */
  border-left: .3em solid transparent;
}

body.dark-mode .nav-link {
  color: var(--bs-nav-link-color-dark);
}

body.dark-mode .nav-link:hover {
  color: var(--bs-nav-link-hover-dark-color);

}
.nav-tabs .nav-item {
  margin-bottom: 1px !important;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
  border-color: transparent !important;
}

body.dark-mode .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  /* color: #fff ; */
  background-color: transparent !important;
  border-bottom: #bbb;
  border-color: transparent !important;
}

body.light-mode .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  /* color:; */
  background-color: #dfe3ee;
  border-bottom: #1c1c1c !important;
  border-color: transparent !important;
}

body.dark-mode .nav-tabs {
  border-bottom: 1px solid #dee2e6;
}

body.light-mode .nav-tabs {
  border-bottom: 1px solid #1a1b1b;
}

/* Styles for light mode */
body.light-mode .nav-link {
  color: var(--bs-nav-link-color-light);
}

body.light-mode .nav-link:hover {
  color: var(--bs-nav-link-hover-light-color);
}

body.light-mode #headOfArticles {
  color: var(--bg-color-dark) !important;
}

body.dark-mode #headOfArticles {
  color: var(--bg-color-light) !important;
}

body.light-mode .modal-content {
  background-color: var(--bg-color-light);
  color: var(--bg-color-dark) !important;
  border: none;
  margin-bottom: 20px;
  transition: transform 0.3s;
}

body.dark-mode .modal-content {
  background-color: var(--bg-color-dark);
  color: var(--bg-color-light) !important;
  border: none;
  margin-bottom: 20px;
  transition: transform 0.3s;
}

body.light-mode .morewithlike a {
  background-color: var(--bg-color-light) !important;
  color: var(--bg-color-dark);
}

body.dark-mode .morewithlike a {
  background-color: var(--bg-color-dark) !important;
  color: var(--bg-color-light);
}

body.light-mode .morewithlike i {
  color: var(--bg-color-dark);
  border: none;
  padding: 0;
}

body.dark-mode .morewithlike i {
  color: var(--bg-color-light);
  border: none;
  padding: 0;
}

/* body.light-mode .card-body{
  background-color: var(--bs-nav-link-color-dark);
  color: var(--bg-color-dark);
  border-color: #f8f9fa;
}
body.dark-mode .card-body{
  background-color: var(--bg-color-dark);
  color: var(--bg-color-light);
  border-color: #1c1c1c;

} */

body.light-mode .card {
  background-color: var(--bs-nav-link-color-dark);
  color: var(--bg-color-dark) !important;
  border-color: #f8f9fa;
  border-radius: 10px;
}

body.dark-mode .card {
  background-color: var(--bg-color-dark);
  color: var(--bg-color-light);
  border-color: #1c1c1c;

}

body.dark-mode .card-body a {
  background-color: transparent;
}

body.light-mode .card-body a {
  background-color: transparent;
  border-color: #db5919;
}

.light-theme #settings-text {
  color: var(--settings-text-light) !important;
}

.dark-theme #settings-text {
  color: var(--settings-text-dark) !important;
}

.navbar {
  background-color: var(--navbar-bg-dark);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  color: #e50914 !important;
}

.navbar-nav .nav-link {
  color: var(--link-color-dark) !important;
  transition: color 0.3s;
}

.navbar-nav .nav-link:hover {
  color: var(--link-hover-color-dark) !important;
}

.navbar.scrolled {
  padding: 10px 0;
  background-color: #000;
}

/* .btn-primary {
  color: #007bff;
  background-color: var(--button-bg-light) !important;
  border-color: var(--button-bg-dark);
} */

.footer {
  text-align: center;
  padding: 20px;
  background-color: var(--navbar-bg-dark);
  color: #777;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.footer p {
  margin-bottom: 0px !important;
}

/* Light mode */
.light-mode {
  background-color: var(--bg-color-light) !important;
  color: var(--text-color-light) !important;
}

.light-mode .navbar {
  background-color: var(--navbar-bg-light) !important;
}

.light-mode .navbar-nav .nav-link {
  color: var(--link-color-light) !important;
}

.light-mode .navbar-nav .nav-link:hover {
  color: var(--link-hover-color-light) !important;
}

.light-mode .btn-primary {
  background-color: #db5919 !important;
  border-color: var(--button-bg-light);
}

.dark-mode .btn-primary {
  background-color: #db5919 !important;
  border-color: var(--button-bg-dark);
}

.light-mode .footer {
  background-color: var(--footer-bg-light) !important;
  color: #333;
}

.navbar-logo {
  height: 60px;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .item-card {
    min-width: 180px;
  }

.category-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .item-card {
    min-width: 160px;
  }

.navbar-logo {
    height: 40px;
    /* Adjust to a different height if needed */
  }

.navbar {
    padding: 8px;
  }

.category-title {
    font-size: 1.25rem;
  }

.action-card .card-title {
    font-size: 1.1rem;
  }

.action-card .btn {
    font-size: 0.95rem;
  }
}

@media (max-width: 576px) {
  .navbar-brand {
    font-size: 1.25rem;
  }

.navbar-logo {
    height:40px;
    /* Smaller height for small screens */
  }

.nav-link {
    /* margin-left: 0.5rem; */
    font-size: 0.9rem;
    padding: 0 0.5rem !important;
  }

.item-card {
    max-width: 140px;
  }

.category-title {
    font-size: 1rem;
  }

.action-card .card-title {
    font-size: 1rem;
  }

.action-card .btn {
    font-size: 0.9rem;
  }
}

.btn-success {
  color: #fff;
  background-color: #f26522;
  border-color: #f26522;
}

body.dark-mode .nav-item a {
  color: white;
  text-decoration: none;
  background-color: 1c1c1c;
}

body.light-mode .nav-item a {
    display: flex;
    align-items: center;
    gap: 5px;
  color: #131314;
  text-decoration: none;
  background-color: transparent ;
}