443 lines
9.4 KiB
SCSS
443 lines
9.4 KiB
SCSS
@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);
|
|
}
|
|
}
|
|
}
|
|
}
|