OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	04/17/2025 09:15:05 AM	rwxrwxr-x
📄 13-01-25stream.css	14.61 KB	01/10/2025 09:15:33 AM	rw-r--r--
📄 b_stream.css	13.72 KB	11/23/2024 12:56:37 PM	rw-r--r--
📄 b_styles.css	5.95 KB	11/18/2024 06:28:54 AM	rw-rw-r--
📄 bstream.css	11.85 KB	11/21/2024 06:51:16 AM	rw-r--r--
📄 bstyles.css	3.18 KB	11/18/2024 06:28:56 AM	rw-rw-r--
📄 cream.css	5.39 KB	03/06/2025 09:42:13 AM	rw-r--r--
📄 creamstyle.css	7.75 KB	03/06/2025 09:42:13 AM	rw-rw-r--
📄 genai_style.css	3.56 KB	03/11/2025 09:32:15 AM	rw-rw-r--
📄 magnific-popup.css	6.7 KB	03/06/2025 09:42:13 AM	rw-r--r--
📄 main.css	42.97 KB	03/06/2025 09:42:13 AM	rw-r--r--
📄 sidebar.php	19.68 KB	05/19/2025 10:07:15 AM	rw-r--r--
📄 social.css	18.82 KB	04/17/2025 09:14:33 AM	rw-r--r--
📄 stream.css	12.9 KB	05/14/2025 08:53:29 AM	rw-r--r--
📄 streamNew.css	12.58 KB	04/07/2025 04:49:50 AM	rw-r--r--
📄 styles.css	8.01 KB	03/07/2025 06:23:11 AM	rw-r--r--
📄 stylesNew.css	8.01 KB	04/04/2025 12:07:30 PM	rw-r--r--

Editing: streamNew.css

/* Define color variables at the root */
:root {
    --cream: #f8f4e3;
    --orange: #db5919;
    --white: #ffffff;
    --light-cream: #fdfaf0;
    --dark-cream: #e6e0cc;
    --dark-orange: #b44815;
    --light-orange: #f47a43;
    --text-dark: #333333;
    --gray: #f5f5f5;
  }
  
  /* Base Font Settings for Mobile */
  body {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 1.2;
      margin: 0;
      padding: 0;
  }
  
  p {
      color: var(--text-dark);
  }
  
  a {
      text-decoration: none;
  }
  
  h1 {
      font-family: 'Segoe UI', Noto Sans Georgian, Roboto, sans-serif;
      font-weight: 700;
      font-size: 28px;
      line-height: 32px;
  }
  
  h2 {
      font-weight: 600;
      font-size: 20px;
      line-height: 24px;
      margin-bottom: 15px;
  }
  
  h5 {
      font-family: 'Segoe UI', Noto Sans Georgian, Roboto, sans-serif;
      font-weight: 600;
      line-height: 24px;
      margin-bottom: 15px;
      font-size: 1.05rem;
  }
  
  p {
      font-family: 'Segoe UI';
      font-weight: 400;
      font-size: 15px;
      line-height: 22px;
      margin-bottom: 15px;
  }
  
  .caption {
      font-weight: 300;
      font-size: 12px;
      color: #777;
      line-height: 16px;
  }
  
  
  
  .status-message {
      font-weight: 500;
      font-size: 14px;
      color: red;
      margin-top: 10px;
  }
  
  @media (max-width: 767px) {
      h1 {
          font-size: 24px;
      }
  
      h2 {
          font-size: 18px;
      }
  
      p {
          font-size: 14px;
      }
  
      .btn {
          font-size: 14px;
          padding: 8px 16px;
      }
  
      .caption {
          font-size: 12px;
      }
  }
  
  @media (min-width: 768px) and (max-width: 1024px) {
      h1 {
          font-size: 26px;
      }
  
      h2 {
          font-size: 20px;
      }
  
      .btn {
          font-size: 16px;
          padding: 12px 24px;
      }
  }
  
  @media (min-width: 1025px) {
      h1 {
          font-size: 32px;
      }
  
      h2 {
          font-size: 24px;
      }
  
      .btn {
          font-size: 18px;
          padding: 0px 10px;
      }
  }
  
  #modalContentTextarea {
      overflow-y: auto;
      max-height: 200px;
  }
  
  .followButton {
      border: none;
      border-radius: 4px;
      padding: 4px 10px;
  }
  
  .readMoreBtn {
      color: var(--text-dark) !important;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      color: var(--dark-orange) !important;
      font-size: x-small !important;
      display: inline !important;
  }
  
  .readMoreBtn:hover {
      text-decoration: underline;
  }
  
  .fa-thumbs-up.fa-solid {
      color: var(--dark-orange);
  }
  
  .container {
      flex-wrap: wrap;
      max-width: 100%;
  }
  
  .first_left_container {
      width: 100%;
      display: flex;
      max-width: 500px;
      justify-content: center;
      justify-items: center;
      flex-direction: row;
      height: fit-content;
      background-color: var(--cream);
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 20px;
  }
  
  .first_right_container {
      flex-grow: 1;
      width: 100%;
      max-width: 600px;
      /* border-left: 0.5px solid var(--dark-cream); */
      /* border-right: 0.5px solid var(--dark-cream); */
      border-radius: 10px;
      margin-bottom: 10px;
  }
  
  @media screen and (max-width:799px) {
      .navaigation_main {
          display: none;
      }
  
      .first_right_container {
          flex-grow: 1;
          width: 100%;
          max-width: 600px;
          border-left: none;
          border-right: none;
          border-radius: 10px;
          margin-bottom: 10px;
      }
  }
  
  .mid_container {
      flex-grow: 1;
      width: 100%;
      border-radius: 10px;
      padding: 14px;
      margin-bottom: 10px;
      background-color: var(--cream);

}
  .mid_container:hover {
      flex-grow: 1;
      width: 100%;
      border-radius: 10px;
      padding: 14px;
      margin-bottom: 10px;
      background-color: var(--cream);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
	
  }
  
  .post-header .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--gray);
  }
  
  .post-header span {
      color: var(--text-dark) !important;
      font-size: 0.8rem;
  }
  
  .post-content img,
  .post-content video {
      border-radius: 10px;
      margin-top: 4px;
      max-width: 100%;
  }
  
  .actions .btn {
      color: var(--text-dark);
      font-size: 0.9rem;
      display: flex;
  }
  
  .actions .btn:hover {
      color: none;
  }
  
  .upload-section textarea {
      width: 100%;
      height: 50px;
      background-color: var(--white);
      border: 1px solid var(--dark-cream);
      color: var(--text-dark);
      resize: none;
      border-radius: 5px;
      padding: 10px;
  }
  
  .upload-section .btn-upload {
      background-color: var(--orange);
      color: var(--white);
      border-radius: 5px;
      padding: 2px 15px;
  }
  
  .all_section {
      display: flex;
      flex-direction: row;
      gap: 10px;
  }
  
  .all_section button {
      border: none;
      background: none;
      color: var(--text-dark);
  }
  
  .post-content p {
      max-width: 100%;
      overflow-wrap: break-word;
      white-space: pre-line;
  }
  
  .navbar>.container,
  .navbar>.container-fluid,
  .navbar>.container-lg,
  .navbar>.container-md,
  .navbar>.container-sm,
  .navbar>.container-xl,
  .navbar>.container-xxl {
      display: flex;
      flex-wrap: inherit;
      align-items: center;
      justify-content: space-between !important;
  }
  
  #mediaPreview img {
      border-radius: 10px;
      margin-top: 10px;
      display: block;
      height: auto;
      width: 100%;
  }
  
  .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
  }
  
  .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  .edited-marker {
      font-size: 0.9em;
      color: #888;
      margin-left: 5px;
  }
  
  textarea.form-control {
      resize: none;
      overflow-y: hidden;
  }
  
  @media only screen and (max-width: 768px) {
      .mid_container {
          flex-grow: 1;
          width: 100%;
          background-color: var(--cream) !important;
          border-radius: 0px;
          padding: 8px 4px;
          margin-bottom: 1px;
      }
  }
  
  @media (min-width: 768px) {
      .container {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 20px;
      }
  
      .mid_container {
          flex-grow: 1;
          min-width: 320px;
          max-width: 600px;
          width: 100%;
          background-color: var(--cream) !important;
          border-radius: 10px;
          padding: 20px;
          margin-bottom: 10px;
      }
  
      .all_section {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }
  
      .first_left_container {
          width: 250px;
          margin-bottom: 0;
      }
  }
  
  @media (min-width: 800px) {
      .first_left_container {
          width: 240px;
          display: flex;
          gap: 20px;
          flex-direction: row;
      }
  
      .first_left_container.collapsed {
          display: block;
      }
  }
  
  .modal-dialog {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  
  .modal-content-like {
      margin-left: 50px;
  }
  
  .menu-container {
      position: absolute;
      top: 10px;
      right: 10px;
  }
  
  .dropcardMenu {
      display: none;
      position: absolute;
      top: 40px;
      right: 0;
      background-color: var(--white);
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      z-index: 100;
  }
  
  .stremDropcard {
      min-width: 100px;
  }
  
  .stremDropcard .streamPost {
      display: flex !important;
      justify-content: space-between;
      gap: 18px;
      padding: 10px 5px;
      min-width: 170px;
  }
  
  .editBtn {
      margin-bottom: 5px;
  }
  
  .dropcardMenu button {
      width: 100%;
      display: block;
      padding: 0px 4px;
      color: var(--white);
      text-decoration: none;
      background-color: var(--orange);
      border: none;
      border-radius: 4px;
  }
  
  .dropcardMenu a:hover {
      background-color: var(--dark-orange);
  }
  
  #menu-icon {
      cursor: pointer;
      width: 10px;
  }
  
  .mid_container {
      position: relative;
  }
  
  .all_section button {
      display: flex;
      flex-direction: row;
      position: relative;
      right: 20px;
      padding: 4px;
      margin: 0;
      gap: 10px;
      justify-content: center;
      justify-items: center;
  }
  
  .all_section button p {
      margin-bottom: 0px !important;
  }
  
  .first_left_container .all_section .btn {
      background-color: transparent;
      border: none !important;
      padding: 0px;
      margin: 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s, color 0.3s;
  }
  
  @media only screen and (max-width: 800px) {
      .first_left_container {
          width: 100vw;
          display: flex;
          max-width: 500px;
          justify-content: center;
          justify-items: center;
          flex-direction: row;
          height: fit-content;
          background-color: var(--cream);
          border-radius: 0px;
          padding: 0px;
          margin-bottom: 2px;
      }
  
      .all_section button {
          display: flex;
          align-items: center;
          padding-left: 0px;
          position: relative;
          gap: 5px;
          border: none;
      }
  
      .all_section {
          width: 100%;
          justify-content: space-around;
          display: flex;
          flex-direction: row;
          gap: 0px;
      }
  
      .post-header .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: var(--gray);
          margin: 0 4px;
      }
  
      .mid_container {
          flex-grow: 1;
          width: 100%;
          border-radius: 0px;
          padding: 8px 4px;
          margin-bottom: 1px;
      }
  
      .post-content p {
          max-width: 100%;
          font-family: "Segoe UI", Helvetica, Arial, sans-serif;
          overflow-wrap: break-word;
          line-height: 18px;
      }
  
      .actions .btn {
          color: var(--text-dark);
          font-size: 0.9rem;
          display: flex;
          padding: 2px 10px;
      }
  
      .first_left_container .all_section .btn {
          background-color: transparent;
          border: none;
          padding: 5px;
          margin: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background-color 0.3s, color 0.3s;
      }
  
      .navbar>.container,
      .navbar>.container-fluid,
      .navbar>.container-lg,
      .navbar>.container-md,
      .navbar>.container-sm,
      .navbar>.container-xl,
      .navbar>.container-xxl {
          display: flex;
          flex-wrap: inherit;
          align-items: center;
          justify-content: space-between !important;
      }
  
      .dropcardMenu {
          top: 30px;
      }
  }
  
  /* Default CSS for Mobile */
  #plusButton {
      width: 40px;
      height: 40px;
      position: fixed;
      bottom: 89px;
      right: 16px;
      border-radius: 50% !important;
      font-size: 20px !important;
      padding: 0px !important;
      background-color: var(--orange);
      border: none;
      color: var(--white);
      cursor: pointer;
      z-index: 9999;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
  
  /* Adjust icon position inside the button */
  #plusButton i {
      position: relative;
      top: 2px;
  }
  
  .btn-close {
      color: var(--orange) !important;
  }
  
  /* Media Queries for Larger Screens */
  @media screen and (min-width: 768px) {
      #plusButton {
          position: fixed;
          height: 40px;
          font-size: 20px;
          bottom: 74px;
          right: 22%;
      }
  }