24-10 css/my.css

body {
  font-family: '微軟正黑體';
}

/* 上方工具列按鈕 */
.btn-tools {
  color: #ffffff;
  background-color: transparent;
  border-color: transparent;
}

.btn-tools:hover,
.btn-tools:focus,
.btn-tools:active,
.btn-tools.active,
.open .dropdown-toggle.btn-tools {
  color: #ffffff;
  background-color: transparent;
  border-color: transparent;
}

.btn-tools:active,
.btn-tools.active,
.open .dropdown-toggle.btn-tools {
  background-image: none;
}

.btn-tools.disabled,
.btn-tools[disabled],
fieldset[disabled] .btn-tools,
.btn-tools.disabled:hover,
.btn-tools[disabled]:hover,
fieldset[disabled] .btn-tools:hover,
.btn-tools.disabled:focus,
.btn-tools[disabled]:focus,
fieldset[disabled] .btn-tools:focus,
.btn-tools.disabled:active,
.btn-tools[disabled]:active,
fieldset[disabled] .btn-tools:active,
.btn-tools.disabled.active,
.btn-tools[disabled].active,
fieldset[disabled] .btn-tools.active {
  background-color: transparent;
  border-color: transparent;
}

.btn-tools .badge {
  color: transparent;
  background-color: #ffffff;
}

.btn-tools div {
  font-size: 0.8rem;
  margin-top: 4px;
}

.btn-tools span {
  font-size: 0.9rem;
}

/* 導覽列底色 */
.bg-green {
  background: #276f6f;
  box-shadow: 0px 3px 8px 0px #000;
  z-index: 5;
}

.bg-green .navbar-nav .nav-link {
  color: rgb(255, 255, 255);
}

.bg-green .navbar-brand,
.bg-green .navbar-text {
  color: rgb(255, 255, 255);
}

.bg-green .nav-item.active .nav-link,
.bg-green .nav-item:hover .nav-link {
  color: #f7fe22;
}

.bg-green .dropdown-menu {
  background-color: #2c3232;
}

.bg-green .dropdown-item {
  color: #ffffff;
}

.bg-green .dropdown-item:hover {
  background-color: #3c70ef;
}

.btn-color1 {
  color: #ffffff;
  background-color: #389c90;
  border-color: #389c90;
}

.btn-color1:hover,
.btn-color1:focus,
.btn-color1:active,
.btn-color1.active,
.open .dropdown-toggle.btn-color1 {
  color: #ffffff;
  background-color: #2c7d74;
  border-color: #389c90;
}

.btn-color1:active,
.btn-color1.active,
.open .dropdown-toggle.btn-color1 {
  background-image: none;
}

.btn-color1.disabled,
.btn-color1[disabled],
fieldset[disabled] .btn-color1,
.btn-color1.disabled:hover,
.btn-color1[disabled]:hover,
fieldset[disabled] .btn-color1:hover,
.btn-color1.disabled:focus,
.btn-color1[disabled]:focus,
fieldset[disabled] .btn-color1:focus,
.btn-color1.disabled:active,
.btn-color1[disabled]:active,
fieldset[disabled] .btn-color1:active,
.btn-color1.disabled.active,
.btn-color1[disabled].active,
fieldset[disabled] .btn-color1.active {
  background-color: #389c90;
  border-color: #389c90;
}

.btn-color1 .badge {
  color: #389c90;
  background-color: #ffffff;
}

.btn-color2 {
  color: #ffffff;
  background-color: #c7982d;
  border-color: #c7982d;
}

.btn-color2:hover,
.btn-color2:focus,
.btn-color2:active,
.btn-color2.active,
.open .dropdown-toggle.btn-color2 {
  color: #ffffff;
  background-color: #967321;
  border-color: #c7982d;
}

.btn-color2:active,
.btn-color2.active,
.open .dropdown-toggle.btn-color2 {
  background-image: none;
}

.btn-color2.disabled,
.btn-color2[disabled],
fieldset[disabled] .btn-color2,
.btn-color2.disabled:hover,
.btn-color2[disabled]:hover,
fieldset[disabled] .btn-color2:hover,
.btn-color2.disabled:focus,
.btn-color2[disabled]:focus,
fieldset[disabled] .btn-color2:focus,
.btn-color2.disabled:active,
.btn-color2[disabled]:active,
fieldset[disabled] .btn-color2:active,
.btn-color2.disabled.active,
.btn-color2[disabled].active,
fieldset[disabled] .btn-color2.active {
  background-color: #c7982d;
  border-color: #c7982d;
}

.btn-color2 .badge {
  color: #c7982d;
  background-color: #ffffff;
}

.btn-color3 {
  color: #ffffff;
  background-color: #d96459;
  border-color: #d96459;
}

.btn-color3:hover,
.btn-color3:focus,
.btn-color3:active,
.btn-color3.active,
.open .dropdown-toggle.btn-color3 {
  color: #ffffff;
  background-color: #b05148;
  border-color: #d96459;
}

.btn-color3:active,
.btn-color3.active,
.open .dropdown-toggle.btn-color3 {
  background-image: none;
}

.btn-color3.disabled,
.btn-color3[disabled],
fieldset[disabled] .btn-color3,
.btn-color3.disabled:hover,
.btn-color3[disabled]:hover,
fieldset[disabled] .btn-color3:hover,
.btn-color3.disabled:focus,
.btn-color3[disabled]:focus,
fieldset[disabled] .btn-color3:focus,
.btn-color3.disabled:active,
.btn-color3[disabled]:active,
fieldset[disabled] .btn-color3:active,
.btn-color3.disabled.active,
.btn-color3[disabled].active,
fieldset[disabled] .btn-color3.active {
  background-color: #d96459;
  border-color: #d96459;
}

.btn-color3 .badge {
  color: #d96459;
  background-color: #ffffff;
}

.btn-color4 {
  color: #ffffff;
  background-color: #4aa5cc;
  border-color: #4aa5cc;
}

.btn-color4:hover,
.btn-color4:focus,
.btn-color4:active,
.btn-color4.active,
.open .dropdown-toggle.btn-color4 {
  color: #ffffff;
  background-color: #3c86a6;
  border-color: #4aa5cc;
}

.btn-color4:active,
.btn-color4.active,
.open .dropdown-toggle.btn-color4 {
  background-image: none;
}

.btn-color4.disabled,
.btn-color4[disabled],
fieldset[disabled] .btn-color4,
.btn-color4.disabled:hover,
.btn-color4[disabled]:hover,
fieldset[disabled] .btn-color4:hover,
.btn-color4.disabled:focus,
.btn-color4[disabled]:focus,
fieldset[disabled] .btn-color4:focus,
.btn-color4.disabled:active,
.btn-color4[disabled]:active,
fieldset[disabled] .btn-color4:active,
.btn-color4.disabled.active,
.btn-color4[disabled].active,
fieldset[disabled] .btn-color4.active {
  background-color: #4aa5cc;
  border-color: #4aa5cc;
}

.btn-color4 .badge {
  color: #4aa5cc;
  background-color: #ffffff;
}

.bg-title {
  background: #709698;
}