@charset "utf-8"; @import "../initial"; // // Index // // Member Index // ## Gerneral styles for Index .i-member-item{ &:hover{ .i-member-pic-wrap-outer{ filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); transition: .3s ease-out; } } } .i-member-pic-wrap-outer{ position: relative; width: 10em; height: 10em; } .i-member-pic-wrap{ background: #d7d7d7; display: flex; justify-content: center; align-items: center; } .i-member-pic-wrapinner{ width: 95%; height: 95%; text-align: center; clip-path: inherit; } tr[data-list="pd_title"]{ display:none!important; } .i-member-item-inner{ height: -webkit-fill-available; } tr.i-member-tr-head { background: radial-gradient(circle at 70% 80%, #00437c, transparent 60%), radial-gradient(circle at 25% 25%, #a0bfff80, transparent 40%), radial-gradient(circle at 50% 50%, #3c78ff4d, transparent 70%), linear-gradient(135deg, #00437c 0%, #00437c 60%, #80b5ff 100%); } .index-member-list { background: #fff; } .i-member-profile-item{ list-style: none; } .i-member-pic-wrap{ overflow: hidden; } .i-member-item{ &:hover{ img{ transform: scale(1.1) !important; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; -ms-transition: .3s ease-out; -o-transition: .3s ease-out; transition: .3s ease-out; } } } // Index 1 .index-member-1 { .i-member__status-title { @extend .unity-title; } .member-data-value-name, .member-data-value-2 { // white-space: nowrap; } .i-member-tr-head { &:nth-child(1n+2) { display: none; } th { background: transparent; color: #fff; min-width: 7em; } } @media(max-width:580px) { thead { display: none; } td { display: flex; &:before { content: attr(data-title); display: inline-block; width: auto; min-width: 40%; } } } } // Index 2 .index-member-2 { .i-member-section { max-width: 31.25em; margin: auto; } .i-member-status-title { @extend .unity-title; } .i-member-item-inner { background: none; border-radius: 0.25rem; padding: 1.5em 1rem; margin-bottom: 1em; box-shadow: #00000024 0px 5px 6px 0px; background: #ffffffa1; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); @media(max-width:768px){ display: flex; flex-wrap: wrap; justify-content: center; } } .i-member-profile-data-wrap{ @media(max-width:768px){ width: 100%; } } .i-member-pic-wrap { height: auto; margin-bottom: 1em; clip-path: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0% 50%); height: 10em; width: 10em; padding: 0; } .i-member-pic { width: 100%; padding: 0; height: 100%; object-fit: cover; } .i-member-profile-list { @include list-reset; } .i-member-profile-item { margin-bottom: 0.5em; font-size: $font-13; } // RWD @media screen and (min-width: $screen-sm) { .i-member-section { max-width: 100%; } .i-member-item-inner { } } } // Index 3 .index-member-3 { .i-member-section { margin: auto; } .i-member-list { display: flex; flex-flow: row wrap; margin: 0; } .i-member-item { border-radius: 0.3125em; float: none; margin: 0 1% 1.875em; width: 48%; } .i-member-item-inner { height: auto !important; } .i-member-status-title { @extend .unity-title; } .i-member-item-inner { background: none; } .i-member-item-inner { background: none; border-radius: 0.25rem; padding: 1.5em 1rem; margin-bottom: 1em; box-shadow: #00000024 0px 5px 6px 0px; background: #ffffffa1; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); @media(max-width:768px){ display: flex; flex-wrap: wrap; justify-content: center; } } .i-member-profile-data-wrap{ @media(max-width:768px){ width: 100%; } } .i-member-pic-wrap { height: auto; margin-bottom: 1em; clip-path: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0% 50%); height: 10em; width: 10em; padding: 0; } .i-member-pic { width: 100%; } .i-member-profile-list { @include list-reset; } .i-member-profile-item { margin-bottom: 0.5em; font-size: $font-13; } .i-member-item:nth-child(odd) { clear: both; } .i-member-item-inner {} .i-member-pic-wrap { padding: 0; } // RWD @media screen and (min-width: $screen-sm) { .i-member-section { max-width: 100%; } .i-member-item-inner { } } @media screen and (min-width: $screen-md) { .i-member-pic-wrap { position: relative; overflow: hidden; } } @media screen and (max-width: $screen-xs) { .i-member-item { width: 100%; } .i-member-item-inner { display: flex; } } } // Index 4 .index-member-4 { .i-member-section { max-width: 31.25em; margin: auto; } .i-member-status-title { @extend .unity-title; } .i-member-item-inner { background: none; border-radius: 0.25rem; padding: 0.75em 1rem; margin-bottom: 1em; background: #f3f3f3a3; box-shadow: #00000024 0px 5px 6px 0px; backdrop-filter: saturate(180%) blur(20px); } .i-member-profile-list { @include list-reset; } .i-member-profile-item { margin-bottom: 0.5em; font-size: $font-13; word-break: break-word; } .i-member-item:nth-child(4n+1) { clear: both; } // RWD @media screen and (min-width: $screen-sm) { .i-member-section { max-width: 100%; } .i-member-item-inner { } } } //index 5 .index-member-5 { .i-member-section { margin: auto; } .i-member-list { display: flex; flex-flow: row wrap; margin: 0; } .i-member-item { float: none; padding: 15px; @media (max-width:1280px) { width: calc( 100% / 3 ); } @media (max-width:767px) { width: calc( 100% / 2 ); } @media (max-width:580px) { width: 100%; } } .i-member-item-inner { height: auto !important; } .i-member-status-title { @extend .unity-title; } .i-member-item-inner { background: none; display: flex; flex-wrap: wrap; justify-content: center; } .i-member-pic-wrap { height: auto; margin-bottom: 16px; @media(max-width:580px) { overflow: hidden; border-radius: 50%; behavior: url("/assets/ie_support/PIE2/PIE.htc"); height: 14em; width: 14em; margin: 1.5em auto 1em auto; } } .i-member-pic { width: 100%; } .i-member-profile-list { @include list-reset; word-break: break-all; text-align: center; } .i-member-profile-item { font-size: 1em; line-height: 1.3; padding-top: 0.5em; letter-spacing: 1px; } .i-member-title { display: none; } .i-member-item:nth-child(4n+1) { clear: both; } .i-member-pic-wrap { padding: 0; clip-path: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0% 50%); height: 10em; width: 10em; } } //index 7 .index-member-7 { .i-member-section { margin: auto; } .i-member-list { display: flex; flex-flow: row wrap; margin: 0; } .i-member-item { float: none; padding: 15px; @media (max-width:1280px) { width: calc( 100% / 3 ); } @media (max-width:767px) { width: calc( 100% / 2 ); } @media (max-width:580px) { width: 100%; } } .i-member-item-inner { height: auto !important; } .i-member-status-title { @extend .unity-title; } .i-member-item-inner { background: none; } .i-member-pic-wrap { height: auto; margin-bottom: 16px; @media(max-width:580px) { overflow: hidden; border-radius: 50%; behavior: url("/assets/ie_support/PIE2/PIE.htc"); height: 14em; width: 14em; margin: 1.5em auto 1em auto; } } .i-member-pic { width: 100%; } .i-member-profile-list { @include list-reset; word-break: break-all; text-align: center; } .i-member-profile-item { font-size: 1em; letter-spacing: 1px; } .i-member-title { display: none; } .i-member-item:nth-child(4n+1) { clear: both; } .i-member-pic-wrap { padding: 0; } } //index 8 .index-member-8 { .member-data-value-name,.member-data-value-2{ white-space: unset!important; } .i-member-item{ background-color: transparent!important; } .i-member-section { margin: auto; } .i-member-list { display: flex; flex-flow: row wrap; margin: 0; } .i-member-item { float: none; padding: 15px; @media (max-width:1280px) { width: calc( 100% / 3 ); } @media (max-width:767px) { width: calc( 100% / 2 ); } @media (max-width:580px) { width: 100%; } } .i-member-item-inner { height: auto !important; display: block; } .i-member-status-title { @extend .unity-title; } .i-member-item-inner { box-shadow: 0 5px 16px 0 #00000024; background: #ffffffa1; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-radius: 0.8em; overflow: hidden; padding: 0 0 1em; } .i-member-profile-data-wrap { padding: 0 2em; } .i-member-pic-wrap { height:12em; margin-bottom: 16px; } .i-member-pic { width: 100%; } .i-member-profile-list { @include list-reset; word-break: break-all; text-align: center; } .i-member-profile-item { font-size: 0.8em; line-height: 1.3; letter-spacing: 1px; } .i-member-title { display: none; } .i-member-item:nth-child(4n+1) { clear: both; } .i-member-pic-wrap { padding: 0; } } // Show page .show-member { font-family: $sub-font; .memberul{ padding: 0; li{ margin-bottom: 0.5em; list-style: none; } } th, td { font-size: 0.938em; } .member-plugins { margin: 0; a { font-size: 0.938em; } } .row { padding-bottom: 1em; } .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { background-color:$theme-color-second; } .nav-pills>li>a { border-radius: unset; background-color: #eee; transition: all 0.5s; } .nav>li>a:focus, .nav>li>a:hover { background-color: darken($color: #eee, $amount: 10%); } .tab-content { border: 1px solid #eee; } .custom-scroll-arrow { border: unset; border-top: none; color: #428bca; font-size: 1.25em; margin-bottom: 0; padding-left: 6px; padding-right: 5px; padding-top: 6px; width: 20px; &:hover { background-color: unset; color: darken($color: #428bca, $amount: 10); } } @media screen and (max-width: 580px) { .row { display: flex; flex-direction: column; } .member-pic { width: 80%; margin: 0 auto 10px; } .member-data { width: 100%; } } } .show-member{ .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{ border: 0; } } // Index 9 .index-member-9 { .i-annc__page-title{ display: none; } @media(min-width:769px){ .i-member-profile-list{ display: flex; flex-wrap: wrap; } .i-member-profile-item.deputy { width: 100%; } .titlesection,.infosection{ width: 50%; } } .i-member-pic-wrap{ display: none!important; } .member-data-value-1 { color: #0693e3; font-size: 2em; } .member-data-value-name{ color: #0693e3; font-size: 2em; } .member-data-title-1,.member-data-title-name { display: none; } .i-member-section { max-width: 31.25em; margin: auto; } .i-member-status-title { @extend .unity-title; } .i-member-item-inner { background: none; padding: 1.5em 1rem; margin-bottom: 1em; border-bottom: 2px solid #333; @media(max-width:768px){ display: flex; flex-wrap: wrap; justify-content: center; } } .i-member-profile-data-wrap{ @media(max-width:768px){ width: 100%; } } .i-member-pic-wrap { height: auto; margin-bottom: 1em; clip-path: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0% 50%); height: 10em; width: 10em; padding: 0; } .i-member-pic { width: 100%; padding: 0; height: 100%; object-fit: cover; } .i-member-profile-list { @include list-reset; color: #737f85; } .i-member-profile-item { margin-bottom: 0.5em; font-size: $font-13; } // RWD @media screen and (min-width: $screen-sm) { .i-member-section { max-width: 100%; } .i-member-item-inner { } } }