관리-도구

편집 파일: dark-theme.scss

[data-bs-theme=dark] body {

color: var(--bs-body-color);
  background-color: var(--bs-body-bg-2);

$headingColor: #d5d5d5;
  $headerbg: #212529;

input::placeholder {
    color: #fff !important;
  }

.bg-light {
    background-color: #32363b !important;
  }

.card-title {
    color: #dee2e6;
  }

/* aligns */

@mixin sidelinks {

color: #dee2e6;

&:hover,
    &:focus {
      color: #ffffff;
      background-color: #383c40;
    }

}

/*header*/

.top-header {

.navbar {
      background-color: $headerbg;

.search-bar {
        .search-control {
          &:focus {
            border: 1px solid var(--bs-border-color);
          }
        }

.search-popup {

background-color: var(--bs-body-bg);

.card {
            border: 1px solid var(--bs-border-color-translucent);
          }

.search-title {
            color: #939aa0;
          }

.kewords {
            color: var(--bs-body-color);
            background-color: var(--bs-body-bg-2);

&:hover {
              color: #efefef;
              background-color: var(--bs-body-bg-2);

}
          }

.search-list-item {
            &:hover {
              color: var(--bs-body-color);
              background-color: var(--bs-body-bg-2)
            }

.list-icon {
              background-color: var(--bs-body-bg-2);
            }

}

}
      }

.nav-item {
        .mega-menu {
          background-color: var(--bs-body-bg-2);

.mega-menu-icon {

background-color: #f8f8f8;
          }

.card {

&:hover {
              background-color: var(--bs-body-bg-2);
            }
          }

}

.dropdown-apps {

.app-wrapper {
            background-color: var(--bs-body-bg);

&:hover {
              background-color: var(--bs-body-bg-2);
            }
          }
        }

.dropdown-notify {

.option {
            color: var(--bs-body-color);
            background-color: var(--bs-body-bg);
            border: 0px solid var(--bs-border-color-translucent);

&:hover {
              background-color: var(--bs-body-bg-2);
            }
          }

.notify-title {
            color: var(--bs-body-color);
          }

.notify-desc {
            color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
          }

.notify-time {
            color: #939aa0;
          }

.user-wrapper {
            background-color: #efefef;
          }

.notify-close {
            background-color: var(--bs-body-bg-2);
          }

}

.dropdown-menu {
        border: 1px solid var(--bs-border-color-translucent);
      }

.dropdown-menu::after {
        background: var(--bs-body-bg);
        border-top: 1px solid var(--bs-border-color);
        border-left: 1px solid var(--bs-border-color);
      }

.btn-toggle {
        a {
          @include sidelinks();
        }
      }

.nav-right-links {
        .nav-link {
          @include sidelinks();
        }
      }
    }

}

/* sidebar */

.sidebar-wrapper {
    background-color: var(--bs-body-bg);
    border-right: 1px solid var(--bs-border-color);

.sidebar-header {
      background-color: var(--bs-body-bg);
      border-right: 1px solid var(--bs-border-color);
       .sidebar-close {
        @include sidelinks()
       }
    }

.sidebar-nav {
      background-color: var(--bs-body-bg);
    }

.sidebar-bottom {

background-color: var(--bs-body-bg);
      border-top: 1px solid var(--bs-border-color);
      border-right: 1px solid var(--bs-border-color);

.footer-icon {
        @include sidelinks()
      }

.dropdown-menu {
        background-color: var(--bs-body-bg-2);
        border: 1px solid var(--bs-border-color-translucent);
      }

}

.chip {

color: var(--bs-body-color);
    background-color: var(--bs-body-bg-2);
    border: 1px solid var(--bs-border-color);

}

/* main content */

.main-wrapper {

.main-content {
      .breadcrumb-title {
        border-right: 1.5px solid var(--bs-border-color-translucent);
      }

.sharelink {
        @include sidelinks()
      }

.options {
        @include sidelinks();
      }

.vertical-pills {
        .nav-link {
          border-bottom: 1px solid var(--bs-border-color);
          color: var(--bs-body-color);

&:last-child {
            border-bottom: 0px solid #dee2e6;
          }
        }

}

.customer-table {
        table {
          .customer-name {
            color: var(--bs-body-color);
          }
        }
      }

.product-table {
        table {

.product-category {
            color: #878d96;
          }

.product-title {
            color: var(--bs-body-color);
          }

.product-tags {
            .btn-tags {
              background-color: var(--bs-body-bg-2);
              color: var(--bs-body-color);
            }

}

.product-rating {
            background-color: var(--bs-body-bg);
            border: 1px solid var(--bs-border-color);
          }

}
      }

.apexcharts-datalabel,
      .apexcharts-datalabel-label,
      .apexcharts-datalabel-value,
      .apexcharts-datalabels,
      .apexcharts-pie-label {
        fill: #fff
      }

}
  }

.separator {
    .line {
      background-color: var(--bs-border-color);
    }

}

.auth-cover-left {
    background-color: var(--bs-body-bg);
  }

.order-delete {
    @include sidelinks();
    cursor: pointer;
  }

/*page footer*/

.page-footer {
    background-color: $headerbg;
    border-top: 0px solid var(--bs-border-color);
  }

/* Metis Menu */
  $color_1: #a7acb1;
  $color_2: #ffffff;
  $color_3: #b0afaf;
  $background-color_1: rgba(255, 255, 255, 0.05);
  $border-color_1: initial;

.sidebar-nav {

.metismenu {
      background: 0 0;
     
      a {

color: $color_1;

&:active {
          color: $color_2;
          background-color: $background-color_1;
        }

&:focus {
          color: $color_2;
          background-color: $background-color_1;
        }

&:hover {
          color: $color_2;
          background-color: $background-color_1;
        }
      }

ul {

background-color: var(--bs-body-bg);
      }

.mm-active {
        >a {
          color: $color_2;
          background-color: $background-color_1;
        }
      }
    }
  }

.menu-label {
    color: $color_3;
  }

.metismenu {
    .has-arrow {
      &:after {
        border-color: $border-color_1;
      }
    }
  }

/* order offcanvas */

/* utilities */

.primaery-menu-close {
    @include sidelinks()
  }

.theme-icons {
    background-color: var(--bs-body-bg);
  }

.error {
    color: #fe1010;
  }

.dash-lable {
    background-color: #f3f3f3;
  }

form select.error,
  form textarea.error,
  form input.error,
  form input.error:focus,
  form textarea.error:focus,
  form select.error:focus {
    border-color: #fe1010 !important;
  }

.gmaps,
  .gmaps-panaroma {
    background: var(--bs-body-bg-2);
  }

.bootstrap-tagsinput {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
  }

.mail-read {
    color: #a2b0c5 !important;
    background-color: var(--bs-body-bg-2) !important;
  }

/* email box */
  .email-wrapper {
    background-color: var(--bs-body-bg);
  }
    .email-sidebar {
      background-color: var(--bs-body-bg);
      border-right: 1px solid var(--bs-border-color-translucent);
    }

.email-sidebar-header {
      background-color: var(--bs-body-bg);
      border-bottom: 1px solid var(--bs-border-color-translucent);
    }

.email-navigation {
      border-bottom: 1px solid var(--bs-border-color-translucent);

a {
        &.list-group-item {
          color: var(--bs-body-color-rgb);
          background-color: var(--bs-body-bg);

&:hover {
            background-color: var(--bs-body-bg-2);
          }

&.active {
            color: #0b5ed7;
            background-color: var(--bs-body-bg-2);
          }
        }
      }
    }

.email-header {
      background-color: var(--bs-body-bg);
      border-bottom: 1px solid var(--bs-border-color-translucent);
    }

.email-content {
      background-color: var(--bs-body-bg);
    }

.email-meeting {
      a {
        &.list-group-item {
          color: var(--bs-body-color-rgb);
          background-color: var(--bs-body-bg);

&:hover {
            background-color: var(--bs-body-bg-2);
          }
        }
      }
    }

.email-hangout {
      .chat-user-online {
        &:before {
          box-shadow: 0 0 0 2px #fff;
          background: #16e15e;
        }
      }
    }

.email-toggle-btn {
      color: var(--bs-body-color);
      background-color: var(--bs-body-bg);
    }

.email-time {
      color: var(--bs-body-color);
    }

.email-list {
      div {
        &.email-message {
          background-color: var(--bs-body-bg);
          border-bottom: 1px solid rgb(0 0 0 / 8%);
          color: var(--bs-body-color);

&:hover {
            transition: all .2s ease-out;
            background-color: var(--bs-body-bg-2) !important;
            color: var(--bs-body-color);
          }
        }
      }
    }

.email-star {
      color: #6c757d;
    }

.email-read-box {
      position: relative;
      height: 530px;
    }

.compose-mail-popup {
      width: 42%;
      position: fixed;
      bottom: -30px;
      right: 30px;
      z-index: 15;
      display: none;
    }

.compose-mail-toggled {
      display: block;
    }

.compose-mail-title {
      font-size: 16px;
    }

.compose-mail-close {
      width: 25px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      font-size: 14px;
      border-radius: 2px;
      background-color: rgb(255 255 255 / 0%);

&:hover {
        background-color: rgb(255 255 255 / 20%);
      }

}

/* chat box */

.chat-wrapper {
	width: auto;
	height: 600px;
	border-radius: .25rem;
	position: relative;
	background-color: var(--bs-body-bg);
	box-shadow: 0 .1rem .7rem rgba(0, 0, 0, .1);
}
.chat-sidebar {
	width: 340px;
	height: 100%;
	position: absolute;
	background-color: var(--bs-body-bg);
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 2;
	overflow: hidden;
	border-right: 1px solid var(--bs-border-color-translucent);
	border-top-left-radius: .25rem;
	border-bottom-left-radius: .25rem;
}
.chat-sidebar-header {
	width: auto;
	height: auto;
	position: relative;
	background-color: var(--bs-body-bg);
	border-bottom: 1px solid var(--bs-border-color);
	border-right: 0 solid rgba(0, 0, 0, .125);
	border-top-left-radius: .25rem;
	padding: 15px;
	.chat-user-online {
		&:before {
			content: '';
			position: absolute;
			bottom: 7px;
			left: 40px;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			box-shadow: 0 0 0 2px #fff;
			background: #16e15e;
		}
	}
}
.chat-sidebar-content {
	padding: 0;
}
.chat-user-online {
	position: relative;
}
.chat-list {
	position: relative;
	height: 300px;
	.chat-user-online {
		&:before {
			content: '';
			position: absolute;
			bottom: 7px;
			left: 36px;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			box-shadow: 0 0 0 2px #fff;
			background: #16e15e;
		}
	}
	.list-group-item {
		border: 1px solid rgb(0 0 0 / 0%);
		background-color: transparent;
		&:hover {
			border: 1px solid rgb(0 0 0 / 0%);
			background-color: rgb(13 110 253 / .12);
		}
		&.active {
			background-color: rgb(13 110 253 / .12);
		}
	}
}
.chat-content {
	margin-left: 340px;
	padding: 85px 15px 15px 15px;
	position: relative;
	width: auto;
	height: 520px;
}
.chat-header {
	position: absolute;
	height: 70px;
	left: 340px;
	right: 0;
	top: 0;
	padding: 15px;
	background-color: var(--bs-body-bg);
	border-bottom: 1px solid var(--bs-border-color);
	border-top-right-radius: .25rem;
	z-index: 1;
}
.chat-footer {
	position: absolute;
	height: 70px;
	left: 340px;
	right: 0;
	bottom: 0;
	padding: 15px;
	background: var(--bs-body-bg);
	border-top: 1px solid var(--bs-border-color);
	border-bottom-right-radius: .25rem;
}
.chat-footer-menu {
  display: none;
	a {
		display: inline-block;
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 18px;
		color: var(--bs-body-color);
		text-align: center;
		border-radius: 50%;
		margin: 3px;
		background-color: var(--bs-body-bg-2);
		border: 1px solid var(--bs-border-color);
	}
  @media (min-width:1280px) {
    display: block;
  }
}
.chat-tab-menu {
	li {
		a {
			&.nav-link {
				padding: .3rem .2rem;
				line-height: 1.2;
				color: var(--bs-body-color);
			}
		}
	}
}
.chat-tab-menu .nav-pills .nav-link.active,
.chat-tab-menu .nav-pills .show>.nav-link {
	color: #008cff;
	background-color: rgb(0 123 255 / 0%);
}
.chat-title {
	font-size: 14px;
	color: #272b2f;
}
.chat-msg {
	font-size: 13px;
	color: #6c757d;
}
.chat-time {
	font-size: 13px;
	color: #6c757d;
}
.chart-online {
	color: #16e15e;
}
.chat-top-header-menu {
  display: none;
	a {
		display: inline-block;
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 18px;
		color: var(--bs-body-color);
		text-align: center;
		border-radius: 50%;
		margin: 3px;
		background-color: var(--bs-body-bg-2);
		border: 1px solid var(--bs-border-color);
	}
  @media (min-width:1280px) {
    display: block;
  }
}
.chat-content-leftside {
	.chat-left-msg {
		width: fit-content;
		background-color: #eff2f5;
		padding: .8rem;
		border-radius: 12px;
		max-width: 480px;
		text-align: left;
		border-top-left-radius: 0;
    color: #fff;
	}
}
.chat-content-rightside {
	.chat-right-msg {
		width: fit-content;
		background-color: #dcedff;
		padding: .8rem;
		border-radius: 12px;
		float: right;
		max-width: 480px;
		text-align: left;
		border-bottom-right-radius: 0;
    color: #fff;
	}
}
.chat-toggle-btn {
	width: 40px;
	height: 40px;
	line-height: 40px;
	margin-right: 15px;
	text-align: center;
	font-size: 24px;
	color: #6c757d;
	border-radius: 50%;
	cursor: pointer;
	background-color: #fff;
	border: 1px solid rgb(0 0 0 / 15%);
  @media (min-width:1280px) {
    display: none;
  }
}

}

Name	Size	Permissions	Action
📄 .htaccess	218 bytes
📁 755944	-
📄 index.php	33,708 bytes

관리-도구

편집 파일: dark-theme.scss

Sid Gifari File Manager