@charset 'utf-8'; $win-min-w: 700px; $win-min-h: 600px; html { height: 100%; overflow: hidden; } body { position: relative; width: 100%; height: 100%; /*min-width: 1160px; min-height: 800px;*/ min-width: $win-min-w; min-height: $win-min-h; overflow: auto; padding: 0; margin: 0; color: #333; font-family: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움', Gulim, '굴림'; font-size: 14px; line-height: 18px !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } div, p, ol, ul, li, h1, h2, h3, h4, h5, h6, form, iframe, dl, dt, dd { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ul, ol { list-style: none; } $lg-red: ( 50: #ffffff, 100: #fff9fc, 200: #f1e1e5, /*300: #f06292,*/ 300: #ef4c73, 400: #ec407a, 500: #ed097e, 600: #d81b60, 700: #c2185b, 800: #ad1457, /*900: #880e4f,*/ 900: #5f2a41, A100: #ff80ab, A200: #ff4081, A400: #ff3399, A700: #c51162, B100: #4f4f4f, B200: #67545b, G100: #ef4c73, G900: #352a37, contrast: ( 50: $dark-primary-text, 100: $dark-primary-text, 200: $dark-primary-text, 300: $dark-primary-text, 400: $light-primary-text, 500: $light-primary-text, 600: $light-primary-text, 700: $light-primary-text, 800: $light-primary-text, 900: $light-primary-text, A100: $dark-primary-text, A200: $light-primary-text, A400: $light-primary-text, A700: $light-primary-text, B100: $light-primary-text, G100: $dark-primary-text, G900: $light-primary-text ) ); $aquaBlue-daesang: ( 50: #f9feff, 100: #ebfdff, 200: #a7f3fd, 300: #4dd0e1, 400: #26c6da, 500: #00bcd4, 600: #00b6d5, 700: #1ea7b9, 800: #0367a6, 900: #024873, A100: #84ffff, A200: #18ffff, A400: #00e5ff, A700: #06a6c1, B100: #2d3a4a, B200: #00b6d5, //,#47667fbackgroundcolor G100: #0367a6, /*G900: #192a2c,*/ G900: #6dd5ed, contrast: ( 50: $dark-primary-text, 100: $dark-primary-text, 200: $dark-primary-text, 300: $dark-primary-text, 400: $dark-primary-text, 500: $light-primary-text, 600: $light-primary-text, 700: $light-primary-text, 800: $light-primary-text, 900: $light-primary-text, A100: $dark-primary-text, A200: $dark-primary-text, A400: $dark-primary-text, A700: $dark-primary-text, B100: $light-primary-text, G100: $dark-primary-text, G900: $light-primary-text ) ); $daesang-grey: ( 50: #fafafa, 100: #f5f5f5, 200: #eeeeee, 300: #e0e0e0, 400: #bdbdbd, 500: #9e9e9e, 600: #757575, 700: #616161, 800: #424242, 900: #2d3a4a, A100: #ffffff, A200: #eeeeee, A400: #bdbdbd, A700: #1e2b3a, contrast: ( 50: $dark-primary-text, 100: $dark-primary-text, 200: $dark-primary-text, 300: $dark-primary-text, 400: $dark-primary-text, 500: $dark-primary-text, 600: $light-primary-text, 700: $light-primary-text, 800: $light-primary-text, 900: $light-primary-text, A100: $dark-primary-text, A200: $dark-primary-text, A400: $dark-primary-text, A700: $light-primary-text ) ); @mixin ucap-material-theme($theme) { @include ucap-core-theme($theme); } @mixin ucap-core-theme($theme) { $accent: map-get($theme, accent); $warn: map-get($theme, warn); $primary: map-get($theme, primary); $background: map-get($theme, background); $foreground: map-get($theme, foreground); $gradient-darkest: mat-color($accent, G900); $gradient-light: mat-color($accent, G100); //basic .bg-primary-darkest { background: mat-color($primary, 900); color: mat-color($primary, default-contrast); } .bg-primary-dark { background: mat-color($primary, 900); color: mat-color($primary, default-contrast); } .bg-primary-light { background: mat-color($primary, 300); color: mat-color($primary, default-contrast); } .bg-primary-color { background: mat-color($primary); color: mat-color($primary, default-contrast); } .bg-accent-darkest { background: mat-color($accent, 800); color: mat-color($primary, default-contrast); } .bg-accent-dark { background: mat-color($accent, B200); color: mat-color($primary, default-contrast); } .bg-accent-light { background: mat-color($accent, 300); color: mat-color($primary, default-contrast); } .bg-accent-bright { background-color: mat-color($accent, 100); } .bg-accent-brightest { background: mat-color($accent, 50); color: mat-color($primary, $dark-primary-text); } .bg-accent-color { background: mat-color($accent); color: mat-color($accent, default-contrast); } .bg-warn-color { background-color: mat-color($warn, 300); } .bg-warn-darkest { background-color: mat-color($warn, 600); } .text-primary-light { color: mat-color($primary, 500); } .text-primary-color { color: mat-color($primary); } .text-accent-dark { color: mat-color($accent, 600); } .text-accent-darkest { color: mat-color($accent, 800); } .text-accent-color { color: mat-color($accent); } .text-warn-color { color: mat-color($warn, 800); } .border-primary-color { border-color: 1px solid mat-color($primary); } .border-accent-bright { border-color: mat-color($accent, 300); } .border-accent-color { border-color: 1px solid mat-color($accent); } .stroke-accent-darkest { stroke: mat-color($accent, 800); } .border-warn-color { border: mat-color($warn); } .stroke-warn-color { stroke: mat-color($warn, 900); } // sass 정의 .mat-toolbar { background-color: mat-color($accent, B100); } .main-container { border-color: mat-color($accent, B100); } .global-menu { background-color: mat-color($accent, B100); } .ucap-clickable { cursor: pointer; } .policy { background-color: mat-color($accent, B100); } .mat-badge-accent .mat-badge-content, .weblink .mat-badge-content { background-color: mat-color($warn, 400); } .mat-tab-group.mat-primary .mat-ink-bar, body.theme-default .mat-tab-nav-bar.mat-primary .mat-ink-bar { background-color: mat-color($accent, 400); } .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary { background-color: mat-color($accent, 700); cursor: pointer; .mat-chip-remove { opacity: 0.6; } } .load-container .loader:after { background-color: mat-color($accent, 300); } .global-menu { .mat-tab-label[aria-selected='true'] { .mat-tab-label-content { .icon-item { background: mat-color($accent, 300); } } } } .mat-form-field-appearance-legacy { .mat-form-field-label { color: mat-color($primary); } .mat-hint { color: mat-color($primary); } .mat-form-field-underline { background-color: mat-color($primary); } } .mat-button-toggle-appearance-standard .mat-button-toggle-label-content { height: 34px; line-height: 34px; padding: 0 12px; } .app-dialog-full .mat-dialog-container { overflow: hidden; padding: 0px; background-color: rgba($color: #000000, $alpha: 0.7); box-shadow: none; border-radius: 0px; } .btn-main-float .bg-accent-dark { background: mat-color($accent, 600); color: mat-color($primary, default-contrast); } .current-head { display: flex; justify-content: center; padding: 0 10px; background-color: #eeeeee; background: $gradient-light; background: -webkit-linear-gradient( to right, $gradient-darkest, $gradient-light ); background: linear-gradient(to right, $gradient-darkest, $gradient-light); color: #ffffff; } mat-tab-group[vertical] { display: flex; flex-direction: row; .mat-tab-labels { display: flex; flex-direction: column !important; align-content: flex-start; .mat-tab-label { justify-content: flex-start; } } .mat-ink-bar { width: 0px !important; height: 50px; left: 98% !important; } } nav[mat-tab-nav-bar][vertical] { display: flex; flex-direction: row !important; .mat-tab-links { display: flex; flex-direction: column !important; } } .mat-form-field-appearance-legacy[inlineEdit] .mat-form-field-underline { background-color: transparent; } .messages .container { background: mat-color($accent, 50); } .profile-img { .responsive-chats-button:last-child { background-color: mat-color($accent, B100); } } .message-row { .message-main { .bubble { background-color: mat-color($accent, 100); border: 1px solid mat-color($accent, 200); overflow: hidden; } } &.me { .message-main { .bubble { background-color: #ffffff; border: 1px solid mat-color($primary, 300); .event-info { border-radius: 0 0 0 6px; } } } } } .chat-search-frame { .chat-search { //background-color: mat-color($accent, 600, 0.7); background-color: mat-color($accent, 800, 0.8); } } .translationForm { background-color: mat-color($accent, 200, 0.4); } .translation-preview { background-color: mat-color($accent, 900, 0.8); } .tree-has-child { li { .tree-node-body { background-color: mat-color($accent, 100); border: 1px solid mat-color($accent, 200); } } } }