file-manager/app/assets/stylesheets/file_manager/application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_self
 *= require fontawesome-5.15.4.min
 */
/* Common */
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
    cursor: not-allowed;
    background-color: #eeeeee;
}
body#file_manager_body, html{
  font-size: 1rem !important;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
#file_manager_section h3 {
  float: left;
}
#file_manager_section .btn-wrapper {
  float: right;
}
#file_manager_section .btn-wrapper .upload-button {
  display: inline-block;
}
#file_manager_section table {
  border-collapse: collapse;
  width: 100%;
  text-align: left;
  table-layout: fixed;
}
.modal table {
  white-space: unset;
}
.modal.fade:not(.in) {
  display: none;
}
.modal-backdrop.fade:not(.in) {
  display: none;
}
#file_manager_section th {
  font-size: 1.17em;
  background-color: rgb(76, 102, 175);
  color: white;
}
#file_manager_section tr:hover {
  background-color: #ffffff;
}
#file_manager_section th, #file_manager_section td {
  padding: 4px 12px;
  border: 1px solid;
  border-color: #ddd;
}
#file_manager_section td a {
  display: block;
  width: 100%;
  overflow-wrap: break-word;
}
/* Light mode: */
a.delete,
a.delete:visited {
  color: rgb(223, 132, 136);
}
a.rename, a.recover {
  color: deepskyblue;
}
.date {
  font-family: 'Courier New', Courier, monospace;
}
.name {
  width: 100%;
  white-space: normal;
}
.fa {
  padding: 0 6px 0 0;
}
.download, .create_folder, .edit, .save, .recover_all, .clean_up_recycle_bin, .delete_file,
.download:link, .create_folder:link, .edit:link, .save:link, .recover_all:link, .clean_up_recycle_bin:link, .delete_file:link,
.download:visited, .create_folder:visited, .edit:visited, .save:visited, .clean_up_recycle_bin:visited, .delete_file:visited {
  color: white;
  display: inline-block;
  font-size: 1.17em;
  padding: 12px 18px;
  text-align: center;
  text-decoration: none;
  white-space: pre-wrap;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1.0;
}
input[type=file]#file{
  display: inline-block;
}
form {
  display: inline-block;
}
#file_manager_section pre,#file_manager_section textarea {
  padding: 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.save.hide{
  display: none;
}
.breadcrumb-index {
    display: inline-flex;
    margin: 0.67em 0;
    font-size: 2em;
}
.breadcrumb-index, #breadcrumb-editable {
    width: 100%;
}
breadcrumb-relative-url{
  max-width: 100%;
  overflow-wrap: break-word;
}
.breadcrumb-index a {
  color: #0366d6;
  font-weight: normal;
}
.breadcrumb-index a.base_url {
  font-weight: bold;
}
.separator {
  padding: 0 10px;
}
.create_folder {
  float: right;
  background: forestgreen;
}
.recover_all {
  background: deepskyblue;
}
.create_folder, .clean_up_recycle_bin {
  float: right;
  background: red;
}
.fa-folder {
  color: rgba(3,47,98,.5);
}
.fa-file {
  color: rgb(155, 155, 155);
}
.download {
  background-color: rgb(60, 75, 209);
}
.delete_file {
  background: #be0606;
  color: white;
}
.edit {
  background: #a67030;
}
.save{
  background: #00e300;
  color: black;
}
#file_manager_section pre,#file_manager_section textarea {
  background-color: #d3d3d3;
  color: black;
}
#file_manager_section textarea{
  width: calc(100% - 20px);
}
.redirect_recycle_bin{
  float: right;
}
.dropdown-menu.upload-box {
  right: 0;
  left: auto;
}
.tooltip {
  position: relative;
  display: inline-block;
  opacity: 1;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
  overflow-wrap: break-word;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
  body#file_manager_body, #file_manager_section tbody {
    background-color: black;
    color: rgba(249, 249, 250, 0.8);
  }
  .fa-folder {
    color: rgb(2, 69, 146);
  }
  .fa-file {
    color: rgb(177, 177, 177);
  }
  a .filename {
    color: rgb(47, 121, 165);
  }
  a.delete, a.create_folder, a.clean_up_recycle_bin, a.edit, a.delete_file,
  a.delete:link, a.create_folder:link, a.clean_up_recycle_bin:link, a.edit:link, a.delete_file:link,
  a.delete:visited, a.create_folder:visited, a.clean_up_recycle_bin:visited, a.edit:visited, a.delete_file:visited {
    color: rgb(223, 132, 136);
  }
  tr:hover {
    background-color: #3b3b3b;
  }
  th, td {
    border-color: rgb(138, 138, 138);
  }
  .download {
    background-color: rgb(29, 42, 163);
  }
  .create_folder {
    background: darkgreen;
  }
  .recover_all {
    background: darkred;
  }
  .edit {
    background: #653700;
  }
  .save {
    background: green;
    color: #fff;
  }
  #file_manager_section pre,#file_manager_section textarea {
    background-color: #3b3b3b;
    color: white;
  }
}