/* List View */ #list-view h4 a { color: #000; text-decoration: none; display: block; width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } /* List */ #list-view #member-list tr.highlight td { background-color: #FFFAE5; } #list-view #member-list tr.highlight td:first-child { padding: 0 } #list-view #member-list .gender, #list-view #member-list td[class^="gender-"] { width: 5px; padding: 0; } #list-view #member-list td.gender-man { background-color: #34ADFF; } #list-view #member-list td.gender-woman { background-color: #FF3196; } #list-view #member-list td.gender-none { background-color: #DDDDDD; } /* Abstract */ #list-view #member-abstract, #list-view #member-card { list-style: none; margin: 0; padding: 0; } #list-view #member-abstract > li { background-color: #FFFFFF; width: 250px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .2); position: relative; overflow: hidden; margin: 5px; min-height: 280px; float: left; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #list-view #member-abstract hr { margin: 5px 0 10px; border-top: 1px solid #e6e6e6; } #list-view #member-abstract [class^="gender-"], #list-view #member-abstract [class*=" gender-"] { display: block; position: absolute; width: 0px; height: 0px; border-style: solid; border-width: 30px 30px 0 0; top: 0; left: 0; z-index: 1; } #list-view #member-abstract .gender-man { border-color: #34ADFF transparent transparent transparent; } #list-view #member-abstract .gender-woman { border-color: #FF3196 transparent transparent transparent; } #list-view #member-abstract .gender-none { border-color: #DDDDDD transparent transparent transparent; } #list-view #member-abstract .member-avatar { position: relative; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; overflow: hidden; height: 120px; } #list-view #member-abstract .member-avatar .action { position: absolute; z-index: 1; top: 45px; line-height: 30px; left: 50%; width: 80%; margin-left: -40%; text-align: center; visibility: hidden; } #list-view #member-abstract .member-avatar .action > a { color: #FFFFFF; text-decoration: none; font-size: 1.5em; background-color: #0088cc; padding: 3px 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-left: 5px; box-shadow: 5px 5px 10px rgba(0, 0, 0, .4); } #list-view #member-abstract .member-avatar .action > a:first-child { margin-left: 0px; } #list-view #member-abstract .member-avatar .action > a.edit { } #list-view #member-abstract .member-avatar .action > a.key { } #list-view #member-abstract .member-avatar .action > a.trash { background-color: #b94a48; } /*#list-view #member-abstract .member-avatar:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; margin: 0; background-color: #000000; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); }*/ #list-view #member-abstract > li .member-avatar:after { -webkit-backface-visibility: hidden; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; margin: 0; background-color: #000000; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } #list-view #member-abstract > li:hover .member-avatar:after { -webkit-backface-visibility: hidden; opacity: .4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); } #list-view #member-abstract > li:hover .member-avatar .action { visibility: visible; } #list-view #member-abstract .member-avatar img { width: 100%; } #list-view #member-abstract .member-info { padding: 10px; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } #list-view #member-abstract .member-name { margin: 0; } #list-view #member-abstract .member-roles { margin: 0; list-style: none; } #list-view #member-abstract .member-roles li { margin-bottom: 5px; } #list-view #member-abstract .member-roles .member-staturs { padding: 2px 4px; font-size: 11.844px; } /* Card */ #list-view #member-card > li { width: 160px; margin: 10px 20px; float: left; position: relative; } #list-view #member-card > li:hover .member-avatar .action { visibility: visible; } #list-view #member-card .highlight { background-color: #F0F0F0; outline: 1px dashed #9E9E9E; } #list-view #member-card .member-avatar { width: 150px; height: 150px; overflow: hidden; border-radius: 500px; border: 5px solid #FFFFFF; box-shadow: 0px 0px 5px rgba(0, 0, 0, .2); left: 0; top: 0; } #list-view #member-card .member-avatar.gender-man { border-color: #34ADFF; } #list-view #member-card .member-avatar.gender-woman { border-color: #FF3196; } #list-view #member-card .member-avatar.gender-nene { border-color: #DDDDDD; } #list-view #member-card .member-avatar img { /*width: 100%;*/ max-width: none; } #list-view #member-card > li .member-avatar:after { -webkit-backface-visibility: hidden; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; margin: 0; background-color: #000000; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } #list-view #member-card > li:hover .member-avatar:after { opacity: .4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); } /*#list-view #member-card .member-avatar > span { position: absolute; width: 150px; height: 150px; top: 5px; left: 5px; display: block; margin: 0; background-color: #000000; border-radius: 500px; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); }*/ #list-view #member-card .member-avatar .action { position: absolute; z-index: 1; top: 65px; line-height: 30px; left: 50%; width: 140px; margin-left: -70px; text-align: center; visibility: hidden; } #list-view #member-card .member-avatar .action > a { color: #FFFFFF; font-size: 1.2em; background-color: #0088cc; text-decoration: none; padding: 3px 5px; border-radius: 3px; margin-left: 5px; box-shadow: 5px 5px 10px rgba(0, 0, 0, .4); } #list-view #member-card .member-avatar .action > a:first-child { margin-left: 0px; } #list-view #member-card .member-avatar .action > a.edit { } #list-view #member-card .member-avatar .action > a.key { } #list-view #member-card .member-avatar .action > a.trash { background-color: #b94a48; } /* Profile */ #profile { } #profile #basic-info { position: absolute; width: 340px; margin-right: 10px; padding-right: 10px; border-right: 1px solid #e5e5e5; } #profile #basic-info .basic-profile { margin-left: 116px; } #profile #basic-info .basic-profile h4 { margin: 0 auto; max-width: 224px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #profile #basic-info .basic-profile .btn-group { display: block; margin-top: 20px; } #profile #basic-info .member-avatar { width: 103px; height: 103px; float: left; border: 3px solid #ffffff; -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; } #profile #basic-info .member-avatar:after { content: ""; -webkit-backface-visibility: hidden; } #profile #basic-info .member-avatar.gender-man { border-color: #34ADFF; } #profile #basic-info .member-avatar.gender-woman { border-color: #FF3196; } #profile #basic-info .member-avatar.gender-none { border-color: #DDDDDD; } #profile #member-roles { clear: both; margin-top: 30px; } #profile #member-roles .roles h4 { position: relative; border-bottom: 5px solid #b1b1b1; height: 8px; } #profile #member-roles .roles h4 span { position: absolute; background-color: #F3F3F3; padding: 0 5px; left: 50%; } #profile #member-roles .roles dl { background-color: #ffffff; padding: 10px; } #profile #member-roles .roles:last-child dl { margin-bottom: 0; } #profile #member-roles .roles dt { border-bottom: 1px dotted #e7e7e7; font-size: 1.2em; margin-top: 20px; } #profile #member-roles .roles dt:first-child { margin-top: 0px; } #profile #member-roles .roles dd { color: #999999; } #profile #module-navbar { margin-left: 10px; } #profile #module-navbar .navbar { margin-bottom: 15px; } #profile #member-module { margin-left: 360px; } #profile #member-module #module-content { padding: 0 0 0 10px; } #profile #member-module #module-content .content { right: 10px; padding-bottom: 10px; outline: none; } #profile #member-module #module-content .list-active { padding-bottom: 8px; /*border-bottom: 1px solid #DDD;*/ } /* Responsive */ @media (max-width: 979px) { #profile #member-info { width: 100%; position: relative; bottom: auto; top: auto; } #profile #member-info #basic-info { margin-bottom: 0; } #profile #member-info #role-groups { overflow: auto; } #profile #member-info #role-groups .content { margin-right: 0; position: static; overflow: auto; overflow-x: auto; } #profile .member-module { margin-left: 0; } }