@charset "utf-8"; @import "../initial"; // // Widget // // Announcement widget // ## Gerneral styles for widgets .widget-content-title{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .w-annc { .w-annc__widget-title { @extend .unity-title; } .w-annc__list { margin: 0; padding: 0; list-style: none; } .w-annc__item { margin-bottom: 1.875em; } .label { font-size: 0.75rem; font-weight: normal; } .w-annc__meta { .w-annc__status-wrap, .w-annc__postdate-wrap, .w-annc__category-wrap { display: inline-block; margin-right: 0.2em; font-size: 1em; color: $theme-color-main; font-weight: normal; } i { color:$theme-color-main; } } .w-annc__subtitle { font-size: 1em; color: $theme-color-main; } .w-annc__entry-title { margin-bottom: 0.625em; } .w-annc__postdate-wrap { font-size: 1rem; color: #666; } .w-annc__title { font-family: $sub-font; color: #14324f; text-decoration: none; font-size: 1rem; &:hover { color: darken($theme-color-main, 10%); } } } // Widget-1 .widget-announcement-1 { .w-annc__img-wrap { height: 12.5em; margin: 0 0 1em 0; } .w-annc__title { font-family: $main-font; line-height: 1.3; font-size: 1.2rem; } } // Widget-2 .widget-announcement-2 { .w-annc__img-wrap { height: 12.5em; margin: 0 0 1em 0; } .w-annc__title { font-family: $main-font; line-height: 1.3; font-size: 1.2rem; } } // Widget-3 .widget-announcement-3 { .w-annc__img-wrap { height: 12.5em; margin: 0 0 1em 0; } .w-annc__title { font-family: $main-font; line-height: 1.3; font-size: 1.2rem; } } // Widget-4 .widget-announcement-4 { .w-annc__title { font-family: $main-font; line-height: 1.3; font-size: 1.2rem; } .w-annc__widget-title { float: left; } .w-annc__more { margin-top: 1.5em; } .w-annc__list > .w-annc__item:nth-child(3n+1) { clear: both; } .w-annc__img-wrap { height: 12.5em; margin: 0 0 1em 0; } } // Widget-5 .widget-announcement-5 { .w-annc__title { font-family: $main-font; line-height: 1.3; font-size: 1.2rem; } .w-annc__item { border-bottom: 0.0625em dashed lighten($theme-gray, 65%); padding-bottom: 1em; margin-bottom: 1em; } } // Widget-6 .widget-announcement-6 { .w-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .w-annc__entry-title { margin: 0; } .w-annc__category-wrap, .w-annc__status, .w-annc__title, .w-annc__postdate-wrap { font-size: 0.8125rem; } .w-annc__status { display: inline-block; } } // Widget-7 .widget-announcement-7 { .w-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .w-annc__entry-title { margin: 0; } .w-annc__category-wrap, .w-annc__status, .w-annc__title, .w-annc__postdate-wrap { font-size: 0.75rem; } .w-annc__status { display: inline-block; } } // ## Gerneral styles for table widgets .w-annc__postdate, .w-annc__category { white-space: nowrap; } // Widget-8 // ## Table .widget-announcement-8 { .w-annc__th { background-color: #858585; color: #fff; border-bottom: #cacaca 1px solid; border: none; } .w-annc__status { display: inline-block; font-size: 0.75rem; } tr:nth-of-type(odd){ background-color: #f9f9f9; } td { } a:hover { text-decoration: none; } } // Widget-9 .widget-announcement-9 { .w-annc__th { color: $theme-color-main; background: $theme-color-second; font-size: 1em; border: none; } .w-annc__status { display: inline-block; font-size: 0.75rem; } td { font-size: 1em; } a:hover { text-decoration: none; } } // Widget-10 .widget-announcement-10 { .w-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .w-annc__entry-title { margin: 0; } .w-annc__postdate-wrap { font-size: 1em; } .w-annc__status { display: inline-block; font-size: 0.75rem; } } // Widget-11 .widget-announcement-11 { .w-annc__item { margin-bottom: 0; padding-bottom: 1em; border-bottom: 1px solid #c2c2c2; transform: unset !important; transition-duration: 0.01s !important; } .w-annc__entry-title { margin: 0; } .w-annc__status { display: inline-block; font-size: 0.75rem; } } // Widget-12 // ## Table .widget-announcement-12 { .w-annc__th { color: $theme-color-main; background: $theme-color-second; font-size: 1em; border: none; } .w-annc__status { display: inline-block; font-size: 0.75rem; } td { font-size: 1em; } a:hover { text-decoration: none; } } // Widget-13 // ## Table .widget-announcement-13 { .w-annc__th { color: $theme-color-main; background: $theme-color-second; font-size: 1em; border: none; } .w-annc__status { display: inline-block; font-size: 0.75rem; } td { font-size: 1em; } a:hover { text-decoration: none; } } // Widget-14 .widget-announcement-14 { .w-annc__list { padding: 0.9em; } .w-annc__img-wrap { height: 18.75em; margin-bottom: 0.9375em; @media (min-width: $screen-md) { height: 12.5em; margin-bottom: 0; } } .w-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .w-annc__entry-title { margin: 0 0 0.625em 0; @media (min-width: $screen-md) { margin-bottom: 0; } } .w-annc__postdate-wrap { font-size: 1em; } .w-annc__status { display: inline-block; } .w-annc__postdate { font-size: 0.8125rem; } } //widget 15 .widget-announcement-15 { overflow: hidden; .w-annc__title { font-family: $main-font; line-height: 1.3; font-size: 1rem; } .w-annc__widget-title { float: left; } .w-annc__more { margin-top: 1.5em; } .w-annc__list > .w-annc__item:nth-child(3n+1) { clear: both; } .w-annc__list { justify-content: center; display: flex; } .w-annc__img-wrap { height: 12.5em; margin: 0 0 1em 0; overflow: hidden; } } //Widget 16 .widget-announcement-16 { .w-annc__entry-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .w-annc__title { font-family: $main-font; line-height: 1.3; font-size: 1rem; } .w-annc__item { padding: 0 0.5rem; } .w-annc__img-wrap { margin: 0 0 0.5rem 0; } } // Widget-17 .widget-announcement-17 { .w-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .w-annc__entry-title { margin: 0; } .w-annc__postdate-wrap { font-size: 1em; } .w-annc__status { display: inline-block; font-size: 0.75rem; } } // Announcement index // ## General style for index pages .i-annc { .i-annc__page-title { font-weight: bold; color: #1c4770; clear: both; float: none; font-size: 1.75em; border-left: 3px solid #1c4770; padding-left: 15px; letter-spacing: .05em; } .i-annc__list { margin: 0; padding: 0; list-style: none; } .i-annc__widget-title { @extend .unity-title; } .i-annc__item { overflow: hidden; margin-bottom: 1.875em; box-shadow: #0000004d 0 0 4px; border: 1px solid #bbb; margin: 0.5em; padding: 1em; &:hover{ border: 1px solid #55bbd0; box-shadow: #55bbd0e6 0 0 4px; } } .i-annc__img { width: 100%; max-width: 100%; height: auto; } .i-annc__th { background-color: #858585; color: #fff; border-bottom: #cacaca 1px solid; text-align: center; font-weight: bold; border: none; white-space: nowrap; } .i-annc__postdate, .i-annc__category, .i-annc__view-count { white-space: nowrap; font-family: $main-font; } span.new-date { font-size: 1.2em; padding: 0 0.2em; } .i-annc__status-wrap { span { display: inline-block; padding: .2em .6em .3em; &:last-child { margin: 0 0.3125em 0.1875em 0; display: inline-block; } } } td { // font-size: 0.8125rem; } .i-annc__title:hover { text-decoration: none; } .label { // font-size: 0.75rem; font-weight: normal; } .i-annc__meta { .i-annc__status-wrap, .i-annc__postdate-wrap, .i-annc__category-wrap { display: inline-block; margin-right: 0.2em; // font-size: 1em; color: $theme-color-main; font-weight: normal; } i { color: $theme-color-main; } } .i-annc__subtitle { font-size: 1em; color: $theme-color-main; } .i-annc__entry-title { margin-bottom: 0.625em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .i-annc__content-wrap{ padding-top: 1em; } .i-annc__title { font-family: $main-font; color:#333; text-decoration: none; text-decoration: none; &:hover { text-decoration: underline; color: #c15700; } } } // control datatable css table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before { background-color: $theme-color-second !important; } table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before { background-color: $theme-gray !important; } .i-annc__table .child span.dtr-data li { padding: 0 0.5em; } // Index-1 // Index-2 .index-announcement-1, .index-announcement-2 { .i-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .i-annc__title { font-weight: 600; &:before { content: "•"; color: #cccccc; font-size: 1rem; padding: 0 0.5em; } } .i-annc__entry-title { margin: 0; } .i-annc__category-wrap, .i-annc__postdate-wrap { font-size: 0.8125rem; color: #666666; } .i-annc__status { font-size: 0.8125rem; display: inline-block; } } // Index-3 // Index-4 .index-announcement-3, .index-announcement-4 { .i-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .i-annc__title { font-weight: 600; &:before { content: "•"; color: #cccccc; font-size: 1rem; padding: 0 0.5em; } } .i-annc__entry-title { margin: 0; } .i-annc__category-wrap, .i-annc__postdate-wrap { font-size: 0.8125rem; color: #666666; } .i-annc__status { font-size: 0.8125rem; display: inline-block; } } // Index-5 // Index-6 .index-announcement-5, .index-announcement-6 { .i-annc__img-wrap { margin: 0 0 1em; } .i-annc__title { font-family: $main-font; font-size: 1.2rem; line-height: 1.3; } } // Index-7 .index-announcement-7 { .i-annc__list { display: flex; flex-wrap: wrap; justify-content: center; } .i-annc__title { font-family: $main-font; line-height: 1.3; font-size: 1.2rem; } .i-annc__list > .i-annc__item { @media (max-width:767px) { width: calc( 100%/2 - 1.25em ); min-height: unset; margin: 0; } @media (max-width: $screen-xs) { width: 100%; } } .i-annc__list > .i-annc__item:nth-child(3n+1) { clear: both; } .i-annc__img-wrap { height: 12.5em; margin: 0 0 1em 0; img { @media (max-width:767px) { transform: scale(1) !important; } } } } // Index-8 .index-announcement-8 { .i-annc__title { font-family: $main-font; line-height: 1.3; font-size: 1.2rem; } .i-annc__item { border-bottom: 0.0625em dashed lighten($theme-color-main, 65%); margin-bottom: 1em; } } // Index-9 .index-announcement-9 { .i-annc__content-wrap { padding: 0 1em; } .i-annc__list { display: flex; flex-wrap: wrap; flex-direction: row; } .i-annc__entry-title, .i-annc__meta { margin-top: 0; padding-left: 0.5em; } .i-annc__title { font-family: $main-font; line-height: 1.3; font-size: 1.125rem; } .i-annc__item { border-bottom: 1px dashed #f3f4f5; // margin-bottom: 0; width: calc(100%/3); padding: 0; &:nth-child(odd) { border-left: 8px solid $theme-color-green; } &:nth-child(even) { border-left: 8px solid darken($color: $theme-color-green, $amount: 10); } @media (max-width:767px) { width: 100%; } } .i-annc__subtitle { text-align: left; font-size: 1em; } } // Index-16 .index-announcement-16 { td ul { margin: 0; padding: 0; list-style: none; } } // Index-17 .index-announcement-17 { .i-annc__item { margin-bottom: 0.8em; padding-bottom: 0.8em; border-bottom: 0.0625em dashed lighten($theme-gray, 65%); } .i-annc__title { &:before { } } .i-annc__entry-title { margin: 0; } .i-annc__category-wrap, .i-annc__postdate-wrap { font-size: 0.8125rem; color: #666666; } .i-annc__status { font-size: 0.8125rem; display: inline-block; } } // Announcement show .s-annc { .s-annc__show-title { @extend .unity-title; } .s-annc__meta-wrap { padding: 0.6em 1em; background: #F2F2F2; text-align: right;display: flex; justify-content: end; flex-wrap: wrap; @include clearfix; .s-annc__meta--item { font-size: 1rem; margin-right: 1em; float: left; i { color:#333; } } .s-annc__tag-wrap { position: relative; margin-right: 0; padding-left: 1.6em; clear: both; float: none; i { position: absolute; top: 0.4375em; left: 0; } } .s-annc__tag-wrap { .s-annc__tag { font-weight: normal; } } } .s-annc__post-wrap { @include clearfix; margin-bottom: 2em; .s-annc__sub-img { background: #eee; padding: 0.5em; border: 1px solid #e2e0e0; img { padding: 0; } .s-annc__img_description { margin: 0.5em 0; display: block; } } } .s-annc__related-wrap { padding-top: 1em; border-top: 0.0625em dotted $theme-gray-light; } .s-annc__related-file { margin-bottom: 0.9375em; } .s-annc__related-file, .s-annc__related-link { padding-bottom: 0.375em; padding-left: 1.6em; i { margin: 0.5em 0 0 -1.6em; float: left; color: darken($theme-gray-light, 10%); } } .s-annc__related-link-list, .s-annc__related-file-list { // display: inline-block; } .s-annc__flie-title,.s-annc__link-title { width: 100%; margin-bottom: 0.5em; margin-bottom: 10px; border-bottom: 1px solid #EEE; border-left: none; border-right: none; border-top: none; text-align: justify; color: #333; font-size: 1em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .s-annc__social > * { display: inline-block; vertical-align: top; } .s-annc__social .print-button { color: #fff; font-size: 0.688em; border-radius: 0.25em; padding: 0.125em 0.375em; background-color: $theme-color-main; } .s-annc__social .print-button:hover { background-color: lighten($theme-color-main, 10%); } } //index 10 .VivaTimeline dl { position: relative; top: 0; padding: 20px 0; margin: 0 } .VivaTimeline dl:before { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 100; width: 2px; margin-left: -1px; content: ''; background-color: #ccd1d9 } .VivaTimeline dl dt { position: relative; top: 30px; z-index: 200; width: 120px; padding: 3px 5px; margin: 0 auto 30px; font-weight: 400; color: #fff; text-align: center; background-color: #aab2bd; border-radius: 4px; behavior: url("/assets/ie_support/PIE2/PIE.htc"); -webkit-border-radius: 4px; -moz-border-radius: 4px } .VivaTimeline dl dd { position: relative; z-index: 200 } .VivaTimeline dl dd .circ { position: absolute; top: 40px; left: 50%; z-index: 200; width: 22px; height: 22px; margin-left: -11px; background-color: #4fc1e9; border: 4px solid #f5f7fa; border-radius: 50%; behavior: url("/assets/ie_support/PIE2/PIE.htc"); -webkit-border-radius: 50%; -moz-border-radius: 50% } .VivaTimeline dl dd .time { position: absolute; top: 31px; left: 50%; display: inline-block; width: 100px; padding: 10px 20px; color: #4fc1e9 } .VivaTimeline dl dd .events { position: relative; width: 47%; padding: 10px 0 0; margin-top: 31px; background-color: #CCC; border-radius: 4px; behavior: url("/assets/ie_support/PIE2/PIE.htc"); -webkit-border-radius: 4px; -moz-border-radius: 4px } .VivaTimeline dl dd .events:before { position: absolute; top: 12px; width: 0; height: 0; content: ''; border-style: solid; border-width: 6px } .VivaTimeline dl dd .events .events-object { margin: 0 auto; } .VivaTimeline dl dd .events .events-header { min-height: 30px; line-height: 20px; text-align: center; font-size: 1em; font-weight: bold; cursor: pointer; } .VivaTimeline dl dd .events .events-body { overflow: hidden; zoom: 1; background-color: #EEE; padding: 10px; } .VivaTimeline dl dd .events .events-body .row{ display:none; } .VivaTimeline dl dd .events .events-body .events-desc { text-indent: 2em; padding: 0 15px; } .VivaTimeline dl dd .events .events-footer { text-align:center; } .VivaTimeline dl dd .events .events-footer ol { list-style: none; margin: 0 auto; padding: 0; } .VivaTimeline dl dd .events .events-footer ol li { background: #32b487; border-radius: 5px; behavior: url("/assets/ie_support/PIE2/PIE.htc"); margin: 10px; display: inline-block; width: 10px; height: 10px; cursor: pointer; } .VivaTimeline dl dd .events .events-footer ol .active{ transform: scale(2); } .VivaTimeline dl dd.pos-right .time { margin-left: -100px; text-align: right } .VivaTimeline dl dd.pos-right .events { float: right } .VivaTimeline dl dd.pos-right .events:before { left: -12px; border-color: transparent #CCC transparent transparent } .VivaTimeline dl dd.pos-left .time { margin-left: 0; text-align: left } .VivaTimeline dl dd.pos-left .events { float: left } .VivaTimeline dl dd.pos-left .events:before { right: -12px; border-color: transparent transparent transparent #CCC } .VivaTimeline .carousel-indicators{ bottom: 0; } @media screen and (max-width: 767px) { .VivaTimeline dl:before { left: 90px } .VivaTimeline dl dt { margin: 0 30px 30px } .VivaTimeline dl dd .circ { left: 90px } .VivaTimeline dl dd .time { left: 20px } .VivaTimeline dl dd.pos-left .time { padding: 10px 0; margin-left: 0; text-align: left } .VivaTimeline dl dd.pos-left .events { float: right; width: 73%; margin-right: 4%; } .VivaTimeline dl dd.pos-left .events:before { left: -12px; border-color: transparent #CCC transparent transparent } .VivaTimeline dl dd.pos-right .time { padding: 10px 0; margin-left: 0; text-align: left } .VivaTimeline dl dd.pos-right .events { float: right; width: 73%; margin-right: 4%; } /* .VivaTimeline dl dd .events .events-body { display: none; } .VivaTimeline dl dd .events .events-footer { display: none; } */ } @media screen and (max-width: 500px) { .VivaTimeline dl dd.pos-left .events { float: right; width: 63%; margin-right: 4%; } .VivaTimeline dl dd.pos-right .events { float: right; width: 63%; margin-right: 4%; } } .index-announcement-18 { .i-annc__item { padding-top: 0.8em; padding-bottom: 0.8em; margin-bottom: 0; border-bottom: 1px solid #DDD; position: relative; &:hover{ background-color: #ffc; a{ color: #c15700; } } } .i-annc__title { // font-weight: 600; } .i-annc__entry-title { margin: 0; text-indent: -0.9em; margin-left: 0.9em; } .i-annc__category-wrap, .i-annc__postdate-wrap { font-size: 0.8125rem; color: #666666; } .i-annc__status { font-size: 0.8125rem; display: inline-block; } }