pav
/
pav-fe-kac-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

다크모드 css

master
김지은 8 months ago
parent
80e8219636
commit
24fcaf2b53
4 changed files with 44 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/@core/layouts/components/menu/vertical-menu/VerticalMenuHeader.js
  2. 18
      src/@core/layouts/components/navbar/NavbarUser.js
  3. 37
      src/assets/css/custom.css
  4. 4
      src/containers/cstmrService/faq/FaqContainer.js

2
src/@core/layouts/components/menu/vertical-menu/VerticalMenuHeader.js
Unescape View File

@ -58,7 +58,7 @@ const VerticalMenuHeader = props => {
</NavLink>
</li>
<li className='nav-item nav-toggle'>
<div className='nav-link modern-nav-toggle cursor-pointer'>
<div className='nav-link modern-nav-toggle cursor-pointer color-wh'>
<Toggler />
<X
onClick={() => setMenuVisibility(false)}

18
src/@core/layouts/components/navbar/NavbarUser.js
Unescape View File

@ -15,13 +15,13 @@ const NavbarUser = props => {
const { topMenuCd } = useSelector(state => state.menuState);
// ** Function to toggle Theme (Light/Dark)
// const ThemeToggler = () => {
// if (skin === 'dark') {
// return <Sun className='ficon' onClick={() => setSkin('light')} />;
// } else {
// return <Moon className='ficon' onClick={() => setSkin('dark')} />;
// }
// };
const ThemeToggler = () => {
if (skin === 'dark') {
return <Sun className='ficon' onClick={() => setSkin('light')} />;
} else {
return <Moon className='ficon' onClick={() => setSkin('dark')} />;
}
};
const handlerTopMenu = type => {
localStorage.setItem('topMenuCd', type);
@ -148,13 +148,13 @@ const NavbarUser = props => {
</NavLink>
</NavItem>
</Nav>
{/* <div className='bookmark-wrapper d-flex align-items-center'>
<div className='bookmark-wrapper d-flex align-items-center'>
<NavItem className='d-none d-lg-block'>
<NavLink className='nav-link-style'>
<ThemeToggler />
</NavLink>
</NavItem>
</div> */}
</div>
{/* <div className='bookmark-wrapper d-flex align-items-center'>
<NavItem className='d-none d-lg-block'>
<NavLink className='nav-link-style'>

37
src/assets/css/custom.css
Unescape View File

@ -345,16 +345,16 @@ h1.logo span{display:block;color:#394182;font-weight:bold;letter-spacing:2px;fon
.dark-layout .login-logo{color:#bbb;}
.dark-layout .login-img{background:#161d31;}
.dark-layout .login-form{background:#283046;}
.dark-layout .login-form form{width:100%;padding:0 120px;}
/* .dark-layout .login-form form{width:100%;padding:0 120px;} */
.dark-layout .login-form .form-control{background:transparent;border:1px solid #404656;}
.dark-layout .login-form .form-control:focus{border-color:#8a1c05;border-right:1px solid #8a1c05;}
.dark-layout .login-form .form-control:focus{border-color:#7367f0;border-right:1px solid #7367f0;}
.dark-layout .login-form .form-label-group > label{color:#bbb;}
.dark-layout .login-form .form-control-position svg{color:#bbb;}
.dark-layout .login-form .form-control::placeholder{color:#bbb;}
.dark-layout .login-form .vx-checkbox-con .vx-checkbox{border-color: #404656;}
.dark-layout .login-txt{width:100%;margin-bottom:20px;}
.dark-layout .login-txt h2{color:#f4f4f4;font-family: "Montserrat", serif;}
.dark-layout .login-txt p{color:#bbb;font-family: "Montserrat", serif}
.dark-layout .login-txt h2{color:#f4f4f4}
.dark-layout .login-txt p{color:#bbb}
.full-btn button{width:100%;margin-bottom:10px;}
.login-link{margin-top:10px;}
@media screen and (max-width:1280px){
@ -1057,10 +1057,12 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
.faq .input-group-prepend{margin-left:-1px;}
.faq .input-group-prepend .input-group-text{border-radius:0.357rem;border-right:1px solid #d8d6de}
.dark-layout .faq .input-group-prepend .input-group-text{border-right:1px solid transparent}
.faq .search-feather{width:100%;max-width:50%}
.faq .faq-search{display:flex;align-items:center;}
.faq .tab-menu{margin-top:1rem}
.faq .tab-menu .nav-pills .nav-link{background:#f4f4f4;color:#555}
.dark-layout .faq .tab-menu .nav-pills .nav-link{background:#283046;color:#a9a9a9}
.faq .tab-menu .nav-pills .nav-item + .nav-item{margin-left:14px}
.faq .tab-menu .nav-pills .nav-link.active{background:#8a1c05;color:#fff;font-weight:600;}
.faq .tab-content{display:block;}
@ -1078,6 +1080,7 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
.faq .app-collapse .collapse-title{width:100%;}
.faq-q button{min-width:100px;position: relative;z-index: 2;}
.faq-a{display:flex;background:#f4f4f4;padding:1rem}
.dark-layout .faq-a{display:flex;background:#343D55;}
.faq-a-text{margin-top:4px;word-break: keep-all;margin-left:10px;display:block;width: calc(100% - 40px);font-weight: 400;}
.faq-modal .form-group label{font-size:0.875rem;font-weight:400;}
.input-radio-inline{display:flex;height:34px;align-items: center;}
@ -1163,4 +1166,28 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
.fsm-ti{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd;padding-bottom:0.5rem;margin-bottom:1rem}
.fsm-ti h5{font-weight:500}
.fsm-ti .btn-wrap button + button{margin-left:0.5rem}
.fsm-box .list-input label{font-size:0.875rem}
.fsm-box .list-input label{font-size:0.875rem}
/*dark-layout*/
.dark-layout .main-menu .navbar-header .navbar-brand .brand-text{color:#fff}
.dark-layout .color-wh .text-primary{color:#fff!important}
.main-menu.menu-dark .navigation > li ul .active{background:linear-gradient(118deg, #7367f0, rgba(115, 103, 240, 0.7));box-shadow: 0 0 10px 1px rgba(115, 103, 240, 0.7);}
.main-menu.menu-dark .navigation > li .active > a {color: #7367f0;margin-bottom: 0; }
.main-menu.menu-dark .navigation > li.active > a {background: linear-gradient(118deg, #7367f0, rgba(115, 103, 240, 0.7));}
.main-menu.menu-dark .navigation > li.active > a {box-shadow: 0 0 10px 1px rgba(115, 103, 240, 0.7);border-radius: 4px;}
.dark-layout .input-group:focus-within .form-control, .dark-layout .input-group:focus-within .input-group-text {border-color: #7367f0;box-shadow: none;}
.dark-layout .nav-tabs .nav-link:after {background: linear-gradient(30deg, #7367f0, rgba(115, 103, 240, 0.5)) !important;}
.dark-layout .btn-primary {border-color: #7367f0 !important;background-color: #7367f0 !important;}
.dark-layout .btn-primary:hover:not(.disabled):not(:disabled) {box-shadow: 0 8px 25px -8px #7367f0;}
.dark-layout .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before, .dark-layout .custom-radio .custom-control-input:checked ~ .custom-control-label::before {box-shadow: 0 2px 4px 0 rgba(115, 103, 240, 0.4) !important;}
.dark-layout .custom-control-input:checked ~ .custom-control-label::before {border-color: #7367f0; background-color: #7367f0;}
.dark-layout .btn-outline-primary {border: 1px solid #7367f0 !important;background-color: transparent;color: #7367f0; }
.dark-layout .btn-outline-primary:hover:not(.disabled):not(:disabled) {background-color: rgba(138, 28, 5, 0.04);}
.dark-layout .btn-outline-primary:hover:not(.disabled):not(:disabled) {color: #7367f0;}
.dark-layout .btn-outline-primary:not(:disabled):not(.disabled):active, .dark-layout .btn-outline-primary:not(:disabled):not(.disabled).active, .dark-layout .btn-outline-primary:not(:disabled):not(.disabled):focus {background-color: rgba(115, 103, 240, 0.2);}
.dark-layout .btn-outline-primary:not(:disabled):not(.disabled):active, .dark-layout .btn-outline-primary:not(:disabled):not(.disabled).active, .dark-layout .btn-outline-primary:not(:disabled):not(.disabled):focus {color: #7367f0;}
.dark-layout .nav-pills .nav-link.active {background-color: #7367f0!important;border-color: #7367f0;box-shadow: 0 4px 18px -4px rgba(115, 103, 240, 0.65);}
.dark-layout [class*='collapse-'] .card{border-color: #3b4253!important;}
.dark-layout .btn-flat-primary{color:#7367f0}
.dark-layout .btn-flat-primary:hover:not(.disabled):not(:disabled) { background-color: rgba(115, 103, 240, 0.12);}
.dark-layout .btn-flat-primary:active, .dark-layout .btn-flat-primary.active, .dark-layout .btn-flat-primary:focus {background-color: rgba(115, 103, 240, 0.2);}

4
src/containers/cstmrService/faq/FaqContainer.js
Unescape View File

@ -260,7 +260,7 @@ export default function FaqContainer() {
{/* User 권한일 경우 수정하기 버튼 미노출 */}
{user?.authId !== 'USER' && (
<div>
<Button.Ripple
<Button
color='flat-primary'
onClick={e => {
e.stopPropagation();
@ -268,7 +268,7 @@ export default function FaqContainer() {
}}
>
수정하기
</Button.Ripple>
</Button>
</div>
)}
</div>

Write Preview
Loading…
Cancel
Save